import { n as r, C as f } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as k } from "../chunks/component.styles.CRO4Odto.js";
import { f as v } from "../chunks/form-control.styles.CaGWmeAS.js";
import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
import { d as y } from "../chunks/default-value.COZopaet.js";
import { F as _ } from "../chunks/form.Ch1cwYzO.js";
import { H as C } from "../chunks/slot.j5oheLJC.js";
import { w as b } from "../chunks/watch.BCJD77bD.js";
import { i as w, x as n } from "../chunks/lit-element.jLBm65_O.js";
import { r as $ } from "../chunks/state.CSDxrqLd.js";
import { e as z } from "../chunks/query.BBf1UFkC.js";
import { e as d } from "../chunks/class-map.BiVq-cVR.js";
import { o as p } from "../chunks/if-defined.BRoBj_Rp.js";
import { l as u } from "../chunks/live.SCz6M8Gs.js";
import { n as F } from "../chunks/when.Dr1es41R.js";
import V from "./icon.js";
var x = /* @__PURE__ */ ((e) => (e.Large = "large", e.Medium = "medium", e.Small = "small", e))(x || {}), m = /* @__PURE__ */ ((e) => (e.Bottom = "bottom", e.Left = "left", e.Right = "right", e.Top = "top", e))(m || {});
const H = w`:host([disabled]){pointer-events:none}:host{white-space:normal;padding:var(--checkbox-padding,0);margin:var(--checkbox-margin,0);display:inline-block}:host([data-user-invalid])::part(control){border-color:var(--cx-input-invalid-border-color)}:host([data-user-invalid])::part(label){color:var(--cx-input-invalid-color)}:host([data-user-invalid])::part(control){outline:none}:host(:focus-within[data-user-invalid])::part(control){border-color:var(--cx-input-invalid-border-color);box-shadow:var(--cx-input-invalid-shadow)}.checkbox{font-family:var(--cx-input-font-family);font-weight:var(--cx-input-font-weight);color:var(--label-color,var(--cx-color-neutral));vertical-align:middle;cursor:pointer;box-sizing:border-box;align-items:flex-start;gap:var(--checkbox-label-gap,var(--cx-spacing-x-small));display:inline-flex;position:relative}.checkbox--label-left{flex-direction:row-reverse}.checkbox--label-top{flex-direction:column-reverse;align-items:flex-start}.checkbox--label-bottom{flex-direction:column;align-items:flex-start}.checkbox--small{--toggle-size:var(--cx-toggle-size-small);font-size:var(--cx-input-font-size-small)}.checkbox--medium{--toggle-size:var(--cx-toggle-size-medium);font-size:var(--cx-input-font-size-small)}.checkbox--large{--toggle-size:var(--cx-toggle-size-large);font-size:var(--cx-input-font-size-small)}.form-control{flex-direction:column;display:flex}.checkbox__control{width:var(--toggle-size);height:var(--toggle-size);border:solid var(--cx-input-border-width) var(--cx-input-border-color);border-radius:var(--cx-border-radius-small);background-color:var(--cx-input-background-color);color:var(--cx-color-neutral-0);transition:var(--cx-transition-fast) border-color, var(--cx-transition-fast) background-color, var(--cx-transition-fast) color, var(--cx-transition-fast) box-shadow;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.checkbox__input{opacity:0;pointer-events:none;margin:0;padding:0;position:absolute}.checkbox__checked-icon,.checkbox__indeterminate-icon{display:inline-flex}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--cx-input-border-color-hover);background-color:var(--cx-input-background-color-hover)}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--cx-color-primary);background-color:var(--cx-color-primary)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--cx-color-primary-500);background-color:var(--cx-color-primary-500)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible~.checkbox__control{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.checkbox--disabled{opacity:.5;cursor:default}.checkbox__label{width:var(--label-width,auto);color:var(--label-color,var(--cx-color-neutral));font:var(--label-font,var(--cx-font-label-small));line-height:var(--toggle-size);-webkit-user-select:none;user-select:none;text-transform:var(--cx-checkbox-label-text-transform,none);white-space:var(--cx-checkbox-label-white-space,normal);pointer-events:none;display:inline-block}.form-control__help-text{font:var(--help-text-font,var(--cx-font-label-x-small));color:var(--help-text-color,var(--cx-color-neutral-600))}:host([required]) .checkbox__label:after{color:var(--cx-input-required-content-color);content:var(--cx-input-required-content);margin-inline-start:var(--cx-input-required-content-offset)}`;
var S = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (e, i, l, a) => {
  for (var c = a > 1 ? void 0 : a ? q(i, l) : i, s = e.length - 1, h; s >= 0; s--)
    (h = e[s]) && (c = (a ? h(i, l, c) : h(c)) || c);
  return a && c && S(i, l, c), c;
};
let t = class extends f {
  constructor() {
    super(...arguments), this.formControlController = new _(this, {
      // eslint-disable-next-line
      // @ts-ignore
      defaultValue: (e) => e.defaultChecked,
      // eslint-disable-next-line
      // @ts-ignore
      setValue: (e, i) => e.checked = i,
      // eslint-disable-next-line
      // @ts-ignore
      value: (e) => e.checked ? e.value || "on" : void 0
    }), this.hasSlotController = new C(this, "help-text"), this.hasFocus = !1, this.title = "", this.name = "", this.size = x.Medium, this.disabled = !1, this.checked = !1, this.indeterminate = !1, this.defaultChecked = !1, this.form = void 0, this.required = !1, this.helpText = "", this.labelPlacement = m.Right, this.ariaLabel = null;
  }
  /** Gets the validity state object */
  get validity() {
    return this.input.validity;
  }
  /** Gets the validation message */
  get validationMessage() {
    return this.input.validationMessage;
  }
  runFirstUpdated() {
    this.formControlController.updateValidity();
  }
  connectedCallback() {
    super.connectedCallback(), this.addEventListener("click", this.handleHostClick, {
      capture: !0
    }), this.addEventListener("keydown", this.handleHostKeydown, {
      capture: !0
    });
  }
  handleHostKeydown(e) {
    e.key === " " && (e.preventDefault(), this.click());
  }
  handleHostClick(e) {
    if (e.composedPath().includes(this.input)) {
      e.stopPropagation();
      return;
    }
    this.input.click();
  }
  handleChange() {
    this.checked = !this.checked, this.indeterminate = !1, this.emit("cx-input"), this.emit("cx-change");
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("cx-blur");
  }
  handleInvalid(e) {
    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(e);
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("cx-focus");
  }
  handleDisabledChange() {
    this.formControlController.setValidity(this.disabled);
  }
  handleStateChange() {
    this.input.checked = this.checked, this.input.indeterminate = this.indeterminate, this.formControlController.updateValidity();
  }
  /** Sets focus on the checkbox. */
  focus(e) {
    this.input.focus(e);
  }
  /** Removes focus from the checkbox. */
  blur() {
    this.input.blur();
  }
  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
  checkValidity() {
    return this.input.checkValidity();
  }
  /** Gets the associated form, if one exists. */
  getForm() {
    return this.formControlController.getForm();
  }
  /** Checks for validity and shows the browser's validation message if the control is invalid. */
  reportValidity() {
    return this.input.reportValidity();
  }
  /**
   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
   * the custom validation message, call this method with an empty string.
   */
  setCustomValidity(e) {
    this.input.setCustomValidity(e), this.formControlController.updateValidity();
  }
  disconnectedCallback() {
    super.disconnectedCallback(), this.removeEventListener("click", this.handleHostClick, { capture: !0 }), this.removeEventListener("keydown", this.handleHostKeydown, { capture: !0 });
  }
  render() {
    const e = this.hasSlotController.test("help-text"), i = this.helpText ? !0 : !!e, l = this.hasSlotController.test("[default]");
    return n`<div class=${d({
      "form-control": !0,
      [`form-control--${this.size}`]: !0,
      "form-control--has-help-text": i
    })}><div part="base" class=${d({
      checkbox: !0,
      "checkbox--checked": this.checked,
      "checkbox--disabled": this.disabled,
      "checkbox--focused": this.hasFocus,
      "checkbox--indeterminate": this.indeterminate,
      [`checkbox--label-${this.labelPlacement}`]: !0,
      [`checkbox--${this.size}`]: !0
    })}><input id="checkbox" aria-label=${p(this.ariaLabel?.trim() || void 0)} class="checkbox__input" type="checkbox" title=${this.title} name=${this.name} .value=${p(this.value)} .indeterminate=${u(this.indeterminate)} .checked=${u(this.checked)} .disabled=${this.disabled} .required=${this.required} aria-checked=${this.checked ? "true" : "false"} aria-describedby="help-text" @change=${this.handleChange} @invalid=${this.handleInvalid} @blur=${this.handleBlur} @focus=${this.handleFocus}><span part="control${this.checked ? " control--checked" : ""}${this.indeterminate ? " control--indeterminate" : ""}" class="checkbox__control">${this.checked ? n`<slot name="checked-icon"><cx-icon part="checked-icon" class="checkbox__checked-icon" name="check"></cx-icon></slot>` : ""}
            ${!this.checked && this.indeterminate ? n`<slot name="indeterminate-icon"><cx-icon part="indeterminate-icon" class="checkbox__indeterminate-icon" name="remove"></cx-icon></slot>` : ""}</span>${F(
      l,
      () => n`<label for="checkbox" part="label" class="checkbox__label"><slot></slot></label>`
    )}</div><div aria-hidden=${i ? "false" : "true"} class="form-control__help-text" id="help-text" part="form-control-help-text"><slot name="help-text">${this.helpText}</slot></div></div>`;
  }
};
t.styles = [
  k,
  v,
  H
];
t.dependencies = { "cx-icon": V };
o([
  z('input[type="checkbox"]')
], t.prototype, "input", 2);
o([
  $()
], t.prototype, "hasFocus", 2);
o([
  r()
], t.prototype, "title", 2);
o([
  r()
], t.prototype, "name", 2);
o([
  r()
], t.prototype, "value", 2);
o([
  r({ reflect: !0 })
], t.prototype, "size", 2);
o([
  r({ reflect: !0, type: Boolean })
], t.prototype, "disabled", 2);
o([
  r({ reflect: !0, type: Boolean })
], t.prototype, "checked", 2);
o([
  r({ reflect: !0, type: Boolean })
], t.prototype, "indeterminate", 2);
o([
  y("checked")
], t.prototype, "defaultChecked", 2);
o([
  r({ reflect: !1 })
], t.prototype, "form", 2);
o([
  r({ reflect: !0, type: Boolean })
], t.prototype, "required", 2);
o([
  r({ attribute: "help-text" })
], t.prototype, "helpText", 2);
o([
  r({ attribute: "label-placement", reflect: !0 })
], t.prototype, "labelPlacement", 2);
o([
  r({ attribute: "aria-label", reflect: !0, type: String })
], t.prototype, "ariaLabel", 2);
o([
  b("disabled", { waitUntilFirstUpdate: !0 })
], t.prototype, "handleDisabledChange", 1);
o([
  b(["checked", "indeterminate"], { waitUntilFirstUpdate: !0 })
], t.prototype, "handleStateChange", 1);
t = o([
  g("cx-checkbox")
], t);
export {
  t as default
};
