@getflip/swirl-components 0.419.0 → 0.420.0

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: '95605fb52fb183c800e6babb9fbbdf1297273db0' }, h("div", { key: '962cbc30e797c72546e73bbf53d428063b0f56c0', class: className }, h("input", { key: '8470cc74a2ab6fa5c35de2d8fc72df5608b4478c', "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: '661f2335207ada219385e12ab82b85ef30c1c3ab', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '8c047c1b392406c6365da9dbbc3ce3f357fab511', size: this.iconSize })))));
+        return (h(Host, { key: 'd019efc39aaf11220f2103b70f130379d4170058' }, h("div", { key: '64546f82881a15c5ce048d2bb6a2934f99acb629', class: className }, h("input", { key: 'd7658e416e03e7ac5867dfa240447fa0d0981134', "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: '54c1adf351277f39d84b1ba2ffce287fc88c5f69', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '8d395b8a70e001a46af0bc2b86328c3996033cac', 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: '749bfe02204cf6eebc6db96b804a65616b69b059', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'c35f6ac8a8b331224d7cead376b1c2ce886c9369', class: "button__icon", glyph: this.icon })), h("span", { key: '1383f4a3ccc7aa99b809fbdcda4c3eb0f66af5ad', class: "button__label" }, this.label)));
+        return (h("button", { key: 'bd5f7e9a9619114c9e92e61f145379025a47bd17', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'd67dc89ba5e19d12a9210cc2a2028e5a9ba1989f', class: "button__icon", glyph: this.icon })), h("span", { key: '89f5c0af4fc8c0be4413707c56efd87217374bd3', 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: 'aabdee9a7467a1729a78034b59da2acc63ac9fcf' }, h("ul", { key: '31971bbc30b92af7d80d260f7ab67802e14774d6', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: 'd2ee30c89bc101de3e4fe923bd329627cf6bd2fd' }))));
+        return (h(Host, { key: 'f2415de2058484fe27f23fad588a755a3fa3c618' }, h("ul", { key: '92d57538c70607f3eb2e9e2f7d698d4fd8561d83', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '6391f8611c12813dc8d10804e0b32614dc82db63' }))));
     }
     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: '00d8208cabff874b4ddf9d091db6850d73475eac', role: "none" }, h("li", { key: '21db558c245bbdbfb474e38a49a665040dd3b188', class: {
+        return (h(Host, { key: 'edeed5071c5a5f6b8d0cf8943d5e9c2e4b3cff9f', role: "none" }, h("li", { key: 'b8f94741fa28e489b810e7d230714dcc95d05f28', 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: '2122f8a68593405f0407229d674eb81729824a72', 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: 'ac5a0ea83dc5e99fd0758dbb5e44b149dc5c5763', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '46cf0644fbe0fe3f537672a9c2b708c21a46af5f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'd3d77106b694a237737a8047c5789b8e04a32012', class: "tree-navigation-item__label" }, h("span", { key: '5fbf2f69158db3fc38b477a40ce9beeb77567f2f', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '4f1a513a1d90ea7571f5a40d283071c10478737e', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'e90434fd05bfea610dfcbed998391175b20b421f', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '9e20dfd0d349841c0f2b34845ede5f39c5fb8549', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'e109eb851b6f721b862153c22f39cc3efca487d5', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'c5519e4f292ae738627c58f2471879bbfd556e2e', 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: '2574860eb5cab04b2a23cafe097ad38296e7200d', 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: '832f0f07f0dd4ca5e2a755fd60ef278c0f7567b8', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '55ed7be8b0030e34d0782775da0ada9b3ef7618b', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '88cd56eba328b4a4c5427b27d1750e9b26f3b721', class: "tree-navigation-item__label" }, h("span", { key: '6b18fd776a5829435bed1e2f5db67f6d3ee7b621', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '20ad9cacf2995d77031f8d7c97429a627c9c2f24', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '0293031b0324477926e3917d4cf9a51e7cdbae47', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'd02a83fc577738cc7d0b9e6294b706a1d05a0721', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'a76c73aa8dd951c92f41c204ed881c18a0c304ec', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'e8c6e1a5ccb2fa924e5243dfa7d404176f308c29', 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: '5738c2357a39d12e1656ec6bbcb02c43cff53374' }))))));
+            } }, h("slot", { key: 'c8ce0f703946df158b8cd385fd82975e12dc1b37' }))))));
     }
     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: '08db16f2da0892ad3ff53c980fe5e52ab882a9fa' }, h("button", { key: '6c0cd7f973af6497b480f0a597583cdbc0964803', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '7d2f5aa904955e734444cb067ed9a4c2982fc73a', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'ea03e72b2ebdf534857a380728dc886709226958', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '4ecc9f2bc273078d16061f0468650a8356ee4628' }, this.durationLabel), this.duration)), h("svg", { key: '350d61e99937b3eb2ff2bed630910bab8804ea77', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bfa8dbbd6e4b76ec56c31c42db06be987c6e093a', 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: '3302ab493ae4f48892bfcc2207b6658c0464048f' }, h("button", { key: 'b28282fe83e70c7baf5096d3e4f769c7f1e660ab', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '679231d2c79e66b38158b14d87921b031cd531b1', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '6010b3ecc7ce46c83a2fa405b6824255b85107dc', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '7eaea85f3452d22d7e44c138f2e3ca9261d6f5b5' }, this.durationLabel), this.duration)), h("svg", { key: 'bbf9a901bb7dff81adae0410873f7254dd30999f', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '182a08bd76d1cb9e27940e45b8b37bb111d73eae', 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: '28b1ba7a3153aea0d6d17615a1b4fde1b3af0d62' }, h("slot", { key: 'c1e1c738c6a9deeb543ce6f8901cd2e99c80e318' })));
+        return (h(Host, { key: '70ff6d9fe4e79afd12c9e02109bf9ecb47ef8956' }, h("slot", { key: '4a75a6be4ba6816d7ea405d4ff2d376e44b0f769' })));
     }
     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: '4e88cbcfcdaafce60960986005720680f2acf40e' }, h("swirl-app-layout", { key: 'd63fbed4af0adf2575b9dd3d98521c7e944159cc', 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: 'd48f743fe4f0e3bbbf95aa9f2ae3c5b535ba0fa4', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'f726cd787f1091f56c327927dbb9a039dc4fa07c', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '7bc1ad7314afac3e67ec6585de8989cbe7259bfe', label: "Sort items" })), h("swirl-stack", { key: 'ec4ba50b8e701729fd21bee832f7fd6b3024aaba', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '019a191e41515239bab84d291ec6519e58235c75' }, h("swirl-heading", { key: '75dac63db97113727487277806f97d2ea713fcc2', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'a9042244a9b018f8fa14a9591e05e60567361001', 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: 'f9171cb80d80ec3ef7d87ee19214ad91a67280ce', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'fe32cd9b7511931418d3ca0f6c2cd2d400063728', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '8689420b2b070054c7b8dcc3550899882bc34640', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '66fbf430d030451d74d4837c6c9e40a0252abb51', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'f5024817db7b965efde64e09ec0487a38123ad12', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'eb23f88b235b4148ec5d3e8b87d3cc5becc3ddbc', value: ["ascending"] }, h("swirl-option-list-item", { key: 'e2d56710c22d11b43a82aa21787634b5c5dd7780', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '4b01a6b9cb9a931c9765fe18ffe3330fb7dcacf3', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '503ff3371a63a7a6fc216bb7d29cea4c00970902', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '59043da3cc41bfa0f0725fba4959ff85a04799d4' }, h("swirl-app-layout", { key: '169fbd24d545f5da970ac4dc78a4e112989c33fb', 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: '85140dbf85758fb0e795bb893ce2331a9188f973', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'c44ff9f82dad0350d237ab2083ee3b32e96e361a', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'b8702cf8722eea6cf80a013025b8319d604a7892', label: "Sort items" })), h("swirl-stack", { key: 'b621d12f76a1f6152165effc2910e74544fa0ec3', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'f9e919abb2d0fde26cb92fea14d9e581ec5e82bb' }, h("swirl-heading", { key: '3ee372f80251458614c29c69e644d6941828e335', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '50c034093f1cd0c00b9b7947f1c2d16cf23acd60', 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: '0ddd9c3ae99e2c8620490f9282ec1da6218d6479', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '2f68f290b10b2599287330757ba9d54a0a5f1d39', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '78283eac5b4aa004c60e681fe3cf3050bc990571', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '2f82e8431dc2618367a04283ada66bb1e1772b55', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '26d427033138bcc81b6f5be428b50dc048703f68', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'dc200bb7c0b27cea99f595f6e4105e01f81599e6', value: ["ascending"] }, h("swirl-option-list-item", { key: 'e883fca71750bd59bb8720be36416a0b6429bfa2', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '0f2c70f9e425dc82726dff3289819f3c43dadf46', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'e2bbb4295df4f0c188be5a992760f0e5f5efc2bb', 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"; }