@getflip/swirl-components 0.451.1 → 0.452.0

package/dist/collection/components/swirl-table-row-group/swirl-table-row-group.js

@@ -38,10 +38,10 @@ export class SwirlTableRowGroup {
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (h(Host, { key: '7cc55b1cf9d7fd1a0c069836266e80d17115d451', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'c3b38c0c62f4e3a17ea1e2e35f1ede89b4759b70', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '483c6365c5ecb35304f888e668bf0bca42dd3e25', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: '00297ac1be663ff719bd0680c9df531600786cdd', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '8927be63f4b95c365d4d7cf08e14d7ddc2c9f197', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '7f75f00ada972cc5aa61492da53e01af3cf6a6c9', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: 'a69ba83d4a7a716ab9698a58d3f6f3dc6ced95bd', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '61c51c1aeac12fbb2e7d5b38a1448cf49cef5d7e', class: {
+        return (h(Host, { key: '9c64072aa6c4933804b6ec29064a78d777d0008e', class: "table-row-group", role: "rowgroup" }, h("div", { key: '990fc7996c24fb87b543975cadaa22cf19f3446c', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '826259750ef20a11f52759fcf5ea1f07b36ce097', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'e85078c1ea7a80de1baef89fd62d1a2ba8188790', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'aaa59af836b2024135f85d0ff3186ab5a6df7c8f', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '6de8836454df5a67fc965e6095a3cdffb22a2476', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: '9f6ec1180c714c2e3420b32f187c9349951f1a6f', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '6f67bb9f4e97faf90b84261a412e56ae1ce86cfa', class: {
                 "table-row-group__rows-container": true,
                 "table-row-group__rows-container--is-hidden": this.isVisible,
-            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'dcd21ea42cf8be621e62f928da4a743e14ce7d7e' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'a487d3d9dc54f73c1c60a76d980992142b3559a1' }))));
     }
     static get is() { return "swirl-table-row-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -70,7 +70,7 @@ export class SwirlTabs {
         }));
     }
     render() {
-        return (h(Host, { key: '3c69bacc381913038ae39788bd65279ae3b05f99' }, h("div", { key: '8b55e1b9b78f29b93d1ce75b734dd1548dc12d06', class: "tabs" }, h("swirl-tab-bar", { key: '440a595970ac38aae0982224c3fe9f43cb75a323', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: '0877159e63c802bad45f93016ff7247878578100' })));
+        return (h(Host, { key: 'e643db828da8907ed5b71e9b3aeafb1859540b5e' }, h("div", { key: '4a2ef8f5ff1214718747f3ade1411967d00e9e6d', class: "tabs" }, h("swirl-tab-bar", { key: '91fda1ba09e5b2e7b918c27ba973142615bfba4f', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'f1f616e1a6b2ae18abe8a19bdaaba79dba9c2b2f' })));
     }
     static get is() { return "swirl-tabs"; }
     static get encapsulation() { return "scoped"; }

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

@@ -144,7 +144,7 @@ export class SwirlThemeProvider {
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: 'fefdc5cefaea45d80da429da2abc4b370a162c7e' }, h("slot", { key: '354717bed5f64caf726803a8eb6362eb5247ff4f' })));
+        return (h(Host, { key: '24f362137b85574390684da5cc51ccda9108b63c' }, h("slot", { key: 'b9ddf8ae18d3f0c21e9866e5732024d9663b9f03' })));
     }
     static get is() { return "swirl-theme-provider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -161,7 +161,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '43058ce1fa97dbc5cf73086a5acd828a88328aa5' }, h("div", { key: 'a4e1bbb9fc7eb6606dda7188d1e72a21102107c8', class: className }, h("input", { key: '1ad135fe74ea2b1b689fb6ba1de56d559cad7d0a', "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, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'd066aca8ce3c3f094062b0bb2a3956eb9e08409e', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'e15099d26bfea37c564b12bc070d0a0748569e9b', size: this.iconSize })))));
+        return (h(Host, { key: '667391bfd2d4707cc993cabba7419118ee01c909' }, h("div", { key: '02a921a42ac7088a4ec9266eefd3579439484b22', class: className }, h("input", { key: '376cba426422a258901766eb86f2ac0f633e6b8e', "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, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'efb7b4d169ff054295edaf1c56f311801936b866', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'ab00481e8aadca0fb08adb930f3c91f19cfa6db2', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-toggle-button/swirl-toggle-button.js

@@ -11,7 +11,7 @@ export class SwirlToggleButton {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: '52ab21d13cc1c06a88384fd740a5b420df848033', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '91cbb63a08101376eb94fcd69345324e58bdd7fa', class: "button__icon", glyph: this.icon })), h("span", { key: '60dcfc3d532b8132c2f6b0eff07d4a67a27c0316', class: "button__label" }, this.label)));
+        return (h("button", { key: '6c77cfd5c4246d9e45e3616e9acc67262b25da00', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '6bc9adc920cca40a506672c204caf0797c7cda39', class: "button__icon", glyph: this.icon })), h("span", { key: 'b3963df5a627452a1909eea47c17af086ba4643b', class: "button__label" }, this.label)));
     }
     static get is() { return "swirl-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlTreeNavigation {
     render() {
-        return (h(Host, { key: '822dbb6a9d4e0ccaf55382b5261eb2f83b4efca3' }, h("ul", { key: 'ea95a444de28843f4216e652eb13fa6a4dab9e9c', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '02f11c6c69c9a6aecd5a71ad2deb1225c2d59256' }))));
+        return (h(Host, { key: '963f21436dcefe700edda5a51bb47ecb96d157a2' }, h("ul", { key: 'ded974ad31dc3f0263104f1253e3ea5984671a2a', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '199479065b1e6488301b32ad861c56c44a0cd7be' }))));
     }
     static get is() { return "swirl-tree-navigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,12 +83,12 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: 'e31790f85ddc51c583a78ee97f11b61afc9aa297', role: "none" }, h("li", { key: 'afff0a187478350500669ee61460d61f139d656d', class: {
+        return (h(Host, { key: 'ef555e1190309d743e3f0480ae3e5742f2ce5582', role: "none" }, h("li", { key: 'bb66b52e97352abdc8f6a8741b796530d977000c', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: 'ff2e63fed47e0706613c587651f9724615e03aec', 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: '4fd8fa042c5767f4815b3531c25fb27df778a5be', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '7818b0dcaa8a7322a857c6b6e6d3625750899e89', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '1dade3a94256cc382532bec5e52b1147dadeaa9e', class: "tree-navigation-item__label" }, h("span", { key: '945671b0430d240f1f60a3706b97617d41f86735', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '031d2f44a8c4784964c862fd776fb40cc27d1d86', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'f0c598f79ea12dcfd05821569f1d2ec975ee5bbd', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '1563fd9956a23818ccd6d6ab913b6b0f61627cc1', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'fecf85b61e3aa49c51231a855e90131011b8d6a9', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '3ebe7d3c9ee4cc9c23cd06f4cb90dd1d9c9217fe', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
+            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '3461f2115facf88d5c23596c7512a2bd4d81e307', 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: '2d097fd43c46c6bd6ec23b0c027d3b06f48d144e', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '43348c7691cb6893f8f930d339da5c873ff371e1', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'de1915616ffa64c00430b1e891c1d6865442edb7', class: "tree-navigation-item__label" }, h("span", { key: '61b7cc19916f85d75a500e95ea4b11e2224ae848', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '4ab27dcd073eebba0710388b1a3d172b2f847d2b', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'b31126f7301680362d37ed17b7a1dc8c20580e36', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'bedf1a8d048718ffdf55212fc3bc8b8811bac28b', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'dd4fe5c2f99b905898c54d2d18d3bb7c9c2ce7ee', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '38a3c11afbc6e5e389515346713b14421793ebdc', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, h("slot", { key: '083e638c4416e16f8aee007d73ae953bb6b41bd1' }))))));
+            } }, h("slot", { key: 'cc7005bfa4640372ff408247e8d911ae6409dac8' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class SwirlVideoThumbnail {
         this.durationLabel = "Duration";
     }
     render() {
-        return (h(Host, { key: '87027df2147bfcbdb660b06129157e2816d21b8b' }, h("button", { key: '15f418041c9b32c66b039905c413374d9d8bfa81', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '5ec75d23e69f3c0a95e4f71102d3e2bb6899ab16', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '47772a4530b7cbfc249d1192f9b8c3a33352402e', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'dc84332e0f08e0ae1d7a6655f736ce905c2bae91' }, this.durationLabel), this.duration)), h("svg", { key: 'fd9dfd33936aa50e70af003ed2dc7aac44d894f1', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '39c457651a2d4e826273b74a33c73ae291ff16b0', 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: '2723ab9658123c41381185704cfc31d685fb41e8' }, h("button", { key: '9549b1e7cf640b62e95ad98dfa8e7a9c0c39cef8', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'e8a81ca23e5227a31b8cf1a4bc26f31a9d5199d5', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '56e2a51f27294fa0db2165e984140e2266ad8206', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '1dbd9765915f7753e359499f44f3a8a435f473cf' }, this.durationLabel), this.duration)), h("svg", { key: '1a8b9b50af6a018e8189bb5c86d3bd3029e004fa', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fbeae1c95f401282312454254169cb4519c621ee', 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: 'fcc909ca5849f4ff62bafef39851bdf7bac30a1d' }, h("slot", { key: 'a46f3a22a6f8492f7bbf6d53de37b5108a8f5a47' })));
+        return (h(Host, { key: 'b854431ec1e7f8a9788f6dc84a09334a204be135' }, h("slot", { key: '56212ea4f12d8f865b72f8555aacd3b516dfe89a' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

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

@@ -53,7 +53,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: 'fd989aecb834570b60b336dba383a34a5162b289' }, h("swirl-app-layout", { key: '20b27383eafadb112957a610e0e001755ca9bf9d', 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: 'ed1b8c8a3e2240d15661304a530a45eb6449306d', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '8b67d909f79911d7aca6d0b1740dd17536e4db1d', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '2193d8611a6239f875cd807fa2d246f164366744', label: "Sort items" })), h("swirl-stack", { key: '76e2ce0dce1deceec81b1015290830ecaa8159d1', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '47c6a5588f52aaf2bfaf0cdafc4b3a149d6224f1' }, h("swirl-heading", { key: '47c170ddd2934a7233fa267078daf129defa72ef', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'ffeb2c59c1c86481b8e1aa205b0a8490d39e6c5b', 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: 'c07cd81bf1ee0681c7db5e5f84b94314806fca37', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'b14e1f6de4103b95f4c67d598c2a979916086dab', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '8e0fe005c3b025af6fb67c64792a83e497b8b729', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '85c018c88e9e83c32efedb6d12a872689b209d86', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '7e78c972f71a8ef2ed996684e0752d662a9ce1a5', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'ddd8de20d72a7699111468309e7119ecd9ab10d0', value: ["ascending"] }, h("swirl-option-list-item", { key: '401534e3f4c9e1c75b37386ba3704aeb0f9cc41c', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'a6bc93c30b130ff301446606c26c379df8e9217e', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '0c2b79d44043238ceacecd7df7a7a1a352059934', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: 'b7d725d87c05e9d858c30989bc811b365ec28e0a' }, h("swirl-app-layout", { key: 'b21d2e588da898780111825a01e0b99adee0b482', 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: '49e5e60f8cb1b051258f2694938f87ddece9a72b', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '4d5175a546cb17deb342ca04ad1703e1af6fd537', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '8a4c5402eb0c629d7cfd3a3cc61d6be5717b6db8', label: "Sort items" })), h("swirl-stack", { key: '27be28058e769a00e1c21691b3731ca8e80babdc', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '0ae2418193ef8fa8bedc8dd23ec540a3499d73c6' }, h("swirl-heading", { key: '1902070226fa0b97d184d5b25182fa84ba22caee', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '6ced885f868028bb013c0cd882003e2a64b2bf0d', 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: 'af9881b4ba2da8859d6dddf75e327df9c9517734', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'bfddbfd1305a95c337546ed43e1e57f4e96e03f2', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '11f23d99b1cd428b6833ce390b26f0ee3291adad', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '0dc205a2a1c073a61a30bc7b4dc762893be2e952', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'b22940d19a183192cbe76a2de61242354ca5bb03', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '8e9c168e52f0ac8aa75fde180a741957931e9d6f', value: ["ascending"] }, h("swirl-option-list-item", { key: '36cbe37e54f79af5b0d9c62e8ecb8f5292139762', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'f46d3b99b4ff6e421cc3dc2492ba2c962504a7e8', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'e902f75a1ff18b13b5ef98641fb2608bba764031', 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"; }