import { r as h, c as r, h as i, H as l, g as n } from "./index.e6beb8d9.js";
import { c as d } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const o = () => ".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)}", w = 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 = d("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: "c36445296da171ac4d32739b5d41334d945450a3" }, i("label", { key: "745f09d6d7d59718b9a0d416d7c372b24d9a25e6", class: c, htmlFor: this.inputId }, i("span", { key: "02c3d26ebb2cfd424bad9869df9d0b81556eace7", class: "switch__control" }, i("swirl-visually-hidden", { key: "2874d7fb100e3cb4bbff402390060ae064b298fb" }, i("input", { key: "7eeb5934fd3db19366b14d3a7db9820003ab4e39", "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: "4f7a61ebac2a82d90ab77141544b7a8cbf778091", "aria-hidden": "true", class: "switch__thumb" })), i("swirl-stack", { key: "5743ed972e20497ccde260d285d992f667a46777", class: "switch__content" }, this.label && !this.hideLabel && i("span", { key: "b45b7a925873f36fdddc1c9530dab5a9c604fcc4", class: "switch__label" }, this.label), this.hideLabel && i("swirl-visually-hidden", { key: "42866e983b85f70550da7a85de495aaba6a0d73c" }, this.swirlAriaLabel || this.label), this.description && !this.hideDescription && i("span", { key: "8f37ffca2463f830a0d896fe2f284cf0f52f43cd", class: "switch__description" }, this.description), this.description && this.hideDescription && i("swirl-visually-hidden", { key: "719fdb9481cc1198d26669ccf84be2afd62c6d68" }, this.description))));
  }
  get el() {
    return n(this);
  }
};
w.style = o();
export {
  w as swirl_switch
};
