@getflip/swirl-components 0.331.0 → 0.333.0

package/dist/collection/components/swirl-date-input/swirl-date-input.js

@@ -2,14 +2,12 @@ import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { format, isValid, parse } from "date-fns";
 import { create as createMask } from "maska/dist/es6/maska";
-import { getDesktopMediaQuery, isMobileViewport } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
+import { isMobileViewport } from "../../utils";
 const internalDateFormat = "yyyy-MM-dd";
 export class SwirlDateInput {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onChange = (event) => {
             const value = event.target.value;
             if (value === "") {
@@ -88,8 +86,9 @@ export class SwirlDateInput {
     }
     componentDidLoad() {
         this.setupMask();
-        this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.updateIconSize(isDesktop);
+        });
         // see https://stackoverflow.com/a/27314017
         if (this.autoFocus) {
             this.focus();
@@ -97,7 +96,7 @@ export class SwirlDateInput {
     }
     disconnectedCallback() {
         this.mask?.destroy();
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     watchFormat() {
         this.setupMask();
@@ -148,7 +147,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: 'b6ddc22bcdc331f61fca4b108b4d34f4d7f4eccd' }, h("div", { key: 'd92b1daa42c5e2fb64c378621bf50b0440813252', class: className }, h("input", { key: 'a775ec1989a9e35f3dbe380e5f7f83170bb5d1fe', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '1fd79df32d35be0951b49a2ce141309b2938d4c3', swirlPopover: `popover-${this.id}` }, h("button", { key: '11680b4c3bfee66566fd895c5399b5c860f7b771', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '91563a1eb521b7beceb4f967b091c44445d04b60', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '7b7534da460943832ed5cc8d786dd316a4e442c3', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '74b13475c333443ae34d68fa7ac78e63c79c1c1e', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: 'b08bf17f0edd807a419199a88ba2ca14b0a2e4b6' }, h("div", { key: '5543669cbc75241146e2808293631e007914e258', class: className }, h("input", { key: '85836403ef82b583fad6a4118dc4532aa482e01b', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '2054f02531393bbb345c78ed79dc620ce491e90a', swirlPopover: `popover-${this.id}` }, h("button", { key: '6aa6a53cd62693a74be31f1e2c1ed6f42d8dccec', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '87745196a9f9a67938410acf56ca36b6d7396711', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '29e15ada59823318ef9c05aae7813eeda1e8ecbb', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '65b8374a92785362f5b9060d4ddd83c5d518c5bd', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     static get is() { return "swirl-date-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-file-chip/swirl-file-chip.css

@@ -19,17 +19,17 @@
 }
 
 
-.file-chip:hover.file-chip--one-action .file-chip__info > * {
+.file-chip:hover.file-chip--one-action .file-chip__info > *, .file-chip:focus-within.file-chip--one-action .file-chip__info > * {
     width: calc(100% - 44px - var(--s-space-12));
   }
 
 
-.file-chip:hover.file-chip--two-actions .file-chip__info > * {
+.file-chip:hover.file-chip--two-actions .file-chip__info > *, .file-chip:focus-within.file-chip--two-actions .file-chip__info > * {
     width: calc(100% - 88px - var(--s-space-12));
   }
 
 
-.file-chip:hover .file-chip__actions {
+.file-chip:hover .file-chip__actions, .file-chip:focus-within .file-chip__actions {
     opacity: 1;
   }
 

package/dist/collection/components/swirl-file-chip/swirl-file-chip.js

@@ -1,7 +1,7 @@
 import { h, Host, } from "@stencil/core";
 import { saveAs } from "file-saver";
 import classnames from "classnames";
-import { isAudioMimeType, isCompressedArchiveMimeType, isImageMimeType, isPdfMimeType, isVideoMimeType, } from "../../utils";
+import { isAudioMimeType, isCompressedArchiveMimeType, isDocumentMimeType, isImageMimeType, isPdfMimeType, isVideoMimeType, } from "../../utils";
 export class SwirlFileChip {
     constructor() {
         this.handleDownloadClick = () => {
@@ -51,6 +51,9 @@ export class SwirlFileChip {
         else if (isCompressedArchiveMimeType(this.type)) {
             return h("swirl-icon-folder", null);
         }
+        else if (isDocumentMimeType(this.type)) {
+            return h("swirl-icon-file", null);
+        }
         else {
             return h("swirl-icon-attachment", null);
         }
@@ -62,7 +65,7 @@ export class SwirlFileChip {
             "file-chip--one-action": actionCount === 1,
             "file-chip--two-actions": actionCount === 2,
         });
-        return (h(Host, { key: '6bb82407abd2caedf8e8e3dbdb08685ead172764' }, h("span", { key: '10a71f96282accfa427b0bf8d682eff5121382f5', role: "group", class: className }, h("span", { key: '67c7d86b2634d47b8a92b637c8640f50fe163779', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '1d725f11420cf6d1a3d87141e4b7947494a2fcd1', class: "file-chip__info" }, h("span", { key: '4ea4d1165c422d859d7d31e14cf8f2a28fd000a2', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: 'dfe58e30c3ef1a866d87f896fb933ad74cfa06c5', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: 'b1a25c531577816ae713816924718709a411cd06', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '8beec8259386d52de103dbee165ce6c80604d55a', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: '187724687cfcbc72ed553c6924ff39f4427a72bf', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
+        return (h(Host, { key: '8ba0390953507f3c39fdb662c2714a721c1f048b' }, h("span", { key: '97a4e2627f6490a237cde23f54347e320e8065b5', role: "group", class: className }, h("span", { key: 'f6dee9b3416db43baeeb3854995d94ef1142607f', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '29d1a7aa234ceb846039004e8439db4441a32ba1', class: "file-chip__info" }, h("span", { key: '8594d492fd758e59797dff9b0923b2e2ec5bdc86', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: '887570df6590394016b9b0a4a49e06e6719acb53', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: '9fee7eaf170777b86fd33b98c069e641fa7eab02', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '647360858f679d9eb4a65947f2839dec369d1a08', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.previewButtonLabel, hideLabel: true, part: "file-chip__preview" })), this.showDownloadButton && (h("swirl-button", { key: '6e718daf409c8f37caa228f545806f2fe7579f6d', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.downloadButtonLabel, hideLabel: true, part: "file-chip__download" }))))));
     }
     static get is() { return "swirl-file-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-chip/swirl-file-chip.spec.js

@@ -83,6 +83,14 @@ describe("swirl-file-chip", () => {
         const iconElement = page.root.shadowRoot.querySelector(".file-chip__icon swirl-icon-audio-file");
         expect(iconElement).toBeTruthy();
     });
+    it("renders document file type", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="https://example.com/document.doc" name="document.doc" type="application/msword"></swirl-file-chip>`,
+        });
+        const iconElement = page.root.shadowRoot.querySelector(".file-chip__icon swirl-icon-file");
+        expect(iconElement).toBeTruthy();
+    });
     it("renders text file type", async () => {
         const page = await newSpecPage({
             components: [SwirlFileChip],

package/dist/collection/components/swirl-form-control/swirl-form-control.js

@@ -64,16 +64,11 @@ export class SwirlFormControl {
     componentDidRender() {
         this.checkInputValue();
     }
-    associateDescriptionWithInputElement() {
-        if (!Boolean(this.description) || !Boolean(this.inputEl)) {
-            return;
-        }
-        if (Boolean(this.inputEl.getAttribute("contenteditable"))) {
-            this.inputEl.setAttribute("aria-describedby", this.descriptionId);
-        }
-        else {
-            this.inputEl.setAttribute("swirl-aria-describedby", this.descriptionId);
-        }
+    watchDescription() {
+        this.associateDescriptionWithInputElement();
+    }
+    watchErrorMessage() {
+        this.associateDescriptionWithInputElement();
     }
     setInputElementDisabledState() {
         if (!Boolean(this.inputEl)) {
@@ -136,6 +131,23 @@ export class SwirlFormControl {
         this.inputEl.setAttribute("aria-labelledby", this.labelId);
         this.inputEl.setAttribute("aria-describedby", this.descriptionId);
     }
+    associateDescriptionWithInputElement() {
+        if (!Boolean(this.inputEl)) {
+            return;
+        }
+        if (Boolean(this.description) || Boolean(this.errorMessage)) {
+            if (Boolean(this.inputEl.getAttribute("contenteditable"))) {
+                this.inputEl.setAttribute("aria-describedby", this.descriptionId);
+            }
+            else {
+                this.inputEl.setAttribute("swirl-aria-describedby", this.descriptionId);
+            }
+        }
+        else {
+            this.inputEl.removeAttribute("aria-describedby");
+            this.inputEl.removeAttribute("swirl-aria-describedby");
+        }
+    }
     render() {
         const showErrorMessage = Boolean(this.errorMessage);
         const showDescription = Boolean(this.description) && !showErrorMessage;
@@ -163,7 +175,7 @@ export class SwirlFormControl {
             "form-control--is-select": isSelect,
         });
         const LabelTag = hasContenteditableControl ? "div" : "label";
-        return (h(Host, { key: '75f89bf5628f878c9905adc63eccdc466a1b1216', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: '029f9f8d95b0a93add2dbf1d88d3518e0ff95a97', class: className, role: "group" }, h("span", { key: 'b74c4cd72ad874cc5884e24ab5e84e637f73dde7', class: "form-control__controls" }, h("span", { key: '3e185f5b9339766db5fb50f1ac69e1c24a831904', class: "form-control__prefix" }, h("slot", { key: 'a160fe30b0c0befead143f1c0ed947fd13c72df1', name: "prefix" })), h(LabelTag, { key: '077bdc0fdca9f99383f8f66dff4930fc4ee0de21', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: 'c743d337b6e2d4bcf3113cb82f0378f600dec1c7', class: "form-control__icon" }, h("swirl-icon", { key: '554f4a49720b5b0e0ca2c50789cb5542f340909a', glyph: this.icon, size: 20 }))), h("span", { key: '55852523399d32a5835355144ee744757d10efaa', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: '5affcc782e4f7834ceac151e8cd62b199f98bfbf', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: '1ba74a1a9ddbee3126743d62105d74cf7f600241', class: "form-control__tooltip" }, h("swirl-tooltip", { key: '5f4a8ab75d986099c01159e7084ad8c819be9a61', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: '0cc87113e888aa3b99f5ad2616a39c1925b9cb87', size: 16, tabindex: "0" }))))), h("span", { key: '11492d15ac22c4bcb7e9753457ac3149a3703e00', class: "form-control__input" }, h("slot", { key: 'e4f4d01a17e4d39462f33bf1dce0bc1949dd2015' })))), showDescription && (h("span", { key: '6afcb5673ba1bee9693ff9c5405e4c7933f4888a', class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { key: '89875a4b67de19acdeecb10878e65447b4a1e88c', "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '5dd41ad22713ec400b2c01d8c8117180937aa940', message: this.errorMessage, size: "s" }))))));
+        return (h(Host, { key: 'f78a0f9a49ce41a080064a155f715ef89fd91587', onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { key: 'd2fd7eb95177001c0706a6d18e48e83185f6caf9', class: className, role: "group" }, h("span", { key: 'e8fe85fc929992d48a22005c63c228c8ee14d208', class: "form-control__controls" }, h("span", { key: 'bd67548611eec6031148bf04e5b45c9d6caec594', class: "form-control__prefix" }, h("slot", { key: '5093dd090be2f2432bece77ec1d0d390fdb482bd', name: "prefix" })), h(LabelTag, { key: '30c60c1a1b7d36faa862acca026d218e38406da3', class: "form-control__label", onClick: this.onLabelClick }, hasIcon && (h("span", { key: '7f3b05a85aeac928540c1fcd7a34bebceccf786f', class: "form-control__icon" }, h("swirl-icon", { key: '12cd37a3f685e93fa7fc6b08d3fb4239e0202b36', glyph: this.icon, size: 20 }))), h("span", { key: '045cc7c094980fc107c1b47ebd0bbe37e5a4080e', class: "form-control__label-text", id: this.labelId }, this.label, this.secondaryLabel && this.labelPosition === "outside" && (h("span", { key: 'c6fdda2752f2a88ed46839213d6906c6768b7f16', class: "form-control__secondary-label" }, this.secondaryLabel)), this.tooltip && (h("span", { key: 'cf3f742e1cedd723e655f3f6d237aeb04cf26bad', class: "form-control__tooltip" }, h("swirl-tooltip", { key: 'a450c876d07b2c4f2ff90f9468554c1c897a111d', content: this.tooltip, positioning: "fixed", position: "top" }, h("swirl-icon-help", { key: '41b1b6ab4f6c240d7e7028020b15edf178129293', size: 16, tabindex: "0" }))))), h("span", { key: '968e151ce5df21d39ffd348bb696e8b6c53828c9', class: "form-control__input" }, h("slot", { key: '8b9507aae4143b57d8a29ef4ae4fa1de23d0f897' })))), showDescription && (h("span", { key: '1d2a0bada179effc4c912adc43e1ea9e8aa49ea4', class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { key: '4b1e4794cdf197fba650d97d56e752f0ed09df89', "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { key: '505704e097a229340d566b0240be6f43af4d19f0', message: this.errorMessage, size: "s" }))))));
     }
     static get is() { return "swirl-form-control"; }
     static get encapsulation() { return "scoped"; }
@@ -409,7 +421,10 @@ export class SwirlFormControl {
     static get watchers() {
         return [{
                 "propName": "description",
-                "methodName": "associateDescriptionWithInputElement"
+                "methodName": "watchDescription"
+            }, {
+                "propName": "errorMessage",
+                "methodName": "watchErrorMessage"
             }, {
                 "propName": "disabled",
                 "methodName": "setInputElementDisabledState"

package/dist/collection/components/swirl-inline-error/swirl-inline-error.js

@@ -1,21 +1,19 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlInlineError {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.message = undefined;
         this.size = "m";
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -33,7 +31,7 @@ export class SwirlInlineError {
     }
     render() {
         const className = classnames("inline-error", `inline-error--size-${this.size}`);
-        return (h(Host, { key: '6303d15a3f9688dfb4cba1f2abeef8ebe84b8fc0' }, h("span", { key: '4c86820f5b1089c302197c7de6ccd0eb74d24dc5', class: className, part: "inline-error" }, h("span", { key: '8efe0709d23bff115d86a0e0f8adf8dbfe9ffe2f', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: 'c4d463892cdaafaefe9b295404366b0291d753aa' })), h("span", { key: '590848cd8c87f995501e87f2147b0e746151b445', class: "inline-error__message" }, this.message))));
+        return (h(Host, { key: '78eb4e0317497e4eb8b474bf2fc5dfe73a184a8d' }, h("span", { key: 'a60bd28648dac3243d1af914dbaa4c77fcac9829', class: className, part: "inline-error" }, h("span", { key: '67c27900c45afff291461ba8446e3d812f02c955', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: 'a6dbd685b5dcc2ccd50fdbf1802898cb99eb4a2d' })), h("span", { key: '7454ee5da004959bcf52ce2ca168b7aa1e81370e', class: "inline-error__message" }, this.message))));
     }
     static get is() { return "swirl-inline-error"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-inline-status/swirl-inline-status.js

@@ -1,12 +1,9 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlInlineStatus {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.icon = undefined;
         this.intent = undefined;
         this.message = undefined;
@@ -14,11 +11,12 @@ export class SwirlInlineStatus {
         this.iconSize = 20;
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -39,7 +37,7 @@ export class SwirlInlineStatus {
     }
     render() {
         const className = classnames("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
-        return (h(Host, { key: '2399be5d627741cba2a289842457b41fc838c28a' }, h("span", { key: '3f6ad8e7b1fd303874334fccab02b942deb31ed3', class: className, part: "inline-status" }, this.icon && (h("span", { key: '9d296ed8a4c1c232f91b7f96a2e9330bbad4d5ce', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '4a027e288e1b152c732e9881ac2eb781631f7674', class: "inline-status__message" }, this.message))));
+        return (h(Host, { key: '4061d83f2fe39058d8d6e6d90b9dadc73d575aa7' }, h("span", { key: 'ae51319d804419fda99def8af8fd81b25f5c9cfc', class: className, part: "inline-status" }, this.icon && (h("span", { key: 'c677da1834aef7c19041022ad7580115c1fd8ec3', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'dbec6cd97a2cab40ccbd9670eac038d64d14137c', class: "inline-status__message" }, this.message))));
     }
     static get is() { return "swirl-inline-status"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js

@@ -1,18 +1,14 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import { v4 as uuid } from "uuid";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 /**
  * @slot avatar - Optional avatar displayed to the left of the label
  */
 export class SwirlOptionListItem {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
         this.elementId = uuid();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onDragHandleKeyDown = (event) => {
             if (event.code === "Space" || event.code === "Enter") {
                 event.preventDefault();
@@ -42,12 +38,13 @@ export class SwirlOptionListItem {
         this.focused = undefined;
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+            this.updateIconSize(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         const icon = this.iconEl?.children[0];
@@ -71,9 +68,9 @@ export class SwirlOptionListItem {
             "option-list-item--selected": this.selected,
             "option-list-item--show-avatar": showAvatar,
         });
-        return (h(Host, { key: 'd10255b1a3ce16def32576bcfce8b007122e80fc' }, h("div", { key: '67d2f23595c118dc104cc0c1bec3aa516d514783', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        return (h(Host, { key: 'f10b9d5998e571b30de2b9755b20aa9ff6553b7c' }, h("div", { key: '7351b14adf1f9b8e7f6c8fe95bff82703e3cb0c8', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
                 ? `option-list-item-${this.elementId}-description`
-                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '12c511dd3c23e90f0d4cc988daa0c9992cc71c60', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '9041ef204b95835c99fa409268337c553079d6c2', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: '37ccff8e7e31a78eac6f9a1ede06e55123755a8f', class: "option-list-item__checkbox" }, h("span", { key: 'd0b3a8115a097ee4f538bf6ce64f4de6fe9e5c87', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '732bfb290c9c6038ec11001919c3bdd658843490', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'd2810259d04b5d49d40d0774c98ee56a7f5f7226', class: "option-list-item__avatar" }, h("slot", { key: '042f2a3c70063fd130fec296ccddec084d56aec4', name: "avatar" })), h("span", { key: '61032284deee69c6dc2a66fc0627a5dbedd1dc75', class: "option-list-item__label-container" }, h("span", { key: '320288d88e77a1e8033f102147e046e7fd52a98b', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '6af76305ce6ac4fd64d562801ae976a265075cac', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: 'd9a049efa8acc2f8e163bb201d537fa09e6e215c', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '57ce2025b73bdf1d5303b6c6abc1bc27f6f4beb6', size: this.iconSize })))), this.allowDrag && (h("button", { key: '94f9abc9e467ee5e7ca0bb20cbb41759cefe4207', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: '3bf3b75c4fc6ea020ef18d595d80d8529ec227bf', size: this.iconSize })))));
+                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (h("span", { key: '28b5bf751e4b6f040e217976431cc10ccc18b2ab', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '17d8ee99d49bc39e9c29acbdefa6a33ac1fe011f', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (h("span", { key: 'c96a9aa51eb3d24d8d2981e72f57258ec104a4f0', class: "option-list-item__checkbox" }, h("span", { key: 'e5e16760dac9d5f8fd32dfc1a87b276bac40e218', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: '19678c01717c67032d419f1c081c79dd3d2d86d2', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: '206a3376c0fc0cc5fc251417d3807cb9d021dcc8', class: "option-list-item__avatar" }, h("slot", { key: 'd017728bbc40c000fd35fb1baa92ea4c01f730a2', name: "avatar" })), h("span", { key: '0fd4cec5ad5274106c2db52c304bc1877bbb03fd', class: "option-list-item__label-container" }, h("span", { key: 'b3e61b55ed5e5a0f40a59ee5ff6705ba0f170915', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'a789b71d53ce36c63aacba3136d29e778da6c506', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: 'cc615418e02db15288d1038518c032216db71025', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: '6f06dee5b1cd618ad9fabb61b6bf9f4abf07fa0a', size: this.iconSize })))), this.allowDrag && (h("button", { key: '1bad552ed0a4324962a5e4735bc4330bb44cd3ea', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, h("swirl-icon-drag-handle", { key: '124518bd0178c8e3e8021b5519ae751213f2e99a', size: this.iconSize })))));
     }
     static get is() { return "swirl-option-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js

@@ -1,12 +1,9 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlResourceListFileItem {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.description = undefined;
         this.errorMessage = undefined;
         this.icon = "<swirl-icon-file></swirl-icon-file>";
@@ -16,11 +13,12 @@ export class SwirlResourceListFileItem {
         this.removeButtonLabel = "Remove file";
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -37,7 +35,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: 'a77fb6c728aa73b07338bf27be5fe1bcff9cd5ce', role: "row" }, h("div", { key: '4f3e56655138f59ded67feb2a1c56d14d5bdbfab', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: 'fd87bc5faf44da2adfe0531f14084a3716357ff0', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '591358738d945b39c9b9ffdeb8ff8420662fc2d1', class: "resource-list-file-item__label-container" }, h("span", { key: 'e542836253c3cbd2330d1ac3f8b39e9b4e44ccd4', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'a3fa60138b871755ddb9d6f882af6acd4add6594', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '22f1d243bf021a496f5bb1096a70915099d79e6b', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '76d645965f1c9e33ac2f74f9a5f53428fd76c430', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '0e3e3962afcdd746b1a46e3dd96f56563ae34170', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'cd07ad9b4b3f18f3d6d10dff309ba6451362f2ca', size: "s" }))), showRemoveButton && (h("span", { key: '0001190d82fc5a32420a465ee5bd5eaa917e0f42', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '7a6bc7c626ab5c9060c0bfc2aae771862055fbd8', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: '00406d571fa761d38dbba9b0f662bf8fd8ccf894', role: "row" }, h("div", { key: 'ae94f2002c524e297f147eef7fb1f468259ef351', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: 'b09d36edbd320f67f9a6fabf0c55b9aaba1dfcef', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'e2c7ebed082e6d7e5807865df3a86a7162ca6bb9', class: "resource-list-file-item__label-container" }, h("span", { key: '3899742fff0596baec287802dbae87171934f7fd', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '47d88eb73d4652c7575d0460db2a218002b2b765', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '453f887dc5d5c4d6ce05f8fb089b05f3e6036bab', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '6afa1e5d6a7c93bef6fbfaacae4ceb1d9d0cf5a7', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '24f2fe680d14334561cdcbc395084b338fd0bb11', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '83a6ba6bec794a03673af8cc9fc3f1e851af17a2', size: "s" }))), showRemoveButton && (h("span", { key: 'c50ffc6f5db1880b01ba4df0dc68e20c7b1e85b7', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '4d8f1cc62abed8353d12d57e4b87387fbc6b0895', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
     static get is() { return "swirl-resource-list-file-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.css

@@ -298,6 +298,7 @@
   top: 50%;
   right: var(--s-space-8);
   transform: translateY(-50%);
+  z-index: 2;
 }
 
 .resource-list-item__checkbox {

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -1,7 +1,7 @@
 import classnames from "classnames";
 import { v4 as uuid } from "uuid";
 import { h, Host, } from "@stencil/core";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 /**
  * @slot control - Used to add a menu button to the item
  * @slot badges - Badges displayed inside the item
@@ -9,12 +9,8 @@ import { getDesktopMediaQuery } from "../../utils";
  */
 export class SwirlResourceListItem {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
         this.elementId = uuid();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.onClick = () => {
             if (!this.selectable) {
                 return;
@@ -73,16 +69,17 @@ export class SwirlResourceListItem {
         this.updateMediaState();
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = 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];
@@ -156,7 +153,7 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (h(Host, { key: '51070214010bb6f42b11d1451d711523908dcd24', role: "row" }, h("div", { key: '58da33a690ad26cc6cb613f7c3a120cc27c14168', class: className, role: "gridcell" }, 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 && (h("span", { key: '43feb905ed747fb0f3dce03c9bb0906e807f4cc9', class: "resource-list-item__media" }, h("slot", { key: '8bf74e8f11becef18f95a50ee78af293176e3c74', name: "media" }))), h("span", { key: 'b74ee63857ae512b974e9732d73ff2c7eb070ef6', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '7271335be0863add557483c3819bc61f0bcf3eee', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '4ddca66a33fcbe50927e3af38c6d1bea2ed67887', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '540c9ad85c13187700ff1607d59afc80d90529ac', class: "resource-list-item__meta" }, h("span", { key: 'cb31b8cebf261df69ebb90989e0ec0fbc3c267ee', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: '57d467dfc1dff7d17e93aa0e03f1760054d85de9', class: "resource-list-item__badges" }, h("slot", { key: '18ea4383798222c2aea1dac37464b65133143604', name: "badges" }))))), this.selectable && (h("span", { key: 'aa967cf2216cd148edca930425ecbda013413850', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '3cc2777fbf3850ba756ed88e0ad4ae29e4caf32c', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '61a80c63ef99e3b530c3cc231a1abada0f1940fc' }))))), h("span", { key: 'eaaf028e6c729fc7093d355ebc6c31bc2d4a8696', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: 'f988fee1daed088fb4fb56a5ab262f6e8815d4f7', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '170cc8abf345cbfeeb3d86a77ad4ba081465ee4d', swirlPopover: this.menuTriggerId }, 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 && (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" }, h("swirl-icon-drag-handle", { key: 'eb0b87432675feb37a2f6d8de9f6228e9e921b6e', size: this.iconSize })))));
+        return (h(Host, { key: '63387d5ff4c56c678c6c0e30d8236d5b966d0bff', role: "row" }, h("div", { key: '6fd8f35b61a84ea91ff9ff80f6f754ee50a5933f', class: className, role: "gridcell" }, 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 && (h("span", { key: '4d12c2a220c03d1ee1bb77e214e028f013a23e21', class: "resource-list-item__media" }, h("slot", { key: '5d104523e7da44ceac278d5f6eebea6c2d2e516f', name: "media" }))), h("span", { key: 'cdc7fdf4a5a3e2df7080fece60638aa1d67c6388', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: '187fd3a9974f65902e0fa89cb6c90b4178df7063', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: '5047356c9b024dcdcf1299cc8479aedb2eb7b961', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '1a5039459c067b4de2a540f79124ac9310f9c594', class: "resource-list-item__meta" }, h("span", { key: 'a74caa7e64e88b8cbd9be7be020d63d833f03781', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'ae4f5a2e927b934fba247e989cfc219b09805c99', class: "resource-list-item__badges" }, h("slot", { key: '59df5cb937ffc581ad1f6470b6080561045997fd', name: "badges" }))))), this.selectable && (h("span", { key: 'a494bc2e24fd043cc3c1024e89ae0a16d7c14f86', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: 'b0070f0ad50a683528c216d8e0d1221b53652433', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'dc3cdd5fa6e9adda926966fc77d8acf44762fda5' }))))), h("span", { key: 'd5b2f9079f6cae27bca88d7b00d9eb954641e3f1', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '263ee1c8cd59301ebd510a29ce29afd112fa6c32', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '16ecfb13e3bf0e3d36851671f708ce949ff3dfee', swirlPopover: this.menuTriggerId }, 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 && (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" }, h("swirl-icon-drag-handle", { key: 'e999dfe63293b3367c6d8507532761887b3835d6', size: this.iconSize })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-search/swirl-search.js

@@ -1,12 +1,9 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlSearch {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.forceIconProps(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.clear = () => {
             this.input.value = "";
             this.input.focus();
@@ -35,8 +32,9 @@ export class SwirlSearch {
         this.variant = "filled";
     }
     componentDidLoad() {
-        this.forceIconProps(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
         // see https://stackoverflow.com/a/27314017
         if (this.autoFocus) {
             setTimeout(() => {
@@ -45,7 +43,7 @@ export class SwirlSearch {
         }
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     forceIconProps(smallIcon) {
         if (!Boolean(this.iconEl)) {
@@ -64,7 +62,7 @@ export class SwirlSearch {
         const className = classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (h(Host, { key: '4092fdf29e81da467a01ce14169ef0a236fa1e81' }, h("span", { key: '8d44e68c5d1ee9dcaa87e7b072b7368060451a21', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'a398ce6356847a6cf619cef1d8d1a1e84949a624', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '4fe717d1512a62b47608dbc99042a01e438a38ef', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: '541696544a78036c61621ac82e9ab5071f4b69fe', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '57a0dbb569ca31f11ae9187c4675d90fffca4a0e' }))))));
+        return (h(Host, { key: 'c54510f133d5583f1cb2942a21e889a271ec083c' }, h("span", { key: 'f09bf81a55b0e0e23e78dd1929055e92fd966e90', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: '9d5107940cfaff59864c6a94c5eb2a3657a9168d', "aria-hidden": "true", class: "search__icon" }), h("input", { key: 'd42dcf2414af5d7f569a6990c5e85f67bdc8b9b5', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: 'b6ec549ceb75a93fda65cc8fb008e00c26b133ac', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '7bff26d8ebc73200035936d4add57e2ef6bdd1e5' }))))));
     }
     static get is() { return "swirl-search"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -1,12 +1,9 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
-import { getDesktopMediaQuery } from "../../utils";
+import { DesktopMediaQuery } from "../../services/media-query.service";
 export class SwirlTextInput {
     constructor() {
-        this.desktopMediaQuery = getDesktopMediaQuery();
-        this.desktopMediaQueryHandler = (event) => {
-            this.updateIconSize(event.matches);
-        };
+        this.mediaQueryUnsubscribe = () => { };
         this.clear = () => {
             this.inputEl.value = "";
             this.value = "";
@@ -102,8 +99,9 @@ export class SwirlTextInput {
         this.showPassword = false;
     }
     componentDidLoad() {
-        this.updateIconSize(this.desktopMediaQuery.matches);
-        this.desktopMediaQuery.addEventListener("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.updateIconSize(isDesktop);
+        });
         // see https://stackoverflow.com/a/27314017
         if (this.autoFocus) {
             setTimeout(() => {
@@ -115,7 +113,7 @@ export class SwirlTextInput {
         this.adjustInputSize();
     }
     disconnectedCallback() {
-        this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+        this.mediaQueryUnsubscribe();
     }
     async blurInput() {
         this.inputEl.blur();
@@ -179,7 +177,7 @@ export class SwirlTextInput {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (h(Host, { key: 'c88e6bd426c87abc2e5aa4a6a67b92a33705c737' }, h("div", { key: '88e1c2cdf842a603bb81ca75abe0869c6b321e95', class: className }, this.prefixLabel && (h("span", { key: '6bc23160f6d688b9cb245d6089e129cf350f9533', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '880004143dd812f6af0f74fe9a7fa0d4ccd231fd', "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, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: 'e4bece6d11b65ccddb4e73b330bb7a98203553ad', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '209d064d58f71f255181a8b4c8277e94d7fc6840', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '2c10978eb66b7c9e05b194d51ff540b1774cdde7', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '7d14538e3f4816f0230de3178fe8d5857b541cd2', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'dfcabad170b5312132722cd18e3894bdda4dabee', class: "text-input__stepper" }, h("button", { key: '29fe802c07d61744a0a2411dde31ace11332c90c', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '629dbfef2caf408b3b34ddcfe3beb8305ff14dd8', size: this.iconSize })), h("button", { key: '41f995a4aff79d37d77bc67ceab02da7acbf2841', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: '57101c11f11133c49f1bb422e0d78fd0701e92dd', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: 'e0e9b2a54e8d264529c213e5fe5cc225d7829353', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '21f37a30db4fdc8ffd032e8fee392a2e90f41cc4' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (h(Host, { key: '118c43993df15e8a56132135bd6e5bd7b20c7fa5' }, h("div", { key: 'b32019d666499025e823f65c84107090b3e0bdde', class: className }, this.prefixLabel && (h("span", { key: 'e92f359d218821987e795d91ba09de0a5ac83787', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '311c606dc2c9b78965d35543c79c828bbf04939d', "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, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2e2987f816f1a26b074ca67fc67d2b88031af88e', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '82218c372d0374651f5cb3a07a679c5f045dabfc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '9c42c315b34e9a614a145d2e8a00da2b28fcc21e', size: this.iconSize }))), showPasswordToggle && (h("button", { key: 'd78dcd286ba441a8d5df0a9d9e8b02c466dab617', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'e29c6cb14c6bb8ff7ebf67800b2b267ca0208df9', class: "text-input__stepper" }, h("button", { key: '6218def82164fd3b57015d3fb8c40391cefcf84d', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '9b338df89a94563b9f9fde0ba16cb1fae537c203', size: this.iconSize })), h("button", { key: '6d31cb2c37f9a2887c57f2350afe184a76dd09f8', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'f2b7974999012a8ad29d84dd5df8a908605f57b4', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: '4dae89e8b35db216b513bbca04dff56c48b64696', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'c48b6c6017b6b2a8524a2f3f5e9d2d8869026b3f' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get is() { return "swirl-text-input"; }
     static get encapsulation() { return "scoped"; }