@getflip/swirl-components 0.304.0 → 0.307.0

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

@@ -51,7 +51,7 @@ export class SwirlToggleGroup {
         });
     }
     render() {
-        return (h("swirl-stack", { key: '38ba2ae6fd183ef0b1f45af3aa09dc13d9a0fc7e', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '333d7b64beda4587448e92a7dc70e9ff7e7dbd40', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: '6c6325f132cf80b1b2e288e5fe319877786d2418', class: "toggle-group", spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '0938af70f44b258d6d699f6557001e66020dbc0a', 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: '6170dc1783135092d40e783ee2c8377035057fbd' }, h("ul", { key: 'dc04e572d7a61c96acf21aa3d026b12373d089a9', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '04fb3e839d94ef7bfa13cb0b624909a567c2ba79' }))));
+        return (h(Host, { key: '7c04e1216d8b9a437d620dd4d3d77b1c2a095a56' }, h("ul", { key: 'd14e01fa4f91cfd43db0351dce56e6535070af49', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '7d5ae45d818f6753273da78909ee9388b5edeede' }))));
     }
     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: '91d0825352336d88b1c20738c08f93833957b615', role: "none" }, h("li", { key: '44b1b57d68086aed645921d86ec588dd10a93345', class: {
+        return (h(Host, { key: 'd7e2410d78a81d649e3898245844531387e92e90', role: "none" }, h("li", { key: '885bbfac113648131fd5cc73e4ecda072b3997eb', 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: '645f8b69e22a756704b64cfeb1147fad52ae21ea', 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: 'ee3be24c31d978b237f3365eb9db5ebaa9dcd0bd', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '1a6ba5fa0d42d36b5cef10ae4b5c4a674c54e0a9', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'fb45c421326713a33e4aea6235da052b7faa7267', class: "tree-navigation-item__label" }, h("span", { key: 'f1d44d360ffdd000901d94d7ccf3a339b20ff8a1', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '60092336a4f8258de8dc255d4ff3561bcb421f88', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'c226108f24408a27febff0f21508fbc3053d6dfd', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'f25c601b3bb4a953cb2c50a860fc8c82e34aa4c9', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'f546a936e52e4502d908d35087e10fc1bc042959', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '065e64f7762c564c0210395aabb9ba3521e5b4cd', 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: 'ac0b89e97b462856fd69825f62d33acaa283a2ca', 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: '9c94a8118608e340acf6e95039d618e501101fa7', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'ebf969e9e07345db6d3a3889002701968daec287', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '7c316c4f4bf6383558d2f87ca3db13220a55f166', class: "tree-navigation-item__label" }, h("span", { key: '577c659946956fc20a5d3daae47d897ae8307f86', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'c4a3199a43309911ff60ccfbc564c053e6e3e061', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '94a02c63cb1635f336440760e5d3cc27a559fc3b', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '10c0e9b4a66aa44dc142d6fdc19d1d2452399f2f', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'af2f73a619828f0c1d6ae9211f9b43d43f147f3a', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '56dc4a266305440a6ddc4ca95d29619394e6af06', 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: '0ac59a0c165c0e515af930c47da8666f1eac14dc' }))))));
+            } }, h("slot", { key: 'b63fb900955fe08ea4260a10f34ee61efdcf7dd0' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class SwirlVideoThumbnail {
         this.src = undefined;
     }
     render() {
-        return (h(Host, { key: '192d9056cae575d3f553e04e6c51b37108bb8b39' }, h("button", { key: '9e3caed5ec654fea3b76b6a93fa4b30cb51a356e', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '192256eedf2b179a9c63fc542d41ebd4596b164e', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'afbb63ae1c500461a60c5c926b4d8dfdc12c1cca', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '52a1ce390a7e62659469d941add8ce2048893ff4' }, this.durationLabel), this.duration)), h("svg", { key: 'fabe8f4cd914b7097d0dc9f954d57f2dfba0691a', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f12ae6c1bb05f6c53137504e549a0e7e4152ba60', 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: 'f4dd23782f8554444fbd6769a62b95750801513f' }, h("button", { key: 'c5cc96ff9ebac5a33088998768d05171165acb86', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '2df35d80d67a884aee4427bc0db6e3753f8f3dc6', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '51e267b365601e11965eeb4fb570c997a548ff9b', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'c8f7831e6c5d0dbca221b8972a3be84dd835adbb' }, this.durationLabel), this.duration)), h("svg", { key: 'ed6f2c43c9597313ca7c7d338af43a3b7701aa83', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '32de2235365afbefbaafb5a6d96544bc2709a2b5', 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: '946b92da1505327c1c13c751c4e8331b42f2e98e' }, h("slot", { key: 'e9114f7c9c9edb9ac859a8de4acecf3dfa1cc785' })));
+        return (h(Host, { key: 'd55f8b1248adc8ba93310969ace417acfa3cf3d0' }, h("slot", { key: 'c4540d14f487cff5dfc341ab77efadd348726694' })));
     }
     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: 'dc473b901d453e1b0980f62f76e030e5c650609f' }, h("swirl-app-layout", { key: '6938c8a6a118e49ef53f8009d177b5f6ff3805e8', 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: '4ad4e6e12405cd46efa3f9b33bea0a718e6b0594', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'a01cd588c27c4e6b9f65d48a2095004c42025ecd', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'af671ee911a4c4520ca26f95898b8a5ff6e04047', label: "Sort items" })), h("swirl-stack", { key: '48a776cae0a67d6c106bc776c2b247d36f752d3c', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'eb97701ffda9e7439ab8a694d2de19f7ca5bf419' }, h("swirl-heading", { key: '56c977917238f1d32c27c0ea74cacbb51727d049', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'c733306ebbc6b77cb98a82d844bf3d6ecff176d1', 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: 'f4466a0140ac8a66fa9c24dffb24795e04112fab', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'd17daa71572541013700c488fd38ba2ff46cf9c7', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '45736379c49155d92b830a9757bb40e3c1805ded', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'c41112d3485f708078d6c7d5acf5a285f32a2c04', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '7bc3a06ac4862c1decbe32daaa5e3157d4c16b29', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'd6e855c087af52a4285619f11ddc82b91456fd6c', value: ["ascending"] }, h("swirl-option-list-item", { key: 'c41aaee1fc568cc0dde1c3c0f9f6ae6dfd8635ba', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '6d94d601d7e13f475511ada26e2c0fe507d34b3c', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '6743665b2e70eb26bbea83a509e4967b3eab082c', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '4f71ff556bc3621d180a8e48624d3cb5329f3911' }, h("swirl-app-layout", { key: '6811bb5d3696c6523f7b8f7208bb056da9ce3140', 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: '04c67534c559ddced33bcb2def9cc66c29479e98', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '95c5d6fcb44150d8258904ff800c78a0cc38975a', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '264f6d49a8d0bdfd80d033824d3bbb66df29eac8', label: "Sort items" })), h("swirl-stack", { key: '974b1a04bda5109a8ff8013a69ce115598a7b2f0', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'f7b9b520edeb15e644390b174b572fb2aa14a08d' }, h("swirl-heading", { key: '3d579c02dd473ebf53ecf081b6432865a06cbba5', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '5f9c6c15564fb9d11d61406d973753f78f7afe93', 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: '361a686e7f00c414e028787ba85efeb85fb4219a', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '411da81fd731f100896a2b926bde0659fa485dea', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '5920ab330560bbea024b8123a5445d196942a5ce', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'f79297d3945f69dba4f464838abc2126412228e8', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '00be8282b07c33eccfe5fea28760da00e75f16d7', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'fbc9583f01ca0f71cdfd2e0e382f6d9dcfabadcd', value: ["ascending"] }, h("swirl-option-list-item", { key: 'd85467fccce59f060607a04f8e8154e9ccb62b4f', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '8b8bc5d7d54c97970e5f4ed63bc4db121e44f944', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '351791e066382018ef388feee72a861c92cab726', 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"; }