@getflip/swirl-components 0.291.0 → 0.292.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 +1 -1
- package/dist/cjs/swirl-action-list_2.cjs.entry.js +4 -1
- package/dist/cjs/swirl-chip.cjs.entry.js +2 -2
- package/dist/cjs/swirl-icon-check-small_3.cjs.entry.js +3 -4
- package/dist/cjs/swirl-option-list_2.cjs.entry.js +3 -3
- package/dist/cjs/swirl-select.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-action-list/swirl-action-list.js +4 -1
- package/dist/collection/components/swirl-chip/swirl-chip.js +2 -2
- package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js +3 -4
- package/dist/collection/components/swirl-select/swirl-select.js +2 -2
- package/dist/collection/components/swirl-tag/swirl-tag.js +3 -3
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-action-list2.js +4 -1
- package/dist/components/swirl-chip.js +2 -2
- package/dist/components/swirl-option-list-item2.js +3 -4
- package/dist/components/swirl-select.js +1 -1
- package/dist/components/swirl-tag2.js +3 -3
- package/dist/esm/swirl-action-list_2.entry.js +4 -1
- package/dist/esm/swirl-chip.entry.js +2 -2
- package/dist/esm/swirl-icon-check-small_3.entry.js +3 -4
- package/dist/esm/swirl-option-list_2.entry.js +3 -3
- package/dist/esm/swirl-select.entry.js +1 -1
- package/dist/swirl-components/{p-a9f37259.entry.js → p-04a82850.entry.js} +1 -1
- package/dist/swirl-components/p-0d45bf52.entry.js +1 -0
- package/dist/swirl-components/p-3b4afa37.entry.js +1 -0
- package/dist/swirl-components/p-53f6eb03.entry.js +1 -0
- package/dist/swirl-components/p-8bea74bf.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-chip/swirl-chip.d.ts +1 -1
- package/dist/types/components/swirl-tag/swirl-tag.d.ts +1 -1
- package/package.json +1 -1
- package/dist/swirl-components/p-5e6cc2ae.entry.js +0 -1
- package/dist/swirl-components/p-9ae8c575.entry.js +0 -1
- package/dist/swirl-components/p-ab94883c.entry.js +0 -1
- package/dist/swirl-components/p-b1fef690.entry.js +0 -1
package/components.json
CHANGED
|
@@ -84,6 +84,9 @@ const SwirlActionList = class {
|
|
|
84
84
|
item === activeElement?.querySelector('[role="menuitem"]'));
|
|
85
85
|
}
|
|
86
86
|
setSectionSeparator() {
|
|
87
|
+
if (!this.el) {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
87
90
|
const sections = Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((el) => el.isConnected);
|
|
88
91
|
sections.forEach((section, index) => {
|
|
89
92
|
// First section should not have a separator if there are no items above
|
|
@@ -94,7 +97,7 @@ const SwirlActionList = class {
|
|
|
94
97
|
});
|
|
95
98
|
}
|
|
96
99
|
render() {
|
|
97
|
-
return (index.h(index.Host, { key: '
|
|
100
|
+
return (index.h(index.Host, { key: 'bf72e9f0dae22b0accd9f9a41e78f4c39c562471' }, index.h("div", { key: '07952241b1a0bc5eea5da1177e7e8e20dae0c187', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, index.h("slot", { key: '3ccd51eeb3c384bb5147ce09a63013c2f797c822', onSlotchange: this.setSectionSeparator }))));
|
|
98
101
|
}
|
|
99
102
|
get el() { return index.getElement(this); }
|
|
100
103
|
};
|
|
@@ -13,7 +13,7 @@ const SwirlChip = class {
|
|
|
13
13
|
constructor(hostRef) {
|
|
14
14
|
index.registerInstance(this, hostRef);
|
|
15
15
|
this.chipClick = index.createEvent(this, "chipClick", 7);
|
|
16
|
-
this.
|
|
16
|
+
this.removeChip = index.createEvent(this, "remove", 7);
|
|
17
17
|
this.desktopMediaQuery = utils.getDesktopMediaQuery();
|
|
18
18
|
this.desktopMediaQueryHandler = (event) => {
|
|
19
19
|
this.forceIconProps(event.matches);
|
|
@@ -57,7 +57,7 @@ const SwirlChip = class {
|
|
|
57
57
|
"chip--interactive": this.interactive || this.pressed !== undefined,
|
|
58
58
|
"chip--removable": this.removable,
|
|
59
59
|
});
|
|
60
|
-
return (index.h(index.Host, { key: '
|
|
60
|
+
return (index.h(index.Host, { key: '9b1e52461918edbaac63ee90bf5a3e553f9d310e' }, index.h(Tag, { key: 'dcbc86988cd9e4227c8d567c84daa76b9ac739cd', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: '04997af02a853a3baa62a1f26bcc2a6d7f0d0e23', class: "chip__inner" }, showAvatar && (index.h("span", { key: 'd58d29238444cdd44a7a4d1fc8e1f1dcba15c6d7', class: "chip__avatar" }, index.h("slot", { key: '59705540be0270d9c03dc282d0b95323baddc4fc', name: "avatar" }))), showIcon && (index.h("span", { key: '8d568bc86288170c642834787f6f62d14385cfe1', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'b8242740bd0becbd22b2569a9dee60ac46146f46', class: "chip__label" }, this.label)), this.progress !== undefined && (index.h("span", { key: '8dab74c41f4521d82cdc1aa7abac3d0a12c76af9', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: '9ba51b553551ff5c0d2e163fc9c5b7106089bca7', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: '730613d93c56281943e0a036cc2afad9e967b1f0', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, index.h("swirl-icon-close", { key: '06051a334307deb3d0e0b4de1b4fa23a986c4a17', size: 20 })))));
|
|
61
61
|
}
|
|
62
62
|
get el() { return index.getElement(this); }
|
|
63
63
|
};
|
|
@@ -109,8 +109,7 @@ const SwirlOptionListItem = class {
|
|
|
109
109
|
const showCheckbox = this.context === "multi-select";
|
|
110
110
|
const showIcon = Boolean(this.icon) && this.context === "single-select";
|
|
111
111
|
const showIconBadge = Boolean(this.iconBadge);
|
|
112
|
-
const showAvatar = this.el.querySelector('[slot="avatar"]')
|
|
113
|
-
this.context === "single-select";
|
|
112
|
+
const showAvatar = this.el.querySelector('[slot="avatar"]');
|
|
114
113
|
const showSelectionIcon = this.selected && this.context === "single-select";
|
|
115
114
|
const className = index$1.classnames("option-list-item", `option-list-item--context-${this.context}`, {
|
|
116
115
|
"option-list-item--disabled": this.disabled,
|
|
@@ -119,9 +118,9 @@ const SwirlOptionListItem = class {
|
|
|
119
118
|
"option-list-item--selected": this.selected,
|
|
120
119
|
"option-list-item--show-avatar": showAvatar,
|
|
121
120
|
});
|
|
122
|
-
return (index.h(index.Host, { key: '
|
|
121
|
+
return (index.h(index.Host, { key: '06fae754220c60ec8feb330ae9e19be3a96c3da9' }, index.h("div", { key: '94a1392df812afcf19464076065566cfa9943ed3', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
|
|
123
122
|
? `option-list-item-${this.elementId}-description`
|
|
124
|
-
: undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (index.h("span", { key: '
|
|
123
|
+
: undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (index.h("span", { key: '5167994aa24f94c99af817c07a60f323ae66c8e9', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '4911908a511d3209d19208166228c6c9b17c6450', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (index.h("span", { key: 'ee1de89f8ba6dbe700ff6b7381295fded44565df', class: "option-list-item__checkbox" }, index.h("span", { key: 'fe45438b041e7abdebca58ec332abeb1784ead69', class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { key: '0ddd85b44e0218f08faa0e6edeebadae61226ad6', class: "option-list-item__checkbox-icon", size: 16 }))))), index.h("span", { key: 'a3cad10caab6eb4522dbd4bfb4c379983c5e815a', class: "option-list-item__avatar" }, index.h("slot", { key: 'c55c73eb7e8ee25e45517d342c810e6c7519fd71', name: "avatar" })), index.h("span", { key: '7b3a5ed2f26156c6dae4166f4e4f7f59cfd80edd', class: "option-list-item__label-container" }, index.h("span", { key: '4642ac0e19b77866b1f3eed324b9494a86269432', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (index.h("span", { key: '7e974ed7f68139b69e247e95746abc89720eea18', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (index.h("span", { key: '18b9511c8be4ae95abaa54f1579a6301546233d0', class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { key: '19035ea288a4c6d69c66a060ee2876ca421d72ca', size: this.iconSize })))), this.allowDrag && (index.h("button", { key: '22da8d9781d3fa9a58630e2215aad8d93125b1f2', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, index.h("swirl-icon-drag-handle", { key: '2ce19558908d4fcde2eb64835d973c2fa3b6bc70', size: this.iconSize })))));
|
|
125
124
|
}
|
|
126
125
|
get el() { return index.getElement(this); }
|
|
127
126
|
};
|
|
@@ -367,9 +367,9 @@ const SwirlTagStyle0 = swirlTagCss;
|
|
|
367
367
|
const SwirlTag = class {
|
|
368
368
|
constructor(hostRef) {
|
|
369
369
|
index.registerInstance(this, hostRef);
|
|
370
|
-
this.
|
|
370
|
+
this.removeTag = index.createEvent(this, "remove", 7);
|
|
371
371
|
this.onRemove = (event) => {
|
|
372
|
-
this.
|
|
372
|
+
this.removeTag?.emit(event);
|
|
373
373
|
};
|
|
374
374
|
this.icon = undefined;
|
|
375
375
|
this.iconPosition = "start";
|
|
@@ -402,7 +402,7 @@ const SwirlTag = class {
|
|
|
402
402
|
}
|
|
403
403
|
render() {
|
|
404
404
|
const className = index$1.classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
|
|
405
|
-
return (index.h(index.Host, { key: '
|
|
405
|
+
return (index.h(index.Host, { key: 'e4b87239e8182dfec9083991f110143dd546b8d2' }, index.h("span", { key: 'f7249adea2f633a252cf0b261f9943cbe506ecc9', class: className, part: "tag" }, this.icon && (index.h("span", { key: '4588be9d20d846be387d1abb975ce98506d5db19', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '9d24ba7bee531a4d741678105e79b2087299be8f', class: "tag__label" }, this.label), this.removable && (index.h("button", { key: 'd92c9df4fdbb1f359c26fbdad005f7a6fa5d2c72', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { key: 'e4e8df37568d44dbc02f54892ece51264d76932c', size: 16 }))))));
|
|
406
406
|
}
|
|
407
407
|
get el() { return index.getElement(this); }
|
|
408
408
|
};
|
|
@@ -141,7 +141,7 @@ const SwirlSelect = class {
|
|
|
141
141
|
?.map((value) => this.options.find((option) => option.value === value))
|
|
142
142
|
?.map((option) => (index.h("swirl-tag", { "aria-hidden": "true", label: option?.label,
|
|
143
143
|
// eslint-disable-next-line react/jsx-no-bind
|
|
144
|
-
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), index.h("span", { key: '
|
|
144
|
+
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), index.h("span", { key: '5ffd92e9a03ee20e5034677d59ee065cc1f50704', 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: '86f879f74ed633cee2b8be3cc9e81a6ae2c4e749', 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: '8b508579c40c0852de62729e9bf3f70d86729400', class: "select__search" }, index.h("swirl-icon-search", { key: '9cd0230b3d9f67900ecb00744edba71745f726a9', class: "select__search-icon", size: 20 }), index.h("input", { key: '75596a8abd934cccf7a6095d7c76676bb093d67b', "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: '4a929151f646c0745682d12ce843fc0e898477f9', class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { key: 'af37d248d7a166860eeef2e13ef87dbb004f97f1', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { key: '570a8be673e85701f7c25e5ea30e72c52de979e4', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { key: 'ac0aa28b63292baa3a219c062be904087ccdbcda', color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { key: '9e5b26e211b70e6aacead627096d2a9ffbff81d7', onSlotchange: this.onSlotChange }))))));
|
|
145
145
|
}
|
|
146
146
|
get el() { return index.getElement(this); }
|
|
147
147
|
};
|
|
@@ -77,6 +77,9 @@ export class SwirlActionList {
|
|
|
77
77
|
item === activeElement?.querySelector('[role="menuitem"]'));
|
|
78
78
|
}
|
|
79
79
|
setSectionSeparator() {
|
|
80
|
+
if (!this.el) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
80
83
|
const sections = Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((el) => el.isConnected);
|
|
81
84
|
sections.forEach((section, index) => {
|
|
82
85
|
// First section should not have a separator if there are no items above
|
|
@@ -87,7 +90,7 @@ export class SwirlActionList {
|
|
|
87
90
|
});
|
|
88
91
|
}
|
|
89
92
|
render() {
|
|
90
|
-
return (h(Host, { key: '
|
|
93
|
+
return (h(Host, { key: 'bf72e9f0dae22b0accd9f9a41e78f4c39c562471' }, h("div", { key: '07952241b1a0bc5eea5da1177e7e8e20dae0c187', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '3ccd51eeb3c384bb5147ce09a63013c2f797c822', onSlotchange: this.setSectionSeparator }))));
|
|
91
94
|
}
|
|
92
95
|
static get is() { return "swirl-action-list"; }
|
|
93
96
|
static get encapsulation() { return "shadow"; }
|
|
@@ -49,7 +49,7 @@ export class SwirlChip {
|
|
|
49
49
|
"chip--interactive": this.interactive || this.pressed !== undefined,
|
|
50
50
|
"chip--removable": this.removable,
|
|
51
51
|
});
|
|
52
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: '9b1e52461918edbaac63ee90bf5a3e553f9d310e' }, h(Tag, { key: 'dcbc86988cd9e4227c8d567c84daa76b9ac739cd', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '04997af02a853a3baa62a1f26bcc2a6d7f0d0e23', class: "chip__inner" }, showAvatar && (h("span", { key: 'd58d29238444cdd44a7a4d1fc8e1f1dcba15c6d7', class: "chip__avatar" }, h("slot", { key: '59705540be0270d9c03dc282d0b95323baddc4fc', name: "avatar" }))), showIcon && (h("span", { key: '8d568bc86288170c642834787f6f62d14385cfe1', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'b8242740bd0becbd22b2569a9dee60ac46146f46', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '8dab74c41f4521d82cdc1aa7abac3d0a12c76af9', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '9ba51b553551ff5c0d2e163fc9c5b7106089bca7', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '730613d93c56281943e0a036cc2afad9e967b1f0', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: '06051a334307deb3d0e0b4de1b4fa23a986c4a17', size: 20 })))));
|
|
53
53
|
}
|
|
54
54
|
static get is() { return "swirl-chip"; }
|
|
55
55
|
static get encapsulation() { return "scoped"; }
|
|
@@ -348,7 +348,7 @@ export class SwirlChip {
|
|
|
348
348
|
}
|
|
349
349
|
}
|
|
350
350
|
}, {
|
|
351
|
-
"method": "
|
|
351
|
+
"method": "removeChip",
|
|
352
352
|
"name": "remove",
|
|
353
353
|
"bubbles": true,
|
|
354
354
|
"cancelable": true,
|
|
@@ -62,8 +62,7 @@ export class SwirlOptionListItem {
|
|
|
62
62
|
const showCheckbox = this.context === "multi-select";
|
|
63
63
|
const showIcon = Boolean(this.icon) && this.context === "single-select";
|
|
64
64
|
const showIconBadge = Boolean(this.iconBadge);
|
|
65
|
-
const showAvatar = this.el.querySelector('[slot="avatar"]')
|
|
66
|
-
this.context === "single-select";
|
|
65
|
+
const showAvatar = this.el.querySelector('[slot="avatar"]');
|
|
67
66
|
const showSelectionIcon = this.selected && this.context === "single-select";
|
|
68
67
|
const className = classnames("option-list-item", `option-list-item--context-${this.context}`, {
|
|
69
68
|
"option-list-item--disabled": this.disabled,
|
|
@@ -72,9 +71,9 @@ export class SwirlOptionListItem {
|
|
|
72
71
|
"option-list-item--selected": this.selected,
|
|
73
72
|
"option-list-item--show-avatar": showAvatar,
|
|
74
73
|
});
|
|
75
|
-
return (h(Host, { key: '
|
|
74
|
+
return (h(Host, { key: '06fae754220c60ec8feb330ae9e19be3a96c3da9' }, h("div", { key: '94a1392df812afcf19464076065566cfa9943ed3', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
|
|
76
75
|
? `option-list-item-${this.elementId}-description`
|
|
77
|
-
: undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '
|
|
76
|
+
: undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '5167994aa24f94c99af817c07a60f323ae66c8e9', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '4911908a511d3209d19208166228c6c9b17c6450', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: 'ee1de89f8ba6dbe700ff6b7381295fded44565df', class: "option-list-item__checkbox" }, h("span", { key: 'fe45438b041e7abdebca58ec332abeb1784ead69', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '0ddd85b44e0218f08faa0e6edeebadae61226ad6', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'a3cad10caab6eb4522dbd4bfb4c379983c5e815a', class: "option-list-item__avatar" }, h("slot", { key: 'c55c73eb7e8ee25e45517d342c810e6c7519fd71', name: "avatar" })), h("span", { key: '7b3a5ed2f26156c6dae4166f4e4f7f59cfd80edd', class: "option-list-item__label-container" }, h("span", { key: '4642ac0e19b77866b1f3eed324b9494a86269432', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '7e974ed7f68139b69e247e95746abc89720eea18', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '18b9511c8be4ae95abaa54f1579a6301546233d0', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '19035ea288a4c6d69c66a060ee2876ca421d72ca', size: this.iconSize })))), this.allowDrag && (h("button", { key: '22da8d9781d3fa9a58630e2215aad8d93125b1f2', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: '2ce19558908d4fcde2eb64835d973c2fa3b6bc70', size: this.iconSize })))));
|
|
78
77
|
}
|
|
79
78
|
static get is() { return "swirl-option-list-item"; }
|
|
80
79
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import { querySelectorAllDeep } from "../../utils";
|
|
4
4
|
export class SwirlSelect {
|
|
@@ -130,7 +130,7 @@ export class SwirlSelect {
|
|
|
130
130
|
?.map((value) => this.options.find((option) => option.value === value))
|
|
131
131
|
?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
|
|
132
132
|
// eslint-disable-next-line react/jsx-no-bind
|
|
133
|
-
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: '
|
|
133
|
+
onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect && !option?.disabled })))), h("span", { key: '5ffd92e9a03ee20e5034677d59ee065cc1f50704', 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: '86f879f74ed633cee2b8be3cc9e81a6ae2c4e749', 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: '8b508579c40c0852de62729e9bf3f70d86729400', class: "select__search" }, h("swirl-icon-search", { key: '9cd0230b3d9f67900ecb00744edba71745f726a9', class: "select__search-icon", size: 20 }), h("input", { key: '75596a8abd934cccf7a6095d7c76676bb093d67b', "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: '4a929151f646c0745682d12ce843fc0e898477f9', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'af37d248d7a166860eeef2e13ef87dbb004f97f1', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '570a8be673e85701f7c25e5ea30e72c52de979e4', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: 'ac0aa28b63292baa3a219c062be904087ccdbcda', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '9e5b26e211b70e6aacead627096d2a9ffbff81d7', onSlotchange: this.onSlotChange }))))));
|
|
134
134
|
}
|
|
135
135
|
static get is() { return "swirl-select"; }
|
|
136
136
|
static get encapsulation() { return "scoped"; }
|
|
@@ -3,7 +3,7 @@ import classnames from "classnames";
|
|
|
3
3
|
export class SwirlTag {
|
|
4
4
|
constructor() {
|
|
5
5
|
this.onRemove = (event) => {
|
|
6
|
-
this.
|
|
6
|
+
this.removeTag?.emit(event);
|
|
7
7
|
};
|
|
8
8
|
this.icon = undefined;
|
|
9
9
|
this.iconPosition = "start";
|
|
@@ -36,7 +36,7 @@ export class SwirlTag {
|
|
|
36
36
|
}
|
|
37
37
|
render() {
|
|
38
38
|
const className = classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
|
|
39
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: 'e4b87239e8182dfec9083991f110143dd546b8d2' }, h("span", { key: 'f7249adea2f633a252cf0b261f9943cbe506ecc9', class: className, part: "tag" }, this.icon && (h("span", { key: '4588be9d20d846be387d1abb975ce98506d5db19', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '9d24ba7bee531a4d741678105e79b2087299be8f', class: "tag__label" }, this.label), this.removable && (h("button", { key: 'd92c9df4fdbb1f359c26fbdad005f7a6fa5d2c72', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: 'e4e8df37568d44dbc02f54892ece51264d76932c', size: 16 }))))));
|
|
40
40
|
}
|
|
41
41
|
static get is() { return "swirl-tag"; }
|
|
42
42
|
static get encapsulation() { return "shadow"; }
|
|
@@ -238,7 +238,7 @@ export class SwirlTag {
|
|
|
238
238
|
}
|
|
239
239
|
static get events() {
|
|
240
240
|
return [{
|
|
241
|
-
"method": "
|
|
241
|
+
"method": "removeTag",
|
|
242
242
|
"name": "remove",
|
|
243
243
|
"bubbles": true,
|
|
244
244
|
"cancelable": true,
|