@getflip/swirl-components 0.363.5 → 0.364.0

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: '84da38e754c8f954f138164638dcb7b53a253a47', role: "none" }, h("li", { key: '2eef82c42ff8d968e84b18427434fa613fdd69af', class: {
+        return (h(Host, { key: 'bd39e523e170e0f87e3e9ba6f01aa51af768a5fb', role: "none" }, h("li", { key: '25e7257484146b531d26019dccdec8e4986c9ddf', 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: '7663ac067553f5967a6d40e59c306f5a2a4ce5e3', 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: 'dabb80b2ea51fc991d78c78f97b8f35f983a7e27', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'cf4443bc0f89c5ce23043cf1100b2b7a8ebb0f55', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '65518836650c31c6665af8c84a8d9ef0dd2b985d', class: "tree-navigation-item__label" }, h("span", { key: '71da15c28d7a79416c93ed2f8082dc65a44b4081', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'c2e393c745eab6f1803db5cffc7c77a018d397e9', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '7954eb4261d129f8b8dc2dc82a6a6ada08f1c23d', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'ce65c8406379b7119eba0a848139eadd44e26059', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '1938947ec7a4b9d3f8fd44dca542aad05b61ab72', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '1db6286314594f640e00cf6b86024a76613053c0', 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: 'b9023f754fd491ce04afefe32f196ffda0265573', 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: 'e725484f97132014187bc3d1cec79236facf9696', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'ae7976f40e828e45fa2aa7682378b88dceb7d564', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '3cc4f848bb07711528437b71df0a5401a12dcd8e', class: "tree-navigation-item__label" }, h("span", { key: 'ba704828ff95c1bca0c21867b88663bbbdc288fe', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '09ef14a4df7d655b67aa2331e90b04548eba19c9', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'cb7e60c6d6e66cc16a0cb96e2684ef361a11cb2f', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'edc54b08ec413b4ce6fb43559771cec1bed304d3', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'df21ec80ee822819312b70e1dcf34d0a23eb8623', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '181b51ffba98ac14f28a61db5e63a7f7429ced0c', 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: '879c209603f09bc3f9d7630018d763173a089e8c' }))))));
+            } }, h("slot", { key: 'ae47fe2369df40ada338495cb811b78a67fdcb97' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -327,7 +327,7 @@ export class SwirlTreeView {
         }
     }
     render() {
-        return (h(Host, { key: 'bfb32f09515bed8513fbe74d857184dd6ab7d8a7' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'e129f3a6c1c457f6bae16b88f8debcc72a314144' }, h("span", { key: '1cb301153b2f3236b060f85f50b2f013951ca5c2', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'ab8a80d56af5f65f469f1383a872ad3ee27bef8f', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '9c3a3f8d54c12dc6ae7e685b3a362088a76d08bf', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: 'c0fe9f1ed516bc620251650866717f4862086017' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'ec46dbbae6c40b9ab939f3c8867d0cb2523819ff' }, h("span", { key: '9177e7bb9d2a77a8472b6560300a6bae6536228b', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: 'd93817ba54356a565d6f5d652505b7a302d16533', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '0801cd554dabc43b4796cb74c21f8426c1388cae', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get originalStyleUrls() {

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

@@ -329,17 +329,17 @@ export class SwirlTreeViewItem {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: 'c68c5a13aca8fa7fa733629279f11c1dc0528870', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '40b756080539d584fa99f671ebdaf078ef729010', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: 'f9db5e722e20bfa566d79c28995e2c99be21c466', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (h(Host, { key: 'd085c2b88c107c203ce428a67712da04323f8e24', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: 'b0ad24c16fcf8e64fac7f76720ad474f34a25aab', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: '1df2bdeb1171dd86c2439d0e475ccd5f9b3d8ca5', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '432dfb7398abb9a954bb8d612bb4f4212a2b7642', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '01bc68f0c459247e21154d4bf37b90d98cf0dbc7', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '54de776c869a0705e629f923ce2919b855ea49bc', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'd19607cd33b1caa4ef1bfcaf928ae0529a5d9672' }, 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: 'c3b1ad10734ba61328ccbc04b20b69509c5cba17' }, h("span", { key: 'e1b60f39411b78b7531bb4d47d84ce7fefc86500', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '8989e21fc167a67a1c3c6eb95105027ad98f7279', class: "tree-view-item__label" }, this.label), h("span", { key: '5f2721c78ba4899371b08b70eafdd8b612e0e6c4', class: "tree-view-item__tags" }, h("slot", { key: '55e723f67fac9332287529df25a401c151d82ad2', name: "tags" }))), h("ul", { key: 'e7031518fd8c07ee49fd43e6bd75d528b911b9a2', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: 'c1a7d0fd676447956630dcc37569fb0830c2099a', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '44d0850b2d47787d97d405a554f518a1428290fd', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: '0f52b403d04a371971c985900e18c7bd6f5f1f5e', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: 'ed7c79bbedfddcd631404f6b910b7a3b0320a829' }, 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: '95353c0276d3629919a19952490b50c4f79674bf' }, h("span", { key: '4c73f3ecef5022087a72874912003a2abad5d221', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '061dc160720af1c7e22339a10297e42c7c241007', class: "tree-view-item__label" }, this.label), h("span", { key: '4bacb2b0968245f5c4a9e84a010653bf6513efdf', class: "tree-view-item__tags" }, h("slot", { key: 'f3cc5dda408a78092033ecc1bf305e8a55241870', name: "tags" }))), h("ul", { key: 'c845651262d91941a9748d2b0412104c75485874', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
                 display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: '99d4fed4a0c7eddb1fd05823bc99e27f5e1d46e1' })))));
+            } }, h("slot", { key: 'dfffc7c21716f9c00da9c2e6224daced78ba3ad2' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get originalStyleUrls() {

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: '12a8ce5c44fcc01076e0270143998be607ec3873' }, h("button", { key: '09f84d385b3085985f17f3f9eb6fc931203b7dcf', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '01f586628b93bd67f4f7a52ccf068d6a9f258ba7', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '1451304285e2924880753f426994371094f5577a', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'b63df651db1aa38995f907ebc69bde184ad734f1' }, this.durationLabel), this.duration)), h("svg", { key: 'f00136c309825b3f36976e27af6ef5261cf2307e', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9fc79b09dd39d8f4ef91db5cd855747814ba4999', 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: 'c76614a7b2a38c99f5fa1a08c3531f411e5e2074' }, h("button", { key: 'ec6809c5fe8095cb39ec4ab5a5bcbc6fd747e813', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'f0cee6af8be51d2dc57a91468d8ef4825bd79e81', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '03bea1ed845706d30e80eb763b7d7cc1f58e1a66', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'ba98d1243571b064c4ddc2a267d6bfce64e267b5' }, this.durationLabel), this.duration)), h("svg", { key: '91b7873574769ce1e581ad7709654b0c6f6bfb7a', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'e905a661af13844632062439b9e9dc16c7870f52', 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: 'd0253868fa1a5a2665bb8bea4674895820715708' }, h("slot", { key: 'c44b9990392736181953def9a00a520c0f9d94c4' })));
+        return (h(Host, { key: 'a3a025b3373b93546e494ba608e619c7f0764c04' }, h("slot", { key: '88fc0f4322af22e3f1818ff4a064c1b186999dee' })));
     }
     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: '59f800d6b1e8c2a50b11f264549b166f35110ff8' }, h("swirl-app-layout", { key: '0196ea64d086682cec288cd9363838a63c5f0bb0', 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: 'f3a316f370309768f032aacf996865daed394631', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '8b719480d73d81b85eee19b750ccb60dff290f83', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'a2e323d8eb60f9e905bdf9ed5bc95f014a4ea590', label: "Sort items" })), h("swirl-stack", { key: '279dc842e8006a3678f2c8561ec70f3f6af6f642', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '9099b229b427e1e9852b9344ea83a8aa2d4e7ccb' }, h("swirl-heading", { key: '47bb3d1e74be6568fe4a6b545a5c88a6be058cab', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '8b78af54f23b9f6f9234939f5679b04140a39082', 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: 'f0085b36cb9dc878ad07cd8acc8773b98632abeb', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '8786faac5258fe982e66c3bbd1f8faa8b7c7c45b', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '3d8eb9f5bfb11b94ad27370028d53123b310f81a', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '71a4b53103c2f65ea647253aa97c2b1676a17fb2', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '98946868dfad029e02f0325f90d6518041050a83', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'd69d1ee68cd987bbc63497fcbc88eea3c8fb0b35', value: ["ascending"] }, h("swirl-option-list-item", { key: '88977bb86ad5ea0539c6c5817e13550151fcae08', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '5102cd99f940f73bc28eb3307f619127d12b7654', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'ac14c4d5fbfd00481067c9e2beb2f1f7a4f143ae', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: 'c00aa66645f6f528912d159e9bf2faf3d2753b8f' }, h("swirl-app-layout", { key: 'ab60a8a8a0a7e0997408839de28c3565b9fcd09e', 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: 'bb70d16cfbd5fa5f06fe0f85dcbb36a298987c34', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'bb6ee4d61581c30985c374c8a17cfdb5bd9939ba', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '5c4da1491a31fe2d901c244983dc26533efd524c', label: "Sort items" })), h("swirl-stack", { key: 'dd8fb7d01ca2bd17cc06eb652d944d0ace237140', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '2297b3f69974b4163c63e813e0ef49b43d88ad0c' }, h("swirl-heading", { key: 'b4c999540553bc6f845fb9423d170b88423b4407', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '35769319dd01489e9c4b84a548d3277be48d43b6', 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: '3510fb6df6a7d0cadc9c0d6e2c006e264b189405', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '6340c19495057db66b068e66c0f7b55f6af39839', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '9e88038e3bcd243fe8cca4e7c0ec8a6ae662be6a', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'e3bc988f8c7f1376c16ca245bf5e59008948c66d', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '791792fa3e500f6e2f940d4dc2967abe9fd76231', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'fb6c50b520d42041c0749b1d06580dfe01f2e416', value: ["ascending"] }, h("swirl-option-list-item", { key: '70890e653fc4c66fe43383f9e156e4a1f841b508', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '8c713126b95a1fd64c1347999725de628bd23f01', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '45da43587ad817a857b4e54223d801d458ba5f4a', 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"; }