import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e3f64949.js';

const balCheckboxCss = "@-webkit-keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.sc-bal-checkbox-h{display:block;position:relative;min-height:26px}.sc-bal-checkbox-h input[type=checkbox].sc-bal-checkbox{position:absolute;left:0;top:0;margin:0;padding:0;opacity:0;outline:0}.sc-bal-checkbox-h input[type=checkbox].sc-bal-checkbox+label.sc-bal-checkbox{cursor:pointer;padding-left:34px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sc-bal-checkbox-h label.sc-bal-checkbox{padding-left:34px;line-height:26px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#003399}.sc-bal-checkbox-h label.sc-bal-checkbox::before,.sc-bal-checkbox-h label.sc-bal-checkbox::after{display:inline-block;position:absolute;background-color:transparent;background-position:center;background-repeat:no-repeat;background-size:24px 24px}.sc-bal-checkbox-h label.sc-bal-checkbox::before{content:\"\";left:0;top:0;height:24px;width:24px;border:1px solid #99add6}.sc-bal-checkbox-h label.sc-bal-checkbox::after{content:none;left:9px;top:6px;width:6px;height:10px;border-bottom:2px solid #003399;border-right:2px solid #003399;border-top:0;border-left:0;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.sc-bal-checkbox-h input[type=checkbox].sc-bal-checkbox:disabled+label.sc-bal-checkbox{cursor:not-allowed;opacity:0.5}.sc-bal-checkbox-h input[type=checkbox].sc-bal-checkbox:checked+label.sc-bal-checkbox::after{content:\"\"}.sc-bal-checkbox-h input[type=checkbox].sc-bal-checkbox:focus+label.sc-bal-checkbox::before{outline:1px dashed #009ee7 !important}.is-inverted.sc-bal-checkbox-h label.sc-bal-checkbox{color:#ffffff}.is-inverted.sc-bal-checkbox-h label.sc-bal-checkbox::before{border:1px solid #99add6}.is-inverted.sc-bal-checkbox-h label.sc-bal-checkbox::after{border-bottom:2px solid #ffffff;border-right:2px solid #ffffff}.is-inverted.sc-bal-checkbox-h input[type=checkbox].sc-bal-checkbox:hover:not([disabled])+label.sc-bal-checkbox:before{border-color:#ffffff}";

const Checkbox = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.balChange = createEvent(this, "balChange", 7);
    this.balFocus = createEvent(this, "balFocus", 7);
    this.balBlur = createEvent(this, "balBlur", 7);
    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))));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "checked": ["checkedChanged"]
  }; }
};
let checkboxIds = 0;
Checkbox.style = balCheckboxCss;

export { Checkbox as bal_checkbox };
