@trendyol/baklava/dist/chunk-DOUEBILK.js

Trendyol Baklava Design System

import{a as b}from"./chunk-GRL4DWKG.js";import{a as h,b as i}from"./chunk-IRDH7CN2.js";import{a as d}from"./chunk-DINNT5P2.js";import{a as l,b as c,f as n}from"./chunk-4OT5AMS5.js";import{c as r}from"./chunk-VO7C5OZC.js";var p=l`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);/* TODO: use predefined animation duration once it is ready */--animation-duration:var(--bl-switch-animation-duration, 300ms);--switch-color:var(--bl-switch-color-off, var(--bl-color-neutral-lighter));background-color:var(--switch-color);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:"";display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{--switch-color:var(--bl-switch-color-on, var(--bl-switch-color, var(--bl-color-primary)))}:host([checked]) .switch::before{transform:translateX(
    calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset)))
  )}:host([disabled]) .switch{opacity:0.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:none}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:"";position:absolute;inset:-3px}`,u=p;var m="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[u]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var a,o,s;let e=(s=(o=this.ariaLabel)!=null?o:(a=this.attributes.getNamedItem("aria-label"))==null?void 0:a.value)!=null?s:void 0;return c`
      <span
        class="switch"
        role="switch"
        aria-checked=${this.checked}
        aria-readonly=${!!this.disabled}
        @click=${this.toggle}
        @keydown=${this.handleKeyDown}
        aria-label=${d(e)}
        tabindex="0"
      >
      </span>
    `}};r([i({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([b("bl-switch-toggle")],t.prototype,"onToggle",2),t=r([h(m)],t);export{m as a,t as b};
//# sourceMappingURL=chunk-DOUEBILK.js.map