import { Host, h } from '@stencil/core';
import { getHostAttrs } from '../../utils';
import { getButtonOrLink } from '../../utils/getButtonOrLink';
/**
 * Outputs a button or anchor tag using the BSDS button styles.
 * @docsPage
 * @exSlot Click Me
 */
export class BsButton {
  constructor() {
    /** Native attributes to pass through to the input element. */
    this.attrs = {};
    this.variant = undefined;
    this.disabled = undefined;
    this.ghostBtn = undefined;
    this.href = undefined;
    this.passAttrs = '';
    this.textBtn = undefined;
    this.size = undefined;
  }
  handleClick(e) {
    if (this.disabled) {
      e.preventDefault();
      e.stopPropagation();
    }
  }
  componentWillLoad() {
    this.attrs = getHostAttrs(this.hostEl, [
      'download',
      'target',
      'type',
      'title',
      ...this.passAttrs.split(','),
    ]);
  }
  render() {
    const { rootTag: TagName, buttonOrLinkAttrs } = getButtonOrLink(this, 'button');
    return (h(Host, { "data-disabled": this.disabled || undefined }, h(TagName, Object.assign({ "data-slot": true, class: "bs-button", "data-ghost": this.ghostBtn, "data-size": this.size, "data-text": this.textBtn, "data-variant": this.variant, disabled: this.disabled, href: this.href }, this.attrs, buttonOrLinkAttrs), h("slot", null))));
  }
  static get is() { return "bs-button"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-button.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-button.css"]
    };
  }
  static get properties() {
    return {
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'secondary' | 'positive' | 'warning' | 'negative'",
          "resolved": "\"negative\" | \"positive\" | \"secondary\" | \"warning\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Changes the variant of the button. See data-variant in the button docs for details."
        },
        "attribute": "variant",
        "reflect": false
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the disabled state on the button."
        },
        "attribute": "disabled",
        "reflect": false
      },
      "ghostBtn": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Apply the ghost button style. See data-ghost in the button docs for details."
        },
        "attribute": "ghost-btn",
        "reflect": false
      },
      "href": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass in a url to convert a button to an anchor tag."
        },
        "attribute": "href",
        "reflect": false
      },
      "passAttrs": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "List additional attributes (csv format) to pass through to <button> or <a>."
        },
        "attribute": "pass-attrs",
        "reflect": false,
        "defaultValue": "''"
      },
      "textBtn": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Apply the text button style. See data-text in the button docs for details."
        },
        "attribute": "text-btn",
        "reflect": false
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'sm'",
          "resolved": "\"sm\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the size of the button."
        },
        "attribute": "size",
        "reflect": false
      }
    };
  }
  static get elementRef() { return "hostEl"; }
  static get listeners() {
    return [{
        "name": "click",
        "method": "handleClick",
        "target": undefined,
        "capture": true,
        "passive": false
      }];
  }
}
//# sourceMappingURL=bs-button.js.map
