'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b7293b2f.js');

const checkboxCss = ":host{display:inline-block}:host button{padding:0;display:flex;border:none;outline:none;background-color:transparent;font-size:1em;line-height:1.5;text-align:var(--lu-checkbox-button-text-align, center);cursor:pointer}:host(:focus),:host(:hover){outline:none}:host(:focus) button,:host(:hover) button{color:#256EC1}:host(:focus) button .checkbox .box,:host(:hover) button .checkbox .box{stroke:#256EC1}.checkbox{display:inline-block;position:relative;cursor:pointer}.checkbox svg{margin:0 0.5em 0 0;position:relative;bottom:-2px;width:1.125em;height:1.125em}.checkbox .box{fill:none;stroke:#256EC1;stroke-width:2;transition:stroke 0.09s ease-out}.checkbox polyline{fill:none;stroke:#256EC1;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:20;stroke-dashoffset:21;transition:stroke-dashoffset 0.09s ease-in-out}.checkbox.checked svg .box{fill:none;stroke:#256EC1}.checkbox.checked polyline{stroke-dashoffset:0}:host([disabled]) .checkbox .box{stroke:#909090}:host([disabled]) button{color:#909090}:host([disabled]:focus) button .checkbox .box,:host([disabled]:hover) button .checkbox .box{stroke:#909090 !important}";

const Checkbox = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.luCheckboxChange = index.createEvent(this, "luCheckboxChange", 7);
    this.luFocus = index.createEvent(this, "luFocus", 7);
    this.luCheckboxBlur = index.createEvent(this, "luCheckboxBlur", 7);
    this.luCheckboxClicked = index.createEvent(this, "luCheckboxClicked", 7);
    this.checkboxId = `lu-checkbox-${checkboxIds++}`;
    this.keyFocus = false;
    /**
     * If `true`, the checkbox is selected.
     */
    this.checked = false;
    /**
     * If `true`, the user cannot interact with the checkbox.
     */
    this.disabled = false;
    /**
     * prevents default events and exposes new checked event
     */
    this.isExternallyManaged = false;
    /**
     * The value of the toggle does not mean if it's checked or not, use the `checked`
     * property for that.
     *
     * It's good to note here this is not a real input checkbox. The value is just an associated value you want with the checkbox
     */
    this.value = "on";
    this.onClick = () => {
      if (!this.isExternallyManaged) {
        this.normalCheckedFlow();
      }
      else {
        this.luCheckboxClicked.emit({
          value: this.value,
          checked: !this.checked,
          name: this.name,
        });
      }
    };
    this.onKeyDown = (event) => {
      if (event.key === " " && !this.isExternallyManaged) {
        this.normalCheckedFlow();
      }
      else {
        this.luCheckboxClicked.emit({
          value: this.value,
          checked: !this.checked,
          name: this.name,
        });
      }
    };
    this.setCheckboxClasses = () => {
      let checkboxClasses = "checkbox";
      if (this.checked)
        checkboxClasses += " checked";
      return checkboxClasses;
    };
    this.onKeyUp = () => {
      this.keyFocus = true;
    };
    this.onFocus = () => {
      this.hasFocus = true;
      this.luFocus.emit();
    };
    this.onBlur = () => {
      this.hasFocus = false;
      this.luCheckboxBlur.emit();
    };
  }
  checkedChanged() {
    this.luCheckboxChange.emit({
      value: this.value,
      checked: !this.checked,
      name: this.name,
    });
    this.setCheckboxClasses();
  }
  normalCheckedFlow() {
    if (this.disabled)
      return;
    this.checked = !this.checked;
  }
  render() {
    let labelId;
    if (this.labeledById) {
      labelId = this.labeledById + "-lbl";
    }
    return (index.h(index.Host, { "aria-checked": this.checked, "aria-disabled": this.disabled ? "true" : null, "aria-labelledby": labelId, class: {
        "checkbox-checked": this.checked,
        "checkbox-disabled": this.disabled,
        "checkbox-key": this.keyFocus,
        interactive: true,
      }, "data-is-checked": this.checked, "has-focus": this.hasFocus, id: this.checkboxId, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, role: "checkbox", tabindex: "0" }, index.h("button", { tabindex: "-1", type: "button" }, index.h("div", { class: this.setCheckboxClasses() }, index.h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24" }, index.h("path", { class: "box", d: "M22 2v20h-20v-20h20zm2-2h-24v24h24v-24z" }), index.h("polyline", { points: "4 11 8 15 16 6", transform: "translate(2, 1)" }))), index.h("slot", null))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "checked": ["checkedChanged"]
  }; }
};
let checkboxIds = 0;
Checkbox.style = checkboxCss;

exports.lu_checkbox = Checkbox;

//# sourceMappingURL=lu-checkbox.cjs.entry.js.map