import { r as registerInstance, c as createEvent, h, H as Host } from './index-ecdfb761.js';

const dvnSwitchCss = "dvn-switch{--margin:var(--spacing-unit) calc(1.5 * var(--spacing-unit));--switch-cursor:pointer;--switch-border-radius:var(--corner-radius);--switch-controller-border-radius:calc(var(--corner-radius) - 2px);display:inline-block;height:var(--switch-height);width:var(--switch-width);background:var(--base-color-lightest);border-radius:var(--switch-border-radius);padding:var(--switch-padding);cursor:var(--switch-cursor);-webkit-transition:background-color 0.3s, -webkit-box-shadow 0.3s;transition:background-color 0.3s, -webkit-box-shadow 0.3s;transition:background-color 0.3s, box-shadow 0.3s;transition:background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;}dvn-switch.disabled{--switch-cursor:unset;background:var(--color-neutral-lightest)}dvn-switch.disabled .switch-controller{background-color:var(--color-disabled)}dvn-switch .switch-controller{-webkit-transition:margin-left 0.3s, background-color 0.3s;transition:margin-left 0.3s, background-color 0.3s;background-color:var(--base-color);width:var(--switch-controller-size);height:var(--switch-controller-size);border-radius:var(--switch-controller-border-radius);margin-left:var(--switch-controller-size)}dvn-switch .switch-controller.to-checked{-webkit-animation:to-checked-animation 0.3s 0s both;animation:to-checked-animation 0.3s 0s both}dvn-switch .switch-controller.to-unchecked{-webkit-animation:to-unchecked-animation 0.3s 0s both;animation:to-unchecked-animation 0.3s 0s both}dvn-switch:hover:not(.disabled) .switch-controller{background-color:var(--base-color-light)}dvn-switch:focus{outline:none}dvn-switch:focus:not(.disabled){-webkit-box-shadow:0 1px 10px var(--base-color-light);box-shadow:0 1px 10px var(--base-color-light)}dvn-switch:focus:not(.disabled) .switch-controller{background-color:var(--base-color-light)}dvn-switch.passive{--base-color:var(--color-neutral);--base-color-light:var(--color-neutral-light);--base-color-lightest:var(--color-neutral-lightest)}dvn-switch.passive:focus:not(.disabled){outline:none}dvn-switch.passive .switch-controller{margin-left:0}dvn-switch.neutral{--base-color:var(--color-neutral);--base-color-light:var(--color-neutral-light);--base-color-lightest:var(--color-neutral-lightest)}dvn-switch.primary:not(.passive){--base-color:var(--color-primary);--base-color-light:var(--color-primary-light);--base-color-lightest:var(--color-primary-lightest)}dvn-switch.secondary:not(.passive){--base-color:var(--color-secondary);--base-color-light:var(--color-secondary-light);--base-color-lightest:var(--color-secondary-lightest)}dvn-switch.warning:not(.passive){--base-color:var(--color-warning);--base-color-light:var(--color-warning-light);--base-color-lightest:var(--color-warning-lightest)}dvn-switch.danger:not(.passive){--base-color:var(--color-danger);--base-color-light:var(--color-danger-light);--base-color-lightest:var(--color-danger-lightest)}dvn-switch.rounded{--switch-border-radius:var(--switch-height);--switch-controller-border-radius:var(--switch-height)}dvn-switch.rectange{--switch-border-radius:var(--switch-height)}dvn-switch.small{--font-size:var(--font-size-small);--switch-height:24px;--switch-width:44px;--switch-controller-size:20px;--switch-padding:2px}dvn-switch.medium{--font-size:var(--font-size-medium);--switch-height:32px;--switch-width:56px;--switch-controller-size:24px;--switch-padding:4px}dvn-switch.large{--font-size:var(--font-size-large);--switch-height:40px;--switch-width:68px;--switch-controller-size:28px;--switch-padding:6px}dvn-switch.leaned{--margin:0}@-webkit-keyframes to-checked-animation{0%{margin-left:0}100%{margin-left:var(--switch-controller-size)}}@keyframes to-checked-animation{0%{margin-left:0}100%{margin-left:var(--switch-controller-size)}}@-webkit-keyframes to-unchecked-animation{0%{margin-left:var(--switch-controller-size)}100%{margin-left:0}}@keyframes to-unchecked-animation{0%{margin-left:var(--switch-controller-size)}100%{margin-left:0}}";

const DvnSwitch = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.internalValue = false;
    this.tint = 'primary';
    this.scale = 'medium';
    this.leaned = false;
    this.disabled = false;
    this.shape = 'rectangular';
    this.checked = false;
    this.onClick = () => {
      if (this.disabled) {
        return;
      }
      this.internalValue = !this.internalValue;
      // this is used to show the animation when the parent component re-renders
      // and the value of this component changes
      this.animationClass = this.internalValue ? 'to-checked' : 'to-unchecked';
      setTimeout(() => this.animationClass = '', 300);
      this.change.emit(this.internalValue);
    };
  }
  componentWillLoad() {
    this.internalValue = this.checked;
  }
  componentShouldUpdate(newValue, _oldValue, name) {
    // prevent re-render if the component already has the same value internally
    return !(name === 'checked' && this.internalValue === newValue);
  }
  watchHandler(newValue) {
    if (this.internalValue !== newValue) {
      // update the internal value if the value is changed externally
      this.internalValue = newValue;
    }
  }
  render() {
    return (h(Host, { tabindex: "0", class: {
        [this.tint]: true,
        [this.scale]: true,
        [this.shape]: true,
        leaned: this.leaned,
        disabled: this.disabled,
        passive: !this.internalValue,
      }, disabled: this.disabled, onClick: this.onClick, onKeyDown: (event) => {
        if (event.keyCode === 32) {
          event.preventDefault();
          this.onClick();
          return false;
        }
      } }, h("div", { class: { 'switch-controller': true, [this.animationClass]: true } })));
  }
  static get watchers() { return {
    "checked": ["watchHandler"]
  }; }
};
DvnSwitch.style = dvnSwitchCss;

export { DvnSwitch as dvn_switch };
