import { Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
import { HiddenFormInputSlot, connectForm, defaultValidator, disconnectForm, getLabelText, hasText, initializeValidators, } from '../../utils';
/** @slot - A slot for adding text and a component that can be labeled. */
export class Checkbox {
  constructor() {
    /**  Aligns input and label. */
    this.alignment = 'start';
    /** Sets checked state. */
    // eslint-disable-next-line @stencil/strict-mutable
    this.checked = false;
    /** Disables checkbox interaction.  */
    this.disabled = false;
    /** Sets error state. */
    this.error = false;
    /** Sets indeterminate state. */
    // eslint-disable-next-line @stencil/strict-mutable
    this.indeterminate = false;
    /** Sets required state. */
    this.required = 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 Properties
    //
    //--------------------------------------------------------------------------
    /** initial render status */
    this.isInitialRender = true;
    /** instance validation */
    this.validator = defaultValidator();
    //--------------------------------------------------------------------------
    //
    //  Private Methods
    //
    //--------------------------------------------------------------------------
    this.toggle = () => {
      this.checked = !this.checked;
      this.indeterminate = false;
      this.setFocus();
      this.abdsChange.emit();
    };
    this.onKeyDown = (event) => {
      if (event.key === ' ') {
        event.preventDefault();
        if (!event.repeat)
          this.toggle();
      }
    };
    //--------------------------------------------------------------------------
    //
    //  Private State
    //
    //--------------------------------------------------------------------------
    /** icon to be used by abds-icon */
    this.icon = '';
  }
  //--------------------------------------------------------------------------
  //
  //  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() {
    this.validator = initializeValidators(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() {
    this.labelText = getLabelText(this.host);
    connectForm(this);
  }
  disconnectedCallback() {
    disconnectForm(this);
  }
  render() {
    const isInvalid = !this.isInitialRender && this.required && !this.checked;
    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-label": this.labelText || null, 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" })),
        hasText(this.host) && (h("abds-label", { required: this.required, tooltip: this.tooltip, weight: "medium" },
          h("slot", null)))),
      (!this.isInitialRender || this.error) && hasText(this.host) && !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 {
    "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
    },
    "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": "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 checkbox 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": "Sets 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": "Sets indeterminate state."
      },
      "attribute": "indeterminate",
      "reflect": true,
      "defaultValue": "false"
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets required state."
      },
      "attribute": "required",
      "reflect": true,
      "defaultValue": "false"
    },
    "requiredMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets custom error message for required state."
      },
      "attribute": "required-message",
      "reflect": 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 states() { return {
    "icon": {}
  }; }
  static get events() { return [{
      "method": "abdsChange",
      "name": "abdsChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when checkbox checked 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-checkbox`.",
        "tags": [{
            "name": "internal",
            "text": undefined
          }]
      }
    }
  }; }
  static get elementRef() { return "host"; }
}
//# sourceMappingURL=checkbox.js.map