/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-211ca8fb.js';
import { h as getAriaLabel, j as renderHiddenInput } from './helpers-4b2cb009.js';
import { c as createColorClasses, h as hostContext } from './theme-c4ea3043.js';

const gascoCheckboxMdCss = ":host{--background-checked:var(--gasco-color-primary, #00A3E0);--border-color-checked:var(--gasco-color-primary, #00A3E0);--checkmark-color:var(--gasco-color-primary-contrast, #fff);--checkmark-width:1;--transition:none;display:inline-block;position:relative;user-select:none;z-index:2}:host(.gasco-color){--background-checked:var(--gasco-color-base);--border-color-checked:var(--gasco-color-base);--checkmark-color:var(--gasco-color-contrast)}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}.checkbox-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:1px;--border-style:solid;--border-color:rgba(var(--gasco-text-color-rgb, 0, 0, 0), 0.51);--checkmark-width:3;--background:var(--gasco-item-background, var(--gasco-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:24px;width:var(--size);height:var(--size);transition:300ms}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .checkbox-icon{--border-color-checked:#EBEBEB;--background-checked:#EBEBEB;--background:#EBEBEB;--border-color:#CCCCCC}:host(.checkbox-disabled) .checkbox-icon path{--checkmark-color:#CCCCCC}:host(.checkbox-disabled) gasco-label{opacity:0.3}:host(.in-item){margin-left:0;margin-right:12px;margin-top:0;margin-bottom:0;display:block;position:static}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:12px;margin-inline-end:12px}}:host(.in-item[slot=start]){margin-left:0;margin-right:12px;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:12px;margin-inline-end:12px}}@media only screen and (max-width: 480px){:host{--size:18px}}@media (any-hover: hover){:host(:hover){box-shadow:0px 8px 16px rgba(171, 190, 209, 0.4)}}";

const GascoCheckbox = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.gascoChange = createEvent(this, "gascoChange", 7);
    this.gascoFocus = createEvent(this, "gascoFocus", 7);
    this.gascoBlur = createEvent(this, "gascoBlur", 7);
    this.gascoStyle = createEvent(this, "gascoStyle", 7);
    this.inputId = `gasco-cb-${checkboxIds++}`;
    this.color = 'primary';
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * If `true`, the checkbox is selected.
     */
    this.checked = false;
    /**
     * If `true`, the checkbox will visually appear as indeterminate.
     */
    this.indeterminate = false;
    /**
     * If `true`, the user cannot interact with the checkbox.
     */
    this.disabled = false;
    /**
     * The value of the checkbox does not mean if it's checked or not, use the `checked`
     * property for that.
     *
     * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
     * it's only used when the checkbox participates in a native `<form>`.
     */
    this.value = 'on';
    this.onClick = (ev) => {
      ev.preventDefault();
      this.setFocus();
      this.checked = !this.checked;
      this.indeterminate = false;
    };
    this.onFocus = () => {
      this.gascoFocus.emit();
    };
    this.onBlur = () => {
      this.gascoBlur.emit();
    };
  }
  componentWillLoad() {
    this.emitStyle();
  }
  checkedChanged(isChecked) {
    this.gascoChange.emit({
      checked: isChecked,
      value: this.value,
    });
    this.emitStyle();
  }
  disabledChanged() {
    this.emitStyle();
  }
  emitStyle() {
    this.gascoStyle.emit({
      'checkbox-checked': this.checked,
      'interactive-disabled': this.disabled,
    });
  }
  setFocus() {
    if (this.focusEl) {
      this.focusEl.focus();
    }
  }
  render() {
    const { color, checked, disabled, el, indeterminate, inputId, name, value } = this;
    const { label, labelId, labelText } = getAriaLabel(el, inputId);
    renderHiddenInput(true, el, name, checked ? value : '', disabled);
    let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
    // if (mode === 'md') {
    //   path = indeterminate ? (
    //     <path d="M2 12H22" part="mark" />
    //   ) : (
    //     <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
    //   );
    // }
    return (h(Host, { onClick: this.onClick, "aria-labelledby": label ? labelId : null, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, role: "checkbox", class: createColorClasses(color, {
        'in-item': hostContext('gasco-item', el),
        'checkbox-checked': checked,
        'checkbox-disabled': disabled,
        'checkbox-indeterminate': indeterminate,
        interactive: true,
      }) }, h("svg", { class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path), h("label", { htmlFor: inputId }, labelText), h("input", { type: "checkbox", "aria-checked": `${checked}`, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) })));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "checked": ["checkedChanged"],
    "disabled": ["disabledChanged"]
  }; }
};
let checkboxIds = 0;
GascoCheckbox.style = gascoCheckboxMdCss;

export { GascoCheckbox as gasco_checkbox };
