https://davidprotein.com/cdn/shop/t/787/assets/core-custom-select.DO_L7ZoD.min.js

1import{F as b}from"./FormElement.C7jcHSiG.min.js";import{f as x}from"./firstFocusableElement.BqnhZP5g.min.js";import{M as y}from"./MediaQueryUtility._GaRo6-N.min.js";import{c as _,o as v,f as E,a as T}from"./floating-ui.dom.IVC6gSpJ.min.js";import{i as $,T as h,x as c}from"./lit-element.CJsLXd6E.min.js";import{n as a}from"./property.BXSVAnPP.min.js";import{r as w}from"./state.CA4S5ECY.min.js";import{o as O}from"./map.DiiNQ3pp.min.js";import{e as m,n as f}from"./ref.CGO_wysY.min.js";import"./BaseElement.X7LJWGFl.min.js";import"./directive.C_Rw-dL6.min.js";var L=Object.defineProperty,l=(p,e,t,r)=>{for(var s=void 0,n=p.length-1,d;n>=0;n--)(d=p[n])&&(s=d(e,t,s)||s);return s&&L(e,t,s),s},o;const i=(o=class extends b{constructor(){super(),this.mediaQueryUtility=new y(this,o.CUSTOM_SELECT_BREAKPOINT),this.label="",this.placeholder="Select an option",this.alwaysShowPlaceholder=!1,this.error=!1,this._options=[],this.helpText="",this.errorText="",this._expanded=!1,this.toggleElement=m(),this.listboxElement=m(),this._cleanupWatcher=null,this._handleDocumentClick=this._handleDocumentClick.bind(this),this._handleDocumentKeyDown=this._handleDocumentKeyDown.bind(this),this._handleClick=this._handleClick.bind(this),this._collectionDataFromChildren(),this.mediaQueryUtility.addOnChangeCallback(()=>this._onMediaQueryChange()),this._onMediaQueryChange()}_collectionDataFromChildren(){const e=Array.from(this.querySelectorAll("option"));e.length!==0&&(this._options=e.map(t=>({label:t.textContent||"",value:t.value||"",el:t})))}firstUpdated(e){super.firstUpdated(e),document.addEventListener("click",this._handleDocumentClick),document.addEventListener("keydown",this._handleDocumentKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleDocumentClick),document.removeEventListener("keydown",this._handleDocumentKeyDown)}_handleDocumentClick(e){if(!this.contains(e.target)){this._expanded=!1;return}}_onMediaQueryChange(){const e=this.querySelector("select");this.mediaQueryUtility.active&&!this.multiple?e==null||e.setAttribute("form","form-random"+Math.random()):e==null||e.removeAttribute("form")}_handleClick(e){if(!this._expanded)return;const t=this.listboxElement.value,r=e.target;if(!t||!r||!t.contains(r))return;const s=r.tagName==="BUTTON"?r:r.closest("button");s&&(s.disabled||(this.selectValue(s.value),this.multiple||(this._expanded=!1)))}selectValue(e){if(this.multiple){const r=new Set(this.parsedValue);r.has(e)?r.delete(e):r.add(e),this.value=Array.from(r).filter(Boolean).join(",")}else this.value=e;const t=this.querySelector("select");t&&(t.value=e)}get currentActiveElement(){return this.renderRoot instanceof ShadowRoot?this.renderRoot.activeElement:document.activeElement}_handleDocumentKeyDown(e){if(this._expanded&&(e.key==="Escape"&&(this._expanded=!1),e.key==="ArrowUp"||e.key==="ArrowDown")){e.preventDefault();const t=this.listboxElement.value;if(!t)return;const r=Array.from(t.querySelectorAll("button")),s=this.currentActiveElement,n=r.findIndex(g=>g===s);if(n===-1){r[0].focus();return}const d=e.key==="ArrowUp"?n-1:n+1;if(d<0)return r[r.length-1].focus();if(d>=r.length)return r[0].focus();r[d].focus()}}_handleToggleClick(){this._expanded=!this._expanded}updated(e){super.updated(e),e.has("_expanded")&&typeof e.get("_expanded")=="boolean"&&this._handleExpandedStateChange()}_positionListbox(e,t){_(e,t,{placement:"bottom-start",strategy:"absolute",middleware:[v(5),E({crossAxis:!1,fallbackPlacements:["top-start","bottom-start"],fallbackAxisSideDirection:"start"})]}).then(({x:r,y:s})=>{Object.assign(t.style,{left:`${r}px`,top:`${s}px`})})}async _handleExpandedStateChange(){var r;if((r=this._cleanupWatcher)==null||r.call(this),await this.updateComplete,!this._expanded)return;const e=this.toggleElement.value,t=this.listboxElement.value;!e||!t||(this._cleanupWatcher=T(e,t,()=>this._positionListbox(e,t)),this._onExpanded())}_onCollapsed(){var e;(e=this.toggleElement.value)==null||e.focus(),this.$emit(o.EVENTS.CLOSE,{value:this.value})}_onExpanded(){setTimeout(()=>{var e;this.listboxElement.value&&((e=x(this.listboxElement.value))==null||e.focus())},100),this.$emit(o.EVENTS.OPEN,{value:this.value})}get _processedOptions(){const e=this._options,t=this.parsedValue;return e.map(r=>({...r,selected:this.multiple&&Array.isArray(t)?t.includes(r.value):r.value===t}))}get parsedValue(){return this.multiple?String(this.value).split(","):this.value}get idForToggle(){return`${this.id}-toggle`}get idForListbox(){return`${this.id}-listbox`}get helpTextHTML(){return this.helpText?c`
2      <p id="${this.id}_text" class=${u.HELP_TEXT}>
3        ${this.helpText}
4      </p>
5    `:h}get labelHTML(){return c`
6      <label for="${this.idForToggle}" class=${u.LABEL}>
7        ${this.label}
8      </label>
9    `}getDropdownItemHTML(e){return c`
10      <button
11        type="button"

12        class=${u.DROPDOWN_ITEM}
13        role="option"
14        aria-selected="${e.selected}"
15        value="${e.value}"
16        ?selected=${e.selected}
17        ?disabled=${e.disabled}
18      >
19        <span class="group-focus:ring-u-focus block group-focus-visible:ring-2">
20          ${this.renderOptionLabel(e.label,e)}
21        </span>
22      </button>
23    `}renderOptionLabel(e,t){return e}get hasSelectedOption(){return this._processedOptions.some(e=>e.selected)}get _currentToggleLabel(){if(this.alwaysShowPlaceholder||!this.hasSelectedOption)return this.placeholder;const e=this._processedOptions;if(this.multiple)return e.filter(s=>s.selected).map(s=>s.label).join(", ");const t=e.find(r=>r.selected);return t?t.label:this.placeholder}get getCustomSelectHTML(){return c`
24      <div
25        class="group peer relative w-full"
26        ?error=${this.error}
27        ?open=${this._expanded}
28        @click=${this._handleClick}
29      >
30        <button
31          ${f(this.toggleElement)}
32          type="button"
33          role="combobox"
34          @click=${this._handleToggleClick}
35          aria-haspopup="listbox"
36          class="relative"
37          id="${this.idForToggle}"
38          value="${this.value}"
39          aria-controls="${this.idForListbox}"
40          aria-expanded="${this._expanded}"
41          aria-disabled="${this.disabled}"
42          aria-label="${this.label}"
43          ?disabled=${this.disabled}
44          ${this.helpText?`aria-describedby="${this.id}_text"`:""}
45          class=${u.TOGGLE}
46        >
47          <span class="pr-sm block truncate">${this._currentToggleLabel}</span>
48          <div class=${u.TOGGLE_ICON}>
49            <svg-icon
50              src="icon-select-arrow"
51              class="block"
52              style="font-size: 12px;"
53            ></svg-icon>
54          </div>
55        </button>
56
57        <div
58          ${f(this.listboxElement)}
59          role="listbox"
60          id="${this.idForListbox}"
61          ?inert=${!this._expanded}
62          class=${u.DROPDOWN}
63          ${this.multiple?'aria-multiselectable="true"':""}
64        >
65          ${O(this._processedOptions,e=>this.getDropdownItemHTML(e))}
66        </div>
67        ${this.labelHTML}
68      </div>
69      ${this.helpTextHTML}
70    `}get getNativeSelectHTML(){return c`<slot></slot>`}getSelectedOptionByValue(e){return this._options.find(t=>t.value===e)}render(){return!Array.isArray(this._options)||this._options.length===0?c`${h}`:this.mediaQueryUtility.active||this.multiple?this.getCustomSelectHTML:this.getNativeSelectHTML}},o.EVENTS={OPEN:"open",CLOSE:"close"},o.styles=[$`
71      @starting-style {
72        .custom-select__dropdown {
73          opacity: 0 !important;
74          transform: translateY(2rem) !important;
75        }
76      }
77    `],o.CUSTOM_SELECT_BREAKPOINT="(min-width: 1024px)",o);l([a({type:String})],i.prototype,"label");l([a({type:String})],i.prototype,"placeholder");l([a({type:Boolean,attribute:"always-show-placeholder"})],i.prototype,"alwaysShowPlaceholder");l([a({type:Boolean})],i.prototype,"error");l([a({type:Array,attribute:"options"})],i.prototype,"_options");l([a({type:String})],i.prototype,"helpText");l([a({type:String})],i.prototype,"errorText");l([w()],i.prototype,"_expanded");let S=i;customElements.get("custom-select")||customElements.define("custom-select",S);const u={TOGGLE:"text-left block bg-c-form-bg w-full border appearance-none text-foreground disabled:text-border rounded-forms-radius px-sm-forms-padding lg:px-lg-forms-padding pt-sm-forms-padding lg:pt-lg-forms-padding h-sm-forms-inputheight lg:h-lg-forms-inputheight text-body bg-gray-50 bg-background border-foreground-secondary disabled:border-border-01 focus:outline-hidden focus:ring-0 focus:border-foreground peer group-[[error]]:ring-u-error group-[[error]]:border-[transparent] group-[[error]]:ring-2 focus-visible:ring-2 focus-visible:ring-u-focus",TOGGLE_ICON:"absolute inset-y-0 flex items-center size-3 pointer-events-none end-sm-forms-padding lg:end-sm-forms-padding text-foreground group-[[error]]:text-u

77-error h-sm-forms-inputheight lg:h-lg-forms-inputheigh",LABEL:"absolute caption text-foreground-secondary whitespace-nowrap duration-300 transform -translate-y-2.5 scale-75 top-3.5 start-sm-forms-padding lg:start-sm-forms-padding z-10 origin-[0] peer-focus:text-foreground peer-disabled:text-border peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-2.5 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto",HELP_TEXT:"caption text-foreground-secondary start-sm-forms-padding lg:start-sm-forms-padding",DROPDOWN:"custom-select__dropdown min-w-max bg-c-form-bg max-h-[50vh] overflow-y-scroll overflow-x-clip scrollbar-thin scrollbar-track-[transparent] scrollbar-thumb-background-secondary absolute z-20 hidden top-full left-0 w-full border border-border-01 bg-background drop-shadow-md rounded-forms-radius group-[[open]]:grid translate-y-4 opacity-0 transition-[opacity,display,transform] [transition-behavior:allow-discrete] motion-reduce:transition-none duration-300 group-[[open]]:translate-y-0 group-[[open]]:opacity-100 !motion-reduce:group-[[open]]:transition-none",DROPDOWN_ITEM:"px-forms-padding group ring-0 focus:ring-0 appearance-none outline-hidden py-xs bg-background text-body disabled:text-disabled text-foreground-secondary [&[selected]]:text-foreground [&[selected]]:bg-background-secondary focus-visible:text-foreground hover:text-foreground [&:disabled]:hover:text-disabled text-left border-b border-foreground-secondary last:border-b-0 border-solid"};