@kirbydesign/designsystem 8.2.0-rc.2 → 8.3.0

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 (193) hide show
  1. package/README.md +7 -0
  2. package/action-group/action-group.component.d.ts +10 -6
  3. package/button/button.component.d.ts +2 -1
  4. package/button/public_api.d.ts +1 -1
  5. package/dropdown/keyboard-handler.service.d.ts +1 -1
  6. package/esm2020/action-group/action-group.component.mjs +25 -29
  7. package/esm2020/button/button.component.mjs +3 -3
  8. package/esm2020/button/public_api.mjs +2 -2
  9. package/esm2020/card/card.component.mjs +2 -2
  10. package/esm2020/dropdown/dropdown.component.mjs +4 -4
  11. package/esm2020/dropdown/dropdown.module.mjs +1 -1
  12. package/esm2020/dropdown/keyboard-handler.service.mjs +12 -7
  13. package/esm2020/header/header.component.mjs +12 -26
  14. package/esm2020/header/public_api.mjs +2 -2
  15. package/esm2020/item/item.component.mjs +2 -2
  16. package/esm2020/lib/index.mjs +3 -1
  17. package/esm2020/lib/kirby.module.mjs +22 -5
  18. package/esm2020/list/list-item/list-item.component.mjs +2 -2
  19. package/esm2020/list/list.component.mjs +2 -2
  20. package/esm2020/menu/kirbydesign-designsystem-menu.mjs +5 -0
  21. package/esm2020/menu/menu.component.mjs +69 -0
  22. package/esm2020/menu/public_api.mjs +2 -0
  23. package/esm2020/modal/modal/footer/modal-footer.component.mjs +3 -3
  24. package/esm2020/modal/v2/footer/footer.component.mjs +2 -2
  25. package/esm2020/modal/v2/modal-routing/modal-routing.component.mjs +3 -3
  26. package/esm2020/page/page-footer/page-footer.component.mjs +2 -2
  27. package/esm2020/page/page.component.mjs +37 -30
  28. package/esm2020/page/public_api.mjs +2 -12
  29. package/esm2020/shared/floating/floating.directive.mjs +91 -24
  30. package/esm2020/shared/floating/public_api.mjs +2 -2
  31. package/esm2020/tab-navigation/kirbydesign-designsystem-tab-navigation.mjs +5 -0
  32. package/esm2020/tab-navigation/public_api.mjs +4 -0
  33. package/esm2020/tab-navigation/tab-navigation/tab-navigation.component.mjs +121 -0
  34. package/esm2020/tab-navigation/tab-navigation-item/tab-navigation-item.component.mjs +17 -0
  35. package/esm2020/tab-navigation/tab-navigation.module.mjs +19 -0
  36. package/fesm2015/kirbydesign-designsystem-accordion.mjs +0 -1
  37. package/fesm2015/kirbydesign-designsystem-action-group.mjs +25 -30
  38. package/fesm2015/kirbydesign-designsystem-action-group.mjs.map +1 -1
  39. package/fesm2015/kirbydesign-designsystem-alert-experimental.mjs +0 -1
  40. package/fesm2015/kirbydesign-designsystem-avatar.mjs +0 -1
  41. package/fesm2015/kirbydesign-designsystem-button.mjs +2 -3
  42. package/fesm2015/kirbydesign-designsystem-button.mjs.map +1 -1
  43. package/fesm2015/kirbydesign-designsystem-calendar.mjs +0 -1
  44. package/fesm2015/kirbydesign-designsystem-card.mjs +2 -3
  45. package/fesm2015/kirbydesign-designsystem-card.mjs.map +1 -1
  46. package/fesm2015/kirbydesign-designsystem-chart.mjs +0 -1
  47. package/fesm2015/kirbydesign-designsystem-checkbox.mjs +0 -1
  48. package/fesm2015/kirbydesign-designsystem-data-table.mjs +0 -1
  49. package/fesm2015/kirbydesign-designsystem-divider.mjs +0 -1
  50. package/fesm2015/kirbydesign-designsystem-dropdown.mjs +15 -11
  51. package/fesm2015/kirbydesign-designsystem-dropdown.mjs.map +1 -1
  52. package/fesm2015/kirbydesign-designsystem-empty-state.mjs +0 -1
  53. package/fesm2015/kirbydesign-designsystem-fab-sheet.mjs +0 -1
  54. package/fesm2015/kirbydesign-designsystem-flag.mjs +0 -1
  55. package/fesm2015/kirbydesign-designsystem-form-field.mjs +0 -1
  56. package/fesm2015/kirbydesign-designsystem-grid.mjs +0 -1
  57. package/fesm2015/kirbydesign-designsystem-header.mjs +12 -29
  58. package/fesm2015/kirbydesign-designsystem-header.mjs.map +1 -1
  59. package/fesm2015/kirbydesign-designsystem-helpers-scss.mjs +0 -1
  60. package/fesm2015/kirbydesign-designsystem-helpers.mjs +0 -1
  61. package/fesm2015/kirbydesign-designsystem-icon.mjs +0 -1
  62. package/fesm2015/kirbydesign-designsystem-item-group.mjs +0 -1
  63. package/fesm2015/kirbydesign-designsystem-item-sliding.mjs +0 -1
  64. package/fesm2015/kirbydesign-designsystem-item.mjs +2 -3
  65. package/fesm2015/kirbydesign-designsystem-item.mjs.map +1 -1
  66. package/fesm2015/kirbydesign-designsystem-kirby-app.mjs +0 -1
  67. package/fesm2015/kirbydesign-designsystem-kirby-ionic-module.mjs +0 -1
  68. package/fesm2015/kirbydesign-designsystem-list.mjs +4 -5
  69. package/fesm2015/kirbydesign-designsystem-list.mjs.map +1 -1
  70. package/fesm2015/kirbydesign-designsystem-loading-overlay.mjs +0 -1
  71. package/fesm2015/kirbydesign-designsystem-menu.mjs +76 -0
  72. package/fesm2015/kirbydesign-designsystem-menu.mjs.map +1 -0
  73. package/fesm2015/kirbydesign-designsystem-modal-v2.mjs +4 -5
  74. package/fesm2015/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
  75. package/fesm2015/kirbydesign-designsystem-modal.mjs +2 -3
  76. package/fesm2015/kirbydesign-designsystem-modal.mjs.map +1 -1
  77. package/fesm2015/kirbydesign-designsystem-page.mjs +38 -32
  78. package/fesm2015/kirbydesign-designsystem-page.mjs.map +1 -1
  79. package/fesm2015/kirbydesign-designsystem-popover.mjs +0 -1
  80. package/fesm2015/kirbydesign-designsystem-progress-circle.mjs +0 -1
  81. package/fesm2015/kirbydesign-designsystem-radio.mjs +0 -1
  82. package/fesm2015/kirbydesign-designsystem-range.mjs +0 -1
  83. package/fesm2015/kirbydesign-designsystem-reorder-list.mjs +0 -1
  84. package/fesm2015/kirbydesign-designsystem-router-outlet.mjs +0 -1
  85. package/fesm2015/kirbydesign-designsystem-section-header.mjs +0 -1
  86. package/fesm2015/kirbydesign-designsystem-shared-floating.mjs +92 -25
  87. package/fesm2015/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
  88. package/fesm2015/kirbydesign-designsystem-shared-portal.mjs +0 -1
  89. package/fesm2015/kirbydesign-designsystem-shared.mjs +0 -1
  90. package/fesm2015/kirbydesign-designsystem-slide-button.mjs +0 -1
  91. package/fesm2015/kirbydesign-designsystem-slide.mjs +0 -1
  92. package/fesm2015/kirbydesign-designsystem-spinner.mjs +0 -1
  93. package/fesm2015/kirbydesign-designsystem-tab-navigation.mjs +156 -0
  94. package/fesm2015/kirbydesign-designsystem-tab-navigation.mjs.map +1 -0
  95. package/fesm2015/kirbydesign-designsystem-tabs.mjs +0 -1
  96. package/fesm2015/kirbydesign-designsystem-testing-base.mjs +0 -1
  97. package/fesm2015/kirbydesign-designsystem-testing-jasmine.mjs +0 -1
  98. package/fesm2015/kirbydesign-designsystem-testing-jest.mjs +0 -1
  99. package/fesm2015/kirbydesign-designsystem-testing.mjs +0 -1
  100. package/fesm2015/kirbydesign-designsystem-toast.mjs +0 -1
  101. package/fesm2015/kirbydesign-designsystem-toggle-button.mjs +0 -1
  102. package/fesm2015/kirbydesign-designsystem-toggle.mjs +0 -1
  103. package/fesm2015/kirbydesign-designsystem-types.mjs +0 -1
  104. package/fesm2015/kirbydesign-designsystem.mjs +23 -5
  105. package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
  106. package/fesm2020/kirbydesign-designsystem-accordion.mjs +0 -1
  107. package/fesm2020/kirbydesign-designsystem-action-group.mjs +25 -30
  108. package/fesm2020/kirbydesign-designsystem-action-group.mjs.map +1 -1
  109. package/fesm2020/kirbydesign-designsystem-alert-experimental.mjs +0 -1
  110. package/fesm2020/kirbydesign-designsystem-avatar.mjs +0 -1
  111. package/fesm2020/kirbydesign-designsystem-button.mjs +2 -3
  112. package/fesm2020/kirbydesign-designsystem-button.mjs.map +1 -1
  113. package/fesm2020/kirbydesign-designsystem-calendar.mjs +0 -1
  114. package/fesm2020/kirbydesign-designsystem-card.mjs +2 -3
  115. package/fesm2020/kirbydesign-designsystem-card.mjs.map +1 -1
  116. package/fesm2020/kirbydesign-designsystem-chart.mjs +0 -1
  117. package/fesm2020/kirbydesign-designsystem-checkbox.mjs +0 -1
  118. package/fesm2020/kirbydesign-designsystem-data-table.mjs +0 -1
  119. package/fesm2020/kirbydesign-designsystem-divider.mjs +0 -1
  120. package/fesm2020/kirbydesign-designsystem-dropdown.mjs +15 -11
  121. package/fesm2020/kirbydesign-designsystem-dropdown.mjs.map +1 -1
  122. package/fesm2020/kirbydesign-designsystem-empty-state.mjs +0 -1
  123. package/fesm2020/kirbydesign-designsystem-fab-sheet.mjs +0 -1
  124. package/fesm2020/kirbydesign-designsystem-flag.mjs +0 -1
  125. package/fesm2020/kirbydesign-designsystem-form-field.mjs +0 -1
  126. package/fesm2020/kirbydesign-designsystem-grid.mjs +0 -1
  127. package/fesm2020/kirbydesign-designsystem-header.mjs +12 -27
  128. package/fesm2020/kirbydesign-designsystem-header.mjs.map +1 -1
  129. package/fesm2020/kirbydesign-designsystem-helpers-scss.mjs +0 -1
  130. package/fesm2020/kirbydesign-designsystem-helpers.mjs +0 -1
  131. package/fesm2020/kirbydesign-designsystem-icon.mjs +0 -1
  132. package/fesm2020/kirbydesign-designsystem-item-group.mjs +0 -1
  133. package/fesm2020/kirbydesign-designsystem-item-sliding.mjs +0 -1
  134. package/fesm2020/kirbydesign-designsystem-item.mjs +2 -3
  135. package/fesm2020/kirbydesign-designsystem-item.mjs.map +1 -1
  136. package/fesm2020/kirbydesign-designsystem-kirby-app.mjs +0 -1
  137. package/fesm2020/kirbydesign-designsystem-kirby-ionic-module.mjs +0 -1
  138. package/fesm2020/kirbydesign-designsystem-list.mjs +4 -5
  139. package/fesm2020/kirbydesign-designsystem-list.mjs.map +1 -1
  140. package/fesm2020/kirbydesign-designsystem-loading-overlay.mjs +0 -1
  141. package/fesm2020/kirbydesign-designsystem-menu.mjs +76 -0
  142. package/fesm2020/kirbydesign-designsystem-menu.mjs.map +1 -0
  143. package/fesm2020/kirbydesign-designsystem-modal-v2.mjs +4 -5
  144. package/fesm2020/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
  145. package/fesm2020/kirbydesign-designsystem-modal.mjs +2 -3
  146. package/fesm2020/kirbydesign-designsystem-modal.mjs.map +1 -1
  147. package/fesm2020/kirbydesign-designsystem-page.mjs +38 -32
  148. package/fesm2020/kirbydesign-designsystem-page.mjs.map +1 -1
  149. package/fesm2020/kirbydesign-designsystem-popover.mjs +0 -1
  150. package/fesm2020/kirbydesign-designsystem-progress-circle.mjs +0 -1
  151. package/fesm2020/kirbydesign-designsystem-radio.mjs +0 -1
  152. package/fesm2020/kirbydesign-designsystem-range.mjs +0 -1
  153. package/fesm2020/kirbydesign-designsystem-reorder-list.mjs +0 -1
  154. package/fesm2020/kirbydesign-designsystem-router-outlet.mjs +0 -1
  155. package/fesm2020/kirbydesign-designsystem-section-header.mjs +0 -1
  156. package/fesm2020/kirbydesign-designsystem-shared-floating.mjs +91 -25
  157. package/fesm2020/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
  158. package/fesm2020/kirbydesign-designsystem-shared-portal.mjs +0 -1
  159. package/fesm2020/kirbydesign-designsystem-shared.mjs +0 -1
  160. package/fesm2020/kirbydesign-designsystem-slide-button.mjs +0 -1
  161. package/fesm2020/kirbydesign-designsystem-slide.mjs +0 -1
  162. package/fesm2020/kirbydesign-designsystem-spinner.mjs +0 -1
  163. package/fesm2020/kirbydesign-designsystem-tab-navigation.mjs +155 -0
  164. package/fesm2020/kirbydesign-designsystem-tab-navigation.mjs.map +1 -0
  165. package/fesm2020/kirbydesign-designsystem-tabs.mjs +0 -1
  166. package/fesm2020/kirbydesign-designsystem-testing-base.mjs +0 -1
  167. package/fesm2020/kirbydesign-designsystem-testing-jasmine.mjs +0 -1
  168. package/fesm2020/kirbydesign-designsystem-testing-jest.mjs +0 -1
  169. package/fesm2020/kirbydesign-designsystem-testing.mjs +0 -1
  170. package/fesm2020/kirbydesign-designsystem-toast.mjs +0 -1
  171. package/fesm2020/kirbydesign-designsystem-toggle-button.mjs +0 -1
  172. package/fesm2020/kirbydesign-designsystem-toggle.mjs +0 -1
  173. package/fesm2020/kirbydesign-designsystem-types.mjs +0 -1
  174. package/fesm2020/kirbydesign-designsystem.mjs +23 -5
  175. package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
  176. package/header/header.component.d.ts +5 -11
  177. package/header/public_api.d.ts +1 -1
  178. package/lib/index.d.ts +2 -0
  179. package/lib/kirby.module.d.ts +42 -39
  180. package/menu/index.d.ts +5 -0
  181. package/menu/menu.component.d.ts +31 -0
  182. package/menu/public_api.d.ts +1 -0
  183. package/package.json +18 -2
  184. package/page/page.component.d.ts +12 -5
  185. package/page/public_api.d.ts +1 -12
  186. package/shared/floating/floating.directive.d.ts +30 -4
  187. package/shared/floating/public_api.d.ts +1 -1
  188. package/tab-navigation/index.d.ts +5 -0
  189. package/tab-navigation/public_api.d.ts +3 -0
  190. package/tab-navigation/tab-navigation/tab-navigation.component.d.ts +30 -0
  191. package/tab-navigation/tab-navigation-item/tab-navigation-item.component.d.ts +7 -0
  192. package/tab-navigation/tab-navigation.module.d.ts +9 -0
  193. package/icon/src/README.md +0 -16
@@ -142,4 +142,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
142
142
 
143
143
  export { ProgressCircleComponent, ProgressCircleRingComponent };
144
144
  //# sourceMappingURL=kirbydesign-designsystem-progress-circle.mjs.map
145
- //# sourceMappingURL=kirbydesign-designsystem-progress-circle.mjs.map
@@ -313,4 +313,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
313
313
 
314
314
  export { RadioComponent, RadioGroupComponent, RadioModule };
315
315
  //# sourceMappingURL=kirbydesign-designsystem-radio.mjs.map
316
- //# sourceMappingURL=kirbydesign-designsystem-radio.mjs.map
@@ -113,4 +113,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
113
113
 
114
114
  export { RangeComponent };
115
115
  //# sourceMappingURL=kirbydesign-designsystem-range.mjs.map
116
- //# sourceMappingURL=kirbydesign-designsystem-range.mjs.map
@@ -99,4 +99,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
99
99
 
100
100
  export { ReorderEvent, ReorderListComponent };
101
101
  //# sourceMappingURL=kirbydesign-designsystem-reorder-list.mjs.map
102
- //# sourceMappingURL=kirbydesign-designsystem-reorder-list.mjs.map
@@ -37,4 +37,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
37
37
 
38
38
  export { RouterOutletComponent, RouterOutletModule };
39
39
  //# sourceMappingURL=kirbydesign-designsystem-router-outlet.mjs.map
40
- //# sourceMappingURL=kirbydesign-designsystem-router-outlet.mjs.map
@@ -19,4 +19,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
19
19
 
20
20
  export { SectionHeaderComponent };
21
21
  //# sourceMappingURL=kirbydesign-designsystem-section-header.mjs.map
22
- //# sourceMappingURL=kirbydesign-designsystem-section-header.mjs.map
@@ -12,6 +12,13 @@ var FloatingOffset;
12
12
  FloatingOffset[FloatingOffset["small"] = 4] = "small";
13
13
  FloatingOffset[FloatingOffset["medium"] = 8] = "medium";
14
14
  })(FloatingOffset || (FloatingOffset = {}));
15
+ var OutletSelector;
16
+ (function (OutletSelector) {
17
+ OutletSelector["tag"] = "tag";
18
+ OutletSelector["id"] = "id";
19
+ OutletSelector["class"] = "class";
20
+ OutletSelector["name"] = "name";
21
+ })(OutletSelector || (OutletSelector = {}));
15
22
  /**
16
23
  * @summary FloatingDirective is a utility that lets you declarative anchor "popup" containers to another element.
17
24
  *
@@ -56,7 +63,7 @@ class FloatingDirective {
56
63
  this._strategy = 'absolute';
57
64
  this._triggers = ['click'];
58
65
  this.isShown = false;
59
- this.eventListenerDisposeFns = [];
66
+ this.referenceEventListenerDisposeFns = [];
60
67
  this.triggerEventMap = new Map([
61
68
  ['click', [{ event: 'click', method: this.toggleShow.bind(this) }]],
62
69
  [
@@ -74,12 +81,19 @@ class FloatingDirective {
74
81
  ],
75
82
  ],
76
83
  ]);
84
+ this.HTMLElements = {
85
+ id: (value) => Array.of(document.getElementById(value)),
86
+ class: (value) => Array.from(document.getElementsByClassName(value)),
87
+ name: (value) => Array.from(document.getElementsByName(value)),
88
+ tag: (value) => Array.from(document.getElementsByTagName(value)),
89
+ default: () => null,
90
+ };
77
91
  }
78
92
  /**
79
93
  * Reference to the element for which the host should anchor to
80
94
  * */
81
95
  set reference(ref) {
82
- this.tearDownEventHandling();
96
+ this.tearDownReferenceElementEventHandling();
83
97
  this._reference = ref;
84
98
  this.setupEventHandling();
85
99
  this.autoUpdatePosition();
@@ -114,7 +128,7 @@ class FloatingDirective {
114
128
  * */
115
129
  set triggers(eventTriggers) {
116
130
  this._triggers = eventTriggers;
117
- this.tearDownEventHandling();
131
+ this.tearDownReferenceElementEventHandling();
118
132
  this.setupEventHandling();
119
133
  }
120
134
  get triggers() {
@@ -126,22 +140,32 @@ class FloatingDirective {
126
140
  * This should be used when there's issues with the stacking context, and not as a default option.
127
141
  * */
128
142
  set DOMPortalOutlet(outlet) {
129
- this.portalDirective.outlet = outlet;
143
+ var _a;
144
+ this._providedPortalOutlet = outlet;
145
+ this.portalDirective.outlet =
146
+ (_a = this.DOMPortalOutlet) !== null && _a !== void 0 ? _a : this.getOutletElement(this.portalOutletConfig);
147
+ }
148
+ get DOMPortalOutlet() {
149
+ return this._providedPortalOutlet;
150
+ }
151
+ /**
152
+ * Defines how to automatically find and assign DOMPortalOutlet if none is provided in DOMPortalOutlet.
153
+ * If nothing is provided here and in DOMPortalOutlet, the provided strategy is used
154
+ * */
155
+ set portalOutletConfig(config) {
156
+ this._portalOutletConfig = config;
157
+ if (!this.DOMPortalOutlet) {
158
+ this.portalDirective.outlet = this.getOutletElement(config);
159
+ }
160
+ }
161
+ get portalOutletConfig() {
162
+ return this._portalOutletConfig;
130
163
  }
131
164
  onEscapeKeyPressed() {
132
165
  if (this.closeOnEscapeKey) {
133
166
  this.hide();
134
167
  }
135
168
  }
136
- onMouseClick(event) {
137
- const clickedOnHost = this.elementRef.nativeElement.contains(event.target);
138
- if (clickedOnHost) {
139
- this.handleClickInsideHostElement();
140
- }
141
- else {
142
- this.handleClickOutsideHostElement(event);
143
- }
144
- }
145
169
  ngOnInit() {
146
170
  this.addFloatStylingToHostElement();
147
171
  this.updateHostElementPosition();
@@ -151,6 +175,7 @@ class FloatingDirective {
151
175
  if (this.isDisabled) {
152
176
  return;
153
177
  }
178
+ this.attachDocumentClickEvent();
154
179
  this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'block');
155
180
  this.isShown = true;
156
181
  this.displayChanged.emit(this.isShown);
@@ -160,6 +185,7 @@ class FloatingDirective {
160
185
  if (this.isDisabled) {
161
186
  return;
162
187
  }
188
+ this.tearDownDocumentClickEventHandling();
163
189
  this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');
164
190
  this.isShown = false;
165
191
  this.displayChanged.emit(this.isShown);
@@ -173,11 +199,24 @@ class FloatingDirective {
173
199
  this.show();
174
200
  }
175
201
  }
202
+ onDocumentClickWhileHostShown(event) {
203
+ const clickedOnHost = this.elementRef.nativeElement.contains(event.target);
204
+ if (clickedOnHost) {
205
+ this.handleClickInsideHostElement();
206
+ }
207
+ else {
208
+ this.handleClickOutsideHostElement(event);
209
+ }
210
+ }
176
211
  addFloatStylingToHostElement() {
177
212
  this.renderer.setStyle(this.elementRef.nativeElement, 'left', `0px`);
178
213
  this.renderer.setStyle(this.elementRef.nativeElement, 'top', `0px`);
179
214
  this.renderer.setStyle(this.elementRef.nativeElement, 'position', this.strategy);
180
215
  this.renderer.setStyle(this.elementRef.nativeElement, 'z-index', DesignTokenHelper.zLayer('popover'));
216
+ this.setDisplayStyling();
217
+ }
218
+ setDisplayStyling() {
219
+ this.renderer.setStyle(this.elementRef.nativeElement, 'display', this.isShown ? `block` : `none`);
181
220
  }
182
221
  updateHostElementPosition() {
183
222
  var _a;
@@ -213,7 +252,7 @@ class FloatingDirective {
213
252
  setPositionStylingOnHostElement(xPosition, yPosition) {
214
253
  this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${xPosition}px`);
215
254
  this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${yPosition}px`);
216
- this.renderer.setStyle(this.elementRef.nativeElement, 'display', this.isShown ? `block` : `none`);
255
+ this.setDisplayStyling();
217
256
  }
218
257
  setupEventHandling() {
219
258
  if (!this.reference || !this.triggers) {
@@ -221,6 +260,12 @@ class FloatingDirective {
221
260
  }
222
261
  this.triggers.forEach((trigger) => this.attachTriggerEventToReferenceElement(trigger));
223
262
  }
263
+ attachDocumentClickEvent() {
264
+ if (this.documentClickEventListenerDisposeFn) {
265
+ return;
266
+ }
267
+ this.documentClickEventListenerDisposeFn = this.renderer.listen('document', 'mousedown', (event) => this.onDocumentClickWhileHostShown(event));
268
+ }
224
269
  attachTriggerEventToReferenceElement(trigger) {
225
270
  const events = this.triggerEventMap.get(trigger);
226
271
  if (!events) {
@@ -229,7 +274,7 @@ class FloatingDirective {
229
274
  events.forEach((event) => {
230
275
  var _a;
231
276
  const eventListenerDisposeFn = this.renderer.listen((_a = this.reference) === null || _a === void 0 ? void 0 : _a.nativeElement, event.event, event.method);
232
- this.eventListenerDisposeFns.push(eventListenerDisposeFn);
277
+ this.referenceEventListenerDisposeFns.push(eventListenerDisposeFn);
233
278
  });
234
279
  }
235
280
  handleClickInsideHostElement() {
@@ -244,13 +289,36 @@ class FloatingDirective {
244
289
  this.hide();
245
290
  }
246
291
  }
247
- tearDownEventHandling() {
248
- this.eventListenerDisposeFns.forEach((eventListenerDisposeFunction) => {
292
+ getOutletElement(config) {
293
+ if (!config || !config.selector || !config.value) {
294
+ return null;
295
+ }
296
+ const elements = this.getHTMLElements(config);
297
+ if (!elements || elements.length === 0) {
298
+ throw Error(`Could not locate HTMLElement for ${config.selector}. Did you misspell it?`);
299
+ }
300
+ if (elements.length > 1) {
301
+ throw Error(`Multiple HTMLElements found for ${config.selector}.
302
+ This can lead to unintended behaviours. Provide an unique outlet`);
303
+ }
304
+ return elements[0];
305
+ }
306
+ getHTMLElements(config) {
307
+ return (this.HTMLElements[config.selector](config.value) || this.HTMLElements['default'](config.value));
308
+ }
309
+ tearDownReferenceElementEventHandling() {
310
+ this.referenceEventListenerDisposeFns.forEach((eventListenerDisposeFunction) => {
249
311
  if (eventListenerDisposeFunction != null) {
250
312
  eventListenerDisposeFunction();
251
313
  }
252
314
  });
253
- this.eventListenerDisposeFns = [];
315
+ this.referenceEventListenerDisposeFns = [];
316
+ }
317
+ tearDownDocumentClickEventHandling() {
318
+ if (this.documentClickEventListenerDisposeFn) {
319
+ this.documentClickEventListenerDisposeFn();
320
+ this.documentClickEventListenerDisposeFn = null;
321
+ }
254
322
  }
255
323
  removeAutoUpdaterRef() {
256
324
  if (this.autoUpdaterRef) {
@@ -258,12 +326,13 @@ class FloatingDirective {
258
326
  }
259
327
  }
260
328
  ngOnDestroy() {
261
- this.tearDownEventHandling();
329
+ this.tearDownDocumentClickEventHandling();
330
+ this.tearDownReferenceElementEventHandling();
262
331
  this.removeAutoUpdaterRef();
263
332
  }
264
333
  }
265
334
  /** @nocollapse */ FloatingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FloatingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.PortalDirective }], target: i0.ɵɵFactoryTarget.Directive });
266
- /** @nocollapse */ FloatingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FloatingDirective, isStandalone: true, selector: "[kirbyFloating]", inputs: { reference: "reference", placement: "placement", strategy: "strategy", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", isDisabled: "isDisabled", offset: "offset", shift: "shift", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop" }, outputs: { displayChanged: "displayChanged" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyPressed($event)", "document:mousedown": "onMouseClick($event)" } }, providers: [PortalDirective], hostDirectives: [{ directive: i1.PortalDirective }], ngImport: i0 });
335
+ /** @nocollapse */ FloatingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FloatingDirective, isStandalone: true, selector: "[kirbyFloating]", inputs: { reference: "reference", placement: "placement", strategy: "strategy", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", isDisabled: "isDisabled", offset: "offset", shift: "shift", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop" }, outputs: { displayChanged: "displayChanged" }, host: { listeners: { "document:keydown.escape": "onEscapeKeyPressed($event)" } }, providers: [PortalDirective], hostDirectives: [{ directive: i1.PortalDirective }], ngImport: i0 });
267
336
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FloatingDirective, decorators: [{
268
337
  type: Directive,
269
338
  args: [{
@@ -282,6 +351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
282
351
  type: Input
283
352
  }], DOMPortalOutlet: [{
284
353
  type: Input
354
+ }], portalOutletConfig: [{
355
+ type: Input
285
356
  }], isDisabled: [{
286
357
  type: Input
287
358
  }], offset: [{
@@ -301,15 +372,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
301
372
  }], onEscapeKeyPressed: [{
302
373
  type: HostListener,
303
374
  args: ['document:keydown.escape', ['$event']]
304
- }], onMouseClick: [{
305
- type: HostListener,
306
- args: ['document:mousedown', ['$event']]
307
375
  }] } });
308
376
 
309
377
  /**
310
378
  * Generated bundle index. Do not edit.
311
379
  */
312
380
 
313
- export { FloatingDirective };
314
- //# sourceMappingURL=kirbydesign-designsystem-shared-floating.mjs.map
381
+ export { FloatingDirective, FloatingOffset, OutletSelector };
315
382
  //# sourceMappingURL=kirbydesign-designsystem-shared-floating.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"kirbydesign-designsystem-shared-floating.mjs","sources":["../../../../libs/designsystem/shared/floating/src/floating.directive.ts","../../../../libs/designsystem/shared/floating/src/kirbydesign-designsystem-shared-floating.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnDestroy,\n OnInit,\n Output,\n Renderer2,\n} from '@angular/core';\nimport {\n autoPlacement,\n autoUpdate,\n computePosition,\n offset,\n shift,\n Strategy,\n} from '@floating-ui/dom';\nimport { ComputePositionConfig, Middleware, Placement } from '@floating-ui/core/src/types';\nimport { DesignTokenHelper } from '@kirbydesign/core';\nimport { from } from 'rxjs';\nimport { PortalDirective } from '@kirbydesign/designsystem/shared/portal';\n\nexport type TriggerEvent = 'hover' | 'click' | 'focus';\n\nexport enum FloatingOffset {\n none = 0,\n small = 4,\n medium = 8,\n}\n\ninterface EventMethods {\n event: string;\n method: () => void;\n}\n\ntype EventListenerDisposeFn = () => void;\n\n/**\n * @summary FloatingDirective is a utility that lets you declarative anchor \"popup\" containers to another element.\n *\n * Uses floating-ui, with this directive wraps the functionality: https://floating-ui.com/docs/getting-started\n *\n * Uses PortalDirective to enable functionality for portaling the floated content. This should be used when needed\n * and not as the default option.\n */\n@Directive({\n selector: '[kirbyFloating]',\n providers: [PortalDirective],\n hostDirectives: [PortalDirective],\n standalone: true,\n})\nexport class FloatingDirective implements OnInit, OnDestroy {\n /**\n * Reference to the element for which the host should anchor to\n * */\n @Input() public set reference(ref: ElementRef) {\n this.tearDownEventHandling();\n this._reference = ref;\n this.setupEventHandling();\n this.autoUpdatePosition();\n }\n\n public get reference(): ElementRef | undefined {\n return this._reference;\n }\n\n /**\n * How the host should be placed relative to the reference. Can be affected by middleware\n * */\n @Input() public set placement(placement: Placement) {\n this._placement = placement;\n this.updateHostElementPosition();\n }\n\n public get placement() {\n return this._placement;\n }\n\n /**\n * The strategy for how the host should be positioned.\n * */\n @Input() public set strategy(strategy: Strategy) {\n this._strategy = strategy;\n this.updateHostElementPosition();\n }\n\n public get strategy(): Strategy {\n return this._strategy;\n }\n\n /**\n * Defines when the host should be displayed/hidden, i.e. click will attach a click listener to the reference\n * that makes the host toggle display. Supports multiple triggers, to provide functionality for combinations\n * like click/focus.\n * */\n @Input() public set triggers(eventTriggers: Array<TriggerEvent>) {\n this._triggers = eventTriggers;\n this.tearDownEventHandling();\n this.setupEventHandling();\n }\n\n public get triggers(): Array<TriggerEvent> {\n return this._triggers;\n }\n\n /**\n * The HTMLElement for which the content should portal into.\n * Providing an outlet enables the portal, if nothing is provided, the provided strategy is used.\n * This should be used when there's issues with the stacking context, and not as a default option.\n * */\n @Input() public set DOMPortalOutlet(outlet: HTMLElement | undefined) {\n this.portalDirective.outlet = outlet;\n }\n\n /**\n * Prevent host from being toggled if set.\n * */\n @Input() public isDisabled: boolean = false;\n\n /**\n * Displaces the floating element from its core placement along the specified axes.\n * */\n @Input() public offset: FloatingOffset = FloatingOffset.none;\n\n /**\n * Moves the floating element along the specified axes in order to keep it in view.\n * This does not always work as expected, so don't \"just\" set it.\n * */\n @Input() public shift: boolean = false;\n\n /**\n * Chooses the placement that has the most space available automatically.\n * */\n @Input() public autoPlacement: boolean = false;\n\n /**\n * Enables hiding the host by events. See variable names.\n * */\n @Input() public closeOnSelect: boolean = true;\n @Input() public closeOnEscapeKey: boolean = true;\n @Input() public closeOnBackdrop: boolean = true;\n\n /**\n * Enables the option to be notified when the host changes display. The new display value is provided.\n * */\n @Output() public displayChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @HostListener('document:keydown.escape', ['$event'])\n public onEscapeKeyPressed(): void {\n if (this.closeOnEscapeKey) {\n this.hide();\n }\n }\n\n @HostListener('document:mousedown', ['$event'])\n public onMouseClick(event: Event): void {\n const clickedOnHost: boolean = this.elementRef.nativeElement.contains(event.target);\n if (clickedOnHost) {\n this.handleClickInsideHostElement();\n } else {\n this.handleClickOutsideHostElement(event);\n }\n }\n\n private _placement: Placement = 'bottom-start';\n\n private _strategy: Strategy = 'absolute';\n\n private _triggers: Array<TriggerEvent> = ['click'];\n\n private _reference: ElementRef | undefined;\n\n private autoUpdaterRef: () => void;\n private isShown: boolean = false;\n private eventListenerDisposeFns: EventListenerDisposeFn[] = [];\n private triggerEventMap: Map<TriggerEvent, EventMethods[]> = new Map([\n ['click', [{ event: 'click', method: this.toggleShow.bind(this) }]],\n [\n 'hover',\n [\n { event: 'mouseenter', method: this.show.bind(this) },\n { event: 'mouseleave', method: this.hide.bind(this) },\n ],\n ],\n [\n 'focus',\n [\n { event: 'focus', method: this.show.bind(this) },\n { event: 'blur', method: this.hide.bind(this) },\n ],\n ],\n ]);\n\n public constructor(\n private elementRef: ElementRef,\n private renderer: Renderer2,\n private portalDirective: PortalDirective\n ) {}\n\n public ngOnInit(): void {\n this.addFloatStylingToHostElement();\n this.updateHostElementPosition();\n }\n\n /* Should be accessible for programmatically setting display */\n public show(): void {\n if (this.isDisabled) {\n return;\n }\n\n this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'block');\n this.isShown = true;\n this.displayChanged.emit(this.isShown);\n }\n\n /* Should be accessible for programmatically setting display */\n public hide(): void {\n if (this.isDisabled) {\n return;\n }\n\n this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');\n this.isShown = false;\n this.displayChanged.emit(this.isShown);\n }\n\n /* Should be accessible for programmatically setting display */\n public toggleShow(): void {\n if (this.isShown) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n private addFloatStylingToHostElement(): void {\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', `0px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', `0px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'position', this.strategy);\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'z-index',\n DesignTokenHelper.zLayer('popover')\n );\n }\n\n private updateHostElementPosition(): void {\n if (!this.reference) {\n return;\n }\n\n const config: ComputePositionConfig = {\n placement: this.placement,\n middleware: this.getMiddlewareConfig(),\n strategy: this.strategy,\n } as ComputePositionConfig;\n\n from(\n computePosition(this.reference?.nativeElement, this.elementRef.nativeElement, config)\n ).subscribe(({ x, y }) => this.setPositionStylingOnHostElement(x, y));\n }\n\n private getMiddlewareConfig(): Array<Middleware | null | undefined | false> {\n const middleware: Array<Middleware | null | undefined | false> = [];\n middleware.push(offset(this.offset));\n\n if (this.shift) {\n middleware.push(shift());\n }\n\n if (this.autoPlacement) {\n middleware.push(autoPlacement());\n }\n\n return middleware;\n }\n\n private autoUpdatePosition(): void {\n this.removeAutoUpdaterRef();\n\n if (!this.reference) {\n return;\n }\n\n this.autoUpdaterRef = autoUpdate(\n this.reference?.nativeElement,\n this.elementRef.nativeElement,\n this.updateHostElementPosition.bind(this)\n );\n }\n\n private setPositionStylingOnHostElement(xPosition: number, yPosition: number): void {\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${xPosition}px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${yPosition}px`);\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'display',\n this.isShown ? `block` : `none`\n );\n }\n\n private setupEventHandling(): void {\n if (!this.reference || !this.triggers) {\n return;\n }\n\n this.triggers.forEach((trigger: TriggerEvent) =>\n this.attachTriggerEventToReferenceElement(trigger)\n );\n }\n\n private attachTriggerEventToReferenceElement(trigger: TriggerEvent): void {\n const events: EventMethods[] | undefined = this.triggerEventMap.get(trigger);\n\n if (!events) {\n throw new Error(`${trigger} is missing event definition(s)`);\n }\n\n events.forEach((event: EventMethods) => {\n const eventListenerDisposeFn: EventListenerDisposeFn = this.renderer.listen(\n this.reference?.nativeElement,\n event.event,\n event.method\n );\n this.eventListenerDisposeFns.push(eventListenerDisposeFn);\n });\n }\n\n private handleClickInsideHostElement(): void {\n if (this.closeOnSelect) {\n this.hide();\n }\n }\n\n private handleClickOutsideHostElement(event: Event): void {\n const clickedOnReferenceWithClickTriggerEnabled: boolean =\n this.reference?.nativeElement.contains(event.target) && this.triggers.includes('click');\n\n if (this.closeOnBackdrop && !clickedOnReferenceWithClickTriggerEnabled) {\n this.hide();\n }\n }\n\n private tearDownEventHandling(): void {\n this.eventListenerDisposeFns.forEach((eventListenerDisposeFunction: EventListenerDisposeFn) => {\n if (eventListenerDisposeFunction != null) {\n eventListenerDisposeFunction();\n }\n });\n this.eventListenerDisposeFns = [];\n }\n\n private removeAutoUpdaterRef(): void {\n if (this.autoUpdaterRef) {\n this.autoUpdaterRef();\n }\n }\n\n public ngOnDestroy() {\n this.tearDownEventHandling();\n this.removeAutoUpdaterRef();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"kirbydesign-designsystem-shared-floating.mjs","sources":["../../../../libs/designsystem/shared/floating/src/floating.directive.ts","../../../../libs/designsystem/shared/floating/src/kirbydesign-designsystem-shared-floating.ts"],"sourcesContent":["import {\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnDestroy,\n OnInit,\n Output,\n Renderer2,\n} from '@angular/core';\nimport {\n autoPlacement,\n autoUpdate,\n computePosition,\n offset,\n shift,\n Strategy,\n} from '@floating-ui/dom';\nimport { ComputePositionConfig, Middleware, Placement } from '@floating-ui/core/src/types';\nimport { DesignTokenHelper } from '@kirbydesign/core';\nimport { from } from 'rxjs';\nimport { PortalDirective } from '@kirbydesign/designsystem/shared/portal';\n\nexport type TriggerEvent = 'hover' | 'click' | 'focus';\n\nexport enum FloatingOffset {\n none = 0,\n small = 4,\n medium = 8,\n}\n\nexport enum OutletSelector {\n tag = 'tag',\n id = 'id',\n class = 'class',\n name = 'name',\n}\n\nexport interface PortalOutletConfig {\n selector: OutletSelector;\n value: string;\n}\n\ninterface EventMethods {\n event: string;\n method: () => void;\n}\n\ntype EventListenerDisposeFn = () => void;\n\n/**\n * @summary FloatingDirective is a utility that lets you declarative anchor \"popup\" containers to another element.\n *\n * Uses floating-ui, with this directive wraps the functionality: https://floating-ui.com/docs/getting-started\n *\n * Uses PortalDirective to enable functionality for portaling the floated content. This should be used when needed\n * and not as the default option.\n */\n@Directive({\n selector: '[kirbyFloating]',\n providers: [PortalDirective],\n hostDirectives: [PortalDirective],\n standalone: true,\n})\nexport class FloatingDirective implements OnInit, OnDestroy {\n /**\n * Reference to the element for which the host should anchor to\n * */\n @Input() public set reference(ref: ElementRef) {\n this.tearDownReferenceElementEventHandling();\n this._reference = ref;\n this.setupEventHandling();\n this.autoUpdatePosition();\n }\n\n public get reference(): ElementRef | undefined {\n return this._reference;\n }\n\n /**\n * How the host should be placed relative to the reference. Can be affected by middleware\n * */\n @Input() public set placement(placement: Placement) {\n this._placement = placement;\n this.updateHostElementPosition();\n }\n\n public get placement() {\n return this._placement;\n }\n\n /**\n * The strategy for how the host should be positioned.\n * */\n @Input() public set strategy(strategy: Strategy) {\n this._strategy = strategy;\n this.updateHostElementPosition();\n }\n\n public get strategy(): Strategy {\n return this._strategy;\n }\n\n /**\n * Defines when the host should be displayed/hidden, i.e. click will attach a click listener to the reference\n * that makes the host toggle display. Supports multiple triggers, to provide functionality for combinations\n * like click/focus.\n * */\n @Input() public set triggers(eventTriggers: Array<TriggerEvent>) {\n this._triggers = eventTriggers;\n this.tearDownReferenceElementEventHandling();\n this.setupEventHandling();\n }\n\n public get triggers(): Array<TriggerEvent> {\n return this._triggers;\n }\n\n /**\n * The HTMLElement for which the content should portal into.\n * Providing an outlet enables the portal, if nothing is provided, the provided strategy is used.\n * This should be used when there's issues with the stacking context, and not as a default option.\n * */\n @Input() public set DOMPortalOutlet(outlet: HTMLElement | undefined) {\n this._providedPortalOutlet = outlet;\n this.portalDirective.outlet =\n this.DOMPortalOutlet ?? this.getOutletElement(this.portalOutletConfig);\n }\n\n public get DOMPortalOutlet(): HTMLElement | undefined {\n return this._providedPortalOutlet;\n }\n\n /**\n * Defines how to automatically find and assign DOMPortalOutlet if none is provided in DOMPortalOutlet.\n * If nothing is provided here and in DOMPortalOutlet, the provided strategy is used\n * */\n @Input() public set portalOutletConfig(config: PortalOutletConfig | undefined) {\n this._portalOutletConfig = config;\n\n if (!this.DOMPortalOutlet) {\n this.portalDirective.outlet = this.getOutletElement(config);\n }\n }\n\n public get portalOutletConfig(): PortalOutletConfig | undefined {\n return this._portalOutletConfig;\n }\n\n /**\n * Prevent host from being toggled if set.\n * */\n @Input() public isDisabled: boolean = false;\n\n /**\n * Displaces the floating element from its core placement along the specified axes.\n * */\n @Input() public offset: FloatingOffset = FloatingOffset.none;\n\n /**\n * Moves the floating element along the specified axes in order to keep it in view.\n * This does not always work as expected, so don't \"just\" set it.\n * */\n @Input() public shift: boolean = false;\n\n /**\n * Chooses the placement that has the most space available automatically.\n * */\n @Input() public autoPlacement: boolean = false;\n\n /**\n * Enables hiding the host by events. See variable names.\n * */\n @Input() public closeOnSelect: boolean = true;\n @Input() public closeOnEscapeKey: boolean = true;\n @Input() public closeOnBackdrop: boolean = true;\n\n /**\n * Enables the option to be notified when the host changes display. The new display value is provided.\n * */\n @Output() public displayChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n @HostListener('document:keydown.escape', ['$event'])\n public onEscapeKeyPressed(): void {\n if (this.closeOnEscapeKey) {\n this.hide();\n }\n }\n\n private _placement: Placement = 'bottom-start';\n\n private _strategy: Strategy = 'absolute';\n\n private _providedPortalOutlet: HTMLElement | undefined;\n\n private _portalOutletConfig: PortalOutletConfig | undefined;\n\n private _triggers: Array<TriggerEvent> = ['click'];\n\n private _reference: ElementRef | undefined;\n\n private autoUpdaterRef: () => void;\n private isShown: boolean = false;\n private referenceEventListenerDisposeFns: EventListenerDisposeFn[] = [];\n private documentClickEventListenerDisposeFn: EventListenerDisposeFn;\n private triggerEventMap: Map<TriggerEvent, EventMethods[]> = new Map([\n ['click', [{ event: 'click', method: this.toggleShow.bind(this) }]],\n [\n 'hover',\n [\n { event: 'mouseenter', method: this.show.bind(this) },\n { event: 'mouseleave', method: this.hide.bind(this) },\n ],\n ],\n [\n 'focus',\n [\n { event: 'focus', method: this.show.bind(this) },\n { event: 'blur', method: this.hide.bind(this) },\n ],\n ],\n ]);\n\n private HTMLElements: {\n [key in OutletSelector | 'default']: (value?: string) => Array<Element> | null;\n } = {\n id: (value) => Array.of(document.getElementById(value)),\n class: (value) => Array.from(document.getElementsByClassName(value)),\n name: (value) => Array.from(document.getElementsByName(value)),\n tag: (value) => Array.from(document.getElementsByTagName(value)),\n default: () => null,\n };\n\n public constructor(\n private elementRef: ElementRef,\n private renderer: Renderer2,\n private portalDirective: PortalDirective\n ) {}\n\n public ngOnInit(): void {\n this.addFloatStylingToHostElement();\n this.updateHostElementPosition();\n }\n\n /* Should be accessible for programmatically setting display */\n public show(): void {\n if (this.isDisabled) {\n return;\n }\n\n this.attachDocumentClickEvent();\n this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'block');\n this.isShown = true;\n this.displayChanged.emit(this.isShown);\n }\n\n /* Should be accessible for programmatically setting display */\n public hide(): void {\n if (this.isDisabled) {\n return;\n }\n\n this.tearDownDocumentClickEventHandling();\n this.renderer.setStyle(this.elementRef.nativeElement, 'display', 'none');\n this.isShown = false;\n this.displayChanged.emit(this.isShown);\n }\n\n /* Should be accessible for programmatically setting display */\n public toggleShow(): void {\n if (this.isShown) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n private onDocumentClickWhileHostShown(event: Event): void {\n const clickedOnHost: boolean = this.elementRef.nativeElement.contains(event.target);\n if (clickedOnHost) {\n this.handleClickInsideHostElement();\n } else {\n this.handleClickOutsideHostElement(event);\n }\n }\n\n private addFloatStylingToHostElement(): void {\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', `0px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', `0px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'position', this.strategy);\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'z-index',\n DesignTokenHelper.zLayer('popover')\n );\n this.setDisplayStyling();\n }\n\n private setDisplayStyling(): void {\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'display',\n this.isShown ? `block` : `none`\n );\n }\n\n private updateHostElementPosition(): void {\n if (!this.reference) {\n return;\n }\n\n const config: ComputePositionConfig = {\n placement: this.placement,\n middleware: this.getMiddlewareConfig(),\n strategy: this.strategy,\n } as ComputePositionConfig;\n\n from(\n computePosition(this.reference?.nativeElement, this.elementRef.nativeElement, config)\n ).subscribe(({ x, y }) => this.setPositionStylingOnHostElement(x, y));\n }\n\n private getMiddlewareConfig(): Array<Middleware | null | undefined | false> {\n const middleware: Array<Middleware | null | undefined | false> = [];\n middleware.push(offset(this.offset));\n\n if (this.shift) {\n middleware.push(shift());\n }\n\n if (this.autoPlacement) {\n middleware.push(autoPlacement());\n }\n\n return middleware;\n }\n\n private autoUpdatePosition(): void {\n this.removeAutoUpdaterRef();\n\n if (!this.reference) {\n return;\n }\n\n this.autoUpdaterRef = autoUpdate(\n this.reference?.nativeElement,\n this.elementRef.nativeElement,\n this.updateHostElementPosition.bind(this)\n );\n }\n\n private setPositionStylingOnHostElement(xPosition: number, yPosition: number): void {\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${xPosition}px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${yPosition}px`);\n this.setDisplayStyling();\n }\n\n private setupEventHandling(): void {\n if (!this.reference || !this.triggers) {\n return;\n }\n\n this.triggers.forEach((trigger: TriggerEvent) =>\n this.attachTriggerEventToReferenceElement(trigger)\n );\n }\n\n private attachDocumentClickEvent(): void {\n if (this.documentClickEventListenerDisposeFn) {\n return;\n }\n\n this.documentClickEventListenerDisposeFn = this.renderer.listen(\n 'document',\n 'mousedown',\n (event) => this.onDocumentClickWhileHostShown(event)\n );\n }\n\n private attachTriggerEventToReferenceElement(trigger: TriggerEvent): void {\n const events: EventMethods[] | undefined = this.triggerEventMap.get(trigger);\n\n if (!events) {\n throw new Error(`${trigger} is missing event definition(s)`);\n }\n\n events.forEach((event: EventMethods) => {\n const eventListenerDisposeFn: EventListenerDisposeFn = this.renderer.listen(\n this.reference?.nativeElement,\n event.event,\n event.method\n );\n this.referenceEventListenerDisposeFns.push(eventListenerDisposeFn);\n });\n }\n\n private handleClickInsideHostElement(): void {\n if (this.closeOnSelect) {\n this.hide();\n }\n }\n\n private handleClickOutsideHostElement(event: Event): void {\n const clickedOnReferenceWithClickTriggerEnabled: boolean =\n this.reference?.nativeElement.contains(event.target) && this.triggers.includes('click');\n\n if (this.closeOnBackdrop && !clickedOnReferenceWithClickTriggerEnabled) {\n this.hide();\n }\n }\n\n private getOutletElement(config: PortalOutletConfig | undefined): HTMLElement | null {\n if (!config || !config.selector || !config.value) {\n return null;\n }\n\n const elements: Array<Element> | null = this.getHTMLElements(config);\n\n if (!elements || elements.length === 0) {\n throw Error(`Could not locate HTMLElement for ${config.selector}. Did you misspell it?`);\n }\n\n if (elements.length > 1) {\n throw Error(\n `Multiple HTMLElements found for ${config.selector}.\n This can lead to unintended behaviours. Provide an unique outlet`\n );\n }\n\n return elements[0] as HTMLElement;\n }\n\n private getHTMLElements(config: PortalOutletConfig | undefined): Array<Element> | null {\n return (\n this.HTMLElements[config.selector](config.value) || this.HTMLElements['default'](config.value)\n );\n }\n\n private tearDownReferenceElementEventHandling(): void {\n this.referenceEventListenerDisposeFns.forEach(\n (eventListenerDisposeFunction: EventListenerDisposeFn) => {\n if (eventListenerDisposeFunction != null) {\n eventListenerDisposeFunction();\n }\n }\n );\n this.referenceEventListenerDisposeFns = [];\n }\n\n private tearDownDocumentClickEventHandling(): void {\n if (this.documentClickEventListenerDisposeFn) {\n this.documentClickEventListenerDisposeFn();\n this.documentClickEventListenerDisposeFn = null;\n }\n }\n\n private removeAutoUpdaterRef(): void {\n if (this.autoUpdaterRef) {\n this.autoUpdaterRef();\n }\n }\n\n public ngOnDestroy() {\n this.tearDownDocumentClickEventHandling();\n this.tearDownReferenceElementEventHandling();\n this.removeAutoUpdaterRef();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
@@ -83,4 +83,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
83
83
 
84
84
  export { PortalDirective };
85
85
  //# sourceMappingURL=kirbydesign-designsystem-shared-portal.mjs.map
86
- //# sourceMappingURL=kirbydesign-designsystem-shared-portal.mjs.map
@@ -329,4 +329,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
329
329
 
330
330
  export { ComponentLoaderDirective, FitHeadingDirective, ResizeObserverFactory, ResizeObserverService, ThemeColorDirective };
331
331
  //# sourceMappingURL=kirbydesign-designsystem-shared.mjs.map
332
- //# sourceMappingURL=kirbydesign-designsystem-shared.mjs.map
@@ -79,4 +79,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
79
79
 
80
80
  export { SlideButtonComponent };
81
81
  //# sourceMappingURL=kirbydesign-designsystem-slide-button.mjs.map
82
- //# sourceMappingURL=kirbydesign-designsystem-slide-button.mjs.map
@@ -102,4 +102,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
102
102
 
103
103
  export { SlideDirective, SlideModule, SlidesComponent };
104
104
  //# sourceMappingURL=kirbydesign-designsystem-slide.mjs.map
105
- //# sourceMappingURL=kirbydesign-designsystem-slide.mjs.map
@@ -32,4 +32,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
32
32
 
33
33
  export { SpinnerComponent, SpinnerModule };
34
34
  //# sourceMappingURL=kirbydesign-designsystem-spinner.mjs.map
35
- //# sourceMappingURL=kirbydesign-designsystem-spinner.mjs.map
@@ -0,0 +1,156 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Component, ChangeDetectionStrategy, Input, EventEmitter, ElementRef, ViewChild, ContentChildren, Output, HostListener, NgModule } from '@angular/core';
3
+ import * as i1 from '@kirbydesign/designsystem/types';
4
+ import * as i2 from '@kirbydesign/designsystem/dropdown';
5
+ import { CommonModule } from '@angular/common';
6
+
7
+ class TabNavigationItemComponent {
8
+ constructor() {
9
+ this.label = '';
10
+ /* */
11
+ }
12
+ }
13
+ /** @nocollapse */ TabNavigationItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
14
+ /** @nocollapse */ TabNavigationItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabNavigationItemComponent, selector: "kirby-tab-navigation-item", inputs: { label: "label" }, ngImport: i0, template: "<button role=\"tab\" #tabButton>\n <span attr.data-text=\"{{ label }}\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;background-color:var(--kirby-background-color);color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text]{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
15
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
16
+ type: Component,
17
+ args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button role=\"tab\" #tabButton>\n <span attr.data-text=\"{{ label }}\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;background-color:var(--kirby-background-color);color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text]{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"] }]
18
+ }], ctorParameters: function () { return []; }, propDecorators: { label: [{
19
+ type: Input
20
+ }] } });
21
+
22
+ class TabNavigationComponent {
23
+ constructor(window, keyboardHandlerService) {
24
+ this.window = window;
25
+ this.keyboardHandlerService = keyboardHandlerService;
26
+ this.DEBOUNCE_TIME_MS = 250;
27
+ this.tabElements = new Array();
28
+ this.tabButtonElements = new Array();
29
+ this._selectedIndex = -1;
30
+ this._focusIndex = -1;
31
+ this.selectedIndexChange = new EventEmitter();
32
+ /**/
33
+ }
34
+ get selectedIndex() {
35
+ return this._selectedIndex;
36
+ }
37
+ set selectedIndex(index) {
38
+ if (index !== this._selectedIndex) {
39
+ this._selectedIndex = index;
40
+ this.focusIndex = index;
41
+ this.selectTab(this.selectedIndex);
42
+ this.selectedIndexChange.emit(this.selectedIndex);
43
+ }
44
+ }
45
+ get focusIndex() {
46
+ return this._focusIndex;
47
+ }
48
+ set focusIndex(index) {
49
+ if (index !== this._focusIndex) {
50
+ this._focusIndex = index;
51
+ this.scrollToTab(this.focusIndex);
52
+ this.focusTab(this.focusIndex);
53
+ }
54
+ }
55
+ ngAfterViewInit() {
56
+ this.tabBarElement = this.tabBar.nativeElement;
57
+ this.tabs.forEach((tab) => this.tabElements.push(tab.nativeElement));
58
+ this.tabElements.forEach((tabElement) => this.tabButtonElements.push(tabElement.querySelector('[role="tab"]')));
59
+ setTimeout(() => {
60
+ this.selectTab(this.selectedIndex);
61
+ this.scrollToTab(this.focusIndex);
62
+ this.focusTab(this.focusIndex);
63
+ }, this.DEBOUNCE_TIME_MS);
64
+ }
65
+ onItemSelect(event) {
66
+ const targetTabNavItem = event.target.closest('button');
67
+ this.selectedIndex = this.tabButtonElements.indexOf(targetTabNavItem);
68
+ }
69
+ onKeydown(event) {
70
+ event.preventDefault();
71
+ this.focusIndex = this.keyboardHandlerService.handle(event, this.focusIndex, this.tabElements.length - 1, true);
72
+ }
73
+ selectTab(tabIndex) {
74
+ this.tabButtonElements.forEach((tabButtonElement, index) => {
75
+ tabButtonElement.setAttribute('aria-selected', index === tabIndex ? 'true' : 'false');
76
+ });
77
+ }
78
+ focusTab(focusIndex) {
79
+ this.tabButtonElements.forEach((tabButtonElement, index) => {
80
+ tabButtonElement.setAttribute('tabindex', index === focusIndex ? '0' : '-1');
81
+ });
82
+ if (0 <= focusIndex && focusIndex < this.tabButtonElements.length) {
83
+ this.tabButtonElements[focusIndex].focus();
84
+ }
85
+ }
86
+ scrollToTab(tabIndex) {
87
+ if (0 <= tabIndex && tabIndex < this.tabElements.length) {
88
+ const selectedTabElement = this.tabElements[tabIndex];
89
+ const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;
90
+ const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;
91
+ const tabBarElementWidth = this.tabBarElement.getBoundingClientRect().width;
92
+ this.window.nativeWindow.requestAnimationFrame(() => {
93
+ var _a;
94
+ (_a = this.tabBarElement) === null || _a === void 0 ? void 0 : _a.scrollTo({
95
+ behavior: 'smooth',
96
+ left: Math.max(0, selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2),
97
+ });
98
+ });
99
+ }
100
+ }
101
+ }
102
+ /** @nocollapse */ TabNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component });
103
+ /** @nocollapse */ TabNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TabNavigationComponent, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\n <div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["div[role=tablist]{position:relative;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}@media (max-width: 720px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}div[role=tablist]::-webkit-scrollbar{display:none}.container{position:relative;background-color:var(--kirby-background-color);max-width:var(--page-content-max-width, 720px)}@media (max-width: 720px){.container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}.container:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){.container:before{left:calc(-1 * var(--padding-start, 16px));width:calc(100% + var(--padding-start, 16px) * 2)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
104
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationComponent, decorators: [{
105
+ type: Component,
106
+ args: [{ selector: 'kirby-tab-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n <div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["div[role=tablist]{position:relative;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}@media (max-width: 720px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}div[role=tablist]::-webkit-scrollbar{display:none}.container{position:relative;background-color:var(--kirby-background-color);max-width:var(--page-content-max-width, 720px)}@media (max-width: 720px){.container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}.container:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){.container:before{left:calc(-1 * var(--padding-start, 16px));width:calc(100% + var(--padding-start, 16px) * 2)}}\n"] }]
107
+ }], ctorParameters: function () { return [{ type: i1.WindowRef }, { type: i2.KeyboardHandlerService }]; }, propDecorators: { tabBar: [{
108
+ type: ViewChild,
109
+ args: ['tabBar']
110
+ }], tabs: [{
111
+ type: ContentChildren,
112
+ args: [TabNavigationItemComponent, { read: ElementRef }]
113
+ }], selectedIndex: [{
114
+ type: Input
115
+ }], selectedIndexChange: [{
116
+ type: Output
117
+ }], onItemSelect: [{
118
+ type: HostListener,
119
+ args: ['click', ['$event']]
120
+ }, {
121
+ type: HostListener,
122
+ args: ['keydown.enter', ['$event']]
123
+ }], onKeydown: [{
124
+ type: HostListener,
125
+ args: ['keydown.home', ['$event']]
126
+ }, {
127
+ type: HostListener,
128
+ args: ['keydown.end', ['$event']]
129
+ }, {
130
+ type: HostListener,
131
+ args: ['keydown.arrowright', ['$event']]
132
+ }, {
133
+ type: HostListener,
134
+ args: ['keydown.arrowleft', ['$event']]
135
+ }] } });
136
+
137
+ class TabNavigationModule {
138
+ }
139
+ /** @nocollapse */ TabNavigationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
140
+ /** @nocollapse */ TabNavigationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationModule, declarations: [TabNavigationComponent, TabNavigationItemComponent], imports: [CommonModule], exports: [TabNavigationComponent, TabNavigationItemComponent] });
141
+ /** @nocollapse */ TabNavigationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] });
142
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TabNavigationModule, decorators: [{
143
+ type: NgModule,
144
+ args: [{
145
+ imports: [CommonModule],
146
+ declarations: [TabNavigationComponent, TabNavigationItemComponent],
147
+ exports: [TabNavigationComponent, TabNavigationItemComponent],
148
+ }]
149
+ }] });
150
+
151
+ /**
152
+ * Generated bundle index. Do not edit.
153
+ */
154
+
155
+ export { TabNavigationComponent, TabNavigationItemComponent, TabNavigationModule };
156
+ //# sourceMappingURL=kirbydesign-designsystem-tab-navigation.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kirbydesign-designsystem-tab-navigation.mjs","sources":["../../../../libs/designsystem/tab-navigation/src/tab-navigation-item/tab-navigation-item.component.ts","../../../../libs/designsystem/tab-navigation/src/tab-navigation-item/tab-navigation-item.component.html","../../../../libs/designsystem/tab-navigation/src/tab-navigation/tab-navigation.component.ts","../../../../libs/designsystem/tab-navigation/src/tab-navigation/tab-navigation.component.html","../../../../libs/designsystem/tab-navigation/src/tab-navigation.module.ts","../../../../libs/designsystem/tab-navigation/src/kirbydesign-designsystem-tab-navigation.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-tab-navigation-item',\n templateUrl: './tab-navigation-item.component.html',\n styleUrls: ['./tab-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationItemComponent {\n @Input()\n label = '';\n\n constructor() {\n /* */\n }\n}\n","<button role=\"tab\" #tabButton>\n <span attr.data-text=\"{{ label }}\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n QueryList,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { TabNavigationItemComponent } from '../tab-navigation-item/tab-navigation-item.component';\n\n@Component({\n selector: 'kirby-tab-navigation',\n templateUrl: './tab-navigation.component.html',\n styleUrls: ['./tab-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationComponent implements AfterViewInit {\n public readonly DEBOUNCE_TIME_MS = 250;\n\n @ViewChild('tabBar')\n private tabBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabNavigationItemComponent, { read: ElementRef })\n private tabs: QueryList<ElementRef<HTMLElement>>;\n\n private tabBarElement: HTMLElement;\n private tabElements = new Array<HTMLElement>();\n private tabButtonElements = new Array<HTMLElement>();\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n\n this.focusIndex = index;\n this.selectTab(this.selectedIndex);\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n private _selectedIndex = -1;\n\n get focusIndex(): number {\n return this._focusIndex;\n }\n\n set focusIndex(index: number) {\n if (index !== this._focusIndex) {\n this._focusIndex = index;\n\n this.scrollToTab(this.focusIndex);\n this.focusTab(this.focusIndex);\n }\n }\n private _focusIndex = -1;\n\n @Output()\n selectedIndexChange = new EventEmitter<number>();\n\n constructor(private window: WindowRef, private keyboardHandlerService: KeyboardHandlerService) {\n /**/\n }\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.tabs.forEach((tab) => this.tabElements.push(tab.nativeElement));\n this.tabElements.forEach((tabElement) =>\n this.tabButtonElements.push(tabElement.querySelector('[role=\"tab\"]'))\n );\n\n setTimeout(() => {\n this.selectTab(this.selectedIndex);\n this.scrollToTab(this.focusIndex);\n this.focusTab(this.focusIndex);\n }, this.DEBOUNCE_TIME_MS);\n }\n\n @HostListener('click', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n onItemSelect(event: PointerEvent) {\n const targetTabNavItem: HTMLElement = (event.target as HTMLElement).closest('button');\n this.selectedIndex = this.tabButtonElements.indexOf(targetTabNavItem);\n }\n\n @HostListener('keydown.home', ['$event'])\n @HostListener('keydown.end', ['$event'])\n @HostListener('keydown.arrowright', ['$event'])\n @HostListener('keydown.arrowleft', ['$event'])\n onKeydown(event: KeyboardEvent) {\n event.preventDefault();\n this.focusIndex = this.keyboardHandlerService.handle(\n event,\n this.focusIndex,\n this.tabElements.length - 1,\n true\n );\n }\n\n private selectTab(tabIndex: number): void {\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('aria-selected', index === tabIndex ? 'true' : 'false');\n });\n }\n\n private focusTab(focusIndex: number): void {\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('tabindex', index === focusIndex ? '0' : '-1');\n });\n\n if (0 <= focusIndex && focusIndex < this.tabButtonElements.length) {\n this.tabButtonElements[focusIndex].focus();\n }\n }\n\n private scrollToTab(tabIndex: number): void {\n if (0 <= tabIndex && tabIndex < this.tabElements.length) {\n const selectedTabElement = this.tabElements[tabIndex];\n const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;\n const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;\n const tabBarElementWidth = this.tabBarElement.getBoundingClientRect().width;\n\n this.window.nativeWindow.requestAnimationFrame(() => {\n this.tabBarElement?.scrollTo({\n behavior: 'smooth',\n left: Math.max(\n 0,\n selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2\n ),\n });\n });\n }\n }\n}\n","<div class=\"container\">\n <div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabNavigationComponent } from './tab-navigation/tab-navigation.component';\nimport { TabNavigationItemComponent } from './tab-navigation-item/tab-navigation-item.component';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
@@ -115,4 +115,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
115
115
 
116
116
  export { TabButtonComponent, TabsComponent, TabsModule, TabsService, selectedTabClickEvent };
117
117
  //# sourceMappingURL=kirbydesign-designsystem-tabs.mjs.map
118
- //# sourceMappingURL=kirbydesign-designsystem-tabs.mjs.map