@getflip/swirl-components 0.456.3 → 0.457.0

package/dist/esm/swirl-select.entry.js

@@ -14,6 +14,7 @@ const SwirlSelect = class {
         this.searchInputLabel = "Search options";
         this.selectId = Math.round(Math.random() * 1000000).toString();
         this.options = [];
+        this.typeaheadBuffer = "";
         this.select = (event) => {
             event.stopPropagation();
             this.value = event.detail;
@@ -33,6 +34,8 @@ const SwirlSelect = class {
         this.onOpen = (event) => {
             this.placement = event.detail.position?.placement;
             this.open = true;
+            this.typeaheadBuffer = "";
+            clearTimeout(this.typeaheadTimeout);
             if (this.withSearch && Boolean(this.searchInput)) {
                 this.searchInput.focus();
             }
@@ -45,6 +48,8 @@ const SwirlSelect = class {
                 this.searchInput.value = "";
                 this.searchChange.emit("");
             }
+            this.typeaheadBuffer = "";
+            clearTimeout(this.typeaheadTimeout);
             this.open = false;
             this.input.focus();
         };
@@ -60,6 +65,11 @@ const SwirlSelect = class {
                 event.target === this.searchInput) {
                 this.optionList.querySelector('[tabIndex="0"]')?.focus();
             }
+            else if (this.isTypeaheadKey(event)) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.handleTypeahead(event.key);
+            }
         };
         this.onSearchInput = (event) => {
             this.searchChange.emit(event.target.value);
@@ -73,6 +83,7 @@ const SwirlSelect = class {
     }
     disconnectedCallback() {
         this.observer?.disconnect();
+        clearTimeout(this.typeaheadTimeout);
     }
     onWindowFocusIn(event) {
         if (event.target === this.el.querySelector("input")) {
@@ -99,6 +110,96 @@ const SwirlSelect = class {
     updateOptions() {
         this.options = querySelectorAllDeep(this.el, "swirl-option-list-item");
     }
+    /**
+     * Returns true for printable single-character keys that should trigger
+     * typeahead, excluding Space (used for selection) and keys combined with
+     * modifiers. Ignores events from the search input.
+     */
+    isTypeaheadKey(event) {
+        if (event.target === this.searchInput) {
+            return false;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            return false;
+        }
+        return event.key.length === 1 && event.key !== " ";
+    }
+    /**
+     * Manages the typeahead buffer and delegates to either cycling (repeated
+     * same character) or prefix matching (different characters). Resets the
+     * buffer if transitioning out of cycling mode. The buffer auto-clears
+     * after 500ms of inactivity.
+     */
+    handleTypeahead(key) {
+        const char = key.toLowerCase();
+        clearTimeout(this.typeaheadTimeout);
+        const allSameChar = this.typeaheadBuffer.length > 0 &&
+            [...this.typeaheadBuffer].every((c) => c === char);
+        if (allSameChar) {
+            this.typeaheadBuffer += char;
+            this.cycleTypeahead(char);
+        }
+        else {
+            const wasCycling = this.typeaheadBuffer.length > 1 &&
+                new Set(this.typeaheadBuffer).size === 1;
+            this.typeaheadBuffer = wasCycling ? char : this.typeaheadBuffer + char;
+            if (!this.prefixMatchTypeahead(this.typeaheadBuffer)) {
+                this.typeaheadBuffer = char;
+                this.prefixMatchTypeahead(this.typeaheadBuffer);
+            }
+        }
+        this.typeaheadTimeout = setTimeout(() => {
+            this.typeaheadBuffer = "";
+        }, 500);
+    }
+    /**
+     * Cycles focus/selection through options that start with the given
+     * character, wrapping around to the first match after the last one.
+     */
+    cycleTypeahead(char) {
+        const enabledOptions = this.options.filter((o) => !o.disabled);
+        const matching = enabledOptions.filter((o) => o.label?.toLowerCase().startsWith(char));
+        if (matching.length === 0) {
+            return;
+        }
+        const anchorValue = this.getTypeaheadAnchorValue();
+        const currentIdx = matching.findIndex((o) => o.value === anchorValue);
+        const nextIdx = (currentIdx + 1) % matching.length;
+        this.applyTypeaheadMatch(matching[nextIdx]);
+    }
+    /**
+     * Finds the first enabled option whose label starts with the given prefix
+     * (case-insensitive) and focuses/selects it. Returns whether a match was
+     * found, so the caller can fall back to a single-character retry.
+     */
+    prefixMatchTypeahead(prefix) {
+        const enabledOptions = this.options.filter((o) => !o.disabled);
+        const match = enabledOptions.find((o) => o.label?.toLowerCase().startsWith(prefix));
+        if (match) {
+            this.applyTypeaheadMatch(match);
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Returns the value of the currently focused option (when open) or the
+     * last selected value (when closed), used as the starting point for cycling.
+     */
+    getTypeaheadAnchorValue() {
+        if (this.open) {
+            const focused = this.options.find((o) => o.querySelector('[role="option"][tabindex="0"]'));
+            return focused?.value;
+        }
+        return this.value?.[this.value.length - 1];
+    }
+    /**
+     * Applies a typeahead match by focusing the option in the open list.
+     */
+    applyTypeaheadMatch(option) {
+        if (this.open) {
+            this.optionList.focusItemWithValue(option.value);
+        }
+    }
     getValueLabel() {
         return Boolean(this.value)
             ? this.value
@@ -124,11 +225,11 @@ const SwirlSelect = class {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: '4a52474a84ddb2f31804ad8c7e593b7f66668136', onKeyDown: this.onKeyDown }, h("div", { key: '499bffdf6da163ff865c5ee335473e500b4863b6', class: className }, h("swirl-popover-trigger", { key: '1838e94f5ef3b5f0f966618dafc92bc291bad7c2', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'c7280406b0d22b3d5ae4fbe1122f12e74ee48352', class: "select__value-container" }, this.standalone && (h("span", { key: '7669d5d4a2768148d47adb9df1c9000543adcc7d', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: 'e260c10e3a6fbd1c1a5bab59cf27dc034de9a9cd', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '824f6bee796b8cfd96c883d6e850e80aefa74f28', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: 'fb5381d9847789755c891530848715a66612c73a', onKeyDown: this.onKeyDown }, h("div", { key: 'ec4a8fd2cf3e29ec98b4855e7962808c97232684', class: className }, h("swirl-popover-trigger", { key: 'd8cd5ad295b1b05175c13f5492a44b9d171f07a7', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'e488349fbb57486ca6916eae73fe3f222503408f', class: "select__value-container" }, this.standalone && (h("span", { key: 'b84c6e890d51940c32780197e1201707fdaabe84', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '5e11eeaca9f63f501c0a776d79e2a920188d1f16', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '6a24242f1b1c12b79fb705e905cc56b45edccbb0', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '582b90d8f10aef371fbefbbaa8047473b2050d15', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '84aedb5d46959ecca9afd3ad99c1fdc22a54461b', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '8b1fd39c468f17002698f5695838f22caaf3e85f', class: "select__search" }, h("swirl-icon-search", { key: '8bc4856fe8e0c78ec76f49df8d1abe68fa35717c', class: "select__search-icon", size: 20 }), h("input", { key: 'ff78bf79652a26b806ede427ae18c9f4a9f0070f', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '76954ab87f375fa9a95e9bca3106cb055705c550', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'c88aeae4f0ae5315e45958e04ef5a836f5d74ba9', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '00f71a275007321fa3a3fa26d24e1b73d34e9be6', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '8051a991c25c83b394e4ef7e469b65dd4103d0ca', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '1d380c7e2b549bbd54488c431b8da08e0255ba33', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '1269e975efb7930b3defdc7e818d044e63bfbf31', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '8807a75e712facd319f2a7d62466ea8009bf02e4', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: '744926136b2d2b85623e1388e2e2bab32e5f597d', class: "select__search" }, h("swirl-icon-search", { key: 'fb629903439586f28dcc89cc4a13180f93d282e4', class: "select__search-icon", size: 20 }), h("input", { key: '7e5e6a98ac828330cb6e3bc5fb735d2bdedfc0c0', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '180c43636f58b88658181b728dbbd40c26cd89bc', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'e0c3e2ec010851a20b99ae33bcff619b1f3c067f', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '1c9712715420c7b2e390577d21cc0fa2f66e163c', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '8486dce94b93b2bb2471ac26a8ead72aba8b7d4b', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: 'a6684b60611a1b5eab4a19e444b8d6ef113eb59c', onSlotchange: this.onSlotChange }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/swirl-components/p-34b71786.entry.js

@@ -0,0 +1 @@
+import{r as e,c as s,h as t,a as i,d as c}from"./p-bQirifsr.js";import{c as l}from"./p-orsBiyT_.js";import{q as a}from"./p-CCck-DTo.js";const r=class{constructor(t){e(this,t),this.searchChange=s(this,"searchChange",7),this.valueChange=s(this,"valueChange",7),this.allowDeselect=!0,this.emptyListLabel="No results found.",this.searchInputLabel="Search options",this.selectId=Math.round(1e6*Math.random()).toString(),this.options=[],this.typeaheadBuffer="",this.select=e=>{e.stopPropagation(),this.value=e.detail,this.multiSelect||this.swirlPopover.close()},this.unselectOption=e=>{this.allowDeselect&&(this.value=this.value.filter((s=>s!==e)))},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=e=>{this.placement=e.detail.position?.placement,this.open=!0,this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.withSearch&&Boolean(this.searchInput)?this.searchInput.focus():this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onClose=()=>{Boolean(this.searchInput)&&(this.searchInput.value="",this.searchChange.emit("")),this.typeaheadBuffer="",clearTimeout(this.typeaheadTimeout),this.open=!1,this.input.focus()},this.onKeyDown=e=>{if("Space"===e.code||"Enter"===e.code){if(e.target===this.searchInput)return;e.preventDefault(),this.swirlPopover.open(this.el)}else"ArrowDown"===e.code&&e.target===this.searchInput?this.optionList.querySelector('[tabIndex="0"]')?.focus():this.isTypeaheadKey(e)&&(e.preventDefault(),e.stopPropagation(),this.handleTypeahead(e.key))},this.onSearchInput=e=>{this.searchChange.emit(e.target.value)}}componentWillLoad(){queueMicrotask((()=>{this.updateOptions(),this.observeSlotChanges()}))}disconnectedCallback(){this.observer?.disconnect(),clearTimeout(this.typeaheadTimeout)}onWindowFocusIn(e){e.target===this.el.querySelector("input")&&e.stopImmediatePropagation()}onValueChange(e,s){e?.length===s?.length&&e?.every((e=>s?.includes(e)))||this.valueChange.emit(this.value)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateOptions()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptions(){this.options=a(this.el,"swirl-option-list-item")}isTypeaheadKey(e){return e.target!==this.searchInput&&!(e.metaKey||e.ctrlKey||e.altKey)&&1===e.key.length&&" "!==e.key}handleTypeahead(e){const s=e.toLowerCase();if(clearTimeout(this.typeaheadTimeout),this.typeaheadBuffer.length>0&&[...this.typeaheadBuffer].every((e=>e===s)))this.typeaheadBuffer+=s,this.cycleTypeahead(s);else{const e=this.typeaheadBuffer.length>1&&1===new Set(this.typeaheadBuffer).size;this.typeaheadBuffer=e?s:this.typeaheadBuffer+s,this.prefixMatchTypeahead(this.typeaheadBuffer)||(this.typeaheadBuffer=s,this.prefixMatchTypeahead(this.typeaheadBuffer))}this.typeaheadTimeout=setTimeout((()=>{this.typeaheadBuffer=""}),500)}cycleTypeahead(e){const s=this.options.filter((e=>!e.disabled)).filter((s=>s.label?.toLowerCase().startsWith(e)));if(0===s.length)return;const t=this.getTypeaheadAnchorValue(),i=s.findIndex((e=>e.value===t));this.applyTypeaheadMatch(s[(i+1)%s.length])}prefixMatchTypeahead(e){const s=this.options.filter((e=>!e.disabled)).find((s=>s.label?.toLowerCase().startsWith(e)));return!!s&&(this.applyTypeaheadMatch(s),!0)}getTypeaheadAnchorValue(){if(this.open){const e=this.options.find((e=>e.querySelector('[role="option"][tabindex="0"]')));return e?.value}return this.value?.[this.value.length-1]}applyTypeaheadMatch(e){this.open&&this.optionList.focusItemWithValue(e.value)}getValueLabel(){return Boolean(this.value)?this.value?.map((e=>this.options.find((s=>s.value===e))?.label)).join(", "):""}render(){const e=this.getValueLabel(),s=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,c=this.el.closest("swirl-form-control"),a=this.standalone?[-8,0]:c?.inline||"outside"===c?.labelPosition?[0,-12]:[0,-16],r=l("select",`select--placement-${this.placement}`,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect,"select--search-loading":this.searchLoading,"select--standalone":this.standalone});return t(i,{key:"fb5381d9847789755c891530848715a66612c73a",onKeyDown:this.onKeyDown},t("div",{key:"ec4a8fd2cf3e29ec98b4855e7962808c97232684",class:r},t("swirl-popover-trigger",{key:"d8cd5ad295b1b05175c13f5492a44b9d171f07a7",swirlPopover:this.swirlPopover,setAriaAttributes:!1},t("swirl-stack",{key:"e488349fbb57486ca6916eae73fe3f222503408f",class:"select__value-container"},this.standalone&&t("span",{key:"b84c6e890d51940c32780197e1201707fdaabe84","aria-hidden":"true",class:"select__resize-helper"},e),t("input",{key:"5e11eeaca9f63f501c0a776d79e2a920188d1f16","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":s,class:"select__input",disabled:this.disabled,readOnly:!0,ref:e=>this.input=e,type:"text",value:e}))),t("span",{key:"6a24242f1b1c12b79fb705e905cc56b45edccbb0",class:"select__multi-select-values"},this.value?.map((e=>this.options.find((s=>s.value===e))))?.map((e=>t("swirl-tag",{"aria-hidden":"true",label:e?.label,onRemove:()=>this.unselectOption(e?.value),removable:!this.disabled&&this.allowDeselect&&!e?.disabled})))),t("span",{key:"1269e975efb7930b3defdc7e818d044e63bfbf31",class:"select__indicator"},t(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",{size:this.standalone?20:24})),t("swirl-popover",{key:"8807a75e712facd319f2a7d62466ea8009bf02e4",animation:"scale-in-y",class:"select__popover",id:`select-options-${this.selectId}`,label:this.label,offset:a,onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,ref:e=>this.swirlPopover=e,useContainerWidth:!this.standalone&&"swirl-form-control"},this.withSearch&&t("div",{key:"744926136b2d2b85623e1388e2e2bab32e5f597d",class:"select__search"},t("swirl-icon-search",{key:"fb629903439586f28dcc89cc4a13180f93d282e4",class:"select__search-icon",size:20}),t("input",{key:"7e5e6a98ac828330cb6e3bc5fb735d2bdedfc0c0","aria-label":this.searchInputLabel,class:"select__search-input",onInput:this.onSearchInput,placeholder:this.searchPlaceholder,ref:e=>this.searchInput=e,type:"search"}),this.searchLoading&&t("swirl-spinner",{key:"180c43636f58b88658181b728dbbd40c26cd89bc",class:"select__search-spinner",size:"s"})),t("swirl-option-list",{key:"e0c3e2ec010851a20b99ae33bcff619b1f3c067f",allowDeselect:this.allowDeselect,onValueChange:this.select,multiSelect:this.multiSelect,ref:e=>this.optionList=e,value:this.value},!this.searchLoading&&t("div",{key:"1c9712715420c7b2e390577d21cc0fa2f66e163c","aria-disabled":"true",class:"select__empty-list-label",role:"option"},t("swirl-text",{key:"8486dce94b93b2bb2471ac26a8ead72aba8b7d4b",color:"subdued",weight:"medium"},this.emptyListLabel)),t("slot",{key:"a6684b60611a1b5eab4a19e444b8d6ef113eb59c",onSlotchange:this.onSlotChange})))))}get el(){return c(this)}static get watchers(){return{value:[{onValueChange:0}]}}};r.style='.sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content),.select.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content),.select--placement-top-start.sc-swirl-select .sc-swirl-select [part~="popover__content"]{margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:pre;white-space:pre;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;flex-shrink:0;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag),.select__multi-select-values.sc-swirl-select .sc-swirl-select [part~="tag"]{height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}';export{r as swirl_select}

package/dist/swirl-components/p-e185b0d9.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,a as e,d as a}from"./p-bQirifsr.js";import{S as o}from"./p-CMrz6687.js";import{l as r,q as n}from"./p-CCck-DTo.js";import{v as l}from"./p-DD3477fe.js";import{c as h}from"./p-orsBiyT_.js";const c=class{constructor(s){t(this,s),this.itemDrop=i(this,"itemDrop",7),this.valueChange=i(this,"valueChange",7),this.allowDeselect=!0,this.assistiveTextItemGrabbed="Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.",this.assistiveTextItemMoving="Current position:",this.assistiveTextItemMoved="Item moved. New position:",this.selectAllLabel="Select all",this.value=[],this.selectAllState=!1,this.selectAllValue=l(),this.onClick=t=>{t.preventDefault();const i=t.target,s=i?.closest("swirl-option-list-item"),e=t.composedPath()[0],a=Boolean(r(e,'[role="option"]'));if(Boolean(s)&&a)if(s.value===this.selectAllValue)this.selectAllChanged();else{const t=this.items.findIndex((t=>t.value===s.value));this.focusItem(t),this.selectItem(t)}else t.preventDefault()},this.onKeyDown=t=>{if("ArrowDown"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemDown():this.focusNextItem();else if("ArrowUp"===t.code)t.preventDefault(),Boolean(this.dragging)?this.moveDraggedItemUp():this.focusPreviousItem();else if("Space"===t.code||"Enter"===t.code){if(!t.target.classList.contains("option-list-item__drag-handle")&&Boolean(this.dragging))return t.preventDefault(),void this.stopDrag(this.dragging);const i=t.composedPath()[0],s=Boolean(r(i,'[role="option"]')),e=i?.closest("swirl-option-list-item")?.value===this.selectAllValue;if(!s&&!e)return;t.preventDefault(),Boolean(this.dragging)?this.stopDrag(this.dragging):e?this.selectAllChanged():this.selectFocusedItem()}else"Home"===t.code?(t.preventDefault(),this.showSelectAll?this.focusSelectAll():this.focusItem(0)):"End"===t.code?(t.preventDefault(),this.focusItem(this.items.length-1)):"KeyA"===t.code&&(t.metaKey||t.ctrlKey)&&this.multiSelect?(t.preventDefault(),this.selectAllItems()):"Tab"===t.code&&Boolean(this.dragging)&&t.preventDefault()},this.resetTabIndex=()=>{this.removeItemsTabIndex(),this.focusedItem=void 0;const t=this.items[0]?.querySelector('[role="option"]'),i=this.selectAllEl?.querySelector('[role="option"]');(i||t)?.setAttribute("tabIndex","0")},this.selectAllChanged=()=>{if(this.disabled)return;const t=this.items?.length||0;this.updateValue((this.value?.length||0)===t?[]:this.items.map((t=>t.value)))},this.toggleDrag=t=>{const i=t.detail;Boolean(this.dragging)?this.stopDrag(i):this.startDrag(i)},this.startDrag=t=>{this.dragging=t,this.draggingStartIndex=this.getItemIndex(this.dragging),t.setAttribute("dragging","true");const i=this.getItemIndex(this.dragging);this.focusItem(i),this.assistiveText=this.assistiveTextItemGrabbed},this.stopDrag=t=>{this.dragging=void 0,t.removeAttribute("dragging");const i=this.getActiveItemIndex();this.assistiveText=`${this.assistiveTextItemMoved} ${i+1}`,this.itemDrop.emit({item:t,oldIndex:this.draggingStartIndex,newIndex:i}),this.draggingStartIndex=void 0,this.focusItem(i)}}componentDidLoad(){this.updateItems(),this.observeSlotChanges(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setupDragDrop(),this.setSectionSeparator(),this.setSelectAllState(),this.subscribeToSwirlPopover()}componentDidRender(){this.setupDragDrop()}disconnectedCallback(){this.unsubscribeFromSwirlPopover(),this.observer?.disconnect(),this.sortable?.destroy(),this.removeToggleDragListeners()}removeToggleDragListeners(){this.items?.forEach((t=>{t.removeEventListener("toggleDrag",this.toggleDrag)}))}watchAllowDrag(){this.setItemAllowDragState(),this.setupDragDrop()}watchDisabled(){this.setItemDisabledState()}watchMultiSelect(){this.setItemContext()}watchValue(){this.syncItemsWithValue(),this.setSelectAllState()}async focusItemWithValue(t){const i=this.items.findIndex((i=>i.value===t));i>=0&&this.focusItem(i)}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateItems(),this.setItemAllowDragState(),this.setItemDisabledState(),this.setItemContext(),this.syncItemsWithValue(),this.setSelectAllState()})),this.observer.observe(this.listboxEl,{childList:!0,subtree:!0})}setSelectAllState(){const t=this.items?.length||0,i=this.value?.length||0;this.selectAllState=0!==t&&0!==i&&(i===t||"indeterminate")}updateItems(){this.removeToggleDragListeners(),this.items=n(this.el,"swirl-option-list-item").filter((t=>t.value!==this.selectAllValue)),this.selectAllEl?.querySelector('[tabindex="0"]')||this.items.some((t=>t.querySelector('[tabindex="0"]')))||this.resetTabIndex()}removeItemsTabIndex(){this.selectAllEl?.querySelector('[role="option"]')?.removeAttribute("tabIndex"),this.items.forEach((t=>t.querySelector('[role="option"]')?.removeAttribute("tabIndex")))}setItemDisabledState(){this.disabled&&this.items.forEach((t=>t.disabled=!0))}setItemContext(){this.multiSelect?this.items.forEach((t=>t.context="multi-select")):(this.items.forEach((t=>t.context="single-select")),this.value.length>1&&this.updateValue([this.value[0]]))}setupDragDrop(){Boolean(this.sortable)&&this.sortable.destroy(),this.allowDrag&&(this.sortable=o.create(this.listboxEl,{animation:150,draggable:'swirl-option-list-item[allow-drag="true"]',dragClass:"option-list-item--drag",handle:".option-list-item__drag-handle",onEnd:t=>{this.itemDrop.emit({item:t.item,oldIndex:t.oldIndex,newIndex:t.newIndex})}}))}setItemAllowDragState(){if(this.allowDrag&&!this.multiSelect)return void console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");const t=n(this.el,"swirl-option-list-section");this.allowDrag&&t.length>0?console.error("[SwirlOptionList] Drag can only be allowed for lists without sections."):this.items.forEach(this.allowDrag?t=>{t.setAttribute("allow-drag","true"),t.addEventListener("toggleDrag",this.toggleDrag)}:t=>{t.removeAttribute("allow-drag"),t.removeEventListener("toggleDrag",this.toggleDrag)})}selectItem(t){if(this.disabled)return;const i=this.items[t];if(i.disabled)return;const s=this.value.includes(i.value);s&&!this.allowDeselect||(this.multiSelect||(this.value=[]),this.updateValue(s?this.value.filter((t=>t!==i.value)):[...this.value,i.value]))}updateValue(t){this.value=t,this.valueChange.emit(this.value)}selectFocusedItem(){this.disabled||-1===this.getActiveItemIndex()||this.selectItem(this.getActiveItemIndex())}selectAllItems(){if(this.disabled)return;const t=this.items.every((t=>this.value.includes(t.value)));this.updateValue(t?[]:this.items.map((t=>t.value)))}syncItemsWithValue(){this.items?.forEach((t=>t.selected=this.value.includes(t.value)))}focusItem(t){if(this.disabled)return;this.removeItemsTabIndex();const i=this.items[t]?.querySelector('[role="option"]');Boolean(i)&&(i.setAttribute("tabIndex","0"),i.focus(),this.focusedItem=i)}focusNextItem(){if(this.disabled)return;const t=this.getActiveItemIndex(),i=Math.min(t+1,this.items.length-1);this.focusItem(i)}focusPreviousItem(){const t=this.getActiveItemIndex();if(t<=0&&this.showSelectAll)this.focusSelectAll();else{const i=Math.max(t-1,0);this.focusItem(i)}}focusSelectAll(){const t=this.selectAllEl?.querySelector('[role="option"]');t&&(this.removeItemsTabIndex(),t.setAttribute("tabIndex","0"),t.focus(),this.focusedItem=void 0)}getActiveItemIndex(){return Boolean(this.focusedItem)?this.items.map((t=>t.querySelector('[role="option"]'))).findIndex((t=>t===this.focusedItem)):Boolean(this.selectAllEl)?-1:0}getItemIndex(t){return this.items.map((t=>t)).findIndex((i=>i===t))}moveDraggedItemDown(){const t=this.dragging.nextElementSibling;Boolean(t)&&(t.after(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getActiveItemIndex()+1}`)}moveDraggedItemUp(){const t=this.dragging.previousElementSibling;Boolean(t)&&t!==this.selectAllEl&&(t.before(this.dragging),this.updateItems(),this.listboxEl.focus(),this.assistiveText=`${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging)+1}`)}setSectionSeparator(){this.el&&Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((t=>t.isConnected)).forEach(((t,i)=>{0===i&&"SWIRL-OPTION-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1)}))}subscribeToSwirlPopover(){this.swirlPopover=r(this.el,"swirl-popover"),this.swirlPopover?.addEventListener("popoverClose",this.resetTabIndex)}unsubscribeFromSwirlPopover(){this.swirlPopover?.removeEventListener("popoverClose",this.resetTabIndex)}render(){const t=this.multiSelect?"true":void 0,i=Boolean(this.dragging)?0:void 0,a=this.multiSelect&&this.showSelectAll;return s(e,{key:"23dac33782dc5196ebf9ed3069911c4745499e51"},s("swirl-visually-hidden",{key:"31f2e96b74cf92d5bb181f878e0dcbe260f96b83",role:"alert"},this.assistiveText),s("div",{key:"468b98cde9d0dcacc7c00bacc798287a6f094281","aria-label":this.label,"aria-multiselectable":t,class:"option-list",id:this.optionListId,onClick:this.onClick,onKeyDown:this.onKeyDown,ref:t=>this.listboxEl=t,role:"listbox",tabIndex:i},a&&s("swirl-option-list-item",{key:"5f8c970263e40980e6f5162e07ddbe03220bda54",ref:t=>this.selectAllEl=t,label:this.selectAllLabel,disabled:this.disabled,context:"multi-select",selected:!0===this.selectAllState,indeterminate:"indeterminate"===this.selectAllState,value:this.selectAllValue}),s("slot",{key:"50e6464cad68af3ba9a7ecf4a628693445e62503",onSlotchange:this.setSectionSeparator})))}get el(){return a(this)}static get watchers(){return{allowDrag:[{watchAllowDrag:0}],disabled:[{watchDisabled:0}],multiSelect:[{watchMultiSelect:0}],value:[{watchValue:0}]}}};c.style=".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";const g=class{constructor(s){t(this,s),this.removeTag=i(this,"remove",7),this.iconPosition="start",this.intent="default",this.size="m",this.removalButtonLabel="Remove",this.variant="default",this.onRemove=t=>{this.removeTag?.emit(t)}}componentDidLoad(){this.forceIconProps()}componentWillLoad(){this.forceVariant()}componentDidRender(){this.forceIconProps()}forceIconProps(){const t=this.iconEl?.children[0];t?.setAttribute("size","16")}forceVariant(){Boolean(this.bordered)&&(console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.'),this.variant="outline")}render(){const t=h("tag",`tag--icon-position-${this.iconPosition}`,`tag--intent-${this.intent}`,`tag--size-${this.size}`,`tag--variant-${this.variant}`,{"tag--hide-label":this.hideLabel});return s(e,{key:"1761004fec8f52ef477c14dfb032db0cb4a2cae2"},s("span",{key:"1531d418beb787bf5a85b32bf10017d24fe458b7",class:t,part:"tag"},this.icon&&s("span",{key:"95db9c8289b2e770af02cc6eeb370a002b2bd7b1",class:"tag__icon",innerHTML:this.icon,ref:t=>this.iconEl=t}),this.hideLabel?s("swirl-visually-hidden",null,this.label):s("span",{class:"tag__label"},this.label),this.removable&&s("button",{key:"1b99be433002b0a62f07b93ff6dd6e95fafef4c9","aria-label":this.removalButtonLabel,class:"tag__removal-button",onClick:this.onRemove,tabIndex:"true"===this.el.ariaHidden?-1:void 0,type:"button"},s("swirl-icon-close",{key:"2afaee043cd6b5ce579a3aa675beb5dba764539a",size:16}))))}get el(){return a(this)}};g.style=":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";export{c as swirl_option_list,g as swirl_tag}