@getflip/swirl-components 0.205.1 → 0.206.0

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

@@ -21,7 +21,7 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });
-        return (h(Host, { key: '8692ee74e68449714b38624068b752b6161d5797' }, h("span", { key: '4ab8f19328c2f4c709f0cee1cb5b66a46c2b1995', class: className, role: "group" }, h(ImageWrapper, { key: '865c97c657654115b45c1fb8b56e25991929e244', class: "thumbnail__image-wrapper", type: this.interactive ? "button" : undefined }, h("img", { key: '327eed3af1c571292c7d990d2c3c0f4897dd3ce0', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: '34eb2fcd51dff98463568bedec7d1304a455d28a', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '64527a842053083bf67321400382b5b6e2ca1867', label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { key: 'dc9492d8753140e87bd0f1ab6972dac842bfc273', class: "thumbnail__remove-button" }, h("swirl-button", { key: '56a9d205434856073471b0fa47fd9d73e1814fcc', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { key: '0adb76f35e7b9b147d573702e3f7d805cc3c9f75', class: "thumbnail__timestamp" }, this.timestamp)))));
+        return (h(Host, { key: '762bc0e3b9f5bf8c641c20ce724884f77fb830e5' }, h("span", { key: 'b1888e8d10d3b5cbd6787d0cb102861cf39b0de5', class: className, role: "group" }, h(ImageWrapper, { key: 'ded5cbfccd6b9893ba64f98afaad0f5668782e9d', class: "thumbnail__image-wrapper", type: this.interactive ? "button" : undefined }, h("img", { key: '6aa0faf7b5cfcae5ffb5aaca57d6bdcf3b6489ea', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })), this.progress !== undefined && (h("span", { key: 'e944d596104df7ede831033d0deade80e71a7ab6', class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '94756917e48834294270031b33f874f49971ea2e', label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { key: '48d405795e837030ebd2b7e77e417202494c77e1', class: "thumbnail__remove-button" }, h("swirl-button", { key: 'd31f62a21d3ddef23d573c2180b53a2ad99885e5', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { key: 'c9382b433ec7a94fd202d1fc23603a12d8d67a8d', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get is() { return "swirl-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -117,7 +117,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '63cd2f81fb3450ee960eec0311725f9715868ffc' }, h("div", { key: 'd72d49559fd8a6bd53ed4664821ac83a4bd9c7c9', class: className }, h("input", { key: '6c56bec847fd5ad9f0f0adf625531806792434ca', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: 'f1a473485af7650df595a1543e815aedc3201e8d', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '19364c42d895723db6007b9a22858626b97a645e', size: this.iconSize })))));
+        return (h(Host, { key: '12c63b96d660968f5b732222118a3693129132a3' }, h("div", { key: '77251862c08ca2b91b0d609c0c397954e5e18462', class: className }, h("input", { key: '3809a5ea86541c1636fea6b8e243e7a3fe3ba966', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: '226e7bf8b7aefd292cf6d3c882b237cef2287873', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'ac72d113dfcbba44a3d11fb53c96369780331aa7', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-toast/swirl-toast.js

@@ -53,7 +53,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`);
-        return (h(Host, { key: '44c0e7c5caef9346a5aab20d61b3ca6f524b9bb5' }, h("div", { key: 'e9fe678eef8ee633009d9943e165f11c169fdd21', class: className }, this.icon && (h("span", { key: '459f13f5bbc4a58c9300bf8e496af4ea9a504dc4', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'c4968c38176aee26ca4a63d6b3963b9b6860cd1f', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '8c7da7b6491f02145bc63684fe3f9aead9b7ef6b' })), h("button", { key: 'c749ce63db5cc48f5734957b52fb5b82fd76b002', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '28b36e7afd397f18d4b76ddc74daca78d31a7af9', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '921ff1d7869007a8bfef652310d255941d24c088' }, h("div", { key: 'b50440dbd7a8c917d0220bca3a42146a6ca99efd', class: className }, this.icon && (h("span", { key: '6971954911e9077a5114db40f464c7078800a692', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '05a9fc0cca75a4839ea2b5fa2316afda4e5702bf', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '60d16baf8f4a7c53994349ac42a80d4632d055d1' })), h("button", { key: '2ab3ae0c7b6e685d69f97e17f6f2a59ceeff493b', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '025c972db050fca597c00b9920905b788993994d', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js

@@ -49,7 +49,7 @@ export class SwirlToastProvider {
         return newToastWithId;
     }
     render() {
-        return (h(Host, { key: '336ab967756993cdddef8b82c5df8679d413adef', role: "status" }, h("swirl-stack", { key: 'cbe539dec76ac6c7f21a45adbc6257bd24da108c', spacing: "12" }, this.toasts.map((toast) => {
+        return (h(Host, { key: '6a80302e6c239afdd65909cb335146e4971a1fa1', role: "status" }, h("swirl-stack", { key: 'd966f4578e32bb6771facd589718367516221d46', spacing: "12" }, this.toasts.map((toast) => {
             const props = { ...toast, content: undefined };
             return (h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
         }))));

package/dist/collection/components/swirl-toolbar/swirl-toolbar.js

@@ -66,7 +66,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: 'a3c4eb79f0d8b117b341efc10a786637fd779280' }, h("swirl-stack", { key: '40b557fc51a8076a242c858814cd06d8be851470', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, h("slot", { key: '992538241f2b3c1af5b6e43344c40fdb163cc8bc' }))));
+        return (h(Host, { key: '5df7c943ac7df8f09fc8b1d45f4d56857cbfb2f6' }, h("swirl-stack", { key: 'c21b170cae85b76061ed0c1206f49f54bf69a4a2', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, h("slot", { key: 'fd1acd8fbe00fdd09ca9c403fe1276405f81caae' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tooltip/swirl-tooltip.js

@@ -96,7 +96,7 @@ export class SwirlTooltip {
         const className = classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '439c818a49a55fa2406b41fa167f56c41f23be77', onKeydown: this.onKeydown }, h("span", { key: 'b6bde44079615456d5608902120a13e4160e6ff6', class: className }, h("span", { key: '9ba46d08fa9595647595c7b197233b92f86d2774', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: 'bcb14d7117697ad1260fd85c31cd354958be900a' })), h("span", { key: '099aa66cb293a5f653851e131cba3cff51be72ea', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '978135408aa2f9134dad3f15e1bff185e90557b5', onKeydown: this.onKeydown }, h("span", { key: 'e72b3f2aa40f14a04cf274a39d7b8f6a2dbdcbd5', class: className }, h("span", { key: '556e530c9eec0390e75c79ada25e51f9e1824bed', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '62653d76b03bc1d2c0e99c2d9a0f2260dd421359' })), h("span", { key: '3b3baf02b091b9a2eeba3511d8cac32d8c9bd29f', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -104,7 +104,7 @@ export class SwirlTooltip {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '75719accc2de267f5bb0b9edb81e521880b320ca', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'd6cb38268148b8e6fb3cfce4b62f7a68b4e0b08b', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '1b26897acb27c52dc577bbdd68afe23d37adf390', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: 'd4445b6c16fdb2c674d8386bd94149a467995272', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'b374a803fc9342b6594951acb940976515abf2f4', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '3180c72b3db823fde79cfa27b2553921cd7d0351', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

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

@@ -15,7 +15,7 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item--active": this.active,
             "tree-navigation-item--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '857640a6c05be89f758a2e33a642aa4a2a28d0b3' }, h(Tag, { key: '0ed6912fc566364a30f86d8a1f4e6097cb5a6a9b', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: 'c450ce32e4670f2e81f898d4e556c71a559a112a', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '98954816a32fcc4f66c0b0b2c9f7c8f7083c37c4', class: "tree-navigation-item__label" }, this.label))));
+        return (h(Host, { key: '7ddc5484de3974b6ba0f02480c4febca63a3d134' }, h(Tag, { key: '4fcfb1294ee4adb399510c286cfd82b6fd9f2d31', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, this.icon && (h("span", { key: 'b3d57d4466e3bc26b524e9833669f6032ab1766e', class: "tree-navigation-item__icon", innerHTML: this.icon })), h("span", { key: '9e163b143100d08bdeb6549046fc4f5e4b092b64', class: "tree-navigation-item__label" }, this.label))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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: '7c2c39313a9ff99a6babd9818c42dd5de2eb7455' }, h("button", { key: 'f800050437934597da8c7278b1be332c3879a3b6', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'daa287d193597c6af0d884bfb1de54a061c83fa1', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'a7948ab9738f68967c99324af5fc519b18952afd', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '1df15e1ceab8f7857f101b86867a4bc84326f591' }, this.durationLabel), this.duration)), h("svg", { key: '4d722314c5d643d2e90e9a2dd9d0201073c334a9', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '99332a84c070ec53508781242b8f4d29ffa02c91', 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: '3dffbe79a9ff85b7c69e573410428d8b0caf54d4' }, h("button", { key: '9ea6bbebf31e4f993a7d6964efffc81044b98e87', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '48ca32db5a99fee5198804ac7c023da299e67365', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'a775ec375b552bd20544957438d932a1ff308370', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '1eb952d1c5ab42d085880e7e6ae348285c262bd5' }, this.durationLabel), this.duration)), h("svg", { key: '3e9857365d77db5b3b8b3e1b1905513a0a488ff1', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '15f7cc8f6ff50d50c6b2cf11a32bfc52d2522e8f', 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: '2c094549e777b801c9e2d0bddfbde8c5787f252c' }, h("slot", { key: 'fe905f0c08f1d715ed10e11e42781c9e460712a9' })));
+        return (h(Host, { key: '6b7517455790ae85af1efd3fcdf46b91796f1740' }, h("slot", { key: '04f81fd11fa2e63208eea215a3267c359ec4a113' })));
     }
     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: '06b1a35170a0d5e7eed6a01b10ff22bf68f24d9b' }, h("swirl-app-layout", { key: 'fa020b69c7cbaf714f692fa27caef64c9a37ac42', 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: 'db601a3717dfc4eed1aaa956e328193981532514', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '2d6fca2df68e87efa1e834edc715f734c45570d7', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '5ccfbafdb31fee59a5e267d6899e68883874f91f', label: "Sort items" })), h("swirl-stack", { key: '247e250dc87a7db010bd8635e085ceab7ddc8909', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'd0cb698bb99d45e97f1162ba80a2731860bae237' }, h("swirl-heading", { key: '01e4079741cae58e51d7de3408bfb70fee3c15cb', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'ddc796862ba1d343eab3b8ec2879723b1750c57e', 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: 'b9e0506033cc69c323e5ae656ed6adb8e9297f02', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '709fbfe2ca572328f4a9f5e31ab881c79087a6d1', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'b46e9ff6f5e31cdc7860644fd134fa94721f2730', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '59bcc4b1762cce943f136ec855a1377ee1ce2fce', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'b05ddb70bf0f33921372c157e4c3126b009b84a9', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'c95585d27da38acf84540018f46ea1b8461eb26c', value: ["ascending"] }, h("swirl-option-list-item", { key: '5e745e373abadd135da430bc8c7c7027b0ff95c1', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '03729a8125d53b2d9cda45535ae8443608cb4ae5', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'c0700fae849f238ba9157499074e25d6e9acd4a1', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '5fef3d9788b5c227a0be70d61d1c5cf7b179651c' }, h("swirl-app-layout", { key: '8f9b26b5930548ea71c330d1b143c05efcccaac0', 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: '8d3cb59d203891143ee5af13fdb50e1c3bdbe90a', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'd29e6c471c41e85a80533d6206e44a29f433f195', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '0a796450c46e29910e5863c7c1fc6240c1ec58ee', label: "Sort items" })), h("swirl-stack", { key: 'ac19edecd0b2e04cd541406192ef3e850a41c221', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '5048f7bc65df1a54c425cef1d43adbbe259bfd88' }, h("swirl-heading", { key: '231c50277175e6f02ee3e6acb66e4b7730f5db13', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '30c5b4c277560b1a0af01a4e76a8c72ffecd73a0', 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: '036c09769f2e9635a8d5ab5e65928138142ed8e2', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '3fc609b8c8be5d0299624e829eb9593c18b44ea6', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '4bcf8d4a50729cb504c239a08c1b0d964555f8e2', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '662eef693225f4d309d17f0a1f2550cfdda1473b', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'e452846619e5179ad9b28db0ae26dcd85bf0465d', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'e3dad94a02251cd2c69572f93e18bcc2161b13c8', value: ["ascending"] }, h("swirl-option-list-item", { key: '74e2304ff02b2faf5ef6ccab390e6714f3245b56', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '4ed43ed7109a5f42b5398e6f525cf10fc0c30216', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '3af74d7ad87629be9a95a40ff45b3759e642f13d', 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"; }