@getflip/swirl-components 0.342.0 → 0.343.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 +170 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +40 -32
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-resource-list-file-item.cjs.entry.js +4 -1
- package/dist/cjs/swirl-resource-list-section.cjs.entry.js +4 -1
- package/dist/cjs/swirl-stack.cjs.entry.js +1 -1
- package/dist/cjs/swirl-tree-view-item.cjs.entry.js +23 -6
- package/dist/cjs/swirl-tree-view.cjs.entry.js +11 -1
- package/dist/collection/components/swirl-empty-state/swirl-empty-state.js +30 -1
- package/dist/collection/components/swirl-resource-list/swirl-resource-list.js +61 -30
- package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js +5 -2
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +3 -1
- package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js +4 -1
- package/dist/collection/components/swirl-stack/swirl-stack.js +20 -1
- package/dist/collection/components/swirl-tree-view/swirl-tree-view.js +37 -1
- package/dist/collection/components/swirl-tree-view-item/swirl-tree-view-item.js +23 -6
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +4 -1
- package/dist/components/swirl-empty-state2.js +3 -1
- package/dist/components/swirl-resource-list-file-item.js +4 -1
- package/dist/components/swirl-resource-list-item2.js +3 -1
- package/dist/components/swirl-resource-list-section.js +4 -1
- package/dist/components/swirl-resource-list2.js +36 -30
- package/dist/components/swirl-stack2.js +2 -1
- package/dist/components/swirl-tree-view-item.js +23 -6
- package/dist/components/swirl-tree-view.js +12 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-app-layout_5.entry.js +40 -32
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-resource-list-file-item.entry.js +5 -2
- package/dist/esm/swirl-resource-list-section.entry.js +5 -2
- package/dist/esm/swirl-stack.entry.js +1 -1
- package/dist/esm/swirl-tree-view-item.entry.js +23 -6
- package/dist/esm/swirl-tree-view.entry.js +11 -1
- package/dist/swirl-components/p-0218a909.entry.js +1 -0
- package/dist/swirl-components/p-0a915f63.entry.js +1 -0
- package/dist/swirl-components/p-7a68df08.entry.js +1 -0
- package/dist/swirl-components/p-be976991.entry.js +1 -0
- package/dist/swirl-components/p-d8b7dbfc.entry.js +1 -0
- package/dist/swirl-components/{p-a97c0936.entry.js → p-f20e52ea.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-empty-state/swirl-empty-state.d.ts +2 -0
- package/dist/types/components/swirl-resource-list/swirl-resource-list.d.ts +2 -0
- package/dist/types/components/swirl-resource-list-file-item/swirl-resource-list-file-item.d.ts +1 -0
- package/dist/types/components/swirl-resource-list-section/swirl-resource-list-section.d.ts +1 -0
- package/dist/types/components/swirl-stack/swirl-stack.d.ts +1 -0
- package/dist/types/components/swirl-tree-view/swirl-tree-view.d.ts +2 -0
- package/dist/types/components/swirl-tree-view-item/swirl-tree-view-item.d.ts +1 -0
- package/dist/types/components.d.ts +30 -4
- package/package.json +1 -1
- package/vscode-data.json +32 -0
- package/dist/swirl-components/p-4b88a8a7.entry.js +0 -1
- package/dist/swirl-components/p-8444fd5f.entry.js +0 -1
- package/dist/swirl-components/p-c72a11ba.entry.js +0 -1
- package/dist/swirl-components/p-f2c6b764.entry.js +0 -1
- package/dist/swirl-components/p-fc26150d.entry.js +0 -1
|
@@ -11,6 +11,7 @@ const SwirlEmptyState = /*@__PURE__*/ proxyCustomElement(class SwirlEmptyState e
|
|
|
11
11
|
super();
|
|
12
12
|
this.__registerHost();
|
|
13
13
|
this.__attachShadow();
|
|
14
|
+
this.headingLevel = 4;
|
|
14
15
|
}
|
|
15
16
|
render() {
|
|
16
17
|
const hasControls = Boolean(this.el.querySelector('[slot="controls"]'));
|
|
@@ -19,12 +20,13 @@ const SwirlEmptyState = /*@__PURE__*/ proxyCustomElement(class SwirlEmptyState e
|
|
|
19
20
|
"empty-state--has-controls": hasControls,
|
|
20
21
|
"empty-state--has-slotted-illustration": hasSlottedIllustration,
|
|
21
22
|
});
|
|
22
|
-
return (h(Host, { key: '
|
|
23
|
+
return (h(Host, { key: '00e52df34a36117df2781215682467b0a14c1693' }, h("div", { key: 'eac591aed9d90e013818fc07c13279cc593cd825', class: className }, this.illustration && !hasSlottedIllustration && (h("img", { key: '6ed1d924856bae08bae3616a88cc69c1e2985362', alt: "", class: "empty-state__illustration", src: this.illustration })), h("div", { key: '32c75b2e4fd6676b439de4d94745b4b8a784916d', class: "empty-state__slotted-illustration" }, h("slot", { key: 'f9b9a14cfc6835f540458d4435492f7bcec0b2ab', name: "illustration" })), h("div", { key: '1934f9f3972ba81882d54718e9a1498d485f769f', class: "empty-state__body" }, h("swirl-stack", { key: 'cf91a0b0074857b7eae3e9f7610020e1135c5474', align: "stretch", spacing: "8" }, this.heading && (h("swirl-heading", { key: '8f2a7343a711859ec35e086478607b82316144c4', align: "center", as: `h${this.headingLevel}`, level: 4, text: this.heading })), h("div", { key: '2c9810a1f2506a0bda4e97db0085b4db7d67d5b6', class: "empty-state__content" }, h("swirl-text", { key: '891d182d7e839790681b0085b1e25c5ff6cd49e7', align: "center", color: "subdued" }, h("slot", { key: 'bfdbbb87d057f54f37bc259612150d60561d4300' })))), h("div", { key: '4f547fa5a2e713cf680fe13fcec43af77ad985f4', class: "empty-state__controls" }, h("slot", { key: 'b418c9ca3d09781afcca58a8b2f0716433be3a26', name: "controls" }))))));
|
|
23
24
|
}
|
|
24
25
|
get el() { return this; }
|
|
25
26
|
static get style() { return swirlEmptyStateCss; }
|
|
26
27
|
}, [1, "swirl-empty-state", {
|
|
27
28
|
"heading": [1],
|
|
29
|
+
"headingLevel": [2, "heading-level"],
|
|
28
30
|
"illustration": [1]
|
|
29
31
|
}]);
|
|
30
32
|
function defineCustomElement() {
|
|
@@ -38,11 +38,14 @@ const SwirlResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class Swirl
|
|
|
38
38
|
const showDescription = !showError && Boolean(this.description);
|
|
39
39
|
const showSpinner = !showError && this.loading;
|
|
40
40
|
const showRemoveButton = this.removable && !showSpinner;
|
|
41
|
+
const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
|
|
42
|
+
const containerRole = hostRole === "row" ? "gridcell" : undefined;
|
|
41
43
|
const className = classNames("resource-list-file-item", {
|
|
42
44
|
"resource-list-file-item--has-control": showSpinner || showRemoveButton,
|
|
43
45
|
});
|
|
44
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: 'e2ff93b8e9698c59646fb70a7bf7ec6c9e677e34', role: hostRole }, h("div", { key: '3aba84c116b03284540c2d5d37c88c4d82cc639b', class: className, part: "resource-list-file-item", role: containerRole }, h("span", { key: '1cec8dbd0040268f40c5cdc5125562dd843fe9b1', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'c506356a5e0d481cd9b929d7c834420a807b201b', class: "resource-list-file-item__label-container" }, h("span", { key: '2da1188edcf7d475282f6f42400b17ad2a235de0', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'ac2f3191cc1bbedb6ea9d28d226bcc5d09b3e10e', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '8fbf817f446a7c9a2c8b33ad018ea7c83651b08b', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '38bb4cd2eaa2540d90700edb8f227ef60bbf97ad', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'd515f6e941bd05120235c573e7876dc3bb971179', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '085056f884effa5f6799d62dc016ee4478ca7723', size: "s" }))), showRemoveButton && (h("span", { key: '990e0157642026ee96bf2df65bd0593d8ce5f3f6', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '749963c8ba905bad98e4d196da6dba8dda8f7120', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
|
|
45
47
|
}
|
|
48
|
+
get el() { return this; }
|
|
46
49
|
static get style() { return swirlResourceListFileItemCss; }
|
|
47
50
|
}, [2, "swirl-resource-list-file-item", {
|
|
48
51
|
"description": [1],
|
|
@@ -120,6 +120,8 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
|
|
|
120
120
|
: this.label;
|
|
121
121
|
const ariaChecked = this.selectable ? String(this.checked) : undefined;
|
|
122
122
|
const role = this.interactive && this.selectable ? "checkbox" : undefined;
|
|
123
|
+
const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
|
|
124
|
+
const containerRole = hostRole === "row" ? "gridcell" : undefined;
|
|
123
125
|
const labelContainerStyles = {
|
|
124
126
|
paddingRight: !showMeta && Boolean(this.controlContainer)
|
|
125
127
|
? `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`
|
|
@@ -142,7 +144,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
|
|
|
142
144
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
143
145
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
144
146
|
});
|
|
145
|
-
return (h(Host, { key: '
|
|
147
|
+
return (h(Host, { key: '43910581e423c8294ab457c2a57f64237b54cdd6', role: hostRole }, h("div", { key: 'ab0b2780717232150f32e87e2318c76e90b8f5c5', class: className, role: containerRole }, h(Tag, { key: 'b0395a0c6e1ddfb373ef7c3129c93c618774aaf4', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'f619c5e071cbb9df143f4087c9a0e9e7f2f7c36d', class: "resource-list-item__media" }, h("slot", { key: 'ffe57fbf43568adcdcf96c04fbff860f5f2b8dac', name: "media" }))), h("span", { key: '4394d66aa315b48ce82c3df81f0cfaf7bc74ccb1', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '2f0fb5875316ad19340522b7bf483d959f39d01c', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'b1769ae51201b0cdf1c89027079d9615141cf44a', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '570ed201f5aaf20d68ae87efefd967d68af2a778', class: "resource-list-item__meta" }, h("span", { key: '53d1b22a6458e660a0d609229d23abeab3deffa5', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'af5e115892c913a9cf670c9545877807891eb8fe', class: "resource-list-item__badges" }, h("slot", { key: 'fa3a843bdbb23e7e0875855fa0a63ea8d9b93d13', name: "badges" }))))), this.selectable && (h("span", { key: '05164b24c5e4e82e78a3c679599483baced77f69', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '0dcca5e98ed85bb5686d10e8b4fa6bb736b52df5', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '47d03574a7392fe30e640781b57bd7fcd2d3c3d8' }))))), h("span", { key: '566e7ec233e0bc60c2d2c1a79d81a445e5fac8c3', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '240f3fb8d911922f151cfb32f0a1f4d6da4099d6', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '44adea3818f9cdec7feb46305b9d120ba648999b', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '070a1bd983131334c3041b5b93ee524bab87dff8', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '1f0fb8b9273e7ffdc854f09e98dfe189e0310f51', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '39b750e0c4794233b1295b1aa729522199f61d1d', size: this.iconSize })))));
|
|
146
148
|
}
|
|
147
149
|
get el() { return this; }
|
|
148
150
|
static get style() { return swirlResourceListItemCss; }
|
|
@@ -14,8 +14,11 @@ const SwirlResourceListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlR
|
|
|
14
14
|
this.hasSeparator = false;
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
|
|
17
|
+
const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
|
|
18
|
+
const childrenListRole = role === "listitem" ? "list" : undefined;
|
|
19
|
+
return (h(Host, { key: '15b79ab20202e3dbb997a1f3d7bd54b0cb0d85fc' }, this.hasSeparator && (h("swirl-separator", { key: 'fba6307d69cce0f888cd2be35eabb5c4e3e0468e', spacing: this.separatorSpacing })), h("div", { key: 'ca09d549a371ac0ce67ea1232c492a4435fa8df4', "aria-labelledby": "label", role: role }, h("span", { key: '34c025c8b1703a252b498b0d8a2234bdaa640e42', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: '71efc08c6d84f3c36dbc7e650570d2d28d038e6c', spacing: this.spacing, swirlAriaRole: childrenListRole }, h("slot", { key: 'f537afc6ab3f73aed3c1f43a23da7c2cef242026' })))));
|
|
18
20
|
}
|
|
21
|
+
get el() { return this; }
|
|
19
22
|
static get style() { return swirlResourceListSectionCss; }
|
|
20
23
|
}, [1, "swirl-resource-list-section", {
|
|
21
24
|
"label": [1],
|
|
@@ -15,6 +15,7 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
|
|
|
15
15
|
this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
|
|
16
16
|
this.assistiveTextItemMoving = "Current position:";
|
|
17
17
|
this.assistiveTextItemMoved = "Item moved. New position:";
|
|
18
|
+
this.semantics = "grid";
|
|
18
19
|
this.spacing = "0";
|
|
19
20
|
this.listId = v4();
|
|
20
21
|
this.focusedIndex = 0;
|
|
@@ -44,35 +45,19 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
|
|
|
44
45
|
this.draggingStartIndex = undefined;
|
|
45
46
|
};
|
|
46
47
|
this.onKeyDown = (event) => {
|
|
47
|
-
if (
|
|
48
|
-
event.
|
|
49
|
-
|
|
48
|
+
if (this.semantics === "grid" && !Boolean(this.dragging)) {
|
|
49
|
+
if (event.code === "ArrowDown") {
|
|
50
|
+
event.preventDefault();
|
|
50
51
|
this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
|
|
51
52
|
}
|
|
52
|
-
else {
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
else if (event.code === "ArrowUp") {
|
|
57
|
-
event.preventDefault();
|
|
58
|
-
if (!Boolean(this.dragging)) {
|
|
53
|
+
else if (event.code === "ArrowUp") {
|
|
54
|
+
event.preventDefault();
|
|
59
55
|
const prevIndex = this.focusedIndex === 0
|
|
60
56
|
? this.items.length - 1
|
|
61
57
|
: this.focusedIndex - 1;
|
|
62
58
|
this.focusItemAtIndex(prevIndex);
|
|
63
59
|
}
|
|
64
|
-
else {
|
|
65
|
-
this.moveDraggedItemUp();
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
else if (event.code === "Space" || event.code === "Enter") {
|
|
69
|
-
const target = event.composedPath()[0];
|
|
70
|
-
if (Boolean(this.dragging) &&
|
|
71
|
-
!target?.classList.contains("resource-list-item__drag-handle")) {
|
|
72
|
-
event.preventDefault();
|
|
73
|
-
this.stopDrag(this.dragging);
|
|
74
|
-
}
|
|
75
|
-
else if (Boolean(this.controllingElement) && event.code === "Enter") {
|
|
60
|
+
else if (event.code === "Enter" && Boolean(this.controllingElement)) {
|
|
76
61
|
const item = this.items[this.focusedIndex];
|
|
77
62
|
if (!Boolean(item) || !item.isConnected) {
|
|
78
63
|
return;
|
|
@@ -81,14 +66,31 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
|
|
|
81
66
|
event.preventDefault();
|
|
82
67
|
item.click();
|
|
83
68
|
}
|
|
69
|
+
else if (event.code === "Home") {
|
|
70
|
+
event.preventDefault();
|
|
71
|
+
this.focusItemAtIndex(0);
|
|
72
|
+
}
|
|
73
|
+
else if (event.code === "End") {
|
|
74
|
+
event.preventDefault();
|
|
75
|
+
this.focusItemAtIndex(this.items.length - 1);
|
|
76
|
+
}
|
|
84
77
|
}
|
|
85
|
-
|
|
86
|
-
event.
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
event.
|
|
91
|
-
|
|
78
|
+
if (Boolean(this.dragging)) {
|
|
79
|
+
if (event.code === "ArrowDown") {
|
|
80
|
+
event.preventDefault();
|
|
81
|
+
this.moveDraggedItemDown();
|
|
82
|
+
}
|
|
83
|
+
else if (event.code === "ArrowUp") {
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
this.moveDraggedItemUp();
|
|
86
|
+
}
|
|
87
|
+
else if (event.code === "Space" || event.code === "Enter") {
|
|
88
|
+
const target = event.composedPath()[0];
|
|
89
|
+
if (!target?.classList.contains("resource-list-item__drag-handle")) {
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
this.stopDrag(this.dragging);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
92
94
|
}
|
|
93
95
|
};
|
|
94
96
|
}
|
|
@@ -146,6 +148,9 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
|
|
|
146
148
|
return this.items.map((i) => i).findIndex((i) => i === item);
|
|
147
149
|
}
|
|
148
150
|
removeItemsFromTabOrder() {
|
|
151
|
+
if (this.semantics !== "grid") {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
149
154
|
this.items.forEach((item) => {
|
|
150
155
|
const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
|
|
151
156
|
const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
|
|
@@ -254,7 +259,7 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
|
|
|
254
259
|
});
|
|
255
260
|
}
|
|
256
261
|
render() {
|
|
257
|
-
return (h(Host, { key: '
|
|
262
|
+
return (h(Host, { key: 'c75f0ba1985a00ac6dbc67289a6b4810c37be961', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '90494b940f1e6c1293d60c04458822c99c0fb2ba', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'f33276012374609326842e3d638c21d0f556a0d9', paddingBlockEnd: this.paddingBlockEnd ?? this.padding, paddingBlockStart: this.paddingBlockStart ?? this.padding, paddingInlineEnd: this.paddingInlineEnd ?? this.padding ?? "8", paddingInlineStart: this.paddingInlineStart ?? this.padding ?? "8" }, h("swirl-stack", { key: '46a26973aaa57dff81309f36c62bdaf457f0c1e2', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: this.semantics, spacing: this.spacing }, h("slot", { key: '5270fb4d8807d1818369b3afde14ea0cb5ccf20b' })))));
|
|
258
263
|
}
|
|
259
264
|
get el() { return this; }
|
|
260
265
|
static get watchers() { return {
|
|
@@ -273,6 +278,7 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class SwirlResourceLi
|
|
|
273
278
|
"paddingBlockStart": [1, "padding-block-start"],
|
|
274
279
|
"paddingInlineEnd": [1, "padding-inline-end"],
|
|
275
280
|
"paddingInlineStart": [1, "padding-inline-start"],
|
|
281
|
+
"semantics": [1],
|
|
276
282
|
"spacing": [1],
|
|
277
283
|
"assistiveText": [32],
|
|
278
284
|
"listId": [32]
|
|
@@ -23,7 +23,7 @@ const SwirlStack = /*@__PURE__*/ proxyCustomElement(class SwirlStack extends HTM
|
|
|
23
23
|
height: this.height,
|
|
24
24
|
};
|
|
25
25
|
const className = classNames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
return (h(Host, { key: '9361133b37cb5c677dbf6dd49a39eec30c762e7a', style: { height: this.height } }, h(Tag, { key: '0fa5eaca5ac99e482f50793f170e6349e1854846', class: className, role: this.swirlAriaRole, style: styles }, h("slot", { key: '66e0cc4865421fbad50be48718d045a742fecedf' }))));
|
|
27
27
|
}
|
|
28
28
|
static get style() { return swirlStackCss; }
|
|
29
29
|
}, [1, "swirl-stack", {
|
|
@@ -35,6 +35,7 @@ const SwirlStack = /*@__PURE__*/ proxyCustomElement(class SwirlStack extends HTM
|
|
|
35
35
|
"columnSpacing": [1, "column-spacing"],
|
|
36
36
|
"rowSpacing": [1, "row-spacing"],
|
|
37
37
|
"spacing": [1],
|
|
38
|
+
"swirlAriaRole": [1, "swirl-aria-role"],
|
|
38
39
|
"wrap": [4]
|
|
39
40
|
}]);
|
|
40
41
|
function defineCustomElement() {
|
|
@@ -28,7 +28,7 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
|
|
|
28
28
|
this.movingViaKeyboard = false;
|
|
29
29
|
this.selected = false;
|
|
30
30
|
this.onFocus = () => {
|
|
31
|
-
if (!this.selected) {
|
|
31
|
+
if (!this.selected && this.getSemantics() === "tree") {
|
|
32
32
|
this.select();
|
|
33
33
|
}
|
|
34
34
|
};
|
|
@@ -74,20 +74,23 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
|
|
|
74
74
|
this.setUpDragDrop();
|
|
75
75
|
}
|
|
76
76
|
async expand() {
|
|
77
|
-
if (this.expanded || !this.expandable) {
|
|
77
|
+
if (this.expanded || !this.expandable || this.getSemantics() !== "tree") {
|
|
78
78
|
return;
|
|
79
79
|
}
|
|
80
80
|
this.expanded = true;
|
|
81
81
|
this.expandedChange.emit(this.expanded);
|
|
82
82
|
}
|
|
83
83
|
async collapse() {
|
|
84
|
-
if (!this.expanded || !this.expandable) {
|
|
84
|
+
if (!this.expanded || !this.expandable || this.getSemantics() !== "tree") {
|
|
85
85
|
return;
|
|
86
86
|
}
|
|
87
87
|
this.expanded = false;
|
|
88
88
|
this.expandedChange.emit(this.expanded);
|
|
89
89
|
}
|
|
90
90
|
async select(focus) {
|
|
91
|
+
if (this.getSemantics() !== "tree") {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
91
94
|
this.selected = true;
|
|
92
95
|
if (focus) {
|
|
93
96
|
this.link?.focus();
|
|
@@ -95,6 +98,9 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
|
|
|
95
98
|
this.itemSelected.emit(this.el);
|
|
96
99
|
}
|
|
97
100
|
async unselect() {
|
|
101
|
+
if (this.getSemantics() !== "tree") {
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
98
104
|
this.selected = false;
|
|
99
105
|
}
|
|
100
106
|
setUpDragDrop() {
|
|
@@ -314,11 +320,18 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
|
|
|
314
320
|
}
|
|
315
321
|
this.cannotKeyboardDropInCurrentPosition = false;
|
|
316
322
|
}
|
|
323
|
+
getSemantics() {
|
|
324
|
+
const hasTreeSemantics = this.el.closest('[role="tree"]');
|
|
325
|
+
return hasTreeSemantics ? "tree" : "list";
|
|
326
|
+
}
|
|
317
327
|
render() {
|
|
318
328
|
const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
|
|
319
329
|
const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
|
|
320
330
|
const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
|
|
321
331
|
const shouldShowChildrenDropZone = this.enableDragDrop && !hasChildren;
|
|
332
|
+
const semantics = this.getSemantics();
|
|
333
|
+
const expanded = this.expanded || semantics !== "tree";
|
|
334
|
+
const tabIndex = semantics === "tree" ? (this.selected ? 0 : -1) : undefined;
|
|
322
335
|
const className = classNames("tree-view-item", {
|
|
323
336
|
"tree-view-item--active": this.active,
|
|
324
337
|
"tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
|
|
@@ -326,13 +339,17 @@ const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView
|
|
|
326
339
|
"tree-view-item--disable-drag": this.disableDrag,
|
|
327
340
|
"tree-view-item--has-tags": hasTags,
|
|
328
341
|
});
|
|
329
|
-
return (h(Host, { key: '
|
|
342
|
+
return (h(Host, { key: '65881342c7a8332a6511e9607bbdd6ec087a9272', id: this.itemId, role: "none" }, h("li", { key: 'b10d8040f05ae9eaba034a811ad742608810c239', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '5935418c8673bbc8029d6bd2f3104149761c11a7', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
|
|
343
|
+
? undefined
|
|
344
|
+
: String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
|
|
345
|
+
? `${this.itemId}-children`
|
|
346
|
+
: undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: 'ad52424f81e920a71f98a79f797c55009a8581e7', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '5bc418c16e4a2b9eb86b22af7447490a23f0657b', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: 'fd1f419299f9b08f70eec8167fe3e11864025793', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'c68c8e65e923026abfbbfa86845ddedcc03fd431' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '895c9fa1a7cd5e48029c264e16294837780329b6' }, h("span", { key: '0c6493585abec28ddb004f8054ccbb7e306fe297', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '10603cdbaaeaeb87637885dd7c796e56f7039903', class: "tree-view-item__label" }, this.label), h("span", { key: 'a76b6724dcef1aee95280c4483dcd1226aaaa142', class: "tree-view-item__tags" }, h("slot", { key: 'b5f93fe196914382421f0307100d9c53f0d3f5ff', name: "tags" }))), h("ul", { key: '8bf0322fc3576a6255ce8cf14c4432dc96c093a0', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
|
|
330
347
|
? "tree-view-item__children--drop-zone"
|
|
331
348
|
: ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: "group", style: {
|
|
332
|
-
display: (!
|
|
349
|
+
display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
|
|
333
350
|
? "none"
|
|
334
351
|
: undefined,
|
|
335
|
-
} }, h("slot", { key: '
|
|
352
|
+
} }, h("slot", { key: '5c17ad91e8055f44e0f3e083d6abe970b773add6' })))));
|
|
336
353
|
}
|
|
337
354
|
get el() { return this; }
|
|
338
355
|
static get style() { return swirlTreeViewItemCss; }
|
|
@@ -20,6 +20,7 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
|
|
|
20
20
|
this.itemExpansionChanged = createEvent(this, "itemExpansionChanged", 7);
|
|
21
21
|
this.dragDropInstructions = defaultDragDropInstructions;
|
|
22
22
|
this.dragDropItemSelector = "swirl-tree-view-item";
|
|
23
|
+
this.semantics = "tree";
|
|
23
24
|
this.liveRegionText = "";
|
|
24
25
|
this.onSlotChange = () => {
|
|
25
26
|
this.init();
|
|
@@ -53,6 +54,9 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
|
|
|
53
54
|
this.setUpDragDrop();
|
|
54
55
|
}
|
|
55
56
|
async expandItems(itemIds) {
|
|
57
|
+
if (this.semantics !== "tree") {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
56
60
|
const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
|
|
57
61
|
items.forEach((item) => item.expand());
|
|
58
62
|
}
|
|
@@ -83,6 +87,9 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
|
|
|
83
87
|
}
|
|
84
88
|
}
|
|
85
89
|
onKeyDown(event) {
|
|
90
|
+
if (this.semantics !== "tree") {
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
86
93
|
if (event.key === "ArrowDown") {
|
|
87
94
|
event.preventDefault();
|
|
88
95
|
this.selectNextItem();
|
|
@@ -134,6 +141,9 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
|
|
|
134
141
|
this.updateLiveRegionText("moved", event.detail);
|
|
135
142
|
}
|
|
136
143
|
init() {
|
|
144
|
+
if (this.semantics !== "tree") {
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
137
147
|
const selectedItem = this.getSelectedItem();
|
|
138
148
|
const allItems = this.getItems();
|
|
139
149
|
allItems.forEach((item) => item.unselect());
|
|
@@ -322,7 +332,7 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
|
|
|
322
332
|
}
|
|
323
333
|
}
|
|
324
334
|
render() {
|
|
325
|
-
return (h(Host, { key: '
|
|
335
|
+
return (h(Host, { key: '7177dd9e2f74be230521a2f9a139ad1277d11556' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'd39aa04b285432925acd615b96cf33c6939d6902' }, h("span", { key: '2b6a48e97c71dd795d1fe2a4cd74a5330b3ede4e', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'fb057f182e27709fb30d8ee9c460984d3f962be1', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '164cb029c89c6124b6c3c91a951f8ceca4b3af04', onSlotchange: this.onSlotChange }))));
|
|
326
336
|
}
|
|
327
337
|
get el() { return this; }
|
|
328
338
|
static get watchers() { return {
|
|
@@ -336,6 +346,7 @@ const SwirlTreeView$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeView ext
|
|
|
336
346
|
"enableDragDrop": [4, "enable-drag-drop"],
|
|
337
347
|
"initiallyExpandedItemIds": [16, "initially-expanded-item-ids"],
|
|
338
348
|
"label": [1],
|
|
349
|
+
"semantics": [1],
|
|
339
350
|
"liveRegionText": [32],
|
|
340
351
|
"expandItems": [64]
|
|
341
352
|
}, [[0, "dropTreeViewItem", "onItemDrop"], [0, "keydown", "onKeyDown"], [0, "itemSelected", "onItemSelected"], [0, "expandedChange", "onExpandedChange"], [0, "endKeyboardMove", "onEndKeyboardMove"], [0, "startKeyboardMove", "onStartKeyboardMove"], [0, "keyboardMove", "onKeyboardMove"]], {
|