@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.
- package/README.md +7 -0
- package/action-group/action-group.component.d.ts +10 -6
- package/button/button.component.d.ts +2 -1
- package/button/public_api.d.ts +1 -1
- package/dropdown/keyboard-handler.service.d.ts +1 -1
- package/esm2020/action-group/action-group.component.mjs +25 -29
- package/esm2020/button/button.component.mjs +3 -3
- package/esm2020/button/public_api.mjs +2 -2
- package/esm2020/card/card.component.mjs +2 -2
- package/esm2020/dropdown/dropdown.component.mjs +4 -4
- package/esm2020/dropdown/dropdown.module.mjs +1 -1
- package/esm2020/dropdown/keyboard-handler.service.mjs +12 -7
- package/esm2020/header/header.component.mjs +12 -26
- package/esm2020/header/public_api.mjs +2 -2
- package/esm2020/item/item.component.mjs +2 -2
- package/esm2020/lib/index.mjs +3 -1
- package/esm2020/lib/kirby.module.mjs +22 -5
- package/esm2020/list/list-item/list-item.component.mjs +2 -2
- package/esm2020/list/list.component.mjs +2 -2
- package/esm2020/menu/kirbydesign-designsystem-menu.mjs +5 -0
- package/esm2020/menu/menu.component.mjs +69 -0
- package/esm2020/menu/public_api.mjs +2 -0
- package/esm2020/modal/modal/footer/modal-footer.component.mjs +3 -3
- package/esm2020/modal/v2/footer/footer.component.mjs +2 -2
- package/esm2020/modal/v2/modal-routing/modal-routing.component.mjs +3 -3
- package/esm2020/page/page-footer/page-footer.component.mjs +2 -2
- package/esm2020/page/page.component.mjs +37 -30
- package/esm2020/page/public_api.mjs +2 -12
- package/esm2020/shared/floating/floating.directive.mjs +91 -24
- package/esm2020/shared/floating/public_api.mjs +2 -2
- package/esm2020/tab-navigation/kirbydesign-designsystem-tab-navigation.mjs +5 -0
- package/esm2020/tab-navigation/public_api.mjs +4 -0
- package/esm2020/tab-navigation/tab-navigation/tab-navigation.component.mjs +121 -0
- package/esm2020/tab-navigation/tab-navigation-item/tab-navigation-item.component.mjs +17 -0
- package/esm2020/tab-navigation/tab-navigation.module.mjs +19 -0
- package/fesm2015/kirbydesign-designsystem-accordion.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-action-group.mjs +25 -30
- package/fesm2015/kirbydesign-designsystem-action-group.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-alert-experimental.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-avatar.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-button.mjs +2 -3
- package/fesm2015/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-calendar.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-card.mjs +2 -3
- package/fesm2015/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-chart.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-checkbox.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-data-table.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-divider.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-dropdown.mjs +15 -11
- package/fesm2015/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-empty-state.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-fab-sheet.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-flag.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-form-field.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-grid.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-header.mjs +12 -29
- package/fesm2015/kirbydesign-designsystem-header.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-helpers-scss.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-helpers.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-icon.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-item-group.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-item-sliding.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-item.mjs +2 -3
- package/fesm2015/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-kirby-app.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-kirby-ionic-module.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-list.mjs +4 -5
- package/fesm2015/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-loading-overlay.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-menu.mjs +76 -0
- package/fesm2015/kirbydesign-designsystem-menu.mjs.map +1 -0
- package/fesm2015/kirbydesign-designsystem-modal-v2.mjs +4 -5
- package/fesm2015/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-modal.mjs +2 -3
- package/fesm2015/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-page.mjs +38 -32
- package/fesm2015/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-popover.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-progress-circle.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-radio.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-range.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-reorder-list.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-router-outlet.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-section-header.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-shared-floating.mjs +92 -25
- package/fesm2015/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
- package/fesm2015/kirbydesign-designsystem-shared-portal.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-shared.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-slide-button.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-slide.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-spinner.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-tab-navigation.mjs +156 -0
- package/fesm2015/kirbydesign-designsystem-tab-navigation.mjs.map +1 -0
- package/fesm2015/kirbydesign-designsystem-tabs.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-testing-base.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-testing-jasmine.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-testing-jest.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-testing.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-toast.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-toggle-button.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-toggle.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem-types.mjs +0 -1
- package/fesm2015/kirbydesign-designsystem.mjs +23 -5
- package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-accordion.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-action-group.mjs +25 -30
- package/fesm2020/kirbydesign-designsystem-action-group.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-alert-experimental.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-avatar.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-button.mjs +2 -3
- package/fesm2020/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-calendar.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-card.mjs +2 -3
- package/fesm2020/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-chart.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-checkbox.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-data-table.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-divider.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-dropdown.mjs +15 -11
- package/fesm2020/kirbydesign-designsystem-dropdown.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-empty-state.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-fab-sheet.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-flag.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-form-field.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-grid.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-header.mjs +12 -27
- package/fesm2020/kirbydesign-designsystem-header.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-helpers-scss.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-helpers.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-icon.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-item-group.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-item-sliding.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-item.mjs +2 -3
- package/fesm2020/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-kirby-app.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-kirby-ionic-module.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-list.mjs +4 -5
- package/fesm2020/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-loading-overlay.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-menu.mjs +76 -0
- package/fesm2020/kirbydesign-designsystem-menu.mjs.map +1 -0
- package/fesm2020/kirbydesign-designsystem-modal-v2.mjs +4 -5
- package/fesm2020/kirbydesign-designsystem-modal-v2.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-modal.mjs +2 -3
- package/fesm2020/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-page.mjs +38 -32
- package/fesm2020/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-popover.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-progress-circle.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-radio.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-range.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-reorder-list.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-router-outlet.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-section-header.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-shared-floating.mjs +91 -25
- package/fesm2020/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
- package/fesm2020/kirbydesign-designsystem-shared-portal.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-shared.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-slide-button.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-slide.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-spinner.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-tab-navigation.mjs +155 -0
- package/fesm2020/kirbydesign-designsystem-tab-navigation.mjs.map +1 -0
- package/fesm2020/kirbydesign-designsystem-tabs.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-testing-base.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-testing-jasmine.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-testing-jest.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-testing.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-toast.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-toggle-button.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-toggle.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem-types.mjs +0 -1
- package/fesm2020/kirbydesign-designsystem.mjs +23 -5
- package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
- package/header/header.component.d.ts +5 -11
- package/header/public_api.d.ts +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/kirby.module.d.ts +42 -39
- package/menu/index.d.ts +5 -0
- package/menu/menu.component.d.ts +31 -0
- package/menu/public_api.d.ts +1 -0
- package/package.json +18 -2
- package/page/page.component.d.ts +12 -5
- package/page/public_api.d.ts +1 -12
- package/shared/floating/floating.directive.d.ts +30 -4
- package/shared/floating/public_api.d.ts +1 -1
- package/tab-navigation/index.d.ts +5 -0
- package/tab-navigation/public_api.d.ts +3 -0
- package/tab-navigation/tab-navigation/tab-navigation.component.d.ts +30 -0
- package/tab-navigation/tab-navigation-item/tab-navigation-item.component.d.ts +7 -0
- package/tab-navigation/tab-navigation.module.d.ts +9 -0
- 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
|
|
@@ -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
|
|
@@ -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.
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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
|
-
|
|
248
|
-
|
|
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.
|
|
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.
|
|
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)"
|
|
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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"}
|
|
@@ -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
|
|
@@ -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
|
|
@@ -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
|