import { Component, Element, Event, Host, Method, Prop, h } from '@stencil/core';
import { getLabelText, hasText, HiddenFormInputSlot, connectForm, disconnectForm, } from '../../utils';
/** @slot - A slot for adding text and a component that can be labeled. */
export class Switch {
  constructor() {
    /** Sets checked state. */
    // eslint-disable-next-line @stencil/strict-mutable
    this.checked = false;
    /** Disables switch interaction.  */
    this.disabled = false;
    /**
     * Form submission value if selected. Default for checked checkbox is **on**:
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value
     */
    // eslint-disable-next-line @stencil/strict-mutable
    this.value = 'on';
    //--------------------------------------------------------------------------
    //
    //  Private Methods
    //
    //--------------------------------------------------------------------------
    this.toggle = () => {
      this.checked = !this.checked;
      this.setFocus();
      this.abdsChange.emit();
    };
    this.onKeyDown = (event) => {
      if (event.key === ' ') {
        event.preventDefault();
        if (!event.repeat)
          this.toggle();
      }
    };
  }
  //--------------------------------------------------------------------------
  //
  //  Public Methods
  //
  //--------------------------------------------------------------------------
  /** Sets focus on native `input` in `abds-switch`. */
  async setFocus() {
    var _a;
    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
  }
  //--------------------------------------------------------------------------
  //
  //  Lifecycle Methods
  //
  //--------------------------------------------------------------------------
  connectedCallback() {
    this.labelText = getLabelText(this.host);
    connectForm(this);
  }
  disconnectedCallback() {
    disconnectForm(this);
  }
  render() {
    return (h(Host, { onClick: this.disabled ? null : this.toggle, onKeyDown: this.disabled ? null : this.onKeyDown },
      h(HiddenFormInputSlot, { component: this, type: "checkbox" }),
      h("div", { "aria-checked": this.checked.toString(), "aria-label": this.labelText || null, class: "switch-container", ref: (toggleEl) => (this.toggleEl = toggleEl), role: "switch", tabIndex: this.disabled ? undefined : 0 },
        h("div", { class: "icons-container" },
          h("abds-icon", { icon: "check-1", size: "md", "stroke-width": "bold" }),
          h("abds-icon", { icon: "remove", size: "md", "stroke-width": "bold" })),
        h("span", { class: "thumb" })),
      hasText(this.host) && (h("abds-label", { tooltip: this.tooltip, weight: "medium" },
        h("slot", null)))));
  }
  static get is() { return "abds-switch"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["switch.css"]
  }; }
  static get styleUrls() { return {
    "$": ["switch.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets name attribute."
      },
      "attribute": "name",
      "reflect": true
    },
    "checked": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets checked state."
      },
      "attribute": "checked",
      "reflect": true,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Disables switch interaction."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "tooltip": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets tooltip text in embedded abds-label."
      },
      "attribute": "tooltip",
      "reflect": true
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Form submission value if selected. Default for checked checkbox is **on**:\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value"
      },
      "attribute": "value",
      "reflect": true,
      "defaultValue": "'on'"
    }
  }; }
  static get events() { return [{
      "method": "abdsChange",
      "name": "abdsChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when switch toggle status is changed."
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "setFocus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Sets focus on native `input` in `abds-switch`.",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "host"; }
}
//# sourceMappingURL=switch.js.map