https://www.alexanderwang.com/cdn/shop/t/131/assets/core-custom-select.CG5ZHsdn.min.js

1var e,t,s=e=>{throw TypeError(e)},r=(e,t,r)=>t.has(e)||s("Cannot "+r),i=(e,t,s)=>(r(e,t,"read from private field"),s?s.call(e):t.get(e));import{F as o}from"./FormElement.BcShr5MQ.min.js";import{f as a}from"./firstFocusableElement.CXP_yyKj.min.js";import{c as n,o as l,f as d,a as h}from"./vendor-floating-ui.ZL8VzMa-.min.js";import{i as c,j as u,T as p,x as m,k as g,l as b,n as f,r as y}from"./vendor-lit.Cor7f3-A.min.js";import"./BaseElement.CkCCcxPE.min.js";class x{constructor(t,r){var i,o,a;i=this,a=[],(o=e).has(i)?s("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(i):o.set(i,a),(this.host=t).addController(this),this.mediaQuery=window.matchMedia(r),this.onMediaQueryChange=this.onMediaQueryChange.bind(this)}addOnChangeCallback(t){i(this,e).push(t)}hostConnected(){this.mediaQuery.addEventListener("change",this.onMediaQueryChange)}hostDisconnected(){var t,s;this.mediaQuery.removeEventListener("change",this.onMediaQueryChange),s=[],r(this,t=e,"write to private field"),t.set(this,s)}get active(){return this.mediaQuery.matches}async onMediaQueryChange(){await this.host.updateComplete,this.host.requestUpdate(),i(this,e).forEach(e=>e())}}e=new WeakMap;var v=Object.defineProperty,_=(e,t,s,r)=>{for(var i,o=void 0,a=e.length-1;a>=0;a--)(i=e[a])&&(o=i(t,s,o)||o);return o&&v(t,s,o),o};const E=((t=class extends o{constructor(){super(),this.mediaQueryUtility=new x(this,t.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=c(),this.listboxElement=c(),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"));0!==e.length&&(this._options=e.map(e=>({label:e.textContent||"",value:e.value||"",el:e})))}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){this.contains(e.target)||(this._expanded=!1)}_onMediaQueryChange(){const e=this.querySelector("select");this.mediaQueryUtility.active&&!this.multiple?null==e||e.setAttribute("form","form-random"+Math.random()):null==e||e.removeAttribute("form")}_handleClick(e){if(!this._expanded)return;const t=this.listboxElement.value,s=e.target;if(!t||!s)return;if(!t.contains(s))return;const r="BUTTON"===s.tagName?s:s.closest("button");r&&(r.disabled||(this.selectValue(r.value),this.multiple||(this._expanded=!1)))}selectValue(e){if(this.multiple){const t=new Set(this.parsedValue);t.has(e)?t.delete(e):t.add(e),this.value=Array.from(t).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&&("Escape"===e.key&&(this._expanded=!1),"ArrowUp"===e.key||"ArrowDown"===e.key)){e.preventDefault();const t=this.listboxElement.value;if(!t)return;const s=Array.from(t.querySelectorAll("button")),r=this.currentActiveElement,i=s.findIndex(e=>e===r);if(-1===i)return void s[0].focus();const o="ArrowUp"===e.key?i-1:i+1;if(o<0)return s[s.length-1].focus();if(o>=s.length)return s[0].focus();s[o].focus()}}_handleToggleClick(){this._expanded=!this._expanded}updated(e){super.updated(e),e.has("_expanded")&&"boolean"==typeof e.get("_expanded")&&this._handleExpandedStateChange()}_positionListbox(e,t){n(e,t,{placement:"bottom-start",strategy:"absolute",middleware:[l(5),d({crossAxis:!1,fallbackPlacements:["top-start","bottom-start"],fallbackAxisSideDirection:"start"})]}).then(({x:e,y:s})=>{Object.assign(t.style,{left:`${e}px`,top:`${s}px`})})}async _handleExpandedStateChange(){var e;if(null==(e=this._cleanupWatcher)||e.call(this),await this.updateComplete,!this._expanded)return;const t=this.toggleElement.value,s=this.listboxElement.value;t&&s&&(this._cleanupWatcher=h(t,s,()=>this._positionListbox(t,s)),this._onExpanded())}_onCollapsed(){var e;null==(e=this.toggleElement.value)||e.focus(),this.$emit(t.EVENTS.CLOSE,{value:this.value})}_onExpanded(){setTimeout(()=>{var e;this.listboxElement.value&&(null==(e=a(this.listboxElement.value))||e.focus())},100),this.$emit(t.EVENTS.OPEN,{value:this.value})}get _processedOptions(){const e=this._options,t=this.parsedValue;return e.map(e=>({...e,selected:this.multiple&&Array.isArray(t)?t.includes(e.value):e.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?m`
2      <p id="${this.id}_text" class=${w.HELP_TEXT}>
3        ${this.helpText}
4      </p>
5    `:p}get labelHTML(){return m`
6      <label for="${this.idForToggle}" class=${w.LABEL}>
7        ${this.label}
8      </label>
9    `}getDropdownItemHTML(e){return m`
10      <button
11        type="button"

12        class=${w.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){const s=t.el.getAttribute("data-img-url"),r=t.el.getAttribute("data-img-alt");return s?m`
24        <span class="flex items-center">
25          <img
26            src="${s}"
27            loading="lazy"
28            alt="${r||""}"
29            width="18"
30            height="16"
31          />
32          <span class="ms-xs">${e}</span>
33        </span>
34      `: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(e=>e.selected).map(e=>e.label).join(", ");const t=e.find(e=>e.selected);if(!t)return this.placeholder;const s=t.el.getAttribute("data-img-url"),r=t.el.getAttribute("data-img-alt");return s?m`
35      <span class="flex items-center">
36        <img
37          src="${s}"
38          loading="lazy"
39          alt="${r||""}"
40          width="18"
41          height="16"
42        />
43        <span class="ms-xs">${t.label}</span>
44      </span>
45    `:t.label}get getCustomSelectHTML(){return m`
46      <div
47        class="group peer relative w-full"
48        ?error=${this.error}
49        ?open=${this._expanded}
50        @click=${this._handleClick}
51      >
52        <button
53          ${g(this.toggleElement)}
54          type="button"
55          role="combobox"
56          @click=${this._handleToggleClick}
57          aria-haspopup="listbox"
58          class="relative"
59          id="${this.idForToggle}"
60          value="${this.value}"
61          aria-controls="${this.idForListbox}"
62          aria-expanded="${this._expanded}"
63          aria-disabled="${this.disabled}"
64          aria-label="${this.label}"
65          ?disabled=${this.disabled}
66          ${this.helpText?`aria-describedby="${this.id}_text"`:""}
67          class=${w.TOGGLE}
68        >
69          <span class="pr-sm block truncate">${this._currentToggleLabel}</span>
70          <div class=${w.TOGGLE_ICON}>
71            <svg-icon
72              src="icon-select-arrow"
73              class="block"
74              style="font-size: 12px;"
75            ></svg-icon>
76          </div>
77        </button>
78
79        <div
80          ${g(this.listboxElement)}
81          id="dropdown"
82          role="listbox"
83          id="${this.idForListbox}"
84          ?inert=${!this._expanded}
85          class=${w.DROPDOWN}
86          ${this.multiple?'aria-multiselectable="true"':""}
87        >
88          ${b(this._processedOptions,e=>this.getDropdownItemHTML(e))}
89        </div>
90        ${this.labelHTML}
91      </div>
92      ${this.helpTextHTML}
93    `}get getNativeSelectHTML(){return m`<slot></slot>`}getSelectedOptionByValue(e){return this._options.find(t=>t.value===e)}render(){return Array.isArray(this._options)&&0!==this._options.length?this.mediaQueryUtility.active||this.multiple?this.getCustomSelectHTML:this.getNativeSelectHTML:m`${p}`}}).EVENTS={OPEN:"open",CLOSE:"close"},t.styles=[u`
94      @starting-style {
95        .custom-select__dropdown {
96          opacity: 0 !important;
97          transform: translateY(2rem) !important;
98        }
99      }
100    `],t.CUSTOM_SELECT_BREAKPOINT="(min-width: 1024px)",t);_([f({type:String})],E.prototype,"label"),_([f({type:String})],E.prototype,"placeholder"),_([f({type:Boolean,attribute:"always-show-placeholder"})],E.prototype,"alwaysShowPlaceholder"),_([f({type:Boolean})],E.prototype,"error"),_([f({type:Array,attribute:"options"})],E.prototype,"_options"),_([f({type:String})],E.prototype,"helpText"),_([f({type:String})],E.prototype,"errorText"),_([y()],E.prototype,"_expanded");let $=E;customElements.get("custom-select")||customElements.define("custom-select",$);const w={TOGGLE:"text-left block bg-c-form-bg w-full border appearance-none text-inherit disabled:text-border rounded-forms-radius h-sm-forms-inputheight lg:h-lg-forms-inputheight text-body bg-gray-50 bg-transparent border-transparent disabled:border-border-01 focus:outline-hidden focu

100s: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-inherit group-[[error]]:text-u-error h-sm-forms-inputheight lg:h-lg-forms-inputheigh",LABEL:"sr-only absolute caption text-foreground-secondary 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"};export{$ as CustomSelect};