@getflip/swirl-components 0.297.0 → 0.298.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/components.json +1 -1
- 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-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-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 +0 -22
- 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-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-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 +0 -22
- 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-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-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-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-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-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/package.json +1 -1
- 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-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-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
package/components.json
CHANGED
|
@@ -127,7 +127,7 @@ const SwirlActionListItem = class {
|
|
|
127
127
|
}
|
|
128
128
|
componentDidLoad() {
|
|
129
129
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
130
|
-
this.desktopMediaQuery.
|
|
130
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
131
131
|
}
|
|
132
132
|
componentDidRender() {
|
|
133
133
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
@@ -152,7 +152,7 @@ const SwirlActionListItem = class {
|
|
|
152
152
|
const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
|
|
153
153
|
const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
|
|
154
154
|
const className = index$1.classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
|
|
155
|
-
return (index.h(index.Host, { key: '
|
|
155
|
+
return (index.h(index.Host, { key: 'cf72c77a7238b89ac5737fbd26a4f9c5fb8d2aaf' }, index.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" }, index.h("slot", { key: '2903ffa6a0b97a9d1f30a3ab485a5f4625016893', name: "avatar" }), this.icon && (index.h("span", { key: '687e8b468e26a239a45829f5448e3f4fae991a18', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: 'db6fa0aa9ee28b495febd9278f464add1d195295', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), index.h("span", { key: 'd64137da6c8345faf3fb14f6963b267e2bc83f91', class: "action-list-item__label-container" }, index.h("span", { key: 'a7e623ccfdaef36bd426f4e0121337926a04132c', class: "action-list-item__label" }, this.label), this.description && (index.h("span", { key: 'eae257be5f0974019afdd7a1517c2efed55d397c', class: "action-list-item__description" }, this.description))), showBadge && (index.h("span", { key: 'f6837cf900a859145f4360ec9d407ea51659c0f0', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (index.h("span", { key: '4aa5cd117be445a278cefcd6c7ffaea2e72a642e', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, index.h("slot", { key: 'c496345eea881fc5d6742710a053aa45cd4d94e6', name: "suffix" }))))));
|
|
156
156
|
}
|
|
157
157
|
get el() { return index.getElement(this); }
|
|
158
158
|
};
|
|
@@ -115,7 +115,7 @@ const SwirlAppLayout = class {
|
|
|
115
115
|
});
|
|
116
116
|
}
|
|
117
117
|
componentDidLoad() {
|
|
118
|
-
this.desktopMediaQuery.
|
|
118
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
119
119
|
queueMicrotask(() => {
|
|
120
120
|
this.isDesktop = this.desktopMediaQuery.matches;
|
|
121
121
|
this.restoreNavExpansionState();
|
|
@@ -351,14 +351,14 @@ const SwirlAppLayout = class {
|
|
|
351
351
|
"app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
|
|
352
352
|
"app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
|
|
353
353
|
});
|
|
354
|
-
return (index.h(index.Host, { key: '
|
|
354
|
+
return (index.h(index.Host, { key: 'e9ce1a534b9acff55e07b798afb306e07a619a81' }, index.h("section", { key: '4d328d6707d7dff74ad9c6016af1ada8f1384e28', "aria-labelledby": "app-name", class: className }, index.h("div", { key: '2b7e59a9abf6c8d1379136e1446ce7e708974f43', class: "app-layout__grid" }, index.h("header", { key: 'e3e8a94655fa12bc7daa7b9ae984217654d5d8d0', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, index.h("span", { key: '4842de5ed8cb9d055f75426f09d4c4221ce3248c', class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { key: '24607acca33855b93dba77e0cab7b43cc19dbf6f', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (index.h("span", { key: 'b5e0b5c1ab49c9a77de1e6d8c9157cf907a5d331', class: "app-layout__nav-overlay-toggle" }, index.h("swirl-button", { key: 'de84a867b3b81da15a8a1a91feaf3d555b05d830', hideLabel: true, icon: this.navExpansionState !== "expanded"
|
|
355
355
|
? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
|
|
356
|
-
: "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (index.h("span", { key: '
|
|
356
|
+
: "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (index.h("span", { key: '7a146162ce324567d3bd9ac1e94fb4270e841491', class: "app-layout__navigation-back-button" }, index.h("swirl-button", { key: '01e4e8588d68a858b3199883255a4de4a5890bf3', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { key: '89125641f790dfc3134265a212768b6aa8f17f25', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (index.h("span", { key: '695f0de46afd902d3d69bd85d74ef9915a5a9c75', class: "app-layout__navigation-controls" }, index.h("slot", { key: '2f239735632860d0edfe5fb967bac05b21f14452', name: "navigation-controls" })))), index.h("nav", { key: '3bc5df6af2555a12164b8695f2b1b637ec2d086d', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
|
|
357
357
|
this.collapsibleNavigation &&
|
|
358
|
-
this.navExpansionState === "collapsed" }, index.h("slot", { key: '
|
|
358
|
+
this.navExpansionState === "collapsed" }, index.h("slot", { key: 'd5e1ac3dc3187e1b4761b83d66d4fa98c7c4e3b4', name: "navigation" })), index.h("section", { key: '422313cc9de344ef4b66a37f0f69b709b6f71687', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { key: '46ea9b5669da12d8e78151977dc55b1e197e8dcb', class: "app-layout__app-bar" }, index.h("span", { key: 'b35d5938aadcdffa64b8927c096bb3f5b87fa349', class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { key: '2be2762f6d1cfdf8f569006557b5c51b8fc28b36', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { key: 'edfb91e719c8b77c73e945ca138f334fca56540b', class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { key: 'e8cc48db20975a04dd63a8dc86c39b86bbb5630f', hideLabel: true, icon: this.transitionStyle === "dialog"
|
|
359
359
|
? "<swirl-icon-close></swirl-icon-close>"
|
|
360
360
|
: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
|
|
361
|
-
this.navExpansionState !== "expanded" && (index.h("span", { key: '
|
|
361
|
+
this.navExpansionState !== "expanded" && (index.h("span", { key: '8c96a9e2f67470bd86c72d66272306901585d81e', class: "app-layout__nav-expansion-toggle" }, index.h("swirl-button", { key: '36b26a023643f6fc3f43d2df344583004ee60b78', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), index.h("span", { key: 'b005af6a600db164a8251478d8d6f0b63dad6d48', class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { key: '829e1e1145543dbb9658566051e69d28095ed4ee', name: "custom-app-bar-back-button" })), index.h("div", { key: 'e25d3fe097657c6ce637d075d7f886faebb8dcde', class: "app-layout__app-bar-content" }, index.h("slot", { key: '7913c7ce6ca420a4ea5c6640e57e8718c5b8cdc5', name: "app-bar" })), index.h("div", { key: '5f6df0102cebfcaaa4e2bde25e218e6a506c81ca', class: "app-layout__app-bar-controls" }, index.h("slot", { key: 'b4b19bf2bb4a51732f9ea647758b42721169aa5e', name: "app-bar-controls" })))), index.h("div", { key: 'a1cbbdffab4675813ee104abcdcf5722ad33242e', class: "app-layout__banner" }, index.h("slot", { key: '0fc317305b8d94dc2670f2731ab7ac841ddad69e', name: "banner" })), index.h("div", { key: '6c434829a6c78aeaea9f084735122d685b1ca636', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, index.h("slot", { key: '5ab35d69d738ac114725661f296f89624ce5aa21', name: "content" })), index.h("div", { key: '14a299ef135a30d6f8975db14bdb668e79c39b7b', class: "app-layout__bottom-bar" }, index.h("slot", { key: 'b6f039e3ca95a896c38bfa97943b46f21d0688e4', name: "bottom-bar" }))), index.h("aside", { key: '403077f3384c185e97eb0205f11a932e4c1ad76c', class: "app-layout__sidebar" }, index.h("header", { key: 'a951e471e8363a025b4ba1ce377e7e1ef17d7e79', class: "app-layout__custom-sidebar-header" }, index.h("slot", { key: 'f6e9ca768e57b30b3faa072250fe9c0cba196b5c', name: "custom-sidebar-header" })), index.h("header", { key: '1ff00d0311949b3bdacb38ebef268a5b6e3aa00d', class: "app-layout__sidebar-header" }, index.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 }), index.h("swirl-heading", { key: '96241a517463e025991a2c376e450e5128086209', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { key: 'a0f11ec60312ab95b56ae4465f23cd0e60f8c3e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, index.h("slot", { key: 'ed6139ae751d7701098e441d9bde7faa10d6ea1c', name: "sidebar" }))), index.h("span", { key: 'ea00d4875343af4d76c96c3591931b342098c0e4', class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { key: 'd29b393a6ac566bf7b3eac1b6080f7da67e25b7f', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { key: '7952de1a32de0b06d50911abcd9267ccb323e819', name: "floating-action-button" }))))));
|
|
362
362
|
}
|
|
363
363
|
get el() { return index.getElement(this); }
|
|
364
364
|
static get watchers() { return {
|
|
@@ -744,7 +744,7 @@ const SwirlResourceListItem = class {
|
|
|
744
744
|
componentDidLoad() {
|
|
745
745
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
746
746
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
747
|
-
this.desktopMediaQuery.
|
|
747
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
748
748
|
this.makeControlUnfocusable();
|
|
749
749
|
if (Boolean(this.menuTriggerId)) {
|
|
750
750
|
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');
|
|
@@ -824,7 +824,7 @@ const SwirlResourceListItem = class {
|
|
|
824
824
|
"resource-list-item--wrap-description": this.descriptionWrap,
|
|
825
825
|
"resource-list-item--wrap-label": this.labelWrap,
|
|
826
826
|
});
|
|
827
|
-
return (index.h(index.Host, { key: '
|
|
827
|
+
return (index.h(index.Host, { key: '9ab8d5b6c71f699ada0554534d05231bcab05b4f', role: "row" }, index.h("div", { key: 'f1e3b59de7165503220e230256fe0dbaf584dbf1', class: className, role: "gridcell" }, index.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 && (index.h("span", { key: 'eb0648775d1a8d3f6279aaba67df5fc69078bc14', class: "resource-list-item__media" }, index.h("slot", { key: 'f9eed6eee88cfd13484830592bcde5ec9a8ff2fd', name: "media" }))), index.h("span", { key: 'abdf852d91330d353b3fa0d79ef286f8a654ed17', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: '31d2e2095cfa5fa6d8c0ff6c9cd74352215bf31b', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: 'bba851aebfc9ae97d8e86bc377b2645f2c008f40', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: '1b92b21080990b5cd922becbca08ef8d491470e3', class: "resource-list-item__meta" }, index.h("span", { key: '87ddd62278eaded6e154af605dca7f568b1c1b24', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: '74e13c780b46e097e429289f343855010abd262a', class: "resource-list-item__badges" }, index.h("slot", { key: '2684ae7f3771da2c15a91abe11e5376c092b5418', name: "badges" }))))), this.selectable && (index.h("span", { key: 'da36e0f78c70ef6639bc5969fed63e8e7191f69b', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: 'a28270546758f11d38a4503b566d93b26cdbe8c5', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'a302ecfae71661cd95adfee5a4a1479288b90131' }))))), index.h("span", { key: '3e85d9ed06e4d6dceee9db5c67799b83ef3e6701', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: '59321aba61fd5c10732db1281afc7d3487822bff', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '9f9d329b6be6921cc2a346462d6191e306ab8f6a', swirlPopover: this.menuTriggerId }, index.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 && (index.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" }, index.h("swirl-icon-drag-handle", { key: '295742018c703c5a7c8da55c9e3c93f3be723407', size: this.iconSize })))));
|
|
828
828
|
}
|
|
829
829
|
get el() { return index.getElement(this); }
|
|
830
830
|
};
|
|
@@ -43,7 +43,7 @@ const SwirlBanner = class {
|
|
|
43
43
|
}
|
|
44
44
|
componentDidLoad() {
|
|
45
45
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
46
|
-
this.desktopMediaQuery.
|
|
46
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
47
47
|
}
|
|
48
48
|
disconnectedCallback() {
|
|
49
49
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -64,7 +64,7 @@ const SwirlBanner = class {
|
|
|
64
64
|
const className = index$1.classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
|
|
65
65
|
"banner--has-icon": showIcon,
|
|
66
66
|
});
|
|
67
|
-
return (index.h(index.Host, { key: '
|
|
67
|
+
return (index.h(index.Host, { key: 'be4bdebb17f5f9611c21c9eded65510ce2cf8427' }, index.h("div", { key: '2153f4b7cc6565e5a525f1131ce48b74ee2ebc7a', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, index.h("div", { key: '010865c0f43d00bfff18d7c510f48b191bb5b025', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (index.h("span", { key: 'e33800d612c9bf594e3db60acf599357b0851383', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '03e082a2db918623b06b1487fd2bdfc6f270e08e', class: "banner__text" }, this.content)), showControls && (index.h("div", { key: 'a2041ef90d239380260e150581b7b06ed5dbc4b2', class: "banner__controls" }, this.actionLabel && (index.h("button", { key: 'c8a469c6d1ac12a9ba66fc1b3a4fdf252aeb8c52', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (index.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" }, index.h("swirl-icon-close", { key: '95f2d21a48eeb6c5cc845d1dc674502ed89a0467' }))))))));
|
|
68
68
|
}
|
|
69
69
|
get element() { return index.getElement(this); }
|
|
70
70
|
};
|
|
@@ -45,7 +45,7 @@ const SwirlButton = class {
|
|
|
45
45
|
componentDidLoad() {
|
|
46
46
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
47
47
|
this.updateFormAttribute();
|
|
48
|
-
this.desktopMediaQuery.
|
|
48
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
49
49
|
}
|
|
50
50
|
componentDidRender() {
|
|
51
51
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
@@ -100,9 +100,9 @@ const SwirlButton = class {
|
|
|
100
100
|
"button--pressed": this.pressed,
|
|
101
101
|
});
|
|
102
102
|
const Tag = isLink ? "a" : "button";
|
|
103
|
-
return (index.h(index.Host, { key: '
|
|
103
|
+
return (index.h(index.Host, { key: '9c5a6973ea658678167f384b99703c2a5cc932e6', style: { pointerEvents: this.disabled ? "none" : "" } }, index.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
|
|
104
104
|
? { fontSize: "inherit", lineHeight: "inherit" }
|
|
105
|
-
: {} }, Boolean(this.icon) && (index.h("span", { key: '
|
|
105
|
+
: {} }, Boolean(this.icon) && (index.h("span", { key: 'f8c59b55181804a88e7fbea215955394581085d0', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: 'f10549e0f2a5a0ad195bf7a9622dd6764f22074d', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: 'd20e1abea1853532c4db9285554e08c01bbd2110', name: "icon" }))), !hideLabel && index.h("span", { key: '1953a32f75eab8d16f8d8b370869b58d7293b83d', class: "button__label" }, this.label), hasTag && (index.h("span", { key: 'ba2fd1ab2514f309dbe41b07440a1e034173756b', class: "button__tag" }, index.h("slot", { key: '79d7921baa4f8744ee3f1328f73f7427c4bf89ba', name: "tag" }))))));
|
|
106
106
|
}
|
|
107
107
|
get el() { return index.getElement(this); }
|
|
108
108
|
};
|
|
@@ -34,7 +34,7 @@ const SwirlChip = class {
|
|
|
34
34
|
}
|
|
35
35
|
componentDidLoad() {
|
|
36
36
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
37
|
-
this.desktopMediaQuery.
|
|
37
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
38
38
|
}
|
|
39
39
|
disconnectedCallback() {
|
|
40
40
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -57,7 +57,7 @@ const SwirlChip = class {
|
|
|
57
57
|
"chip--interactive": this.interactive || this.pressed !== undefined,
|
|
58
58
|
"chip--removable": this.removable,
|
|
59
59
|
});
|
|
60
|
-
return (index.h(index.Host, { key: '
|
|
60
|
+
return (index.h(index.Host, { key: '3fa170e58fcdd39a85afb56ec10f8f77615eb9b9' }, index.h(Tag, { key: '4e96ce9cd653f9afa6a335734a25c10f92c42edc', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: '9b6107cc84794c069d0ff46031b886b3f0d4b78e', class: "chip__inner" }, showAvatar && (index.h("span", { key: 'd8a1a42f5ddede7223b78b617171eff7dd065906', class: "chip__avatar" }, index.h("slot", { key: '1bc65807864057fca37fcfec7599bf3606e9384f', name: "avatar" }))), showIcon && (index.h("span", { key: '0baa6dc9f1241a05a11882a4bc748963241e681d', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'd215f1a4d64e8b41648aaa19571f23c90e8a1fc1', class: "chip__label" }, this.label)), this.progress !== undefined && (index.h("span", { key: '173af6fba33eb25cc8d07a24e38757dd5738138b', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: '46bc43fcc5da5d003bfb71991941fa758d8bae36', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: 'eb8945c1ca5f26d8d95776c6cb6de10b1b9d985a', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, index.h("swirl-icon-close", { key: 'c554907b6bcbfbf0b35da2091209b9256e60e545', size: 20 })))));
|
|
61
61
|
}
|
|
62
62
|
get el() { return index.getElement(this); }
|
|
63
63
|
};
|
|
@@ -100,7 +100,7 @@ const SwirlDateInput = class {
|
|
|
100
100
|
componentDidLoad() {
|
|
101
101
|
this.setupMask();
|
|
102
102
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
103
|
-
this.desktopMediaQuery.
|
|
103
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
104
104
|
// see https://stackoverflow.com/a/27314017
|
|
105
105
|
if (this.autoFocus) {
|
|
106
106
|
this.focus();
|
|
@@ -159,7 +159,7 @@ const SwirlDateInput = class {
|
|
|
159
159
|
const className = index$1.classnames("date-input", {
|
|
160
160
|
"date-input--inline": this.inline,
|
|
161
161
|
});
|
|
162
|
-
return (index.h(index.Host, { key: '
|
|
162
|
+
return (index.h(index.Host, { key: '40aee0ed18df588c7e7de56ac15d2a899229240d' }, index.h("div", { key: 'ec0931b258f5de0aed8f4bb474ee7fafdb6f015b', class: className }, index.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 }), index.h("swirl-popover-trigger", { key: '8935b2ae6de652d302dacf729a1d10c1e98b1a83', swirlPopover: `popover-${this.id}` }, index.h("button", { key: '1f409c2f827c813b76e06aa7c10204c5e5984dc4', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: '0ae84ce7a870a5a6ccb6de23db3f90aaeedafc7d', size: this.iconSize })))), !this.disabled && (index.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) }, index.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 })))));
|
|
163
163
|
}
|
|
164
164
|
get el() { return index.getElement(this); }
|
|
165
165
|
static get watchers() { return {
|
|
@@ -71,7 +71,7 @@ const SwirlOptionListItem = class {
|
|
|
71
71
|
componentDidLoad() {
|
|
72
72
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
73
73
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
74
|
-
this.desktopMediaQuery.
|
|
74
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
75
75
|
}
|
|
76
76
|
disconnectedCallback() {
|
|
77
77
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -98,9 +98,9 @@ const SwirlOptionListItem = class {
|
|
|
98
98
|
"option-list-item--selected": this.selected,
|
|
99
99
|
"option-list-item--show-avatar": showAvatar,
|
|
100
100
|
});
|
|
101
|
-
return (index.h(index.Host, { key: '
|
|
101
|
+
return (index.h(index.Host, { key: 'af019b6745db50086125eafef092fefec4529d9b' }, index.h("div", { key: 'e5fae098a7c87f3fcd569971e5befe1e937e6187', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
|
|
102
102
|
? `option-list-item-${this.elementId}-description`
|
|
103
|
-
: 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 && (index.h("span", { key: '
|
|
103
|
+
: 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 && (index.h("span", { key: '4bb4605bec790297e858dc191ce739ca7a7fc15f', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '187934100efed7d64177dab42dfb2cf8f4fa3bcd', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (index.h("span", { key: '73383423f4318beb554d29d19d3c084e644f2d9c', class: "option-list-item__checkbox" }, index.h("span", { key: '9d39a8728e8d3d349df5f29b8064ad3991e7c69a', class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { key: '19835649797e70c0163cef6ad77373141aa17ffb', class: "option-list-item__checkbox-icon", size: 16 }))))), index.h("span", { key: '6deeb6c90a6c65c26a8af36973ad4562cc86c06f', class: "option-list-item__avatar" }, index.h("slot", { key: '733db89be34cbcdd32c3831ef910628ff4da1e0a', name: "avatar" })), index.h("span", { key: '103881477943772f336b9e86e54ded03a66e7a42', class: "option-list-item__label-container" }, index.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 && (index.h("span", { key: '0242394567de7fcd7f05c3827dac275b2159a60f', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (index.h("span", { key: '665b080344e85b02111ebd390acc3e46a26cf054', class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { key: '112f73e489c034a85264fcc47d8bb89104b8ba53', size: this.iconSize })))), this.allowDrag && (index.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" }, index.h("swirl-icon-drag-handle", { key: '8b45eb82b6616f811a3b54384cca5843ad8adc2c', size: this.iconSize })))));
|
|
104
104
|
}
|
|
105
105
|
get el() { return index.getElement(this); }
|
|
106
106
|
};
|
|
@@ -41,7 +41,7 @@ const SwirlInlineError = class {
|
|
|
41
41
|
}
|
|
42
42
|
componentDidLoad() {
|
|
43
43
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
44
|
-
this.desktopMediaQuery.
|
|
44
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
45
45
|
}
|
|
46
46
|
disconnectedCallback() {
|
|
47
47
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -62,7 +62,7 @@ const SwirlInlineError = class {
|
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
64
|
const className = index$1.classnames("inline-error", `inline-error--size-${this.size}`);
|
|
65
|
-
return (index.h(index.Host, { key: '
|
|
65
|
+
return (index.h(index.Host, { key: '03ae6eed446e44d9298186c4c4290636e77677b5' }, index.h("span", { key: 'a15e36cd1849e826a6cd578d50d3582e34bf1144', class: className, part: "inline-error" }, index.h("span", { key: 'c81ca9d7f26de1c5cd4d70a806b7e58b0baa3f6d', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-error", { key: 'c2b57b25a9219581521dfe043e54c2580f2b198f' })), index.h("span", { key: '0709c36c7aa4b4bb6c415b1175d3f7d2564bd0d6', class: "inline-error__message" }, this.message))));
|
|
66
66
|
}
|
|
67
67
|
};
|
|
68
68
|
SwirlInlineError.style = SwirlInlineErrorStyle0;
|
|
@@ -24,7 +24,7 @@ const SwirlInlineStatus = class {
|
|
|
24
24
|
}
|
|
25
25
|
componentDidLoad() {
|
|
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);
|
|
@@ -48,7 +48,7 @@ const SwirlInlineStatus = class {
|
|
|
48
48
|
}
|
|
49
49
|
render() {
|
|
50
50
|
const className = index$1.classnames("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
|
|
51
|
-
return (index.h(index.Host, { key: '
|
|
51
|
+
return (index.h(index.Host, { key: 'b89c28933bfaf10abc6df61372f46cc8d2e3deb1' }, index.h("span", { key: '26877b4b62596a851d4e01f0b646d9fa528ef8cb', class: className, part: "inline-status" }, this.icon && (index.h("span", { key: 'dfb79bb2dd83a3d1966de73079517dd2dabbfd95', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'ff61f8fed2c5c17cd0822fb3e92e5f1441a5f342', class: "inline-status__message" }, this.message))));
|
|
52
52
|
}
|
|
53
53
|
};
|
|
54
54
|
SwirlInlineStatus.style = SwirlInlineStatusStyle0;
|
|
@@ -114,7 +114,7 @@ const SwirlMenu = class {
|
|
|
114
114
|
this.observeSlotChanges();
|
|
115
115
|
}
|
|
116
116
|
componentDidLoad() {
|
|
117
|
-
this.mobileMediaQuery.
|
|
117
|
+
this.mobileMediaQuery.addEventListener("change", this.mediaQueryHandler);
|
|
118
118
|
this.parentMenu = utils.closestPassShadow(this.el.parentElement, "swirl-menu");
|
|
119
119
|
this.swirlPopover = utils.closestPassShadow(this.el, "swirl-popover");
|
|
120
120
|
this.rootMenu = utils.parentsPassShadow(this.el, "swirl-menu").pop();
|
|
@@ -298,7 +298,7 @@ const SwirlMenu = class {
|
|
|
298
298
|
"menu--mobile": this.mobile,
|
|
299
299
|
"menu--root": isTopLevelMenu,
|
|
300
300
|
});
|
|
301
|
-
return (index.h(index.Host, { key: '
|
|
301
|
+
return (index.h(index.Host, { key: '6902b3173cdb663accf161ccbae6ef7e6e7bcf5a' }, index.h("div", { key: '33fecf3dcb700082b1ca08ae37125a6c3d50ab2a', class: className }, this.mobile && isTopLevelMenu && (index.h("div", { key: '10a3926fdb1caf2726df95a4ee4a783dcd61ee19', class: "menu__mobile-header" }, this.activeLevel === 0 && (index.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 && (index.h("swirl-button", { key: 'add7164401a23532b6e618207d61c868f5455230', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), index.h("span", { key: '8e13f2cb97b571d2e0568ebcff34b0ea8bd55571', class: "menu__title", id: "menu-title" }, index.h("swirl-heading", { key: '7c5a5e3cc7ad96969e4bf7452e0bdb3bb7b97ea5', align: "center", as: "span", level: 4, text: this.label, truncate: true })), index.h("swirl-button", { key: '0bc062508d7f2c31e6bbf1e9bb0cffed63756f9e', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), index.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
|
|
302
302
|
? {
|
|
303
303
|
top: Boolean(this.position) ? `${this.position?.y}px` : "",
|
|
304
304
|
left: Boolean(this.position) ? `${this.position?.x}px` : "",
|
|
@@ -309,7 +309,7 @@ const SwirlMenu = class {
|
|
|
309
309
|
? `calc(-100% * ${this.activeLevel})`
|
|
310
310
|
: "100%",
|
|
311
311
|
}
|
|
312
|
-
: undefined }, index.h("slot", { key: '
|
|
312
|
+
: undefined }, index.h("slot", { key: '0458992fd30bde4b5b3a5fa89322aae6617be081' })))));
|
|
313
313
|
}
|
|
314
314
|
get el() { return index.getElement(this); }
|
|
315
315
|
static get watchers() { return {
|
|
@@ -27,7 +27,7 @@ const SwirlResourceListFileItem = class {
|
|
|
27
27
|
}
|
|
28
28
|
componentDidLoad() {
|
|
29
29
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
30
|
-
this.desktopMediaQuery.
|
|
30
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
31
31
|
}
|
|
32
32
|
disconnectedCallback() {
|
|
33
33
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -47,7 +47,7 @@ const SwirlResourceListFileItem = class {
|
|
|
47
47
|
const className = index$1.classnames("resource-list-file-item", {
|
|
48
48
|
"resource-list-file-item--has-control": showSpinner || showRemoveButton,
|
|
49
49
|
});
|
|
50
|
-
return (index.h(index.Host, { key: '
|
|
50
|
+
return (index.h(index.Host, { key: 'd77b3a45aff46139e8af03ccdbeb81e9da91370b', role: "row" }, index.h("div", { key: '53df0ea414c05513cee0a17b661767a06442a954', class: className, part: "resource-list-file-item", role: "gridcell" }, index.h("span", { key: '4a72d58087710540e5c74f3cee050f91d48bc6f6', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), index.h("span", { key: '33d67a51ce845f06f873b1ce61f3b6887ff9637b', class: "resource-list-file-item__label-container" }, index.h("span", { key: 'b080aa30dbb7b99c1fc888d90a2b69ab021cdd93', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (index.h("span", { key: 'b6c86787f6f8dbe4fb22f30b2027f63d7d9d8d8c', class: "resource-list-file-item__description" }, this.description)), showError && (index.h("span", { key: 'f55cafd40457a920047a80f9d537aed786134d18', "aria-live": "polite", class: "resource-list-file-item__error-message" }, index.h("swirl-inline-error", { key: 'ccf0276e67f9d87ef36ede6f74f9e25b5ff6618e', message: this.errorMessage, size: "s" })))), showSpinner && (index.h("span", { key: 'd04e7bbaafbb626c891c3afdb02b20f2362c459d', class: "resource-list-file-item__spinner" }, index.h("swirl-spinner", { key: '2fa064bbfa49c90c45f8106aaac2ae4fe1f1b26d', size: "s" }))), showRemoveButton && (index.h("span", { key: '53ae0a5d63299d4367735ca297d9dd7406c82176', class: "resource-list-file-item__remove-button" }, index.h("swirl-button", { key: 'a7298dfdae92ef380516d5dadac8d7fdff8c7e6a', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
|
|
51
51
|
}
|
|
52
52
|
};
|
|
53
53
|
SwirlResourceListFileItem.style = SwirlResourceListFileItemStyle0;
|
|
@@ -49,7 +49,7 @@ const SwirlSearch = class {
|
|
|
49
49
|
}
|
|
50
50
|
componentDidLoad() {
|
|
51
51
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
52
|
-
this.desktopMediaQuery.
|
|
52
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
53
53
|
// see https://stackoverflow.com/a/27314017
|
|
54
54
|
if (this.autoFocus) {
|
|
55
55
|
setTimeout(() => {
|
|
@@ -77,7 +77,7 @@ const SwirlSearch = class {
|
|
|
77
77
|
const className = index$1.classnames("search", `search--variant-${this.variant}`, {
|
|
78
78
|
"search--disabled": this.disabled,
|
|
79
79
|
});
|
|
80
|
-
return (index.h(index.Host, { key: '
|
|
80
|
+
return (index.h(index.Host, { key: 'f867baa30dafa694e189375973b69ee3827799ad' }, index.h("span", { key: '62bb2ef944cb42d3d2bec75c5ab1dd5cd5475bc9', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: 'a96176fe032074b18d6dff234eb22cb9dd64a060', "aria-hidden": "true", class: "search__icon" }), index.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 && (index.h("button", { key: '7d45015ee44044bdf388606f77b37593e27f001a', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, index.h("swirl-icon-cancel", { key: '2fa532b767afe00feaf1d7c31999ae1a266476c6' }))))));
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
SwirlSearch.style = SwirlSearchStyle0;
|
|
@@ -113,7 +113,7 @@ const SwirlTextInput = class {
|
|
|
113
113
|
}
|
|
114
114
|
componentDidLoad() {
|
|
115
115
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
116
|
-
this.desktopMediaQuery.
|
|
116
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
117
117
|
// see https://stackoverflow.com/a/27314017
|
|
118
118
|
if (this.autoFocus) {
|
|
119
119
|
setTimeout(() => {
|
|
@@ -189,7 +189,7 @@ const SwirlTextInput = class {
|
|
|
189
189
|
"text-input--inline": this.inline,
|
|
190
190
|
"text-input--show-password": this.type === "password" && this.showPassword,
|
|
191
191
|
});
|
|
192
|
-
return (index.h(index.Host, { key: '
|
|
192
|
+
return (index.h(index.Host, { key: 'e57f2ddeb2239ceffd449efacbc6bddf17777e2c' }, index.h("div", { key: '62eb95ad562fe4cbe7fd56cc9ac0b8d07b97afdf', class: className }, this.prefixLabel && (index.h("span", { key: 'c7d38898067ec7fdd924167e037323bacef742e3', class: "text-input__prefix" }, this.prefixLabel)), index.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 && (index.h("span", { key: '2ae0f456126a27f0256b5dfd851da830ea379018', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: 'ea47c05178f0ce61188ca8ed15f3bbe6f132b1dc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: 'd419f462f82b28bc6c8602f3d4cf65d2649d0234', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: '565f3c92ef3fd90d1d43c673b94feec9bcf213cf', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: 'ec02752a5258a06827fc156fd4b4cd5a0e712751', class: "text-input__stepper" }, index.h("button", { key: 'c698d2fda7bf64b338920410ef0c894955cf6372', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: '0f662dd62d1a315d288622a31e4f0dfb0ee530e0', size: this.iconSize })), index.h("button", { key: '49fc4ece3d4b67e3b6fa38ecdb681edf5e2e0791', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: '49de410032a3f513ba78e7f6a986645441db80eb', size: this.iconSize })))), this.showCharacterCounter && (index.h("span", { key: 'c2e4a3b9e5dc0c1eb4ef0ee686a7dd2cd2c1a6d7', class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
|
|
193
193
|
}
|
|
194
194
|
static get watchers() { return {
|
|
195
195
|
"value": ["watchValue"]
|
|
@@ -86,7 +86,7 @@ const SwirlTimeInput = class {
|
|
|
86
86
|
componentDidLoad() {
|
|
87
87
|
this.setupMask();
|
|
88
88
|
this.updateIconSize(this.desktopMediaQuery.matches);
|
|
89
|
-
this.desktopMediaQuery.
|
|
89
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
90
90
|
// see https://stackoverflow.com/a/27314017
|
|
91
91
|
if (this.autoFocus) {
|
|
92
92
|
setTimeout(() => {
|
|
@@ -129,7 +129,7 @@ const SwirlTimeInput = class {
|
|
|
129
129
|
const className = index$1.classnames("time-input", {
|
|
130
130
|
"time-input--inline": this.inline,
|
|
131
131
|
});
|
|
132
|
-
return (index.h(index.Host, { key: '
|
|
132
|
+
return (index.h(index.Host, { key: '2c4924715b04c0e77299b48a29fe7ec044229884' }, index.h("div", { key: 'b8bceee82f8ee07a206515e8f3bf3ba6c7fd6320', class: className }, index.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 }), index.h("span", { key: 'b84dd53cb89b2532904f0978c951dcab01996d33', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '0c6df7dcd4388bfd2b06c6e70e2a30e36474ea3a', size: this.iconSize })))));
|
|
133
133
|
}
|
|
134
134
|
get el() { return index.getElement(this); }
|
|
135
135
|
static get watchers() { return {
|
|
@@ -34,7 +34,7 @@ const SwirlToast = class {
|
|
|
34
34
|
componentDidLoad() {
|
|
35
35
|
this.startTimer();
|
|
36
36
|
this.forceIconProps(this.desktopMediaQuery.matches);
|
|
37
|
-
this.desktopMediaQuery.
|
|
37
|
+
this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
|
|
38
38
|
}
|
|
39
39
|
disconnectedCallback() {
|
|
40
40
|
this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
|
|
@@ -63,7 +63,7 @@ const SwirlToast = class {
|
|
|
63
63
|
}
|
|
64
64
|
render() {
|
|
65
65
|
const className = index$1.classnames("toast", `toast--intent-${this.intent}`);
|
|
66
|
-
return (index.h(index.Host, { key: '
|
|
66
|
+
return (index.h(index.Host, { key: 'ff494adb183bfd3b0cf64f854370f65d9025688d' }, index.h("div", { key: 'ec42812f4e085d3853d529c5155847d3166d7235', class: className }, this.icon && (index.h("span", { key: '9565980b265dfb58f2d3f4625642c4b42b286bb0', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { key: '20a9d20e6a1250d8584768db191033b7dca0faeb', class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", { key: '59a95eece747a0a434c6730c84ca8138b7036b5c' })), index.h("button", { key: '413e402fb6504c7791d68e21b2dd333a79fb4e2e', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { key: '76fb12bf16bdd0f7dfb1d51becf2774e438921a3', ref: (el) => (this.dismissIconEl = el) }))))));
|
|
67
67
|
}
|
|
68
68
|
static get watchers() { return {
|
|
69
69
|
"duration": ["watchDuration"]
|