@getflip/swirl-components 0.232.0 → 0.233.1

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

@@ -0,0 +1,127 @@
+:host {
+  display: block;
+  flex-grow: 1;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.tree-view-item {
+  list-style: none;
+}
+
+.tree-view-item--active > .tree-view-item__link {
+    background-color: var(--s-background-hovered);
+  }
+
+.tree-view-item--has-tags .tree-view-item__tags {
+    display: flex;
+  }
+
+.tree-view-item__children {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  gap: var(--s-space-2);
+}
+
+.tree-view-item__link {
+  display: flex;
+  height: 2.25rem;
+  padding: var(--s-space-4) var(--s-space-8) var(--s-space-4) var(--s-space-4);
+  align-items: center;
+  border-radius: var(--s-border-radius-sm);
+  color: var(--s-text-default);
+  background-color: var(--s-background-default);
+  font-size: var(--s-font-size-base);
+  font-weight: var(--s-font-weight-medium);
+  text-decoration: none;
+  gap: var(--s-space-4);
+}
+
+.tree-view-item__link:hover {
+    background-color: var(--s-background-hovered);
+  }
+
+.tree-view-item__link:active {
+    background-color: var(--s-background-pressed);
+  }
+
+.tree-view-item__link:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+.tree-view-item__link:focus-visible {
+    outline-color: var(--s-focus-default);
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.tree-view-item__link {
+    font-size: var(--s-font-size-sm)
+}
+  }
+
+.tree-view-item__icon {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: var(--s-space-4);
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: var(--s-icon-default);
+  font-size: var(--s-font-size-lg);
+}
+
+.tree-view-item__icon ::part(icon) {
+    width: 100%;
+    height: 100%;
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.tree-view-item__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: var(--s-font-size-base)
+}
+  }
+
+.tree-view-item__toggle-icon {
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: var(--s-icon-default);
+}
+
+.tree-view-item__toggle-icon ::part(icon) {
+    width: 100%;
+    height: 100%;
+  }
+
+@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {
+
+.tree-view-item__toggle-icon {
+    width: 1.25rem;
+    height: 1.25rem
+}
+  }
+
+.tree-view-item__label {
+  overflow: hidden;
+  min-width: 5rem;
+  flex-grow: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.tree-view-item__tags {
+  display: none;
+  padding-left: var(--s-space-4);
+  align-items: center;
+  gap: var(--s-space-4);
+}

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

@@ -0,0 +1,300 @@
+import { Fragment, h, Host, } from "@stencil/core";
+import classNames from "classnames";
+/**
+ * @slot slot - The children of the tree view item
+ * @slot tags - The tags of the tree view item
+ */
+export class SwirlTreeViewItem {
+    constructor() {
+        this.onFocus = () => {
+            if (!this.selected) {
+                this.select();
+            }
+        };
+        this.onClickCollapse = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.collapse();
+        };
+        this.onClickExpand = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.expand();
+        };
+        this.active = undefined;
+        this.href = undefined;
+        this.icon = undefined;
+        this.itemId = undefined;
+        this.label = undefined;
+        this.expanded = false;
+        this.hasChildren = false;
+        this.level = 0;
+        this.selected = false;
+    }
+    componentWillLoad() {
+        this.updateLevel();
+        this.hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
+    }
+    async expand() {
+        this.expanded = true;
+        this.expandedChange.emit(this.expanded);
+    }
+    async collapse() {
+        this.expanded = false;
+        this.expandedChange.emit(this.expanded);
+    }
+    async select(focus) {
+        this.selected = true;
+        if (focus) {
+            this.link?.focus();
+        }
+        this.itemSelected.emit(this.el);
+    }
+    async unselect() {
+        this.selected = false;
+    }
+    updateLevel() {
+        let parentItem = this.el.parentElement?.closest("swirl-tree-view-item");
+        while (Boolean(parentItem)) {
+            this.level += 1;
+            parentItem = parentItem.parentElement?.closest("swirl-tree-view-item");
+        }
+    }
+    render() {
+        const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
+        const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
+        const className = classNames("tree-view-item", {
+            "tree-view-item--active": this.active,
+            "tree-view-item--has-tags": hasTags,
+        });
+        return (h(Host, { key: '177446baadd42d3508d8c3fead6b179e26feedde', id: this.itemId, role: "none" }, h("li", { key: '72d29bdca3bbb72f398e4d481bdce1f2ce70b0a1', class: className, role: "none" }, h("a", { key: '6eb8a17c4b7982dd3445b9c7f24ecbc80a621ec6', "aria-current": this.active ? "page" : undefined, "aria-expanded": !this.hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": this.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-4))`,
+            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, h("span", { key: '72ab5ef8765690990f04bb76d7dc610b4ae18f3b', class: "tree-view-item__toggle-icon" }, this.hasChildren && (h(Fragment, { key: 'b6809cfdd91b53eb4d37c94ce899933daeb85020' }, 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: '040fccdd39595e4988b515257cd0a7fdb62a74e1' }, h("span", { key: '9a8121ef9e3b7e5a508345259550216ed02e6337', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24 }))))), h("span", { key: '113f4b3cd34284bd6c0b022f8ca3d0fc8e28a5a1', class: "tree-view-item__label" }, this.label), h("span", { key: 'b3b1efebbaf2b6e254d90570fba4ce61c5bd979b', class: "tree-view-item__tags" }, h("slot", { key: 'f27e893394cd489ff21a36651b5cac353fbdf78e', name: "tags" }))), h("ul", { key: '3618fcdd7471c7642ed5d1aa566d9ca7615b9a6b', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
+                display: !this.expanded || !this.hasChildren ? "none" : undefined,
+            } }, h("slot", { key: 'caa44b704e4de4d2dbd6a297830d2d3d9453038e' })))));
+    }
+    static get is() { return "swirl-tree-view-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swirl-tree-view-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swirl-tree-view-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active",
+                "reflect": false
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "itemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "item-id",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {},
+            "hasChildren": {},
+            "level": {},
+            "selected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "expandedChange",
+                "name": "expandedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "itemSelected",
+                "name": "itemSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "HTMLSwirlTreeViewItemElement",
+                    "resolved": "HTMLSwirlTreeViewItemElement",
+                    "references": {
+                        "HTMLSwirlTreeViewItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLSwirlTreeViewItemElement"
+                        }
+                    }
+                }
+            }];
+    }
+    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": []
+                }
+            },
+            "select": {
+                "complexType": {
+                    "signature": "(focus?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "focus",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "unselect": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,66 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SwirlTreeViewItem } from "./swirl-tree-view-item";
+describe("swirl-tree-view-item", () => {
+    it("renders label and ID", async () => {
+        const page = await newSpecPage({
+            components: [SwirlTreeViewItem],
+            html: `<swirl-tree-view-item item-id="item" label="Label"></swirl-tree-view-item>`,
+        });
+        expect(page.root).toMatchInlineSnapshot(`
+      <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));">
+            <span class="tree-view-item__toggle-icon"></span>
+            <span class="tree-view-item__label">
+              Label
+            </span>
+            <span class="tree-view-item__tags"></span>
+          </a>
+          <ul aria-label="Label" class="tree-view-item__children" id="item-children" role="group" style="display: none;"></ul>
+        </li>
+      </swirl-tree-view-item>
+    `);
+    });
+    it("can be expaned/collapsed with children", async () => {
+        const page = await newSpecPage({
+            components: [SwirlTreeViewItem],
+            html: `
+        <swirl-tree-view-item itemId="1" label="Label">
+          <swirl-tree-view-item itemId="2" label="Label"></swirl-tree-view-item>
+          <swirl-tree-view-item itemId="3" label="Label"></swirl-tree-view-item>
+        </swirl-tree-view-item>
+      `,
+        });
+        const spy = jest.fn();
+        page.root.addEventListener("expandedChange", spy);
+        expect(page.root.querySelector('[aria-expanded="true"]')).toBeFalsy();
+        await page.root.expand();
+        await page.waitForChanges();
+        expect(page.root.querySelector('[aria-expanded="true"]')).toBeTruthy();
+        await page.root.collapse();
+        await page.waitForChanges();
+        expect(page.root.querySelector('[aria-expanded="true"]')).toBeFalsy();
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy.mock.calls[0][0].detail).toBe(true);
+        expect(spy.mock.calls[1][0].detail).toBe(false);
+    });
+    it("can be selected/unselected", async () => {
+        const page = await newSpecPage({
+            components: [SwirlTreeViewItem],
+            html: `
+        <swirl-tree-view-item itemId="1" label="Label"></swirl-tree-view-item>
+      `,
+        });
+        expect(page.root.querySelector('[aria-selected="false"]')).toBeTruthy();
+        await page.root.select();
+        await page.waitForChanges();
+        expect(page.root.querySelector('[aria-selected="true"]')).toBeTruthy();
+        await page.root.unselect();
+        await page.waitForChanges();
+        expect(page.root.querySelector('[aria-selected="false"]')).toBeTruthy();
+        await page.root.select(true);
+        await page.waitForChanges();
+        expect(page.root.querySelector('[aria-selected="true"]')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,23 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-tree-view-item.mdx";
+export default {
+    component: "swirl-tree-view-item",
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            page: Docs,
+        },
+    },
+    title: "Components/SwirlTreeViewItem",
+};
+const Template = (args) => {
+    const element = generateStoryElement("swirl-tree-view-item", args);
+    return element;
+};
+export const SwirlTreeViewItem = Template.bind({});
+SwirlTreeViewItem.args = {
+    href: "#",
+    icon: "🪁",
+    itemId: "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: '5bd9a490f2c97390886321c280a2988a4ef698d0' }, h("button", { key: '8364b72dcbfc56d66fd2e7cbd30c8579b64e3e7e', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '9007cc6e6dbd634e93fe995b19f559eacd00574a', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '31cd361f021f5863e0143ccee2cb6ae72d6ac213', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'd517d30b34ecbcaf255e6c335e663bebeac93df2' }, this.durationLabel), this.duration)), h("svg", { key: '45028d168793277f212e86c887879ca50d7f1b69', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c7675ecd1bca43fad3ae2bd6ac3e4198ef0ec2b0', 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: '684edd972d557cc5802faf12d68a39c840d34031' }, h("button", { key: '65eb5646d91cd405b87c932b92b00365501c4974', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '08cfb230f06c5ff59e66a0a0889dfc42ebfa7173', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '47e734e3eb8502484ff75b70b40bc898e86a5d0b', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '072d38dae3171d13d3f3659a56bd81c68ca857db' }, this.durationLabel), this.duration)), h("svg", { key: 'b2101678bd8ff47ccc11cb807d863599129ff018', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7d4ad04198b7c65616acd6e89288cc51baa5c99c', 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: '9b198c65730026a5e11513ff742104234ff0c1a7' }, h("slot", { key: '9873becced8ea85ffccdfc032163bbbe53df8fc6' })));
+        return (h(Host, { key: '85adc71e753de16a93f0110be0b49a9eb8be1ea6' }, h("slot", { key: '491582dfecab0bcf9dbb4821d346db75b9e2f8ca' })));
     }
     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: 'c0eb98fdfc638cc1dcb06483b59c34073ba54552' }, h("swirl-app-layout", { key: '556761b8d4f4d437ae0985c790a22e60c9315f1d', 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: '39885e858c41e429cab968112aa7b984f9705ea2', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '77c6ea5fe1b94028a5695e9d9ee632c36531fa0d', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '44c5aaa2536049f775c618dce507b3958e7cdd2a', label: "Sort items" })), h("swirl-stack", { key: 'f67fa0a23d84b5d8ee934abc92ca510d566a9ca8', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '6db42bf7b5f71cf829392ad4a0c93d8dd715180f' }, h("swirl-heading", { key: '8f78f58b16624d768574ca3cf210c8caae1207fa', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '8a08ec5e7ebbcf1b186a74782efe4e2255fe36ee', 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: '6c6e485139d39df02ededf75d8a8e6b010df2bb9', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'dae62a4ba25cae3853b62d81a000fed470e1ff2d', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '815594196ba28b9e8e434201d88dbf5a6dd85a87', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '3afe3f3e24a5b5462e9f6881c61522e1478c849f', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '9f2e84faef9a03e396c1dc668f330d2622c7697e', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'bc6a5c70fe046c88bab5464e7df49d3a20b3feb9', value: ["ascending"] }, h("swirl-option-list-item", { key: 'ec52b57885f7c33ca477ef8f6a505f57b31a6683', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '56e2c341fe923eb943777655d687a6410224a1d3', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'd51a2dbf1785bc86823b72c36facc0c2427b987b', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '3eff9c0bba9c10b143916cb3d00cedbc5bcfe050' }, h("swirl-app-layout", { key: '85f69e777a24d3362bc5eed4d724c54e1326c845', 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: '98d7da7702fdd4c4accb0e8249f2ccc5ecf55e29', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '16eb5271929830c6715f18b63b63588df73c11fe', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '59b711996f00146f8759376e8b8cabafcc76920c', label: "Sort items" })), h("swirl-stack", { key: 'c282643701ea09f60ec3eb79a703e9e4d098fbbd', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'bb0a446b2eb61a634ea0d791a87ce5d9f3ba6e0a' }, h("swirl-heading", { key: '41445130a7b9024c35db0df369c9ad5985c23a46', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'e159850b75591af14e56cdfcebbb270acb545add', 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: '56527b6068e3e6af690b851c1ee405f2e6561ed3', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '91be84a2271698f308c09b8dbfcfa9fdb0c67d41', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '8d9dcb8e0b2fa44fa7a57892edbe262150f0750b', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '9958d84992b0dcf5a079d924b6e3e02bb2b8f544', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'f5ceccc29d6488b528b32d363511731a38688a80', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '736355e26ee48634d7a6005b235fc9c5e0940746', value: ["ascending"] }, h("swirl-option-list-item", { key: '8f256bc83e158f1eb51b5e0d749a85fbba94eff1', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '03092be4c5bf6c3363b95b06304a834c991d7cf5', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '21a718300bbc7ec8092a0c2c97844e56493f44cd', 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"; }