@getflip/swirl-components 0.327.0 → 0.329.0

package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js

@@ -99,12 +99,12 @@ const SwirlTreeNavigationItem = class {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (index.h(index.Host, { key: '9528de2c261e7f9bf205b9f724ecc7ee23b8d6a2', role: "none" }, index.h("li", { key: '38c4c8c13e7d7fb5414649a2774b111a86146633', class: {
+        return (index.h(index.Host, { key: 'fa176dc7ce64b7c208ba5fb4085f4994de681ea2', role: "none" }, index.h("li", { key: 'c55f11c0743b699f3c2cc9d49cb522ca76cfe967', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, index.h(Tag, { key: '6e601b97c222b20e00fed7d077bfe5640bcbbc7f', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, index.h("span", { key: '646b3ad57ce0276f4858d2daa4da58d46ddbc8b7', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: '58beb132547ffde0bfceca99264eb5c209b3494f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '34a90475f85a14063d1987c65989a323f334048f', class: "tree-navigation-item__label" }, index.h("span", { key: '556b309b491e619616eea811c67323695001dbf7', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: '9539eaa87bb687923300450b87f8466dee61bd10', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: '855b13254bec53f3106cdb1dd53f91338aa01171', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '993c25e3d9edb9b8efc7f6c0d65afaa45a76550d', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '59463b3dba65b100bd85025138fab2a1c1ba61f9', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (index.h("ul", { key: 'c91387debdb5277826bf274da2f098f64068ccab', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
+            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, index.h(Tag, { key: 'fef37d7819f573f3c37a98121c975f93576a2a8f', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, index.h("span", { key: 'dbd7dc720c1bc855bdbd4082efe4a1e7ca0d8429', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: '7949682f070cc38c9b61ae3cc1bf702224dbd5d6', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '4958c35e3b4f042b6bbf273f63676ec0bdd5a9c7', class: "tree-navigation-item__label" }, index.h("span", { key: '3ef37a17826e98bd767e09ca4c2d588fcc185b10', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: '5ef5e84f989d9282f447407dbe8c70a1002d5a84', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: 'd066448b9da7ae8a7ee7ed975c8f2fee3358b816', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '8d02cb836b808589fcd5259150058fd7f39e7c43', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '4fab2f5102f71223e79a763312f408ac6b8ef8d8', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (index.h("ul", { key: '2e60f831cd223863ae748f46d933ed60af9df887', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, index.h("slot", { key: 'e8a702427604f2dbbbca1eb3f8ae96e7f9d34ca5' }))))));
+            } }, index.h("slot", { key: 'f5019e5a3dd8304c6d0036908b8067172104bf38' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-tree-navigation.cjs.entry.js

@@ -13,7 +13,7 @@ const SwirlTreeNavigation = class {
         this.label = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '3c56780c72f1cfa9d654ad47c32caaf73bd024c2' }, index.h("ul", { key: 'e39f7b348edf33b3d91191a592c90e0f36583fdb', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: '6eb20328869c5e861e33c1c81704f77e231fcbe6' }))));
+        return (index.h(index.Host, { key: 'eb8c6f04d46d5c117ef13236b18e0a1761df0b3d' }, index.h("ul", { key: '1f73e96d9df8afe11f8b9d21a7b54736549a797c', "aria-label": this.label, class: "tree-navigation", role: "tree" }, index.h("slot", { key: '935da44bfca94e55a42514faf01368527ff32cc7' }))));
     }
 };
 SwirlTreeNavigation.style = SwirlTreeNavigationStyle0;

package/dist/cjs/swirl-video-thumbnail.cjs.entry.js

@@ -16,7 +16,7 @@ const SwirlVideoThumbnail = class {
         this.src = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: 'eb6e0dea90d98c1ec3808bdcf6c235d7243d9c75' }, index.h("button", { key: 'db135bac26406b0459df05d0af93e4c0a8b08362', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: 'b62df64aae35a0103af3e6bfe2c16c9d3463bdcd', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '013609d4eebd8f962dc3fea78497941fd0617d3e', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '40bd98d1f7fd422838d9ebe050ccdfd3cf062367' }, this.durationLabel), this.duration)), index.h("svg", { key: '2b2949a67223d7bad33811a5705b5f68267acbd0', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '31d3aeb082f9e5e2006a86992f1102fbae9f0bb8', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (index.h(index.Host, { key: '99dd1e1ae0d710356ced0407af4cf79532aea691' }, index.h("button", { key: '3bd122d05fd66ab86126117c5cf51251118b4981', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '7903f17823ba7d34664308c7a0642df1dc010306', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: 'b94ebc5ccb1441eb22e2ab1cba3a255f681c47f0', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: '2204ec67949fc4a66d407a3fa0584d7805661226' }, this.durationLabel), this.duration)), index.h("svg", { key: 'efd88753ed2d108b510a02838ff4d9ded34c5f9e', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'bdf75e2c1e4df70998c1bff5a2f14d2ce0eef30f', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
 };
 SwirlVideoThumbnail.style = SwirlVideoThumbnailStyle0;

package/dist/cjs/swirl-visually-hidden.cjs.entry.js

@@ -12,7 +12,7 @@ const SwirlVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '5664572e973dfb517f701e4fa0e3d352f7aeee47' }, index.h("slot", { key: 'ab0b1cefa5396c0b71b664b038bb0d3ca5f00151' })));
+        return (index.h(index.Host, { key: '4bb7348e44f93ebfeee13365bd7a10ddcfc65477' }, index.h("slot", { key: '51deef99bfa615b7c28e4345349c21d54ba855bc' })));
     }
 };
 SwirlVisuallyHidden.style = SwirlVisuallyHiddenStyle0;

package/dist/cjs/{utils-1a1dd8d3.js → utils-b7a6f714.js}

@@ -157,6 +157,26 @@ function getISODateString(date) {
 function getCircularArrayIndex(index, arrayLength) {
     return ((index % arrayLength) + arrayLength) % arrayLength;
 }
+function isImageMimeType(mimeType) {
+    return mimeType.startsWith("image/");
+}
+function isVideoMimeType(mimeType) {
+    return mimeType.startsWith("video/");
+}
+function isAudioMimeType(mimeType) {
+    return mimeType.startsWith("audio/");
+}
+function isPdfMimeType(mimeType) {
+    return mimeType.startsWith("application/pdf");
+}
+function isCompressedArchiveMimeType(mimeType) {
+    return (mimeType.startsWith("application/zip") ||
+        mimeType.startsWith("application/x-zip") ||
+        mimeType.startsWith("application/vnd.rar") ||
+        mimeType.startsWith("application/x-7z") ||
+        mimeType.startsWith("application/x-tar") ||
+        mimeType.startsWith("application/x-gzip"));
+}
 
 exports.closestPassShadow = closestPassShadow;
 exports.debounce = debounce;
@@ -165,9 +185,14 @@ exports.getCircularArrayIndex = getCircularArrayIndex;
 exports.getDesktopMediaQuery = getDesktopMediaQuery;
 exports.getISODateString = getISODateString;
 exports.getVisibleHeight = getVisibleHeight;
+exports.isAudioMimeType = isAudioMimeType;
+exports.isCompressedArchiveMimeType = isCompressedArchiveMimeType;
 exports.isDescendantOf = isDescendantOf;
 exports.isDesktopViewport = isDesktopViewport;
+exports.isImageMimeType = isImageMimeType;
 exports.isMobileViewport = isMobileViewport;
+exports.isPdfMimeType = isPdfMimeType;
+exports.isVideoMimeType = isVideoMimeType;
 exports.parentsPassShadow = parentsPassShadow;
 exports.prefersReducedMotion = prefersReducedMotion;
 exports.querySelectorAllDeep = querySelectorAllDeep;

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",
@@ -107,6 +108,7 @@
     "components/swirl-icon/icons/swirl-icon-arrow-upward.js",
     "components/swirl-icon/icons/swirl-icon-aspect-ratio.js",
     "components/swirl-icon/icons/swirl-icon-attachment.js",
+    "components/swirl-icon/icons/swirl-icon-audio-file.js",
     "components/swirl-icon/icons/swirl-icon-bar-chart.js",
     "components/swirl-icon/icons/swirl-icon-beach-access-filled.js",
     "components/swirl-icon/icons/swirl-icon-beach-access.js",
@@ -234,6 +236,7 @@
     "components/swirl-icon/icons/swirl-icon-person.js",
     "components/swirl-icon/icons/swirl-icon-phone.js",
     "components/swirl-icon/icons/swirl-icon-photo-camera.js",
+    "components/swirl-icon/icons/swirl-icon-picture-as-pdf.js",
     "components/swirl-icon/icons/swirl-icon-picture-in-picture.js",
     "components/swirl-icon/icons/swirl-icon-pin-off.js",
     "components/swirl-icon/icons/swirl-icon-pin.js",
@@ -242,6 +245,7 @@
     "components/swirl-icon/icons/swirl-icon-poll.js",
     "components/swirl-icon/icons/swirl-icon-post-approval.js",
     "components/swirl-icon/icons/swirl-icon-present.js",
+    "components/swirl-icon/icons/swirl-icon-preview.js",
     "components/swirl-icon/icons/swirl-icon-print.js",
     "components/swirl-icon/icons/swirl-icon-public-off.js",
     "components/swirl-icon/icons/swirl-icon-public.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: 'a6a020eb5f5d5dfd9cf06efae49bba914e1ead89', variant: "flat", icon: "<swirl-icon-preview></swirl-icon-preview>", onClick: this.handlePreviewClick, label: this.downloadButtonLabel, hideLabel: true })), this.showDownloadButton && (h("swirl-button", { key: '37b8d650039761724aa5b7bbf30f76525240d274', variant: "flat", icon: "<swirl-icon-download></swirl-icon-download>", onClick: this.handleDownloadClick, label: this.previewButtonLabel, hideLabel: true }))))));
+    }
+    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": {}
+                }
+            }];
+    }
+}