import { Component, h, Host, Prop, Element, Event, Watch, Method } from '@stencil/core';
export class Checkbox {
  constructor() {
    this.inputId = `bal-cb-${checkboxIds++}`;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * The label of the control.
     */
    this.label = '';
    /**
     * The tabindex of the control.
     */
    this.balTabindex = 0;
    /**
     * The value of the control.
     */
    this.value = 'on';
    /**
     * If `true`, the checkbox is selected.
     */
    this.checked = false;
    /**
     * If `true`, the user cannot interact with the checkbox.
     */
    this.disabled = false;
    /**
     * If `true`, the control works on dark background.
     */
    this.inverted = false;
    this.onInput = (ev) => {
      this.checked = ev.target.checked;
      this.balChange.emit(this.checked);
    };
    this.onFocus = () => {
      this.balFocus.emit();
    };
    this.onBlur = () => {
      this.balBlur.emit();
    };
  }
  checkedChanged() {
    if (this.inputEl.checked !== this.checked) {
      this.inputEl.checked = this.checked;
    }
  }
  /**
   * Sets the focus on the checkbox input element.
   */
  async setFocus() {
    if (this.inputEl) {
      this.inputEl.focus();
    }
  }
  render() {
    const { inputId, label } = this;
    return (h(Host, { class: {
        'is-inverted': this.inverted,
      } },
      h("input", { type: "checkbox", role: "checkbox", id: inputId, name: this.name, value: this.value, checked: this.checked, tabindex: this.balTabindex, "aria-checked": this.checked ? 'true' : 'false', "aria-label": label, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : 'false', onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, ref: inputEl => (this.inputEl = inputEl) }),
      h("label", { htmlFor: inputId },
        h("bal-text", null, label))));
  }
  static get is() { return "bal-checkbox"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["bal-checkbox.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["bal-checkbox.css"]
  }; }
  static get properties() { return {
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The name of the control, which is submitted with the form data."
      },
      "attribute": "name",
      "reflect": false,
      "defaultValue": "this.inputId"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The label of the control."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "balTabindex": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The tabindex of the control."
      },
      "attribute": "bal-tabindex",
      "reflect": false,
      "defaultValue": "0"
    },
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The value of the control."
      },
      "attribute": "value",
      "reflect": false,
      "defaultValue": "'on'"
    },
    "checked": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the checkbox is selected."
      },
      "attribute": "checked",
      "reflect": false,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the checkbox."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "inverted": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the control works on dark background."
      },
      "attribute": "inverted",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "balChange",
      "name": "balChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the checked property has changed."
      },
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      }
    }, {
      "method": "balFocus",
      "name": "balFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the toggle has focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "balBlur",
      "name": "balBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the toggle loses focus."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "setFocus": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Sets the focus on the checkbox input element.",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "checked",
      "methodName": "checkedChanged"
    }]; }
}
let checkboxIds = 0;
