@getflip/swirl-components 0.260.0 → 0.262.0

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: '6326c3a42f6ff4a21778fea7933efd21e7f586ad' }, h("div", { key: 'aad488c92bd2232bcb98453ab80182f5509a26cd', class: className }, h("input", { key: 'dfd55229a490341a911524f9c68c62a999653c58', "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: 'c9dd879952e1e1cf2305980297e890ae57b7185d', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'ce749a3f6cb76f482a1fc3a18f10f9b7a9c4a0fe', size: this.iconSize })))));
+        return (h(Host, { key: 'a217a1162e3d29bf88073607cb01a5598d61926a' }, h("div", { key: '551db6df95d194cfcfa4c4b06288a90b58ab054e', class: className }, h("input", { key: 'f6c6defc10484ca2dbc92d4fd971b7ce81d1b94c', "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: 'e80e90de706e1b55a6e0506fd0b61a7e80a7d70c', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '0182e69b631e20ccb2363a16eb856865d89a9d49', 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

@@ -13,7 +13,7 @@ export class SwirlToggleButton {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: '3861fde82eabc6dfbd4ea9d329ea36010c48e9a0', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'ae3b3b0635ca955084ded5360f419bbc8e00af56', class: "button__label" }, this.label)));
+        return (h("button", { key: '4554a886b0ebe5b44849b62a8197a06a78bd12af', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, h("span", { key: 'da040c3015f6ab8876416cda6a397aab1087d3a0', class: "button__label" }, this.label)));
     }
     static get is() { return "swirl-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class SwirlToggleGroup {
         });
     }
     render() {
-        return (h("swirl-stack", { key: '8bffb40c1f341f5ba672ac8fd3335fde1259b6fd', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'f85e75cef254a1dd0522ef0cd9edb89603b965a4', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '08e556ffce1b69d494545650a1d9f2cc1b0e0d9c', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '4734f6ed01d1238f84aee22d9a8c00edcca2a77d', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "swirl-toggle-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class SwirlTreeNavigation {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: 'f835261b423e4be4734248f87d4d85beb0d1e6b1' }, h("ul", { key: 'c877a5d4ba5ef4038d600ebd997bc6594a6d5672', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '3ca7889623881b4b3f7e38050435d0f2c82d8782' }))));
+        return (h(Host, { key: 'e4d422dfaebf3625fc3b69efa8e8c4559f57b444' }, h("ul", { key: '162779e83c6ca058bae7b5b7b610b5a5685f5304', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'f2e072c9a2c02164f768ef34975504d34a7f0436' }))));
     }
     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

@@ -89,12 +89,12 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '9ab69bdc4b053a7246d42f340fb0a7fb6e5f5924', role: "none" }, h("li", { key: '918e2904026c13a1389cb555abc8c353f99fa310', class: {
+        return (h(Host, { key: 'ccb8fab72b82370116e0004cf153811d59064cc3', role: "none" }, h("li", { key: '739575efd5193cbb2885cb4908dd2983eaed70a2', 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: '3e097bf17d9e16fcf643a002d087d023c6a52ee8', 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: 'ba714160b2eaf31ec8cb5446ee375db2583af244', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '7e9530c0aeeebb25cac46a61a19c0e8216acc45f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '91fcabb1dee17b4fe7ef2b6d9b9f31f8f4950449', class: "tree-navigation-item__label" }, h("span", { key: '0cf8cf6ca838730e9a23f76185d1837e19c7bbd4', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '130a58936ce769e9e44db262c3c0905a0ef2be9e', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '51c0490baca573803b59150ab524cb67eea1a74c', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '58a6298e62a234ea3b69539e9ed705a6412805f1', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '2259456f1bf4f4b648099f2239dd409aa64903be', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'bb76e88c245a72b6fcd43f3df606bcbb65ab4591', 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: '9a5c4f9a2a28dba0cb621c606c96740bb2cd78b9', 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: 'f40c840bbe8d412215a39f4d377de7da735e31a5', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'e872dd8e05f7c69945e8459133cc0628bcf2f8f9', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '00c0039c994111b9137b82f9e5bff9fbad17cff3', class: "tree-navigation-item__label" }, h("span", { key: '99da9102f4fd50b10bec3aece165c42d617054a8', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '24c65b2553f3d2c3c304a63a38f9ca326a3e93e7', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '396da912b54c3f602a042a85546fdc658a1b0f5a', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'fa5aa49d1f8ea0e00db54a0993c57eb9f758feb4', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '3b43aa4bb817d6419cc27e8ce9e1aab2c9ffc87c', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '8efaa76b983875a4e2c05625793fdf1a49f1bb0c', 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: '811fce6802672193cce2ba906420c3eb2ba184bd' }))))));
+            } }, h("slot", { key: '12f645a477d1980b2e3dd69368eb6934b6dcc2a7' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -192,7 +192,7 @@ export class SwirlTreeView {
         return nestedSibling ?? undefined;
     }
     render() {
-        return (h(Host, { key: '3d6b48b3ed3259ff00b0d74c2917a8df39152142' }, h("ul", { key: '0b7ab3c3a56b07df31b4654f480599c55c156fa3', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: '761f5b11bd43703b837ce637edd10cb2207fb24d', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '9547acc6ee783cd7bbc86229456664b704ce3824' }, h("ul", { key: '054dbfae0ea04717ec92404e5cfdbd02b3aa8ef2', "aria-label": this.label, class: "tree-view", role: "tree" }, h("slot", { key: 'bd50ab3d80614550ff1369b2135087c9abd18f7e', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,11 +74,11 @@ export class SwirlTreeViewItem {
             "tree-view-item--has-tags": hasTags,
         });
         const hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
-        return (h(Host, { key: '716ad90519b37fa13068537964d8efbac4282481', id: this.itemId, role: "none" }, h("li", { key: '14cc2092318182a65a1280461ce789dd3671ffbe', class: className, role: "none" }, h("a", { key: '8113cef473e1481c469c765a1f639cea2bc715f3', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
+        return (h(Host, { key: '9c4060a50612c5c04f9e9dc3d8f24b64cc86eb50', id: this.itemId, role: "none" }, h("li", { key: 'a667aa3413ab89d0b73a1cdecf638c0edeebc30f', class: className, role: "none" }, h("a", { key: '892df8da2123bca07f4b742f2db7074aa2cebf34', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
                 paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-${this.expandable ? "4" : "8"}))`,
-            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: 'dabda22ad341597e5b8d5552bc067bb7b23c639c', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '8efebc17d42ce02df652f552845198e674578604' }, 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: '512f975726a90c013fd81bb92a8c90947478294d' }, h("span", { key: '363628160f091914461766665228a6d43fbef405', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '162edeef56f88eb4223d34632451a27e4fecac26', class: "tree-view-item__label" }, this.label), h("span", { key: 'f731e735184b8551eaf94238145757411c5424db', class: "tree-view-item__tags" }, h("slot", { key: 'e52b850530d15e0255642348fe0cbefd243722bb', name: "tags" }))), h("ul", { key: 'cdd8836da2c60a1f9f20d8d17203c6e3579626bf', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
+            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, this.expandable && (h("span", { key: '7ca84e257df1c6c1d50715b24c0174b162a4c87f', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'ee4e1e8abb8ee763899acacd736eff1d6dec3a88' }, 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: '42d4ad3e805c975aef45201476827db258866a0c' }, h("span", { key: 'f2057d60353ee4715333afc7794ad1f88158b660', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: 'e8ad171d851551688c2147e64963a9f5ee1804e4', class: "tree-view-item__label" }, this.label), h("span", { key: '87a3d8a35f97ca90ac3d6474f0ec76091177606c', class: "tree-view-item__tags" }, h("slot", { key: '3d071ed48c8ce362a70f45e18ca4cbf1d30abe03', name: "tags" }))), h("ul", { key: '1c62c41a354a86187f87bf9788b6d751fb9cc610', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
                 display: !this.expanded || !hasChildren ? "none" : undefined,
-            } }, h("slot", { key: '6616b7ede4c157e1fc13e4ccbaffb0a60040d015' })))));
+            } }, h("slot", { key: '42332e01614e7684e3c2564771752d65024a4bc8' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,7 +7,7 @@ export class SwirlVideoThumbnail {
         this.src = undefined;
     }
     render() {
-        return (h(Host, { key: '74a36de00b296ef7cad5cbe88758d0d779142103' }, h("button", { key: 'd73e9b19d127271f39e90117b55f5c375ab57161', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '2e02aa3be9c79105b3e1351bd91a012ac287b43e', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '199752310725807835e6714066653524aa25755a', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'b52032ae1d72c6fe385696181c7d8dbad03100b1' }, this.durationLabel), this.duration)), h("svg", { key: '04802b94b1e8d0bd21ee4c6628beb110dc72131b', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8f9eca1c146e9235c0963202e7ca76226578177a', 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: '1cebf80b9a3b76e1f463a7e34fb9753092589df9' }, h("button", { key: '771634a63654892d7a8bb6bdee9130208778ac79', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '708ac273df7b36e84b280dc7a211947c554ed90c', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ccd1a3bdd939da1ceab82c5f480a6cc05886238a', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '08b8b439f3e2fe529a5e08d2a3d4adf5a7b81d40' }, this.durationLabel), this.duration)), h("svg", { key: 'af98a07072d4963aa9838fdb15cf4a633f27e3c6', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b99ee166bc59e5876b02c3e2a5c4c13f5034bc0d', 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: '8ba0883ad9e5d6c38e9a5e0329f09d33ccfb94c3' }, h("slot", { key: '21748aee3f7fec7115212fc6a1672b0870eb24d5' })));
+        return (h(Host, { key: '11989ec156e6ed5fc03a3e40802e5af45247d534' }, h("slot", { key: '2464ac3e1a71c723e24c0258b3925ee54900a772' })));
     }
     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: '570ca96cc9c2f9cd47d0baac6d845edb7614e9b7' }, h("swirl-app-layout", { key: 'd557954d6aafa5fcd8f27ccd4fd5d5c4fc4041d3', 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: 'dc496daa67fadf842caccde1907e102453e0af94', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '03d23788c394917fd32e6add32a501baf66c72ec', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '36ba312dc90849102cc0cb93e5687c8cde5ff891', label: "Sort items" })), h("swirl-stack", { key: 'bcc8d408817576a539aa9b770b68962fbd071083', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'ab70c94127c6bbffe2c5c9a4f2de3072617c1114' }, h("swirl-heading", { key: 'e1b548ff5624a5e47b99636f1e6c8a3c69f642a2', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '4d39a8af38a2da52d6f9a713ff02bc5b2c55075a', 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: '3599880430c6fed0ae1fa64071390c785e01800d', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '9a5d356e32be0171e675c7ef8b02ecee002a4daa', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'f7d43e5a5fc2678ae702eb55e2b98c53c09a04b1', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'd50d5d66cad136387db9fc27c24844347d989e44', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'b74200157f5888a15f04f97e97bb10cf1a5d462e', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '761db0d6538dc8fcb6134c22822c6493e308c4b6', value: ["ascending"] }, h("swirl-option-list-item", { key: 'dff52948ef76fd3edb08417413e38a8190e9624a', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'da59b133f0d34b71482007d7b756bb352f3aa373', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'b193655f938111841b9b2d61a1bfb0e0e9c4fccc', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '6f37b239fc9649292f44c4170d259d2dee301fea' }, h("swirl-app-layout", { key: '031b20ff93460b82f3b910cf960734a441ab7152', 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: '123bd7b313e2b7ef75e13ccde6cb37b2d7e24cec', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '5fe72000feb45e90de489eef28287275a16b2e2c', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'b0b8a45ab7e3d1184b1dc049217a8b0c21d0e810', label: "Sort items" })), h("swirl-stack", { key: '6de16eed3a4fb92e8a83e06d6ab0e1fab2243efb', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'f72ea0f2f972d3f153ac31397be85a1a86e004bf' }, h("swirl-heading", { key: '337d0f22a9cbfeb39737d1e5b0a2213f94c30ce4', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '82ff8c16af4bc46e15ec8502f4de36d4ea9c65ab', 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: 'f9b1dea0360739d7758035ffa28c7db0be79a0b4', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'c260c77b6c174d5ff16958b1b367c0d5a5294786', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '5d2978eb4a96bf5e966dce3ed9ef41d0763c5e92', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '61ce348079317f8648a820927442171d199ec42d', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'f2853121f711f2d8b6c2c7071946ce2bc2987db9', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '29ce7168735ff10ce8c454e19f8dcb189f17b8ef', value: ["ascending"] }, h("swirl-option-list-item", { key: 'aaf84a4829809b85b99b8422fdda0d07903fdc71', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'd25bef5d46d0b499d688161f6dff47f8c7307ac1', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '836fdecd5ad51923896f178992ad33f2af62bb59', 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"; }