import { r as registerInstance, e as createEvent, h } from './index-06929dd0.js';

const switchCss = ".switch{position:relative;display:inline-block}.switch--size-tall{width:56px;height:32px}.switch--size-standard{width:42px;height:24px}.switch--size-short{width:32px;height:18px}.switch .focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid var(--color-focus, #c226fb);border-radius:4px;width:100%;height:100%;top:-4px;left:-4px;padding-right:4px;padding-bottom:4px;outline:none}.switch input{opacity:100;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-content-ghost, #8c8c8c);-webkit-transition:0.4s;transition:0.4s;border-radius:34px}.slider--size-tall::before{position:absolute;content:\" \";left:4px;bottom:4px;top:4px;background-color:var(--color-content-bright, #ffffff);-webkit-transition:0.4s;transition:0.4s;border-radius:50%;width:24px;height:24px}.slider--size-standard::before{position:absolute;content:\" \";left:3px;bottom:3px;top:3px;background-color:var(--color-content-bright, #ffffff);-webkit-transition:0.4s;transition:0.4s;border-radius:50%;width:18px;height:18px}.slider--size-short::before{position:absolute;content:\" \";left:2.25px;bottom:2.25px;top:2.25px;background-color:var(--color-content-bright, #ffffff);-webkit-transition:0.4s;transition:0.4s;border-radius:50%;width:13.5px;height:13.5px}.slider--deselected-disabled{cursor:not-allowed;background-color:var(--color-content-ghost, #8c8c8c);opacity:0.5}input:checked+.slider{background-color:var(--color-surface-primary, #1e6bf1)}input:checked+.slider--selected-disabled{cursor:not-allowed;opacity:0.5}input:focus+.slider{-webkit-box-shadow:0 0 1px #3f7de8;box-shadow:0 0 1px #3f7de8}input:focus+.slider--selected-disabled{-webkit-box-shadow:0 0 1px #b9cbd3;box-shadow:0 0 1px #b9cbd3}input:focus+.slider--deselected-disabled{-webkit-box-shadow:0 0 1px #d2dfe6;box-shadow:0 0 1px #d2dfe6}input:checked+.slider--size-tall::before{-webkit-transform:translateX(24px);-ms-transform:translateX(24px);transform:translateX(24px)}input:checked+.slider--size-standard::before{-webkit-transform:translateX(18px);-ms-transform:translateX(18px);transform:translateX(18px)}input:checked+.slider--size-short::before{-webkit-transform:translateX(13.75px);-ms-transform:translateX(13.75px);transform:translateX(13.75px)}";

let switchIds = 0;
const Switch = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.bdsChange = createEvent(this, "bdsChange", 7);
    this.onClick = () => {
      this.checked = !this.checked;
    };
    this.refNativeInput = (input) => {
      this.nativeInput = input;
    };
    this.getStyleState = () => {
      if (this.checked && !this.disabled) {
        return 'slider--selected';
      }
      if (!this.checked && !this.disabled) {
        return 'slider--deselected';
      }
      if (this.checked && this.disabled) {
        return 'slider--selected-disabled';
      }
      if (!this.checked && this.disabled) {
        return 'slider--deselected-disabled';
      }
      return '';
    };
    this.handleClick = (ev) => {
      if (!this.disabled) {
        if (ev.key === 'Enter') {
          this.checked = !this.checked;
        }
      }
    };
    this.switchId = undefined;
    this.refer = undefined;
    this.size = 'standard';
    this.name = undefined;
    this.checked = false;
    this.disabled = false;
    this.dataTest = null;
  }
  connectedCallback() {
    this.switchId = this.refer || `bds-switch-${switchIds++}`;
  }
  checkedChanged(isChecked) {
    this.bdsChange.emit({
      checked: isChecked,
    });
  }
  getInputElement() {
    return Promise.resolve(this.nativeInput);
  }
  getValue() {
    return Promise.resolve(this.nativeInput.checked);
  }
  getSizeClass() {
    return `switch switch--size-${this.size} `;
  }
  getSizeSliderClass() {
    return `slider slider--size-${this.size} round `;
  }
  render() {
    const sizeClass = this.getSizeClass();
    const sizeSliderClass = this.getSizeSliderClass();
    const styleState = this.getStyleState();
    return (h("label", { class: { [sizeClass]: true } }, h("div", { tabindex: "0", onKeyDown: (ev) => this.handleClick(ev), class: "focus" }), h("input", { type: "checkbox", ref: this.refNativeInput, id: this.switchId, name: this.name, onClick: this.onClick, checked: this.checked, disabled: this.disabled, "data-test": this.dataTest }), h("span", { class: { [sizeSliderClass]: true, [styleState]: true } })));
  }
  static get watchers() { return {
    "checked": ["checkedChanged"]
  }; }
};
Switch.style = switchCss;

export { Switch as bds_switch };
