@getflip/swirl-components 0.511.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/cjs/swirl-text-input.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-select/swirl-select.js +46 -2
- package/dist/collection/components/swirl-text-input/swirl-text-input.css +9 -0
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-select.js +1 -1
- package/dist/components/swirl-text-input2.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/esm/swirl-text-input.entry.js +1 -1
- package/dist/swirl-components/p-29824fa5.entry.js +1 -0
- package/dist/swirl-components/{p-14d1c6fa.entry.js → p-cc5b5d37.entry.js} +1 -1
- 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 {
|
|
@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
|
|
|
5
5
|
var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
|
|
6
6
|
require('./utils-UfZG-xPD.js');
|
|
7
7
|
|
|
8
|
-
const swirlTextInputCss = () => `.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}`;
|
|
8
|
+
const swirlTextInputCss = () => `.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--clearable.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--font-size-sm.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-sm.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--font-size-base.sc-swirl-text-input{--swirl-text-input-placeholder-size:var(--s-font-size-base);font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--font-size-base.sc-swirl-text-input .text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}}.text-input--has-suffix.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{top:calc(-1 * var(--s-space-8));right:calc(-1 * var(--s-space-12))}}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input{width:2rem;height:1.125rem;justify-content:center;background-color:var(--s-surface-raised-default)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:first-of-type{border-top-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:last-of-type{border-bottom-right-radius:var(--s-border-radius-sm)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input:hover{background-color:var(--s-surface-raised-hovered)}.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-less.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__step-button.sc-swirl-text-input swirl-icon-expand-more.sc-swirl-text-input{width:1rem}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:calc(100% + var(--s-space-12) + var(--s-border-width-default));right:calc(-1 * var(--s-space-12));max-width:6rem}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-subdued);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}.text-input__input.sc-swirl-text-input::-moz-placeholder{font-size:var(--swirl-text-input-placeholder-size)}.text-input__input.sc-swirl-text-input::placeholder{font-size:var(--swirl-text-input-placeholder-size)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}`;
|
|
9
9
|
|
|
10
10
|
const SwirlTextInput = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -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 [{
|
|
@@ -193,6 +193,9 @@
|
|
|
193
193
|
color: var(--s-icon-default);
|
|
194
194
|
background-color: transparent;
|
|
195
195
|
cursor: pointer;
|
|
196
|
+
-webkit-user-select: none;
|
|
197
|
+
-moz-user-select: none;
|
|
198
|
+
user-select: none;
|
|
196
199
|
}
|
|
197
200
|
|
|
198
201
|
.text-input__clear-button:focus:not(:focus-visible), .text-input__password-toggle:focus:not(:focus-visible) {
|
|
@@ -217,6 +220,9 @@
|
|
|
217
220
|
right: 0;
|
|
218
221
|
display: flex;
|
|
219
222
|
flex-direction: column;
|
|
223
|
+
-webkit-user-select: none;
|
|
224
|
+
-moz-user-select: none;
|
|
225
|
+
user-select: none;
|
|
220
226
|
}
|
|
221
227
|
|
|
222
228
|
@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
|
|
@@ -234,6 +240,9 @@
|
|
|
234
240
|
color: var(--s-icon-default);
|
|
235
241
|
background-color: transparent;
|
|
236
242
|
cursor: pointer;
|
|
243
|
+
-webkit-user-select: none;
|
|
244
|
+
-moz-user-select: none;
|
|
245
|
+
user-select: none;
|
|
237
246
|
}
|
|
238
247
|
|
|
239
248
|
.text-input__step-button:focus:not(:focus-visible) {
|