@getflip/swirl-components 0.480.0 → 0.481.0

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

@@ -1,61 +1,105 @@
 :host {
   display: inline-block;
   max-width: 100%;
+  overflow: hidden;
+  background-color: var(--s-background-default);
+  border-radius: var(--s-border-radius-sm);
+  outline: 1px solid var(--s-border-strong);
+  outline-offset: -1px;
 }
 
 .file-chip {
   display: flex;
   position: relative;
+  align-items: center;
   max-width: 100%;
-  min-width: 15rem;
   font-size: var(--s-font-size-sm);
   line-height: var(--s-line-height-sm);
   background-color: transparent;
-  border-radius: var(--s-border-radius-sm);
-  outline: 1px solid var(--s-border-strong);
-  outline-offset: -1px;
+  padding-top: var(--s-space-8);
   padding-right: var(--s-space-16);
+  padding-bottom: var(--s-space-8);
+  padding-left: var(--s-space-8);
   gap: var(--s-space-12);
 }
 
-
-.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: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:focus-within .file-chip__actions {
-    opacity: 1;
+@media (hover: hover) {
+    .file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,
+    .file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action,
+    .file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,
+    .file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action {
+      background-color: var(--s-state-hovered);
+      cursor: pointer;
+    }
+
+    .file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description, .file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions, .file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 
 .file-chip__icon {
   display: flex;
   flex-shrink: 0;
-  padding: var(--s-space-16);
-  background: var(--s-state-hovered);
-  border-radius: var(--s-border-radius-sm) 0 0 var(--s-border-radius-sm);
-  color: var(--s-icon-default);
+  padding: var(--s-space-4);
+  background-color: var(--s-decorative-blueberry-surface-subdued);
+  border-radius: 50%;
+  color: var(--s-decorative-blueberry-text);
 }
 
 .file-chip__info {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: 0;
+  align-items: center;
+  gap: var(--s-space-12);
   flex-grow: 1;
+  min-width: 0;
 }
 
 .file-chip__name {
+  color: var(--s-text-default);
   font-weight: var(--s-font-weight-semibold);
 }
 
+.file-chip__suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--s-space-12);
+  flex-grow: 1;
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+
+@media (hover: hover) {
+
+.file-chip__suffix {
+    display: inline-grid;
+    justify-items: end;
+    gap: 0
+}
+  }
+
+.file-chip__suffix swirl-button {
+    display: inline-flex;
+  }
+
+@media (hover: hover) {
+
+.file-chip__description,
+.file-chip__actions {
+    grid-area: 1 / 1
+}
+  }
+
 .file-chip__description {
   color: var(--s-text-subdued);
+  font-size: var(--s-font-size-xs);
 }
 
 .file-chip__name,
@@ -68,13 +112,24 @@
 .file-chip__actions {
   display: flex;
   align-items: center;
+  gap: var(--s-space-8);
+}
 
-  position: absolute;
-  right: var(--s-space-16);
-  top: 0;
-  bottom: 0;
-  opacity: 0;
+@media (hover: hover) {
+
+.file-chip__actions {
+    opacity: 0;
+    pointer-events: none
 }
+  }
+
+.file-chip--no-suffix .file-chip__suffix {
+    display: none;
+  }
+
+.file-chip--has-description .file-chip__info {
+    align-items: baseline;
+  }
 
 .file-chip--type-image .file-chip__icon {
     color: var(--s-decorative-kiwi-text);
@@ -110,3 +165,11 @@
     color: var(--s-decorative-banana-text);
     background-color: var(--s-decorative-banana-surface-subdued);
   }
+
+.file-chip--loading .file-chip__icon {
+    padding: var(--s-space-2);
+  }
+
+.file-chip--loading .file-chip__icon {
+    background-color: transparent;
+  }

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

@@ -4,21 +4,34 @@ import { saveAs } from "file-saver";
 import { isAudioMimeType, isCompressedArchiveMimeType, isDocumentMimeType, isPdfMimeType, isSupportedImageMimeType, isVideoMimeType, } from "../../utils";
 export class SwirlFileChip {
     constructor() {
-        this.loadingLabel = "Loading";
+        this.deleteButtonLabel = "Delete";
         this.downloadButtonLabel = "Download";
+        this.loadingLabel = "Loading …";
         this.previewButtonLabel = "Preview";
-        this.isHovered = false;
         this.fileType = "unknown";
+        this.isHovered = false;
         this.fileIconMap = {
-            image: h("swirl-icon-image", null),
-            video: h("swirl-icon-video-player", null),
-            audio: h("swirl-icon-audio-file", null),
-            pdf: h("swirl-icon-picture-as-pdf", null),
-            compressed: h("swirl-icon-folder", null),
-            document: h("swirl-icon-file", null),
-            unknown: h("swirl-icon-attachment", null),
+            image: h("swirl-icon-image", { size: 20 }),
+            video: h("swirl-icon-video-player", { size: 20 }),
+            audio: h("swirl-icon-audio-file", { size: 20 }),
+            pdf: h("swirl-icon-picture-as-pdf", { size: 20 }),
+            compressed: h("swirl-icon-folder", { size: 20 }),
+            document: h("swirl-icon-file", { size: 20 }),
+            unknown: h("swirl-icon-attachment", { size: 20 }),
         };
-        this.handleDownloadClick = () => {
+        this.handleClick = () => {
+            if (this.loading) {
+                return;
+            }
+            if (this.showPreviewButton) {
+                this.handlePreviewClick();
+            }
+            else if (this.showDownloadButton) {
+                this.handleDownloadClick();
+            }
+        };
+        this.handleDownloadClick = (event) => {
+            event?.stopPropagation();
             this.download.emit();
             if (this.skipNativeDownload) {
                 return;
@@ -30,9 +43,14 @@ export class SwirlFileChip {
                 saveAs(blob, fileName);
             });
         };
-        this.handlePreviewClick = () => {
+        this.handlePreviewClick = (event) => {
+            event?.stopPropagation();
             this.preview.emit();
         };
+        this.handleDeleteClick = (event) => {
+            event?.stopPropagation();
+            this.delete.emit();
+        };
     }
     componentWillLoad() {
         this.setFileType();
@@ -70,13 +88,23 @@ export class SwirlFileChip {
         }
     }
     render() {
-        const actionCount = +this.showPreviewButton + +this.showDownloadButton;
+        const hasAction = this.showPreviewButton ||
+            this.showDownloadButton ||
+            this.showDeleteButton;
+        const noSuffix = !this.description &&
+            !this.showPreviewButton &&
+            !this.showDownloadButton &&
+            !this.showDeleteButton;
+        const hasDescription = this.description || this.loading;
         const className = classnames("file-chip", `file-chip--type-${this.fileType}`, {
             "file-chip--loading": this.loading,
-            "file-chip--one-action": actionCount === 1,
-            "file-chip--two-actions": actionCount === 2,
+            "file-chip--has-description": hasDescription,
+            "file-chip--has-download-action": this.showDownloadButton,
+            "file-chip--has-preview-action": this.showPreviewButton,
+            "file-chip--no-actions": !hasAction,
+            "file-chip--no-suffix": noSuffix,
         });
-        return (h(Host, { key: 'aaf3bf8669f4de83f0e6d80ab1690f1f97963f9c' }, h("span", { key: 'fc3a063181f68f58e8a14a2cf0f529214c53490b', role: "group", class: className }, h("span", { key: '9fb05f1c19f35f34f385aa3b763cabb89b6270b1', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '0187007fa80378ab14ea8db1b64005ad17206706', class: "file-chip__info" }, h("span", { key: '096baeeb5875dc3b1a6cfa1ef923e78c3d6e4be3', class: "file-chip__name", title: this.name }, this.name), this.description && (h("span", { key: '7f75522d6126f326db005450a7e98289335dd842', class: "file-chip__description" }, this.description))), h("swirl-button-group", { key: 'e2dc6178da3cc9120bca8e1eea26e51c954cb69d', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: 'fd835a188fe66ba7becff091153f3f88dab82265', 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: 'fc762ca1b057c3cb34a4403af972bc2c28c0f3e6', 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: '313de20490e5dcbc11edf8def10ba35334b48d25' }, h("span", { key: 'c32e419be3a302cf4057a15f236022fe2088dd63', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, h("span", { key: '4518d1f0d2b910ab924fba87e823c9742cc94884', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: 'bdacb6734b239e5356b21c5d45c37a6b85addc20', class: "file-chip__info" }, h("span", { key: '0c6c2e4bad9e93516c4dcae74b5a6ba27c2eb16e', class: "file-chip__name", title: this.name }, this.name), h("span", { key: '339e0cd14817e5e2837ccba858155b42545387a9', class: "file-chip__suffix" }, (this.description || this.loading) && (h("span", { key: '9ef8c2c3b97fea7fbec346325f8ffa215ec7fbe5', class: "file-chip__description" }, this.loading ? this.loadingLabel : this.description)), hasAction && !this.loading && (h("span", { key: '92598d232a32b10dd52750044f7992a3db4b5831', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '93b88e5ea5cb94e1648fcad1ead4208e2552720b', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (h("swirl-button", { key: '3ceb2f52e305dcf51a869bb93573297fe748e3f4', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (h("swirl-button", { key: '14b11323cfa106626dc63df82d213b3844f81d39', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
     }
     static get is() { return "swirl-file-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -92,7 +120,7 @@ export class SwirlFileChip {
     }
     static get properties() {
         return {
-            "url": {
+            "deleteButtonLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -100,8 +128,8 @@ export class SwirlFileChip {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -109,9 +137,10 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "url"
+                "attribute": "delete-button-label",
+                "defaultValue": "\"Delete\""
             },
-            "name": {
+            "description": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -119,8 +148,8 @@ export class SwirlFileChip {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -128,9 +157,9 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "description"
             },
-            "type": {
+            "downloadButtonLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -138,8 +167,8 @@ export class SwirlFileChip {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -147,9 +176,29 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "type"
+                "attribute": "download-button-label",
+                "defaultValue": "\"Download\""
             },
-            "description": {
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading"
+            },
+            "loadingLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -166,18 +215,19 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "description"
+                "attribute": "loading-label",
+                "defaultValue": "\"Loading \u2026\""
             },
-            "loading": {
-                "type": "boolean",
+            "name": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -185,9 +235,9 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "loading"
+                "attribute": "name"
             },
-            "loadingLabel": {
+            "previewButtonLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -204,10 +254,10 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "loading-label",
-                "defaultValue": "\"Loading\""
+                "attribute": "preview-button-label",
+                "defaultValue": "\"Preview\""
             },
-            "skipNativeDownload": {
+            "showDeleteButton": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -224,7 +274,7 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "skip-native-download"
+                "attribute": "show-delete-button"
             },
             "showDownloadButton": {
                 "type": "boolean",
@@ -264,7 +314,26 @@ export class SwirlFileChip {
                 "reflect": false,
                 "attribute": "show-preview-button"
             },
-            "downloadButtonLabel": {
+            "skipNativeDownload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "skip-native-download"
+            },
+            "type": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -272,8 +341,8 @@ export class SwirlFileChip {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -281,10 +350,9 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "download-button-label",
-                "defaultValue": "\"Download\""
+                "attribute": "type"
             },
-            "previewButtonLabel": {
+            "url": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -292,8 +360,8 @@ export class SwirlFileChip {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -301,21 +369,20 @@ export class SwirlFileChip {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "preview-button-label",
-                "defaultValue": "\"Preview\""
+                "attribute": "url"
             }
         };
     }
     static get states() {
         return {
-            "isHovered": {},
-            "fileType": {}
+            "fileType": {},
+            "isHovered": {}
         };
     }
     static get events() {
         return [{
-                "method": "preview",
-                "name": "preview",
+                "method": "delete",
+                "name": "delete",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -343,6 +410,21 @@ export class SwirlFileChip {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "preview",
+                "name": "preview",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {

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

@@ -32,10 +32,10 @@ export class SwirlFileUploader {
             "file-uploader--disabled": this.disabled,
             "file-uploader--show-dropzone": this.showDropzone,
         });
-        return (h(Host, { key: '8c8a93838db5c7c0f2d327aebf32a41f7347ef50' }, h("div", { key: 'b002b842de98f9e58408250cd4e7c53e4e8bbdf8', 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: '2c07600cbced9bb6ce4a3a1831568131237fc907', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '3c0433d699816d766ed73f4cc700d935167d42c7', class: "file-uploader__dropzone" }, this.showDropzone ? ([
+        return (h(Host, { key: 'b81758e118d61ce0caa78d276852fe110400f4d9' }, h("div", { key: '14b79693efc06797b9c51a232029262985f48308', 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: 'd2a722e3ed8534340bf8de5edda0025d7de75c3b', class: "file-uploader__description", id: `${this.inputId}-description`, innerHTML: this.descriptionAllowHtml ? this.description : undefined }, !this.descriptionAllowHtml && this.description)), h("div", { key: '88974c3227c371694e8c0f605636d05e9b029463', 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: '26c8ca9a3dcc30cc17f24ecd9e8298e30be13e58', 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: '828967e1c55db3b839ba638585bba59656f1185c', 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

@@ -50,7 +50,7 @@ export class SwirlFileViewer {
                 this.type !== "text/plain" &&
                 this.type !== "text/csv" &&
                 this.type !== "application/pdf");
-        return (h(Host, { key: '409681d2acd9e7b92333f797a5a7d748ddb6ba08' }, h("div", { key: '8f3a727214c1cafa7a3e4af3d099cdb4f4145d36', class: "file-viewer" }, this.type && this.active && (h("div", { key: '8faac443977d16a388d1c5a95eb1bbb904c20451', class: "file-viewer__file" }, isSupportedImageMimeType(this.type) && (h("swirl-file-viewer-image", { key: 'b6e8443af85e8767f272d439b1a5071988e493c3', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) }, h("slot", { key: '3403f3e6c70dec97caaa428293424914b94273ba', name: "watermark", slot: "watermark" }))), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '2ed8455f358128bbe3ebe47446cddcd87c297590', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: '6b785b386b4da9b28834b21e85717fab70b14ac8', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '68d135878775bb5760e22dc5843bfa51d3ffaf85', 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: '730ae4f9b35744d21b89dab12bd9b43194fe7225', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: 'e436b62ee90f54abd8d2a828e58633b5b1baec86', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: 'a0865397b7eb19051cf25b543cf6c58e9337b082', disableDownload: this.disableDownload, file: this.file, fileName: this.fileName, onDownload: this.onFallbackDownload })))))));
+        return (h(Host, { key: 'e37b311811839d0adcda37914cbfec0e7e27d0c2' }, h("div", { key: '7d7f1d4e4a9985b849ae0fb2cf89e8e33814adb0', class: "file-viewer" }, this.type && this.active && (h("div", { key: 'a954da84ff90573a9322c190a23782e8907f9108', class: "file-viewer__file" }, isSupportedImageMimeType(this.type) && (h("swirl-file-viewer-image", { key: 'ce6264766b1c24a252a554d550829eeb9836cc35', description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) }, h("slot", { key: '7288c505280ee94aed9e2116ef42a45b067bb4ee', name: "watermark", slot: "watermark" }))), this.type === "text/plain" && (h("swirl-file-viewer-text", { key: '6731f831d8cc6e888204729266780655bb34a6cf', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { key: 'b60a2c53f35d089f943e26384e8aa0da9825ae53', errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { key: '52966485b6c99591788daf0c8ebd62e5288a9300', 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: '70340b8ab8d1d8bdb301907b3a32cc94c8fdef3d', autoplay: this.autoplay, disableDownload: this.disableDownload, file: this.file, ref: (el) => (this.viewer = el) })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { key: 'df66831fc1d85a22c766be0f91f578fd4231f6bb', autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el) })), unsupportedType && (h("swirl-file-viewer-fallback", { key: 'a39061a66dbbcb12e77317051ea1b62bb4af970f', 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

@@ -4,7 +4,7 @@ export class SwirlFileViewerAudio {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: 'f383fcd28eea1d050d4c1d45e5ded7a112e46ae2', class: "file-viewer-audio" }, h("audio", { key: '7296404a7c8fcb12f1797c4840a20eb00efbbbb6', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
+        return (h(Host, { key: '083686c9ffa51e302d2a69ca1cc3e911f00add26', class: "file-viewer-audio" }, h("audio", { key: 'c90724c4b5be569e0802a107fc3ea7d8050bc733', autoplay: this.autoplay, class: "file-viewer-audio__audio", src: this.file, controls: true })));
     }
     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

@@ -34,7 +34,7 @@ export class SwirlFileViewerCsv {
         }
     }
     render() {
-        return (h(Host, { key: '4bbf78f9c5b4d2b1f4f60dc9ebd531c71a308b02', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '9a9b9138908ad2bfe58fac9267303c8f27923cac', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: 'd5a49d145c09839a8ea72fd21eac2cd90d886dde', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: 'f88fdbaad0772c52d60f7dc2cdde084043604a51', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '1b452d58c954c76aea5f0f31ede2d62ed9c4d3b7' }, 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: '24dd79c8f41ce0cba43d7567cf7f404d2343602b', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: '85ec132651f1dd62b28645c508b182176f797f12' })))));
+        return (h(Host, { key: '095365dc13663ab46360fffe88a427c92f42d20d', class: "file-viewer-csv", exportparts: "file-viewer-csv__table" }, this.error && (h("swirl-inline-error", { key: '53e683e30ec994be9078c127dedd42156d762c5f', class: "file-viewer-csv__error", message: this.errorMessage })), h("div", { key: '16149501b3e3581856bb18a15f40f92df8c4ee1c', class: "file-viewer-csv__csv", tabIndex: 0 }, h("table", { key: '8f38e9ec966a482312ecc49eee74896e873b22d0', class: "file-viewer-csv__table", part: "file-viewer-csv__table" }, h("tbody", { key: '2759fca71e681785d8c87ec1dd154512169be5f3' }, 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: '5df1b2ac7106e5e4c01e9f2b4d444ea7e0c0de77', class: "file-viewer-csv__spinner" }, h("swirl-spinner", { key: 'ffe74126586eff2b5e2fbfdf2c60e7953d27f632' })))));
     }
     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

@@ -11,7 +11,7 @@ export class SwirlFileViewerFallback {
         this.activate.emit(this.el);
     }
     render() {
-        return (h(Host, { key: 'c9deab23d5974b6ef5f41c1d7299b85452a82aa2', class: "file-viewer-fallback" }, h("swirl-stack", { key: '86ec016e1c42bc999db0f57463e5e4751d34b6c5', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '0fd7287ab36c1d3a75121b452bae43f2c57990f2', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '844e21a5ba8b14a893bec8418002abda9c743689', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '7d141c9428a8234ea88016f609565a15f69c9aa1', 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: '6b8965e54565989c03df58c7ba162bf14511ea7b', class: "file-viewer-fallback" }, h("swirl-stack", { key: 'cb331b2c2bbb4efeb11ef72f43663b1ac76915d4', align: "center", height: "100%", justify: "center", spacing: "16" }, h("swirl-icon-file", { key: '1cae467640d45738242d60a4c7637f5d3e047f0e', class: "file-viewer-fallback__icon", color: "on-image", size: 28 }), this.fileName && (h("swirl-text", { key: '4e6150fb3d6c2609e02136abe67c958b1f04a877', color: "on-image", size: "lg", weight: "medium" }, this.fileName)), !this.disableDownload && (h("swirl-button", { key: '6057be830e84a6b75ca4ea0bb082844a16161a1b', 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"; }

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

@@ -202,7 +202,7 @@ export class SwirlFileViewerImage {
         const className = classnames("file-viewer-image", {
             "file-viewer-image--show-watermark": showWatermark,
         });
-        return (h(Host, { key: '296dbf984cb0740faeb018a6a9a76ecc359fd473', onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: 'ac5d0f6ba5f5e7e7855d4bb33114e9e847b798e9', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: '1febec4c6be9ac46a41dfeec42176b8b4d940962', class: className }, h("span", { key: '12be794ddb23f4fd2cd11d53516ab4d3f295691c', class: "file-viewer-image__container" }, h("img", { key: '2476a3edbf403a299e1253aa9effe65d51284a66', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), h("span", { key: '05d8eae9ebc08a3a1e097b955b790407a2be659a', class: "file-viewer-image__watermark" }, h("slot", { key: 'a90b12d74d0bbc4283fdc8aeff02817a8887ec0a', name: "watermark" }))), this.loading && (h("div", { key: 'f24a4c4c7e84233e7511ad600fe6f67c12a94d5f', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: '3b308e4af540e945efb45505c3d52142ce384470' }))))));
+        return (h(Host, { key: '5ee98f88109a016dbafc445db1b3a552f687f5b4', onDblClick: this.onDblClick, onWheel: this.onWheel, onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, this.error && (h("swirl-inline-error", { key: 'cbe58f3f172d1a5d4d4ce0701936ceeb8a68fb3d', class: "file-viewer-image__error", message: this.errorMessage })), h("figure", { key: '363fa458396e950ab87ca4b88573df543d4ae9bf', class: className }, h("span", { key: '310710ea6616f6a22ff18ae0e77ad1a473c44c8d', class: "file-viewer-image__container" }, h("img", { key: '2088b8dc56f4cf9b94463aef3b5f642e1adaa851', alt: this.description, class: "file-viewer-image__image", ref: this.onImageElementUpdate, src: this.file }), h("span", { key: '6efc09d6ee1e03c3081eed4c58c319a0a9217546', class: "file-viewer-image__watermark" }, h("slot", { key: '00fd12984bc5eca9103925e89d1c8b32a9f33ee1', name: "watermark" }))), this.loading && (h("div", { key: 'd24cd1ec80459185193928efe89abeeae9b48424', class: "file-viewer-image__spinner" }, h("swirl-spinner", { key: 'b741024e9abc303703aee440fb9070264a06636b' }))))));
     }
     static get is() { return "swirl-file-viewer-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ export class SwirlFileViewerText {
         }
     }
     render() {
-        return (h(Host, { key: 'bf06e8b1fd6b51e7dd70a76e9f98acb9922c3c84', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: '48b1d6aad7095abe890b41065530951a5073148c', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: '1de49ce38f165ededdd76ad957e3040347d7215c', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: '3195889c9ee74991b52103b5cb775f495f998094', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: '7b042bb8cd83686870e3a82ecefad682274a2a5f' })))));
+        return (h(Host, { key: '3b138c1bc786857e32430a2e9b7c8e252a20217d', class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { key: '15c18030a9539df48e34f11f5ab1483a60fd8dee', class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { key: '24154f8044906ab2a1b13b4e0a1d70f5831eaeca', class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { key: '7e98e4b3ec1353f847b67b444e3ccd8443b042b5', class: "file-viewer-text__spinner" }, h("swirl-spinner", { key: 'acf46789b848ac02e48a6058e7b090a5aa8d9183' })))));
     }
     static get is() { return "swirl-file-viewer-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class SwirlFileViewerVideo {
         }
     }
     render() {
-        return (h(Host, { key: '3892a82574b99c9a1951e362ca8a3c49265ebc0a', class: "file-viewer-video" }, h("video", { key: '6002b88ee876bb09509fdcc53cb03f7181fc7db2', autoplay: this.autoplay, class: "file-viewer-video__video", src: this.file, controls: true, ref: (el) => (this.videoEl = el) })));
+        return (h(Host, { key: 'd92620312be59c0da17d0fdb77d657fe2d5da203', class: "file-viewer-video" }, h("video", { key: 'd4ad7be7fe0cd2ebeb7f62e95853afe81bd7ea6c', autoplay: this.autoplay, class: "file-viewer-video__video", src: this.file, controls: true, ref: (el) => (this.videoEl = el) })));
     }
     static get is() { return "swirl-file-viewer-video"; }
     static get encapsulation() { return "shadow"; }