import { Component, Host, h, Prop, Event } from '@stencil/core';
export class UxplButton {
  constructor() {
    this.onClick = (ev) => {
      if (!this.disabled || this.disabled === '') {
        this.clicked.emit(ev);
      }
    };
  }
  get styleType() {
    return ' pl-button pl-button--' + (this.type === undefined ? 'primary' : this.type);
  }
  render() {
    const { styleType } = this;
    return (h(Host, { style: { pointerEvents: this.disabled || this.disabled === '' ? 'none' : undefined } },
      h("button", { disabled: this.disabled || this.disabled === '', type: "button", part: "button", class: styleType, style: {
          'background-color': this.color ? this.color : undefined,
          'border-color': this.color ? this.color : undefined,
          'color': this.textColor ? this.textColor : undefined,
          'width': this.width ? this.width : undefined,
          'height': this.height ? this.height : undefined,
          'min-height': this.height ? this.height : undefined,
          'max-height': this.height ? this.height : undefined
        }, onClick: (e) => this.onClick(e) },
        this.icon ?
          h("img", { class: "pl-button__icon", "aria-hidden": "true", src: this.icon })
          :
            '',
        h("span", { class: "pl-button__label" },
          h("slot", null))),
      h("div", { class: "popup-container" },
        h("slot", { name: "popup" }))));
  }
  static get is() { return "uxpl-button"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-button.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-button.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'primary' | 'secondary' | 'cta' | 'danger' | 'no-border' | 'icon-only'",
        "resolved": "\"cta\" | \"danger\" | \"icon-only\" | \"no-border\" | \"primary\" | \"secondary\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "icon",
      "reflect": false
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "color",
      "reflect": false
    },
    "padding": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "padding",
      "reflect": false
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "text-color",
      "reflect": false
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    },
    "height": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "height",
      "reflect": false
    },
    "disabled": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "clicked",
      "name": "clicked",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
