import { r as h, c as r, h as i, H as l, g as n } from "./index.61732cef.js";
import { c as o } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const w = () => ".sc-swirl-switch-h{display:inline-flex;max-width:100%}.sc-swirl-switch-h *.sc-swirl-switch{box-sizing:border-box}.switch.sc-swirl-switch{display:inline-flex;width:100%;align-items:center;touch-action:none}.switch.sc-swirl-switch:focus-within .switch__control.sc-swirl-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),       0 0 0 0.1875rem var(--s-focus-default)}.switch--label-position-start.sc-swirl-switch{flex-direction:row-reverse}.switch--label-position-start.sc-swirl-switch .switch__content.sc-swirl-switch{margin-right:var(--s-space-12);margin-left:0}.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 1.25rem - var(--s-space-2))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 0.875rem - var(--s-space-2))}}.switch--on.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-default)}.switch--disabled.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-swirl-switch .switch__thumb.sc-swirl-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-swirl-switch .switch__label.sc-swirl-switch{color:var(--s-text-disabled)}.switch--hide-content.sc-swirl-switch .switch__content.sc-swirl-switch{margin-left:0}.switch__control.sc-swirl-switch{position:relative;width:2.75rem;height:1.5rem;flex-shrink:0;border-radius:calc(1.5rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__control.sc-swirl-switch{width:1.875rem;height:1.125rem;border-radius:calc(1.125rem / 2)}}.switch__thumb.sc-swirl-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:1.25rem;height:1.25rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__thumb.sc-swirl-switch{width:0.875rem;height:0.875rem}}.switch__content.sc-swirl-switch{position:relative;z-index:1;margin-left:var(--s-space-12)}.switch__label.sc-swirl-switch{overflow:hidden;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);white-space:nowrap;text-overflow:ellipsis}.switch__description.sc-swirl-switch{color:var(--s-text-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-normal);line-height:var(--s-line-height-sm)}", d = class {
  constructor(s) {
    h(this, s), this.valueChange = r(this, "valueChange", 7), this.checked = !1, this.disabled = !1, this.labelPosition = "end", this.onChange = () => {
      this.checked = !this.checked, this.valueChange.emit(this.checked);
    };
  }
  async toggle() {
    this.inputEl.dispatchEvent(new Event("change"));
  }
  render() {
    const s = !this.checked, t = this.checked, e = t ? "true" : "false", c = o("switch", `switch--label-position-${this.labelPosition}`, {
      "switch--off": s,
      "switch--on": t,
      "switch--disabled": this.disabled,
      "switch--hide-content": this.hideLabel && (!this.description || this.hideDescription)
    });
    return i(l, { key: "d17d487416c1ceec139f4c24f360411942643563" }, i("label", { key: "085d43e71328f9740f63498523d6b6120c03cb58", class: c, htmlFor: this.inputId }, i("span", { key: "1372a74eed42ec8929803f60f542725f931c3d16", class: "switch__control" }, i("swirl-visually-hidden", { key: "78a641429fa0dfe7ca8c20e545416431b609125c" }, i("input", { key: "6297a890a01316d12a7ec5d5c195b4cbdbd54841", "aria-checked": e, "aria-label": !this.hideLabel && this.swirlAriaLabel ? this.swirlAriaLabel : void 0, checked: t, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, ref: (a) => this.inputEl = a, role: "switch", type: "checkbox", value: this.value })), i("span", { key: "28704e6c4e3234644d57741aba34718c2f63559f", "aria-hidden": "true", class: "switch__thumb" })), i("swirl-stack", { key: "3b6324bcaddb258f7d7979415b9874aa2f57f5ff", class: "switch__content" }, this.label && !this.hideLabel && i("span", { key: "2f55f60b66be49a2c405771a8dd94f025726b4ea", class: "switch__label" }, this.label), this.hideLabel && i("swirl-visually-hidden", { key: "0112e5a9a2e309615387ffac02a223adaff1287f" }, this.swirlAriaLabel || this.label), this.description && !this.hideDescription && i("span", { key: "5aafd9f9daf57b3ab8b443a938b3c8e63e5916c8", class: "switch__description" }, this.description), this.description && this.hideDescription && i("swirl-visually-hidden", { key: "42851611a6d3079ec0cb9e0537ee20d06946b5aa" }, this.description))));
  }
  get el() {
    return n(this);
  }
};
d.style = w();
export {
  d as swirl_switch
};
