@getflip/swirl-components 0.328.0 → 0.330.0

package/dist/collection/collection-manifest.json

@@ -81,6 +81,7 @@
     "components/swirl-emoji/emojis/swirl-emoji-sad.js",
     "components/swirl-emoji/emojis/swirl-emoji-thumbs-up.js",
     "components/swirl-empty-state/swirl-empty-state.js",
+    "components/swirl-file-chip/swirl-file-chip.js",
     "components/swirl-file-uploader/swirl-file-uploader.js",
     "components/swirl-file-viewer/swirl-file-viewer.js",
     "components/swirl-file-viewer/viewers/swirl-file-viewer-audio/swirl-file-viewer-audio.js",

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

@@ -0,0 +1,77 @@
+:host {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.file-chip {
+  display: flex;
+  position: relative;
+  max-width: 100%;
+  min-width: 15rem;
+  font-size: var(--s-font-size-sm);
+  line-height: var(--s-line-height-sm);
+  background: var(--s-surface-default);
+  border-radius: var(--s-border-radius-sm);
+  outline: 1px solid var(--s-border-strong);
+  outline-offset: -1px;
+  padding-right: var(--s-space-16);
+  gap: var(--s-space-12);
+}
+
+
+.file-chip:hover.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 > * {
+    width: calc(100% - 88px - var(--s-space-12));
+  }
+
+
+.file-chip:hover .file-chip__actions {
+    opacity: 1;
+  }
+
+.file-chip__icon {
+  display: flex;
+  flex-shrink: 0;
+  padding: var(--s-space-16);
+  background: var(--s-surface-sunken-hovered);
+  border-radius: var(--s-border-radius-sm) 0 0 var(--s-border-radius-sm);
+  color: var(--s-icon-default);
+}
+
+.file-chip__info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex-grow: 1;
+}
+
+.file-chip__name {
+  font-weight: var(--s-font-weight-semibold);
+}
+
+.file-chip__description {
+  color: var(--s-text-subdued);
+}
+
+.file-chip__name,
+.file-chip__description {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.file-chip__actions {
+  display: flex;
+  align-items: center;
+
+  position: absolute;
+  right: var(--s-space-16);
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+}

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

@@ -0,0 +1,311 @@
+import { h, Host, } from "@stencil/core";
+import { saveAs } from "file-saver";
+import classnames from "classnames";
+import { isAudioMimeType, isCompressedArchiveMimeType, isImageMimeType, isPdfMimeType, isVideoMimeType, } from "../../utils";
+export class SwirlFileChip {
+    constructor() {
+        this.handleDownloadClick = () => {
+            this.download.emit();
+            if (this.skipNativeDownload) {
+                return;
+            }
+            const fileName = this.name || this.url.split("/").pop();
+            fetch(this.url)
+                .then((response) => response.blob())
+                .then((blob) => {
+                saveAs(blob, fileName);
+            });
+        };
+        this.handlePreviewClick = () => {
+            this.preview.emit();
+        };
+        this.url = undefined;
+        this.name = undefined;
+        this.type = undefined;
+        this.description = undefined;
+        this.loading = undefined;
+        this.loadingLabel = "Loading";
+        this.skipNativeDownload = undefined;
+        this.showDownloadButton = undefined;
+        this.showPreviewButton = undefined;
+        this.downloadButtonLabel = "Download";
+        this.previewButtonLabel = "Preview";
+        this.isHovered = false;
+    }
+    getFileIcon() {
+        if (this.loading) {
+            return h("swirl-spinner", { size: "s", label: this.loadingLabel });
+        }
+        if (isImageMimeType(this.type)) {
+            return h("swirl-icon-image", null);
+        }
+        else if (isVideoMimeType(this.type)) {
+            return h("swirl-icon-video-player", null);
+        }
+        else if (isAudioMimeType(this.type)) {
+            return h("swirl-icon-audio-file", null);
+        }
+        else if (isPdfMimeType(this.type)) {
+            return h("swirl-icon-picture-as-pdf", null);
+        }
+        else if (isCompressedArchiveMimeType(this.type)) {
+            return h("swirl-icon-folder", null);
+        }
+        else {
+            return h("swirl-icon-attachment", null);
+        }
+    }
+    render() {
+        const actionCount = +this.showPreviewButton + +this.showDownloadButton;
+        const className = classnames("file-chip", {
+            "file-chip--loading": this.loading,
+            "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" }))))));
+    }
+    static get is() { return "swirl-file-chip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["swirl-file-chip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["swirl-file-chip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "loading",
+                "reflect": false
+            },
+            "loadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "loading-label",
+                "reflect": false,
+                "defaultValue": "\"Loading\""
+            },
+            "skipNativeDownload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "skip-native-download",
+                "reflect": false
+            },
+            "showDownloadButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-download-button",
+                "reflect": false
+            },
+            "showPreviewButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-preview-button",
+                "reflect": false
+            },
+            "downloadButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "download-button-label",
+                "reflect": false,
+                "defaultValue": "\"Download\""
+            },
+            "previewButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "preview-button-label",
+                "reflect": false,
+                "defaultValue": "\"Preview\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "preview",
+                "name": "preview",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "download",
+                "name": "download",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,168 @@
+const saveAsMock = jest.fn();
+jest.mock("file-saver", () => ({
+    saveAs: saveAsMock,
+}));
+import { mockFetch, MockHeaders, MockResponse, newSpecPage, } from "@stencil/core/testing";
+import { SwirlFileChip } from "./swirl-file-chip";
+import { SwirlButtonGroup } from "../swirl-button-group/swirl-button-group";
+import { SwirlButton } from "../swirl-button/swirl-button";
+describe("swirl-file-chip", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it("renders with required props", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" type="application/pdf"></swirl-file-chip>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-file-chip name="sample.pdf" type="application/pdf" url="/sample.pdf">
+        <mock:shadow-root>
+          <span class="file-chip" role="group">
+            <span class="file-chip__icon">
+              <swirl-icon-picture-as-pdf></swirl-icon-picture-as-pdf>
+            </span>
+            <span class="file-chip__info">
+              <span class="file-chip__name" title="sample.pdf">
+                sample.pdf
+              </span>
+            </span>
+            <swirl-button-group class="file-chip__actions"></swirl-button-group>
+          </span>
+        </mock:shadow-root>
+      </swirl-file-chip>
+    `);
+    });
+    it("renders with description", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" description="2.5 MB" type="application/pdf"></swirl-file-chip>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <swirl-file-chip name="sample.pdf" description="2.5 MB" type="application/pdf" url="/sample.pdf">
+        <mock:shadow-root>
+          <span class="file-chip" role="group">
+            <span class="file-chip__icon">
+              <swirl-icon-picture-as-pdf></swirl-icon-picture-as-pdf>
+            </span>
+            <span class="file-chip__info">
+              <span class="file-chip__name" title="sample.pdf">
+                sample.pdf
+              </span>
+              <span class="file-chip__description">
+                2.5 MB
+              </span>
+            </span>
+            <swirl-button-group class="file-chip__actions"></swirl-button-group>
+          </span>
+        </mock:shadow-root>
+      </swirl-file-chip>
+    `);
+    });
+    it("renders image file type", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="https://example.com/image.jpg" name="image.jpg" type="image/jpeg"></swirl-file-chip>`,
+        });
+        const iconElement = page.root.shadowRoot.querySelector(".file-chip__icon swirl-icon-image");
+        expect(iconElement).toBeTruthy();
+    });
+    it("renders video file type", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="https://example.com/video.mp4" name="video.mp4" type="video/mp4"></swirl-file-chip>`,
+        });
+        const iconElement = page.root.shadowRoot.querySelector(".file-chip__icon swirl-icon-video-player");
+        expect(iconElement).toBeTruthy();
+    });
+    it("renders audio file type", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="https://example.com/audio.mp3" name="audio.mp3" type="audio/mpeg"></swirl-file-chip>`,
+        });
+        const iconElement = page.root.shadowRoot.querySelector(".file-chip__icon swirl-icon-audio-file");
+        expect(iconElement).toBeTruthy();
+    });
+    it("renders text file type", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="https://example.com/document.txt" name="document.txt" type="text/plain"></swirl-file-chip>`,
+        });
+        const iconElement = page.root.shadowRoot.querySelector(".file-chip__icon swirl-icon-attachment");
+        expect(iconElement).toBeTruthy();
+    });
+    it("renders loading state", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" type="application/pdf" loading="true"></swirl-file-chip>`,
+        });
+        const iconElement = page.root.shadowRoot.querySelector(".file-chip__icon swirl-spinner");
+        expect(iconElement).toBeTruthy();
+    });
+    it("renders with preview button", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip, SwirlButtonGroup, SwirlButton],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" type="application/pdf" show-preview-button="true"></swirl-file-chip>`,
+        });
+        const previewButton = page.root.shadowRoot
+            .querySelector(".file-chip__actions")
+            .querySelector("swirl-button");
+        expect(previewButton.icon).toContain("swirl-icon-preview");
+    });
+    it("renders with download button", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip, SwirlButtonGroup, SwirlButton],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" type="application/pdf" show-download-button="true"></swirl-file-chip>`,
+        });
+        const downloadButton = page.root.shadowRoot
+            .querySelector(".file-chip__actions")
+            .querySelector("swirl-button");
+        expect(downloadButton.icon).toContain("swirl-icon-download");
+    });
+    it("emits preview event when preview button is clicked", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip, SwirlButtonGroup, SwirlButton],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" type="application/pdf" show-preview-button="true"></swirl-file-chip>`,
+        });
+        const previewSpy = jest.fn();
+        page.root.addEventListener("preview", previewSpy);
+        page.root.shadowRoot.querySelector("swirl-button").click();
+        expect(previewSpy).toHaveBeenCalled();
+    });
+    it("emits download event when download button is clicked", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" type="application/pdf" show-download-button="true" skip-native-download="true"></swirl-file-chip>`,
+        });
+        const downloadSpy = jest.fn();
+        page.root.addEventListener("download", downloadSpy);
+        page.root.shadowRoot.querySelector("swirl-button").click();
+        expect(downloadSpy).toHaveBeenCalled();
+    });
+    it("downloads file when download button is clicked", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" type="application/pdf" show-download-button="true"></swirl-file-chip>`,
+        });
+        const res = new MockResponse("", {
+            url: "/sample.pdf",
+            headers: new MockHeaders([
+                ["Content-Type", "application/pdf"],
+                ["Access-Control-Allow-Origin", "*"],
+            ]),
+        });
+        mockFetch.response(Object.assign(res, { blob: () => "Blob" }));
+        page.root.shadowRoot.querySelector("swirl-button").click();
+        await page.waitForChanges();
+        expect(saveAsMock).toHaveBeenCalledWith("Blob", "sample.pdf");
+    });
+    it("skips native download when skipNativeDownload is true", async () => {
+        const page = await newSpecPage({
+            components: [SwirlFileChip],
+            html: `<swirl-file-chip url="/sample.pdf" name="sample.pdf" type="application/pdf" show-download-button="true" skip-native-download="true"></swirl-file-chip>`,
+        });
+        page.root.shadowRoot.querySelector("swirl-button").click();
+        await page.waitForChanges();
+        expect(saveAsMock).not.toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,23 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./swirl-file-chip.mdx";
+export default {
+    component: "swirl-file-chip",
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            page: Docs,
+        },
+    },
+    title: "Components/SwirlFileChip",
+};
+const Template = (args) => {
+    const element = generateStoryElement("swirl-file-chip", args);
+    return element;
+};
+export const SwirlFileChip = Template.bind({});
+SwirlFileChip.args = {
+    url: "/sample.pdf",
+    name: "sample.pdf",
+    type: "application/pdf",
+    description: "2.5 MB",
+};

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

@@ -40,10 +40,10 @@ export class SwirlFileUploader {
             "file-uploader--disabled": this.disabled,
             "file-uploader--show-dropzone": this.showDropzone,
         });
-        return (h(Host, { key: 'b280e5c9623475ce82a5ccca1670765c570a6221' }, h("div", { key: '2c19137025c5a98397302cefc6e224e536db5a8a', class: className }, this.hideLabel ? (h("swirl-visually-hidden", null, h("label", { htmlFor: this.inputId }, this.label))) : (h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label)), this.description && (h("span", { key: '218258a7353d33e39be319f9e3a940a8538eb919', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: 'f34143a0e8776f07beccf97c6ce89ddbba83b6ab', class: "file-uploader__dropzone" }, this.showDropzone ? ([
+        return (h(Host, { key: 'ebea462bbc2ef825210e0a466b2088a6344f3bd2' }, h("div", { key: 'e75b22f82454fd365b8ac77811c7da6e6a8be65c', class: className }, this.hideLabel ? (h("swirl-visually-hidden", null, h("label", { htmlFor: this.inputId }, this.label))) : (h("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputId}-label` }, this.label)), this.description && (h("span", { key: '5be02f35771b110f3a7b4a0ce5465a01e71a62c3', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '111b3de677dd0649ba8d428b461a983df51f15bb', class: "file-uploader__dropzone" }, this.showDropzone ? ([
             h("swirl-icon-cloud-upload", { class: "file-uploader__dropzone-icon" }),
             h("div", { class: "file-uploader__dropzone-label", id: `${this.inputId}-additional-label` }, h("span", { class: "file-uploader__dropzone-cta" }, this.ctaLabel), " ", h("span", { class: "file-uploader__drag-drop-label" }, this.dragDropLabel)),
-        ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { key: 'af279b3f0d3c55d713ed6d2ca80943f291f1c283', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
+        ]) : (h("swirl-button", { class: "file-uploader__upload-button", disabled: this.disabled, icon: this.uploadButtonIcon, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, swirlAriaDescribedby: ariaDescribedby, variant: this.uploadButtonVariant })), h("input", { key: '5dc617a9f0cbc219fd13614ca25c46a67b63bbc2', accept: this.accept, "aria-describedby": ariaDescribedby, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (el) => (this.inputEl = el), tabIndex: tabIndex, type: "file" })))));
     }
     static get is() { return "swirl-file-uploader"; }
     static get encapsulation() { return "scoped"; }

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

@@ -54,7 +54,7 @@ export class SwirlFileViewer {
                 this.type !== "text/plain" &&
                 this.type !== "text/csv" &&
                 this.type !== "application/pdf");
-        return (h(Host, { key: 'd0e65f29018ef97b2e95edcb63101fd481e5138f' }, h("div", { key: 'd774605e7b7d5c1c326793a74dcf07b5470920cd', class: "file-viewer" }, this.type && this.active && (h("div", { key: '5dc512723009035fbf3a7db38dfd5f06509415b0', class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { key: '8ad999abd4bead8bc14c9870aa5b27d490f82f7f', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '89848f337987c78e30d1a3a9eda8be39c557e2a8', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: 'f5bf074629c80fcbdaffef5cba0e0a00e2097e5e', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: 'cc4dc88eba130210a606fa6b0664880a1c81f3b6', errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, workerSrc: this.pdfWorkerSrc, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { key: '356eff4df42ac637dad5cade0d0fa55376d94b56', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: '01c509439851ebe76c0ef7ac05937128782025ba', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-file-viewer-fallback", { key: 'ddcc0c2f5773fd1adac24c5da750c95db53d9e9f', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
+        return (h(Host, { key: 'ea0847d5c13936e835a647097cd6d5909d77f001' }, h("div", { key: '1938035797f8030e5a169e1ee825b6b2e7be87a5', class: "file-viewer" }, this.type && this.active && (h("div", { key: '31ff6d2cf119fb97b54ff1e10bd407bcdb0f1697', class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { key: '92e5494586480c28032eb49bfd263adc515a65b7', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '9f62958febf8bdcb6ad2c996e3fbfddc139007f3', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: 'bb44517fb130d3a92cddd1b8558798c53cd3047e', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '89c4e14d14cb3cd8b6eb60f0a7ca2691d221fc77', errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, workerSrc: this.pdfWorkerSrc, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { key: '9451282b717fc11ec26538cb12c78d176f658f8a', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: 'a4aed0b8681c1065ad23c4ef12c0e99cd347523a', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-file-viewer-fallback", { key: 'e4cd460863b7a43975d0b13c6ad45fa3d3a6721a', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
     }
     static get is() { return "swirl-file-viewer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-audio/swirl-file-viewer-audio.js

@@ -9,7 +9,7 @@ export class SwirlFileViewerAudio {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: 'c109a8d17edd964bcfb3e10919d004aef5af69dd', class: "file-viewer-audio" }, h("audio", { key: '2749f3d595211c3803f228666d942038ca3111c2', autoplay: this.autoplay, class: "file-viewer-audio__audio", controls: true }, h("source", { key: '546e8bba3bc27c9eab593355e74a96a717b104dc', src: this.file, type: this.type }))));
+        return (h(Host, { key: '8d11143947ae222cd7b34e3bf572504c18ea5ac1', class: "file-viewer-audio" }, h("audio", { key: '65005f77cbec62bd5241aa33fbf9041ffcf8f459', autoplay: this.autoplay, class: "file-viewer-audio__audio", controls: true }, h("source", { key: 'e6c2287834b23182e71d35950c573d94dc519449', src: this.file, type: this.type }))));
     }
     static get is() { return "swirl-file-viewer-audio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-csv/swirl-file-viewer-csv.js

@@ -38,7 +38,7 @@ export class SwirlFileViewerCsv {
         }
     }
     render() {
-        return (h(Host, { key: '724dffa84d338819c53cbc6a60f19645fd6afbd5', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: 'a863aa26703bb6d5a2eaaf6cf11e8037540309f6', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'a2265fd92e679949e38edb689e299f79bae61171', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'e2fdbad753452982b4f7377dc6d7606a21b04fe3', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '976c428a2ddd7f3af090dcaa278b24564c2298b0' }, this.data?.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))), this.loading && (h("div", { key: 'ecc668679b07ef4f43a0da23189a04dcf589703f', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: '773ac080be33b6c017909908500e9e0630f5560f' })))));
+        return (h(Host, { key: '87d00464e093c614bb7a91c506e4ae90dfd23fa1', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: 'b225bc761eb5b53feebee91ceece9f772c6c34e2', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'a0c65203783f9d52e6dca85c2c8bee276ad73301', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'e858535184a6faa511b914b7e304585e4f1f1df1', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '096f8e65836fbc7f30bc70f353d81ce38f170b26' }, this.data?.map((row, index) => (h("tr", { class: "file-viewer-csv__row", key: `row-${index}` }, row.map((cell, i) => (h("td", { class: "file-viewer-csv__cell", key: `cell-${index}-${i}` }, cell))))))))), this.loading && (h("div", { key: '54814a5f8ccc7e44e41ef4c290920675f265e246', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: '0e6cc77e2f6f46951145a5a4b6ade550fab7fbcc' })))));
     }
     static get is() { return "swirl-file-viewer-csv"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-file-viewer/viewers/swirl-file-viewer-fallback/swirl-file-viewer-fallback.js

@@ -14,7 +14,7 @@ export class SwirlFileViewerFallback {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: 'e2b9af7cdfec183564e1701a725a8e4da30b629c', class: "file-viewer-fallback" }, h("swirl-stack", { key: '7038f16de3316cbe6613537e1dcd46054982f7b9', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '47cf21c25c846fdad4501d35fd8dc09f3ab3683e', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '345301c70f899b76bb9b0a16a8ea76b68c86f705', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '4d8b0894f02aac21534f8823a5120cf0c5d52ac2', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
+        return (h(Host, { key: 'dcbd3e7364c233ee38b1a3f7f1bfde1d8ca7bd7a', class: "file-viewer-fallback" }, h("swirl-stack", { key: '32fec35e92cee6a1675e89217d79f0a7552adb6d', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: 'd4ddfa9e62b222d415851cfc6b5431e5e1f00fe4', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '7a8eecdb32080027482b9562409ba9bf1228f3a7', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: 'fac69eca8912fd60d0eb0a80a19490fca99f0c60', download: this.fileName, href: this.file, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.onDownload, variant: "on-image" })))));
     }
     static get is() { return "swirl-file-viewer-fallback"; }
     static get encapsulation() { return "shadow"; }