npm - @getflip/swirl-components - Versions diffs - 0.332.0 → 0.333.0 - Mend

@getflip/swirl-components 0.332.0 → 0.333.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.

Files changed (143) hide show

package/dist/cjs/swirl-app-layout_5.cjs.entry.js CHANGED Viewed

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2c919933.js');
 const index$1 = require('./index-9f94303c.js');
+const mediaQuery_service = require('./media-query.service-aad2b3b1.js');
 const utils = require('./utils-4f225daf.js');
 const sortable_esm = require('./sortable.esm-81a1c837.js');
 const v4 = require('./v4-c23234d2.js');
@@ -20,10 +21,7 @@ const SwirlAppLayout = class {
         this.navigationBackButtonClick = index.createEvent(this, "navigationBackButtonClick", 7);
         this.navigationExpansionStateChange = index.createEvent(this, "navigationExpansionStateChange", 7);
         this.sidebarToggle = index.createEvent(this, "sidebarToggle", 7);
-        this.desktopMediaQuery = utils.getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.isDesktop = event.matches;
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onBackToNavigationViewButtonClick = () => {
             this.changeMobileView("navigation");
         };
@@ -115,9 +113,10 @@ const SwirlAppLayout = class {
         });
     }
     componentDidLoad() {
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.isDesktop = isDesktop;
+        });
         queueMicrotask(() => {
-            this.isDesktop = this.desktopMediaQuery.matches;
             this.restoreNavExpansionState();
             this.updateContentScrollState();
             this.updateSidebarScrollState();
@@ -125,7 +124,7 @@ const SwirlAppLayout = class {
         });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
         this.mutationObserver?.disconnect();
     }
     onDocumentClick(event) {
@@ -351,14 +350,14 @@ const SwirlAppLayout = class {
             "app-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "app-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        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"
+        return (index.h(index.Host, { key: '0970730a8b11319c50969d6d6e7f217dcf56e2f0' }, index.h("section", { key: '06d420b7d6bfe12422b52e2cdcb8fa8a2ed0fbac', "aria-labelledby": "app-name", class: className }, index.h("div", { key: 'b50a9beffae3145861ed4b71705fe673f5d10043', class: "app-layout__grid" }, index.h("header", { key: '04c3f7e4b7cb227cca2e9a15e262ddc9874032e1', class: "app-layout__header", ref: (el) => (this.headerEl = el) }, index.h("span", { key: '67ba8ba5394d42ba1f96ccb3258aefb8acce87c9', class: "app-layout__navigation-mobile-menu-button" }, index.h("slot", { key: '8795a4b7ac5a63bdd1f838c6ba1d0314cfa33dc9', name: "navigation-mobile-menu-button" })), this.collapsibleNavigation && (index.h("span", { key: '0a11ae6739ed9863837da26a60a5f524ca2215ea', class: "app-layout__nav-overlay-toggle" }, index.h("swirl-button", { key: 'e0670ebab68aaefd7342a31b0a2c139f181c4cf1', hideLabel: true, icon: this.navExpansionState !== "expanded"
                 ? "<swirl-icon-dock-left-expand></swirl-icon-dock-left-expand>"
-                : "<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 &&
+                : "<swirl-icon-dock-left-collapse></swirl-icon-dock-left-collapse>", label: this.navigationToggleLabel, onClick: this.toggleNavigation }))), this.showNavigationBackButton && (index.h("span", { key: 'df74e59b27c2e15ffc532826ac69794df187ece9', class: "app-layout__navigation-back-button" }, index.h("swirl-button", { key: 'ca4e1610d7566b66ebe6958f8ec6f89d4a84554c', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), index.h("swirl-heading", { key: '7ca7f6ca8a69fead26966a6b224966f4404351da', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), navigationActive && (index.h("span", { key: '3d1205492f28588558a5e1d1c1948c4da7870c46', class: "app-layout__navigation-controls" }, index.h("slot", { key: 'f97090b47f524589e4d86e293e92ce2e001503dd', name: "navigation-controls" })))), index.h("nav", { key: '9b2f944843bcee7c5322b728ea26fcc7d8ed990f', "aria-label": this.navigationLabel, class: "app-layout__navigation", onScroll: this.onNavScroll, ref: (el) => (this.navEl = el), inert: this.isDesktop &&
                 this.collapsibleNavigation &&
-                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"
+                this.navExpansionState === "collapsed" }, index.h("slot", { key: 'a3fa785458acf70951cf209062e9f91bfec49db4', name: "navigation" })), index.h("section", { key: '3649f14cce3bdf275bc7325680b4c193085272f7', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (index.h("header", { key: '401b6adeda9ed569d8a6c37f381fed0623a34701', class: "app-layout__app-bar" }, index.h("span", { key: '7b60e9abca35a3c6ab900e8d882116e8b22ce730', class: "app-layout__app-bar-mobile-menu-button" }, index.h("slot", { key: '44c01881cb2c4799942609ca43f2ead4de855859', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (index.h("span", { key: '63a89ec584fa6a21a5cf4be3fdf15e84df01b03a', class: "app-layout__back-to-navigation-button" }, index.h("swirl-button", { key: '5d05136bb74adcc5a404bdb74533636777f3b598', hideLabel: true, icon: this.transitionStyle === "dialog"
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), this.collapsibleNavigation &&
-            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" }))))));
+            this.navExpansionState !== "expanded" && (index.h("span", { key: '0426043d85f25bd9581b2046215dba5cc50ee24c', class: "app-layout__nav-expansion-toggle" }, index.h("swirl-button", { key: '5b64b49937d180b23de6435351a0b7498562b2f7', hideLabel: true, icon: "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", label: this.navigationOverlayLabel, onClick: this.overlayNavigation }))), index.h("span", { key: 'eaa0172b442211086532a15fae6bb99b70dafab6', class: "app-layout__custom-app-bar-back-button" }, index.h("slot", { key: '86177f0040e21c020b2d88a2e11cc1f2045d9bcf', name: "custom-app-bar-back-button" })), index.h("div", { key: 'ff317fc8d6a4f75b81db2f4c6867d1259a9e2cc6', class: "app-layout__app-bar-content" }, index.h("slot", { key: '59a8e892b40e1b56acc3f33cb956d1a588670a5e', name: "app-bar" })), index.h("div", { key: '2244b236929f9de30d18f886b2992187b1f9baf8', class: "app-layout__app-bar-controls" }, index.h("slot", { key: 'c5fae8b152e14275cb09b7db637ea8ca64932648', name: "app-bar-controls" })))), index.h("div", { key: '85a6875e28ec691f659cbee27e299bca2048ff67', class: "app-layout__banner" }, index.h("slot", { key: '9790312e956f47faca3c1c4b04a6b1422a889498', name: "banner" })), index.h("div", { key: 'd33ae32d0644d24027423eb9dc9ba94c54b0070b', class: "app-layout__content", onScroll: this.onContentScroll, ref: (el) => (this.contentEl = el) }, index.h("slot", { key: '9e615a708ac9ae2817a680e868c70d4a9ec3d075', name: "content" })), index.h("div", { key: 'd173a40d98a1d8cd6b93135d9a6984afc6487813', class: "app-layout__bottom-bar" }, index.h("slot", { key: '10a8422834710d9b15dea188d0f8b24dab14887e', name: "bottom-bar" }))), index.h("aside", { key: '0da3e8a8bf7be2c6ae12ebf89b6fc91f4d9a27a2', class: "app-layout__sidebar" }, index.h("header", { key: 'da7303d27a7c9d65a3d3dd7ec9799f7ea8b63dd8', class: "app-layout__custom-sidebar-header" }, index.h("slot", { key: 'fd8fc8403066c85dd26ed414afded579928da657', name: "custom-sidebar-header" })), index.h("header", { key: 'addfa87cef788f272e586e3a02b0f47be414cc58', class: "app-layout__sidebar-header" }, index.h("swirl-button", { key: '7daf54726d77b5a9656dd888d32d4c111746e59e', 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: 'c743c2b1049f87a5c81b99ddc836f4a2b9b08561', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), index.h("div", { key: '9443e3843d55af79d62c949b8df53a6a1f27a4e9', class: "app-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarEl = el) }, index.h("slot", { key: '0b5eff0be0d4e98ed2755b412d8783fe25d8d809', name: "sidebar" }))), index.h("span", { key: 'a1487ea686f593c4b117a9eb74fe61fe8b516336', class: "app-layout__floating-action-button" }, this.ctaLabel && (index.h("swirl-button", { key: '02d61ee5b96263295218ed0b99cb8b93d1e06df0', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), index.h("slot", { key: '7f1e9ae5a5cbf12e28b12d8e7227fee017f6f532', name: "floating-action-button" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -684,12 +683,8 @@ const SwirlResourceListItem = class {
         index.registerInstance(this, hostRef);
         this.toggleDrag = index.createEvent(this, "toggleDrag", 7);
         this.valueChange = index.createEvent(this, "valueChange", 7);
-        this.desktopMediaQuery = utils.getDesktopMediaQuery();
         this.elementId = v4.v4();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onClick = () => {
             if (!this.selectable) {
                 return;
@@ -748,16 +743,17 @@ const SwirlResourceListItem = class {
         this.updateMediaState();
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+            this.updateIconSize(isDesktop);
+        });
         this.makeControlUnfocusable();
         if (Boolean(this.menuTriggerId)) {
             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');
         }
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         const icon = this.iconEl?.children[0];
@@ -831,7 +827,7 @@ const SwirlResourceListItem = class {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (index.h(index.Host, { key: '51070214010bb6f42b11d1451d711523908dcd24', role: "row" }, index.h("div", { key: '58da33a690ad26cc6cb613f7c3a120cc27c14168', class: className, role: "gridcell" }, index.h(Tag, { key: '4733c36969976407c76a0852e7b688005d829467', "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: '43feb905ed747fb0f3dce03c9bb0906e807f4cc9', class: "resource-list-item__media" }, index.h("slot", { key: '8bf74e8f11becef18f95a50ee78af293176e3c74', name: "media" }))), index.h("span", { key: 'b74ee63857ae512b974e9732d73ff2c7eb070ef6', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: '7271335be0863add557483c3819bc61f0bcf3eee', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: '4ddca66a33fcbe50927e3af38c6d1bea2ed67887', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: '540c9ad85c13187700ff1607d59afc80d90529ac', class: "resource-list-item__meta" }, index.h("span", { key: 'cb31b8cebf261df69ebb90989e0ec0fbc3c267ee', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: '57d467dfc1dff7d17e93aa0e03f1760054d85de9', class: "resource-list-item__badges" }, index.h("slot", { key: '18ea4383798222c2aea1dac37464b65133143604', name: "badges" }))))), this.selectable && (index.h("span", { key: 'aa967cf2216cd148edca930425ecbda013413850', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: '3cc2777fbf3850ba756ed88e0ad4ae29e4caf32c', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: '61a80c63ef99e3b530c3cc231a1abada0f1940fc' }))))), index.h("span", { key: 'eaaf028e6c729fc7093d355ebc6c31bc2d4a8696', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: 'f988fee1daed088fb4fb56a5ab262f6e8815d4f7', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '170cc8abf345cbfeeb3d86a77ad4ba081465ee4d', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: 'b33497fd10358229f0125497dda088c1d0c3ee6b', "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: '1caaaf86725af4eb4215453453ab724c5777f035', "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: 'eb0b87432675feb37a2f6d8de9f6228e9e921b6e', size: this.iconSize })))));
+        return (index.h(index.Host, { key: '63387d5ff4c56c678c6c0e30d8236d5b966d0bff', role: "row" }, index.h("div", { key: '6fd8f35b61a84ea91ff9ff80f6f754ee50a5933f', class: className, role: "gridcell" }, index.h(Tag, { key: '17e7329e6692317ad3dea70d660720c6fb8b33a5', "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: '4d12c2a220c03d1ee1bb77e214e028f013a23e21', class: "resource-list-item__media" }, index.h("slot", { key: '5d104523e7da44ceac278d5f6eebea6c2d2e516f', name: "media" }))), index.h("span", { key: 'cdc7fdf4a5a3e2df7080fece60638aa1d67c6388', class: "resource-list-item__label-container", style: labelContainerStyles }, index.h("span", { key: '187fd3a9974f65902e0fa89cb6c90b4178df7063', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (index.h("span", { key: '5047356c9b024dcdcf1299cc8479aedb2eb7b961', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (index.h("span", { key: '1a5039459c067b4de2a540f79124ac9310f9c594', class: "resource-list-item__meta" }, index.h("span", { key: 'a74caa7e64e88b8cbd9be7be020d63d833f03781', class: "resource-list-item__meta-text" }, this.meta), index.h("span", { key: 'ae4f5a2e927b934fba247e989cfc219b09805c99', class: "resource-list-item__badges" }, index.h("slot", { key: '59df5cb937ffc581ad1f6470b6080561045997fd', name: "badges" }))))), this.selectable && (index.h("span", { key: 'a494bc2e24fd043cc3c1024e89ae0a16d7c14f86', "aria-hidden": "true", class: "resource-list-item__checkbox" }, index.h("span", { key: 'b0070f0ad50a683528c216d8e0d1221b53652433', class: "resource-list-item__checkbox-icon" }, this.checked && (index.h("swirl-icon-check-strong", { key: 'dc3cdd5fa6e9adda926966fc77d8acf44762fda5' }))))), index.h("span", { key: 'd5b2f9079f6cae27bca88d7b00d9eb954641e3f1', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, index.h("slot", { key: '263ee1c8cd59301ebd510a29ce29afd112fa6c32', name: "control" })), showMenu && (index.h("swirl-popover-trigger", { key: '16ecfb13e3bf0e3d36851671f708ce949ff3dfee', swirlPopover: this.menuTriggerId }, index.h("swirl-button", { key: 'a1d94f00a09a875a689c015b332a794cda4612ca', "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: '6a580ae58f2e50fe42828d9db668260b91bb9d43', "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: 'e999dfe63293b3367c6d8507532761887b3835d6', size: this.iconSize })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-banner.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2c919933.js');
 const index$1 = require('./index-9f94303c.js');
-const utils = require('./utils-4f225daf.js');
+const mediaQuery_service = require('./media-query.service-aad2b3b1.js');
+require('./utils-4f225daf.js');
 const swirlBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;align-items:flex-start;gap:var(--s-space-16);max-width:100%;min-height:3.5rem;padding:var(--s-space-16)}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner{padding:var(--s-space-16);min-height:3.25rem}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-left:0}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}.banner__content{display:flex;align-items:flex-start;min-height:1.5rem;flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-height:1.25rem}}.banner__icon{display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__text{min-height:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__text{min-height:1.25rem}}.banner__controls{display:inline-flex;flex-shrink:0;align-items:flex-start;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);height:1.25rem}}";
 const SwirlBannerStyle0 = swirlBannerCss;
@@ -21,10 +22,7 @@ const SwirlBanner = class {
         index.registerInstance(this, hostRef);
         this.action = index.createEvent(this, "action", 7);
         this.dismiss = index.createEvent(this, "dismiss", 7);
-        this.desktopMediaQuery = utils.getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onAction = (event) => {
             this.action.emit(event);
         };
@@ -42,11 +40,12 @@ const SwirlBanner = class {
         this.size = "m";
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         const icon = this.iconEl?.children[0];
@@ -64,7 +63,7 @@ const SwirlBanner = class {
         const className = index$1.classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
-        return (index.h(index.Host, { key: '99250db7c15c3766f334835f30ffd56f0324a376' }, index.h("div", { key: 'd375cfcf81f60a07d9c2fea7723ba39485a53606', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, index.h("div", { key: '19d3d110506ed8937b427bc33345b33a07ba9947', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (index.h("span", { key: 'b5e388649193c97484dc10454e42996eaf4ac8e5', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '0a4471d71e533825f9f4956342a0e0e0e551db60', class: "banner__text" }, this.content)), showControls && (index.h("div", { key: '0065a44d9a2cc0eebd09c69a410c8eaa13a43c6c', class: "banner__controls" }, this.actionLabel && (index.h("button", { key: '9ddd441512126904853025979a7128ec1a8de0be', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (index.h("button", { key: '7bcafc0d0a32b34c00e012bad3dcfcbb01254cab', "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: '3d21dac0ac18b5f99c9426233d46664dda149f72' }))))))));
+        return (index.h(index.Host, { key: '52901533a924083e7080527d05c024dfeca4cfd8' }, index.h("div", { key: '3f9b2e12dae3fd6ac3320f1f207c3f80163b4895', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, index.h("div", { key: '210dfff43e7867341485e8a08ca9f646d8f788f6', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (index.h("span", { key: '4f52c17e778ad0a097b15df1bb957c00108f5f40', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '388cac66f35b9d5230e83edfa6b4ee1f83343c95', class: "banner__text" }, this.content)), showControls && (index.h("div", { key: 'dd2c85861e304e20b7413d8543b7d44b2403e2ce', class: "banner__controls" }, this.actionLabel && (index.h("button", { key: '60020c45f5b232742c5dfae378fac62bb1b552a0', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (index.h("button", { key: '0fd55fb8949212dcb7e21a3c47806acdfa00fa6b', "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: 'a1f408e4beaef07ff7379ea7625f590dd943a87f' }))))))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/swirl-button.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2c919933.js');
 const index$1 = require('./index-9f94303c.js');
-const utils = require('./utils-4f225daf.js');
+const mediaQuery_service = require('./media-query.service-aad2b3b1.js');
+require('./utils-4f225daf.js');
 const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-disabled);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus:where(:not(:focus-visible)){outline:none}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n      --swirl-icon-button-border-bottom-right-radius\n    );border-bottom-left-radius:var(\n      --swirl-icon-button-border-bottom-left-radius\n    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
 const SwirlButtonStyle0 = swirlButtonCss;
@@ -12,10 +13,7 @@ const SwirlButtonStyle0 = swirlButtonCss;
 const SwirlButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.desktopMediaQuery = utils.getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.elevated = undefined;
         this.disabled = undefined;
         this.download = undefined;
@@ -44,16 +42,16 @@ const SwirlButton = class {
         this.inheritFontSize = undefined;
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
         this.updateFormAttribute();
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     componentDidRender() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
         this.updateFormAttribute();
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -102,9 +100,9 @@ const SwirlButton = class {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (index.h(index.Host, { key: 'd6d3ce3dc37e1baae931a9889310d2b95d1e2a1c', style: { pointerEvents: this.disabled ? "none" : "" } }, index.h(Tag, { key: 'ddf5437dfcd007cd797e8c02b1755faaca0af7cb', "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
+        return (index.h(index.Host, { key: 'dec5cc1badcf88a9b3f57a647c59fea4388a0e00', style: { pointerEvents: this.disabled ? "none" : "" } }, index.h(Tag, { key: '7b4a851e0c7f3699002095cf777c040a5c97194e', "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
                 ? { fontSize: "inherit", lineHeight: "inherit" }
-                : {} }, Boolean(this.icon) && (index.h("span", { key: 'db012c0296c21362c90ba800a16f96292b745717', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: 'f62b2479f0a236cc3bd49e636436c9b8ac86d59f', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: 'c0e02250891e12f1f61fe6838da9d398f1d51119', name: "icon" }))), !hideLabel && index.h("span", { key: '6d08f04545e0227873c57731bfe5c62726a28ee2', class: "button__label" }, this.label), hasTag && (index.h("span", { key: 'dba345465a93e5bba27c72878db5830316ddb84b', class: "button__tag" }, index.h("slot", { key: '267c787320f98ffc06a1393660c0a6dd4bc75c74', name: "tag" }))))));
+                : {} }, Boolean(this.icon) && (index.h("span", { key: '371fbdd6575181f62250eef491b6e4ed56b5b0e1', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (index.h("span", { key: 'e3af04a049701785eddba2142ca9c3d9f376eda8', class: "button__icon", ref: (el) => (this.iconEl = el) }, index.h("slot", { key: 'e9a101f204201023c4c62539578cb408adccde85', name: "icon" }))), !hideLabel && index.h("span", { key: 'e08c03769f2981aac46e02c8519d06bb1b88c801', class: "button__label" }, this.label), hasTag && (index.h("span", { key: '5fa04e35b9980d2f6684ba3bf40006053d204949', class: "button__tag" }, index.h("slot", { key: 'b9cab88a1ab1e53f3f1240d1bd32cb0175cc261f', name: "tag" }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-chip.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-2c919933.js');
 const index$1 = require('./index-9f94303c.js');
-const utils = require('./utils-4f225daf.js');
+const mediaQuery_service = require('./media-query.service-aad2b3b1.js');
+require('./utils-4f225daf.js');
 const swirlChipCss = ".sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.5rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-overlay-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--variant-outline.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.3125rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:var(--s-surface-overlay-default);cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}";
 const SwirlChipStyle0 = swirlChipCss;
@@ -14,10 +15,7 @@ const SwirlChip = class {
         index.registerInstance(this, hostRef);
         this.chipClick = index.createEvent(this, "chipClick", 7);
         this.removeChip = index.createEvent(this, "remove", 7);
-        this.desktopMediaQuery = utils.getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.borderRadius = "pill";
         this.icon = undefined;
         this.iconColor = "default";
@@ -33,11 +31,12 @@ const SwirlChip = class {
         this.variant = "outline";
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -57,7 +56,7 @@ const SwirlChip = class {
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (index.h(index.Host, { key: '67ed7962107673d2b27886cbc6b22c451335ba4b' }, index.h(Tag, { key: 'ee65c5950ec0eb61037282966e60c47d113ecd4f', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: '7a2fea34626f32eb01f09424ee77e663e03a4815', class: "chip__inner" }, showAvatar && (index.h("span", { key: 'ceacda3a0a82ab42a0eeb9016eef8d50fed975d5', class: "chip__avatar" }, index.h("slot", { key: 'f16326da71143e85dd6601038f6c22eaefab8e8b', name: "avatar" }))), showIcon && (index.h("span", { key: '9e2b3f42b74c210d2a6a4485f7ea2e4e81b9b442', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '7c51f843fabc323d4564f1af9baf978c262fec5d', class: "chip__label" }, this.label)), this.progress !== undefined && (index.h("span", { key: 'c1a1eb80d19f17af33532025e5130d624defba32', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: 'aac475d0b313f0844511d6eb0b718e135013450e', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: 'f5da3e24bdc9b3c05ad2385250dea4472125765c', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, index.h("swirl-icon-close", { key: 'ed9878871eb6aa8755ee47fe7a44d06a55e39929', size: 20 })))));
+        return (index.h(index.Host, { key: 'aacfe2b81480beb943d294ac98858014b53e7d9c' }, index.h(Tag, { key: 'fe3ed0c535267aaf8d5add2ba73b1ab017202a5a', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: '0e55458a8c3841ed02994ba7c105036424923018', class: "chip__inner" }, showAvatar && (index.h("span", { key: '6065e1ebed3ec0f236195b682ba12e85684de876', class: "chip__avatar" }, index.h("slot", { key: '950dd5ad2213171c4eae631c1e95c75647ec5ee2', name: "avatar" }))), showIcon && (index.h("span", { key: '118532298ad5ada83f2cfb15f571cc2ee857d3bd', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '22fa5011815883c566d59b59008a8af87077fc30', class: "chip__label" }, this.label)), this.progress !== undefined && (index.h("span", { key: '623b2f0fcc739776ef0eb46ac0cf91a3912a24f3', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: 'dcb29d9a57a76190704b63917d443c23f3892224', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: '722397ffd1828842a1f5848d65c2c6c18a9b7893', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, index.h("swirl-icon-close", { key: 'd96fea1d3acd2b549197808c6563d574836a278b', size: 20 })))));
     }
     get el() { return index.getElement(this); }
 };