import { Host, h } from '@stencil/core';
import { getHostAttrs, genId } from '../../utils';
/**
 * @docsPage
 */
export class BsSwitch {
  constructor() {
    /** Native attributes to pass through to the input element. */
    this.attrs = {};
    this.checked = false;
    this.disabled = false;
    this.hideLabel = false;
    this.inputId = undefined;
    this.innerOnLabel = undefined;
    this.innerOffLabel = undefined;
    this.label = undefined;
    this.passAttrs = '';
    this.size = undefined;
  }
  get inputIdAttr() {
    return this.inputId || this.inputIdGen;
  }
  componentWillLoad() {
    this.inputIdGen = this.inputId || genId();
    this.attrs = getHostAttrs(this.hostEl, [
      'name',
      'value',
      ...this.passAttrs.split(',')
    ]);
  }
  render() {
    return (h(Host, { class: "bs-boolean", "data-size": this.size }, this.label && (h("bs-label", { for: this.inputIdAttr, disabled: this.disabled, class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), h("div", { class: "bs-switch", "data-disabled": this.disabled, "data-size": this.size }, h("input", Object.assign({ checked: this.checked, disabled: this.disabled, id: this.inputIdAttr, type: "checkbox" }, this.attrs)), h("span", { "aria-hidden": "true", "data-inner-on-label": this.innerOnLabel, "data-inner-off-label": this.innerOffLabel }))));
  }
  static get is() { return "bs-switch"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-switch.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-switch.css"]
    };
  }
  static get properties() {
    return {
      "checked": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Sets the \"on\" state and the \"checked\" state of the underlying <input>."
        },
        "attribute": "checked",
        "reflect": false,
        "defaultValue": "false"
      },
      "disabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Sets the disabled state on the <input> and disabled styles on the switch."
        },
        "attribute": "disabled",
        "reflect": false,
        "defaultValue": "false"
      },
      "hideLabel": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Hides the label visually. Still available to screen readers."
        },
        "attribute": "hide-label",
        "reflect": false,
        "defaultValue": "false"
      },
      "inputId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Pass id for the input element.  Will also be applied to label attribute."
        },
        "attribute": "input-id",
        "reflect": false
      },
      "innerOnLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the \"inner\" text displayed in the switch when in \"off\" state. Limit to 3 characters or you'll have a bad time."
        },
        "attribute": "inner-on-label",
        "reflect": false
      },
      "innerOffLabel": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the \"inner\" text displayed in the switch when in \"on\" state. Limit to 3 characters."
        },
        "attribute": "inner-off-label",
        "reflect": false
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "Lights"
            }],
          "text": ""
        },
        "attribute": "label",
        "reflect": false
      },
      "passAttrs": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "List additional attributes by name (comma-separated) to pass through to underlying <input>."
        },
        "attribute": "pass-attrs",
        "reflect": false,
        "defaultValue": "''"
      },
      "size": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'sm'",
          "resolved": "\"sm\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Sets the size of the switch and label."
        },
        "attribute": "size",
        "reflect": false
      }
    };
  }
  static get elementRef() { return "hostEl"; }
}
//# sourceMappingURL=bs-switch.js.map
