@getflip/swirl-components 0.254.1 → 0.256.0

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

@@ -1,21 +1,84 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 export class SwirlTreeNavigationItem {
     constructor() {
+        this.buttonId = `${this.navigationItemId}-button`;
+        this.childrenId = `${this.navigationItemId}-children`;
+        this.onKeyDown = (event) => {
+            switch (event.key) {
+                case " ":
+                    event.preventDefault();
+                    this.toggleExpanded(event);
+                    break;
+                case "ArrowRight":
+                    event.preventDefault();
+                    if (!this.expanded && this.hasChildren) {
+                        this.expand();
+                    }
+                    break;
+                case "ArrowLeft":
+                    event.preventDefault();
+                    if (this.expanded) {
+                        this.collapse();
+                    }
+                    break;
+            }
+        };
+        this.toggleExpanded = (event) => {
+            if (!this.href) {
+                event.preventDefault();
+                event.stopPropagation();
+                if (this.expanded) {
+                    this.collapse();
+                }
+                else {
+                    this.expand();
+                }
+            }
+        };
         this.active = undefined;
         this.href = undefined;
         this.icon = undefined;
         this.label = undefined;
         this.target = undefined;
+        this.navigationItemId = undefined;
+        this.level = 1;
+        this.expandable = true;
+        this.external = false;
+        this.expanded = false;
+        this.hasChildren = false;
+    }
+    componentWillLoad() {
+        this.checkForChildren();
+    }
+    handleExpandedChange() {
+        this.expansionChange.emit(this.expanded);
+    }
+    checkForChildren() {
+        this.hasChildren = Boolean(this.el.querySelector("swirl-tree-navigation-item"));
+    }
+    async expand() {
+        if (this.expanded || !this.expandable || !this.hasChildren) {
+            return;
+        }
+        this.expanded = true;
+    }
+    async collapse() {
+        if (!this.expanded || !this.expandable || !this.hasChildren) {
+            return;
+        }
+        this.expanded = false;
     }
     render() {
         const isLink = Boolean(this.href);
         const Tag = isLink ? "a" : "button";
-        const className = classnames("tree-navigation-item", {
-            "tree-navigation-item--active": this.active,
-            "tree-navigation-item--has-icon": Boolean(this.icon),
+        const linkClassName = classnames("tree-navigation-item__link", {
+            "tree-navigation-item__link--active": this.active,
+            "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: 'f9bc80e6c911dc7030d180ce5f675f90e84fc80f' }, h(Tag, { key: '2ca99a21c102a2137e61472c654d9c7195ed3d2c', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: 'a657d7199e22b81315780d5264c04269d347df98', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '0d612bf1dbdfa0a4b8979c9dfa438c4821f6d339', class: "tree-navigation-item__label" }, this.label))));
+        return (h(Host, { key: 'e3bfad9988e2f3fd9d7b2d92bed466008bddee46', role: "none" }, h("li", { key: 'eb1da2091f8168ca76b5356b5747139e59c73845', class: "tree-navigation-item", role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: 'c630c70f43bd45758d929c14026c9c28941d082e', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: '0001a3da5777d5ba7d98a862433a3340c523722e', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'c1671f5761c2a6554309da4a22eeac8be12aa0da', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'c21401058cdcd0b8a695f42adfddf867b7295286', class: "tree-navigation-item__label" }, this.label)), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'b2213d840c108846a0f2ba776ee3ff733a75b95f', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, this.expanded ? (h("swirl-icon-expand-more", { size: 16, role: "img", "aria-label": "Collapse" })) : (h("swirl-icon-chevron-right", { size: 16, role: "img", "aria-label": "Expand" })))), this.external && (h("span", { key: '818cb51c0ea3330392f87cc3aa429974bd363d12', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'ef01b1ca0fd70fd0c85ae80ab914ab89b407a56c', size: 16, role: "img", "aria-label": "External link" })))), this.hasChildren && (h("ul", { key: 'c576a994a7434de80b2945798b46118950cb6b1b', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, style: {
+                display: !this.expanded ? "none" : undefined,
+            } }, h("slot", { key: 'cf31e4f6c71cc39028f2aa5d2748fd3798c3c393' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }
@@ -115,8 +178,147 @@ export class SwirlTreeNavigationItem {
                 },
                 "attribute": "target",
                 "reflect": false
+            },
+            "navigationItemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "navigation-item-id",
+                "reflect": false
+            },
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "level",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "expandable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expandable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "external": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "external",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {},
+            "hasChildren": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expansionChange",
+                "name": "expansionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "expand": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "collapse": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "expanded",
+                "methodName": "handleExpandedChange"
+            }];
+    }
 }

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

@@ -7,16 +7,18 @@ describe("swirl-tree-navigation-item", () => {
             html: `<swirl-tree-navigation-item icon="Icon" label="Label"></swirl-tree-navigation-item>`,
         });
         expect(page.root).toMatchInlineSnapshot(`
-      <swirl-tree-navigation-item icon="Icon" label="Label">
+      <swirl-tree-navigation-item icon="Icon" label="Label" role="none">
         <mock:shadow-root>
-          <button class="tree-navigation-item tree-navigation-item--has-icon" type="button">
-            <span class="tree-navigation-item__icon">
-              Icon
-            </span>
-            <span class="tree-navigation-item__label">
-              Label
-            </span>
-          </button>
+          <li aria-level="1" class="tree-navigation-item" role="treeitem">
+            <button class="tree-navigation-item__link tree-navigation-item__link--has-icon" id="undefined-button" type="button">
+              <span class="tree-navigation-item__content">
+                <swirl-icon aria-hidden="true" aria-label="Label icon" class="tree-navigation-item__icon" glyph="Icon" role="img" size="20"></swirl-icon>
+                <span class="tree-navigation-item__label">
+                  Label
+                </span>
+              </span>
+            </button>
+          </li>
         </mock:shadow-root>
       </swirl-tree-navigation-item>
     `);
@@ -26,6 +28,9 @@ describe("swirl-tree-navigation-item", () => {
             components: [SwirlTreeNavigationItem],
             html: `<swirl-tree-navigation-item active="true" label="Label"></swirl-tree-navigation-item>`,
         });
-        expect(page.root.shadowRoot.children[0].classList.contains("tree-navigation-item--active")).toBeTruthy();
+        // Update to check for the new active class on the link element
+        expect(page.root.shadowRoot
+            .querySelector(".tree-navigation-item__link")
+            .classList.contains("tree-navigation-item__link--active")).toBeTruthy();
     });
 });

package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.stories.js

@@ -1,16 +1,6 @@
 import { generateStoryElement } from "../../utils";
 import Docs from "./swirl-tree-navigation-item.mdx";
 export default {
-    argTypes: {
-        icon: {
-            table: {
-                type: {
-                    detail: "e.g. <swirl-icon-close></swirl-icon-close>",
-                    summary: "swirl-icon-*",
-                },
-            },
-        },
-    },
     component: "swirl-tree-navigation-item",
     tags: ["autodocs"],
     parameters: {
@@ -26,6 +16,6 @@ const Template = (args) => {
 };
 export const SwirlTreeNavigationItem = Template.bind({});
 SwirlTreeNavigationItem.args = {
-    icon: "<swirl-icon-arrow-right-small></swirl-icon-arrow-right-small>",
+    icon: "file",
     label: "Label",
 };

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

@@ -192,7 +192,7 @@ export class SwirlTreeView {
         return nestedSibling ?? undefined;
     }
     render() {
-        return (h(Host, { key: 'd9265aef73021237709d82d2942014e16f193f8c' }, h("ul", { key: '0c435bad394708adb3a98564d58de09ca435872c', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: 'b48b40863ea888e67246ba7dfd7b1ead648b2c60', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: 'c4594413feaa68e716f32654673a69145a05458e' }, h("ul", { key: 'c329031d71b7261db724c736feea3a91108cc781', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: 'eb0795310248879201115103569038c179deb980', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,11 +74,11 @@ export class SwirlTreeViewItem {
             "tree-view-item--has-tags": hasTags,
         });
         const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
-        return (h(Host, { key: '45ddddf9e282ed3afbb4fc6606c4b75e19f45ae3', id: this.itemId, role: "none" }, h("li", { key: '49ad755ce87e8021d159110f14504d977a2ef685', class: className, role: "none" }, h("a", { key: 'c8d9a279b733241173d8c22d69f5aa25e4e7ac7f', "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: {
+        return (h(Host, { key: 'a586d7bdd3d312b4cdcf38399344bda0526953ff', id: this.itemId, role: "none" }, h("li", { key: 'c1753b03121d4a379eb9987dea274f36b4bcf81f', class: className, role: "none" }, h("a", { key: 'a6d93db38529deafc481a23f04492fb022ef808d', "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: '4f2457f90eeb8d5841b5ae82b8214c5b25b05b9b', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '57b52745d6f0d9849b39fbf687168d9f37aebf12' }, 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: 'cccbc0943a56a8dc1c7d4bef194b14030fa39b6d' }, h("span", { key: '673aa7207123120566de9a95f1f20b1eb99504b9', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '4db5b2da5445dbc39b4ec43028511515833e78a6', class: "tree-view-item__label" }, this.label), h("span", { key: '571d246e294c3a4e654c49868defa16adf576062', class: "tree-view-item__tags" }, h("slot", { key: 'e1c619ee29b232e4653f6edea8549625d96d7544', name: "tags" }))), h("ul", { key: '44bf72064a95bc3504176b00f8656c7f2e2689fa', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
+            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: 'd24b8263d4cebdaf9d2624115e5d013cf4889b83', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '388c9048b2a89c9e81aef48fa0b57dd6d1c2844c' }, 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: '3f777177322b411d8a85dbda1f4cac21620e9ce3' }, h("span", { key: 'e99d17c654386c5dea9026edacad342d2693b16c', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: 'f929b088d3698229063fc62e2a0c5740ff22f1ec', class: "tree-view-item__label" }, this.label), h("span", { key: 'e091236fc48506b89af4f984f2a313540576b272', class: "tree-view-item__tags" }, h("slot", { key: 'ba8fabb6e95172aea1a9a7fdb8853452a712055a', name: "tags" }))), h("ul", { key: '9627a321c8d54d72d34b3239fc03d6b0e46eeffc', "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: '8ca6c92b00ffb2af2da537fa79f90548f44ebe03' })))));
+            } }, h("slot", { key: '0fb8e1a8190e6c31dd49315e9696da198297af19' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get encapsulation() { return "scoped"; }

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: 'd67938cbd04fbffc368ad324630bd8622c1e8c5b' }, h("button", { key: '2233218d1d04cca359795a4037e2e475a114a9bc', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '6533b6476b62f35adf46a76a88b946727ceaeb33', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '9afe4e6bcc2080be2e19a7d2f14a661841c1971a', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'f416764dedb92def3f33a1a3ea124425a06cb2a4' }, this.durationLabel), this.duration)), h("svg", { key: '3f9d5bf02620449267629cb325b87a1784f5b8ec', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'aaa31ee0aac6020ef6ca4f611b491bb82d2a032d', 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: 'd794f1583cc40b334a556369be9fd5cad5f7fb70' }, h("button", { key: 'e11c59d0cd5408f6bb3d3b5b9779c61a5ab757e5', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'd384a49dc48f744b317306267567f7c1078feb6c', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ebdc431ae39edf02c6f23620305d8d5fb0df9192', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'faed768009978536f3773a28d09e854084213a7d' }, this.durationLabel), this.duration)), h("svg", { key: '50561a309689475ac0d5ff1d836d614cd5b46909', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5fcd54d38b882b33876f45a4d4672ee615692722', 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: '2bc61727b59b308d63a22df3d0e4c1275ff724ea' }, h("slot", { key: '2fbb79aa18b39cdc3361081d460b1ab74f5ca7e0' })));
+        return (h(Host, { key: 'bb3e602678ca5fa272b507b6de5d58f3a070c698' }, h("slot", { key: '7438101a2790eb40e97379beed8afafca5324945' })));
     }
     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: '5abcfa3033adc7fc8fbb6b878295c47a67b446cc' }, h("swirl-app-layout", { key: '15d5dee67eff7b0321948b2b94a190255762aeab', 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: 'dc6202d53d29d30cf301d246b690eb80e2602f98', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '9727fe10aeff9bdf5b3b8ce2be4fce4b314446fc', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'e00d9e6a5db9a8ce6c4c6af56466f042b585edfe', label: "Sort items" })), h("swirl-stack", { key: '5f47eae01c2cac3e4d0336f9eb16613b48935431', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'ff2f17e4ee8b7bfeaef76e1d3c6a483c7e40a841' }, h("swirl-heading", { key: '974ee1849a4451a0e576826d9f2e65771d0166a4', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '43faf8febbc4480e286f011b61bc20ae9f7f29fd', 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: '7b9deb6018f9d6df739a906136fe85ff043d1fe8', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '85309a64ac050ad4bc21c77a13675e1de669aa4b', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '9f5f3c1a15b22bfc9523b94ad3578bd709f64d55', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '4d598b0dd927fde15175dfa58bf2748f463df2ed', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '569dba4b00d49f27e4b25767afb5a1323fdad4d1', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'a00f86a4c6d90e00bf3655b0334dbde95e5f797a', value: ["ascending"] }, h("swirl-option-list-item", { key: '836668dd0f91592bbc359a0fc1599417a171f28e', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'b33317cc1b6379d631bc4b4faa37a5a012f2e9f3', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '0362f59ad0dc53c2591825ee0e9c59ea2cb03bc1', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '4ff7a235ea4c26b50cb4a2b15f13c4e6bf4125c7' }, h("swirl-app-layout", { key: '3c82ebf9d57f7f0e94ee26f2d297cabba160b85d', 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: '0adeaed6507f987455eca9674f181b75ff7fbb0e', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'dba4d612913389bf272494a8df7a4d195eba24ec', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'a2ed2dd60128be6827afbd471364e9c1ccef796f', label: "Sort items" })), h("swirl-stack", { key: '3dc5ac3646c22c2bc0301a2a93e17ceb5a4be340', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'e9fe9ac45cee5901e8f4dc08f51587dc7f24e0d3' }, h("swirl-heading", { key: '67bafdd4263639a5fdeeb833ad61d8ced79e455c', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'ab586d7a24a27925c1255f7058d433f9f1141779', 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: 'fadeaa4cbb32652db24fc0844ec9a0f770f7fe16', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '744110490c959ce89a68f70ad8e484a6aba0ab95', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '0c4dada7935a5272f087869853ef95be215e2454', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'e9ce30612c7e77b4b5291257a02ed4375be729b2', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'acc0c95285c70f2283a07f237e1d12dd7ed28bd0', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'b86c87194dcc3e344783bc620bce33c032867994', value: ["ascending"] }, h("swirl-option-list-item", { key: '5d7ddc09c163937edeffb9a85624df07e4ec8cdd', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'efa8be331e423a95783b1e81e01200c4fe3de526', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'f924d4f294bc23cd5ad118bbe0fa029b0d246680', 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"; }