@getflip/swirl-components 0.226.0 → 0.226.1

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.
@@ -8,12 +8,6 @@ export class SwirlFileViewerPdf {
8
8
  this.pages = [];
9
9
  this.renderingPageNumbers = [];
10
10
  this.recentScrollPosition = { x: 0, y: 0 };
11
- this.determineScrollStatus = () => {
12
- const scrolledDown = Math.ceil(this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight) >= this.scrollContainer?.scrollHeight;
13
- if (scrolledDown !== this.scrolledDown) {
14
- this.scrolledDown = scrolledDown;
15
- }
16
- };
17
11
  this.storeRecentScrollPosition = () => {
18
12
  this.recentScrollPosition = {
19
13
  x: Math.round((this.scrollContainer?.scrollLeft /
@@ -26,7 +20,6 @@ export class SwirlFileViewerPdf {
26
20
  };
27
21
  this.onScroll = debounce(() => {
28
22
  this.updateVisiblePages();
29
- this.determineScrollStatus();
30
23
  this.storeRecentScrollPosition();
31
24
  }, 60);
32
25
  this.errorMessage = "File could not be loaded.";
@@ -35,11 +28,11 @@ export class SwirlFileViewerPdf {
35
28
  this.viewMode = "single";
36
29
  this.workerSrc = "/pdfjs/pdf.worker.min.js";
37
30
  this.zoom = 1;
31
+ this.currentPage = null;
38
32
  this.doc = undefined;
39
33
  this.error = undefined;
40
34
  this.loading = true;
41
35
  this.renderedPages = [];
42
- this.scrolledDown = false;
43
36
  this.singlePageModePage = 1;
44
37
  this.visiblePages = [];
45
38
  }
@@ -53,7 +46,6 @@ export class SwirlFileViewerPdf {
53
46
  }
54
47
  componentDidRender() {
55
48
  this.updateVisiblePages();
56
- this.determineScrollStatus();
57
49
  }
58
50
  disconnectedCallback() {
59
51
  this.doc?.destroy();
@@ -62,19 +54,16 @@ export class SwirlFileViewerPdf {
62
54
  this.visiblePages = [];
63
55
  this.renderedPages = [];
64
56
  await this.updateVisiblePages();
65
- this.determineScrollStatus();
66
57
  }
67
58
  async watchProps() {
68
59
  await this.getPages();
69
60
  await this.updateVisiblePages();
70
- this.determineScrollStatus();
71
61
  }
72
62
  async watchViewMode() {
73
63
  queueMicrotask(async () => {
74
64
  this.visiblePages = [];
75
65
  this.renderedPages = [];
76
66
  await this.updateVisiblePages();
77
- this.determineScrollStatus();
78
67
  });
79
68
  }
80
69
  watchZoom() {
@@ -83,7 +72,6 @@ export class SwirlFileViewerPdf {
83
72
  this.visiblePages = [];
84
73
  this.renderedPages = [];
85
74
  await this.updateVisiblePages();
86
- this.determineScrollStatus();
87
75
  });
88
76
  }
89
77
  /**
@@ -218,22 +206,34 @@ export class SwirlFileViewerPdf {
218
206
  async updateVisiblePages(forPrint) {
219
207
  const pages = Array.from(this.el.shadowRoot.querySelectorAll(".file-viewer-pdf__page"));
220
208
  let visiblePages = [];
209
+ let currentPage = null;
221
210
  if (this.singlePageMode) {
222
211
  visiblePages = [this.singlePageModePage];
212
+ currentPage = this.singlePageModePage;
213
+ }
214
+ else if (forPrint) {
215
+ visiblePages = pages.map((page) => +page.dataset.pageNumber);
223
216
  }
224
217
  else {
225
- visiblePages = forPrint
226
- ? pages.map((page) => +page.dataset.pageNumber)
227
- : pages
228
- .filter((page) => getVisibleHeight(page, this.scrollContainer) > 0)
229
- .map((page) => +page.dataset.pageNumber);
230
- const visiblePagesDidNotChanged = this.visiblePages.length === visiblePages.length &&
231
- this.visiblePages.every((pageNumber) => visiblePages.includes(pageNumber));
232
- if (visiblePagesDidNotChanged) {
233
- return;
218
+ const visiblePagesVisibleHeight = pages
219
+ .map((page) => ({
220
+ pageNumber: +page.dataset.pageNumber,
221
+ visibleHeight: getVisibleHeight(page, this.scrollContainer),
222
+ }))
223
+ .filter(({ visibleHeight }) => visibleHeight > 0);
224
+ visiblePages = visiblePagesVisibleHeight.map((page) => page.pageNumber);
225
+ if (visiblePagesVisibleHeight.length > 0) {
226
+ const firstMostVisiblePage = visiblePagesVisibleHeight.reduce((previous, current) => current.visibleHeight > previous.visibleHeight ? current : previous);
227
+ currentPage = firstMostVisiblePage.pageNumber;
234
228
  }
235
229
  }
230
+ const visiblePagesDidNotChanged = this.visiblePages.length === visiblePages.length &&
231
+ this.visiblePages.every((pageNumber) => visiblePages.includes(pageNumber));
232
+ if (visiblePagesDidNotChanged && this.currentPage === currentPage) {
233
+ return;
234
+ }
236
235
  this.visiblePages = visiblePages;
236
+ this.currentPage = currentPage;
237
237
  await this.renderVisiblePages(forPrint);
238
238
  this.visiblePagesChange.emit(this.visiblePages);
239
239
  }
@@ -321,12 +321,9 @@ export class SwirlFileViewerPdf {
321
321
  }
322
322
  render() {
323
323
  const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
324
- const currentPage = this.scrolledDown && !this.singlePageMode
325
- ? this.pages.length - 1
326
- : this.visiblePages[0];
327
324
  const showSpinner = this.loading;
328
325
  const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
329
- return (h(Host, { key: 'b28bcfe2c09ea61bb231e3293c9db33b8bc9e84d', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '0bf5545534fbda26a6bb80c758015d8dfab9a4d5', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '772a8f4e55b37fa49a4dbab6c1bc8d1ce420fb64', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
326
+ return (h(Host, { key: '6c69d36ddcef5faaa6242e52eb1b49b935a292ac', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: 'bbaf52c31a7725e35e70dff38bd7b063b5a3ec35', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '312a05632ad42650654ca668222878f3dc575ce0', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
330
327
  const viewport = page.getViewport({
331
328
  scale: this.getScale(page),
332
329
  });
@@ -340,7 +337,7 @@ export class SwirlFileViewerPdf {
340
337
  width: `${width}px`,
341
338
  height: `${height}px`,
342
339
  }, 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" })));
343
- })), showPagination && (h("span", { key: '93057b4402d4bcfee7b690d02b03a7f2f483e294', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: 'f13d0f87c2a7b86f5551ba05e9e008323ab8d662', "aria-current": "page" }, currentPage), " / ", this.doc.numPages)), showSpinner && (h("div", { key: '6b84fbaff23e0a4b0412720c5668d4574cf1c9a5', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: '93af5efd3cbaf907b2ea1e0d08579bd9213933a6' })))));
340
+ })), showPagination && (h("span", { key: '79d735380ae90a399740f6f89384fa3682d4b900', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: 'ccfe47bc43b52858e07614bc44f55b9e7544e56f', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'eb81cc372cd75f94d4b1d9be70a7d7834cb40817', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: '8ffbe86d3a20353ee69a1fe243e12319f0ed8663' })))));
344
341
  }
345
342
  static get is() { return "swirl-file-viewer-pdf"; }
346
343
  static get encapsulation() { return "shadow"; }
@@ -478,11 +475,11 @@ export class SwirlFileViewerPdf {
478
475
  }
479
476
  static get states() {
480
477
  return {
478
+ "currentPage": {},
481
479
  "doc": {},
482
480
  "error": {},
483
481
  "loading": {},
484
482
  "renderedPages": {},
485
- "scrolledDown": {},
486
483
  "singlePageModePage": {},
487
484
  "visiblePages": {}
488
485
  };
@@ -77,14 +77,7 @@ export class SwirlShellLayout {
77
77
  : this.sidebarActive;
78
78
  const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
79
79
  this.navigationCollapsed = restoredNavigationCollapseState;
80
- if (this.enableSecondaryNavGridLayout) {
81
- const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
82
- "true";
83
- this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
84
- const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
85
- this.secondaryNavView =
86
- restoredSecondaryNavigationViewState;
87
- }
80
+ this.restoreSecondaryNavState();
88
81
  }
89
82
  componentDidLoad() {
90
83
  this.focusTrap = focusTrap.createFocusTrap(this.navElement, {
@@ -118,6 +111,9 @@ export class SwirlShellLayout {
118
111
  this.hideMobileNavigation();
119
112
  }
120
113
  }
114
+ watchEnableSecondaryNavGridLayout() {
115
+ this.restoreSecondaryNavState();
116
+ }
121
117
  watchMobileNavigationState() {
122
118
  if (this.mobileNavigationActive) {
123
119
  // wait for animation
@@ -161,6 +157,16 @@ export class SwirlShellLayout {
161
157
  this.enableSecondaryNavGridLayout && this.secondaryNavView === "grid";
162
158
  });
163
159
  }
160
+ restoreSecondaryNavState() {
161
+ if (this.enableSecondaryNavGridLayout) {
162
+ const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
163
+ "true";
164
+ this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
165
+ const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
166
+ this.secondaryNavView =
167
+ restoredSecondaryNavigationViewState;
168
+ }
169
+ }
164
170
  render() {
165
171
  const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
166
172
  const hasSecondaryNav = Boolean(this.el.querySelector("[slot='secondary-nav']"));
@@ -172,22 +178,22 @@ export class SwirlShellLayout {
172
178
  "shell-layout--navigation-collapsed": this.navigationCollapsed,
173
179
  "shell-layout--sidebar-active": this.sidebarActive,
174
180
  });
175
- return (h(Host, { key: 'faf4befd700184ed2292d61d91d86a240430b5e9' }, h("div", { key: '840b77f31a767e94faa261f62cb1cb7157a7ad80', class: className }, h("header", { key: '789d33d64acd556f86442fee96ddf3bf83d6b7d9', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '4f900a38d8dec0abe404d8352822e491083e8fca', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'c6e9afebc218ab340dab07e329dead1642588511', class: "shell-layout__header-left" }, h("button", { key: '3ed103adbc27bbee33ddc01ae6828a14212bc943', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '86799a9ff5086419cb18608c7cff497257725fde', size: 20 }), h("swirl-visually-hidden", { key: '814efe2d8f603c05d433cc33f3b5ef4b56d30e2e' }, this.navigationToggleLabel)), h("a", { key: '9906e57ae5662e8ca9362b4f5ef4ccb1b6f0f7dc', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '8758ecfa159bc482acac19bdbd47aac8a5aa597c', size: 20 }), h("swirl-visually-hidden", { key: '191c3092d913e0184d06984649a0a88f0a80b05c' }, this.browserBackButtonLabel)), h("a", { key: 'f5c8e031240bb1d1f140f0829ba5962ab12e9bf3', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '04fa1a9a1456c27f95d9bf29057bb5470bafaca5', size: 20 }), h("swirl-visually-hidden", { key: '1ab7ad24e8b6e5007ebe06fd4eea74e0780d0402' }, this.browserForwardButtonLabel)), h("slot", { key: '1b692ea38f255d58dd4e3a3515206e249eb88be0', name: "left-header-tools" })), h("div", { key: '26196523cd18bdffc175771a0a2ccd4103fa8957', class: "shell-layout__logo" }, h("slot", { key: 'bf8c8c8e4426adbf9ee362c8687baf4cee9319e8', name: "logo" })), h("div", { key: '7dafa3cabfb4e6f2ab7e73d76feebfea655fefcc', class: "shell-layout__header-right" }, h("slot", { key: 'ab695b69cdbabda6d0932b8140a1861f512229dc', name: "right-header-tools" }), h("button", { key: 'b4b3a3ad9931cbbeae6e4fe7e2b6dab1cbc2fb4a', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '78c6d22ad451903469615d34221deabf101904cd', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '7bec3df799ddcc40681bda83857257a2d4918f71' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '9eed22101813ee845845ba76218cd94e65005605', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
181
+ return (h(Host, { key: '7c121c7bb025c5198deb16d4bd5b6a6b42852dae' }, h("div", { key: 'c1f0d2f83ab22bdb45bd04e75ac983867e1b90ad', class: className }, h("header", { key: '3abffe6c117961ef8208bd7b1ef4252068a9ea56', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'c55d519266b6e17ae8fbd30f2401dc7e6e19f6d9', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '28ae1bec83a8c3681d2dc66e7888566380d2a96b', class: "shell-layout__header-left" }, h("button", { key: '16cb1928a57db48d777d9f6230f4a238bf0bb194', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '538eeaf51ccb40e93bf50fc856ff83bc0746f5d8', size: 20 }), h("swirl-visually-hidden", { key: '55cfda584993bb4b4b1a691dc94f4a3351a12ebe' }, this.navigationToggleLabel)), h("a", { key: 'dd757d408dcf0f890b43ac6a45c58758576b0371', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '5b3cd810397b619b1083574667cdc8dff2f6bffe', size: 20 }), h("swirl-visually-hidden", { key: '468af62c4fef1e20d58776ee735f2279982d17b2' }, this.browserBackButtonLabel)), h("a", { key: '313e0e6e927ac749e6cf9129356006f3b92deacb', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'ca09c2ca62c435a7c65541bbd05bf62823038d27', size: 20 }), h("swirl-visually-hidden", { key: '73861fbfa073afb2c68f488bcf0a8a988f78e293' }, this.browserForwardButtonLabel)), h("slot", { key: 'b3033965357b4e5ebe8043e4a2336a0fa6f2611d', name: "left-header-tools" })), h("div", { key: 'aee860cf12da0bdf167000fc87ebe421f3cfba83', class: "shell-layout__logo" }, h("slot", { key: '34fe15b3a7c7096adc59fc5d57b5208ffbb3bc7f', name: "logo" })), h("div", { key: 'b317c678daac0adbbec8f08fba91d31cdff98342', class: "shell-layout__header-right" }, h("slot", { key: '521ee644e2d915a1c55b37e3a9b12be69848a8bd', name: "right-header-tools" }), h("button", { key: '1f377866aaa05b727509797b2758402940217e73', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '8b006de02ea12b320b505376f64947252f4dcbff', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '9b7da4055462934a511513ed745ce5c29f3cfaa6' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '9603843122ac1ccf20e98174b8a01ecca66ae9e2', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
176
182
  ? this.sidebarToggleBadgeAriaLabel
177
- : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '7e91720e0fd58c9a47b3fb31aa704ae75630d2e7', name: "avatar" }))), h("div", { key: '99c09ec0be98122d5ede2348d997c526042014ad', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'b4512ef4f91ffee2f27115039b6262fd3b05c892', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'c271017b8fad003a256bdec6229486625e371ff0', class: "shell-layout__mobile-header" }, h("slot", { key: '0f78ebb4608d9d60fe41585771e1a34b9ea0ed2e', name: "mobile-logo" }), h("div", { key: '83b642a915973b13aef07d57d5591538e8331e14', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '18f5cf36ed245e6ae823b920d496f18c1c9df48d', name: "mobile-header-tools" }), h("button", { key: '7671fc6b2317795d3db1e8700a047bf23242de6d', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'e764a4c35692150549761c3f055af8ac846530f5', size: 20 }), h("swirl-visually-hidden", { key: 'f2806d4c10f53dfd5620fc460671d39208d2d279' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '90ab7e769197da751fc6680e661ca1c7aa9b3247', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '9d159fdb59a8cbc94a39695375fcf0a7043941c1' }, h("span", { key: 'a6052f47182a523448fade81a3fb23634b844849', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'b23e74da667f58d23077a6b95df583d7298d1df4', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '5d0ebb79f9ab10a29d7d665a2aa0586900db29bd', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '45836f0b4ad82ed2249054eaab4e84a2ce469068', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'dab58d81cd92472397b52a158129aeab4a9dd5af', paddingBlockEnd: "16" }, h("swirl-stack", { key: '024ffd29bc6589c2944bbfa340bb19ad95179924', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'cabdb05aa4d9634b6f453f8b14676f5f9d0017bc', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
183
+ : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'f2575ed4ca35025ed802f963c5bfb01e152ac892', name: "avatar" }))), h("div", { key: 'd5207f5581dd4ac790ad06e8b2b24a1c173b5429', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'f11e77a62223b0a7f48cdd0bb20fd3b165096469', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '76aa9bc409a372ca923232a5d942977137462722', class: "shell-layout__mobile-header" }, h("slot", { key: 'e504eacd565dda63fc355f7834bf5d3753377fc5', name: "mobile-logo" }), h("div", { key: 'a38344e8d212317b43d19831289eb76bbd6a0617', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'f11acf287b1c74b9c1a5821927f27cdac04fe237', name: "mobile-header-tools" }), h("button", { key: 'dd917fc5331bd09927d992bf1d25de4eca4701a0', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '01e75b9cba8473d6d0f2636f7eb2a5b5b142ab16', size: 20 }), h("swirl-visually-hidden", { key: '8f3899995bb0ba72b81f1b3efecc03c78c949834' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '5ed1a8a2f66aa4ff937c5e97ae016584921e1cea', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '6607e8316f0cb96ed73ffe13174e2da05ade8a34' }, h("span", { key: 'bad079202ee965bb522813ea0c2ec1b424564b52', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '6e85c3cd85fbecc075228e9d1ba04496db9f9189', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '93fde6902ef7d68a59726cd07acd6c3c87e61842', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '247f8a5c460dc7f9df7f22905a18cc6331b14f91', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'bf05f293440481a1fa356f290ce58b18850cacc8', paddingBlockEnd: "16" }, h("swirl-stack", { key: 'c1e2b3c0d313844e5a477397f9837f8aae4c1775', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'ef76a699c2b75968d41cf2636943a25261c99dc5', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
178
184
  ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
179
185
  : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
180
186
  ? this.secondaryNavExpandLabel
181
187
  : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
182
- !this.secondaryNavCollapsed && (h("swirl-button", { key: 'c35fe00745af2af71e77553e43583a3d2339397e', icon: this.secondaryNavView === "grid"
188
+ !this.secondaryNavCollapsed && (h("swirl-button", { key: 'b451d0a2bab8eff6675d475ea53dd653113f09b0', icon: this.secondaryNavView === "grid"
183
189
  ? "<swirl-icon-menu></swirl-icon-menu>"
184
190
  : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
185
191
  ? this.gridNavLayoutToggleLabel
186
- : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '6cce23c7b953954e2c93874c2db576ad0c9ca423', class: {
192
+ : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '6c37bcce68c9cdb5d3aa22f4ef608c2fb50ced63', class: {
187
193
  "shell-layout__secondary-nav-items": true,
188
194
  "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
189
195
  this.secondaryNavView === "grid",
190
- } }, h("slot", { key: '8e2eade2ffb6aa6542b638bef617b01714ab8b86', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'e4fb26de2acd2c6088e20371417435f1398e27ba', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'ef68a15a2ef106ed0116bb73096ee8c35c34598f' })), h("aside", { key: 'cd70d48e76042cae27cb1d93f4f3115e05a539e8', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: 'eeb0b742387e2d0a544a826c7b8bdb63880a6aa0', class: "shell-layout__sidebar-body" }, h("div", { key: 'eef30858d99713ab0ced84e1107e3525dbefa1bf', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '1d64ce6621b730880b14362a62d57412baeb1e99', name: "sidebar-app-bar" })), h("div", { key: '67f24ca4210b321e757eb63445c2d0fee84c673d', class: "shell-layout__sidebar-content" }, h("slot", { key: 'cf6c5faf96c6d656312912ae107a1481f84b8502', name: "sidebar" })))))));
196
+ } }, h("slot", { key: '76e3ea3df88f8cceb2538b9a0a33429c66a1babf', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '7db1a491e101b03859c38e0f069e0896693adab4', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'd3218aff7439613c08f9adaf1c04502fec3d6217' })), h("aside", { key: '3db4114feb2fe2bc9f947a1baf0fa79699e6a104', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '8b769e933fbc3310e3e6b42a567c7c983ad98b76', class: "shell-layout__sidebar-body" }, h("div", { key: '4fd39766aeb3d24cae70e67834ab3df17b332684', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'c20a35973024b1b94c406d200124167bca39d872', name: "sidebar-app-bar" })), h("div", { key: '07f459327d8fa115d1cc5b41cb1322db13a314ba', class: "shell-layout__sidebar-content" }, h("slot", { key: '05020d1b8fdbdcb69cc194363dc3f900ca715293', name: "sidebar" })))))));
191
197
  }
192
198
  static get is() { return "swirl-shell-layout"; }
193
199
  static get encapsulation() { return "scoped"; }
@@ -599,6 +605,9 @@ export class SwirlShellLayout {
599
605
  static get elementRef() { return "el"; }
600
606
  static get watchers() {
601
607
  return [{
608
+ "propName": "enableSecondaryNavGridLayout",
609
+ "methodName": "watchEnableSecondaryNavGridLayout"
610
+ }, {
602
611
  "propName": "mobileNavigationActive",
603
612
  "methodName": "watchMobileNavigationState"
604
613
  }, {
@@ -29529,12 +29529,6 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29529
29529
  this.pages = [];
29530
29530
  this.renderingPageNumbers = [];
29531
29531
  this.recentScrollPosition = { x: 0, y: 0 };
29532
- this.determineScrollStatus = () => {
29533
- const scrolledDown = Math.ceil(this.scrollContainer?.scrollTop + this.scrollContainer?.offsetHeight) >= this.scrollContainer?.scrollHeight;
29534
- if (scrolledDown !== this.scrolledDown) {
29535
- this.scrolledDown = scrolledDown;
29536
- }
29537
- };
29538
29532
  this.storeRecentScrollPosition = () => {
29539
29533
  this.recentScrollPosition = {
29540
29534
  x: Math.round((this.scrollContainer?.scrollLeft /
@@ -29547,7 +29541,6 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29547
29541
  };
29548
29542
  this.onScroll = debounce(() => {
29549
29543
  this.updateVisiblePages();
29550
- this.determineScrollStatus();
29551
29544
  this.storeRecentScrollPosition();
29552
29545
  }, 60);
29553
29546
  this.errorMessage = "File could not be loaded.";
@@ -29556,11 +29549,11 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29556
29549
  this.viewMode = "single";
29557
29550
  this.workerSrc = "/pdfjs/pdf.worker.min.js";
29558
29551
  this.zoom = 1;
29552
+ this.currentPage = null;
29559
29553
  this.doc = undefined;
29560
29554
  this.error = undefined;
29561
29555
  this.loading = true;
29562
29556
  this.renderedPages = [];
29563
- this.scrolledDown = false;
29564
29557
  this.singlePageModePage = 1;
29565
29558
  this.visiblePages = [];
29566
29559
  }
@@ -29574,7 +29567,6 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29574
29567
  }
29575
29568
  componentDidRender() {
29576
29569
  this.updateVisiblePages();
29577
- this.determineScrollStatus();
29578
29570
  }
29579
29571
  disconnectedCallback() {
29580
29572
  this.doc?.destroy();
@@ -29583,19 +29575,16 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29583
29575
  this.visiblePages = [];
29584
29576
  this.renderedPages = [];
29585
29577
  await this.updateVisiblePages();
29586
- this.determineScrollStatus();
29587
29578
  }
29588
29579
  async watchProps() {
29589
29580
  await this.getPages();
29590
29581
  await this.updateVisiblePages();
29591
- this.determineScrollStatus();
29592
29582
  }
29593
29583
  async watchViewMode() {
29594
29584
  queueMicrotask(async () => {
29595
29585
  this.visiblePages = [];
29596
29586
  this.renderedPages = [];
29597
29587
  await this.updateVisiblePages();
29598
- this.determineScrollStatus();
29599
29588
  });
29600
29589
  }
29601
29590
  watchZoom() {
@@ -29604,7 +29593,6 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29604
29593
  this.visiblePages = [];
29605
29594
  this.renderedPages = [];
29606
29595
  await this.updateVisiblePages();
29607
- this.determineScrollStatus();
29608
29596
  });
29609
29597
  }
29610
29598
  /**
@@ -29739,22 +29727,34 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29739
29727
  async updateVisiblePages(forPrint) {
29740
29728
  const pages = Array.from(this.el.shadowRoot.querySelectorAll(".file-viewer-pdf__page"));
29741
29729
  let visiblePages = [];
29730
+ let currentPage = null;
29742
29731
  if (this.singlePageMode) {
29743
29732
  visiblePages = [this.singlePageModePage];
29733
+ currentPage = this.singlePageModePage;
29734
+ }
29735
+ else if (forPrint) {
29736
+ visiblePages = pages.map((page) => +page.dataset.pageNumber);
29744
29737
  }
29745
29738
  else {
29746
- visiblePages = forPrint
29747
- ? pages.map((page) => +page.dataset.pageNumber)
29748
- : pages
29749
- .filter((page) => getVisibleHeight(page, this.scrollContainer) > 0)
29750
- .map((page) => +page.dataset.pageNumber);
29751
- const visiblePagesDidNotChanged = this.visiblePages.length === visiblePages.length &&
29752
- this.visiblePages.every((pageNumber) => visiblePages.includes(pageNumber));
29753
- if (visiblePagesDidNotChanged) {
29754
- return;
29739
+ const visiblePagesVisibleHeight = pages
29740
+ .map((page) => ({
29741
+ pageNumber: +page.dataset.pageNumber,
29742
+ visibleHeight: getVisibleHeight(page, this.scrollContainer),
29743
+ }))
29744
+ .filter(({ visibleHeight }) => visibleHeight > 0);
29745
+ visiblePages = visiblePagesVisibleHeight.map((page) => page.pageNumber);
29746
+ if (visiblePagesVisibleHeight.length > 0) {
29747
+ const firstMostVisiblePage = visiblePagesVisibleHeight.reduce((previous, current) => current.visibleHeight > previous.visibleHeight ? current : previous);
29748
+ currentPage = firstMostVisiblePage.pageNumber;
29755
29749
  }
29756
29750
  }
29751
+ const visiblePagesDidNotChanged = this.visiblePages.length === visiblePages.length &&
29752
+ this.visiblePages.every((pageNumber) => visiblePages.includes(pageNumber));
29753
+ if (visiblePagesDidNotChanged && this.currentPage === currentPage) {
29754
+ return;
29755
+ }
29757
29756
  this.visiblePages = visiblePages;
29757
+ this.currentPage = currentPage;
29758
29758
  await this.renderVisiblePages(forPrint);
29759
29759
  this.visiblePagesChange.emit(this.visiblePages);
29760
29760
  }
@@ -29842,12 +29842,9 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29842
29842
  }
29843
29843
  render() {
29844
29844
  const showPagination = !this.error && !this.loading && this.visiblePages.length > 0;
29845
- const currentPage = this.scrolledDown && !this.singlePageMode
29846
- ? this.pages.length - 1
29847
- : this.visiblePages[0];
29848
29845
  const showSpinner = this.loading;
29849
29846
  const className = classnames("file-viewer-pdf", `file-viewer-pdf--view-mode-${this.viewMode}`);
29850
- return (h(Host, { key: 'b28bcfe2c09ea61bb231e3293c9db33b8bc9e84d', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: '0bf5545534fbda26a6bb80c758015d8dfab9a4d5', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '772a8f4e55b37fa49a4dbab6c1bc8d1ce420fb64', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
29847
+ return (h(Host, { key: '6c69d36ddcef5faaa6242e52eb1b49b935a292ac', class: className, exportparts: "file-viewer-pdf__pagination" }, this.error && (h("swirl-inline-error", { key: 'bbaf52c31a7725e35e70dff38bd7b063b5a3ec35', class: "file-viewer-pdf__error", message: this.errorMessage })), h("div", { key: '312a05632ad42650654ca668222878f3dc575ce0', "aria-describedby": "pagination", class: "file-viewer-pdf__pages", onScroll: this.onScroll, ref: (el) => (this.scrollContainer = el) }, this.pages.map((page) => {
29851
29848
  const viewport = page.getViewport({
29852
29849
  scale: this.getScale(page),
29853
29850
  });
@@ -29861,7 +29858,7 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29861
29858
  width: `${width}px`,
29862
29859
  height: `${height}px`,
29863
29860
  }, 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" })));
29864
- })), showPagination && (h("span", { key: '93057b4402d4bcfee7b690d02b03a7f2f483e294', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: 'f13d0f87c2a7b86f5551ba05e9e008323ab8d662', "aria-current": "page" }, currentPage), " / ", this.doc.numPages)), showSpinner && (h("div", { key: '6b84fbaff23e0a4b0412720c5668d4574cf1c9a5', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: '93af5efd3cbaf907b2ea1e0d08579bd9213933a6' })))));
29861
+ })), showPagination && (h("span", { key: '79d735380ae90a399740f6f89384fa3682d4b900', class: "file-viewer-pdf__pagination", id: "pagination", part: "file-viewer-pdf__pagination" }, h("span", { key: 'ccfe47bc43b52858e07614bc44f55b9e7544e56f', "aria-current": "page" }, this.currentPage), " /", " ", this.doc.numPages)), showSpinner && (h("div", { key: 'eb81cc372cd75f94d4b1d9be70a7d7834cb40817', class: "file-viewer-pdf__spinner" }, h("swirl-spinner", { key: '8ffbe86d3a20353ee69a1fe243e12319f0ed8663' })))));
29865
29862
  }
29866
29863
  get el() { return this; }
29867
29864
  static get watchers() { return {
@@ -29877,11 +29874,11 @@ const SwirlFileViewerPdf = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewe
29877
29874
  "viewMode": [1, "view-mode"],
29878
29875
  "workerSrc": [1, "worker-src"],
29879
29876
  "zoom": [8],
29877
+ "currentPage": [32],
29880
29878
  "doc": [32],
29881
29879
  "error": [32],
29882
29880
  "loading": [32],
29883
29881
  "renderedPages": [32],
29884
- "scrolledDown": [32],
29885
29882
  "singlePageModePage": [32],
29886
29883
  "visiblePages": [32],
29887
29884
  "getThumbnails": [64],
@@ -84,14 +84,7 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
84
84
  : this.sidebarActive;
85
85
  const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
86
86
  this.navigationCollapsed = restoredNavigationCollapseState;
87
- if (this.enableSecondaryNavGridLayout) {
88
- const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
89
- "true";
90
- this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
91
- const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
92
- this.secondaryNavView =
93
- restoredSecondaryNavigationViewState;
94
- }
87
+ this.restoreSecondaryNavState();
95
88
  }
96
89
  componentDidLoad() {
97
90
  this.focusTrap = createFocusTrap(this.navElement, {
@@ -125,6 +118,9 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
125
118
  this.hideMobileNavigation();
126
119
  }
127
120
  }
121
+ watchEnableSecondaryNavGridLayout() {
122
+ this.restoreSecondaryNavState();
123
+ }
128
124
  watchMobileNavigationState() {
129
125
  if (this.mobileNavigationActive) {
130
126
  // wait for animation
@@ -168,6 +164,16 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
168
164
  this.enableSecondaryNavGridLayout && this.secondaryNavView === "grid";
169
165
  });
170
166
  }
167
+ restoreSecondaryNavState() {
168
+ if (this.enableSecondaryNavGridLayout) {
169
+ const restoredSecondaryNavigationCollapseState = localStorage.getItem(SECONDARY_NAVIGATION_COLLAPSE_STORAGE_KEY) ===
170
+ "true";
171
+ this.secondaryNavCollapsed = restoredSecondaryNavigationCollapseState;
172
+ const restoredSecondaryNavigationViewState = localStorage.getItem(SECONDARY_NAVIGATION_VIEW_STORAGE_KEY);
173
+ this.secondaryNavView =
174
+ restoredSecondaryNavigationViewState;
175
+ }
176
+ }
171
177
  render() {
172
178
  const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
173
179
  const hasSecondaryNav = Boolean(this.el.querySelector("[slot='secondary-nav']"));
@@ -179,25 +185,26 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
179
185
  "shell-layout--navigation-collapsed": this.navigationCollapsed,
180
186
  "shell-layout--sidebar-active": this.sidebarActive,
181
187
  });
182
- return (h(Host, { key: 'faf4befd700184ed2292d61d91d86a240430b5e9' }, h("div", { key: '840b77f31a767e94faa261f62cb1cb7157a7ad80', class: className }, h("header", { key: '789d33d64acd556f86442fee96ddf3bf83d6b7d9', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: '4f900a38d8dec0abe404d8352822e491083e8fca', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: 'c6e9afebc218ab340dab07e329dead1642588511', class: "shell-layout__header-left" }, h("button", { key: '3ed103adbc27bbee33ddc01ae6828a14212bc943', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '86799a9ff5086419cb18608c7cff497257725fde', size: 20 }), h("swirl-visually-hidden", { key: '814efe2d8f603c05d433cc33f3b5ef4b56d30e2e' }, this.navigationToggleLabel)), h("a", { key: '9906e57ae5662e8ca9362b4f5ef4ccb1b6f0f7dc', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '8758ecfa159bc482acac19bdbd47aac8a5aa597c', size: 20 }), h("swirl-visually-hidden", { key: '191c3092d913e0184d06984649a0a88f0a80b05c' }, this.browserBackButtonLabel)), h("a", { key: 'f5c8e031240bb1d1f140f0829ba5962ab12e9bf3', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '04fa1a9a1456c27f95d9bf29057bb5470bafaca5', size: 20 }), h("swirl-visually-hidden", { key: '1ab7ad24e8b6e5007ebe06fd4eea74e0780d0402' }, this.browserForwardButtonLabel)), h("slot", { key: '1b692ea38f255d58dd4e3a3515206e249eb88be0', name: "left-header-tools" })), h("div", { key: '26196523cd18bdffc175771a0a2ccd4103fa8957', class: "shell-layout__logo" }, h("slot", { key: 'bf8c8c8e4426adbf9ee362c8687baf4cee9319e8', name: "logo" })), h("div", { key: '7dafa3cabfb4e6f2ab7e73d76feebfea655fefcc', class: "shell-layout__header-right" }, h("slot", { key: 'ab695b69cdbabda6d0932b8140a1861f512229dc', name: "right-header-tools" }), h("button", { key: 'b4b3a3ad9931cbbeae6e4fe7e2b6dab1cbc2fb4a', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '78c6d22ad451903469615d34221deabf101904cd', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '7bec3df799ddcc40681bda83857257a2d4918f71' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '9eed22101813ee845845ba76218cd94e65005605', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
188
+ return (h(Host, { key: '7c121c7bb025c5198deb16d4bd5b6a6b42852dae' }, h("div", { key: 'c1f0d2f83ab22bdb45bd04e75ac983867e1b90ad', class: className }, h("header", { key: '3abffe6c117961ef8208bd7b1ef4252068a9ea56', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'c55d519266b6e17ae8fbd30f2401dc7e6e19f6d9', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '28ae1bec83a8c3681d2dc66e7888566380d2a96b', class: "shell-layout__header-left" }, h("button", { key: '16cb1928a57db48d777d9f6230f4a238bf0bb194', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-dock-left", { key: '538eeaf51ccb40e93bf50fc856ff83bc0746f5d8', size: 20 }), h("swirl-visually-hidden", { key: '55cfda584993bb4b4b1a691dc94f4a3351a12ebe' }, this.navigationToggleLabel)), h("a", { key: 'dd757d408dcf0f890b43ac6a45c58758576b0371', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '5b3cd810397b619b1083574667cdc8dff2f6bffe', size: 20 }), h("swirl-visually-hidden", { key: '468af62c4fef1e20d58776ee735f2279982d17b2' }, this.browserBackButtonLabel)), h("a", { key: '313e0e6e927ac749e6cf9129356006f3b92deacb', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'ca09c2ca62c435a7c65541bbd05bf62823038d27', size: 20 }), h("swirl-visually-hidden", { key: '73861fbfa073afb2c68f488bcf0a8a988f78e293' }, this.browserForwardButtonLabel)), h("slot", { key: 'b3033965357b4e5ebe8043e4a2336a0fa6f2611d', name: "left-header-tools" })), h("div", { key: 'aee860cf12da0bdf167000fc87ebe421f3cfba83', class: "shell-layout__logo" }, h("slot", { key: '34fe15b3a7c7096adc59fc5d57b5208ffbb3bc7f', name: "logo" })), h("div", { key: 'b317c678daac0adbbec8f08fba91d31cdff98342', class: "shell-layout__header-right" }, h("slot", { key: '521ee644e2d915a1c55b37e3a9b12be69848a8bd', name: "right-header-tools" }), h("button", { key: '1f377866aaa05b727509797b2758402940217e73', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '8b006de02ea12b320b505376f64947252f4dcbff', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '9b7da4055462934a511513ed745ce5c29f3cfaa6' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '9603843122ac1ccf20e98174b8a01ecca66ae9e2', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
183
189
  ? this.sidebarToggleBadgeAriaLabel
184
- : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '7e91720e0fd58c9a47b3fb31aa704ae75630d2e7', name: "avatar" }))), h("div", { key: '99c09ec0be98122d5ede2348d997c526042014ad', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'b4512ef4f91ffee2f27115039b6262fd3b05c892', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'c271017b8fad003a256bdec6229486625e371ff0', class: "shell-layout__mobile-header" }, h("slot", { key: '0f78ebb4608d9d60fe41585771e1a34b9ea0ed2e', name: "mobile-logo" }), h("div", { key: '83b642a915973b13aef07d57d5591538e8331e14', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '18f5cf36ed245e6ae823b920d496f18c1c9df48d', name: "mobile-header-tools" }), h("button", { key: '7671fc6b2317795d3db1e8700a047bf23242de6d', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'e764a4c35692150549761c3f055af8ac846530f5', size: 20 }), h("swirl-visually-hidden", { key: 'f2806d4c10f53dfd5620fc460671d39208d2d279' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '90ab7e769197da751fc6680e661ca1c7aa9b3247', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '9d159fdb59a8cbc94a39695375fcf0a7043941c1' }, h("span", { key: 'a6052f47182a523448fade81a3fb23634b844849', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'b23e74da667f58d23077a6b95df583d7298d1df4', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '5d0ebb79f9ab10a29d7d665a2aa0586900db29bd', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '45836f0b4ad82ed2249054eaab4e84a2ce469068', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'dab58d81cd92472397b52a158129aeab4a9dd5af', paddingBlockEnd: "16" }, h("swirl-stack", { key: '024ffd29bc6589c2944bbfa340bb19ad95179924', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'cabdb05aa4d9634b6f453f8b14676f5f9d0017bc', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
190
+ : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'f2575ed4ca35025ed802f963c5bfb01e152ac892', name: "avatar" }))), h("div", { key: 'd5207f5581dd4ac790ad06e8b2b24a1c173b5429', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'f11e77a62223b0a7f48cdd0bb20fd3b165096469', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '76aa9bc409a372ca923232a5d942977137462722', class: "shell-layout__mobile-header" }, h("slot", { key: 'e504eacd565dda63fc355f7834bf5d3753377fc5', name: "mobile-logo" }), h("div", { key: 'a38344e8d212317b43d19831289eb76bbd6a0617', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'f11acf287b1c74b9c1a5821927f27cdac04fe237', name: "mobile-header-tools" }), h("button", { key: 'dd917fc5331bd09927d992bf1d25de4eca4701a0', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: '01e75b9cba8473d6d0f2636f7eb2a5b5b142ab16', size: 20 }), h("swirl-visually-hidden", { key: '8f3899995bb0ba72b81f1b3efecc03c78c949834' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '5ed1a8a2f66aa4ff937c5e97ae016584921e1cea', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: '6607e8316f0cb96ed73ffe13174e2da05ade8a34' }, h("span", { key: 'bad079202ee965bb522813ea0c2ec1b424564b52', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '6e85c3cd85fbecc075228e9d1ba04496db9f9189', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '93fde6902ef7d68a59726cd07acd6c3c87e61842', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '247f8a5c460dc7f9df7f22905a18cc6331b14f91', borderColor: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'bf05f293440481a1fa356f290ce58b18850cacc8', paddingBlockEnd: "16" }, h("swirl-stack", { key: 'c1e2b3c0d313844e5a477397f9837f8aae4c1775', justify: this.navigationCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: 'ef76a699c2b75968d41cf2636943a25261c99dc5', hideLabel: this.navigationCollapsed, icon: this.secondaryNavCollapsed
185
191
  ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
186
192
  : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
187
193
  ? this.secondaryNavExpandLabel
188
194
  : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !this.navigationCollapsed &&
189
- !this.secondaryNavCollapsed && (h("swirl-button", { key: 'c35fe00745af2af71e77553e43583a3d2339397e', icon: this.secondaryNavView === "grid"
195
+ !this.secondaryNavCollapsed && (h("swirl-button", { key: 'b451d0a2bab8eff6675d475ea53dd653113f09b0', icon: this.secondaryNavView === "grid"
190
196
  ? "<swirl-icon-menu></swirl-icon-menu>"
191
197
  : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
192
198
  ? this.gridNavLayoutToggleLabel
193
- : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '6cce23c7b953954e2c93874c2db576ad0c9ca423', class: {
199
+ : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '6c37bcce68c9cdb5d3aa22f4ef608c2fb50ced63', class: {
194
200
  "shell-layout__secondary-nav-items": true,
195
201
  "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
196
202
  this.secondaryNavView === "grid",
197
- } }, h("slot", { key: '8e2eade2ffb6aa6542b638bef617b01714ab8b86', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'e4fb26de2acd2c6088e20371417435f1398e27ba', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'ef68a15a2ef106ed0116bb73096ee8c35c34598f' })), h("aside", { key: 'cd70d48e76042cae27cb1d93f4f3115e05a539e8', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: 'eeb0b742387e2d0a544a826c7b8bdb63880a6aa0', class: "shell-layout__sidebar-body" }, h("div", { key: 'eef30858d99713ab0ced84e1107e3525dbefa1bf', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '1d64ce6621b730880b14362a62d57412baeb1e99', name: "sidebar-app-bar" })), h("div", { key: '67f24ca4210b321e757eb63445c2d0fee84c673d', class: "shell-layout__sidebar-content" }, h("slot", { key: 'cf6c5faf96c6d656312912ae107a1481f84b8502', name: "sidebar" })))))));
203
+ } }, h("slot", { key: '76e3ea3df88f8cceb2538b9a0a33429c66a1babf', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '7db1a491e101b03859c38e0f069e0896693adab4', class: "shell-layout__main", id: "main-content" }, h("slot", { key: 'd3218aff7439613c08f9adaf1c04502fec3d6217' })), h("aside", { key: '3db4114feb2fe2bc9f947a1baf0fa79699e6a104', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '8b769e933fbc3310e3e6b42a567c7c983ad98b76', class: "shell-layout__sidebar-body" }, h("div", { key: '4fd39766aeb3d24cae70e67834ab3df17b332684', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'c20a35973024b1b94c406d200124167bca39d872', name: "sidebar-app-bar" })), h("div", { key: '07f459327d8fa115d1cc5b41cb1322db13a314ba', class: "shell-layout__sidebar-content" }, h("slot", { key: '05020d1b8fdbdcb69cc194363dc3f900ca715293', name: "sidebar" })))))));
198
204
  }
199
205
  get el() { return this; }
200
206
  static get watchers() { return {
207
+ "enableSecondaryNavGridLayout": ["watchEnableSecondaryNavGridLayout"],
201
208
  "mobileNavigationActive": ["watchMobileNavigationState"],
202
209
  "navigationCollapsed": ["watchNavigationCollapsed"],
203
210
  "sidebarActive": ["watchSidebarActive"]
@@ -228,6 +235,7 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
228
235
  "showMobileNavigation": [64],
229
236
  "hideMobileNavigation": [64]
230
237
  }, [[8, "keydown", "onWindowKeyDown"]], {
238
+ "enableSecondaryNavGridLayout": ["watchEnableSecondaryNavGridLayout"],
231
239
  "mobileNavigationActive": ["watchMobileNavigationState"],
232
240
  "navigationCollapsed": ["watchNavigationCollapsed"],
233
241
  "sidebarActive": ["watchSidebarActive"]