import { Component, Prop, h, Listen, State, Element } from '@stencil/core';
export class TeliaButton {
  constructor() {
    /** Describe unclear button context for better accessibility support */
    this.allyLabel = null;
    /** Set button disabled */
    this.disabled = false;
    /** Set button type */
    this.type = 'submit';
    /** Set button full width, button will take up the full width of its container */
    this.fullWidth = false;
    /** Set button size to small or default medium */
    this.size = 'md';
    /** Specifies that the button should have input focus when the page loads */
    this.htmlAutofocus = false;
    /** Specifies that the form is not to be validated when it is submitted */
    this.formnovalidate = false;
    /** Internal state for styling purpose of the icon */
    this.iconOnly = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-button';
    this.parseJSON = (prop) => {
      return typeof prop === 'string' && prop ? JSON.parse(prop) : prop;
    };
    /**
     * Returns content provided via props or fallbacks to slots
     * @private
     */
    this.renderContent = () => {
      if (this.text || this.leftIcon || this.rightIcon) {
        const leftIconParsed = this.parseJSON(this.leftIcon);
        const rightIconParsed = this.parseJSON(this.rightIcon);
        return [
          leftIconParsed ? h("telia-icon", Object.assign({ slot: "left" }, leftIconParsed)) : null,
          this.text,
          rightIconParsed ? (h("telia-icon", Object.assign({ slot: "right" }, rightIconParsed))) : null,
        ].filter(el => el);
      }
      return [h("slot", { name: "left" }), h("slot", null), h("slot", { name: "right" })];
    };
  }
  clickHandler(ev) {
    if (this.disabled) {
      ev.preventDefault();
      ev.stopPropagation();
    }
  }
  componentWillLoad() {
    // In order to apply correct paddings for icon only button's
    this.iconOnly =
      !this.host.textContent && this.host.innerHTML.includes('telia-icon');
  }
  render() {
    return (h("button", Object.assign({ class: {
        'telia-button': true,
        [`telia-button--${this.variant}`]: !!this.variant,
        'telia-button--full-width': this.fullWidth,
        [`telia-button--${this.size}`]: true,
        [`telia-button--icon-only`]: this.iconOnly,
      } }, (typeof this.allyExpanded === 'boolean' && {
      'aria-expanded': this.allyExpanded.toString(),
    }), { "aria-controls": this.allyControls, "aria-label": this.allyLabel, autoFocus: this.htmlAutofocus, disabled: this.disabled, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget, type: this.type, value: this.value }),
      h("telia-vst", { dataTrackingId: this.dataTrackingId }),
      this.renderContent()));
  }
  static get is() { return "telia-button"; }
  static get originalStyleUrls() { return {
    "$": ["telia-button.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-button.css"]
  }; }
  static get properties() { return {
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ButtonVariantType",
        "resolved": "\"destructive\" | \"expressive\" | \"expressive-white\" | \"primary\" | \"primary-white\" | \"secondary\" | \"secondary-white\" | \"tertiary-purple\" | \"text\"",
        "references": {
          "ButtonVariantType": {
            "location": "import",
            "path": "../../types/ButtonVariant"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Set button variant"
      },
      "attribute": "variant",
      "reflect": false
    },
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "allyControls": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If this button controls (for instance expands or contracts) another\nelement, use this prop to set the id of the controlled element."
      },
      "attribute": "ally-controls",
      "reflect": false
    },
    "allyExpanded": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If this button has expanded an element, set this prop to true."
      },
      "attribute": "ally-expanded",
      "reflect": false
    },
    "allyLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Describe unclear button context for better accessibility support"
      },
      "attribute": "ally-label",
      "reflect": false,
      "defaultValue": "null"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Set button disabled"
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ButtonTypeType",
        "resolved": "\"button\" | \"submit\"",
        "references": {
          "ButtonTypeType": {
            "location": "local"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Set button type"
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'submit'"
    },
    "form": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "ID of the form this component belongs to. Should only be set If the component is not wrapped inside its form element."
      },
      "attribute": "form",
      "reflect": false
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Value submitted with form data"
      },
      "attribute": "value",
      "reflect": false
    },
    "fullWidth": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "Set button full width, button will take up the full width of its container"
      },
      "attribute": "full-width",
      "reflect": false,
      "defaultValue": "false"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "ButtonSizes",
        "resolved": "\"lg\" | \"md\" | \"sm\"",
        "references": {
          "ButtonSizes": {
            "location": "import",
            "path": "../../types/ButtonSizes"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Set button size to small or default medium"
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'md'"
    },
    "htmlAutofocus": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies that the button should have input focus when the page loads"
      },
      "attribute": "html-autofocus",
      "reflect": false,
      "defaultValue": "false"
    },
    "formaction": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies the URL that processes the information submitted by the button"
      },
      "attribute": "formaction",
      "reflect": false
    },
    "formenctype": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies how to encode the form data that is submitted"
      },
      "attribute": "formenctype",
      "reflect": false
    },
    "formmethod": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies the HTTP method used to submit the form"
      },
      "attribute": "formmethod",
      "reflect": false
    },
    "formnovalidate": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies that the form is not to be validated when it is submitted"
      },
      "attribute": "formnovalidate",
      "reflect": false,
      "defaultValue": "false"
    },
    "formtarget": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Indicated where to display the response from submitting the form"
      },
      "attribute": "formtarget",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the button"
      },
      "attribute": "name",
      "reflect": false
    },
    "text": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Text which will be displayed inside the button"
      },
      "attribute": "text",
      "reflect": false
    },
    "leftIcon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | IconProps",
        "resolved": "string | { name: IconName; size: \"sm\" | \"md\" | \"lg\"; allyTitle: string; dataTestid: string; }",
        "references": {
          "IconProps": {
            "location": "import",
            "path": "../../types/IconProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Telia-icon properties passed as an object used to create icon on left side of the text"
      },
      "attribute": "left-icon",
      "reflect": false
    },
    "rightIcon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | IconProps",
        "resolved": "string | { name: IconName; size: \"sm\" | \"md\" | \"lg\"; allyTitle: string; dataTestid: string; }",
        "references": {
          "IconProps": {
            "location": "import",
            "path": "../../types/IconProperties"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Telia-icon properties passed as an object used to create icon on right side of the text"
      },
      "attribute": "right-icon",
      "reflect": false
    }
  }; }
  static get states() { return {
    "iconOnly": {}
  }; }
  static get elementRef() { return "host"; }
  static get listeners() { return [{
      "name": "click",
      "method": "clickHandler",
      "target": undefined,
      "capture": true,
      "passive": false
    }]; }
}
