import { Host, h } from '@stencil/core';
import { getHostAttrs } from '../../utils';
import { getButtonOrLink } from '../../utils/getButtonOrLink';
/**
 * Outputs a pill as a <span>, <button>, or <a> tag using the BSDS pill styles.
 * @docsPage
 * @exSlot Pill Example
 */
export class BsPill {
  constructor() {
    /** Native attributes to pass through to the input element. */
    this.attrs = {};
    this.variant = undefined;
    this.status = undefined;
    this.href = undefined;
    this.active = undefined;
    this.disabled = undefined;
    this.passAttrs = '';
  }
  componentWillLoad() {
    this.attrs = getHostAttrs(this.hostEl, [
      'target',
      'type',
      ...this.passAttrs.split(',')
    ]);
  }
  render() {
    const { rootTag: TagName, buttonOrLinkAttrs } = getButtonOrLink(this, 'span');
    return (h(Host, null, h(TagName, Object.assign({ class: "bs-pill", "data-active": this.active, "data-slot": true, "data-status": this.status || undefined, "data-variant": this.variant || undefined, disabled: this.disabled, href: this.href }, this.attrs, buttonOrLinkAttrs), h("slot", null))));
  }
  static get is() { return "bs-pill"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-pill.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-pill.css"]
    };
  }
  static get properties() {
    return {
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'filter' | 'filter-add' | 'filter-remove' | 'live'",
          "resolved": "\"filter\" | \"filter-add\" | \"filter-remove\" | \"live\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Changes the variant of the pill. See data-variant in the pill docs for details."
        },
        "attribute": "variant",
        "reflect": false
      },
      "status": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'active' | 'positive' | 'warning' | 'error' | 'complete' | 'inactive'",
          "resolved": "\"active\" | \"complete\" | \"error\" | \"inactive\" | \"positive\" | \"warning\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Changes the status of the pill. See data-status in the pill docs for details."
        },
        "attribute": "status",
        "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 render the pill as an anchor tag."
        },
        "attribute": "href",
        "reflect": false
      },
      "active": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the active state on the pill, when the given variant has an associated active state.\nCurrently only applies to filter pills."
        },
        "attribute": "active",
        "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 pill, when output as <button> or <a>."
        },
        "attribute": "disabled",
        "reflect": false
      },
      "passAttrs": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "List additional attributes (comma-separated) to pass through to <span>, <button>, or <a>."
        },
        "attribute": "pass-attrs",
        "reflect": false,
        "defaultValue": "''"
      }
    };
  }
  static get elementRef() { return "hostEl"; }
}
//# sourceMappingURL=bs-pill.js.map
