@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.
package/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-06-26T09:47:25",
2
+ "timestamp": "2025-07-01T09:39:34",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.35.0",
@@ -28444,7 +28444,7 @@ const SwirlFileViewerPdf = class {
28444
28444
  const container = canvas.closest(".file-viewer-pdf__page");
28445
28445
  const textContainer = container?.querySelector(".file-viewer-pdf__text-container");
28446
28446
  this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
28447
- const scale = forPrint ? 2 : this.getScale(page);
28447
+ const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
28448
28448
  const outputScale = window.devicePixelRatio || 1;
28449
28449
  const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
28450
28450
  const viewport = page.getViewport({ scale });
@@ -28582,6 +28582,13 @@ const SwirlFileViewerPdf = class {
28582
28582
  }
28583
28583
  return this.zoom;
28584
28584
  }
28585
+ getPrintScale(page) {
28586
+ // For performance reasons we have to limit the print scale. The resulting
28587
+ // width of a page should not exceed 2480px in width, and 3508px in height.
28588
+ // This relates to the maximum resolution of an A4 page at 300 DPI, which
28589
+ // should be sufficient for a decent print quality.
28590
+ return Math.min(Math.min(2480 / page.view[2], 3508 / page.view[3]), 2);
28591
+ }
28585
28592
  restoreScrollPosition() {
28586
28593
  this.scrollContainer.scrollTop =
28587
28594
  this.recentScrollPosition.y * this.scrollContainer?.scrollHeight;
@@ -28592,7 +28599,7 @@ const SwirlFileViewerPdf = class {
28592
28599
  const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
28593
28600
  const showSpinner = this.loading;
28594
28601
  const className = index$1.classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
28595
- return (index.h(index.Host, { key: 'f74696a9d32ee25e30bacc10c6f19a45dd0d0e52', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (index.h("swirl-inline-error", { key: '9210692d6eab65b59c486875fbaafa6a91b20b9d', class: "file-viewer-pdf__error", message: this.errorMessage })), index.h("div", { key: '7c6ab3b041cfd288b9e9788cd1dca6ab8c9795b7', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
28602
+ return (index.h(index.Host, { key: '2ded55b2086732d53df416af38f42482be6cc13c', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (index.h("swirl-inline-error", { key: '24d19e9b92a95d83a72538a4a4c8130539e46bfc', class: "file-viewer-pdf__error", message: this.errorMessage })), index.h("div", { key: '36905878660cdd696960fc3c18894f86cba07252', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
28596
28603
  const viewport = page.getViewport({
28597
28604
  scale: this.getScale(page),
28598
28605
  });
@@ -28606,7 +28613,7 @@ const SwirlFileViewerPdf = class {
28606
28613
  width: `${width}px`,
28607
28614
  height: `${height}px`,
28608
28615
  }, tabIndex: 0 }, !rendered && (index.h("swirl-spinner", { class: "file-viewer-pdf__page-spinner" })), index.h("canvas", { class: "file-viewer-pdf__canvas", style: { opacity: rendered ? "1" : "0" } }), index.h("div", { class: "file-viewer-pdf__text-container" })));
28609
- })), showPagination && (index.h("span", { key: 'bc814973f2d41da1d3faa7bf65f89a378addab3d', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, index.h("span", { key: '5e4de9560e0382ee84f6d5211c1a8abc42ea52cc', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (index.h("div", { key: '8e803df15a0c593b37f325bf2a4e0f766d8efc23', class: "file-viewer-pdf__spinner" }, index.h("swirl-spinner", { key: 'a1564d0c986300243e96700b6c2682e6dbb2f871' })))));
28616
+ })), showPagination && (index.h("span", { key: '615531f5e13c34c842e68f492c8c0fcae9021815', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, index.h("span", { key: '945d4421b1ea9a50b01f05ea4a0ed6a95d470264', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (index.h("div", { key: 'fe0ae9b54994d4f8533d733df09e2921ccf4fd83', class: "file-viewer-pdf__spinner" }, index.h("swirl-spinner", { key: 'b923c9b716042e0b8e71552eeac25238d8037c57' })))));
28610
28617
  }
28611
28618
  get el() { return index.getElement(this); }
28612
28619
  static get watchers() { return {
@@ -227,7 +227,9 @@ const SwirlMenu = class {
227
227
  }
228
228
  observeSlotChanges() {
229
229
  this.observer = new MutationObserver(() => {
230
- this.updateItems();
230
+ requestAnimationFrame(() => {
231
+ this.updateItems();
232
+ });
231
233
  });
232
234
  this.observer.observe(this.el, { childList: true });
233
235
  }
@@ -291,7 +293,7 @@ const SwirlMenu = class {
291
293
  "menu--mobile": this.mobile,
292
294
  "menu--root": isTopLevelMenu,
293
295
  });
294
- return (index.h(index.Host, { key: '14d513570280eb415edc20e3180babe4e06edb84' }, index.h("div", { key: '95e6ea0c4ef6c860be438e81e136789e0da1aaac', class: className }, this.mobile && isTopLevelMenu && (index.h("div", { key: 'd3994bd3b4052114473e565f86de1bc61e49d679', class: "menu__mobile-header" }, this.activeLevel === 0 && (index.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 && (index.h("swirl-button", { key: '358bc15f34a0731c51effb4f5ace0032a73bc262', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), index.h("span", { key: '426f977b65536d7a61acfa857eae758e5e97cf3e', class: "menu__title", id: "menu-title" }, index.h("swirl-heading", { key: '06af6cab0c2c130d6c88500bb99d5668fffd40ec', align: "center", as: "span", level: 4, text: this.label, truncate: true })), index.h("swirl-button", { key: 'ff4bcc9e9bb9c243bb5927bd3a8772acc2c3dfd5', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), index.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
296
+ return (index.h(index.Host, { key: '4e5dfba8d1514afa36270f77bcecffa886078f4b' }, index.h("div", { key: 'f765e4dae6ebb7596a91cac26d838cd3745d7711', class: className }, this.mobile && isTopLevelMenu && (index.h("div", { key: '9527ad2795410f27226f3428ec06dee495dc007e', class: "menu__mobile-header" }, this.activeLevel === 0 && (index.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 && (index.h("swirl-button", { key: '71713bb65af8bc72cc6df084884e5d3eeb69d810', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), index.h("span", { key: '730a9e03a6e1d327b6e3a30b03ec1471c6509067', class: "menu__title", id: "menu-title" }, index.h("swirl-heading", { key: '110aec04f9a5c4dd9cadd85b33d5b0a61326d435', align: "center", as: "span", level: 4, text: this.label, truncate: true })), index.h("swirl-button", { key: '9dcc36effd5252cec301a378511fd3fc70630815', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), index.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
295
297
  ? {
296
298
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
297
299
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
@@ -302,7 +304,7 @@ const SwirlMenu = class {
302
304
  ? `calc(-100% * ${this.activeLevel})`
303
305
  : "100%",
304
306
  }
305
- : undefined }, index.h("slot", { key: 'b5fe00c7591b29cb9b35ed3ec9e0e6588afa972d' })))));
307
+ : undefined }, index.h("slot", { key: '2b3cd9bf21a1e9a129b99ce813cf3e9384cbf1e6' })))));
306
308
  }
307
309
  get el() { return index.getElement(this); }
308
310
  static get watchers() { return {
@@ -170,7 +170,7 @@ export class SwirlFileViewerPdf {
170
170
  const container = canvas.closest(".file-viewer-pdf__page");
171
171
  const textContainer = container?.querySelector(".file-viewer-pdf__text-container");
172
172
  this.renderingPageNumbers = [...this.renderingPageNumbers, page.pageNumber];
173
- const scale = forPrint ? 2 : this.getScale(page);
173
+ const scale = forPrint ? this.getPrintScale(page) : this.getScale(page);
174
174
  const outputScale = window.devicePixelRatio || 1;
175
175
  const transform = outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;
176
176
  const viewport = page.getViewport({ scale });
@@ -308,6 +308,13 @@ export class SwirlFileViewerPdf {
308
308
  }
309
309
  return this.zoom;
310
310
  }
311
+ getPrintScale(page) {
312
+ // For performance reasons we have to limit the print scale. The resulting
313
+ // width of a page should not exceed 2480px in width, and 3508px in height.
314
+ // This relates to the maximum resolution of an A4 page at 300 DPI, which
315
+ // should be sufficient for a decent print quality.
316
+ return Math.min(Math.min(2480 / page.view[2], 3508 / page.view[3]), 2);
317
+ }
311
318
  restoreScrollPosition() {
312
319
  this.scrollContainer.scrollTop =
313
320
  this.recentScrollPosition.y * this.scrollContainer?.scrollHeight;
@@ -318,7 +325,7 @@ export class SwirlFileViewerPdf {
318
325
  const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
319
326
  const showSpinner = this.loading;
320
327
  const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
321
- 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) => {
328
+ 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) => {
322
329
  const viewport = page.getViewport({
323
330
  scale: this.getScale(page),
324
331
  });
@@ -332,7 +339,7 @@ export class SwirlFileViewerPdf {
332
339
  width: `${width}px`,
333
340
  height: `${height}px`,
334
341
  }, 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" })));
335
- })), 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' })))));
342
+ })), 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' })))));
336
343
  }
337
344
  static get is() { return "swirl-file-viewer-pdf"; }
338
345
  static get encapsulation() { return "shadow"; }
@@ -219,7 +219,9 @@ export class SwirlMenu {
219
219
  }
220
220
  observeSlotChanges() {
221
221
  this.observer = new MutationObserver(() => {
222
- this.updateItems();
222
+ requestAnimationFrame(() => {
223
+ this.updateItems();
224
+ });
223
225
  });
224
226
  this.observer.observe(this.el, { childList: true });
225
227
  }
@@ -283,7 +285,7 @@ export class SwirlMenu {
283
285
  "menu--mobile": this.mobile,
284
286
  "menu--root": isTopLevelMenu,
285
287
  });
286
- 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
288
+ 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
287
289
  ? {
288
290
  top: Boolean(this.position) ? `${this.position?.y}px` : "",
289
291
  left: Boolean(this.position) ? `${this.position?.x}px` : "",
@@ -294,7 +296,7 @@ export class SwirlMenu {
294
296
  ? `calc(-100% * ${this.activeLevel})`
295
297
  : "100%",
296
298
  }
297
- : undefined }, h("slot", { key: 'b5fe00c7591b29cb9b35ed3ec9e0e6588afa972d' })))));
299
+ : undefined }, h("slot", { key: '2b3cd9bf21a1e9a129b99ce813cf3e9384cbf1e6' })))));
298
300
  }
299
301
  static get is() { return "swirl-menu"; }
300
302
  static get encapsulation() { return "shadow"; }