@kirbydesign/designsystem 12.0.0-dev-67d5287 → 12.0.0-dev-286cdc0

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.
Files changed (96) hide show
  1. package/fesm2022/kirbydesign-designsystem-accordion.mjs +12 -12
  2. package/fesm2022/kirbydesign-designsystem-accordion.mjs.map +1 -1
  3. package/fesm2022/kirbydesign-designsystem-action-group.mjs +3 -3
  4. package/fesm2022/kirbydesign-designsystem-avatar.mjs +5 -5
  5. package/fesm2022/kirbydesign-designsystem-avatar.mjs.map +1 -1
  6. package/fesm2022/kirbydesign-designsystem-badge.mjs +5 -5
  7. package/fesm2022/kirbydesign-designsystem-badge.mjs.map +1 -1
  8. package/fesm2022/kirbydesign-designsystem-button.mjs +5 -5
  9. package/fesm2022/kirbydesign-designsystem-button.mjs.map +1 -1
  10. package/fesm2022/kirbydesign-designsystem-calendar.mjs +7 -7
  11. package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
  12. package/fesm2022/kirbydesign-designsystem-card.mjs +24 -24
  13. package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
  14. package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
  15. package/fesm2022/kirbydesign-designsystem-checkbox.mjs +14 -6
  16. package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
  17. package/fesm2022/kirbydesign-designsystem-data-table.mjs +7 -7
  18. package/fesm2022/kirbydesign-designsystem-divider.mjs +5 -5
  19. package/fesm2022/kirbydesign-designsystem-divider.mjs.map +1 -1
  20. package/fesm2022/kirbydesign-designsystem-dropdown.mjs +10 -10
  21. package/fesm2022/kirbydesign-designsystem-empty-state.mjs +19 -8
  22. package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map +1 -1
  23. package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +3 -3
  24. package/fesm2022/kirbydesign-designsystem-flag.mjs +5 -5
  25. package/fesm2022/kirbydesign-designsystem-flag.mjs.map +1 -1
  26. package/fesm2022/kirbydesign-designsystem-form-field.mjs +32 -32
  27. package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
  28. package/fesm2022/kirbydesign-designsystem-gesture.mjs +3 -3
  29. package/fesm2022/kirbydesign-designsystem-header.mjs +19 -19
  30. package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
  31. package/fesm2022/kirbydesign-designsystem-icon.mjs +10 -10
  32. package/fesm2022/kirbydesign-designsystem-item-group.mjs +3 -3
  33. package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +3 -3
  34. package/fesm2022/kirbydesign-designsystem-item.mjs +12 -12
  35. package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
  36. package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +7 -7
  37. package/fesm2022/kirbydesign-designsystem-list.mjs +49 -46
  38. package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
  39. package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +8 -8
  40. package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs.map +1 -1
  41. package/fesm2022/kirbydesign-designsystem-menu.mjs +5 -5
  42. package/fesm2022/kirbydesign-designsystem-menu.mjs.map +1 -1
  43. package/fesm2022/kirbydesign-designsystem-modal.mjs +59 -50
  44. package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
  45. package/fesm2022/kirbydesign-designsystem-page.mjs +69 -48
  46. package/fesm2022/kirbydesign-designsystem-page.mjs.map +1 -1
  47. package/fesm2022/kirbydesign-designsystem-popover.mjs +3 -3
  48. package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +6 -6
  49. package/fesm2022/kirbydesign-designsystem-radio.mjs +12 -12
  50. package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
  51. package/fesm2022/kirbydesign-designsystem-range.mjs +5 -5
  52. package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
  53. package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +5 -5
  54. package/fesm2022/kirbydesign-designsystem-reorder-list.mjs.map +1 -1
  55. package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +7 -7
  56. package/fesm2022/kirbydesign-designsystem-section-header.mjs +3 -3
  57. package/fesm2022/kirbydesign-designsystem-segmented-control.mjs +5 -5
  58. package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map +1 -1
  59. package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +16 -7
  60. package/fesm2022/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
  61. package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
  62. package/fesm2022/kirbydesign-designsystem-shared.mjs +21 -21
  63. package/fesm2022/kirbydesign-designsystem-slide-button.mjs +3 -3
  64. package/fesm2022/kirbydesign-designsystem-slide.mjs +13 -13
  65. package/fesm2022/kirbydesign-designsystem-spinner.mjs +7 -7
  66. package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +12 -12
  67. package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map +1 -1
  68. package/fesm2022/kirbydesign-designsystem-tabs.mjs +15 -15
  69. package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
  70. package/fesm2022/kirbydesign-designsystem-testing-base.mjs +305 -303
  71. package/fesm2022/kirbydesign-designsystem-testing-base.mjs.map +1 -1
  72. package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
  73. package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
  74. package/fesm2022/kirbydesign-designsystem-testing.mjs +4 -4
  75. package/fesm2022/kirbydesign-designsystem-toast.mjs +6 -6
  76. package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
  77. package/fesm2022/kirbydesign-designsystem-toggle.mjs +5 -5
  78. package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
  79. package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
  80. package/fesm2022/kirbydesign-designsystem.mjs +10 -10
  81. package/package.json +2 -2
  82. package/types/kirbydesign-designsystem-card.d.ts +2 -2
  83. package/types/kirbydesign-designsystem-card.d.ts.map +1 -1
  84. package/types/kirbydesign-designsystem-checkbox.d.ts +7 -1
  85. package/types/kirbydesign-designsystem-checkbox.d.ts.map +1 -1
  86. package/types/kirbydesign-designsystem-empty-state.d.ts +11 -0
  87. package/types/kirbydesign-designsystem-empty-state.d.ts.map +1 -1
  88. package/types/kirbydesign-designsystem-list.d.ts +5 -0
  89. package/types/kirbydesign-designsystem-list.d.ts.map +1 -1
  90. package/types/kirbydesign-designsystem-modal.d.ts +2 -1
  91. package/types/kirbydesign-designsystem-modal.d.ts.map +1 -1
  92. package/types/kirbydesign-designsystem-page.d.ts +4 -0
  93. package/types/kirbydesign-designsystem-page.d.ts.map +1 -1
  94. package/types/kirbydesign-designsystem-shared-floating.d.ts.map +1 -1
  95. package/types/kirbydesign-designsystem-testing-base.d.ts +5 -0
  96. package/types/kirbydesign-designsystem-testing-base.d.ts.map +1 -1
package/fesm2022/kirbydesign-designsystem-page.mjs CHANGED
@@ -8,7 +8,7 @@ import { componentOnReady } from "@ionic/core";
8
8
  import * as i4 from "@kirbydesign/designsystem/tabs";
9
9
  import { selectedTabClickEvent } from "@kirbydesign/designsystem/tabs";
10
10
  import { Subject, fromEvent } from "rxjs";
11
- import { debounceTime, filter, map, takeUntil } from "rxjs/operators";
11
+ import { debounceTime, filter, map, startWith, takeUntil } from "rxjs/operators";
12
12
  import { ACTIONGROUP_CONFIG } from "@kirbydesign/designsystem/action-group";
13
13
  import { HeaderComponent, HeaderModule } from "@kirbydesign/designsystem/header";
14
14
  import * as i6 from "@kirbydesign/designsystem/helpers";
@@ -28,7 +28,7 @@ var PageTitleDirective = class PageTitleDirective {
28
28
  static {
29
29
  this.ɵfac = i0.ɵɵngDeclareFactory({
30
30
  minVersion: "12.0.0",
31
- version: "22.2.2",
31
+ version: "22.2.3",
32
32
  ngImport: i0,
33
33
  type: PageTitleDirective,
34
34
  deps: [],
@@ -38,7 +38,7 @@ var PageTitleDirective = class PageTitleDirective {
38
38
  static {
39
39
  this.ɵdir = i0.ɵɵngDeclareDirective({
40
40
  minVersion: "14.0.0",
41
- version: "22.2.2",
41
+ version: "22.2.3",
42
42
  type: PageTitleDirective,
43
43
  isStandalone: true,
44
44
  selector: "[kirbyPageTitle]",
@@ -48,7 +48,7 @@ var PageTitleDirective = class PageTitleDirective {
48
48
  };
49
49
  i0.ɵɵngDeclareClassMetadata({
50
50
  minVersion: "12.0.0",
51
- version: "22.2.2",
51
+ version: "22.2.3",
52
52
  ngImport: i0,
53
53
  type: PageTitleDirective,
54
54
  decorators: [{
@@ -60,7 +60,7 @@ var PageSubtitleDirective = class PageSubtitleDirective {
60
60
  static {
61
61
  this.ɵfac = i0.ɵɵngDeclareFactory({
62
62
  minVersion: "12.0.0",
63
- version: "22.2.2",
63
+ version: "22.2.3",
64
64
  ngImport: i0,
65
65
  type: PageSubtitleDirective,
66
66
  deps: [],
@@ -70,7 +70,7 @@ var PageSubtitleDirective = class PageSubtitleDirective {
70
70
  static {
71
71
  this.ɵdir = i0.ɵɵngDeclareDirective({
72
72
  minVersion: "14.0.0",
73
- version: "22.2.2",
73
+ version: "22.2.3",
74
74
  type: PageSubtitleDirective,
75
75
  isStandalone: true,
76
76
  selector: "[kirbyPageSubtitle]",
@@ -80,7 +80,7 @@ var PageSubtitleDirective = class PageSubtitleDirective {
80
80
  };
81
81
  i0.ɵɵngDeclareClassMetadata({
82
82
  minVersion: "12.0.0",
83
- version: "22.2.2",
83
+ version: "22.2.3",
84
84
  ngImport: i0,
85
85
  type: PageSubtitleDirective,
86
86
  decorators: [{
@@ -92,7 +92,7 @@ var PageToolbarTitleDirective = class PageToolbarTitleDirective {
92
92
  static {
93
93
  this.ɵfac = i0.ɵɵngDeclareFactory({
94
94
  minVersion: "12.0.0",
95
- version: "22.2.2",
95
+ version: "22.2.3",
96
96
  ngImport: i0,
97
97
  type: PageToolbarTitleDirective,
98
98
  deps: [],
@@ -102,7 +102,7 @@ var PageToolbarTitleDirective = class PageToolbarTitleDirective {
102
102
  static {
103
103
  this.ɵdir = i0.ɵɵngDeclareDirective({
104
104
  minVersion: "14.0.0",
105
- version: "22.2.2",
105
+ version: "22.2.3",
106
106
  type: PageToolbarTitleDirective,
107
107
  isStandalone: true,
108
108
  selector: "[kirbyPageToolbarTitle]",
@@ -112,7 +112,7 @@ var PageToolbarTitleDirective = class PageToolbarTitleDirective {
112
112
  };
113
113
  i0.ɵɵngDeclareClassMetadata({
114
114
  minVersion: "12.0.0",
115
- version: "22.2.2",
115
+ version: "22.2.3",
116
116
  ngImport: i0,
117
117
  type: PageToolbarTitleDirective,
118
118
  decorators: [{
@@ -136,7 +136,7 @@ var PageActionsDirective = class PageActionsDirective {
136
136
  static {
137
137
  this.ɵfac = i0.ɵɵngDeclareFactory({
138
138
  minVersion: "12.0.0",
139
- version: "22.2.2",
139
+ version: "22.2.3",
140
140
  ngImport: i0,
141
141
  type: PageActionsDirective,
142
142
  deps: [{ token: i0.TemplateRef }],
@@ -146,7 +146,7 @@ var PageActionsDirective = class PageActionsDirective {
146
146
  static {
147
147
  this.ɵdir = i0.ɵɵngDeclareDirective({
148
148
  minVersion: "14.0.0",
149
- version: "22.2.2",
149
+ version: "22.2.3",
150
150
  type: PageActionsDirective,
151
151
  isStandalone: true,
152
152
  selector: "[kirbyPageActions]",
@@ -157,7 +157,7 @@ var PageActionsDirective = class PageActionsDirective {
157
157
  };
158
158
  i0.ɵɵngDeclareClassMetadata({
159
159
  minVersion: "12.0.0",
160
- version: "22.2.2",
160
+ version: "22.2.3",
161
161
  ngImport: i0,
162
162
  type: PageActionsDirective,
163
163
  decorators: [{
@@ -180,7 +180,7 @@ var PageContentDirective = class PageContentDirective {
180
180
  static {
181
181
  this.ɵfac = i0.ɵɵngDeclareFactory({
182
182
  minVersion: "12.0.0",
183
- version: "22.2.2",
183
+ version: "22.2.3",
184
184
  ngImport: i0,
185
185
  type: PageContentDirective,
186
186
  deps: [{ token: i0.TemplateRef }],
@@ -190,7 +190,7 @@ var PageContentDirective = class PageContentDirective {
190
190
  static {
191
191
  this.ɵdir = i0.ɵɵngDeclareDirective({
192
192
  minVersion: "14.0.0",
193
- version: "22.2.2",
193
+ version: "22.2.3",
194
194
  type: PageContentDirective,
195
195
  isStandalone: true,
196
196
  selector: "[kirbyPageContent]",
@@ -201,7 +201,7 @@ var PageContentDirective = class PageContentDirective {
201
201
  };
202
202
  i0.ɵɵngDeclareClassMetadata({
203
203
  minVersion: "12.0.0",
204
- version: "22.2.2",
204
+ version: "22.2.3",
205
205
  ngImport: i0,
206
206
  type: PageContentDirective,
207
207
  decorators: [{
@@ -218,7 +218,7 @@ var PageStickyContentDirective = class PageStickyContentDirective {
218
218
  static {
219
219
  this.ɵfac = i0.ɵɵngDeclareFactory({
220
220
  minVersion: "12.0.0",
221
- version: "22.2.2",
221
+ version: "22.2.3",
222
222
  ngImport: i0,
223
223
  type: PageStickyContentDirective,
224
224
  deps: [],
@@ -228,7 +228,7 @@ var PageStickyContentDirective = class PageStickyContentDirective {
228
228
  static {
229
229
  this.ɵdir = i0.ɵɵngDeclareDirective({
230
230
  minVersion: "14.0.0",
231
- version: "22.2.2",
231
+ version: "22.2.3",
232
232
  type: PageStickyContentDirective,
233
233
  isStandalone: true,
234
234
  selector: "[kirbyPageStickyContent]",
@@ -238,7 +238,7 @@ var PageStickyContentDirective = class PageStickyContentDirective {
238
238
  };
239
239
  i0.ɵɵngDeclareClassMetadata({
240
240
  minVersion: "12.0.0",
241
- version: "22.2.2",
241
+ version: "22.2.3",
242
242
  ngImport: i0,
243
243
  type: PageStickyContentDirective,
244
244
  decorators: [{
@@ -254,7 +254,7 @@ var PageProgressComponent = class PageProgressComponent extends ModalElementComp
254
254
  static {
255
255
  this.ɵfac = i0.ɵɵngDeclareFactory({
256
256
  minVersion: "12.0.0",
257
- version: "22.2.2",
257
+ version: "22.2.3",
258
258
  ngImport: i0,
259
259
  type: PageProgressComponent,
260
260
  deps: [{
@@ -267,7 +267,7 @@ var PageProgressComponent = class PageProgressComponent extends ModalElementComp
267
267
  static {
268
268
  this.ɵcmp = i0.ɵɵngDeclareComponent({
269
269
  minVersion: "14.0.0",
270
- version: "22.2.2",
270
+ version: "22.2.3",
271
271
  type: PageProgressComponent,
272
272
  isStandalone: true,
273
273
  selector: "kirby-page-progress",
@@ -285,7 +285,7 @@ var PageProgressComponent = class PageProgressComponent extends ModalElementComp
285
285
  };
286
286
  i0.ɵɵngDeclareClassMetadata({
287
287
  minVersion: "12.0.0",
288
- version: "22.2.2",
288
+ version: "22.2.3",
289
289
  ngImport: i0,
290
290
  type: PageProgressComponent,
291
291
  decorators: [{
@@ -315,7 +315,7 @@ var PageTitleComponent = class PageTitleComponent extends ModalElementComponent
315
315
  static {
316
316
  this.ɵfac = i0.ɵɵngDeclareFactory({
317
317
  minVersion: "12.0.0",
318
- version: "22.2.2",
318
+ version: "22.2.3",
319
319
  ngImport: i0,
320
320
  type: PageTitleComponent,
321
321
  deps: [{ token: i0.ElementRef }, {
@@ -328,7 +328,7 @@ var PageTitleComponent = class PageTitleComponent extends ModalElementComponent
328
328
  static {
329
329
  this.ɵcmp = i0.ɵɵngDeclareComponent({
330
330
  minVersion: "14.0.0",
331
- version: "22.2.2",
331
+ version: "22.2.3",
332
332
  type: PageTitleComponent,
333
333
  isStandalone: true,
334
334
  selector: "kirby-page-title",
@@ -344,7 +344,7 @@ var PageTitleComponent = class PageTitleComponent extends ModalElementComponent
344
344
  };
345
345
  i0.ɵɵngDeclareClassMetadata({
346
346
  minVersion: "12.0.0",
347
- version: "22.2.2",
347
+ version: "22.2.3",
348
348
  ngImport: i0,
349
349
  type: PageTitleComponent,
350
350
  decorators: [{
@@ -366,7 +366,7 @@ var PageContentComponent = class PageContentComponent {
366
366
  static {
367
367
  this.ɵfac = i0.ɵɵngDeclareFactory({
368
368
  minVersion: "12.0.0",
369
- version: "22.2.2",
369
+ version: "22.2.3",
370
370
  ngImport: i0,
371
371
  type: PageContentComponent,
372
372
  deps: [],
@@ -376,7 +376,7 @@ var PageContentComponent = class PageContentComponent {
376
376
  static {
377
377
  this.ɵcmp = i0.ɵɵngDeclareComponent({
378
378
  minVersion: "14.0.0",
379
- version: "22.2.2",
379
+ version: "22.2.3",
380
380
  type: PageContentComponent,
381
381
  isStandalone: true,
382
382
  selector: "kirby-page-content",
@@ -391,7 +391,7 @@ var PageContentComponent = class PageContentComponent {
391
391
  };
392
392
  i0.ɵɵngDeclareClassMetadata({
393
393
  minVersion: "12.0.0",
394
- version: "22.2.2",
394
+ version: "22.2.3",
395
395
  ngImport: i0,
396
396
  type: PageContentComponent,
397
397
  decorators: [{
@@ -409,7 +409,7 @@ var PageActionsComponent = class PageActionsComponent {
409
409
  static {
410
410
  this.ɵfac = i0.ɵɵngDeclareFactory({
411
411
  minVersion: "12.0.0",
412
- version: "22.2.2",
412
+ version: "22.2.3",
413
413
  ngImport: i0,
414
414
  type: PageActionsComponent,
415
415
  deps: [],
@@ -419,7 +419,7 @@ var PageActionsComponent = class PageActionsComponent {
419
419
  static {
420
420
  this.ɵcmp = i0.ɵɵngDeclareComponent({
421
421
  minVersion: "14.0.0",
422
- version: "22.2.2",
422
+ version: "22.2.3",
423
423
  type: PageActionsComponent,
424
424
  isStandalone: true,
425
425
  selector: "kirby-page-actions",
@@ -435,7 +435,7 @@ var PageActionsComponent = class PageActionsComponent {
435
435
  };
436
436
  i0.ɵɵngDeclareClassMetadata({
437
437
  minVersion: "12.0.0",
438
- version: "22.2.2",
438
+ version: "22.2.3",
439
439
  ngImport: i0,
440
440
  type: PageActionsComponent,
441
441
  decorators: [{
@@ -494,6 +494,7 @@ var PageComponent = class PageComponent {
494
494
  this.isObservingTitle = false;
495
495
  this.isObservingActions = false;
496
496
  this.isDocTitleSet = false;
497
+ this.observedToolbarButtons = /* @__PURE__ */ new Set();
497
498
  this.ngOnDestroy$ = new Subject();
498
499
  this.navigationStart$ = this.router.events.pipe(filter((event) => event instanceof NavigationStart), takeUntil(this.ngOnDestroy$));
499
500
  this.navigationEnd$ = this.router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.ngOnDestroy$));
@@ -552,7 +553,7 @@ var PageComponent = class PageComponent {
552
553
  });
553
554
  this.interceptBackButtonClicksSetup();
554
555
  this.initializeStickyIntersectionObserver();
555
- this.setActionButtonsWidth();
556
+ this.subscribeToToolbarButtonsChanges();
556
557
  }
557
558
  ngAfterContentChecked() {
558
559
  this.initializeHeader();
@@ -569,6 +570,7 @@ var PageComponent = class PageComponent {
569
570
  this.stickyActionsIntersectionObserver?.disconnect();
570
571
  this.stickyContentIntersectionObserver?.disconnect();
571
572
  this.unobserveTitleMutation?.();
573
+ this.unobserveToolbarButtons();
572
574
  }
573
575
  delegateRefreshEvent(event) {
574
576
  this.refresh.emit({ complete: event.target.complete.bind(event.target) });
@@ -755,6 +757,23 @@ var PageComponent = class PageComponent {
755
757
  });
756
758
  });
757
759
  }
760
+ observeToolbarButtons() {
761
+ this.unobserveToolbarButtons();
762
+ this.ionToolbarButtonsElement.forEach(({ nativeElement: ionButtonsElement }) => {
763
+ this.observedToolbarButtons.add(ionButtonsElement);
764
+ this.resizeObserverService.observe(ionButtonsElement, () => this.setActionButtonsWidth());
765
+ });
766
+ }
767
+ subscribeToToolbarButtonsChanges() {
768
+ this.ionToolbarButtonsElement.changes.pipe(startWith(this.ionToolbarButtonsElement), takeUntil(this.ngOnDestroy$)).subscribe(() => {
769
+ this.observeToolbarButtons();
770
+ this.setActionButtonsWidth();
771
+ });
772
+ }
773
+ unobserveToolbarButtons() {
774
+ this.observedToolbarButtons.forEach((ionButtonsElement) => this.resizeObserverService.unobserve(ionButtonsElement));
775
+ this.observedToolbarButtons.clear();
776
+ }
758
777
  initializeContent() {
759
778
  this.customContent.forEach((content) => {
760
779
  if (content.isFixed) this.fixedContentTemplate = content.template;
@@ -792,7 +811,7 @@ var PageComponent = class PageComponent {
792
811
  static {
793
812
  this.ɵfac = i0.ɵɵngDeclareFactory({
794
813
  minVersion: "12.0.0",
795
- version: "22.2.2",
814
+ version: "22.2.3",
796
815
  ngImport: i0,
797
816
  type: PageComponent,
798
817
  deps: [
@@ -831,7 +850,7 @@ var PageComponent = class PageComponent {
831
850
  static {
832
851
  this.ɵcmp = i0.ɵɵngDeclareComponent({
833
852
  minVersion: "17.0.0",
834
- version: "22.2.2",
853
+ version: "22.2.3",
835
854
  type: PageComponent,
836
855
  isStandalone: true,
837
856
  selector: "kirby-page",
@@ -990,7 +1009,7 @@ var PageComponent = class PageComponent {
990
1009
  usesOnChanges: true,
991
1010
  ngImport: i0,
992
1011
  template: "<ion-header role=\"presentation\">\n <ion-toolbar\n [class.content-scrolled]=\"isContentScrolled\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n [attr.aria-label]=\"translations.get('back')\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n <div class=\"toolbar-title\">\n @if (!titleActionIconTemplate && !hasInteractiveTitle) {\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n }\n @if (!!titleActionIconTemplate || hasInteractiveTitle) {\n <span\n [class.clickable]=\"hasInteractiveTitle\"\n [class.has-icon]=\"!!titleActionIconTemplate\"\n (click)=\"onTitleClick($event)\"\n >\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n </span>\n }\n </div>\n </ion-title>\n @if (!!headerActionsTemplate) {\n <ion-buttons class=\"hide\" slot=\"primary\" [class.fade-in]=\"toolbarActionsVisible\">\n <ng-container\n *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n ></ng-container>\n </ion-buttons>\n }\n @if (!!stickyActionsTemplate) {\n <ion-buttons class=\"legacy-actions\" slot=\"primary\">\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n }\n @if (!!fixedActionsTemplate) {\n <ion-buttons class=\"legacy-actions\" slot=\"secondary\">\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n }\n </ion-toolbar>\n</ion-header>\n\n<ion-content\n scrollEvents=\"true\"\n forceOverscroll=\"false\"\n [class]=\"getMaxWidthClasses()\"\n [class.has-header]=\"hasHeader\"\n>\n @if (refresh.observers.length > 0) {\n <ion-refresher (ionRefresh)=\"delegateRefreshEvent($event)\" slot=\"fixed\">\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n }\n\n <!-- Page header -->\n @if (hasPageTitle && !hasHeader) {\n <div class=\"page-header-container\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right',\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n @if (hasPageSubtitle) {\n <div class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Header -->\n @if (hasHeader) {\n <div class=\"page-header-container\">\n <ng-content select=\"kirby-header\"></ng-content>\n </div>\n }\n\n <!-- Sticky content -->\n @if (stickyContentTemplate) {\n <div\n #stickyContentContainer\n class=\"sticky-content-container\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n }\n\n <!-- Content -->\n <div class=\"content-inner\">\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n @if (fixedContentTemplate) {\n <div slot=\"fixed\" class=\"fixed-content\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n }\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n",
993
- styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header,ion-toolbar{box-sizing:border-box;--background: var(--kirby-color-fill-base)}ion-title h1{font-size:min(var(--kirby-font-size-m),21.6px)}ion-toolbar{--border-width: 0 !important;--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-color-content-base);--min-height: var(--kirby-spacing-xxxl)}@media(min-width:768px){ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--min-height: var(--kirby-spacing-xxxxxl)}}ion-toolbar:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px}ion-toolbar:before,ion-toolbar::part(background){transition:background-color 50ms linear}ion-toolbar.content-scrolled{--background: var(--kirby-color-fill-base-hover)}ion-toolbar.content-scrolled:before,ion-toolbar.content-scrolled::part(background){transition-duration:var(--kirby-transition-duration-quick)}ion-toolbar.content-scrolled:not(.content-pinned):before{background-color:var(--kirby-color-border-base-silent)}ion-toolbar.content-pinned:before{transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-normal);padding-inline:calc(var(--action-buttons-width, var(--kirby-spacing-xl)var(--kirby-spacing-xxs)) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>span{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:var(--kirby-spacing-xxxl);scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:var(--kirby-transition-easing-enter-exit);transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-back-button{--color: var(--kirby-color-content-raised);--color-hover: var(--kirby-color-content-raised-hover);--color-focused: var(--kirby-color-content-raised-hover);--background: var(--kirby-color-fill-raised);--background-hover: var(--kirby-color-fill-raised-hover);--background-hover-opacity: 1;--background-focused: var(--kirby-color-fill-raised-hover);--background-focused-opacity: 1;--icon-font-size: 24px;height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);opacity:1}ion-back-button:active,ion-back-button.ion-activated{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active)}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border:1px solid var(--kirby-color-border-raised-quiet);border-radius:var(--kirby-border-radius-pill);overflow:hidden}@media(hover:hover){ion-back-button:hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}ion-back-button:active::part(native),ion-back-button.ion-activated::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}ion-back-button:focus-visible::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}.page-header-container{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.page-header{margin-left:var(--kirby-spacing-s);margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-page-title-margin-bottom, var(--kirby-spacing-xl))}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:var(--kirby-spacing-xxs)}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: var(--kirby-spacing-xs);--padding-start: var( --page-content-padding-start, calc(var(--kirby-spacing-s) + var(--ion-safe-area-left)) );--padding-end: var(--page-content-padding-end, var(--kirby-spacing-s));--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}@media(min-width:768px){ion-content{--padding-start: var(--page-content-padding-start, var(--kirby-spacing-xxl));--padding-end: var(--page-content-padding-end, var(--kirby-spacing-xxl))}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: var(--kirby-page-content-max-width-lg)}ion-content.max-width-xl{--page-content-max-width: var(--kirby-page-content-max-width-xl)}ion-content.max-width-full{--page-content-max-width: var(--kirby-page-content-max-width-full)}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-spacing-xl);transform:translateZ(0);will-change:transform}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:calc(-1 * var(--kirby-spacing-xs) - 1px);left:0;right:0;padding-top:1px;margin-block-end:var(--kirby-spacing-m);z-index:var(--kirby-z-index-sticky-content)}.sticky-content-container div{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.sticky-content-container:before,.sticky-content-container:after{content:\"\";position:absolute;left:calc(-1 * var(--padding-start));right:calc(-1 * var(--padding-end));bottom:0}.sticky-content-container:before{top:0;background-color:var(--background)}.sticky-content-container:after{height:1px}.sticky-content-container.content-pinned:before{background-color:var(--kirby-color-fill-base-hover)}.sticky-content-container.content-pinned:after{background-color:var(--kirby-color-border-base-silent)}\n"],
1012
+ styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header,ion-toolbar{box-sizing:border-box;--background: var(--kirby-color-fill-base)}ion-title h1{font-size:min(var(--kirby-font-size-m),21.6px)}ion-toolbar{--border-width: 0 0 var(--kirby-stroke-xs) !important;--border-color: transparent;--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-color-content-base);--min-height: var(--kirby-spacing-xxxl)}@media(min-width:768px){ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--min-height: var(--kirby-spacing-xxxxxl)}}ion-toolbar::part(background){transition:border-color 50ms linear}ion-toolbar.content-scrolled:not(.content-pinned){--border-color: var(--kirby-color-border-base-silent)}ion-toolbar.content-scrolled:not(.content-pinned)::part(background){transition-duration:var(--kirby-transition-duration-quick)}ion-toolbar.content-pinned::part(background){transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-normal);padding-inline:calc(var(--action-buttons-width, var(--kirby-spacing-xl)var(--kirby-spacing-xxs)) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>h1{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:var(--kirby-spacing-xxxl);scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:var(--kirby-transition-easing-enter-exit);transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-back-button{--color: var(--kirby-color-content-raised);--color-hover: var(--kirby-color-content-raised-hover);--color-focused: var(--kirby-color-content-raised-hover);--background: var(--kirby-color-fill-raised);--background-hover: var(--kirby-color-fill-raised-hover);--background-hover-opacity: 1;--background-focused: var(--kirby-color-fill-raised-hover);--background-focused-opacity: 1;--icon-font-size: 24px;height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);opacity:1}ion-back-button:active,ion-back-button.ion-activated{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--background-hover: var(--kirby-color-fill-raised-active);--color-hover: var(--kirby-color-content-raised-active);--background-focused: var(--kirby-color-fill-raised-active);--color-focused: var(--kirby-color-content-raised-active)}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border:var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);border-radius:var(--kirby-border-radius-pill);overflow:hidden}@media(hover:hover){ion-back-button:hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}ion-back-button:active::part(native),ion-back-button.ion-activated::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}ion-back-button:focus-visible::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}.page-header-container{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.page-header{margin-left:var(--kirby-spacing-s);margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-page-title-margin-bottom, var(--kirby-spacing-xl))}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:var(--kirby-spacing-xxs)}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: var(--kirby-spacing-xs);--padding-start: var( --page-content-padding-start, calc(var(--kirby-spacing-s) + var(--ion-safe-area-left)) );--padding-end: var(--page-content-padding-end, var(--kirby-spacing-s));--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}@media(min-width:768px){ion-content{--padding-start: var(--page-content-padding-start, var(--kirby-spacing-xxl));--padding-end: var(--page-content-padding-end, var(--kirby-spacing-xxl))}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: var(--kirby-page-content-max-width-lg)}ion-content.max-width-xl{--page-content-max-width: var(--kirby-page-content-max-width-xl)}ion-content.max-width-full{--page-content-max-width: var(--kirby-page-content-max-width-full)}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-spacing-xl);transform:translateZ(0);will-change:transform}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:calc(-1 * var(--kirby-spacing-xs) - 1px);left:0;right:0;padding-top:1px;margin-block-end:var(--kirby-spacing-m);z-index:var(--kirby-z-index-sticky-content)}.sticky-content-container div{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.sticky-content-container:before{content:\"\";position:absolute;inset:0 calc(-1 * var(--padding-end)) 0 calc(-1 * var(--padding-start));background-color:var(--background);border-bottom:var(--kirby-stroke-xs) solid transparent;box-sizing:border-box}.sticky-content-container.content-pinned:before{border-bottom-color:var(--kirby-color-border-base-silent)}\n"],
994
1013
  dependencies: [
995
1014
  {
996
1015
  kind: "component",
@@ -1109,7 +1128,7 @@ var PageComponent = class PageComponent {
1109
1128
  };
1110
1129
  i0.ɵɵngDeclareClassMetadata({
1111
1130
  minVersion: "12.0.0",
1112
- version: "22.2.2",
1131
+ version: "22.2.3",
1113
1132
  ngImport: i0,
1114
1133
  type: PageComponent,
1115
1134
  decorators: [{
@@ -1133,7 +1152,7 @@ i0.ɵɵngDeclareClassMetadata({
1133
1152
  FitHeadingDirective
1134
1153
  ],
1135
1154
  template: "<ion-header role=\"presentation\">\n <ion-toolbar\n [class.content-scrolled]=\"isContentScrolled\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n [attr.aria-label]=\"translations.get('back')\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n <div class=\"toolbar-title\">\n @if (!titleActionIconTemplate && !hasInteractiveTitle) {\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n }\n @if (!!titleActionIconTemplate || hasInteractiveTitle) {\n <span\n [class.clickable]=\"hasInteractiveTitle\"\n [class.has-icon]=\"!!titleActionIconTemplate\"\n (click)=\"onTitleClick($event)\"\n >\n <h1 class=\"kirby-text-normal-bold\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </h1>\n <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n </span>\n }\n </div>\n </ion-title>\n @if (!!headerActionsTemplate) {\n <ion-buttons class=\"hide\" slot=\"primary\" [class.fade-in]=\"toolbarActionsVisible\">\n <ng-container\n *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n ></ng-container>\n </ion-buttons>\n }\n @if (!!stickyActionsTemplate) {\n <ion-buttons class=\"legacy-actions\" slot=\"primary\">\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n }\n @if (!!fixedActionsTemplate) {\n <ion-buttons class=\"legacy-actions\" slot=\"secondary\">\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n }\n </ion-toolbar>\n</ion-header>\n\n<ion-content\n scrollEvents=\"true\"\n forceOverscroll=\"false\"\n [class]=\"getMaxWidthClasses()\"\n [class.has-header]=\"hasHeader\"\n>\n @if (refresh.observers.length > 0) {\n <ion-refresher (ionRefresh)=\"delegateRefreshEvent($event)\" slot=\"fixed\">\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n }\n\n <!-- Page header -->\n @if (hasPageTitle && !hasHeader) {\n <div class=\"page-header-container\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right',\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n @if (hasPageSubtitle) {\n <div class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Header -->\n @if (hasHeader) {\n <div class=\"page-header-container\">\n <ng-content select=\"kirby-header\"></ng-content>\n </div>\n }\n\n <!-- Sticky content -->\n @if (stickyContentTemplate) {\n <div\n #stickyContentContainer\n class=\"sticky-content-container\"\n [class.content-pinned]=\"isStickyContentPinned\"\n >\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n }\n\n <!-- Content -->\n <div class=\"content-inner\">\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n @if (fixedContentTemplate) {\n <div slot=\"fixed\" class=\"fixed-content\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n }\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n",
1136
- styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header,ion-toolbar{box-sizing:border-box;--background: var(--kirby-color-fill-base)}ion-title h1{font-size:min(var(--kirby-font-size-m),21.6px)}ion-toolbar{--border-width: 0 !important;--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-color-content-base);--min-height: var(--kirby-spacing-xxxl)}@media(min-width:768px){ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--min-height: var(--kirby-spacing-xxxxxl)}}ion-toolbar:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px}ion-toolbar:before,ion-toolbar::part(background){transition:background-color 50ms linear}ion-toolbar.content-scrolled{--background: var(--kirby-color-fill-base-hover)}ion-toolbar.content-scrolled:before,ion-toolbar.content-scrolled::part(background){transition-duration:var(--kirby-transition-duration-quick)}ion-toolbar.content-scrolled:not(.content-pinned):before{background-color:var(--kirby-color-border-base-silent)}ion-toolbar.content-pinned:before{transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-normal);padding-inline:calc(var(--action-buttons-width, var(--kirby-spacing-xl)var(--kirby-spacing-xxs)) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>span{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:var(--kirby-spacing-xxxl);scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:var(--kirby-transition-easing-enter-exit);transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-back-button{--color: var(--kirby-color-content-raised);--color-hover: var(--kirby-color-content-raised-hover);--color-focused: var(--kirby-color-content-raised-hover);--background: var(--kirby-color-fill-raised);--background-hover: var(--kirby-color-fill-raised-hover);--background-hover-opacity: 1;--background-focused: var(--kirby-color-fill-raised-hover);--background-focused-opacity: 1;--icon-font-size: 24px;height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);opacity:1}ion-back-button:active,ion-back-button.ion-activated{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active)}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border:1px solid var(--kirby-color-border-raised-quiet);border-radius:var(--kirby-border-radius-pill);overflow:hidden}@media(hover:hover){ion-back-button:hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}ion-back-button:active::part(native),ion-back-button.ion-activated::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}ion-back-button:focus-visible::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}.page-header-container{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.page-header{margin-left:var(--kirby-spacing-s);margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-page-title-margin-bottom, var(--kirby-spacing-xl))}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:var(--kirby-spacing-xxs)}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: var(--kirby-spacing-xs);--padding-start: var( --page-content-padding-start, calc(var(--kirby-spacing-s) + var(--ion-safe-area-left)) );--padding-end: var(--page-content-padding-end, var(--kirby-spacing-s));--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}@media(min-width:768px){ion-content{--padding-start: var(--page-content-padding-start, var(--kirby-spacing-xxl));--padding-end: var(--page-content-padding-end, var(--kirby-spacing-xxl))}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: var(--kirby-page-content-max-width-lg)}ion-content.max-width-xl{--page-content-max-width: var(--kirby-page-content-max-width-xl)}ion-content.max-width-full{--page-content-max-width: var(--kirby-page-content-max-width-full)}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-spacing-xl);transform:translateZ(0);will-change:transform}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:calc(-1 * var(--kirby-spacing-xs) - 1px);left:0;right:0;padding-top:1px;margin-block-end:var(--kirby-spacing-m);z-index:var(--kirby-z-index-sticky-content)}.sticky-content-container div{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.sticky-content-container:before,.sticky-content-container:after{content:\"\";position:absolute;left:calc(-1 * var(--padding-start));right:calc(-1 * var(--padding-end));bottom:0}.sticky-content-container:before{top:0;background-color:var(--background)}.sticky-content-container:after{height:1px}.sticky-content-container.content-pinned:before{background-color:var(--kirby-color-fill-base-hover)}.sticky-content-container.content-pinned:after{background-color:var(--kirby-color-border-base-silent)}\n"]
1155
+ styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header,ion-toolbar{box-sizing:border-box;--background: var(--kirby-color-fill-base)}ion-title h1{font-size:min(var(--kirby-font-size-m),21.6px)}ion-toolbar{--border-width: 0 0 var(--kirby-stroke-xs) !important;--border-color: transparent;--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-color-content-base);--min-height: var(--kirby-spacing-xxxl)}@media(min-width:768px){ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--min-height: var(--kirby-spacing-xxxxxl)}}ion-toolbar::part(background){transition:border-color 50ms linear}ion-toolbar.content-scrolled:not(.content-pinned){--border-color: var(--kirby-color-border-base-silent)}ion-toolbar.content-scrolled:not(.content-pinned)::part(background){transition-duration:var(--kirby-transition-duration-quick)}ion-toolbar.content-pinned::part(background){transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-normal);padding-inline:calc(var(--action-buttons-width, var(--kirby-spacing-xl)var(--kirby-spacing-xxs)) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>h1{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:var(--kirby-spacing-xxxl);scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:var(--kirby-transition-easing-enter-exit);transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-back-button{--color: var(--kirby-color-content-raised);--color-hover: var(--kirby-color-content-raised-hover);--color-focused: var(--kirby-color-content-raised-hover);--background: var(--kirby-color-fill-raised);--background-hover: var(--kirby-color-fill-raised-hover);--background-hover-opacity: 1;--background-focused: var(--kirby-color-fill-raised-hover);--background-focused-opacity: 1;--icon-font-size: 24px;height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);opacity:1}ion-back-button:active,ion-back-button.ion-activated{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--background-hover: var(--kirby-color-fill-raised-active);--color-hover: var(--kirby-color-content-raised-active);--background-focused: var(--kirby-color-fill-raised-active);--color-focused: var(--kirby-color-content-raised-active)}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border:var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);border-radius:var(--kirby-border-radius-pill);overflow:hidden}@media(hover:hover){ion-back-button:hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}ion-back-button:active::part(native),ion-back-button.ion-activated::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}ion-back-button:focus-visible::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}.page-header-container{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.page-header{margin-left:var(--kirby-spacing-s);margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-page-title-margin-bottom, var(--kirby-spacing-xl))}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:var(--kirby-spacing-xxs)}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: var(--kirby-spacing-xs);--padding-start: var( --page-content-padding-start, calc(var(--kirby-spacing-s) + var(--ion-safe-area-left)) );--padding-end: var(--page-content-padding-end, var(--kirby-spacing-s));--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}@media(min-width:768px){ion-content{--padding-start: var(--page-content-padding-start, var(--kirby-spacing-xxl));--padding-end: var(--page-content-padding-end, var(--kirby-spacing-xxl))}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: var(--kirby-page-content-max-width-lg)}ion-content.max-width-xl{--page-content-max-width: var(--kirby-page-content-max-width-xl)}ion-content.max-width-full{--page-content-max-width: var(--kirby-page-content-max-width-full)}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-spacing-xl);transform:translateZ(0);will-change:transform}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:calc(-1 * var(--kirby-spacing-xs) - 1px);left:0;right:0;padding-top:1px;margin-block-end:var(--kirby-spacing-m);z-index:var(--kirby-z-index-sticky-content)}.sticky-content-container div{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.sticky-content-container:before{content:\"\";position:absolute;inset:0 calc(-1 * var(--padding-end)) 0 calc(-1 * var(--padding-start));background-color:var(--background);border-bottom:var(--kirby-stroke-xs) solid transparent;box-sizing:border-box}.sticky-content-container.content-pinned:before{border-bottom-color:var(--kirby-color-border-base-silent)}\n"]
1137
1156
  }]
1138
1157
  }],
1139
1158
  ctorParameters: () => [
@@ -1324,7 +1343,7 @@ var PageFooterComponent = class PageFooterComponent {
1324
1343
  static {
1325
1344
  this.ɵfac = i0.ɵɵngDeclareFactory({
1326
1345
  minVersion: "12.0.0",
1327
- version: "22.2.2",
1346
+ version: "22.2.3",
1328
1347
  ngImport: i0,
1329
1348
  type: PageFooterComponent,
1330
1349
  deps: [
@@ -1342,21 +1361,22 @@ var PageFooterComponent = class PageFooterComponent {
1342
1361
  static {
1343
1362
  this.ɵcmp = i0.ɵɵngDeclareComponent({
1344
1363
  minVersion: "14.0.0",
1345
- version: "22.2.2",
1364
+ version: "22.2.3",
1346
1365
  type: PageFooterComponent,
1347
1366
  isStandalone: true,
1348
1367
  selector: "kirby-page-footer",
1349
1368
  inputs: { hasPadding: "hasPadding" },
1369
+ host: { classAttribute: "kirby-surface-raised" },
1350
1370
  ngImport: i0,
1351
- template: "<div class=\"wrapper kirby-surface-raised\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n",
1352
- styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{display:block;background-color:var(--kirby-color-fill-raised);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:var(--kirby-spacing-xxs) var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xxs) + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"],
1371
+ template: "<div class=\"wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n",
1372
+ styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{display:block;background-color:var(--kirby-color-fill-base);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:var(--kirby-spacing-xxs) var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xxs) + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"],
1353
1373
  changeDetection: i0.ChangeDetectionStrategy.OnPush
1354
1374
  });
1355
1375
  }
1356
1376
  };
1357
1377
  i0.ɵɵngDeclareClassMetadata({
1358
1378
  minVersion: "12.0.0",
1359
- version: "22.2.2",
1379
+ version: "22.2.3",
1360
1380
  ngImport: i0,
1361
1381
  type: PageFooterComponent,
1362
1382
  decorators: [{
@@ -1364,8 +1384,9 @@ i0.ɵɵngDeclareClassMetadata({
1364
1384
  args: [{
1365
1385
  selector: "kirby-page-footer",
1366
1386
  changeDetection: ChangeDetectionStrategy.OnPush,
1367
- template: "<div class=\"wrapper kirby-surface-raised\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n",
1368
- styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{display:block;background-color:var(--kirby-color-fill-raised);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:var(--kirby-spacing-xxs) var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xxs) + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"]
1387
+ host: { class: "kirby-surface-raised" },
1388
+ template: "<div class=\"wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n</div>\n",
1389
+ styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{display:block;background-color:var(--kirby-color-fill-base);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:var(--kirby-spacing-xxs) var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xxs) + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"]
1369
1390
  }]
1370
1391
  }],
1371
1392
  ctorParameters: () => [
@@ -1382,7 +1403,7 @@ var PageModule = class PageModule {
1382
1403
  static {
1383
1404
  this.ɵfac = i0.ɵɵngDeclareFactory({
1384
1405
  minVersion: "12.0.0",
1385
- version: "22.2.2",
1406
+ version: "22.2.3",
1386
1407
  ngImport: i0,
1387
1408
  type: PageModule,
1388
1409
  deps: [],
@@ -1392,7 +1413,7 @@ var PageModule = class PageModule {
1392
1413
  static {
1393
1414
  this.ɵmod = i0.ɵɵngDeclareNgModule({
1394
1415
  minVersion: "14.0.0",
1395
- version: "22.2.2",
1416
+ version: "22.2.3",
1396
1417
  ngImport: i0,
1397
1418
  type: PageModule,
1398
1419
  imports: [
@@ -1441,7 +1462,7 @@ var PageModule = class PageModule {
1441
1462
  static {
1442
1463
  this.ɵinj = i0.ɵɵngDeclareInjector({
1443
1464
  minVersion: "12.0.0",
1444
- version: "22.2.2",
1465
+ version: "22.2.3",
1445
1466
  ngImport: i0,
1446
1467
  type: PageModule,
1447
1468
  imports: [
@@ -1463,7 +1484,7 @@ var PageModule = class PageModule {
1463
1484
  };
1464
1485
  i0.ɵɵngDeclareClassMetadata({
1465
1486
  minVersion: "12.0.0",
1466
- version: "22.2.2",
1487
+ version: "22.2.3",
1467
1488
  ngImport: i0,
1468
1489
  type: PageModule,
1469
1490
  decorators: [{