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

Trendyol Baklava Design System

import{a as r}from"./chunk-GRL4DWKG.js";import{a as c,b as i,c as p,d as h}from"./chunk-IRDH7CN2.js";import{a as n,b as l,f as a}from"./chunk-4OT5AMS5.js";import{c as o}from"./chunk-VO7C5OZC.js";var d=n`:host{position:relative}.option-container{--option-font:var(--bl-font-title-3-regular);--option-spacing:var(--bl-size-xs) 0;--option-selected-color:var(--bl-color-primary);--option-hover-color:var(--bl-color-primary-highlight);--option-color:var(--bl-color-neutral-darker);--option-disabled-color:var(--bl-color-neutral-light);--option-separator:1px solid var(--bl-color-neutral-lighter);--option-gap:var(--bl-size-2xs);--option-transition:color 120ms ease-out}.option-container::after{position:absolute;content:"";width:100%;bottom:0;border-bottom:var(--option-separator)}:host(:last-of-type) .option-container::after{border-bottom:none}.single-option{width:100%;display:block;cursor:pointer;color:var(--option-color);margin:var(--option-spacing);transition:var(--option-transition);font:var(--option-font);user-select:none;position:relative;outline:none}.single-option:focus-visible::after{content:"";position:absolute;inset:calc(var(--bl-size-3xs) * -1);border:var(--bl-size-4xs) solid var(--option-hover-color);border-radius:var(--bl-size-4xs)}:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .single-option,:host(:hover) .single-option{color:var(--option-hover-color)}:host([selected]) .single-option{color:var(--option-selected-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .single-option{color:var(--option-disabled-color);cursor:not-allowed;pointer-events:none}.checkbox-option{width:100%;display:block;color:var(--option-color);padding:var(--option-spacing)}`,u=d;var t=class extends a{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.multiple=!1}static get styles(){return[u]}get value(){return this._value||this.textContent}set value(e){this._value=e}focus(){this.multiple||(this.focusTarget.tabIndex=0),this.focusTarget.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.focusTarget.tabIndex=-1}singleOptionTemplate(){return l`<div
      class="single-option focus-target"
      @blur=${this.blur}
      @keydown=${this.handleKeydown}
      @click="${this._onClickOption}"
      role="option"
      aria-selected="${this.selected}"
    >
      <slot></slot>
    </div>`}checkboxOptionTemplate(){return l`<bl-checkbox
      class="checkbox-option focus-target"
      .checked="${this.selected}"
      .disabled="${this.disabled}"
      @bl-checkbox-change="${this._onCheckboxChange}"
      role="option"
      aria-selected="${this.selected}"
    >
      <slot></slot>
    </bl-checkbox>`}render(){return l`<div class="option-container">
      ${this.multiple?this.checkboxOptionTemplate():this.singleOptionTemplate()}
    </div>`}handleKeydown(e){(e.code==="Enter"||e.code==="Space")&&(this._onClickOption(),e.preventDefault())}_handleEvent(){this._onSelect(this.value)}_onClickOption(){this.selected=!this.selected,this._handleEvent()}_onCheckboxChange(e){this.selected=e.detail,this._handleEvent()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{var e,s;this.blSelect=this.closest("bl-select"),this.multiple=((e=this.blSelect)==null?void 0:e.multiple)||!1,(s=this.blSelect)==null||s.registerOption(this)})}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.blSelect)==null||e.unregisterOption(this)}};o([i({})],t.prototype,"value",1),o([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([i({type:Boolean,reflect:!0})],t.prototype,"selected",2),o([p()],t.prototype,"multiple",2),o([r("bl-select-option")],t.prototype,"_onSelect",2),o([r("bl-focus")],t.prototype,"onFocus",2),o([r("bl-blur")],t.prototype,"onBlur",2),o([h(".focus-target")],t.prototype,"focusTarget",2),t=o([c("bl-select-option")],t);export{t as a};
//# sourceMappingURL=chunk-SX5PCXCH.js.map