@getflip/swirl-components 0.512.0 → 0.513.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.json +47 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-select.cjs.entry.js +8 -2
- package/dist/collection/components/swirl-select/swirl-select.js +46 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-select.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-select.entry.js +8 -2
- package/dist/swirl-components/p-29824fa5.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-select/swirl-select.d.ts +2 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-7d94ff80.entry.js +0 -1
|
@@ -100,6 +100,12 @@ const SwirlSelect = class {
|
|
|
100
100
|
}
|
|
101
101
|
this.valueChange.emit(this.value);
|
|
102
102
|
}
|
|
103
|
+
async selectSearchInput() {
|
|
104
|
+
this.searchInput?.select();
|
|
105
|
+
}
|
|
106
|
+
async focusSearchInput() {
|
|
107
|
+
this.searchInput?.focus();
|
|
108
|
+
}
|
|
103
109
|
observeSlotChanges() {
|
|
104
110
|
this.observer = new MutationObserver(() => {
|
|
105
111
|
this.updateOptions();
|
|
@@ -227,11 +233,11 @@ const SwirlSelect = class {
|
|
|
227
233
|
"select--search-loading": this.searchLoading,
|
|
228
234
|
"select--standalone": this.standalone,
|
|
229
235
|
});
|
|
230
|
-
return (index.h(index.Host, { key: '
|
|
236
|
+
return (index.h(index.Host, { key: '24c12aad133e4912ebee173c406a703ebc78dba7', onKeyDown: this.onKeyDown }, index.h("div", { key: '6b6306e6be1dc2f1e6b4fa5da1f7bb2d98acaf92', class: className }, index.h("swirl-popover-trigger", { key: 'a9f5e065e929e2d32c0aefef51e085945be17c42', swirlPopover: this.swirlPopover, setAriaAttributes: false }, index.h("swirl-stack", { key: '56eac17595d3a515643e5a1548e09c1129708fee', class: "select__value-container" }, this.standalone && (index.h("span", { key: '10a3b60701ee3a7dda18c8f1b3fc55ce4c071947', "aria-hidden": "true", class: "select__resize-helper" }, label)), index.h("input", { key: '28c8837f0f2ba57675744f4595a1bf6959f76292', "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 }))), index.h("span", { key: '748bbe9b5d231b03dd17dd519f2814d286ec8a79', class: "select__multi-select-values" }, this.value
|
|
231
237
|
?.map((value) => this.options.find((option) => option.value === value))
|
|
232
238
|
?.map((option) => (index.h("swirl-tag", { "aria-hidden": "true", label: option?.label,
|
|
233
239
|
// eslint-disable-next-line react/jsx-no-bind
|
|
234
|
-
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), index.h("span", { key: '
|
|
240
|
+
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), index.h("span", { key: 'a6b8a95b9c88d50e0010fcfdefd22b6aec555527', class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (index.h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), index.h("swirl-popover", { key: '99125dda23118d225200a589c5bdf8a62af579ff', 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 && (index.h("div", { key: '958ff2011ae8762212a01fc530a46eb27d6080cf', class: "select__search" }, index.h("swirl-icon-search", { key: '441fd22a7c27a6eba52717a926fe1d5968c333eb', class: "select__search-icon", size: 20 }), index.h("input", { key: 'b3f4d99371fe4bc4295e0ecc2804cc4707e29078', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (index.h("swirl-spinner", { key: '98a9d7b50ef013cb43810878e61b69ebbd53d5d4', class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { key: '46f668d502a4b0bbaa2bd805c4c2f55e7db89be2', class: "select__option-list", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { key: '55758715e87468c8e443764853bbcd9f6454e2f4', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: '543a369827294b278816b1d37f29450ffb5c7d0a', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: '9959a6969c2e5ac08790561803552aebab5067dd', onSlotchange: this.onSlotChange }))))));
|
|
235
241
|
}
|
|
236
242
|
get el() { return index.getElement(this); }
|
|
237
243
|
static get watchers() { return {
|
|
@@ -92,6 +92,12 @@ export class SwirlSelect {
|
|
|
92
92
|
}
|
|
93
93
|
this.valueChange.emit(this.value);
|
|
94
94
|
}
|
|
95
|
+
async selectSearchInput() {
|
|
96
|
+
this.searchInput?.select();
|
|
97
|
+
}
|
|
98
|
+
async focusSearchInput() {
|
|
99
|
+
this.searchInput?.focus();
|
|
100
|
+
}
|
|
95
101
|
observeSlotChanges() {
|
|
96
102
|
this.observer = new MutationObserver(() => {
|
|
97
103
|
this.updateOptions();
|
|
@@ -219,11 +225,11 @@ export class SwirlSelect {
|
|
|
219
225
|
"select--search-loading": this.searchLoading,
|
|
220
226
|
"select--standalone": this.standalone,
|
|
221
227
|
});
|
|
222
|
-
return (h(Host, { key: '
|
|
228
|
+
return (h(Host, { key: '24c12aad133e4912ebee173c406a703ebc78dba7', onKeyDown: this.onKeyDown }, h("div", { key: '6b6306e6be1dc2f1e6b4fa5da1f7bb2d98acaf92', class: className }, h("swirl-popover-trigger", { key: 'a9f5e065e929e2d32c0aefef51e085945be17c42', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: '56eac17595d3a515643e5a1548e09c1129708fee', class: "select__value-container" }, this.standalone && (h("span", { key: '10a3b60701ee3a7dda18c8f1b3fc55ce4c071947', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '28c8837f0f2ba57675744f4595a1bf6959f76292', "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: '748bbe9b5d231b03dd17dd519f2814d286ec8a79', class: "select__multi-select-values" }, this.value
|
|
223
229
|
?.map((value) => this.options.find((option) => option.value === value))
|
|
224
230
|
?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
|
|
225
231
|
// eslint-disable-next-line react/jsx-no-bind
|
|
226
|
-
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '
|
|
232
|
+
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: 'a6b8a95b9c88d50e0010fcfdefd22b6aec555527', 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: '99125dda23118d225200a589c5bdf8a62af579ff', 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: '958ff2011ae8762212a01fc530a46eb27d6080cf', class: "select__search" }, h("swirl-icon-search", { key: '441fd22a7c27a6eba52717a926fe1d5968c333eb', class: "select__search-icon", size: 20 }), h("input", { key: 'b3f4d99371fe4bc4295e0ecc2804cc4707e29078', "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: '98a9d7b50ef013cb43810878e61b69ebbd53d5d4', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '46f668d502a4b0bbaa2bd805c4c2f55e7db89be2', class: "select__option-list", allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '55758715e87468c8e443764853bbcd9f6454e2f4', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '543a369827294b278816b1d37f29450ffb5c7d0a', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '9959a6969c2e5ac08790561803552aebab5067dd', onSlotchange: this.onSlotChange }))))));
|
|
227
233
|
}
|
|
228
234
|
static get is() { return "swirl-select"; }
|
|
229
235
|
static get encapsulation() { return "scoped"; }
|
|
@@ -587,6 +593,44 @@ export class SwirlSelect {
|
|
|
587
593
|
}
|
|
588
594
|
}];
|
|
589
595
|
}
|
|
596
|
+
static get methods() {
|
|
597
|
+
return {
|
|
598
|
+
"selectSearchInput": {
|
|
599
|
+
"complexType": {
|
|
600
|
+
"signature": "() => Promise<void>",
|
|
601
|
+
"parameters": [],
|
|
602
|
+
"references": {
|
|
603
|
+
"Promise": {
|
|
604
|
+
"location": "global",
|
|
605
|
+
"id": "global::Promise"
|
|
606
|
+
}
|
|
607
|
+
},
|
|
608
|
+
"return": "Promise<void>"
|
|
609
|
+
},
|
|
610
|
+
"docs": {
|
|
611
|
+
"text": "",
|
|
612
|
+
"tags": []
|
|
613
|
+
}
|
|
614
|
+
},
|
|
615
|
+
"focusSearchInput": {
|
|
616
|
+
"complexType": {
|
|
617
|
+
"signature": "() => Promise<void>",
|
|
618
|
+
"parameters": [],
|
|
619
|
+
"references": {
|
|
620
|
+
"Promise": {
|
|
621
|
+
"location": "global",
|
|
622
|
+
"id": "global::Promise"
|
|
623
|
+
}
|
|
624
|
+
},
|
|
625
|
+
"return": "Promise<void>"
|
|
626
|
+
},
|
|
627
|
+
"docs": {
|
|
628
|
+
"text": "",
|
|
629
|
+
"tags": []
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
};
|
|
633
|
+
}
|
|
590
634
|
static get elementRef() { return "el"; }
|
|
591
635
|
static get watchers() {
|
|
592
636
|
return [{
|