@getflip/swirl-components 0.294.0 → 0.296.0

package/dist/collection/components/swirl-tree-view-item/swirl-tree-view-item.js

@@ -1,5 +1,7 @@
-import { Fragment, h, Host, } from "@stencil/core";
+import { forceUpdate, Fragment, h, Host, } from "@stencil/core";
 import classNames from "classnames";
+import Sortable from "sortablejs";
+import { treeViewDragDropConfig } from "../swirl-tree-view/swirl-tree-view.config";
 /**
  * @slot slot - The children of the tree view item
  * @slot tags - The tags of the tree view item
@@ -11,6 +13,26 @@ export class SwirlTreeViewItem {
                 this.select();
             }
         };
+        this.onKeyDown = (event) => {
+            if (event.code === "Space") {
+                event.preventDefault();
+                this.toggleKeyboardMove();
+                return;
+            }
+            if (!this.movingViaKeyboard) {
+                return;
+            }
+            if (event.code === "ArrowDown") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveItem("down");
+            }
+            else if (event.code === "ArrowUp") {
+                event.preventDefault();
+                event.stopPropagation();
+                this.moveItem("up");
+            }
+        };
         this.onClickCollapse = (event) => {
             event.preventDefault();
             event.stopPropagation();
@@ -22,18 +44,31 @@ export class SwirlTreeViewItem {
             this.expand();
         };
         this.active = undefined;
+        this.disableDrag = undefined;
         this.expandable = true;
         this.href = undefined;
         this.icon = undefined;
         this.iconColor = undefined;
         this.itemId = undefined;
         this.label = undefined;
+        this.canDrop = undefined;
+        this.cannotKeyboardDropInCurrentPosition = false;
+        this.dragDropItemSelector = "swirl-tree-view-item";
+        this.enableDragDrop = false;
         this.expanded = false;
         this.level = 0;
+        this.movingViaKeyboard = false;
         this.selected = false;
     }
     componentWillLoad() {
         this.updateLevel();
+        const treeView = this.el.closest("swirl-tree-view");
+        this.enableDragDrop = treeView?.enableDragDrop;
+        this.canDrop = treeView?.canDrop;
+        this.dragDropItemSelector = treeView?.dragDropItemSelector;
+    }
+    componentDidLoad() {
+        this.setUpDragDrop();
     }
     async expand() {
         if (this.expanded || !this.expandable) {
@@ -59,6 +94,49 @@ export class SwirlTreeViewItem {
     async unselect() {
         this.selected = false;
     }
+    setUpDragDrop() {
+        if (this.sortable) {
+            this.sortable.destroy();
+            this.sortable = undefined;
+        }
+        if (this.enableDragDrop && this.childList) {
+            this.sortable = new Sortable(this.childList, {
+                ...treeViewDragDropConfig,
+                draggable: this.dragDropItemSelector,
+                onMove: (event) => {
+                    if (typeof this.canDrop === "function") {
+                        return this.canDrop({
+                            parentId: event.to.closest("swirl-tree-view-item")?.itemId,
+                            position: Math.max(Array.from(event.to.children).indexOf(event.related), 0),
+                        });
+                    }
+                    return true;
+                },
+                onStart: (event) => {
+                    treeViewDragDropConfig.onStart?.(event);
+                },
+                onEnd: (event) => {
+                    event.stopPropagation();
+                    treeViewDragDropConfig.onEnd?.(event);
+                    const { from, to, newIndex, oldIndex, item } = event;
+                    const sourceParentItemId = from.closest("swirl-tree-view-item")?.itemId;
+                    const targetParentItemId = to.closest("swirl-tree-view-item")?.itemId;
+                    this.dropTreeViewItem.emit({
+                        newIndex,
+                        oldIndex,
+                        item,
+                        itemId: item.id ?? item.querySelector(":scope > swirl-tree-view-item").id,
+                        newNextSiblingItemId: newIndex < to.children.length - 1
+                            ? to.children[newIndex + 1].id
+                            : undefined,
+                        newPrevSiblingItemId: newIndex > 0 ? to.children[newIndex - 1].id : undefined,
+                        sourceParentItemId,
+                        targetParentItemId,
+                    });
+                },
+            });
+        }
+    }
     updateLevel() {
         let parentItem = this.el.parentElement?.closest("swirl-tree-view-item");
         while (Boolean(parentItem)) {
@@ -66,22 +144,194 @@ export class SwirlTreeViewItem {
             parentItem = parentItem.parentElement?.closest("swirl-tree-view-item");
         }
     }
+    getItemContext() {
+        const parent = this.getParentTreeViewItem() ?? this.el.closest("swirl-tree-view");
+        const siblings = Array.from(parent.querySelectorAll(`
+        :scope > .tree-view-item > .tree-view-item__children > ${this.dragDropItemSelector},
+        :scope > .tree-view > ${this.dragDropItemSelector}
+      `));
+        return {
+            canDrop: !this.cannotKeyboardDropInCurrentPosition,
+            parent,
+            position: siblings.indexOf(this.el),
+            siblingCount: siblings.length,
+        };
+    }
+    getParentItem() {
+        return this.getElementToMove().parentElement.closest(this.dragDropItemSelector);
+    }
+    getParentTreeViewItem() {
+        return this.el.parentElement.closest("swirl-tree-view-item");
+    }
+    getElementToMove() {
+        return this.dragDropItemSelector
+            ? this.el.closest(this.dragDropItemSelector)
+            : this.el;
+    }
+    getKeyboardMoveEventData() {
+        const { canDrop, parent, position, siblingCount } = this.getItemContext();
+        if (!parent) {
+            return undefined;
+        }
+        return {
+            canDrop,
+            parentLabel: parent.label,
+            childrenCount: siblingCount,
+            itemLabel: this.label,
+            position,
+        };
+    }
+    toggleKeyboardMove() {
+        if (this.movingViaKeyboard) {
+            this.endKeyboardMove();
+        }
+        else {
+            this.startKeyboardMove();
+        }
+    }
+    endKeyboardMove() {
+        const { parent, position } = this.getItemContext();
+        if (typeof this.canDrop === "function") {
+            const canBeDroppedHere = this.canDrop({ parentId: parent.id, position });
+            if (!canBeDroppedHere) {
+                return;
+            }
+        }
+        this.movingViaKeyboard = false;
+        const eventData = this.getKeyboardMoveEventData();
+        if (!eventData) {
+            return;
+        }
+        this.endKeyboardMoveEvent.emit(eventData);
+        this.dropTreeViewItem.emit({
+            item: this.getElementToMove(),
+            itemId: this.itemId,
+            newIndex: position,
+            oldIndex: this.positionBeforeKeyboardMove.position,
+            newNextSiblingItemId: eventData.position < eventData.childrenCount - 1
+                ? this.getElementToMove().nextElementSibling?.id
+                : undefined,
+            newPrevSiblingItemId: eventData.position > 0
+                ? this.getElementToMove().previousElementSibling?.id
+                : undefined,
+            sourceParentItemId: this.positionBeforeKeyboardMove.parent.id ?? undefined,
+            targetParentItemId: this.getParentItem()?.id,
+        });
+    }
+    startKeyboardMove() {
+        if (this.disableDrag) {
+            return;
+        }
+        const { parent, position } = this.getItemContext();
+        this.positionBeforeKeyboardMove = {
+            parent,
+            position,
+        };
+        this.movingViaKeyboard = true;
+        const eventData = this.getKeyboardMoveEventData();
+        if (!eventData) {
+            return;
+        }
+        this.startKeyboardMoveEvent.emit(eventData);
+    }
+    moveItem(direction) {
+        const elementToMove = this.getElementToMove();
+        const parentItem = this.getParentItem();
+        const parentTreeViewItem = this.getParentTreeViewItem();
+        if (direction === "down") {
+            const nextSibling = elementToMove.nextElementSibling;
+            if (nextSibling) {
+                // move inside the next sibling
+                nextSibling
+                    .querySelector(".tree-view-item__children")
+                    .prepend(elementToMove);
+                // update parent tree view item
+                if (parentTreeViewItem) {
+                    forceUpdate(parentTreeViewItem);
+                }
+                const siblingTreeItem = nextSibling.tagName === "SWIRL-TREE-VIEW-ITEM"
+                    ? nextSibling
+                    : nextSibling.querySelector("swirl-tree-view-item");
+                forceUpdate(siblingTreeItem);
+                siblingTreeItem.expand();
+            }
+            else {
+                if (parentItem) {
+                    // move after the parent item
+                    parentItem.parentElement.insertBefore(elementToMove, parentItem.nextElementSibling);
+                    if (parentTreeViewItem) {
+                        forceUpdate(parentTreeViewItem);
+                    }
+                }
+            }
+        }
+        else if (direction === "up") {
+            const prevSibling = elementToMove.previousElementSibling;
+            if (prevSibling) {
+                // move before the previous sibling
+                prevSibling
+                    .querySelector(".tree-view-item__children")
+                    .appendChild(elementToMove);
+                // update parent tree view item
+                if (parentTreeViewItem) {
+                    forceUpdate(parentTreeViewItem);
+                }
+                const siblingTreeItem = prevSibling.tagName === "SWIRL-TREE-VIEW-ITEM"
+                    ? prevSibling
+                    : prevSibling.querySelector("swirl-tree-view-item");
+                forceUpdate(siblingTreeItem);
+                siblingTreeItem.expand();
+            }
+            else {
+                if (parentItem) {
+                    // move before the parent item
+                    parentItem.parentElement.insertBefore(elementToMove, parentItem);
+                    if (parentTreeViewItem) {
+                        forceUpdate(parentTreeViewItem);
+                    }
+                }
+            }
+        }
+        requestAnimationFrame(() => {
+            this.link.focus();
+        });
+        this.checkKeyboardDropStatus();
+        const eventData = this.getKeyboardMoveEventData();
+        if (!eventData) {
+            return;
+        }
+        this.keyboardMoveEvent.emit(eventData);
+    }
+    checkKeyboardDropStatus() {
+        const { parent, position } = this.getItemContext();
+        if (typeof this.canDrop === "function") {
+            const canBeDroppedHere = this.canDrop({ parentId: parent.id, position });
+            this.cannotKeyboardDropInCurrentPosition = !canBeDroppedHere;
+            return;
+        }
+        this.cannotKeyboardDropInCurrentPosition = false;
+    }
     render() {
+        const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
         const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
         const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
+        const shouldShowChildrenDropZone = this.enableDragDrop && !hasChildren;
         const className = classNames("tree-view-item", {
             "tree-view-item--active": this.active,
+            "tree-view-item--cannot-keyboard-drop": this.cannotKeyboardDropInCurrentPosition,
+            "tree-view-item--moving-via-keyboard": this.movingViaKeyboard,
+            "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
-        return (h(Host, { key: '7055128d592ea7a599026cb9e9ca263016c9ab28', id: this.itemId, role: "none" }, h("li", { key: '19db1a5c434521aafbcf66364af9d731958c3217', class: className, role: "none" }, h("a", { key: '8d4d0cfb8f68280bc21fa560be3dfc8536957e69', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
-                paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-${this.expandable ? "4" : "8"}))`,
-            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: 'a1df0b690e3648a3efd78963580536e68244346e', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '8b37bb4dcd53888c2d34bb60cb48caddc1dae2d6' }, this.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: '3408a32ea893cfdbc7829be311d2b337a6995099' }, h("span", { key: 'bed3cf8a935be1aa489a12097e0f1daa51874ae1', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '6c2f60b9c5f7cf54d69b539b77a6fffef305bada', class: "tree-view-item__label" }, this.label), h("span", { key: '2ec646c4068d3ebbc1417c9138a7f26aaa5d13a9', class: "tree-view-item__tags" }, h("slot", { key: 'c277c4aac4812a969366771dbe5723e266884fd2', name: "tags" }))), h("ul", { key: 'a18acac09207d0db6993b92d49f375f0091958ea', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
-                display: !this.expanded || !hasChildren ? "none" : undefined,
-            } }, h("slot", { key: '3870afdc596f7b91480c0951e0553478865ff2a8' })))));
+        return (h(Host, { key: '23b8e5281a53f8707d990368f46b2a9810d20fa2', id: this.itemId, role: "none" }, h("li", { key: 'aac1855ae0f7cad6a26735e1eb23c67f99bba737', class: className, role: "none" }, h("a", { key: '72bbd772c2f78d2e91e0d584387794de0694a396', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '5010453afe5af040148fd4507f0dc2e75a573f7f', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: 'd933894d661434ab4ec19c525e3fd8fca29e10ee', size: 20 }))), this.expandable && (h("span", { key: 'be633a37e2aa2d2e7267833b1f8933a72cc484e7', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '76b88fd0783cd5d9fee1b2e950ed4db18060c1e4' }, this.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: 'bc95015cced5867204a8a10235cf45a48daa5fc4' }, h("span", { key: 'd53f7711f0101ee14940070cc28e7a4d7032d9d7', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '25111e86c433cbba58516946b42036e25fc1873e', class: "tree-view-item__label" }, this.label), h("span", { key: '2f30cf45fb918cb3964c38317bf8246ee96bc09c', class: "tree-view-item__tags" }, h("slot", { key: '857ea08895969d6b1ad13ad7a920da0f768a01d3', name: "tags" }))), h("ul", { key: 'df9aed076bb9831f5063e32a727c7c59afab9714', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                ? "tree-view-item__children--drop-zone"
+                : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: "group", style: {
+                display: (!this.expanded || !hasChildren) && !shouldShowChildrenDropZone
+                    ? "none"
+                    : undefined,
+            } }, h("slot", { key: 'c02878c54039257dd7ffb2165e910adaacc37507' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
-    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["swirl-tree-view-item.css"]
@@ -111,6 +361,23 @@ export class SwirlTreeViewItem {
                 "attribute": "active",
                 "reflect": false
             },
+            "disableDrag": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disable-drag",
+                "reflect": false
+            },
             "expandable": {
                 "type": "boolean",
                 "mutable": false,
@@ -224,13 +491,39 @@ export class SwirlTreeViewItem {
     }
     static get states() {
         return {
+            "canDrop": {},
+            "cannotKeyboardDropInCurrentPosition": {},
+            "dragDropItemSelector": {},
+            "enableDragDrop": {},
             "expanded": {},
             "level": {},
+            "movingViaKeyboard": {},
             "selected": {}
         };
     }
     static get events() {
         return [{
+                "method": "dropTreeViewItem",
+                "name": "dropTreeViewItem",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SwirlTreeViewDropItemEvent",
+                    "resolved": "Pick<SortableEvent, \"item\" | \"oldIndex\" | \"newIndex\"> & { itemId: string; newNextSiblingItemId: string; newPrevSiblingItemId: string; sourceParentItemId: string; targetParentItemId: string; }",
+                    "references": {
+                        "SwirlTreeViewDropItemEvent": {
+                            "location": "import",
+                            "path": "../swirl-tree-view/swirl-tree-view",
+                            "id": "src/components/swirl-tree-view/swirl-tree-view.tsx::SwirlTreeViewDropItemEvent"
+                        }
+                    }
+                }
+            }, {
                 "method": "expandedChange",
                 "name": "expandedChange",
                 "bubbles": true,
@@ -265,6 +558,69 @@ export class SwirlTreeViewItem {
                         }
                     }
                 }
+            }, {
+                "method": "startKeyboardMoveEvent",
+                "name": "startKeyboardMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SwirlTreeViewItemKeyboardMoveEvent",
+                    "resolved": "{ canDrop: boolean; childrenCount: number; itemLabel: string; parentLabel: string; position: number; }",
+                    "references": {
+                        "SwirlTreeViewItemKeyboardMoveEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tree-view-item/swirl-tree-view-item.tsx",
+                            "id": "src/components/swirl-tree-view-item/swirl-tree-view-item.tsx::SwirlTreeViewItemKeyboardMoveEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "endKeyboardMoveEvent",
+                "name": "endKeyboardMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SwirlTreeViewItemKeyboardMoveEvent",
+                    "resolved": "{ canDrop: boolean; childrenCount: number; itemLabel: string; parentLabel: string; position: number; }",
+                    "references": {
+                        "SwirlTreeViewItemKeyboardMoveEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tree-view-item/swirl-tree-view-item.tsx",
+                            "id": "src/components/swirl-tree-view-item/swirl-tree-view-item.tsx::SwirlTreeViewItemKeyboardMoveEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "keyboardMoveEvent",
+                "name": "keyboardMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SwirlTreeViewItemKeyboardMoveEvent",
+                    "resolved": "{ canDrop: boolean; childrenCount: number; itemLabel: string; parentLabel: string; position: number; }",
+                    "references": {
+                        "SwirlTreeViewItemKeyboardMoveEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-tree-view-item/swirl-tree-view-item.tsx",
+                            "id": "src/components/swirl-tree-view-item/swirl-tree-view-item.tsx::SwirlTreeViewItemKeyboardMoveEvent"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/swirl-tree-view-item/swirl-tree-view-item.spec.js

@@ -10,7 +10,7 @@ describe("swirl-tree-view-item", () => {
       <swirl-tree-view-item id="item" item-id="item" label="Label" role="none">
         <!---->
         <li class="tree-view-item" role="none">
-          <a aria-level="1" aria-selected="false" class="tree-view-item__link" role="treeitem" tabindex="-1" style="padding-left: calc(0 * var(--s-space-12) + var(--s-space-4));">
+          <a aria-level="1" aria-selected="false" class="tree-view-item__link" role="treeitem" tabindex="-1">
             <span class="tree-view-item__toggle-icon"></span>
             <span class="tree-view-item__label">
               Label

package/dist/collection/components/swirl-video-thumbnail/swirl-video-thumbnail.js

@@ -7,7 +7,7 @@ export class SwirlVideoThumbnail {
         this.src = undefined;
     }
     render() {
-        return (h(Host, { key: '662c00b709440b09ace04bf30c5538c8ba8791d1' }, h("button", { key: '44d6affc18f5f77deac8e8f1b3f7d09ec83d7b88', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '1af4c020293b6d9f2f7c6ac144e9b56084a1467e', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '0b1c477e6cd851f4449c89e81783b9f8d482b9f8', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '2df532b90fdd4900b0dafbf7721ec6ed2b3dd23d' }, this.durationLabel), this.duration)), h("svg", { key: '41bcb649ed660903b4ff9778c448381359e0925e', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '51eea7640272fdbf8ce7eb1df570f80be50471ae', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (h(Host, { key: 'c8222b303f7878f6bc1e9dacef086d64662bdb70' }, h("button", { key: '93fc15bec01b3c435ee0195fc73f101f0291b91a', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '248050ec128b3c538e9627f567ca1b957cffde02', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '5f3aa56cfd6256c7e0097adad6a027eb33bafb30', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '8b1b2bbb76a2124c70d6fa06f222019820c1f73b' }, this.durationLabel), this.duration)), h("svg", { key: 'eb6d5cd1ec93bf6e788152d4548b892b583a0918', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8a8415b2bfd731fe9465a634dfd7a4a8eeedc2fb', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
     static get is() { return "swirl-video-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlVisuallyHidden {
     render() {
-        return (h(Host, { key: 'a94fe415536bdc6069d84e8d074d05f3a833843d' }, h("slot", { key: 'b21fd056d98d66ad78549d340776f045625f230a' })));
+        return (h(Host, { key: '4fa574932da58f51e740af4f582e03cc6feb9be9' }, h("slot", { key: 'eb4b16d5046dbf3f59eb163e7c6f45bed3f99ae9' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/prototypes/file-manager/file-manager.js

@@ -56,7 +56,7 @@ export class FileManager {
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: 'f824d7bc63476fb19f71a42c5aa09fb4d954d01f' }, h("swirl-app-layout", { key: 'ec6500f8d872dde19f9c6f6a55452712a7a87ce1', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '89a732c8168fcfbf48f8e71d17a5a6d6d40569c1', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'e42b4c1d9e6b46603fdd867119bb6ba86b54807c', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'f21bb99f0f836c2c6914671f5727b9b6ec336e73', label: "Sort items" })), h("swirl-stack", { key: '47479bd60214ab399eecc5dbeec92a99b75ec529', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '351c6f2f6172b01914d52be76f41690af6d0835e' }, h("swirl-heading", { key: 'f16201178c34ed452b1d48e47ea0b28a9bb83cf1', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'b2b5638b1bd3ad80ccd7a13d646bc0ab5f7ae811', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: 'de582407fc445eb9ba1e279195ad240bbb4ff714', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '6019d2af82f81f72c95b5270be7f36a35bdf9bf4', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '4339cdc0c792a5d1767e54887584713796026848', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'c08ce0b2f25c51aeb2cae3236623a376f97571b3', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'da973e49a8554303ab0e02ddb7daffd5b8e61b69', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'e2fde653a3eccfaf9a91bbc45cf5c770cc9e53a3', value: ["ascending"] }, h("swirl-option-list-item", { key: '2dda190f020c675d70a4986a7870f13ef60551a3', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'd07d86a691addea39319de2c9c97b43491c16d9e', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'b52de72d2545eab36d71015da08c340b6b7ba17e', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: 'f07f71a8482ef4aa1014acac792c87aa95065889' }, h("swirl-app-layout", { key: '071087d9402d0e8d36ff31dd5df600f0acf9f79a', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: 'ab306f991325be61eefd3c2c1a7a7f606fed46e6', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'dbcc751b460b5c6d0e00e52e099214b94cc0ba99', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'f02622174bd02ce62cc78426ba13d39a52b40fb9', label: "Sort items" })), h("swirl-stack", { key: '07b9eda2c15ee9b5e23ebdecb47c21805ada3508', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '7be067deffc92e3d4efadca7c35c7ce97763bfee' }, h("swirl-heading", { key: '89e7cfd1432000f74b62fd7dc35e9202b7b8647f', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'c450212a5f9aeb3b0b399297ad72cbe86c8798f5', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '6b347770944a0f6e58bbbf5dd6dde1170179a153', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '440fecb0f70b86d994fbf528d820d54eb7b0fa4e', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '0d5df914f57717ab125dee0bebcc09484925c54a', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '69c9e14adbfccd08373af6ec4d9c1caf79f54c83', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '3132c5582663180abe622ba001d561e2e3b642b7', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'eb7edd7cf4941eb80fdd988958c394bcee716a9b', value: ["ascending"] }, h("swirl-option-list-item", { key: '5af8b499e3bb16214a62f9c888307242d43a4404', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'adbf0e0110bfc8597e88f6750b75ef483712997b', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '5eb660a5d4e438c8181073c9f297eab59912a14c', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
     static get is() { return "file-manager"; }
     static get encapsulation() { return "shadow"; }