@getflip/swirl-components 0.341.0 → 0.341.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -28059,7 +28059,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
28059
28059
  const container = canvas.closest(".file-viewer-pdf__page");
28060
28060
  const textContainer = container?.querySelector(".file-viewer-pdf__text-container");
28061
28061
  this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
28062
- const scale = forPrint ? 2 : this.getScale(page);
28062
+ const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
28063
28063
  const outputScale = window.devicePixelRatio || 1;
28064
28064
  const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
28065
28065
  const viewport = page.getViewport({ scale });
@@ -28197,6 +28197,13 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
28197
28197
  }
28198
28198
  return this.zoom;
28199
28199
  }
28200
+ getPrintScale(page) {
28201
+ // For performance reasons we have to limit the print scale. The resulting
28202
+ // width of a page should not exceed 2480px in width, and 3508px in height.
28203
+ // This relates to the maximum resolution of an A4 page at 300 DPI, which
28204
+ // should be sufficient for a decent print quality.
28205
+ return Math.min(Math.min(2480 / page.view[2], 3508 / page.view[3]), 2);
28206
+ }
28200
28207
  restoreScrollPosition() {
28201
28208
  this.scrollContainer.scrollTop =
28202
28209
  this.recentScrollPosition.y * this.scrollContainer?.scrollHeight;
@@ -28207,7 +28214,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
28207
28214
  const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
28208
28215
  const showSpinner = this.loading;
28209
28216
  const className = classNames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
28210
- return (h(Host, { key: 'f74696a9d32ee25e30bacc10c6f19a45dd0d0e52', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '9210692d6eab65b59c486875fbaafa6a91b20b9d', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '7c6ab3b041cfd288b9e9788cd1dca6ab8c9795b7', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
28217
+ return (h(Host, { key: '2ded55b2086732d53df416af38f42482be6cc13c', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '24d19e9b92a95d83a72538a4a4c8130539e46bfc', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '36905878660cdd696960fc3c18894f86cba07252', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
28211
28218
  const viewport = page.getViewport({
28212
28219
  scale: this.getScale(page),
28213
28220
  });
@@ -28221,7 +28228,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
28221
28228
  width: `${width}px`,
28222
28229
  height: `${height}px`,
28223
28230
  }, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" })));
28224
- })), showPagination && (h("span", { key: 'bc814973f2d41da1d3faa7bf65f89a378addab3d', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '5e4de9560e0382ee84f6d5211c1a8abc42ea52cc', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: '8e803df15a0c593b37f325bf2a4e0f766d8efc23', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'a1564d0c986300243e96700b6c2682e6dbb2f871' })))));
28231
+ })), showPagination && (h("span", { key: '615531f5e13c34c842e68f492c8c0fcae9021815', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '945d4421b1ea9a50b01f05ea4a0ed6a95d470264', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'fe0ae9b54994d4f8533d733df09e2921ccf4fd83', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'b923c9b716042e0b8e71552eeac25238d8037c57' })))));
28225
28232
  }
28226
28233
  get el() { return this; }
28227
28234
  static get watchers() { return {
@@ -229,7 +229,9 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
229
229
  }
230
230
  observeSlotChanges() {
231
231
  this.observer = new MutationObserver(() => {
232
- this.updateItems();
232
+ requestAnimationFrame(() => {
233
+ this.updateItems();
234
+ });
233
235
  });
234
236
  this.observer.observe(this.el, { childList: true });
235
237
  }
@@ -293,7 +295,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
293
295
  "menu--mobile": this.mobile,
294
296
  "menu--root": isTopLevelMenu,
295
297
  });
296
- return (h(Host, { key: '14d513570280eb415edc20e3180babe4e06edb84' }, h("div", { key: '95e6ea0c4ef6c860be438e81e136789e0da1aaac', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: 'd3994bd3b4052114473e565f86de1bc61e49d679', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: 'f247067e415e2b987990cc824b30b50c99df839d', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '358bc15f34a0731c51effb4f5ace0032a73bc262', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '426f977b65536d7a61acfa857eae758e5e97cf3e', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: '06af6cab0c2c130d6c88500bb99d5668fffd40ec', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: 'ff4bcc9e9bb9c243bb5927bd3a8772acc2c3dfd5', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '30f1216bd6ccc0224e832f2be0d248ca9cfdf6ab', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
298
+ return (h(Host, { key: '4e5dfba8d1514afa36270f77bcecffa886078f4b' }, h("div", { key: 'f765e4dae6ebb7596a91cac26d838cd3745d7711', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: '9527ad2795410f27226f3428ec06dee495dc007e', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '05a018f52eb78619d3d3aa126ee030db42cb463b', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '71713bb65af8bc72cc6df084884e5d3eeb69d810', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '730a9e03a6e1d327b6e3a30b03ec1471c6509067', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: '110aec04f9a5c4dd9cadd85b33d5b0a61326d435', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: '9dcc36effd5252cec301a378511fd3fc70630815', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '05df203a130cbd4ec9d03bd2a531862adbf2d9da', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
297
299
  ? {
298
300
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
299
301
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
@@ -304,7 +306,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
304
306
  ? `calc(-100% * ${this.activeLevel})`
305
307
  : "100%",
306
308
  }
307
- : undefined }, h("slot", { key: 'b5fe00c7591b29cb9b35ed3ec9e0e6588afa972d' })))));
309
+ : undefined }, h("slot", { key: '2b3cd9bf21a1e9a129b99ce813cf3e9384cbf1e6' })))));
308
310
  }
309
311
  get el() { return this; }
310
312
  static get watchers() { return {
@@ -28423,7 +28423,7 @@ const SwirlFileViewerPdf = class {
28423
28423
  const container = canvas.closest(".file-viewer-pdf__page");
28424
28424
  const textContainer = container?.querySelector(".file-viewer-pdf__text-container");
28425
28425
  this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
28426
- const scale = forPrint ? 2 : this.getScale(page);
28426
+ const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
28427
28427
  const outputScale = window.devicePixelRatio || 1;
28428
28428
  const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
28429
28429
  const viewport = page.getViewport({ scale });
@@ -28561,6 +28561,13 @@ const SwirlFileViewerPdf = class {
28561
28561
  }
28562
28562
  return this.zoom;
28563
28563
  }
28564
+ getPrintScale(page) {
28565
+ // For performance reasons we have to limit the print scale. The resulting
28566
+ // width of a page should not exceed 2480px in width, and 3508px in height.
28567
+ // This relates to the maximum resolution of an A4 page at 300 DPI, which
28568
+ // should be sufficient for a decent print quality.
28569
+ return Math.min(Math.min(2480 / page.view[2], 3508 / page.view[3]), 2);
28570
+ }
28564
28571
  restoreScrollPosition() {
28565
28572
  this.scrollContainer.scrollTop =
28566
28573
  this.recentScrollPosition.y * this.scrollContainer?.scrollHeight;
@@ -28571,7 +28578,7 @@ const SwirlFileViewerPdf = class {
28571
28578
  const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
28572
28579
  const showSpinner = this.loading;
28573
28580
  const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
28574
- return (h(Host, { key: 'f74696a9d32ee25e30bacc10c6f19a45dd0d0e52', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '9210692d6eab65b59c486875fbaafa6a91b20b9d', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '7c6ab3b041cfd288b9e9788cd1dca6ab8c9795b7', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
28581
+ return (h(Host, { key: '2ded55b2086732d53df416af38f42482be6cc13c', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '24d19e9b92a95d83a72538a4a4c8130539e46bfc', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '36905878660cdd696960fc3c18894f86cba07252', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
28575
28582
  const viewport = page.getViewport({
28576
28583
  scale: this.getScale(page),
28577
28584
  });
@@ -28585,7 +28592,7 @@ const SwirlFileViewerPdf = class {
28585
28592
  width: `${width}px`,
28586
28593
  height: `${height}px`,
28587
28594
  }, tabIndex: 0 }, !rendered && (h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), h("div", { class: "file-viewer-pdf__text-container" })));
28588
- })), showPagination && (h("span", { key: 'bc814973f2d41da1d3faa7bf65f89a378addab3d', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '5e4de9560e0382ee84f6d5211c1a8abc42ea52cc', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: '8e803df15a0c593b37f325bf2a4e0f766d8efc23', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'a1564d0c986300243e96700b6c2682e6dbb2f871' })))));
28595
+ })), showPagination && (h("span", { key: '615531f5e13c34c842e68f492c8c0fcae9021815', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: '945d4421b1ea9a50b01f05ea4a0ed6a95d470264', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'fe0ae9b54994d4f8533d733df09e2921ccf4fd83', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: 'b923c9b716042e0b8e71552eeac25238d8037c57' })))));
28589
28596
  }
28590
28597
  get el() { return getElement(this); }
28591
28598
  static get watchers() { return {
@@ -225,7 +225,9 @@ const SwirlMenu = class {
225
225
  }
226
226
  observeSlotChanges() {
227
227
  this.observer = new MutationObserver(() => {
228
- this.updateItems();
228
+ requestAnimationFrame(() => {
229
+ this.updateItems();
230
+ });
229
231
  });
230
232
  this.observer.observe(this.el, { childList: true });
231
233
  }
@@ -289,7 +291,7 @@ const SwirlMenu = class {
289
291
  "menu--mobile": this.mobile,
290
292
  "menu--root": isTopLevelMenu,
291
293
  });
292
- return (h(Host, { key: '14d513570280eb415edc20e3180babe4e06edb84' }, h("div", { key: '95e6ea0c4ef6c860be438e81e136789e0da1aaac', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: 'd3994bd3b4052114473e565f86de1bc61e49d679', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: 'f247067e415e2b987990cc824b30b50c99df839d', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '358bc15f34a0731c51effb4f5ace0032a73bc262', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '426f977b65536d7a61acfa857eae758e5e97cf3e', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: '06af6cab0c2c130d6c88500bb99d5668fffd40ec', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: 'ff4bcc9e9bb9c243bb5927bd3a8772acc2c3dfd5', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '30f1216bd6ccc0224e832f2be0d248ca9cfdf6ab', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
294
+ return (h(Host, { key: '4e5dfba8d1514afa36270f77bcecffa886078f4b' }, h("div", { key: 'f765e4dae6ebb7596a91cac26d838cd3745d7711', class: className }, this.mobile && isTopLevelMenu && (h("div", { key: '9527ad2795410f27226f3428ec06dee495dc007e', class: "menu__mobile-header" }, this.activeLevel === 0 && (h("swirl-button", { key: '05a018f52eb78619d3d3aa126ee030db42cb463b', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (h("swirl-button", { key: '71713bb65af8bc72cc6df084884e5d3eeb69d810', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), h("span", { key: '730a9e03a6e1d327b6e3a30b03ec1471c6509067', class: "menu__title", id: "menu-title" }, h("swirl-heading", { key: '110aec04f9a5c4dd9cadd85b33d5b0a61326d435', align: "center", as: "span", level: 4, text: this.label, truncate: true })), h("swirl-button", { key: '9dcc36effd5252cec301a378511fd3fc70630815', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), h("div", { key: '05df203a130cbd4ec9d03bd2a531862adbf2d9da', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
293
295
  ? {
294
296
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
295
297
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
@@ -300,7 +302,7 @@ const SwirlMenu = class {
300
302
  ? `calc(-100% * ${this.activeLevel})`
301
303
  : "100%",
302
304
  }
303
- : undefined }, h("slot", { key: 'b5fe00c7591b29cb9b35ed3ec9e0e6588afa972d' })))));
305
+ : undefined }, h("slot", { key: '2b3cd9bf21a1e9a129b99ce813cf3e9384cbf1e6' })))));
304
306
  }
305
307
  get el() { return getElement(this); }
306
308
  static get watchers() { return {