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

Trendyol Baklava Design System

import{a as m}from"./chunk-3B64VOWB.js";import{b as g,d as y,f as x,g as O,h as _}from"./chunk-EZSEQHRH.js";import{a as f}from"./chunk-DJOD4BTL.js";import{a as p}from"./chunk-6LT7O7T2.js";import{a as b}from"./chunk-GRL4DWKG.js";import{a as u,b as o,c as s,d as r,e as h}from"./chunk-IRDH7CN2.js";import{a as v}from"./chunk-DINNT5P2.js";import{a as c,b as n,f as d}from"./chunk-4OT5AMS5.js";import{c as l}from"./chunk-VO7C5OZC.js";var T=c`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position, fixed)}:host([size="large"]) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size="small"]) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);/* stylelint-disable-next-line property-no-vendor-prefix */-webkit-user-select:none;user-select:none;margin:0;width:auto;min-width:100%}.label,.placeholder{color:var(--placeholder-color);padding-left:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}:host(:not([placeholder])) .placeholder,.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}:host([label-fixed]) .label,:host(:not([label])) .label{display:none}.remove-all{display:none}.remove-all::after{content:"";position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-neutral-lighter)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:none}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-left:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:", "}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:none;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in 0.1s;pointer-events:none;opacity:0;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:where(.selected) .label,:host(:not([placeholder]).select-open) .label{display:none}:where(.select-open, .selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal);opacity:1}:host([label]) :where(.select-open, .selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color);opacity:1}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`,w=T;var t=class extends f(d){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.clearable=!1;this.multiple=!1;this.autofocus=!1;this.labelFixed=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var a;let i=e.composedPath();(a=i==null?void 0:i.find(z=>z.tagName==="BL-SELECT"))!=null&&a.contains(this)||this.close()};this.focusedOptionIndex=-1}static get styles(){return[w]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let i=new FormData;e.forEach(a=>i.append(this.name,`${a}`)),this.setValue(i)}else this.setValue(e);this.setOptionsSelected()}shouldFormValueUpdate(){return this.value!==null&&this.value!==""}setOptionsSelected(){this._connectedOptions.forEach(e=>e.selected=this.value===e.value||Array.isArray(this.value)&&this.value.includes(e.value)),this._selectedOptions=[...this.options.filter(e=>e.selected)]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}validityCallback(){if(this.customInvalidText)return this.customInvalidText;let e=document.createElement("select");return e.required=this.required,e.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}resetFormControl(){this.value=this._initialValue}open(){this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._isPopoverOpen=!1,this.focusedOptionIndex=-1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._interactOutsideHandler,!0),document.removeEventListener("focus",this._interactOutsideHandler,!0)}_setupPopover(){this._cleanUpPopover=O(this._selectInput,this._popover,()=>{_(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[g(),y(8),x({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:i})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${i}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",i=>{this.reportValidity()||i.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){let e=n`<ul class="selected-options">
      ${this._selectedOptions.map(a=>n`<li>${a.textContent}</li>`)}
    </ul>`,i=this.clearable||this.multiple?n`<bl-button
            class="remove-all"
            size="small"
            variant="tertiary"
            kind="neutral"
            icon="close"
            @click=${this._onClickRemove}
          ></bl-button>`:"";return n`<fieldset
      class=${p({"select-input":!0,"has-overflowed-options":this._additionalSelectedOptionCount>0})}
      tabindex="${this.disabled?"-1":0}"
      ?autofocus=${this.autofocus}
      @click=${this.togglePopover}
      role="button"
      aria-haspopup="listbox"
      aria-expanded="${this.opened}"
      aria-labelledby="label"
    >
      <legend><span>${this.label}</span></legend>
      <span class="placeholder">${this.placeholder}</span>
      <span class="label">${this.label}</span>
      ${e}
      <span class="additional-selection-count">+${this._additionalSelectedOptionCount}</span>
      <div class="actions">
        ${i}
        <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>

        <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
      </div>
    </fieldset>`}render(){let e=this.checkValidity()?"":n`<p id="errorMessage" aria-live="polite" class="invalid-text">
          ${this.validationMessage}
        </p>`,i=this.helpText?n`<p class="help-text">${this.helpText}</p>`:"",a=this.label?n`<label id="label">${this.label}</label>`:"";return n`<div
      class=${p({"select-wrapper":!0,"select-open":this.opened,selected:this._selectedOptions.length>0,invalid:!this.validity.valid,dirty:this.dirty})}
      @keydown=${this.handleKeydown}
    >
      ${a} ${this.inputTemplate()}
      <div
        class="popover"
        tabindex="${v(this._isPopoverOpen?void 0:"-1")}"
        @bl-select-option=${this._handleSelectOptionEvent}
        role="listbox"
        aria-multiselectable="${this.multiple}"
        aria-labelledby="label"
      >
        <slot></slot>
      </div>
      <div class="hint">${e} ${i}</div>
    </div> `}handleKeydown(e){this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code)?(this.togglePopover(),e.preventDefault()):this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code)?(this.open(),e.preventDefault()):e.code==="Escape"?(this.close(),e.preventDefault()):this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)&&(e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),e.preventDefault())}togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions.map(e=>({value:e.value,selected:e.selected,text:e.textContent})))}_handleSingleSelect(e){this.value=e.value,this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let i=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(i)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(i=>i.selected).forEach(i=>{i.selected=!1}),this.value=null,this._additionalSelectedOptionCount=0,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2){this._additionalSelectedOptionCount=0;return}let e=[...this.selectedOptionsItems].findIndex(i=>i.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.value=""),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),this._checkAdditionalItemCount()}registerOption(e){this._connectedOptions.push(e),e.selected&&(this.multiple?(Array.isArray(this.value)||(this.value=[]),this.value=[...this.value,e.value]):this.value=e.value),this.setOptionsSelected(),this.requestUpdate()}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1)}};t.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},t.formControlValidators=[m],l([o()],t.prototype,"name",2),l([o()],t.prototype,"value",1),l([o({reflect:!0})],t.prototype,"label",2),l([o({reflect:!0})],t.prototype,"placeholder",2),l([o({type:String,reflect:!0})],t.prototype,"size",2),l([o({type:Boolean,reflect:!0})],t.prototype,"required",2),l([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),l([o({type:Boolean,reflect:!0})],t.prototype,"clearable",2),l([o({type:Boolean,reflect:!0})],t.prototype,"multiple",2),l([o({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),l([o({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),l([o({type:String,attribute:"help-text",reflect:!0})],t.prototype,"helpText",2),l([o({type:String,attribute:"invalid-text",reflect:!0})],t.prototype,"customInvalidText",2),l([s()],t.prototype,"_isPopoverOpen",2),l([s()],t.prototype,"_additionalSelectedOptionCount",2),l([r(".selected-options")],t.prototype,"selectedOptionsContainer",2),l([h(".selected-options li")],t.prototype,"selectedOptionsItems",2),l([r(".popover")],t.prototype,"_popover",2),l([r(".select-input")],t.prototype,"_selectInput",2),l([b("bl-select")],t.prototype,"_onBlSelect",2),l([s()],t.prototype,"_selectedOptions",2),l([s()],t.prototype,"dirty",2),l([r(".select-input")],t.prototype,"validationTarget",2),t=l([u("bl-select")],t);export{t as a};
//# sourceMappingURL=chunk-IRY7JHJ4.js.map