@getflip/swirl-components 0.114.0 → 0.116.0

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

@@ -29508,7 +29508,7 @@ const pdf$1 = /*@__PURE__*/getDefaultExportFromCjs(pdf);
 
 const swirlFileViewerPdfCss = ":host{position:relative;display:inline-flex;width:100%;height:100%}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__pages{display:grid;grid-template-columns:repeat(2, 1fr);grid-row-gap:var(--s-space-8);grid-column-gap:var(--s-space-8);grid-auto-rows:auto}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page{margin:0}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page:nth-child(odd){justify-self:end}:host(.file-viewer-pdf--view-mode-side-by-side) .file-viewer-pdf__page:nth-child(even){justify-self:start}:host *{box-sizing:border-box}.file-viewer-pdf__pages{overflow:auto;width:100%;height:100%}@media (min-width: 768px){.file-viewer-pdf__pages{padding:var(--s-space-16)}}.file-viewer-pdf__page{position:relative;margin-right:auto;margin-left:auto;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:#fff}@media (min-width: 768px){.file-viewer-pdf__page{border:var(--s-border-width-default) solid var(--s-border-default)}.file-viewer-pdf__page:not(:last-of-type){margin-bottom:var(--s-space-8)}}.file-viewer-pdf__page-spinner{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__canvas{display:flex;width:100%;height:100%;margin-right:auto;margin-left:auto}.file-viewer-pdf__text-container{position:absolute;overflow:hidden;line-height:1;text-align:initial;-webkit-user-select:none;-moz-user-select:none;user-select:none;inset:0;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none}.file-viewer-pdf__text-container>*{position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0% 0%}.file-viewer-pdf__text-container>*.markedContent{top:0;height:0}.file-viewer-pdf__text-container>*.highlight{margin:-1px;padding:1px;border-radius:4px;background-color:rgba(180, 0, 170, 1)}.file-viewer-pdf__text-container>*.highlight.appended{position:initial}.file-viewer-pdf__text-container>*.highlight.begin{border-radius:4px 0 0 4px}.file-viewer-pdf__text-container>*.highlight.end{border-radius:0 4px 4px 0}.file-viewer-pdf__text-container>*.highlight.middle{border-radius:0}.file-viewer-pdf__text-container>*.highlight.selected{background-color:rgba(0, 100, 0, 1)}.file-viewer-pdf__text-container>*.endOfContent{position:absolute;z-index:-1;top:100%;right:0;bottom:0;left:0;display:block;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none}.file-viewer-pdf__text-container>*.endOfContent.active{top:0}.file-viewer-pdf__text-container>br::-moz-selection{background:transparent}.file-viewer-pdf__text-container>br::selection{background:transparent}@media (min-width: 768px){.file-viewer-pdf__text-container{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}}.file-viewer-pdf__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-pdf__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.file-viewer-pdf__pagination{position:absolute;bottom:var(--s-space-16);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.file-viewer-pdf__pagination{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
 
-pdf$1.GlobalWorkerOptions.workerSrc = "/pdfjs/pdf.worker.min.js";
+window.pdf = pdf$1;
 const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewerPdf extends HTMLElement$1 {
   constructor() {
     super();
@@ -29544,6 +29544,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
     this.file = undefined;
     this.singlePageMode = undefined;
     this.viewMode = "single";
+    this.workerSrc = "/pdfjs/pdf.worker.min.js";
     this.zoom = 1;
     this.doc = undefined;
     this.error = undefined;
@@ -29554,6 +29555,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
     this.visiblePages = [];
   }
   async componentWillLoad() {
+    window.pdf.GlobalWorkerOptions.workerSrc = this.workerSrc;
     await this.getPages();
   }
   async componentDidLoad() {
@@ -29842,6 +29844,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
     "file": [1],
     "singlePageMode": [4, "single-page-mode"],
     "viewMode": [1, "view-mode"],
+    "workerSrc": [1, "worker-src"],
     "zoom": [8],
     "doc": [32],
     "error": [32],

package/dist/components/swirl-file-viewer2.js

@@ -37,6 +37,7 @@ const SwirlFileViewer = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewer e
     this.description = undefined;
     this.errorMessage = "File could not be loaded.";
     this.file = undefined;
+    this.pdfWorkerSrc = undefined;
     this.thumbnailUrl = undefined;
     this.type = undefined;
     this.typeUnsupportedMessage = "File type is not supported.";
@@ -67,7 +68,7 @@ const SwirlFileViewer = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewer e
         this.type !== "text/plain" &&
         this.type !== "text/csv" &&
         this.type !== "application/pdf");
-    return (h(Host, null, h("div", { class: "file-viewer" }, this.type && this.active && (h("div", { class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-inline-error", { message: this.typeUnsupportedMessage })))))));
+    return (h(Host, null, h("div", { class: "file-viewer" }, this.type && this.active && (h("div", { class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { 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", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-inline-error", { message: this.typeUnsupportedMessage })))))));
   }
   static get style() { return swirlFileViewerCss; }
 }, [1, "swirl-file-viewer", {
@@ -76,6 +77,7 @@ const SwirlFileViewer = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewer e
     "description": [1],
     "errorMessage": [1, "error-message"],
     "file": [1],
+    "pdfWorkerSrc": [1, "pdf-worker-src"],
     "thumbnailUrl": [1, "thumbnail-url"],
     "type": [1],
     "typeUnsupportedMessage": [1, "type-unsupported-message"],

package/dist/components/swirl-pdf-reader.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { A as A11yDialog } from './a11y-dialog.esm.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
 import { c as classnames } from './index2.js';
@@ -37,6 +37,8 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPdfReader e
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.modalClose = createEvent(this, "modalClose", 7);
+    this.modalOpen = createEvent(this, "modalOpen", 7);
     this.desktopZoomSteps = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
     this.mobileZoomSteps = [0.5, 0.75, 1, 1.25, 1.5];
     this.toggleViewMode = () => {
@@ -109,6 +111,7 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPdfReader e
     this.label = undefined;
     this.menuLabel = "File menu";
     this.menuTriggerLabel = "Open file menu";
+    this.pdfWorkerSrc = undefined;
     this.printButtonLabel = "Print PDF";
     this.sideBySideButtonLabel = "Toggle side by side view";
     this.thumbnailButtonLabel = "Scroll to page";
@@ -151,6 +154,7 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPdfReader e
   async open() {
     this.modal.show();
     this.active = true;
+    this.modalOpen.emit();
   }
   /**
    * Close the reader.
@@ -165,6 +169,7 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPdfReader e
       this.modal.hide();
       this.closing = false;
       this.active = false;
+      this.modalClose.emit();
     }, 150);
   }
   lockBodyScroll() {
@@ -197,7 +202,7 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPdfReader e
         "pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
       });
       return (h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index), type: "button" }, h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
-    })), h("swirl-file-viewer", { active: this.active, class: "pdf-reader__viewer", file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom }), h("div", { class: "pdf-reader__mobile-zoom-controls" }, h("button", { "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", null)), h("button", { "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", null))))), h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", null, h("div", { class: "pdf-reader__meta" }, h("div", { class: "pdf-reader__file-icon" }, h("svg", { fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { class: "pdf-reader__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, this.label), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), h("swirl-separator", null), h("swirl-action-list", null, h("swirl-action-list-item", { class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick }), h("swirl-action-list-item", { class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+    })), h("swirl-file-viewer", { active: this.active, class: "pdf-reader__viewer", file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom }), h("div", { class: "pdf-reader__mobile-zoom-controls" }, h("button", { "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", null)), h("button", { "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", null))))), h("swirl-popover", { animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", null, h("div", { class: "pdf-reader__meta" }, h("div", { class: "pdf-reader__file-icon" }, h("svg", { fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { class: "pdf-reader__file-info" }, h("swirl-text", { truncate: true, weight: "semibold" }, this.label), h("swirl-text", { color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), h("swirl-separator", null), h("swirl-action-list", null, h("swirl-action-list-item", { class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick }), h("swirl-action-list-item", { class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
         ? "<swirl-icon-download></swirl-icon-download>"
         : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }), h("slot", { name: "menu-items" })))))));
   }
@@ -212,6 +217,7 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPdfReader e
     "label": [1],
     "menuLabel": [1, "menu-label"],
     "menuTriggerLabel": [1, "menu-trigger-label"],
+    "pdfWorkerSrc": [1, "pdf-worker-src"],
     "printButtonLabel": [1, "print-button-label"],
     "sideBySideButtonLabel": [1, "side-by-side-button-label"],
     "thumbnailButtonLabel": [1, "thumbnail-button-label"],

package/dist/components/swirl-theme-provider.js

@@ -1,247 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-/**
- * A simple guard function:
- *
- * ```js
- * Math.min(Math.max(low, value), high)
- * ```
- */
-function guard(low, high, value) {
-  return Math.min(Math.max(low, value), high);
-}
-
-class ColorError extends Error {
-  constructor(color) {
-    super(`Failed to parse color: "${color}"`);
-  }
-
-}
-
-var ColorError$1 = ColorError;
-
-/**
- * Parses a color into red, gree, blue, alpha parts
- *
- * @param color the input color. Can be a RGB, RBGA, HSL, HSLA, or named color
- */
-
-function parseToRgba(color) {
-  if (typeof color !== 'string') throw new ColorError$1(color);
-  if (color.trim().toLowerCase() === 'transparent') return [0, 0, 0, 0];
-  let normalizedColor = color.trim();
-  normalizedColor = namedColorRegex.test(color) ? nameToHex(color) : color;
-  const reducedHexMatch = reducedHexRegex.exec(normalizedColor);
-
-  if (reducedHexMatch) {
-    const arr = Array.from(reducedHexMatch).slice(1);
-    return [...arr.slice(0, 3).map(x => parseInt(r(x, 2), 16)), parseInt(r(arr[3] || 'f', 2), 16) / 255];
-  }
-
-  const hexMatch = hexRegex.exec(normalizedColor);
-
-  if (hexMatch) {
-    const arr = Array.from(hexMatch).slice(1);
-    return [...arr.slice(0, 3).map(x => parseInt(x, 16)), parseInt(arr[3] || 'ff', 16) / 255];
-  }
-
-  const rgbaMatch = rgbaRegex.exec(normalizedColor);
-
-  if (rgbaMatch) {
-    const arr = Array.from(rgbaMatch).slice(1);
-    return [...arr.slice(0, 3).map(x => parseInt(x, 10)), parseFloat(arr[3] || '1')];
-  }
-
-  const hslaMatch = hslaRegex.exec(normalizedColor);
-
-  if (hslaMatch) {
-    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
-    if (guard(0, 100, s) !== s) throw new ColorError$1(color);
-    if (guard(0, 100, l) !== l) throw new ColorError$1(color);
-    return [...hslToRgb(h, s, l), a || 1];
-  }
-
-  throw new ColorError$1(color);
-}
-
-function hash(str) {
-  let hash = 5381;
-  let i = str.length;
-
-  while (i) {
-    hash = hash * 33 ^ str.charCodeAt(--i);
-  }
-  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
-   * integers. Since we want the results to be always positive, convert the
-   * signed int to an unsigned by doing an unsigned bitshift. */
-
-
-  return (hash >>> 0) % 2341;
-}
-
-const colorToInt = x => parseInt(x.replace(/_/g, ''), 36);
-
-const compressedColorMap = '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'.split(' ').reduce((acc, next) => {
-  const key = colorToInt(next.substring(0, 3));
-  const hex = colorToInt(next.substring(3)).toString(16); // NOTE: padStart could be used here but it breaks Node 6 compat
-  // https://github.com/ricokahler/color2k/issues/351
-
-  let prefix = '';
-
-  for (let i = 0; i < 6 - hex.length; i++) {
-    prefix += '0';
-  }
-
-  acc[key] = `${prefix}${hex}`;
-  return acc;
-}, {});
-/**
- * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
- */
-
-function nameToHex(color) {
-  const normalizedColorName = color.toLowerCase().trim();
-  const result = compressedColorMap[hash(normalizedColorName)];
-  if (!result) throw new ColorError$1(color);
-  return `#${result}`;
-}
-
-const r = (str, amount) => Array.from(Array(amount)).map(() => str).join('');
-
-const reducedHexRegex = new RegExp(`^#${r('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');
-const hexRegex = new RegExp(`^#${r('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');
-const rgbaRegex = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${r(',\\s*(\\d+)\\s*', 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, 'i');
-const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
-const namedColorRegex = /^[a-z]+$/i;
-
-const roundColor = color => {
-  return Math.round(color * 255);
-};
-
-const hslToRgb = (hue, saturation, lightness) => {
-  let l = lightness / 100;
-
-  if (saturation === 0) {
-    // achromatic
-    return [l, l, l].map(roundColor);
-  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
-
-  const huePrime = (hue % 360 + 360) % 360 / 60;
-  const chroma = (1 - Math.abs(2 * l - 1)) * (saturation / 100);
-  const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
-  let red = 0;
-  let green = 0;
-  let blue = 0;
-
-  if (huePrime >= 0 && huePrime < 1) {
-    red = chroma;
-    green = secondComponent;
-  } else if (huePrime >= 1 && huePrime < 2) {
-    red = secondComponent;
-    green = chroma;
-  } else if (huePrime >= 2 && huePrime < 3) {
-    green = chroma;
-    blue = secondComponent;
-  } else if (huePrime >= 3 && huePrime < 4) {
-    green = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 4 && huePrime < 5) {
-    red = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 5 && huePrime < 6) {
-    red = chroma;
-    blue = secondComponent;
-  }
-
-  const lightnessModification = l - chroma / 2;
-  const finalRed = red + lightnessModification;
-  const finalGreen = green + lightnessModification;
-  const finalBlue = blue + lightnessModification;
-  return [finalRed, finalGreen, finalBlue].map(roundColor);
-};
-
-// taken from:
-/**
- * Parses a color in hue, saturation, lightness, and the alpha channel.
- *
- * Hue is a number between 0 and 360, saturation, lightness, and alpha are
- * decimal percentages between 0 and 1
- */
-
-function parseToHsla(color) {
-  const [red, green, blue, alpha] = parseToRgba(color).map((value, index) => // 3rd index is alpha channel which is already normalized
-  index === 3 ? value : value / 255);
-  const max = Math.max(red, green, blue);
-  const min = Math.min(red, green, blue);
-  const lightness = (max + min) / 2; // achromatic
-
-  if (max === min) return [0, 0, lightness, alpha];
-  const delta = max - min;
-  const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
-  const hue = 60 * (red === max ? (green - blue) / delta + (green < blue ? 6 : 0) : green === max ? (blue - red) / delta + 2 : (red - green) / delta + 4);
-  return [hue, saturation, lightness, alpha];
-}
-
-/**
- * Takes in hsla parts and constructs an hsla string
- *
- * @param hue The color circle (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue
- * @param saturation Percentage of saturation, given as a decimal between 0 and 1
- * @param lightness Percentage of lightness, given as a decimal between 0 and 1
- * @param alpha Percentage of opacity, given as a decimal between 0 and 1
- */
-
-function hsla(hue, saturation, lightness, alpha) {
-  return `hsla(${(hue % 360).toFixed()}, ${guard(0, 100, saturation * 100).toFixed()}%, ${guard(0, 100, lightness * 100).toFixed()}%, ${parseFloat(guard(0, 1, alpha).toFixed(3))})`;
-}
-
-/**
- * Takes in rgba parts and returns an rgba string
- *
- * @param red The amount of red in the red channel, given in a number between 0 and 255 inclusive
- * @param green The amount of green in the red channel, given in a number between 0 and 255 inclusive
- * @param blue The amount of blue in the red channel, given in a number between 0 and 255 inclusive
- * @param alpha Percentage of opacity, given as a decimal between 0 and 1
- */
-
-function rgba(red, green, blue, alpha) {
-  return `rgba(${guard(0, 255, red).toFixed()}, ${guard(0, 255, green).toFixed()}, ${guard(0, 255, blue).toFixed()}, ${parseFloat(guard(0, 1, alpha).toFixed(3))})`;
-}
-
-/**
- * Takes in any color and returns it as an rgba string.
- */
-
-function toRgba(color) {
-  return rgba(...parseToRgba(color));
-}
-
 const swirlThemeProviderCss = ".sc-swirl-theme-provider-h{display:block}";
 
 const preferredThemeStorageKey = "swirl-preferred-theme";
-const tenantColorMapping = {
-  "--s-action-primary-default": "primary",
-  "--s-action-primary-hovered": "primaryHovered",
-  "--s-action-primary-pressed": "primaryPressed",
-  "--s-text-on-action-primary": "primaryContrast",
-  "--s-icon-on-action-primary": "primaryContrast",
-  "--s-surface-highlight-default": "secondary",
-  "--s-surface-highlight-hovered": "secondaryHovered",
-  "--s-surface-highlight-pressed": "secondaryPressed",
-  "--s-on-surface-highlight-default": "secondaryHovered",
-  "--s-text-on-surface-highlight": "secondaryContrast",
-  "--s-icon-on-surface-highlight": "secondaryContrast",
-  "--s-text-highlight": "text",
-  "--s-interactive-primary-default": "text",
-  "--s-interactive-primary-hovered": "textHovered",
-  "--s-interactive-primary-pressed": "textPressed",
-};
 const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemeProvider extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.themeChange = createEvent(this, "themeChange", 7);
+    this.setDesignTokens = [];
     this.config = undefined;
   }
   componentWillLoad() {
@@ -255,27 +22,27 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
     this.updateAppTheme();
   }
   /**
-   * Returns the active app theme.
+   * Returns the active OS theme.
    * @returns SwirlTheme
    */
-  async getActiveTheme() {
-    return this.appTheme;
+  async getActiveOSTheme() {
+    return this.appOSTheme;
   }
   /**
-   * Returns the user's preferred theme stored in local storage.
+   * Returns the user's preferred OS theme stored in local storage.
    * @returns SwirlTheme
    */
-  async getPreferredTheme() {
+  async getPreferredOSTheme() {
     if (!Boolean(this.resolvedConfig.storage)) {
       return;
     }
     return this.resolvedConfig.storage.getItem(preferredThemeStorageKey);
   }
   /**
-   * Sets the user's preferred theme and stores it in local storage. Overrides
-   * the OS theme.
+   * Sets the user's preferred OS theme and stores it in local storage. Overrides
+   * the system theme.
    */
-  async setPreferredTheme(theme) {
+  async setPreferredOSTheme(theme) {
     if (!Boolean(this.resolvedConfig.storage)) {
       return;
     }
@@ -283,9 +50,9 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
     this.updateAppTheme();
   }
   /**
-   * Resets the user's preferred theme, using the OS theme instead.
+   * Resets the user's preferred OS theme, using the system theme instead.
    */
-  async resetPreferredTheme() {
+  async resetPreferredOSTheme() {
     if (!Boolean(this.resolvedConfig.storage)) {
       return;
     }
@@ -312,8 +79,8 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
     });
   }
   async updateAppTheme() {
-    this.appTheme = (await this.getPreferredTheme()) || this.osTheme;
-    if (this.appTheme === "dark") {
+    this.appOSTheme = (await this.getPreferredOSTheme()) || this.osTheme;
+    if (this.appOSTheme === "dark") {
       document.documentElement.classList.remove("theme-light");
       document.documentElement.classList.add("theme-dark");
     }
@@ -322,59 +89,49 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
       document.documentElement.classList.add("theme-light");
     }
     this.updateTenantVariables();
+    this.updateTenantAssets();
     const themeChangeEventData = {
-      activeTheme: await this.getActiveTheme(),
-      preferredTheme: await this.getPreferredTheme(),
+      activeTheme: await this.getActiveOSTheme(),
+      preferredTheme: await this.getPreferredOSTheme(),
     };
-    if (!Boolean(this.recentThemeChangeEventData) ||
+    if (!Boolean(this.recentOSThemeChangeEventData) ||
       themeChangeEventData.activeTheme !==
-        this.recentThemeChangeEventData.activeTheme ||
+        this.recentOSThemeChangeEventData.activeTheme ||
       themeChangeEventData.preferredTheme !==
-        this.recentThemeChangeEventData.preferredTheme) {
-      this.recentThemeChangeEventData = themeChangeEventData;
-      this.themeChange.emit(this.recentThemeChangeEventData);
+        this.recentOSThemeChangeEventData.preferredTheme) {
+      this.recentOSThemeChangeEventData = themeChangeEventData;
+      this.themeChange.emit(this.recentOSThemeChangeEventData);
+    }
+  }
+  updateTenantAssets() {
+    const theme = this.resolvedConfig?.themes?.[this.appOSTheme];
+    if (!Boolean(theme)) {
+      return;
     }
+    document.head
+      .querySelector('link[rel="icon"]')
+      ?.setAttribute("href", theme.favicon.link);
   }
   updateTenantVariables() {
-    const tenantTheme = this.resolvedConfig?.tenantColors;
-    if (!Boolean(tenantTheme)) {
+    const theme = this.resolvedConfig?.themes?.[this.appOSTheme];
+    if (!Boolean(theme)) {
       this.resetTenantVariables();
       return;
     }
     const rootElement = this.resolvedConfig.rootElement;
-    // generate state colors (hovered, pressed) from base colors
-    const primaryHsla = parseToHsla(tenantTheme.primary);
-    const secondaryHsla = parseToHsla(tenantTheme.secondary);
-    const textHsla = parseToHsla(tenantTheme.text);
-    const primaryHovered = toRgba(hsla(primaryHsla[0], primaryHsla[1] - 0.21, primaryHsla[2] + 0.09, 1));
-    const primaryPressed = toRgba(hsla(primaryHsla[0], primaryHsla[1] - 0.2, primaryHsla[2] + 0.17, 1));
-    const secondaryHovered = toRgba(hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.07, 1));
-    const secondaryPressed = toRgba(hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.15, 1));
-    const textHovered = toRgba(hsla(textHsla[0], textHsla[1] - 0.34, textHsla[2] + 0.1, 1));
-    const textPressed = toRgba(hsla(textHsla[0], textHsla[1] - 0.48, textHsla[2] + 0.2, 1));
-    const tenantThemeWithGeneratedStateColors = {
-      ...tenantTheme,
-      primaryHovered: primaryHovered,
-      primaryPressed: primaryPressed,
-      secondaryHovered: secondaryHovered,
-      secondaryPressed: secondaryPressed,
-      textHovered: textHovered,
-      textPressed: textPressed,
-    };
-    // set custom properties for tenant theme colors
-    Object.entries(tenantColorMapping).forEach(([key, value]) => rootElement.style.setProperty(key, tenantThemeWithGeneratedStateColors[value]));
+    this.setDesignTokens = [];
+    theme.design_tokens.forEach((token) => {
+      const propertyName = `--s-${token.id}`;
+      rootElement.style.setProperty(propertyName, `rgba(${token.color.r}, ${token.color.g}, ${token.color.b}, ${token.color.a})`);
+      this.setDesignTokens.push(propertyName);
+    });
   }
   resetTenantVariables() {
     const rootElement = this.resolvedConfig.rootElement;
-    [
-      ...Object.keys(tenantColorMapping),
-      "primaryHovered",
-      "primaryPressed",
-      "secondaryHovered",
-      "secondaryPressed",
-      "textHovered",
-      "textPressed",
-    ].forEach((key) => rootElement.style.removeProperty(key));
+    this.setDesignTokens.forEach((property) => {
+      rootElement.style.removeProperty(property);
+    });
+    this.setDesignTokens = [];
   }
   render() {
     return (h(Host, null, h("slot", null)));
@@ -385,10 +142,10 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
   static get style() { return swirlThemeProviderCss; }
 }, [6, "swirl-theme-provider", {
     "config": [16],
-    "getActiveTheme": [64],
-    "getPreferredTheme": [64],
-    "setPreferredTheme": [64],
-    "resetPreferredTheme": [64]
+    "getActiveOSTheme": [64],
+    "getPreferredOSTheme": [64],
+    "setPreferredOSTheme": [64],
+    "resetPreferredOSTheme": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {