import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import { useScroll } from "./useScroll";
/**
 * @uiName Scroll Button
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
 * @slots [{"name":"", "title":"Button Content"}]
 * @slotEditor richText
 */
export class Scroll {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Scroll animation style
     * @uiType string
     * @uiEnum ["smooth", "auto"]
     * @uiEnumNames ["Smooth", "Auto"]
     */
    this.scrollAnimation = "smooth";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const { callbacks } = useScroll(this);
    const vanillaStyleString = `
    *::part(secondarybutton-base),
    sl-button[type="secondary"]::part(base) {
      font-family: var(--sqm-primary-font);
      background-color: var(--sqm-secondary-button-background);
      color: var(--sqm-secondary-button-color);
      border-color: var(--sqm-secondary-button-color-border);
      border-radius: var(--sqm-secondary-button-radius);
    }

    *::part(secondarybutton-base):hover,
    sl-button[type="secondary"]::part(base):hover {
      background-color: var(--sqm-secondary-button-background-hover);
      color: var(--sqm-secondary-button-color-hover);
      border-color: var(--sqm-secondary-button-border-color-hover);
    }
  `;
    return (h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle },
      h("style", { type: "text/css" }, vanillaStyleString),
      (this.iconSlot || this.iconName) && (h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })),
      this.buttonText,
      h("slot", null)));
  }
  static get is() { return "sqm-scroll"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "buttonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "button-text",
      "reflect": false
    },
    "scrollTagName": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Scroll tag name",
            "name": "uiName"
          }],
        "text": "The name of the HTML tag you would like to scroll to. E.g referral-table"
      },
      "attribute": "scroll-tag-name",
      "reflect": false
    },
    "scrollId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Scroll ID",
            "name": "uiName"
          }],
        "text": "ID applied to the HTML tag you would like to scroll to. E.g tab-1"
      },
      "attribute": "scroll-id",
      "reflect": false
    },
    "scrollAnimation": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"smooth\" | \"auto\"",
        "resolved": "\"auto\" | \"smooth\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Scroll animation style",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"smooth\", \"auto\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Smooth\", \"Auto\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "scroll-animation",
      "reflect": false,
      "defaultValue": "\"smooth\""
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Size",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"small\", \"medium\", \"large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Small\", \"Medium\", \"Large\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "size",
      "reflect": false
    },
    "outline": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Outline",
            "name": "uiName"
          }],
        "text": "Draws an outlined button."
      },
      "attribute": "outline",
      "reflect": false
    },
    "pill": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Pill",
            "name": "uiName"
          }],
        "text": "Draws a pill-style button with rounded edges."
      },
      "attribute": "pill",
      "reflect": false
    },
    "circle": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Circle",
            "name": "uiName"
          }],
        "text": "Draws a circle button."
      },
      "attribute": "circle",
      "reflect": false
    },
    "iconSlot": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Icon slot",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"prefix\", \"suffix\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Prefix\", \"Suffix\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "icon-slot",
      "reflect": false
    },
    "iconName": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Icon",
            "name": "uiName"
          }],
        "text": "Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive."
      },
      "attribute": "icon-name",
      "reflect": false
    },
    "mobile": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Full width on mobile",
            "name": "uiName"
          }],
        "text": "The button becomes full width if the screen size is smaller than 500px"
      },
      "attribute": "mobile",
      "reflect": false
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
