https://www.clinique.com/cdn/shop/t/104/assets/core-custom-select.VP5Vdjqb.min.js

1var e;import{F as t}from"./FormElement.BYiZF-mA.min.js";import{f as r}from"./firstFocusableElement.CXP_yyKj.min.js";import{M as s}from"./MediaQueryUtility.XUqPEpPx.min.js";import{c as o,a as i,o as l,f as n}from"./vendor-floating-ui.C1UtsHOD.min.js";import{k as a,i as d,T as c,x as u,d as h,c as p,n as m,r as g}from"./vendor-lit.2u3dzq2T.min.js";import"./BaseElement.wji90fuE.min.js";var b=Object.defineProperty,f=(e,t,r,s)=>{for(var o,i=void 0,l=e.length-1;l>=0;l--)(o=e[l])&&(i=o(t,r,i)||i);return i&&b(t,r,i),i};const y=((e=class extends t{constructor(){super(),this.mediaQueryUtility=new s(this,e.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=a(),this.listboxElement=a(),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,r=e.target;if(!t||!r)return;if(!t.contains(r))return;const s="BUTTON"===r.tagName?r:r.closest("button");s&&(s.disabled||(this.selectValue(s.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 r=Array.from(t.querySelectorAll("button")),s=this.currentActiveElement,o=r.findIndex(e=>e===s);if(-1===o)return void r[0].focus();const i="ArrowUp"===e.key?o-1:o+1;if(i<0)return r[r.length-1].focus();if(i>=r.length)return r[0].focus();r[i].focus()}}_handleToggleClick(){this._expanded=!this._expanded}updated(e){super.updated(e),e.has("_expanded")&&"boolean"==typeof e.get("_expanded")&&this._handleExpandedStateChange()}_positionListbox(e,t){o(e,t,{placement:"bottom-start",strategy:"absolute",middleware:[l(5),n({crossAxis:!1,fallbackPlacements:["top-start","bottom-start"],fallbackAxisSideDirection:"start"})]}).then(({x:e,y:r})=>{Object.assign(t.style,{left:`${e}px`,top:`${r}px`})})}async _handleExpandedStateChange(){var e;if(null==(e=this._cleanupWatcher)||e.call(this),await this.updateComplete,!this._expanded)return;const t=this.toggleElement.value,r=this.listboxElement.value;t&&r&&(this._cleanupWatcher=i(t,r,()=>this._positionListbox(t,r)),this._onExpanded())}_onCollapsed(){var t;null==(t=this.toggleElement.value)||t.focus(),this.$emit(e.EVENTS.CLOSE,{value:this.value})}_onExpanded(){setTimeout(()=>{var e;this.listboxElement.value&&(null==(e=r(this.listboxElement.value))||e.focus())},100),this.$emit(e.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?u`
2      <p id="${this.id}_text" class=${_.HELP_TEXT}>
3        ${this.helpText}
4      </p>
5    `:c}get labelHTML(){return u`
6      <label for="${this.idForToggle}" class=${_.LABEL}>
7        ${this.label}
8      </label>
9    `}getDropdownItemHTML(e){return u`
10      <button
11        type="button"

12        class=${_.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 r=t.el.getAttribute("data-img-url"),s=t.el.getAttribute("data-img-alt");return r?u`
24        <span class="flex items-center">
25          <img
26            src="${r}"
27            loading="lazy"
28            alt="${s||""}"
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 r=t.el.getAttribute("data-img-url"),s=t.el.getAttribute("data-img-alt");return r?u`
35      <span class="flex items-center">
36        <img
37          src="${r}"
38          loading="lazy"
39          alt="${s||""}"
40          width="18"
41          height="16"
42        />
43        <span class="ms-xs">${t.label}</span>
44      </span>
45    `:t.label}get getCustomSelectHTML(){return u`
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          ${h(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=${_.TOGGLE}
68        >
69          <span class="pr-sm block truncate">${this._currentToggleLabel}</span>
70          <div class=${_.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          ${h(this.listboxElement)}
81          id="dropdown"
82          role="listbox"
83          id="${this.idForListbox}"
84          ?inert=${!this._expanded}
85          class=${_.DROPDOWN}
86          ${this.multiple?'aria-multiselectable="true"':""}
87        >
88          ${p(this._processedOptions,e=>this.getDropdownItemHTML(e))}
89        </div>
90        ${this.labelHTML}
91      </div>
92      ${this.helpTextHTML}
93    `}get getNativeSelectHTML(){return u`<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:u`${c}`}}).EVENTS={OPEN:"open",CLOSE:"close"},e.styles=[d`
94      @starting-style {
95        .custom-select__dropdown {
96          opacity: 0 !important;
97          transform: translateY(2rem) !important;
98        }
99      }
100    `],e.CUSTOM_SELECT_BREAKPOINT="(min-width: 1024px)",e);f([m({type:String})],y.prototype,"label"),f([m({type:String})],y.prototype,"placeholder"),f([m({type:Boolean,attribute:"always-show-placeholder"})],y.prototype,"alwaysShowPlaceholder"),f([m({type:Boolean})],y.prototype,"error"),f([m({type:Array,attribute:"options"})],y.prototype,"_options"),f([m({type:String})],y.prototype,"helpText"),f([m({type:String})],y.prototype,"errorText"),f([g()],y.prototype,"_expanded");let x=y;customElements.get("custom-select")||customElements.define("custom-select",x);const _={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{x as CustomSelect};