https://www.clinique.com/cdn/shop/t/104/assets/elc-select.yAkapeJj.min.js

1import{CustomSelect as e}from"./core-custom-select.VP5Vdjqb.min.js";import{c as t,o,f as r,s as i}from"./vendor-floating-ui.C1UtsHOD.min.js";import{b as s,x as a,T as n,c as l,d,n as c}from"./vendor-lit.2u3dzq2T.min.js";import"./FormElement.BYiZF-mA.min.js";import"./BaseElement.wji90fuE.min.js";import"./firstFocusableElement.CXP_yyKj.min.js";import"./MediaQueryUtility.XUqPEpPx.min.js";var p=Object.defineProperty,b=(e,t,o,r)=>{for(var i,s=void 0,a=e.length-1;a>=0;a--)(i=e[a])&&(s=i(t,o,s)||s);return s&&p(t,o,s),s};const u=class extends e{constructor(){super(...arguments),this.alwaysCustom=!1,this.fitOptions=!1}swatchChip(e,t){const o=e.startsWith("url(")||e.includes("gradient(")?`background-image:${e}`:`background-color:${e}`;return a`<span
2      class="elc-select__swatch${t?" elc-select__swatch--unavailable":""}"
3      style="${o}"
4      aria-hidden="true"
5    ></span>`}optionInner(e,t){const o=t.el.getAttribute("data-swatch"),r="true"===t.el.getAttribute("data-unavailable"),i=r?"elc-select__label body-sm font-normal truncate uppercase text-foreground-secondary "+(o?"":"line-through"):"elc-select__label body-sm font-normal truncate uppercase";return a`<span class="flex min-w-0 items-center gap-x-2xs">
6      ${o?this.swatchChip(o,r):n}
7      <span class="${i}">${e}</span>
8    </span>`}renderOptionLabel(e,t){return this.optionInner(e,t)}get _optionsSizer(){return a`<span
9      class="invisible col-start-1 row-start-1 !block h-0 min-w-0 overflow-hidden"
10      aria-hidden="true"
11      style="display: none;"
12    >
13      ${l(this._processedOptions,e=>a`<span class="block w-max"
14            >${this.optionInner(e.label,e)}</span
15          >`)}
16    </span>`}getDropdownItemHTML(e){return a`
17      <button
18        type="button"
19        class="${"px-forms-padding 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 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus focus-visible:outline-hidden"}"
20        role="option"
21        aria-selected="${e.selected}"
22        value="${e.value}"
23        ?selected=${e.selected}
24        ?disabled=${e.disabled}
25      >
26        <span class="block">
27          ${this.renderOptionLabel(e.label,e)}
28        </span>
29      </button>
30    `}get _currentToggleLabel(){if(this.alwaysShowPlaceholder||!this.hasSelectedOption)return this.placeholder;const e=this._processedOptions.find(e=>e.selected);return e?this.optionInner(e.label,e):this.placeholder}get getCustomSelectHTML(){return a`
31      <div
32        class="group peer relative w-full"
33        ?error=${this.error}
34        ?open=${this._expanded}
35        @click=${this._handleClick}
36      >
37        <button
38          ${d(this.toggleElement)}
39          type="button"
40          role="combobox"
41          @click=${this._handleToggleClick}
42          aria-haspopup="listbox"
43          id="${this.idForToggle}"
44          value="${this.value}"
45          aria-controls="${this.idForListbox}"
46          aria-expanded="${this._expanded}"
47          aria-disabled="${this.disabled}"
48          aria-label="${this.label}"
49          ?disabled=${this.disabled}
50          class="${"peer flex w-full items-center gap-2xs appearance-none text-left bg-background border border-solid border-(--color-forms-border) rounded-forms-radius h-sm-forms-inputheight px-sm-forms-padding text-body-sm text-foreground disabled:text-border disabled:border-border-01 focus:outline-hidden focus:ring-0 focus:border-(--color-focus) focus-visible:ring-2 focus-visible:ring-focus group-[[error]]:ring-danger group-[[error]]:border-[transparent] group-[[error]]:ring-2"}"
51        >
52          <span class="grid min-w-0 flex-1">
53            <span class="col-start-1 row-start-1 flex min-w-0 items-center">
54              ${this._currentToggleLabel}
55            </span>
56            ${this.fitOptions?this._optionsSizer:n}
57          </span>
58          <!-- Size via the token var, not icon-sm: adopted sheets can land late in shadow DOM -->
59          <svg-icon
60            src="icon-select-arrow"
61            style="--icon-size: var(--spacing-icon-sm)"
62            class="block shrink-0 transition-transform duration-300 group-[[open]]:rotate-180 motion-reduce:transition-none"
63          ></svg-icon>
64        </button>
65
66        <div
67          ${d(this.listboxElement)}
68          role="listbox"

69          id="${this.idForListbox}"
70          ?inert=${!this._expanded}
71          class="${"custom-select__dropdown min-w-max bg-c-form-bg max-h-[min(50vh,var(--elc-select-available-height,50vh))] overflow-y-auto 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 opacity-0 transition-[opacity,display] [transition-behavior:allow-discrete] motion-reduce:transition-none duration-300 group-[[open]]:opacity-100 !motion-reduce:group-[[open]]:transition-none"}"
72        >
73          ${l(this._processedOptions,e=>this.getDropdownItemHTML(e))}
74        </div>
75        ${this.labelHTML}
76      </div>
77      ${this.helpTextHTML}
78    `}render(){return this.alwaysCustom?Array.isArray(this._options)&&0!==this._options.length?this.getCustomSelectHTML:a`${n}`:super.render()}get _listboxGap(){if("bundle"===this.getAttribute("data-variant"))return-1;const e=this.getAttribute("data-listbox-offset");if(null===e)return 5;const t=Number(e);return Number.isNaN(t)?5:t}get _isInsideDialog(){let e=this.parentNode;for(;e;){if(e instanceof Element&&e.matches("dialog, modal-dialog, extended-dialog"))return!0;e=e instanceof ShadowRoot?e.host:e.parentNode}return!1}get _headerInset(){if(this._isInsideDialog)return 0;const e=document.querySelector("main-header");return e?Math.max(0,e.getBoundingClientRect().bottom):0}_positionListbox(e,s){const a={top:this._headerInset,bottom:8};t(e,s,{placement:"bottom-start",strategy:"absolute",middleware:[o(this._listboxGap),r({crossAxis:!1,fallbackPlacements:["top-start","bottom-start"],fallbackAxisSideDirection:"start",padding:a}),i({padding:a,apply:({availableHeight:e,elements:t})=>{t.floating.style.setProperty("--elc-select-available-height",`${Math.max(0,Math.round(e))}px`)}})]}).then(({x:e,y:t})=>{Object.assign(s.style,{left:`${e}px`,top:`${t}px`})})}};u.styles=[...e.styles,s(':where(button[role=combobox]){display:flex;width:100%;align-items:center;gap:var(--spacing-2xs, .5rem);height:var(--spacing-sm-forms-inputheight, 2.5rem);padding-inline:var(--spacing-sm-forms-padding, .5rem);text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color-foreground, #000);background-color:var(--color-background, #fff);border:1px solid var(--color-forms-border, rgb(153, 153, 153));border-radius:var(--radius-forms-radius, 0)}:where(:not([open])>[role=listbox]){display:none}:where(label){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host([data-variant="bundle"]) button[role=combobox]:hover,:host([data-variant="bundle"]) [open] button[role=combobox]{border-color:var(--color-forms-text, #000)}:host([data-variant="bundle"]) [role=listbox]{border-color:var(--color-forms-border, #999);border-width:0;min-width:0;max-height:18.75rem}:host([data-variant="bundle"]) [role=listbox] button[role=option]>span{flex:1 1 auto;min-width:0}:host([data-variant="bundle"]) [role=listbox] button[role=option] .truncate{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}:host([data-variant="bundle"]) [role=listbox] button[role=option]{position:relative;display:flex;align-items:center;min-height:40px;padding-top:.25rem;padding-bottom:.25rem;border-left-width:1px;border-right-width:1px;border-color:var(--color-forms-border, #999)}:host([data-variant="bundle"]) [role=listbox] button[role=option]:last-child{border-bottom-width:1px}:host([data-variant="bundle"]) [role=listbox] button[role=option]:first-child{border-top-width:1px}:host([data-variant="bundle"]) [role=listbox] button[role=option]:hover,:host([data-variant="bundle"]) [role=listbox] button[role=option][selected]{background-color:var(--color-background-secondary, #f5f5f5)}:host([data-variant="bundle"]) [role=listbox] button[role=option]:hover:before,:host([data-variant="bundle"]) [role=listbox] button[role=option][selected]:before{content:"";position:absolute;top:-1px;left:-1px;height:calc(100% + 2px);width:calc(100% + 2px);border:1px solid var(--color-forms-text, #000);z-index:10;pointer-events:none}@starting-style{.custom-select__dropdown{transform:none!important}}')];let h=u;b([c({type:Boolean,attribute:"always-custom"})],h.prototype,"alwaysCustom"),b([c({type:Boolean,attribute:"fit-options"})],h.prototype,"fitOptions"),customElements.get("elc-select")||customElements.define("elc-select",h);export{h as ElcSelect};