import { Component, Element, Host, Method, Prop, State, h } from '@stencil/core';
import { HiddenFormInputSlot, composeValidatorList, connectForm, defaultValidator, disconnectForm, } from '../../utils';
/** @slot - A slot for adding text and a component that can be labeled. */
export class Checkbox {
  constructor() {
    //--------------------------------------------------------------------------
    //
    //  Private Properties
    //
    //--------------------------------------------------------------------------
    /** initial render status */
    this.isInitialRender = true;
    /** instance validation */
    this.validator = defaultValidator();
    //--------------------------------------------------------------------------
    //
    //  Private State
    //
    //--------------------------------------------------------------------------
    /** icon to be used by abds-icon */
    this.icon = '';
    //--------------------------------------------------------------------------
    //
    //  Private Methods
    //
    //--------------------------------------------------------------------------
    this.toggle = () => {
      this.checked = !this.checked;
      this.indeterminate = false;
      this.setFocus();
    };
    this.onKeyDown = (event) => {
      if (event.key === ' ' || event.key === 'Enter') {
        this.toggle();
        event.preventDefault();
      }
    };
    //--------------------------------------------------------------------------
    //
    //  Props
    //
    //--------------------------------------------------------------------------
    /**  aligns input and label */
    this.alignment = 'start';
    /** hosts' checked state */
    // eslint-disable-next-line @stencil/strict-mutable
    this.checked = false;
    /** disables checkbox from interaction  */
    this.disabled = false;
    /** allows setting error state */
    this.error = false;
    /** hosts' indeterminate state */
    // eslint-disable-next-line @stencil/strict-mutable
    this.indeterminate = false;
    /** specifies required state for form submission */
    this.required = false;
    /**
     * The default value for a ticked 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';
  }
  //--------------------------------------------------------------------------
  //
  //  Public Methods
  //
  //--------------------------------------------------------------------------
  /**
   * Sets focus on native `input` in `abds-checkbox`.
   * @internal
   */
  async setFocus() {
    var _a;
    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
  }
  //--------------------------------------------------------------------------
  //
  //  Lifecycle Methods
  //
  //--------------------------------------------------------------------------
  componentWillLoad() {
    if (!this.host.id)
      this.host.setAttribute('id', `abds-checkbox-id${crypto.getRandomValues(new Uint16Array(1))[0]}`);
    this.validator = composeValidatorList(this);
  }
  componentWillRender() {
    if (this.checked)
      this.icon = 'check-1';
    if (this.indeterminate)
      this.icon = 'subtract';
    if (!this.checked && !this.indeterminate)
      this.icon = '';
  }
  componentDidRender() {
    if (this.isInitialRender)
      this.isInitialRender = false;
  }
  connectedCallback() {
    connectForm(this);
  }
  disconnectedCallback() {
    disconnectForm(this);
  }
  render() {
    const isInvalid = this.required && !this.checked && !this.isInitialRender;
    return (h(Host, { onClick: this.disabled ? null : this.toggle, onKeyDown: this.disabled ? null : this.onKeyDown },
      h("div", { class: "checkbox-label-container" },
        h(HiddenFormInputSlot, { component: this, type: "checkbox" }),
        h("div", { "aria-checked": this.checked.toString(), "aria-labelledby": "checkbox-label", class: { 'checkbox-icon-container': true, invalid: isInvalid }, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 },
          h("abds-icon", { icon: this.icon, size: "md", "stroke-width": "bold" })),
        h("abds-label", { for: this.host.id || null, id: "checkbox-label", required: this.required, tabindex: "-1", tooltip: this.tooltip, weight: "medium" },
          h("slot", null))),
      (!this.isInitialRender || this.error) && !this.validator.validate(this.hiddenInput) && (h("abds-supporting-text", { errorText: this.validator.errorMessage }))));
  }
  static get is() { return "abds-checkbox"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["checkbox.css"]
  }; }
  static get styleUrls() { return {
    "$": ["checkbox.css"]
  }; }
  static get properties() { return {
    "alignment": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Alignment",
        "resolved": "\"end\" | \"start\"",
        "references": {
          "Alignment": {
            "location": "import",
            "path": "../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "aligns input and label"
      },
      "attribute": "alignment",
      "reflect": true,
      "defaultValue": "'start'"
    },
    "checked": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "hosts' 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 checkbox from interaction"
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "error": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "allows setting error state"
      },
      "attribute": "error",
      "reflect": true,
      "defaultValue": "false"
    },
    "indeterminate": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "hosts' indeterminate state"
      },
      "attribute": "indeterminate",
      "reflect": true,
      "defaultValue": "false"
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "host's name"
      },
      "attribute": "name",
      "reflect": true
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "specifies required state for form submission"
      },
      "attribute": "required",
      "reflect": true,
      "defaultValue": "false"
    },
    "tooltip": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "the tooltip text to be passed to label"
      },
      "attribute": "tooltip",
      "reflect": true
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The default value for a ticked 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 states() { return {
    "icon": {}
  }; }
  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-checkbox`.",
        "tags": [{
            "name": "internal",
            "text": undefined
          }]
      }
    }
  }; }
  static get elementRef() { return "host"; }
}
//# sourceMappingURL=checkbox.js.map