@getflip/swirl-components 0.442.0 → 0.444.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: '5875f8fa2a75dfe9b1fe8ff4a01dee64c8701207', class: "table-row-group", role: "rowgroup" }, h("div", { key: '9f61950d549f28432f9d8967900fbb165c806b13', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'fb336bd5cf3b295c613d90d8d33ad5065df3db6a', 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: '463398babb6d5291c58d0ef1b8dc7806e65a80b0', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '75af5458d7b3dd519dca36ecb7101de7fb17aabb', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '0a3322e995ca619db0c1261ddc17bc36d264439d', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: '77716bae01663e4c7016aa7ec4d8f7c2d806455c', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '98d86546636e82ec219a87b88c4f7b10c3229d61', class: {
+        return (h(Host, { key: 'b9c2572fbfce3f91b4d3d86f85bd7197fb13dd31', class: "table-row-group", role: "rowgroup" }, h("div", { key: '9bab2fc413d4862294e1559a8f7f29d5e1ad8363', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'bb34d2d98a2fed36f9c36fe652b7c05d2fef6942', 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: '1b906bb010c02a808878ed346d5dc34cab547bcb', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'a8ef2005d13998ae2685fb347615c005e5a61b3a', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'e67d82006d158b4fd7c80053450b82213656a11d', content: this.tooltip, position: "top" }, h("swirl-icon-info", { key: '976f47dfc14146f593106c5297373c8bcb6b7735', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '35e173bacc8a3d87cb6058ea4372136ee0406945', 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: 'dafcf2dd12a62759753da95a237f453020fbedcb' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'bb88ffdcd5aeaab9b1bf015c9057639db6296d3f' }))));
     }
     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: 'ca11bd8e0849b32408486feb09a4c194e87aa983' }, h("div", { key: '733c0f1d48013bd6c16368c7338c25eeb3b9b6cf', class: "tabs" }, h("swirl-tab-bar", { key: 'f66e241ebc4ac6b5ec1cbdb32a5790a84629f992', 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: '8d5faa14eac66cf7f4b6e111a27241f85f68e00c' })));
+        return (h(Host, { key: 'b239acad2331d8d7dacef6c8947c999dd93543db' }, h("div", { key: '2bdcbda7b47e6afe5cd3396ac5a0b7b54cf069b6', class: "tabs" }, h("swirl-tab-bar", { key: 'de1d33216e332e672c0ef222e2ae58c89980c21c', 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: '36679a0fc18a0633f2bd2b36019845e881c5c383' })));
     }
     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: '92a2249b6a7d08314f64d2bd6915bd6c6a9e964a' }, h("slot", { key: '4a138784756ba6250b038a716c647b9b979c2cf0' })));
+        return (h(Host, { key: 'd079bc3f39e5a4f4ceb6980352bd8ce19d2cd501' }, h("slot", { key: '16a77c6884dee163096d2150967468683d9a3b9b' })));
     }
     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: '5303f51e00efba420de9a46c9c13418bd9b7bdf9' }, h("div", { key: 'db8577aec53ed60401934aa6f4479cc6f0ddfe44', class: className }, h("input", { key: 'b73f3c894529c34ebb1bf83e90ce7fba2a1c71e1', "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: '1d3812c3c47f14c1f7d88b7e0a8976ee40a544a4', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '5aa5e48bc3b903b9d31757b70e8edf5a340bfa47', size: this.iconSize })))));
+        return (h(Host, { key: 'b57d1c95a53409500090aa790d52c5c76c112cb8' }, h("div", { key: 'dd00a27168db3d374f36e82afc9fa5818d2d94c4', class: className }, h("input", { key: '3fb9b4d2bb383818a0654f6456659cbec196b5df', "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: '85ecaa2204d5bc422a1b3fa1ae61280146548811', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'e68553f429f694487cf33358eaa27ea8994e6353', 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: '819217a82456737d031a757044ab8deea0f3ceb7', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'ef7dc10cb39b4945e72b7012fcd4aa9a5ccb21b3', class: "button__icon", glyph: this.icon })), h("span", { key: '6c7da8250b0452ca140de6eb3dabcef0857d5dba', class: "button__label" }, this.label)));
+        return (h("button", { key: '83ea16bb3e24b53c65ce0756df549f98d66ce88f', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'c651be185bac37345a712b8bb2d20693ea844800', class: "button__icon", glyph: this.icon })), h("span", { key: 'af1048e9c497d31225c6251138e5e9bba0df21d8', 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: 'd35918d0a4586d0638d3db2d59feb2f8968f8e17' }, h("ul", { key: '078e958b6a1da0802e16fae4352be6858180b1dd', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'f7bd664f789a2ac290312760c671dbb4d4af9c27' }))));
+        return (h(Host, { key: '0c5b3889a21936d747fdd05c5eba2d46ed17bfc4' }, h("ul", { key: 'c86ef2cd7945ae89c863d714f9525ea57dd6defe', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'a52531d92bba5bae5dcfab8c731092c3810bd48e' }))));
     }
     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: 'bde67c3626898c692b6ec67ade2784c6576586c8', role: "none" }, h("li", { key: '58c38d43d5886c7bf000e6f764b98cd97f0ddf41', class: {
+        return (h(Host, { key: 'd55ff061efa0b2d9a7ee221e575ca06b627618fe', role: "none" }, h("li", { key: '3545123e10f044abf2414c93a2b73b8cc011634f', 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: 'e09b04d21549b61c1ab8ddf5f1b7372e2e6c70f1', 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: '8b211875da1587ad74e8083a21459a4d818fbe40', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '2d9d571b0b4e771ab86fd6537c884d0b7b89921e', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'ad2cad8de060f1829077e5ab589c4842adf49dcc', class: "tree-navigation-item__label" }, h("span", { key: '4f10002aa8f59e8dc9e97a0afd096d5dd1b0e50e', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'e022b8b218c9afabb9e8168deba654b9dffed089', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '2cc5603ad7b5c5b2f3a1932f3d4080ef7fd7965b', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '336dedff994a58eea28ee9e803887e829be56378', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'acd053ce14a62ef1fc2f49342916ee09257f889b', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'e362e1a3b860203d547bec3888bcf1f220a36d4b', 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: '9e0dcf7e3a163eeec09a423abfaca76840fdf84b', 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: '42630e9c842d5bcacb625057d8ac2f06df621d2c', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'a738a566b85efd59f9e36e636e1e5b8abb4edf2b', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'ea91ee1e032b5fb2e215061ca2b7a042190f7016', class: "tree-navigation-item__label" }, h("span", { key: 'c7c82c84ed47dbd41d9a530c12037cb4c0df46a6', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '45279cc5311259a1b7721eef18c1adbd7cf1268b', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '8fb86cb6fae52b19456f360a5a853dda84174793', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'f725353f16f9386305da9168d347d8c904c30575', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'e9233e5e8b7e840f1993720715d993f6cc8e605f', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '65fffd8f120409aa21387385928d79ba01eca340', 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: '37dc7e6e29b1394828324b5a5f3a72f822bdde21' }))))));
+            } }, h("slot", { key: 'b3ead420aa30d22e8f7f6df8c7f1fa5e2076b74d' }))))));
     }
     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: 'a95d8d84fced022326f98b19703dd626a4c7a08d' }, h("button", { key: '769a392f477ef6f0fa680d70c4839b230219da84', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'e3434c3bd2f3f5841070d7de205f0b53642e264b', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '4310a7702dd20314950b9c43ae32a0517227c208', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '363c5b2e2c9c1a2b6f28acede73ee3888b340c22' }, this.durationLabel), this.duration)), h("svg", { key: '85f4a9eb1957a4e419aa65681f20e1b29695a033', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '33c70cd54cb628057ffa976df8afe935440194a6', 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: 'c382007f3708a0eb612bd7b4fcd6b0fbbbbe27a5' }, h("button", { key: '7c2d11b690573723ed96c4d55fd352eb3292456f', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '28d5b62015cac42b9deb37a63b45f44192011425', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '0606fc45158061fd1417fd40d75b3563d384caa5', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'de43b607cd9a229e02a78b48d44bb0f59cf7ddb9' }, this.durationLabel), this.duration)), h("svg", { key: '6aaa320e3275dc31c4e0aa290f2fc6e687459c5b', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '85016615918ba011951ce4fee9d66924d6512096', 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: '39569ed3ec9d5d2b541e500cf5c42f5f5edaf528' }, h("slot", { key: '9e8d42f8bf36ed646f3324024f016b8a617c0630' })));
+        return (h(Host, { key: 'c0d288439c67acb0f9f0eab27cffbfcf585eb13f' }, h("slot", { key: '58f81472c4e28e74a88c32449e58a465374b36cb' })));
     }
     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: 'fd5e23be405e5ea3468492eabbd31fbac507c7d9' }, h("swirl-app-layout", { key: '5b5a1a07fe86f7617be792e9a51527f76065bd7c', 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: '6f91aa4d297ac82e74135165bbf14dbcb96ef9cc', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '228bbe9816a57912d26c6b876d9ed9971b243a91', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'bfb2ea630131f260bddb755086d959d75a599924', label: "Sort items" })), h("swirl-stack", { key: 'e7230a465b56dcef04631a47bde601b712b5e500', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '012c7b52f64f0217bb0fad4d0cf11ea2befeaf19' }, h("swirl-heading", { key: 'bf4245ee25869738a888726ded31f11a7f9a68b4', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '101b3e8ec7a66c227b9cbccc1bc7700f5d2f72ac', 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: 'cb8a6e467c8a5bbe608841907923813e4c97426d', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '25b328720d8d89745fd687e35f4691bccdd6ee1d', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '0ec5b4d4620b7d9f467278f5ff69a487c46422e4', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '63e0dfddd55e22863f8322963a69a60a710449c1', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '0889f16cf03d5e179d202e1fad1eb82fc3ea5502', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '54339c3dabbe501ee63379c69d4d974a0f9518b5', value: ["ascending"] }, h("swirl-option-list-item", { key: '16061f0dcf956447974b35cdda0dda7297de925c', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '4fbb965d7baed2325c9bf3f361da5ba9c0f90715', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '96684f19138c8e2b4ec02583ddb3b8f33a042a55', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '6dc446161906585e7089d07fe405d73c3465ec87' }, h("swirl-app-layout", { key: '01753049f2e02778a98a10b00627c284909a867d', 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: '82fa5964aa3338e83c3f1675c01d639ff2d2388c', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '2dd60e9c5683cf155f57891999b7a87020b9808c', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '9e95cf4c30bbd62011681dfc7ec2e6707b644291', label: "Sort items" })), h("swirl-stack", { key: 'c54ad944ddfd81a6781ba8537a4b3f3e0fa767d4', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'b79ff5a7ef15a286e4aba999e173bc11d21f504b' }, h("swirl-heading", { key: '881216eb149d155d9b6001ad8b09b8556ea6158d', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'b8bdc2de713657b151a9e5d210501b53ea3d3823', 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: 'c27a1fb850402a38bb3d3509920ed9ca19ed8feb', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '5d4a6e851a5195deb6244c527f3c01ed6f26f326', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '05e2d2655cdf0a520ce09d5ca19a553ccf87d9ca', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '6e064318899d84f0ca2a5f3f52a01b34d8243433', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '50c9dc5f99de35da1c0999368e91ca145520f170', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'bf9212cba381ca29f281ef217a57a1eb38ef00b1', value: ["ascending"] }, h("swirl-option-list-item", { key: '6beb466e2531a52c9d54dd66c5a9c176e7b91e90', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '79b932befb1f9ed463a5d27cb4ffb85b88276086', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '1246f3cd630c4822ad75360ca97c34d1de9f1bf7', 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"; }