@getflip/swirl-components 0.342.1 → 0.343.1
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 +114 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +38 -31
- 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 +25 -7
- package/dist/cjs/swirl-tree-view.cjs.entry.js +11 -1
- package/dist/collection/components/swirl-resource-list/swirl-resource-list.js +61 -30
- package/dist/collection/components/swirl-resource-list/swirl-resource-list.stories.js +1 -0
- 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 +25 -7
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -4
- 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 +25 -7
- 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 +38 -31
- 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 +25 -7
- package/dist/esm/swirl-tree-view.entry.js +11 -1
- package/dist/swirl-components/p-0a915f63.entry.js +1 -0
- package/dist/swirl-components/p-714c3569.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-fd512b87.entry.js → p-f20e52ea.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- 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 +22 -4
- package/package.json +1 -1
- package/vscode-data.json +28 -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
|
@@ -35,11 +35,14 @@ const SwirlResourceListFileItem = class {
|
|
|
35
35
|
const showDescription = !showError && Boolean(this.description);
|
|
36
36
|
const showSpinner = !showError && this.loading;
|
|
37
37
|
const showRemoveButton = this.removable && !showSpinner;
|
|
38
|
+
const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
|
|
39
|
+
const containerRole = hostRole === "row" ? "gridcell" : undefined;
|
|
38
40
|
const className = index$1.classnames("resource-list-file-item", {
|
|
39
41
|
"resource-list-file-item--has-control": showSpinner || showRemoveButton,
|
|
40
42
|
});
|
|
41
|
-
return (index.h(index.Host, { key: '
|
|
43
|
+
return (index.h(index.Host, { key: 'e2ff93b8e9698c59646fb70a7bf7ec6c9e677e34', role: hostRole }, index.h("div", { key: '3aba84c116b03284540c2d5d37c88c4d82cc639b', class: className, part: "resource-list-file-item", role: containerRole }, index.h("span", { key: '1cec8dbd0040268f40c5cdc5125562dd843fe9b1', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), index.h("span", { key: 'c506356a5e0d481cd9b929d7c834420a807b201b', class: "resource-list-file-item__label-container" }, index.h("span", { key: '2da1188edcf7d475282f6f42400b17ad2a235de0', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (index.h("span", { key: 'ac2f3191cc1bbedb6ea9d28d226bcc5d09b3e10e', class: "resource-list-file-item__description" }, this.description)), showError && (index.h("span", { key: '8fbf817f446a7c9a2c8b33ad018ea7c83651b08b', "aria-live": "polite", class: "resource-list-file-item__error-message" }, index.h("swirl-inline-error", { key: '38bb4cd2eaa2540d90700edb8f227ef60bbf97ad', message: this.errorMessage, size: "s" })))), showSpinner && (index.h("span", { key: 'd515f6e941bd05120235c573e7876dc3bb971179', class: "resource-list-file-item__spinner" }, index.h("swirl-spinner", { key: '085056f884effa5f6799d62dc016ee4478ca7723', size: "s" }))), showRemoveButton && (index.h("span", { key: '990e0157642026ee96bf2df65bd0593d8ce5f3f6', class: "resource-list-file-item__remove-button" }, index.h("swirl-button", { key: '749963c8ba905bad98e4d196da6dba8dda8f7120', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
|
|
42
44
|
}
|
|
45
|
+
get el() { return index.getElement(this); }
|
|
43
46
|
};
|
|
44
47
|
SwirlResourceListFileItem.style = swirlResourceListFileItemCss;
|
|
45
48
|
|
|
@@ -12,8 +12,11 @@ const SwirlResourceListSection = class {
|
|
|
12
12
|
this.hasSeparator = false;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
|
|
15
|
+
const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
|
|
16
|
+
const childrenListRole = role === "listitem" ? "list" : undefined;
|
|
17
|
+
return (index.h(index.Host, { key: '15b79ab20202e3dbb997a1f3d7bd54b0cb0d85fc' }, this.hasSeparator && (index.h("swirl-separator", { key: 'fba6307d69cce0f888cd2be35eabb5c4e3e0468e', spacing: this.separatorSpacing })), index.h("div", { key: 'ca09d549a371ac0ce67ea1232c492a4435fa8df4', "aria-labelledby": "label", role: role }, index.h("span", { key: '34c025c8b1703a252b498b0d8a2234bdaa640e42', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), index.h("swirl-stack", { key: '71efc08c6d84f3c36dbc7e650570d2d28d038e6c', spacing: this.spacing, swirlAriaRole: childrenListRole }, index.h("slot", { key: 'f537afc6ab3f73aed3c1f43a23da7c2cef242026' })))));
|
|
16
18
|
}
|
|
19
|
+
get el() { return index.getElement(this); }
|
|
17
20
|
};
|
|
18
21
|
SwirlResourceListSection.style = swirlResourceListSectionCss;
|
|
19
22
|
|
|
@@ -23,7 +23,7 @@ const SwirlStack = class {
|
|
|
23
23
|
height: this.height,
|
|
24
24
|
};
|
|
25
25
|
const className = index$1.classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
|
|
26
|
-
return (index.h(index.Host, { key: '
|
|
26
|
+
return (index.h(index.Host, { key: '9361133b37cb5c677dbf6dd49a39eec30c762e7a', style: { height: this.height } }, index.h(Tag, { key: '0fa5eaca5ac99e482f50793f170e6349e1854846', class: className, role: this.swirlAriaRole, style: styles }, index.h("slot", { key: '66e0cc4865421fbad50be48718d045a742fecedf' }))));
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
SwirlStack.style = swirlStackCss;
|
|
@@ -25,7 +25,7 @@ const SwirlTreeViewItem = class {
|
|
|
25
25
|
this.movingViaKeyboard = false;
|
|
26
26
|
this.selected = false;
|
|
27
27
|
this.onFocus = () => {
|
|
28
|
-
if (!this.selected) {
|
|
28
|
+
if (!this.selected && this.getSemantics() === "tree") {
|
|
29
29
|
this.select();
|
|
30
30
|
}
|
|
31
31
|
};
|
|
@@ -71,20 +71,23 @@ const SwirlTreeViewItem = class {
|
|
|
71
71
|
this.setUpDragDrop();
|
|
72
72
|
}
|
|
73
73
|
async expand() {
|
|
74
|
-
if (this.expanded || !this.expandable) {
|
|
74
|
+
if (this.expanded || !this.expandable || this.getSemantics() !== "tree") {
|
|
75
75
|
return;
|
|
76
76
|
}
|
|
77
77
|
this.expanded = true;
|
|
78
78
|
this.expandedChange.emit(this.expanded);
|
|
79
79
|
}
|
|
80
80
|
async collapse() {
|
|
81
|
-
if (!this.expanded || !this.expandable) {
|
|
81
|
+
if (!this.expanded || !this.expandable || this.getSemantics() !== "tree") {
|
|
82
82
|
return;
|
|
83
83
|
}
|
|
84
84
|
this.expanded = false;
|
|
85
85
|
this.expandedChange.emit(this.expanded);
|
|
86
86
|
}
|
|
87
87
|
async select(focus) {
|
|
88
|
+
if (this.getSemantics() !== "tree") {
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
88
91
|
this.selected = true;
|
|
89
92
|
if (focus) {
|
|
90
93
|
this.link?.focus();
|
|
@@ -92,6 +95,9 @@ const SwirlTreeViewItem = class {
|
|
|
92
95
|
this.itemSelected.emit(this.el);
|
|
93
96
|
}
|
|
94
97
|
async unselect() {
|
|
98
|
+
if (this.getSemantics() !== "tree") {
|
|
99
|
+
return;
|
|
100
|
+
}
|
|
95
101
|
this.selected = false;
|
|
96
102
|
}
|
|
97
103
|
setUpDragDrop() {
|
|
@@ -311,11 +317,19 @@ const SwirlTreeViewItem = class {
|
|
|
311
317
|
}
|
|
312
318
|
this.cannotKeyboardDropInCurrentPosition = false;
|
|
313
319
|
}
|
|
320
|
+
getSemantics() {
|
|
321
|
+
const hasTreeSemantics = this.el.closest('[role="tree"]');
|
|
322
|
+
return hasTreeSemantics ? "tree" : "list";
|
|
323
|
+
}
|
|
314
324
|
render() {
|
|
315
325
|
const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
|
|
316
326
|
const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
|
|
317
327
|
const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
|
|
318
328
|
const shouldShowChildrenDropZone = this.enableDragDrop && !hasChildren;
|
|
329
|
+
const semantics = this.getSemantics();
|
|
330
|
+
const expanded = this.expanded || semantics !== "tree";
|
|
331
|
+
const tabIndex = semantics === "tree" ? (this.selected ? 0 : -1) : undefined;
|
|
332
|
+
const Tag = semantics === "tree" ? "li" : "div";
|
|
319
333
|
const className = index$1.classnames("tree-view-item", {
|
|
320
334
|
"tree-view-item--active": this.active,
|
|
321
335
|
"tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
|
|
@@ -323,13 +337,17 @@ const SwirlTreeViewItem = class {
|
|
|
323
337
|
"tree-view-item--disable-drag": this.disableDrag,
|
|
324
338
|
"tree-view-item--has-tags": hasTags,
|
|
325
339
|
});
|
|
326
|
-
return (index.h(index.Host, { key: '
|
|
340
|
+
return (index.h(index.Host, { key: 'b69e0f608416e28e933f600068bc9781b8a7e67a', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, index.h(Tag, { key: '59debc40e5914cf0861f77d839b8e1fb5048185f', class: className, role: semantics === "tree" ? "none" : undefined }, index.h("a", { key: '537cf90ebc08a8a1f852a2ebb44a7f6cd9487b9d', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
|
|
341
|
+
? undefined
|
|
342
|
+
: String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
|
|
343
|
+
? `${this.itemId}-children`
|
|
344
|
+
: 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 && (index.h("span", { key: '8964954fbe3bf1d76f002cad14103a6490e46e41', class: "tree-view-item__drag-handle" }, index.h("swirl-icon-drag-handle", { key: '543ea8186b5fff51002487f4d1efd2157f579de2', size: 20 }))), this.expandable && semantics === "tree" && (index.h("span", { key: '16ddb005d1a629694d074823171d84add485c60a', class: "tree-view-item__toggle-icon" }, hasChildren && (index.h(index.Fragment, { key: '736eb2a5bd66e82af18a65870f48d8f9bec05ea4' }, expanded ? (index.h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (index.h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (index.h(index.Fragment, { key: '1b9889c672bfed46bdfa65ff2d5cab61de2e37cf' }, index.h("span", { key: 'c2e6b715bc17b468b7656de8750db4ba06cd41db', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (index.h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), index.h("span", { key: '300e38e84a87b1f70408d5d710eb0b350a4b3e41', class: "tree-view-item__label" }, this.label), index.h("span", { key: 'ea9b1b1e29f7a770d123ed9aba08f15d2002f722', class: "tree-view-item__tags" }, index.h("slot", { key: 'd27ac7d0acb0da444304979cc21d6be4bf73ff68', name: "tags" }))), index.h("ul", { key: 'cb8ba76c9ceca5e94c9fb85005963b03f58ceb40', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
|
|
327
345
|
? "tree-view-item__children--drop-zone"
|
|
328
|
-
: ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: "group", style: {
|
|
329
|
-
display: (!
|
|
346
|
+
: ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
|
|
347
|
+
display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
|
|
330
348
|
? "none"
|
|
331
349
|
: undefined,
|
|
332
|
-
} }, index.h("slot", { key: '
|
|
350
|
+
} }, index.h("slot", { key: '712ac39576c65889812fab90246284afefc79ca0' })))));
|
|
333
351
|
}
|
|
334
352
|
get el() { return index.getElement(this); }
|
|
335
353
|
};
|
|
@@ -20,6 +20,7 @@ const SwirlTreeView = class {
|
|
|
20
20
|
this.itemExpansionChanged = index.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 = class {
|
|
|
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 = class {
|
|
|
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 = class {
|
|
|
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 = class {
|
|
|
322
332
|
}
|
|
323
333
|
}
|
|
324
334
|
render() {
|
|
325
|
-
return (index.h(index.Host, { key: '
|
|
335
|
+
return (index.h(index.Host, { key: '7177dd9e2f74be230521a2f9a139ad1277d11556' }, this.enableDragDrop && (index.h("swirl-visually-hidden", { key: 'd39aa04b285432925acd615b96cf33c6939d6902' }, index.h("span", { key: '2b6a48e97c71dd795d1fe2a4cd74a5330b3ede4e', "aria-live": "assertive" }, this.liveRegionText))), index.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 }, index.h("slot", { key: '164cb029c89c6124b6c3c91a951f8ceca4b3af04', onSlotchange: this.onSlotChange }))));
|
|
326
336
|
}
|
|
327
337
|
get el() { return index.getElement(this); }
|
|
328
338
|
static get watchers() { return {
|
|
@@ -6,6 +6,7 @@ export class SwirlResourceList {
|
|
|
6
6
|
this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.";
|
|
7
7
|
this.assistiveTextItemMoving = "Current position:";
|
|
8
8
|
this.assistiveTextItemMoved = "Item moved. New position:";
|
|
9
|
+
this.semantics = "grid";
|
|
9
10
|
this.spacing = "0";
|
|
10
11
|
this.listId = uuid();
|
|
11
12
|
this.focusedIndex = 0;
|
|
@@ -35,35 +36,19 @@ export class SwirlResourceList {
|
|
|
35
36
|
this.draggingStartIndex = undefined;
|
|
36
37
|
};
|
|
37
38
|
this.onKeyDown = (event) => {
|
|
38
|
-
if (
|
|
39
|
-
event.
|
|
40
|
-
|
|
39
|
+
if (this.semantics === "grid" && !Boolean(this.dragging)) {
|
|
40
|
+
if (event.code === "ArrowDown") {
|
|
41
|
+
event.preventDefault();
|
|
41
42
|
this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
|
|
42
43
|
}
|
|
43
|
-
else {
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
else if (event.code === "ArrowUp") {
|
|
48
|
-
event.preventDefault();
|
|
49
|
-
if (!Boolean(this.dragging)) {
|
|
44
|
+
else if (event.code === "ArrowUp") {
|
|
45
|
+
event.preventDefault();
|
|
50
46
|
const prevIndex = this.focusedIndex === 0
|
|
51
47
|
? this.items.length - 1
|
|
52
48
|
: this.focusedIndex - 1;
|
|
53
49
|
this.focusItemAtIndex(prevIndex);
|
|
54
50
|
}
|
|
55
|
-
else {
|
|
56
|
-
this.moveDraggedItemUp();
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
else if (event.code === "Space" || event.code === "Enter") {
|
|
60
|
-
const target = event.composedPath()[0];
|
|
61
|
-
if (Boolean(this.dragging) &&
|
|
62
|
-
!target?.classList.contains("resource-list-item__drag-handle")) {
|
|
63
|
-
event.preventDefault();
|
|
64
|
-
this.stopDrag(this.dragging);
|
|
65
|
-
}
|
|
66
|
-
else if (Boolean(this.controllingElement) && event.code === "Enter") {
|
|
51
|
+
else if (event.code === "Enter" && Boolean(this.controllingElement)) {
|
|
67
52
|
const item = this.items[this.focusedIndex];
|
|
68
53
|
if (!Boolean(item) || !item.isConnected) {
|
|
69
54
|
return;
|
|
@@ -72,14 +57,31 @@ export class SwirlResourceList {
|
|
|
72
57
|
event.preventDefault();
|
|
73
58
|
item.click();
|
|
74
59
|
}
|
|
60
|
+
else if (event.code === "Home") {
|
|
61
|
+
event.preventDefault();
|
|
62
|
+
this.focusItemAtIndex(0);
|
|
63
|
+
}
|
|
64
|
+
else if (event.code === "End") {
|
|
65
|
+
event.preventDefault();
|
|
66
|
+
this.focusItemAtIndex(this.items.length - 1);
|
|
67
|
+
}
|
|
75
68
|
}
|
|
76
|
-
|
|
77
|
-
event.
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
event.
|
|
82
|
-
|
|
69
|
+
if (Boolean(this.dragging)) {
|
|
70
|
+
if (event.code === "ArrowDown") {
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
this.moveDraggedItemDown();
|
|
73
|
+
}
|
|
74
|
+
else if (event.code === "ArrowUp") {
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
this.moveDraggedItemUp();
|
|
77
|
+
}
|
|
78
|
+
else if (event.code === "Space" || event.code === "Enter") {
|
|
79
|
+
const target = event.composedPath()[0];
|
|
80
|
+
if (!target?.classList.contains("resource-list-item__drag-handle")) {
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
this.stopDrag(this.dragging);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
83
85
|
}
|
|
84
86
|
};
|
|
85
87
|
}
|
|
@@ -137,6 +139,9 @@ export class SwirlResourceList {
|
|
|
137
139
|
return this.items.map((i) => i).findIndex((i) => i === item);
|
|
138
140
|
}
|
|
139
141
|
removeItemsFromTabOrder() {
|
|
142
|
+
if (this.semantics !== "grid") {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
140
145
|
this.items.forEach((item) => {
|
|
141
146
|
const focusableEl = item?.querySelector(".resource-list-item__content, .resource-list-file-item, [data-resource-list-item-button]");
|
|
142
147
|
const dragHandle = item?.querySelector(".resource-list-item__drag-handle");
|
|
@@ -245,7 +250,7 @@ export class SwirlResourceList {
|
|
|
245
250
|
});
|
|
246
251
|
}
|
|
247
252
|
render() {
|
|
248
|
-
return (h(Host, { key: '
|
|
253
|
+
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' })))));
|
|
249
254
|
}
|
|
250
255
|
static get is() { return "swirl-resource-list"; }
|
|
251
256
|
static get encapsulation() { return "scoped"; }
|
|
@@ -507,6 +512,32 @@ export class SwirlResourceList {
|
|
|
507
512
|
"setter": false,
|
|
508
513
|
"reflect": false
|
|
509
514
|
},
|
|
515
|
+
"semantics": {
|
|
516
|
+
"type": "string",
|
|
517
|
+
"attribute": "semantics",
|
|
518
|
+
"mutable": false,
|
|
519
|
+
"complexType": {
|
|
520
|
+
"original": "SwirlResourceListSemantics",
|
|
521
|
+
"resolved": "\"grid\" | \"list\"",
|
|
522
|
+
"references": {
|
|
523
|
+
"SwirlResourceListSemantics": {
|
|
524
|
+
"location": "local",
|
|
525
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-resource-list/swirl-resource-list.tsx",
|
|
526
|
+
"id": "src/components/swirl-resource-list/swirl-resource-list.tsx::SwirlResourceListSemantics"
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
},
|
|
530
|
+
"required": false,
|
|
531
|
+
"optional": true,
|
|
532
|
+
"docs": {
|
|
533
|
+
"tags": [],
|
|
534
|
+
"text": ""
|
|
535
|
+
},
|
|
536
|
+
"getter": false,
|
|
537
|
+
"setter": false,
|
|
538
|
+
"reflect": false,
|
|
539
|
+
"defaultValue": "\"grid\""
|
|
540
|
+
},
|
|
510
541
|
"spacing": {
|
|
511
542
|
"type": "string",
|
|
512
543
|
"attribute": "spacing",
|
package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h, Host } from "@stencil/core";
|
|
1
|
+
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import { DesktopMediaQuery } from "../../services/media-query.service";
|
|
4
4
|
export class SwirlResourceListFileItem {
|
|
@@ -27,10 +27,12 @@ export class SwirlResourceListFileItem {
|
|
|
27
27
|
const showDescription = !showError && Boolean(this.description);
|
|
28
28
|
const showSpinner = !showError && this.loading;
|
|
29
29
|
const showRemoveButton = this.removable && !showSpinner;
|
|
30
|
+
const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
|
|
31
|
+
const containerRole = hostRole === "row" ? "gridcell" : undefined;
|
|
30
32
|
const className = classnames("resource-list-file-item", {
|
|
31
33
|
"resource-list-file-item--has-control": showSpinner || showRemoveButton,
|
|
32
34
|
});
|
|
33
|
-
return (h(Host, { key: '
|
|
35
|
+
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 }))))));
|
|
34
36
|
}
|
|
35
37
|
static get is() { return "swirl-resource-list-file-item"; }
|
|
36
38
|
static get encapsulation() { return "scoped"; }
|
|
@@ -206,4 +208,5 @@ export class SwirlResourceListFileItem {
|
|
|
206
208
|
}
|
|
207
209
|
}];
|
|
208
210
|
}
|
|
211
|
+
static get elementRef() { return "el"; }
|
|
209
212
|
}
|
|
@@ -114,6 +114,8 @@ export class SwirlResourceListItem {
|
|
|
114
114
|
: this.label;
|
|
115
115
|
const ariaChecked = this.selectable ? String(this.checked) : undefined;
|
|
116
116
|
const role = this.interactive && this.selectable ? "checkbox" : undefined;
|
|
117
|
+
const hostRole = !!this.el.closest('[role="grid"]') ? "row" : "listitem";
|
|
118
|
+
const containerRole = hostRole === "row" ? "gridcell" : undefined;
|
|
117
119
|
const labelContainerStyles = {
|
|
118
120
|
paddingRight: !showMeta && Boolean(this.controlContainer)
|
|
119
121
|
? `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`
|
|
@@ -136,7 +138,7 @@ export class SwirlResourceListItem {
|
|
|
136
138
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
137
139
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
138
140
|
});
|
|
139
|
-
return (h(Host, { key: '
|
|
141
|
+
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 })))));
|
|
140
142
|
}
|
|
141
143
|
static get is() { return "swirl-resource-list-item"; }
|
|
142
144
|
static get encapsulation() { return "scoped"; }
|
package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js
CHANGED
|
@@ -9,7 +9,9 @@ export class SwirlResourceListSection {
|
|
|
9
9
|
this.hasSeparator = false;
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
|
|
12
|
+
const role = !!this.el.closest('[role="grid"]') ? "rowgroup" : "listitem";
|
|
13
|
+
const childrenListRole = role === "listitem" ? "list" : undefined;
|
|
14
|
+
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' })))));
|
|
13
15
|
}
|
|
14
16
|
static get is() { return "swirl-resource-list-section"; }
|
|
15
17
|
static get encapsulation() { return "shadow"; }
|
|
@@ -118,4 +120,5 @@ export class SwirlResourceListSection {
|
|
|
118
120
|
}
|
|
119
121
|
};
|
|
120
122
|
}
|
|
123
|
+
static get elementRef() { return "el"; }
|
|
121
124
|
}
|
|
@@ -17,7 +17,7 @@ export class SwirlStack {
|
|
|
17
17
|
height: this.height,
|
|
18
18
|
};
|
|
19
19
|
const className = classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
|
|
20
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: '9361133b37cb5c677dbf6dd49a39eec30c762e7a', style: { height: this.height } }, h(Tag, { key: '0fa5eaca5ac99e482f50793f170e6349e1854846', class: className, role: this.swirlAriaRole, style: styles }, h("slot", { key: '66e0cc4865421fbad50be48718d045a742fecedf' }))));
|
|
21
21
|
}
|
|
22
22
|
static get is() { return "swirl-stack"; }
|
|
23
23
|
static get encapsulation() { return "shadow"; }
|
|
@@ -226,6 +226,25 @@ export class SwirlStack {
|
|
|
226
226
|
"reflect": false,
|
|
227
227
|
"defaultValue": "\"0\""
|
|
228
228
|
},
|
|
229
|
+
"swirlAriaRole": {
|
|
230
|
+
"type": "string",
|
|
231
|
+
"attribute": "swirl-aria-role",
|
|
232
|
+
"mutable": false,
|
|
233
|
+
"complexType": {
|
|
234
|
+
"original": "string",
|
|
235
|
+
"resolved": "string",
|
|
236
|
+
"references": {}
|
|
237
|
+
},
|
|
238
|
+
"required": false,
|
|
239
|
+
"optional": true,
|
|
240
|
+
"docs": {
|
|
241
|
+
"tags": [],
|
|
242
|
+
"text": ""
|
|
243
|
+
},
|
|
244
|
+
"getter": false,
|
|
245
|
+
"setter": false,
|
|
246
|
+
"reflect": false
|
|
247
|
+
},
|
|
229
248
|
"wrap": {
|
|
230
249
|
"type": "boolean",
|
|
231
250
|
"attribute": "wrap",
|
|
@@ -15,6 +15,7 @@ export class SwirlTreeView {
|
|
|
15
15
|
constructor() {
|
|
16
16
|
this.dragDropInstructions = defaultDragDropInstructions;
|
|
17
17
|
this.dragDropItemSelector = "swirl-tree-view-item";
|
|
18
|
+
this.semantics = "tree";
|
|
18
19
|
this.liveRegionText = "";
|
|
19
20
|
this.onSlotChange = () => {
|
|
20
21
|
this.init();
|
|
@@ -48,6 +49,9 @@ export class SwirlTreeView {
|
|
|
48
49
|
this.setUpDragDrop();
|
|
49
50
|
}
|
|
50
51
|
async expandItems(itemIds) {
|
|
52
|
+
if (this.semantics !== "tree") {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
51
55
|
const items = this.getItems().filter((item) => itemIds.includes(item.itemId));
|
|
52
56
|
items.forEach((item) => item.expand());
|
|
53
57
|
}
|
|
@@ -78,6 +82,9 @@ export class SwirlTreeView {
|
|
|
78
82
|
}
|
|
79
83
|
}
|
|
80
84
|
onKeyDown(event) {
|
|
85
|
+
if (this.semantics !== "tree") {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
81
88
|
if (event.key === "ArrowDown") {
|
|
82
89
|
event.preventDefault();
|
|
83
90
|
this.selectNextItem();
|
|
@@ -129,6 +136,9 @@ export class SwirlTreeView {
|
|
|
129
136
|
this.updateLiveRegionText("moved", event.detail);
|
|
130
137
|
}
|
|
131
138
|
init() {
|
|
139
|
+
if (this.semantics !== "tree") {
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
132
142
|
const selectedItem = this.getSelectedItem();
|
|
133
143
|
const allItems = this.getItems();
|
|
134
144
|
allItems.forEach((item) => item.unselect());
|
|
@@ -317,7 +327,7 @@ export class SwirlTreeView {
|
|
|
317
327
|
}
|
|
318
328
|
}
|
|
319
329
|
render() {
|
|
320
|
-
return (h(Host, { key: '
|
|
330
|
+
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 }))));
|
|
321
331
|
}
|
|
322
332
|
static get is() { return "swirl-tree-view"; }
|
|
323
333
|
static get originalStyleUrls() {
|
|
@@ -450,6 +460,32 @@ export class SwirlTreeView {
|
|
|
450
460
|
"getter": false,
|
|
451
461
|
"setter": false,
|
|
452
462
|
"reflect": false
|
|
463
|
+
},
|
|
464
|
+
"semantics": {
|
|
465
|
+
"type": "string",
|
|
466
|
+
"attribute": "semantics",
|
|
467
|
+
"mutable": false,
|
|
468
|
+
"complexType": {
|
|
469
|
+
"original": "SwirlTreeViewSemantics",
|
|
470
|
+
"resolved": "\"list\" | \"tree\"",
|
|
471
|
+
"references": {
|
|
472
|
+
"SwirlTreeViewSemantics": {
|
|
473
|
+
"location": "local",
|
|
474
|
+
"path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tree-view/swirl-tree-view.tsx",
|
|
475
|
+
"id": "src/components/swirl-tree-view/swirl-tree-view.tsx::SwirlTreeViewSemantics"
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
},
|
|
479
|
+
"required": false,
|
|
480
|
+
"optional": true,
|
|
481
|
+
"docs": {
|
|
482
|
+
"tags": [],
|
|
483
|
+
"text": ""
|
|
484
|
+
},
|
|
485
|
+
"getter": false,
|
|
486
|
+
"setter": false,
|
|
487
|
+
"reflect": false,
|
|
488
|
+
"defaultValue": "\"tree\""
|
|
453
489
|
}
|
|
454
490
|
};
|
|
455
491
|
}
|