@getflip/swirl-components 0.115.0 → 0.117.0

package/dist/collection/collection-manifest.json

@@ -115,6 +115,7 @@
     "./components/swirl-icon/icons/swirl-icon-delete.js",
     "./components/swirl-icon/icons/swirl-icon-description.js",
     "./components/swirl-icon/icons/swirl-icon-discover.js",
+    "./components/swirl-icon/icons/swirl-icon-dock-left.js",
     "./components/swirl-icon/icons/swirl-icon-double-arrow-left.js",
     "./components/swirl-icon/icons/swirl-icon-double-arrow-right.js",
     "./components/swirl-icon/icons/swirl-icon-download.js",

package/dist/collection/components/swirl-app-bar/swirl-app-bar.js

@@ -21,6 +21,7 @@ export class SwirlAppBar {
       this.stepDownButtonClick.emit(event);
     };
     this.backButtonLabel = "Go back";
+    this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>";
     this.closeButtonLabel = "Close";
     this.stepUpButtonLabel = "Previous item";
     this.stepDownButtonLabel = "Next item";
@@ -51,7 +52,7 @@ export class SwirlAppBar {
       "app-bar--has-cta": this.hasCta,
       "app-bar--has-right-controls": hasRightControls,
     });
-    return (h(Host, null, h("div", { class: className }, showLeftControls && (h("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { class: "app-bar__stepper-controls" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { class: "app-bar__cta" }, h("slot", { name: "cta" })), h("div", { class: "app-bar__heading" }, h("slot", { name: "heading" })), h("div", { class: "app-bar__center-controls" }, h("slot", { name: "center-controls" })), h("div", { class: "app-bar__right-controls" }, h("slot", { name: "right-controls" })))));
+    return (h(Host, null, h("div", { class: className }, showLeftControls && (h("div", { class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { class: "app-bar__stepper-controls" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { class: "app-bar__cta" }, h("slot", { name: "cta" })), h("div", { class: "app-bar__heading" }, h("slot", { name: "heading" })), h("div", { class: "app-bar__center-controls" }, h("slot", { name: "center-controls" })), h("div", { class: "app-bar__right-controls" }, h("slot", { name: "right-controls" })))));
   }
   static get is() { return "swirl-app-bar"; }
   static get encapsulation() { return "shadow"; }
@@ -85,6 +86,24 @@ export class SwirlAppBar {
         "reflect": false,
         "defaultValue": "\"Go back\""
       },
+      "closeButtonIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "close-button-icon",
+        "reflect": false,
+        "defaultValue": "\"<swirl-icon-close></swirl-icon-close>\""
+      },
       "closeButtonLabel": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-app-icon/swirl-app-icon.css

@@ -9,10 +9,9 @@
 .app-icon {
   position: relative;
   overflow: hidden;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 0.625rem;
-  background-color: var(--s-surface-default);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--s-border-radius-s);
 }
 
 .app-icon > img {
@@ -20,28 +19,10 @@
     height: 100%;
   }
 
-.app-icon::after {
-  position: absolute;
-  top: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 0.625rem;
-  content: "";
-  box-shadow: 0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset,
-    0 0 var(--s-border-width-default) rgba(0, 0, 0, 0.1) inset;
-}
-
-.app-icon--hide-border::after {
-  box-shadow: none;
-}
-
 .app-icon__icon {
   display: inline-flex;
   width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
-
-  color: var(--s-icon-default);
 }

package/dist/collection/components/swirl-app-icon/swirl-app-icon.js

@@ -10,7 +10,6 @@ export class SwirlAppIcon {
     };
     this.icon = undefined;
     this.src = undefined;
-    this.hideBorder = false;
     this.imageAvailable = undefined;
   }
   render() {
@@ -20,7 +19,6 @@ export class SwirlAppIcon {
     const showFallbackIcon = !showImage && !showIcon;
     const className = classnames("app-icon", {
       "app-icon--has-icon": showIcon || showFallbackIcon,
-      "app-icon--hide-border": this.hideBorder,
     });
     return (h(Host, null, h("span", { class: className }, showImage && (h("img", { alt: "", height: "40", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "40" })), showIcon && (h("span", { class: "app-icon__icon", innerHTML: this.icon })))));
   }
@@ -71,24 +69,6 @@ export class SwirlAppIcon {
         },
         "attribute": "src",
         "reflect": false
-      },
-      "hideBorder": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hide-border",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/swirl-app-layout/swirl-app-layout.css

@@ -80,6 +80,18 @@
   }
     }
 
+@media (min-width: 768px) {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-active .app-layout__grid {
+          animation: app-layout-no-nav-sidebar-slide-in 0.3s;
+        }
+      }
+
+@media (min-width: 768px) {
+        .app-layout--has-sidebar:not(.app-layout--has-navigation).app-layout--sidebar-closing .app-layout__grid {
+          animation: app-layout-no-nav-sidebar-slide-out 0.3s;
+        }
+      }
+
 @media (min-width: 768px) {
       .app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
         grid-template-columns: 1fr min(50%, 25rem);
@@ -96,7 +108,7 @@
       "body";
   }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
       .app-layout--has-navigation.app-layout--has-sidebar.app-layout--sidebar-active .app-layout__grid {
         animation: app-layout-sidebar-slide-in 0.3s;
         grid-template-columns: 25rem 1fr 25rem;
@@ -132,7 +144,7 @@
   }
     }
 
-@media (min-width: 768px) and (max-width: 1439px) {
+@media (min-width: 768px) and (max-width: 1799px) {
     .app-layout--has-navigation.app-layout--has-sidebar .app-layout__sidebar {
       position: absolute;
       top: 0;
@@ -196,7 +208,7 @@
   }
     }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
 
 .app-layout--sidebar-closing .app-layout__sidebar {
       animation: none
@@ -397,7 +409,7 @@
 }
   }
 
-@media (min-width: 1440px) {
+@media (min-width: 1800px) {
 
 .app-layout__sidebar {
     width: 25rem;
@@ -777,3 +789,25 @@
   }
 }
 
+@keyframes app-layout-no-nav-sidebar-slide-in {
+  from {
+    overflow: hidden;
+    grid-template-columns: 1fr 0;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 1fr 25rem;
+  }
+}
+
+@keyframes app-layout-no-nav-sidebar-slide-out {
+  from {
+    overflow: hidden;
+    grid-template-columns: 1fr 25rem;
+  }
+  to {
+    overflow: hidden;
+    grid-template-columns: 1fr 0;
+  }
+}
+

package/dist/collection/components/swirl-badge/swirl-badge.css

@@ -15,13 +15,30 @@
   max-width: 100%;
   justify-content: center;
   align-items: center;
-  border: 0.25rem solid var(--swirl-badge-border-color);
+  border: 0.125rem solid var(--swirl-badge-border-color);
   border-radius: 2rem;
   color: var(--s-text-on-status);
   font-size: var(--s-font-size-sm);
   font-weight: var(--s-font-weight-medium);
 }
 
+.badge--size-xs {
+  min-width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.6875rem;
+}
+
+.badge--size-xs .badge__label {
+    padding-right: 0.125rem;
+    padding-left: 0.125rem;
+  }
+
+.badge--size-xs .badge__icon > swirl-icon,
+    .badge--size-xs .badge__icon > *::part(icon) {
+      width: 0.75rem;
+      height: 0.75rem;
+    }
+
 .badge--size-s {
   min-width: 1.5rem;
   height: 1.5rem;

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

@@ -90,7 +90,7 @@ export class SwirlBadge {
         "mutable": false,
         "complexType": {
           "original": "SwirlBadgeSize",
-          "resolved": "\"m\" | \"s\"",
+          "resolved": "\"m\" | \"s\" | \"xs\"",
           "references": {
             "SwirlBadgeSize": {
               "location": "local",

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

@@ -13,6 +13,7 @@ export class SwirlFileViewer {
     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.";
@@ -43,7 +44,7 @@ export class SwirlFileViewer {
         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 is() { return "swirl-file-viewer"; }
   static get encapsulation() { return "shadow"; }
@@ -146,6 +147,23 @@ export class SwirlFileViewer {
         "attribute": "file",
         "reflect": false
       },
+      "pdfWorkerSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pdf-worker-src",
+        "reflect": false
+      },
       "thumbnailUrl": {
         "type": "string",
         "mutable": false,

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

@@ -2,7 +2,7 @@ import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
 import pdf, { getDocument, renderTextLayer, } from "pdfjs-dist/legacy/build/pdf.js";
 import { debounce, getVisibleHeight, isMobileViewport, } from "../../../../utils";
-pdf.GlobalWorkerOptions.workerSrc = "/pdfjs/pdf.worker.min.js";
+window.pdf = pdf;
 export class SwirlFileViewerPdf {
   constructor() {
     this.pages = [];
@@ -33,6 +33,7 @@ export class SwirlFileViewerPdf {
     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;
@@ -43,6 +44,7 @@ export class SwirlFileViewerPdf {
     this.visiblePages = [];
   }
   async componentWillLoad() {
+    window.pdf.GlobalWorkerOptions.workerSrc = this.workerSrc;
     await this.getPages();
   }
   async componentDidLoad() {
@@ -408,6 +410,24 @@ export class SwirlFileViewerPdf {
         "reflect": false,
         "defaultValue": "\"single\""
       },
+      "workerSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "worker-src",
+        "reflect": false,
+        "defaultValue": "\"/pdfjs/pdf.worker.min.js\""
+      },
       "zoom": {
         "type": "any",
         "mutable": false,

package/dist/collection/components/swirl-icon/icons/swirl-icon-dock-left.js

@@ -0,0 +1,52 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+import { Fragment, h } from "@stencil/core";
+import classnames from "classnames";
+export class SwirlIconDockLeft {
+  constructor() {
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM5.33333 12.6667V3.33333H3.33333V12.6667H5.33333ZM6.66667 12.6667H12.6667V3.33333H6.66667V12.6667Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM8 19V5H5V19H8ZM10 19H19V5H10V19Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M5.83333 24.5C5.19167 24.5 4.64236 24.2715 4.18542 23.8146C3.72847 23.3576 3.5 22.8083 3.5 22.1667V5.83333C3.5 5.19167 3.72847 4.64236 4.18542 4.18542C4.64236 3.72847 5.19167 3.5 5.83333 3.5H22.1667C22.8083 3.5 23.3576 3.72847 23.8146 4.18542C24.2715 4.64236 24.5 5.19167 24.5 5.83333V22.1667C24.5 22.8083 24.2715 23.3576 23.8146 23.8146C23.3576 24.2715 22.8083 24.5 22.1667 24.5H5.83333ZM9.33333 22.1667V5.83333H5.83333V22.1667H9.33333ZM11.6667 22.1667H22.1667V5.83333H11.6667V22.1667Z", fill: "currentColor" })))));
+  }
+  static get is() { return "swirl-icon-dock-left"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../swirl-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "SwirlIconSize",
+          "resolved": "16 | 20 | 24 | 28",
+          "references": {
+            "SwirlIconSize": {
+              "location": "import",
+              "path": "../swirl-icon.types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "24"
+      }
+    };
+  }
+}

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

@@ -77,6 +77,7 @@ export class SwirlPdfReader {
     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";
@@ -119,6 +120,7 @@ export class SwirlPdfReader {
   async open() {
     this.modal.show();
     this.active = true;
+    this.modalOpen.emit();
   }
   /**
    * Close the reader.
@@ -133,6 +135,7 @@ export class SwirlPdfReader {
       this.modal.hide();
       this.closing = false;
       this.active = false;
+      this.modalClose.emit();
     }, 150);
   }
   lockBodyScroll() {
@@ -165,7 +168,7 @@ export class SwirlPdfReader {
         "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" })))))));
   }
@@ -325,6 +328,23 @@ export class SwirlPdfReader {
         "reflect": false,
         "defaultValue": "\"Open file menu\""
       },
+      "pdfWorkerSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pdf-worker-src",
+        "reflect": false
+      },
       "printButtonLabel": {
         "type": "string",
         "mutable": false,
@@ -484,6 +504,39 @@ export class SwirlPdfReader {
       "zoomSteps": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "modalClose",
+        "name": "modalClose",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "modalOpen",
+        "name": "modalOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get methods() {
     return {
       "open": {