@getflip/swirl-components 0.297.0 → 0.299.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/components.json +8 -4
- package/dist/cjs/swirl-action-list_2.cjs.entry.js +2 -2
- package/dist/cjs/swirl-app-layout_5.cjs.entry.js +7 -7
- package/dist/cjs/swirl-banner.cjs.entry.js +2 -2
- package/dist/cjs/swirl-button.cjs.entry.js +3 -3
- package/dist/cjs/swirl-chip.cjs.entry.js +2 -2
- package/dist/cjs/swirl-date-input.cjs.entry.js +2 -2
- package/dist/cjs/swirl-icon-check-small_2.cjs.entry.js +3 -3
- package/dist/cjs/swirl-icon-error_3.cjs.entry.js +2 -2
- package/dist/cjs/swirl-inline-status.cjs.entry.js +2 -2
- package/dist/cjs/swirl-lightbox.cjs.entry.js +3 -2
- package/dist/cjs/swirl-menu.cjs.entry.js +3 -3
- package/dist/cjs/swirl-resource-list-file-item.cjs.entry.js +2 -2
- package/dist/cjs/swirl-search.cjs.entry.js +2 -2
- package/dist/cjs/swirl-skeleton-box.cjs.entry.js +4 -4
- package/dist/cjs/swirl-text-input.cjs.entry.js +2 -2
- package/dist/cjs/swirl-time-input.cjs.entry.js +2 -2
- package/dist/cjs/swirl-toast.cjs.entry.js +2 -2
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-action-list-item/swirl-action-list-item.js +2 -2
- package/dist/collection/components/swirl-app-layout/swirl-app-layout.js +5 -5
- package/dist/collection/components/swirl-banner/swirl-banner.js +2 -2
- package/dist/collection/components/swirl-button/swirl-button.js +3 -3
- package/dist/collection/components/swirl-chip/swirl-chip.js +2 -2
- package/dist/collection/components/swirl-date-input/swirl-date-input.js +2 -2
- package/dist/collection/components/swirl-inline-error/swirl-inline-error.js +2 -2
- package/dist/collection/components/swirl-inline-status/swirl-inline-status.js +2 -2
- package/dist/collection/components/swirl-lightbox/swirl-lightbox.js +3 -2
- package/dist/collection/components/swirl-lightbox/swirl-lightbox.stories.js +1 -1
- package/dist/collection/components/swirl-menu/swirl-menu.js +3 -3
- package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js +3 -3
- package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js +2 -2
- package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js +2 -2
- package/dist/collection/components/swirl-search/swirl-search.js +2 -2
- package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.css +4 -0
- package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.js +4 -4
- package/dist/collection/components/swirl-text-input/swirl-text-input.js +2 -2
- package/dist/collection/components/swirl-time-input/swirl-time-input.js +2 -2
- package/dist/collection/components/swirl-toast/swirl-toast.js +2 -2
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-action-list-item2.js +2 -2
- package/dist/components/swirl-app-layout2.js +5 -5
- package/dist/components/swirl-banner.js +2 -2
- package/dist/components/swirl-button2.js +3 -3
- package/dist/components/swirl-chip.js +2 -2
- package/dist/components/swirl-date-input.js +2 -2
- package/dist/components/swirl-inline-error2.js +2 -2
- package/dist/components/swirl-inline-status.js +2 -2
- package/dist/components/swirl-lightbox.js +3 -2
- package/dist/components/swirl-menu.js +3 -3
- package/dist/components/swirl-option-list-item2.js +3 -3
- package/dist/components/swirl-resource-list-file-item.js +2 -2
- package/dist/components/swirl-resource-list-item2.js +2 -2
- package/dist/components/swirl-search.js +2 -2
- package/dist/components/swirl-skeleton-box.js +4 -4
- package/dist/components/swirl-text-input2.js +2 -2
- package/dist/components/swirl-time-input.js +2 -2
- package/dist/components/swirl-toast2.js +2 -2
- package/dist/esm/swirl-action-list_2.entry.js +2 -2
- package/dist/esm/swirl-app-layout_5.entry.js +7 -7
- package/dist/esm/swirl-banner.entry.js +2 -2
- package/dist/esm/swirl-button.entry.js +3 -3
- package/dist/esm/swirl-chip.entry.js +2 -2
- package/dist/esm/swirl-date-input.entry.js +2 -2
- package/dist/esm/swirl-icon-check-small_2.entry.js +3 -3
- package/dist/esm/swirl-icon-error_3.entry.js +2 -2
- package/dist/esm/swirl-inline-status.entry.js +2 -2
- package/dist/esm/swirl-lightbox.entry.js +3 -2
- package/dist/esm/swirl-menu.entry.js +3 -3
- package/dist/esm/swirl-resource-list-file-item.entry.js +2 -2
- package/dist/esm/swirl-search.entry.js +2 -2
- package/dist/esm/swirl-skeleton-box.entry.js +4 -4
- package/dist/esm/swirl-text-input.entry.js +2 -2
- package/dist/esm/swirl-time-input.entry.js +2 -2
- package/dist/esm/swirl-toast.entry.js +2 -2
- package/dist/swirl-components/p-2d148cf8.entry.js +1 -0
- package/dist/swirl-components/p-3c5b114e.entry.js +1 -0
- package/dist/swirl-components/p-4372c68d.entry.js +1 -0
- package/dist/swirl-components/p-58ab0d31.entry.js +1 -0
- package/dist/swirl-components/p-5bea6fd3.entry.js +1 -0
- package/dist/swirl-components/p-7800ca4d.entry.js +1 -0
- package/dist/swirl-components/p-820fbb17.entry.js +1 -0
- package/dist/swirl-components/p-829fff09.entry.js +1 -0
- package/dist/swirl-components/p-99889b7b.entry.js +1 -0
- package/dist/swirl-components/{p-415a1080.entry.js → p-a36b160c.entry.js} +1 -1
- package/dist/swirl-components/p-ca27d895.entry.js +1 -0
- package/dist/swirl-components/p-cc758401.entry.js +1 -0
- package/dist/swirl-components/p-cd70ba86.entry.js +1 -0
- package/dist/swirl-components/p-ce86d711.entry.js +1 -0
- package/dist/swirl-components/p-ea76572f.entry.js +1 -0
- package/dist/swirl-components/p-f29f30f3.entry.js +1 -0
- package/dist/swirl-components/p-f71adfa0.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-skeleton-box/swirl-skeleton-box.d.ts +1 -1
- package/package.json +1 -1
- package/vscode-data.json +3 -0
- package/dist/swirl-components/p-0083a620.entry.js +0 -1
- package/dist/swirl-components/p-151d50a5.entry.js +0 -1
- package/dist/swirl-components/p-16282e45.entry.js +0 -1
- package/dist/swirl-components/p-1abf02f9.entry.js +0 -1
- package/dist/swirl-components/p-21bf69e8.entry.js +0 -1
- package/dist/swirl-components/p-360a7193.entry.js +0 -1
- package/dist/swirl-components/p-68300fb3.entry.js +0 -1
- package/dist/swirl-components/p-6dd2c30a.entry.js +0 -1
- package/dist/swirl-components/p-7da150e3.entry.js +0 -1
- package/dist/swirl-components/p-7e51e859.entry.js +0 -1
- package/dist/swirl-components/p-8489a387.entry.js +0 -1
- package/dist/swirl-components/p-9122a6b8.entry.js +0 -1
- package/dist/swirl-components/p-c88d6162.entry.js +0 -1
- package/dist/swirl-components/p-e42f25e9.entry.js +0 -1
- package/dist/swirl-components/p-f4975e1f.entry.js +0 -1
- package/dist/swirl-components/p-f4c52863.entry.js +0 -1
|
@@ -25,7 +25,7 @@ export class SwirlActionListItem {
|
|
|
25
25
|
}
|
|
26
26
|
componentDidLoad() {
|
|
27
27
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
28
|
-
this.desktopMediaQuery.
|
|
28
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
29
29
|
}
|
|
30
30
|
componentDidRender() {
|
|
31
31
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
@@ -50,7 +50,7 @@ export class SwirlActionListItem {
|
|
|
50
50
|
const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
|
|
51
51
|
const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
|
|
52
52
|
const className = classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
|
|
53
|
-
return (h(Host, { key: '
|
|
53
|
+
return (h(Host, { key: 'cf72c77a7238b89ac5737fbd26a4f9c5fb8d2aaf' }, h("button", { key: 'b883df9fba48c6f1e3fa18cb2acbddcb1c4f7903', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, h("slot", { key: '2903ffa6a0b97a9d1f30a3ab485a5f4625016893', name: "avatar" }), this.icon && (h("span", { key: '687e8b468e26a239a45829f5448e3f4fae991a18', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'db6fa0aa9ee28b495febd9278f464add1d195295', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: 'd64137da6c8345faf3fb14f6963b267e2bc83f91', class: "action-list-item__label-container" }, h("span", { key: 'a7e623ccfdaef36bd426f4e0121337926a04132c', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: 'eae257be5f0974019afdd7a1517c2efed55d397c', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: 'f6837cf900a859145f4360ec9d407ea51659c0f0', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '4aa5cd117be445a278cefcd6c7ffaea2e72a642e', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: 'c496345eea881fc5d6742710a053aa45cd4d94e6', name: "suffix" }))))));
|
|
54
54
|
}
|
|
55
55
|
static get is() { return "swirl-action-list-item"; }
|
|
56
56
|
static get encapsulation() { return "shadow"; }
|
|
@@ -113,7 +113,7 @@ export class SwirlAppLayout {
|
|
|
113
113
|
});
|
|
114
114
|
}
|
|
115
115
|
componentDidLoad() {
|
|
116
|
-
this.desktopMediaQuery.
|
|
116
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
117
117
|
queueMicrotask(() => {
|
|
118
118
|
this.isDesktop = this.desktopMediaQuery.matches;
|
|
119
119
|
this.restoreNavExpansionState();
|
|
@@ -349,14 +349,14 @@ export class SwirlAppLayout {
|
|
|
349
349
|
"app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
|
|
350
350
|
"app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
|
|
351
351
|
});
|
|
352
|
-
return (h(Host, { key: '
|
|
352
|
+
return (h(Host, { key: 'e9ce1a534b9acff55e07b798afb306e07a619a81' }, h("section", { key: '4d328d6707d7dff74ad9c6016af1ada8f1384e28', "aria-labelledby": "app-name", class: className }, h("div", { key: '2b7e59a9abf6c8d1379136e1446ce7e708974f43', class: "app-layout__grid" }, h("header", { key: 'e3e8a94655fa12bc7daa7b9ae984217654d5d8d0', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, h("span", { key: '4842de5ed8cb9d055f75426f09d4c4221ce3248c', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '24607acca33855b93dba77e0cab7b43cc19dbf6f', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (h("span", { key: 'b5e0b5c1ab49c9a77de1e6d8c9157cf907a5d331', class: "app-layout__nav-overlay-toggle" }, h("swirl-button", { key: 'de84a867b3b81da15a8a1a91feaf3d555b05d830', hideLabel: true, icon: this.navExpansionState !== "expanded"
|
|
353
353
|
? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
|
|
354
|
-
: "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: '
|
|
354
|
+
: "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (h("span", { key: '7a146162ce324567d3bd9ac1e94fb4270e841491', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '01e4e8588d68a858b3199883255a4de4a5890bf3', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: '89125641f790dfc3134265a212768b6aa8f17f25', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (h("span", { key: '695f0de46afd902d3d69bd85d74ef9915a5a9c75', class: "app-layout__navigation-controls" }, h("slot", { key: '2f239735632860d0edfe5fb967bac05b21f14452', name: "navigation-controls" })))), h("nav", { key: '3bc5df6af2555a12164b8695f2b1b637ec2d086d', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
|
|
355
355
|
this.collapsibleNavigation &&
|
|
356
|
-
this.navExpansionState === "collapsed" }, h("slot", { key: '
|
|
356
|
+
this.navExpansionState === "collapsed" }, h("slot", { key: 'd5e1ac3dc3187e1b4761b83d66d4fa98c7c4e3b4', name: "navigation" })), h("section", { key: '422313cc9de344ef4b66a37f0f69b709b6f71687', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '46ea9b5669da12d8e78151977dc55b1e197e8dcb', class: "app-layout__app-bar" }, h("span", { key: 'b35d5938aadcdffa64b8927c096bb3f5b87fa349', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '2be2762f6d1cfdf8f569006557b5c51b8fc28b36', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'edfb91e719c8b77c73e945ca138f334fca56540b', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: 'e8cc48db20975a04dd63a8dc86c39b86bbb5630f', hideLabel: true, icon: this.transitionStyle === "dialog"
|
|
357
357
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
358
358
|
: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
|
|
359
|
-
this.navExpansionState !== "expanded" && (h("span", { key: '
|
|
359
|
+
this.navExpansionState !== "expanded" && (h("span", { key: '8c96a9e2f67470bd86c72d66272306901585d81e', class: "app-layout__nav-expansion-toggle" }, h("swirl-button", { key: '36b26a023643f6fc3f43d2df344583004ee60b78', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), h("span", { key: 'b005af6a600db164a8251478d8d6f0b63dad6d48', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: '829e1e1145543dbb9658566051e69d28095ed4ee', name: "custom-app-bar-back-button" })), h("div", { key: 'e25d3fe097657c6ce637d075d7f886faebb8dcde', class: "app-layout__app-bar-content" }, h("slot", { key: '7913c7ce6ca420a4ea5c6640e57e8718c5b8cdc5', name: "app-bar" })), h("div", { key: '5f6df0102cebfcaaa4e2bde25e218e6a506c81ca', class: "app-layout__app-bar-controls" }, h("slot", { key: 'b4b19bf2bb4a51732f9ea647758b42721169aa5e', name: "app-bar-controls" })))), h("div", { key: 'a1cbbdffab4675813ee104abcdcf5722ad33242e', class: "app-layout__banner" }, h("slot", { key: '0fc317305b8d94dc2670f2731ab7ac841ddad69e', name: "banner" })), h("div", { key: '6c434829a6c78aeaea9f084735122d685b1ca636', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, h("slot", { key: '5ab35d69d738ac114725661f296f89624ce5aa21', name: "content" })), h("div", { key: '14a299ef135a30d6f8975db14bdb668e79c39b7b', class: "app-layout__bottom-bar" }, h("slot", { key: 'b6f039e3ca95a896c38bfa97943b46f21d0688e4', name: "bottom-bar" }))), h("aside", { key: '403077f3384c185e97eb0205f11a932e4c1ad76c', class: "app-layout__sidebar" }, h("header", { key: 'a951e471e8363a025b4ba1ce377e7e1ef17d7e79', class: "app-layout__custom-sidebar-header" }, h("slot", { key: 'f6e9ca768e57b30b3faa072250fe9c0cba196b5c', name: "custom-sidebar-header" })), h("header", { key: '1ff00d0311949b3bdacb38ebef268a5b6e3aa00d', class: "app-layout__sidebar-header" }, h("swirl-button", { key: 'cc5a33cb40af30a16fdd9442fc34de516022c15d', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '96241a517463e025991a2c376e450e5128086209', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'a0f11ec60312ab95b56ae4465f23cd0e60f8c3e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, h("slot", { key: 'ed6139ae751d7701098e441d9bde7faa10d6ea1c', name: "sidebar" }))), h("span", { key: 'ea00d4875343af4d76c96c3591931b342098c0e4', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: 'd29b393a6ac566bf7b3eac1b6080f7da67e25b7f', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '7952de1a32de0b06d50911abcd9267ccb323e819', name: "floating-action-button" }))))));
|
|
360
360
|
}
|
|
361
361
|
static get is() { return "swirl-app-layout"; }
|
|
362
362
|
static get encapsulation() { return "shadow"; }
|
|
@@ -32,7 +32,7 @@ export class SwirlBanner {
|
|
|
32
32
|
}
|
|
33
33
|
componentDidLoad() {
|
|
34
34
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
35
|
-
this.desktopMediaQuery.
|
|
35
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
36
36
|
}
|
|
37
37
|
disconnectedCallback() {
|
|
38
38
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -53,7 +53,7 @@ export class SwirlBanner {
|
|
|
53
53
|
const className = classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
|
|
54
54
|
"banner--has-icon": showIcon,
|
|
55
55
|
});
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'be4bdebb17f5f9611c21c9eded65510ce2cf8427' }, h("div", { key: '2153f4b7cc6565e5a525f1131ce48b74ee2ebc7a', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '010865c0f43d00bfff18d7c510f48b191bb5b025', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: 'e33800d612c9bf594e3db60acf599357b0851383', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '03e082a2db918623b06b1487fd2bdfc6f270e08e', class: "banner__text" }, this.content)), showControls && (h("div", { key: 'a2041ef90d239380260e150581b7b06ed5dbc4b2', class: "banner__controls" }, this.actionLabel && (h("button", { key: 'c8a469c6d1ac12a9ba66fc1b3a4fdf252aeb8c52', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: 'a49e1ac3a5188b0344794fd93f7d5d56f3a520d1', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: '95f2d21a48eeb6c5cc845d1dc674502ed89a0467' }))))))));
|
|
57
57
|
}
|
|
58
58
|
static get is() { return "swirl-banner"; }
|
|
59
59
|
static get encapsulation() { return "shadow"; }
|
|
@@ -40,7 +40,7 @@ export class SwirlButton {
|
|
|
40
40
|
componentDidLoad() {
|
|
41
41
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
42
42
|
this.updateFormAttribute();
|
|
43
|
-
this.desktopMediaQuery.
|
|
43
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
44
44
|
}
|
|
45
45
|
componentDidRender() {
|
|
46
46
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
@@ -95,9 +95,9 @@ export class SwirlButton {
|
|
|
95
95
|
"button--pressed": this.pressed,
|
|
96
96
|
});
|
|
97
97
|
const Tag = isLink ? "a" : "button";
|
|
98
|
-
return (h(Host, { key: '
|
|
98
|
+
return (h(Host, { key: '9c5a6973ea658678167f384b99703c2a5cc932e6', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: 'd8d39728274e53aef4a028478ecc6834539c975f', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: this.inheritFontSize
|
|
99
99
|
? { fontSize: "inherit", lineHeight: "inherit" }
|
|
100
|
-
: {} }, Boolean(this.icon) && (h("span", { key: '
|
|
100
|
+
: {} }, Boolean(this.icon) && (h("span", { key: 'f8c59b55181804a88e7fbea215955394581085d0', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'f10549e0f2a5a0ad195bf7a9622dd6764f22074d', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'd20e1abea1853532c4db9285554e08c01bbd2110', name: "icon" }))), !hideLabel && h("span", { key: '1953a32f75eab8d16f8d8b370869b58d7293b83d', class: "button__label" }, this.label), hasTag && (h("span", { key: 'ba2fd1ab2514f309dbe41b07440a1e034173756b', class: "button__tag" }, h("slot", { key: '79d7921baa4f8744ee3f1328f73f7427c4bf89ba', name: "tag" }))))));
|
|
101
101
|
}
|
|
102
102
|
static get is() { return "swirl-button"; }
|
|
103
103
|
static get encapsulation() { return "scoped"; }
|
|
@@ -26,7 +26,7 @@ export class SwirlChip {
|
|
|
26
26
|
}
|
|
27
27
|
componentDidLoad() {
|
|
28
28
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
29
|
-
this.desktopMediaQuery.
|
|
29
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
30
30
|
}
|
|
31
31
|
disconnectedCallback() {
|
|
32
32
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -49,7 +49,7 @@ export class SwirlChip {
|
|
|
49
49
|
"chip--interactive": this.interactive || this.pressed !== undefined,
|
|
50
50
|
"chip--removable": this.removable,
|
|
51
51
|
});
|
|
52
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: '3fa170e58fcdd39a85afb56ec10f8f77615eb9b9' }, h(Tag, { key: '4e96ce9cd653f9afa6a335734a25c10f92c42edc', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '9b6107cc84794c069d0ff46031b886b3f0d4b78e', class: "chip__inner" }, showAvatar && (h("span", { key: 'd8a1a42f5ddede7223b78b617171eff7dd065906', class: "chip__avatar" }, h("slot", { key: '1bc65807864057fca37fcfec7599bf3606e9384f', name: "avatar" }))), showIcon && (h("span", { key: '0baa6dc9f1241a05a11882a4bc748963241e681d', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'd215f1a4d64e8b41648aaa19571f23c90e8a1fc1', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '173af6fba33eb25cc8d07a24e38757dd5738138b', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: '46bc43fcc5da5d003bfb71991941fa758d8bae36', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: 'eb8945c1ca5f26d8d95776c6cb6de10b1b9d985a', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'c554907b6bcbfbf0b35da2091209b9256e60e545', size: 20 })))));
|
|
53
53
|
}
|
|
54
54
|
static get is() { return "swirl-chip"; }
|
|
55
55
|
static get encapsulation() { return "scoped"; }
|
|
@@ -89,7 +89,7 @@ export class SwirlDateInput {
|
|
|
89
89
|
componentDidLoad() {
|
|
90
90
|
this.setupMask();
|
|
91
91
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
92
|
-
this.desktopMediaQuery.
|
|
92
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
93
93
|
// see https://stackoverflow.com/a/27314017
|
|
94
94
|
if (this.autoFocus) {
|
|
95
95
|
this.focus();
|
|
@@ -148,7 +148,7 @@ export class SwirlDateInput {
|
|
|
148
148
|
const className = classnames("date-input", {
|
|
149
149
|
"date-input--inline": this.inline,
|
|
150
150
|
});
|
|
151
|
-
return (h(Host, { key: '
|
|
151
|
+
return (h(Host, { key: '40aee0ed18df588c7e7de56ac15d2a899229240d' }, h("div", { key: 'ec0931b258f5de0aed8f4bb474ee7fafdb6f015b', class: className }, h("input", { key: 'e167d4115c27b58cdb35b135dcbd90c048063cb2', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '8935b2ae6de652d302dacf729a1d10c1e98b1a83', swirlPopover: `popover-${this.id}` }, h("button", { key: '1f409c2f827c813b76e06aa7c10204c5e5984dc4', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '0ae84ce7a870a5a6ccb6de23db3f90aaeedafc7d', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '8770b10b3bee1fffd7a71afad25cc889882b17f4', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '26269ce9a256f6dfedceeab811a427dd642a8aab', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
|
|
152
152
|
}
|
|
153
153
|
static get is() { return "swirl-date-input"; }
|
|
154
154
|
static get encapsulation() { return "scoped"; }
|
|
@@ -12,7 +12,7 @@ export class SwirlInlineError {
|
|
|
12
12
|
}
|
|
13
13
|
componentDidLoad() {
|
|
14
14
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
15
|
-
this.desktopMediaQuery.
|
|
15
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
16
16
|
}
|
|
17
17
|
disconnectedCallback() {
|
|
18
18
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -33,7 +33,7 @@ export class SwirlInlineError {
|
|
|
33
33
|
}
|
|
34
34
|
render() {
|
|
35
35
|
const className = classnames("inline-error", `inline-error--size-${this.size}`);
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '03ae6eed446e44d9298186c4c4290636e77677b5' }, h("span", { key: 'a15e36cd1849e826a6cd578d50d3582e34bf1144', class: className, part: "inline-error" }, h("span", { key: 'c81ca9d7f26de1c5cd4d70a806b7e58b0baa3f6d', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: 'c2b57b25a9219581521dfe043e54c2580f2b198f' })), h("span", { key: '0709c36c7aa4b4bb6c415b1175d3f7d2564bd0d6', class: "inline-error__message" }, this.message))));
|
|
37
37
|
}
|
|
38
38
|
static get is() { return "swirl-inline-error"; }
|
|
39
39
|
static get encapsulation() { return "shadow"; }
|
|
@@ -15,7 +15,7 @@ export class SwirlInlineStatus {
|
|
|
15
15
|
}
|
|
16
16
|
componentDidLoad() {
|
|
17
17
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
18
|
-
this.desktopMediaQuery.
|
|
18
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
19
19
|
}
|
|
20
20
|
disconnectedCallback() {
|
|
21
21
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -39,7 +39,7 @@ export class SwirlInlineStatus {
|
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
41
|
const className = classnames("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
|
|
42
|
-
return (h(Host, { key: '
|
|
42
|
+
return (h(Host, { key: 'b89c28933bfaf10abc6df61372f46cc8d2e3deb1' }, h("span", { key: '26877b4b62596a851d4e01f0b646d9fa528ef8cb', class: className, part: "inline-status" }, this.icon && (h("span", { key: 'dfb79bb2dd83a3d1966de73079517dd2dabbfd95', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'ff61f8fed2c5c17cd0822fb3e92e5f1441a5f342', class: "inline-status__message" }, this.message))));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "swirl-inline-status"; }
|
|
45
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -248,7 +248,8 @@ export class SwirlLightbox {
|
|
|
248
248
|
});
|
|
249
249
|
}
|
|
250
250
|
getCurrentFileName() {
|
|
251
|
-
|
|
251
|
+
const activeSlide = this.slides[this.activeSlideIndex];
|
|
252
|
+
return activeSlide?.fileName || activeSlide?.file?.split("/").pop();
|
|
252
253
|
}
|
|
253
254
|
getCurrentFileType() {
|
|
254
255
|
return this.slides[this.activeSlideIndex]?.type;
|
|
@@ -290,7 +291,7 @@ export class SwirlLightbox {
|
|
|
290
291
|
"lightbox--hide-menu": !hasMenuItems,
|
|
291
292
|
"lightbox--hide-toolbar": !hasToolbar,
|
|
292
293
|
});
|
|
293
|
-
return (h(Host, { key: '
|
|
294
|
+
return (h(Host, { key: 'd3d03598de6bc850b14983c65f50c4956f337db4', onKeydown: this.onKeyDown }, h("section", { key: '035520946bc86d9fd39f69a929429155f39128ac', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el), role: "dialog", tabIndex: this.isOpen ? 0 : -1 }, h("div", { key: '924c6ddcf773f739a02f3eac40a85bebb05b00d8', class: "lightbox__body", role: "document" }, h("header", { key: 'abde93a32e109d23045b60ef021b5a6e395c5106', class: "lightbox__header" }, h("button", { key: 'cd106ff12b26c1cd4f20eff9b9b606c1eb3c2b0c', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick }, h("swirl-icon-close", { key: '3daadf28b1572117fd80ef2ee5a01c9a5bf553a1' })), h("div", { key: '09faa1918dd1d158fb8db1ac62c92e9b7ef18dfc', class: "lightbox__toolbar" }, h("slot", { key: '494edef3a0449c2605b55abde0be66f92ad1191b', name: "toolbar" })), !this.hideMenu && (h("swirl-popover-trigger", { key: '48d9ea9f7fb0a8a56a402d2f52b72d82e2fafb0b', swirlPopover: this.menu }, h("button", { key: '4f8a369b128d508bd720e0fa66a8a45114d762d4', "aria-label": this.menuTriggerLabel, class: "lightbox__menu-button" }, h("swirl-icon-more-vertikal", { key: '882646fcab72ca10537c6a42b8109bdd38eb8283' }))))), h("div", { key: 'bb96acbb12f5cc7fa2fa7769bf2ee0257f1c2461', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, h("div", { key: '60d4900f96d5833894267c2ad07c9880425ff010', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'd29256b029b979ff95c214577cfedc1791a16b28', onSlotchange: this.registerSlides }))), h("div", { key: '6413fa0b0c71cfc02e53297f8593cc094bcc3bfe', class: "lightbox__controls" }, h("button", { key: 'fc77b0028b862e949d007b34c2e19e6beea7ed59', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick }, h("swirl-icon-arrow-left", { key: 'a577e41ca07cdfce79f1800f34b6ad55f0fd4fe0' })), h("button", { key: '69dca0c03facabd87f06a684c2f9cd5b634c67a9', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick }, h("swirl-icon-arrow-right", { key: '43672103b69379f241dfb29dd136d4b44415af1e' }))), showPagination && (h("span", { key: '59c60639d329faa44bbcd9c3aaee602c8bc2a4ed', class: "lightbox__pagination" }, h("span", { key: '40fcf4e2a7a9363811aaa7ee68830d4f560f2d8d', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))), !this.hideMenu && (h("swirl-popover", { key: '12c4c54e98cf2e3f26f97b9a5cc772e1ebc65eb6', animation: "scale-in-y", disableScrollLock: true, id: "slide-menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'a02a33c1b7691396289aadb12fdc19086f13f72d' }, h("div", { key: 'dfe31fde3473c57810bdaf2b6c0e203bbe1fc588', class: "lightbox__meta" }, currentThumbnailUrl && (h("div", { key: '93539bc099e182a312b4d33e5bb75edd1a5acd2e', class: "lightbox__thumbnail" }, h("swirl-thumbnail", { key: '7bb1a238d96e2f85784703539e2201a3092f8c9e', alt: "", src: currentThumbnailUrl }))), h("div", { key: '59e97cd3a4dcee146524968816b45be44c8707a3', class: "lightbox__file-info" }, h("swirl-text", { key: '5e54b16cd8f73a15831d481f2d2067e1f0104f58', truncate: true, weight: "semibold" }, currentFileName), h("swirl-text", { key: 'd910adcec06527a16a7af587e7318b339ba89141', color: "subdued", size: "sm", truncate: true }, currentFileType))), hasMenuItems && h("swirl-separator", { key: '09b367a3dc2d06a3c5cfc80b436b1ddd747cca79' }), h("swirl-action-list", { key: '62cd42d711c2efe345c2f71ee0afe0f78b9b806b' }, this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '7a93b6d1de3eac5d1af132d1feedae7912b61498', icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: 'ef2f9c8e826085094737fec86b19526bc7ee1c7b', name: "menu-items" }))))))));
|
|
294
295
|
}
|
|
295
296
|
static get is() { return "swirl-lightbox"; }
|
|
296
297
|
static get encapsulation() { return "shadow"; }
|
|
@@ -30,7 +30,7 @@ const Template = (args) => {
|
|
|
30
30
|
trigger.label = "Open lightbox";
|
|
31
31
|
trigger.addEventListener("click", () => element.open());
|
|
32
32
|
element.innerHTML = `
|
|
33
|
-
<swirl-file-viewer description="Another cute dog in a blanket." file="/sample-2.jpg" thumbnail-url="/sample-2.jpg" type="image/jpeg"></swirl-file-viewer>
|
|
33
|
+
<swirl-file-viewer description="Another cute dog in a blanket." file="/sample-2.jpg" thumbnail-url="/sample-2.jpg" type="image/jpeg" file-name="Cute dog"></swirl-file-viewer>
|
|
34
34
|
<swirl-file-viewer description="Cute dog in a blanket." file="/sample.jpg" thumbnail-url="/sample.jpg" type="image/jpeg"></swirl-file-viewer>
|
|
35
35
|
<swirl-file-viewer description="Black puppy." file="/sample-3.jpg" thumbnail-url="/sample-3.jpg" type="image/jpeg"></swirl-file-viewer>
|
|
36
36
|
<swirl-file-viewer file="/sample.mp4" type="video/mp4"></swirl-file-viewer>
|
|
@@ -103,7 +103,7 @@ export class SwirlMenu {
|
|
|
103
103
|
this.observeSlotChanges();
|
|
104
104
|
}
|
|
105
105
|
componentDidLoad() {
|
|
106
|
-
this.mobileMediaQuery.
|
|
106
|
+
this.mobileMediaQuery.addEventListener("change", this.mediaQueryHandler);
|
|
107
107
|
this.parentMenu = closestPassShadow(this.el.parentElement, "swirl-menu");
|
|
108
108
|
this.swirlPopover = closestPassShadow(this.el, "swirl-popover");
|
|
109
109
|
this.rootMenu = parentsPassShadow(this.el, "swirl-menu").pop();
|
|
@@ -287,7 +287,7 @@ export class SwirlMenu {
|
|
|
287
287
|
"menu--mobile": this.mobile,
|
|
288
288
|
"menu--root": isTopLevelMenu,
|
|
289
289
|
});
|
|
290
|
-
return (h(Host, { key: '
|
|
290
|
+
return (h(Host, { key: '6902b3173cdb663accf161ccbae6ef7e6e7bcf5a' }, h("div", { key: '33fecf3dcb700082b1ca08ae37125a6c3d50ab2a', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: '10a3926fdb1caf2726df95a4ee4a783dcd61ee19', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '425ae346854eb859d46b028ba72501d6e14ee605', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: 'add7164401a23532b6e618207d61c868f5455230', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '8e13f2cb97b571d2e0568ebcff34b0ea8bd55571', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: '7c5a5e3cc7ad96969e4bf7452e0bdb3bb7b97ea5', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: '0bc062508d7f2c31e6bbf1e9bb0cffed63756f9e', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '2b0e92f3446b2b9699247d4473bf64ac2a1e25f5', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
|
|
291
291
|
? {
|
|
292
292
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
293
293
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
@@ -298,7 +298,7 @@ export class SwirlMenu {
|
|
|
298
298
|
? `calc(-100% * ${this.activeLevel})`
|
|
299
299
|
: "100%",
|
|
300
300
|
}
|
|
301
|
-
: undefined }, h("slot", { key: '
|
|
301
|
+
: undefined }, h("slot", { key: '0458992fd30bde4b5b3a5fa89322aae6617be081' })))));
|
|
302
302
|
}
|
|
303
303
|
static get is() { return "swirl-menu"; }
|
|
304
304
|
static get encapsulation() { return "shadow"; }
|
|
@@ -44,7 +44,7 @@ export class SwirlOptionListItem {
|
|
|
44
44
|
componentDidLoad() {
|
|
45
45
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
46
46
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
47
|
-
this.desktopMediaQuery.
|
|
47
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
48
48
|
}
|
|
49
49
|
disconnectedCallback() {
|
|
50
50
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -71,9 +71,9 @@ export class SwirlOptionListItem {
|
|
|
71
71
|
"option-list-item--selected": this.selected,
|
|
72
72
|
"option-list-item--show-avatar": showAvatar,
|
|
73
73
|
});
|
|
74
|
-
return (h(Host, { key: '
|
|
74
|
+
return (h(Host, { key: 'af019b6745db50086125eafef092fefec4529d9b' }, h("div", { key: 'e5fae098a7c87f3fcd569971e5befe1e937e6187', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
|
|
75
75
|
? `option-list-item-${this.elementId}-description`
|
|
76
|
-
: undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '
|
|
76
|
+
: undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '4bb4605bec790297e858dc191ce739ca7a7fc15f', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '187934100efed7d64177dab42dfb2cf8f4fa3bcd', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '73383423f4318beb554d29d19d3c084e644f2d9c', class: "option-list-item__checkbox" }, h("span", { key: '9d39a8728e8d3d349df5f29b8064ad3991e7c69a', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '19835649797e70c0163cef6ad77373141aa17ffb', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: '6deeb6c90a6c65c26a8af36973ad4562cc86c06f', class: "option-list-item__avatar" }, h("slot", { key: '733db89be34cbcdd32c3831ef910628ff4da1e0a', name: "avatar" })), h("span", { key: '103881477943772f336b9e86e54ded03a66e7a42', class: "option-list-item__label-container" }, h("span", { key: 'fe86bafe56b7f9f66cf846a4b8fb49174b5aaca7', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '0242394567de7fcd7f05c3827dac275b2159a60f', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '665b080344e85b02111ebd390acc3e46a26cf054', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '112f73e489c034a85264fcc47d8bb89104b8ba53', size: this.iconSize })))), this.allowDrag && (h("button", { key: 'c8e74ab1c619b02008b5012ecc3369b4c23c1584', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: '8b45eb82b6616f811a3b54384cca5843ad8adc2c', size: this.iconSize })))));
|
|
77
77
|
}
|
|
78
78
|
static get is() { return "swirl-option-list-item"; }
|
|
79
79
|
static get encapsulation() { return "scoped"; }
|
package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js
CHANGED
|
@@ -17,7 +17,7 @@ export class SwirlResourceListFileItem {
|
|
|
17
17
|
}
|
|
18
18
|
componentDidLoad() {
|
|
19
19
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
20
|
-
this.desktopMediaQuery.
|
|
20
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
21
21
|
}
|
|
22
22
|
disconnectedCallback() {
|
|
23
23
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -37,7 +37,7 @@ export class SwirlResourceListFileItem {
|
|
|
37
37
|
const className = classnames("resource-list-file-item", {
|
|
38
38
|
"resource-list-file-item--has-control": showSpinner || showRemoveButton,
|
|
39
39
|
});
|
|
40
|
-
return (h(Host, { key: '
|
|
40
|
+
return (h(Host, { key: 'd77b3a45aff46139e8af03ccdbeb81e9da91370b', role: "row" }, h("div", { key: '53df0ea414c05513cee0a17b661767a06442a954', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '4a72d58087710540e5c74f3cee050f91d48bc6f6', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '33d67a51ce845f06f873b1ce61f3b6887ff9637b', class: "resource-list-file-item__label-container" }, h("span", { key: 'b080aa30dbb7b99c1fc888d90a2b69ab021cdd93', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'b6c86787f6f8dbe4fb22f30b2027f63d7d9d8d8c', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: 'f55cafd40457a920047a80f9d537aed786134d18', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'ccf0276e67f9d87ef36ede6f74f9e25b5ff6618e', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'd04e7bbaafbb626c891c3afdb02b20f2362c459d', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '2fa064bbfa49c90c45f8106aaac2ae4fe1f1b26d', size: "s" }))), showRemoveButton && (h("span", { key: '53ae0a5d63299d4367735ca297d9dd7406c82176', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: 'a7298dfdae92ef380516d5dadac8d7fdff8c7e6a', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "swirl-resource-list-file-item"; }
|
|
43
43
|
static get encapsulation() { return "scoped"; }
|
|
@@ -74,7 +74,7 @@ export class SwirlResourceListItem {
|
|
|
74
74
|
componentDidLoad() {
|
|
75
75
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
76
76
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
77
|
-
this.desktopMediaQuery.
|
|
77
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
78
78
|
this.makeControlUnfocusable();
|
|
79
79
|
if (Boolean(this.menuTriggerId)) {
|
|
80
80
|
console.warn('[Swirl] The "menu-trigger-id" prop of swirl-resource-list-item is deprecated and will be removed with the next major release. Please use the "control" slot to add a menu button instead. https://swirl-storybook.flip-app.dev/?path=/docs/components-swirlresourcelistitem--docs');
|
|
@@ -154,7 +154,7 @@ export class SwirlResourceListItem {
|
|
|
154
154
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
155
155
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
156
156
|
});
|
|
157
|
-
return (h(Host, { key: '
|
|
157
|
+
return (h(Host, { key: '9ab8d5b6c71f699ada0554534d05231bcab05b4f', role: "row" }, h("div", { key: 'f1e3b59de7165503220e230256fe0dbaf584dbf1', class: className, role: "gridcell" }, h(Tag, { key: 'c018cd666438e26be62cceb14fc5b659298cb66c', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'eb0648775d1a8d3f6279aaba67df5fc69078bc14', class: "resource-list-item__media" }, h("slot", { key: 'f9eed6eee88cfd13484830592bcde5ec9a8ff2fd', name: "media" }))), h("span", { key: 'abdf852d91330d353b3fa0d79ef286f8a654ed17', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '31d2e2095cfa5fa6d8c0ff6c9cd74352215bf31b', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'bba851aebfc9ae97d8e86bc377b2645f2c008f40', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '1b92b21080990b5cd922becbca08ef8d491470e3', class: "resource-list-item__meta" }, h("span", { key: '87ddd62278eaded6e154af605dca7f568b1c1b24', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: '74e13c780b46e097e429289f343855010abd262a', class: "resource-list-item__badges" }, h("slot", { key: '2684ae7f3771da2c15a91abe11e5376c092b5418', name: "badges" }))))), this.selectable && (h("span", { key: 'da36e0f78c70ef6639bc5969fed63e8e7191f69b', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'a28270546758f11d38a4503b566d93b26cdbe8c5', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'a302ecfae71661cd95adfee5a4a1479288b90131' }))))), h("span", { key: '3e85d9ed06e4d6dceee9db5c67799b83ef3e6701', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '59321aba61fd5c10732db1281afc7d3487822bff', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '9f9d329b6be6921cc2a346462d6191e306ab8f6a', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '3171ea36c90c935bc9e3dcfd5227d4953a87a899', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'f2326a36dd18d5084fbc2c328649fdf806e81135', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '295742018c703c5a7c8da55c9e3c93f3be723407', size: this.iconSize })))));
|
|
158
158
|
}
|
|
159
159
|
static get is() { return "swirl-resource-list-item"; }
|
|
160
160
|
static get encapsulation() { return "scoped"; }
|
|
@@ -36,7 +36,7 @@ export class SwirlSearch {
|
|
|
36
36
|
}
|
|
37
37
|
componentDidLoad() {
|
|
38
38
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
39
|
-
this.desktopMediaQuery.
|
|
39
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
40
40
|
// see https://stackoverflow.com/a/27314017
|
|
41
41
|
if (this.autoFocus) {
|
|
42
42
|
setTimeout(() => {
|
|
@@ -64,7 +64,7 @@ export class SwirlSearch {
|
|
|
64
64
|
const className = classnames("search", `search--variant-${this.variant}`, {
|
|
65
65
|
"search--disabled": this.disabled,
|
|
66
66
|
});
|
|
67
|
-
return (h(Host, { key: '
|
|
67
|
+
return (h(Host, { key: 'f867baa30dafa694e189375973b69ee3827799ad' }, h("span", { key: '62bb2ef944cb42d3d2bec75c5ab1dd5cd5475bc9', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'a96176fe032074b18d6dff234eb22cb9dd64a060', "aria-hidden": "true", class: "search__icon" }), h("input", { key: 'a4844bcc0b4841327500b0ea716e7de4134692d4', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: '7d45015ee44044bdf388606f77b37593e27f001a', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '2fa532b767afe00feaf1d7c31999ae1a266476c6' }))))));
|
|
68
68
|
}
|
|
69
69
|
static get is() { return "swirl-search"; }
|
|
70
70
|
static get encapsulation() { return "scoped"; }
|
|
@@ -10,13 +10,13 @@ export class SwirlSkeletonBox {
|
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
12
|
const className = classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '23da455bc33e38b34976684865dc0051585c3040', style: {
|
|
14
14
|
width: !Boolean(this.width) && !Boolean(this.aspectRatio)
|
|
15
15
|
? "100%"
|
|
16
16
|
: undefined,
|
|
17
|
-
} }, h("div", { key: '
|
|
17
|
+
} }, h("div", { key: 'a7226d23181a3e1ea3a824cc37e9ce6e7b2f34cb', class: className, style: {
|
|
18
18
|
aspectRatio: this.aspectRatio,
|
|
19
|
-
borderRadius: this.borderRadius !== "pill"
|
|
19
|
+
borderRadius: this.borderRadius !== "pill" && this.borderRadius !== "none"
|
|
20
20
|
? `var(--s-border-radius-${this.borderRadius})`
|
|
21
21
|
: undefined,
|
|
22
22
|
height: this.height,
|
|
@@ -77,7 +77,7 @@ export class SwirlSkeletonBox {
|
|
|
77
77
|
"mutable": false,
|
|
78
78
|
"complexType": {
|
|
79
79
|
"original": "SwirlSkeletonBoxBorderRadius",
|
|
80
|
-
"resolved": "\"base\" | \"pill\" | \"s\" | \"sm\"",
|
|
80
|
+
"resolved": "\"base\" | \"none\" | \"pill\" | \"s\" | \"sm\"",
|
|
81
81
|
"references": {
|
|
82
82
|
"SwirlSkeletonBoxBorderRadius": {
|
|
83
83
|
"location": "local",
|
|
@@ -101,7 +101,7 @@ export class SwirlTextInput {
|
|
|
101
101
|
}
|
|
102
102
|
componentDidLoad() {
|
|
103
103
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
104
|
-
this.desktopMediaQuery.
|
|
104
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
105
105
|
// see https://stackoverflow.com/a/27314017
|
|
106
106
|
if (this.autoFocus) {
|
|
107
107
|
setTimeout(() => {
|
|
@@ -177,7 +177,7 @@ export class SwirlTextInput {
|
|
|
177
177
|
"text-input--inline": this.inline,
|
|
178
178
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
179
179
|
});
|
|
180
|
-
return (h(Host, { key: '
|
|
180
|
+
return (h(Host, { key: 'e57f2ddeb2239ceffd449efacbc6bddf17777e2c' }, h("div", { key: '62eb95ad562fe4cbe7fd56cc9ac0b8d07b97afdf', class: className }, this.prefixLabel && (h("span", { key: 'c7d38898067ec7fdd924167e037323bacef742e3', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: 'ea0fff8fe61f6323d39dea8490fb722587e58080', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2ae0f456126a27f0256b5dfd851da830ea379018', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: 'ea47c05178f0ce61188ca8ed15f3bbe6f132b1dc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: 'd419f462f82b28bc6c8602f3d4cf65d2649d0234', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '565f3c92ef3fd90d1d43c673b94feec9bcf213cf', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'ec02752a5258a06827fc156fd4b4cd5a0e712751', class: "text-input__stepper" }, h("button", { key: 'c698d2fda7bf64b338920410ef0c894955cf6372', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '0f662dd62d1a315d288622a31e4f0dfb0ee530e0', size: this.iconSize })), h("button", { key: '49fc4ece3d4b67e3b6fa38ecdb681edf5e2e0791', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: '49de410032a3f513ba78e7f6a986645441db80eb', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: 'c2e4a3b9e5dc0c1eb4ef0ee686a7dd2cd2c1a6d7', class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
|
|
181
181
|
}
|
|
182
182
|
static get is() { return "swirl-text-input"; }
|
|
183
183
|
static get encapsulation() { return "scoped"; }
|
|
@@ -74,7 +74,7 @@ export class SwirlTimeInput {
|
|
|
74
74
|
componentDidLoad() {
|
|
75
75
|
this.setupMask();
|
|
76
76
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
77
|
-
this.desktopMediaQuery.
|
|
77
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
78
78
|
// see https://stackoverflow.com/a/27314017
|
|
79
79
|
if (this.autoFocus) {
|
|
80
80
|
setTimeout(() => {
|
|
@@ -117,7 +117,7 @@ export class SwirlTimeInput {
|
|
|
117
117
|
const className = classnames("time-input", {
|
|
118
118
|
"time-input--inline": this.inline,
|
|
119
119
|
});
|
|
120
|
-
return (h(Host, { key: '
|
|
120
|
+
return (h(Host, { key: '2c4924715b04c0e77299b48a29fe7ec044229884' }, h("div", { key: 'b8bceee82f8ee07a206515e8f3bf3ba6c7fd6320', class: className }, h("input", { key: 'd06d11faf603e2c8526ab780ac64bbe10b61d562', "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: 'b84dd53cb89b2532904f0978c951dcab01996d33', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '0c6df7dcd4388bfd2b06c6e70e2a30e36474ea3a', size: this.iconSize })))));
|
|
121
121
|
}
|
|
122
122
|
static get is() { return "swirl-time-input"; }
|
|
123
123
|
static get encapsulation() { return "scoped"; }
|
|
@@ -24,7 +24,7 @@ export class SwirlToast {
|
|
|
24
24
|
componentDidLoad() {
|
|
25
25
|
this.startTimer();
|
|
26
26
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
27
|
-
this.desktopMediaQuery.
|
|
27
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
28
28
|
}
|
|
29
29
|
disconnectedCallback() {
|
|
30
30
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -53,7 +53,7 @@ export class SwirlToast {
|
|
|
53
53
|
}
|
|
54
54
|
render() {
|
|
55
55
|
const className = classnames("toast", `toast--intent-${this.intent}`);
|
|
56
|
-
return (h(Host, { key: '
|
|
56
|
+
return (h(Host, { key: 'ff494adb183bfd3b0cf64f854370f65d9025688d' }, h("div", { key: 'ec42812f4e085d3853d529c5155847d3166d7235', class: className }, this.icon && (h("span", { key: '9565980b265dfb58f2d3f4625642c4b42b286bb0', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '20a9d20e6a1250d8584768db191033b7dca0faeb', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '59a95eece747a0a434c6730c84ca8138b7036b5c' })), h("button", { key: '413e402fb6504c7791d68e21b2dd333a79fb4e2e', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '76fb12bf16bdd0f7dfb1d51becf2774e438921a3', ref: (el) => (this.dismissIconEl = el) }))))));
|
|
57
57
|
}
|
|
58
58
|
static get is() { return "swirl-toast"; }
|
|
59
59
|
static get encapsulation() { return "shadow"; }
|