@kirbydesign/designsystem 12.0.0-dev-67d5287 → 12.0.0-dev-9f721bb
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/fesm2022/kirbydesign-designsystem-accordion.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-accordion.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-action-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-avatar.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-avatar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-badge.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-badge.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-button.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-button.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-calendar.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-calendar.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-card.mjs +24 -24
- package/fesm2022/kirbydesign-designsystem-card.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-chart.mjs +22 -22
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs +14 -6
- package/fesm2022/kirbydesign-designsystem-checkbox.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-data-table.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-divider.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-divider.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-dropdown.mjs +10 -10
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs +19 -8
- package/fesm2022/kirbydesign-designsystem-empty-state.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-fab-sheet.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-flag.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-flag.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-form-field.mjs +32 -32
- package/fesm2022/kirbydesign-designsystem-form-field.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-gesture.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-header.mjs +19 -19
- package/fesm2022/kirbydesign-designsystem-helpers.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-icon.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-icon.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-item-group.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item-sliding.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-item.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-item.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-kirby-app.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-list.mjs +49 -46
- package/fesm2022/kirbydesign-designsystem-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs +8 -8
- package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-menu.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-menu.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-modal.mjs +59 -50
- package/fesm2022/kirbydesign-designsystem-modal.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-page.mjs +69 -48
- package/fesm2022/kirbydesign-designsystem-page.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-popover.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-progress-circle.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-radio.mjs +12 -12
- package/fesm2022/kirbydesign-designsystem-radio.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-range.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-range.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-reorder-list.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-router-outlet.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-section-header.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs +16 -7
- package/fesm2022/kirbydesign-designsystem-shared-floating.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-shared-portal.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-shared.mjs +21 -21
- package/fesm2022/kirbydesign-designsystem-slide-button.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem-slide.mjs +13 -13
- package/fesm2022/kirbydesign-designsystem-spinner.mjs +9 -9
- package/fesm2022/kirbydesign-designsystem-spinner.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs +14 -14
- package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-tabs.mjs +17 -17
- package/fesm2022/kirbydesign-designsystem-tabs.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs +305 -303
- package/fesm2022/kirbydesign-designsystem-testing-base.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-testing-jasmine.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing-jest.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-testing.mjs +4 -4
- package/fesm2022/kirbydesign-designsystem-toast.mjs +6 -6
- package/fesm2022/kirbydesign-designsystem-toggle-button.mjs +7 -7
- package/fesm2022/kirbydesign-designsystem-toggle.mjs +5 -5
- package/fesm2022/kirbydesign-designsystem-toggle.mjs.map +1 -1
- package/fesm2022/kirbydesign-designsystem-types.mjs +3 -3
- package/fesm2022/kirbydesign-designsystem.mjs +10 -10
- package/package.json +2 -2
- package/types/kirbydesign-designsystem-card.d.ts +2 -2
- package/types/kirbydesign-designsystem-card.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-checkbox.d.ts +7 -1
- package/types/kirbydesign-designsystem-checkbox.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-empty-state.d.ts +11 -0
- package/types/kirbydesign-designsystem-empty-state.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-list.d.ts +5 -0
- package/types/kirbydesign-designsystem-list.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-modal.d.ts +2 -1
- package/types/kirbydesign-designsystem-modal.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-page.d.ts +4 -0
- package/types/kirbydesign-designsystem-page.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-shared-floating.d.ts.map +1 -1
- package/types/kirbydesign-designsystem-testing-base.d.ts +5 -0
- package/types/kirbydesign-designsystem-testing-base.d.ts.map +1 -1
|
@@ -19,7 +19,7 @@ var TabNavigationItemComponent = class TabNavigationItemComponent {
|
|
|
19
19
|
static {
|
|
20
20
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
21
21
|
minVersion: "12.0.0",
|
|
22
|
-
version: "22.2.
|
|
22
|
+
version: "22.2.3",
|
|
23
23
|
ngImport: i0,
|
|
24
24
|
type: TabNavigationItemComponent,
|
|
25
25
|
deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
|
|
@@ -29,7 +29,7 @@ var TabNavigationItemComponent = class TabNavigationItemComponent {
|
|
|
29
29
|
static {
|
|
30
30
|
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
31
31
|
minVersion: "14.0.0",
|
|
32
|
-
version: "22.2.
|
|
32
|
+
version: "22.2.3",
|
|
33
33
|
type: TabNavigationItemComponent,
|
|
34
34
|
isStandalone: true,
|
|
35
35
|
selector: "kirby-tab-navigation-item",
|
|
@@ -40,14 +40,14 @@ var TabNavigationItemComponent = class TabNavigationItemComponent {
|
|
|
40
40
|
host: { attributes: { "role": "presentation" } },
|
|
41
41
|
ngImport: i0,
|
|
42
42
|
template: "<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n",
|
|
43
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:
|
|
43
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:calc(var(--kirby-stroke-xs) * 2)}: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;padding:0;width:auto;border:none;outline:none;color:var(--kirby-color-content-base);box-sizing:border-box;padding:var(--kirby-spacing-s);font-size:min(var(--kirby-font-size-n),var(--kirby-spacing-s) * 1.45);line-height:var(--kirby-line-height-m);gap:var(--kirby-spacing-xxxs)}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab]:focus-visible{outline:none;border-radius:var(--kirby-spacing-xxxs);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}:host button[role=tab][aria-selected=true]{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-color-border-base-loud);position:absolute;border-radius:1px;height:calc(var(--kirby-stroke-xs) * 2);bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:var(--kirby-font-weight-bold);height:0;overflow:hidden;visibility:hidden}\n"],
|
|
44
44
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
i0.ɵɵngDeclareClassMetadata({
|
|
49
49
|
minVersion: "12.0.0",
|
|
50
|
-
version: "22.2.
|
|
50
|
+
version: "22.2.3",
|
|
51
51
|
ngImport: i0,
|
|
52
52
|
type: TabNavigationItemComponent,
|
|
53
53
|
decorators: [{
|
|
@@ -57,7 +57,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
57
57
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
58
58
|
host: { role: "presentation" },
|
|
59
59
|
template: "<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n",
|
|
60
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:
|
|
60
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:calc(var(--kirby-stroke-xs) * 2)}: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;padding:0;width:auto;border:none;outline:none;color:var(--kirby-color-content-base);box-sizing:border-box;padding:var(--kirby-spacing-s);font-size:min(var(--kirby-font-size-n),var(--kirby-spacing-s) * 1.45);line-height:var(--kirby-line-height-m);gap:var(--kirby-spacing-xxxs)}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab]:focus-visible{outline:none;border-radius:var(--kirby-spacing-xxxs);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}:host button[role=tab][aria-selected=true]{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-color-border-base-loud);position:absolute;border-radius:1px;height:calc(var(--kirby-stroke-xs) * 2);bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:var(--kirby-font-weight-bold);height:0;overflow:hidden;visibility:hidden}\n"]
|
|
61
61
|
}]
|
|
62
62
|
}],
|
|
63
63
|
ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }],
|
|
@@ -181,7 +181,7 @@ var TabNavigationComponent = class TabNavigationComponent {
|
|
|
181
181
|
static {
|
|
182
182
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
183
183
|
minVersion: "12.0.0",
|
|
184
|
-
version: "22.2.
|
|
184
|
+
version: "22.2.3",
|
|
185
185
|
ngImport: i0,
|
|
186
186
|
type: TabNavigationComponent,
|
|
187
187
|
deps: [
|
|
@@ -196,7 +196,7 @@ var TabNavigationComponent = class TabNavigationComponent {
|
|
|
196
196
|
static {
|
|
197
197
|
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
198
198
|
minVersion: "14.0.0",
|
|
199
|
-
version: "22.2.
|
|
199
|
+
version: "22.2.3",
|
|
200
200
|
type: TabNavigationComponent,
|
|
201
201
|
isStandalone: true,
|
|
202
202
|
selector: "kirby-tab-navigation",
|
|
@@ -224,14 +224,14 @@ var TabNavigationComponent = class TabNavigationComponent {
|
|
|
224
224
|
}],
|
|
225
225
|
ngImport: i0,
|
|
226
226
|
template: "<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n</div>\n",
|
|
227
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-color-border-base-quiet);position:absolute;height:
|
|
227
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-color-border-base-quiet);position:absolute;height:var(--kirby-stroke-xs);bottom:0;z-index:var(--kirby-z-index-default);left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:var(--kirby-spacing-xs);-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media(max-width:767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"],
|
|
228
228
|
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
229
229
|
});
|
|
230
230
|
}
|
|
231
231
|
};
|
|
232
232
|
i0.ɵɵngDeclareClassMetadata({
|
|
233
233
|
minVersion: "12.0.0",
|
|
234
|
-
version: "22.2.
|
|
234
|
+
version: "22.2.3",
|
|
235
235
|
ngImport: i0,
|
|
236
236
|
type: TabNavigationComponent,
|
|
237
237
|
decorators: [{
|
|
@@ -240,7 +240,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
240
240
|
selector: "kirby-tab-navigation",
|
|
241
241
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
242
242
|
template: "<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n</div>\n",
|
|
243
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-color-border-base-quiet);position:absolute;height:
|
|
243
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-color-border-base-quiet);position:absolute;height:var(--kirby-stroke-xs);bottom:0;z-index:var(--kirby-z-index-default);left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:var(--kirby-spacing-xs);-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media(max-width:767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"]
|
|
244
244
|
}]
|
|
245
245
|
}],
|
|
246
246
|
ctorParameters: () => [
|
|
@@ -296,7 +296,7 @@ var TabNavigationModule = class TabNavigationModule {
|
|
|
296
296
|
static {
|
|
297
297
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
298
298
|
minVersion: "12.0.0",
|
|
299
|
-
version: "22.2.
|
|
299
|
+
version: "22.2.3",
|
|
300
300
|
ngImport: i0,
|
|
301
301
|
type: TabNavigationModule,
|
|
302
302
|
deps: [],
|
|
@@ -306,7 +306,7 @@ var TabNavigationModule = class TabNavigationModule {
|
|
|
306
306
|
static {
|
|
307
307
|
this.ɵmod = i0.ɵɵngDeclareNgModule({
|
|
308
308
|
minVersion: "14.0.0",
|
|
309
|
-
version: "22.2.
|
|
309
|
+
version: "22.2.3",
|
|
310
310
|
ngImport: i0,
|
|
311
311
|
type: TabNavigationModule,
|
|
312
312
|
imports: [
|
|
@@ -320,7 +320,7 @@ var TabNavigationModule = class TabNavigationModule {
|
|
|
320
320
|
static {
|
|
321
321
|
this.ɵinj = i0.ɵɵngDeclareInjector({
|
|
322
322
|
minVersion: "12.0.0",
|
|
323
|
-
version: "22.2.
|
|
323
|
+
version: "22.2.3",
|
|
324
324
|
ngImport: i0,
|
|
325
325
|
type: TabNavigationModule,
|
|
326
326
|
imports: [CommonModule]
|
|
@@ -329,7 +329,7 @@ var TabNavigationModule = class TabNavigationModule {
|
|
|
329
329
|
};
|
|
330
330
|
i0.ɵɵngDeclareClassMetadata({
|
|
331
331
|
minVersion: "12.0.0",
|
|
332
|
-
version: "22.2.
|
|
332
|
+
version: "22.2.3",
|
|
333
333
|
ngImport: i0,
|
|
334
334
|
type: TabNavigationModule,
|
|
335
335
|
decorators: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-tab-navigation.mjs","names":[],"sources":["../../tab-navigation/src/tab-navigation-item/tab-navigation-item.component.ts","../../tab-navigation/src/tab-navigation-item/tab-navigation-item.component.html","../../tab-navigation/src/tab-navigation/tab-navigation.component.ts","../../tab-navigation/src/tab-navigation/tab-navigation.component.html","../../tab-navigation/src/tab-navigation.module.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n Renderer2,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\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 host: { role: 'presentation' },\n})\nexport class TabNavigationItemComponent implements AfterViewInit {\n private _attributesToForward: string[] = ['aria-controls', 'id'];\n\n @Input()\n label = '';\n\n @Input()\n truncate = true;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngAfterViewInit(): void {\n const tabElement: HTMLElement = this.elementRef.nativeElement.querySelector('[role=\"tab\"]');\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n tabElement\n );\n }\n}\n","<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ 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 Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\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 private _attributesToForward: string[] = ['aria-label', 'aria-labelledby'];\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex && index !== -1) {\n this._selectedIndex = index;\n\n if (!this.containsFocus()) {\n this.focusIndex = index;\n }\n\n this.selectTab(this.selectedIndex);\n this.scrollToTab(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.updateRovingTabindex();\n }\n }\n private _focusIndex = -1;\n\n @Output()\n selectedIndexChange = new EventEmitter<number>();\n\n constructor(\n private window: WindowRef,\n private keyboardHandlerService: KeyboardHandlerService,\n private renderer: Renderer2,\n private elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.setTabElements();\n this.updateTabElementsOnChanges();\n\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.tabBarElement\n );\n }\n\n @HostListener('click', ['$event'])\n onItemSelect(event: MouseEvent) {\n this.selectedIndex = this.indexOfTabNavButton(event.target);\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 this.scrollToTab(this.focusIndex);\n this.focusTab(this.focusIndex);\n }\n\n @HostListener('focusin', ['$event'])\n onFocusIn(event: FocusEvent) {\n const focusedIndex = this.indexOfTabNavButton(event.target);\n if (focusedIndex !== -1) {\n this.focusIndex = focusedIndex;\n }\n }\n\n @HostListener('focusout', ['$event'])\n onFocusOut(event: FocusEvent) {\n const focusLeftTabNavigation = !this.elementRef.nativeElement.contains(\n event.relatedTarget as Node\n );\n if (focusLeftTabNavigation) {\n this.focusIndex = this.selectedIndex;\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 updateRovingTabindex(): void {\n const tabStopIndex = this.isValidTabIndex(this.focusIndex) ? this.focusIndex : 0;\n\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('tabindex', index === tabStopIndex ? '0' : '-1');\n });\n }\n\n private focusTab(tabIndex: number): void {\n if (this.isValidTabIndex(tabIndex)) {\n this.tabButtonElements[tabIndex].focus();\n }\n }\n\n private indexOfTabNavButton(target: EventTarget): number {\n return this.tabButtonElements.indexOf((target as Element).closest<HTMLElement>('[role=\"tab\"]'));\n }\n\n private isValidTabIndex(tabIndex: number): boolean {\n return 0 <= tabIndex && tabIndex < this.tabButtonElements.length;\n }\n\n private containsFocus(): boolean {\n return this.elementRef.nativeElement.contains(document.activeElement);\n }\n\n private scrollToTab(tabIndex: number): void {\n if (this.isValidTabIndex(tabIndex)) {\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 private setTabElements() {\n this.tabs.forEach((tab) => {\n this.tabElements.push(tab.nativeElement);\n });\n\n this.tabElements.forEach((tabElement) =>\n this.tabButtonElements.push(tabElement.querySelector('[role=\"tab\"]'))\n );\n\n this.selectTab(this.selectedIndex);\n this.updateRovingTabindex();\n\n setTimeout(() => {\n this.scrollToTab(this.focusIndex);\n }, this.DEBOUNCE_TIME_MS);\n }\n\n private updateTabElementsOnChanges() {\n this.tabs.changes.subscribe(() => {\n this.tabElements = [];\n this.tabButtonElements = [];\n this.setTabElements();\n });\n }\n}\n","<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\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, TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-tab-navigation.mjs","names":[],"sources":["../../tab-navigation/src/tab-navigation-item/tab-navigation-item.component.ts","../../tab-navigation/src/tab-navigation-item/tab-navigation-item.component.html","../../tab-navigation/src/tab-navigation/tab-navigation.component.ts","../../tab-navigation/src/tab-navigation/tab-navigation.component.html","../../tab-navigation/src/tab-navigation.module.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n Renderer2,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\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 host: { role: 'presentation' },\n})\nexport class TabNavigationItemComponent implements AfterViewInit {\n private _attributesToForward: string[] = ['aria-controls', 'id'];\n\n @Input()\n label = '';\n\n @Input()\n truncate = true;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngAfterViewInit(): void {\n const tabElement: HTMLElement = this.elementRef.nativeElement.querySelector('[role=\"tab\"]');\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n tabElement\n );\n }\n}\n","<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ 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 Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\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 private _attributesToForward: string[] = ['aria-label', 'aria-labelledby'];\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex && index !== -1) {\n this._selectedIndex = index;\n\n if (!this.containsFocus()) {\n this.focusIndex = index;\n }\n\n this.selectTab(this.selectedIndex);\n this.scrollToTab(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.updateRovingTabindex();\n }\n }\n private _focusIndex = -1;\n\n @Output()\n selectedIndexChange = new EventEmitter<number>();\n\n constructor(\n private window: WindowRef,\n private keyboardHandlerService: KeyboardHandlerService,\n private renderer: Renderer2,\n private elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.setTabElements();\n this.updateTabElementsOnChanges();\n\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.tabBarElement\n );\n }\n\n @HostListener('click', ['$event'])\n onItemSelect(event: MouseEvent) {\n this.selectedIndex = this.indexOfTabNavButton(event.target);\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 this.scrollToTab(this.focusIndex);\n this.focusTab(this.focusIndex);\n }\n\n @HostListener('focusin', ['$event'])\n onFocusIn(event: FocusEvent) {\n const focusedIndex = this.indexOfTabNavButton(event.target);\n if (focusedIndex !== -1) {\n this.focusIndex = focusedIndex;\n }\n }\n\n @HostListener('focusout', ['$event'])\n onFocusOut(event: FocusEvent) {\n const focusLeftTabNavigation = !this.elementRef.nativeElement.contains(\n event.relatedTarget as Node\n );\n if (focusLeftTabNavigation) {\n this.focusIndex = this.selectedIndex;\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 updateRovingTabindex(): void {\n const tabStopIndex = this.isValidTabIndex(this.focusIndex) ? this.focusIndex : 0;\n\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('tabindex', index === tabStopIndex ? '0' : '-1');\n });\n }\n\n private focusTab(tabIndex: number): void {\n if (this.isValidTabIndex(tabIndex)) {\n this.tabButtonElements[tabIndex].focus();\n }\n }\n\n private indexOfTabNavButton(target: EventTarget): number {\n return this.tabButtonElements.indexOf((target as Element).closest<HTMLElement>('[role=\"tab\"]'));\n }\n\n private isValidTabIndex(tabIndex: number): boolean {\n return 0 <= tabIndex && tabIndex < this.tabButtonElements.length;\n }\n\n private containsFocus(): boolean {\n return this.elementRef.nativeElement.contains(document.activeElement);\n }\n\n private scrollToTab(tabIndex: number): void {\n if (this.isValidTabIndex(tabIndex)) {\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 private setTabElements() {\n this.tabs.forEach((tab) => {\n this.tabElements.push(tab.nativeElement);\n });\n\n this.tabElements.forEach((tabElement) =>\n this.tabButtonElements.push(tabElement.querySelector('[role=\"tab\"]'))\n );\n\n this.selectTab(this.selectedIndex);\n this.updateRovingTabindex();\n\n setTimeout(() => {\n this.scrollToTab(this.focusIndex);\n }, this.DEBOUNCE_TIME_MS);\n }\n\n private updateTabElementsOnChanges() {\n this.tabs.changes.subscribe(() => {\n this.tabElements = [];\n this.tabButtonElements = [];\n this.setTabElements();\n });\n }\n}\n","<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\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, TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n"],"mappings":"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"}
|
|
@@ -18,7 +18,7 @@ var TabsService = class TabsService {
|
|
|
18
18
|
static {
|
|
19
19
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
20
20
|
minVersion: "12.0.0",
|
|
21
|
-
version: "22.2.
|
|
21
|
+
version: "22.2.3",
|
|
22
22
|
ngImport: i0,
|
|
23
23
|
type: TabsService,
|
|
24
24
|
deps: [],
|
|
@@ -28,7 +28,7 @@ var TabsService = class TabsService {
|
|
|
28
28
|
static {
|
|
29
29
|
this.ɵprov = i0.ɵɵngDeclareInjectable({
|
|
30
30
|
minVersion: "12.0.0",
|
|
31
|
-
version: "22.2.
|
|
31
|
+
version: "22.2.3",
|
|
32
32
|
ngImport: i0,
|
|
33
33
|
type: TabsService,
|
|
34
34
|
providedIn: "root"
|
|
@@ -37,7 +37,7 @@ var TabsService = class TabsService {
|
|
|
37
37
|
};
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({
|
|
39
39
|
minVersion: "12.0.0",
|
|
40
|
-
version: "22.2.
|
|
40
|
+
version: "22.2.3",
|
|
41
41
|
ngImport: i0,
|
|
42
42
|
type: TabsService,
|
|
43
43
|
decorators: [{
|
|
@@ -59,7 +59,7 @@ var TabsComponent = class TabsComponent {
|
|
|
59
59
|
static {
|
|
60
60
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
61
61
|
minVersion: "12.0.0",
|
|
62
|
-
version: "22.2.
|
|
62
|
+
version: "22.2.3",
|
|
63
63
|
ngImport: i0,
|
|
64
64
|
type: TabsComponent,
|
|
65
65
|
deps: [{ token: TabsService }],
|
|
@@ -69,7 +69,7 @@ var TabsComponent = class TabsComponent {
|
|
|
69
69
|
static {
|
|
70
70
|
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
71
71
|
minVersion: "14.0.0",
|
|
72
|
-
version: "22.2.
|
|
72
|
+
version: "22.2.3",
|
|
73
73
|
type: TabsComponent,
|
|
74
74
|
isStandalone: true,
|
|
75
75
|
selector: "kirby-tab-bar",
|
|
@@ -83,7 +83,7 @@ var TabsComponent = class TabsComponent {
|
|
|
83
83
|
}],
|
|
84
84
|
ngImport: i0,
|
|
85
85
|
template: "<ion-tabs>\n <ion-tab-bar class=\"kirby-surface-raised\" [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n",
|
|
86
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: var(--kirby-color-fill-raised);--border:
|
|
86
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: var(--kirby-color-fill-raised);--border: var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);--color: var(--kirby-color-content-raised);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media(min-width:768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:var(--kirby-spacing-m)}}@media(min-width:992px){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"],
|
|
87
87
|
dependencies: [{
|
|
88
88
|
kind: "component",
|
|
89
89
|
type: IonTabs,
|
|
@@ -105,7 +105,7 @@ var TabsComponent = class TabsComponent {
|
|
|
105
105
|
};
|
|
106
106
|
i0.ɵɵngDeclareClassMetadata({
|
|
107
107
|
minVersion: "12.0.0",
|
|
108
|
-
version: "22.2.
|
|
108
|
+
version: "22.2.3",
|
|
109
109
|
ngImport: i0,
|
|
110
110
|
type: TabsComponent,
|
|
111
111
|
decorators: [{
|
|
@@ -115,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
115
115
|
imports: [IonTabs, IonTabBar],
|
|
116
116
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
117
117
|
template: "<ion-tabs>\n <ion-tab-bar class=\"kirby-surface-raised\" [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n",
|
|
118
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: var(--kirby-color-fill-raised);--border:
|
|
118
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: var(--kirby-color-fill-raised);--border: var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);--color: var(--kirby-color-content-raised);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media(min-width:768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:var(--kirby-spacing-m)}}@media(min-width:992px){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"]
|
|
119
119
|
}]
|
|
120
120
|
}],
|
|
121
121
|
ctorParameters: () => [{ type: TabsService }],
|
|
@@ -145,7 +145,7 @@ var TabButtonComponent = class TabButtonComponent {
|
|
|
145
145
|
static {
|
|
146
146
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
147
147
|
minVersion: "12.0.0",
|
|
148
|
-
version: "22.2.
|
|
148
|
+
version: "22.2.3",
|
|
149
149
|
ngImport: i0,
|
|
150
150
|
type: TabButtonComponent,
|
|
151
151
|
deps: [],
|
|
@@ -155,7 +155,7 @@ var TabButtonComponent = class TabButtonComponent {
|
|
|
155
155
|
static {
|
|
156
156
|
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
157
157
|
minVersion: "17.0.0",
|
|
158
|
-
version: "22.2.
|
|
158
|
+
version: "22.2.3",
|
|
159
159
|
type: TabButtonComponent,
|
|
160
160
|
isStandalone: true,
|
|
161
161
|
selector: "kirby-tab-button",
|
|
@@ -167,7 +167,7 @@ var TabButtonComponent = class TabButtonComponent {
|
|
|
167
167
|
}],
|
|
168
168
|
ngImport: i0,
|
|
169
169
|
template: "<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n",
|
|
170
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:contents}ion-tab-button.ion-focused:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);--background-focused-opacity: 0}@media(hover:hover){ion-tab-button:hover{--background: var(--kirby-color-fill-raised-hover)}}ion-tab-button:active{--background: var(--kirby-color-fill-raised-active)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:var(--kirby-font-weight-medium);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--color: var(--kirby-color-content-raised-quiet);--color-selected: var(--kirby-color-content-raised);--padding-start: 0;--padding-end: 0;--kirby-icon-font-size: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) ;--kirby-badge-font-size: 10px}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md,ion-tab-button ::ng-deep>kirby-badge[size=md]{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:.4em;margin-bottom:calc(var(--kirby-spacing-xxxxs) / 2)}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: var(--kirby-spacing-xxs)}}@media(min-width:992px){ion-tab-button{font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);--kirby-badge-font-size: initial;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}}\n"],
|
|
170
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:contents}ion-tab-button.ion-focused:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);--background-focused-opacity: 0}@media(hover:hover){ion-tab-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-quiet-hover)}}ion-tab-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-quiet-active)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:var(--kirby-font-weight-medium);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--color: var(--kirby-color-content-raised-quiet);--color-selected: var(--kirby-color-content-raised);--padding-start: 0;--padding-end: 0;--kirby-icon-font-size: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) ;--kirby-badge-font-size: 10px}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md,ion-tab-button ::ng-deep>kirby-badge[size=md]{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:.4em;margin-bottom:calc(var(--kirby-spacing-xxxxs) / 2)}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: var(--kirby-spacing-xxs)}}@media(min-width:992px){ion-tab-button{font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);--kirby-badge-font-size: initial;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}}\n"],
|
|
171
171
|
dependencies: [{
|
|
172
172
|
kind: "component",
|
|
173
173
|
type: IonTabButton,
|
|
@@ -190,7 +190,7 @@ var TabButtonComponent = class TabButtonComponent {
|
|
|
190
190
|
};
|
|
191
191
|
i0.ɵɵngDeclareClassMetadata({
|
|
192
192
|
minVersion: "12.0.0",
|
|
193
|
-
version: "22.2.
|
|
193
|
+
version: "22.2.3",
|
|
194
194
|
ngImport: i0,
|
|
195
195
|
type: TabButtonComponent,
|
|
196
196
|
decorators: [{
|
|
@@ -200,7 +200,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
200
200
|
imports: [IonTabButton],
|
|
201
201
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
202
202
|
template: "<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n",
|
|
203
|
-
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:contents}ion-tab-button.ion-focused:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);--background-focused-opacity: 0}@media(hover:hover){ion-tab-button:hover{--background: var(--kirby-color-fill-raised-hover)}}ion-tab-button:active{--background: var(--kirby-color-fill-raised-active)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:var(--kirby-font-weight-medium);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--color: var(--kirby-color-content-raised-quiet);--color-selected: var(--kirby-color-content-raised);--padding-start: 0;--padding-end: 0;--kirby-icon-font-size: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) ;--kirby-badge-font-size: 10px}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md,ion-tab-button ::ng-deep>kirby-badge[size=md]{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:.4em;margin-bottom:calc(var(--kirby-spacing-xxxxs) / 2)}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: var(--kirby-spacing-xxs)}}@media(min-width:992px){ion-tab-button{font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);--kirby-badge-font-size: initial;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}}\n"]
|
|
203
|
+
styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:contents}ion-tab-button.ion-focused:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);--background-focused-opacity: 0}@media(hover:hover){ion-tab-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-quiet-hover)}}ion-tab-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-quiet-active)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:var(--kirby-font-weight-medium);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--color: var(--kirby-color-content-raised-quiet);--color-selected: var(--kirby-color-content-raised);--padding-start: 0;--padding-end: 0;--kirby-icon-font-size: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) ;--kirby-badge-font-size: 10px}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media(min-width:768px){ion-tab-button{flex:none;flex-direction:row;font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md,ion-tab-button ::ng-deep>kirby-badge[size=md]{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:.4em;margin-bottom:calc(var(--kirby-spacing-xxxxs) / 2)}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: var(--kirby-spacing-xxs)}}@media(min-width:992px){ion-tab-button{font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);--kirby-badge-font-size: initial;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}}\n"]
|
|
204
204
|
}]
|
|
205
205
|
}],
|
|
206
206
|
propDecorators: {
|
|
@@ -216,7 +216,7 @@ var TabsModule = class TabsModule {
|
|
|
216
216
|
static {
|
|
217
217
|
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
218
218
|
minVersion: "12.0.0",
|
|
219
|
-
version: "22.2.
|
|
219
|
+
version: "22.2.3",
|
|
220
220
|
ngImport: i0,
|
|
221
221
|
type: TabsModule,
|
|
222
222
|
deps: [],
|
|
@@ -226,7 +226,7 @@ var TabsModule = class TabsModule {
|
|
|
226
226
|
static {
|
|
227
227
|
this.ɵmod = i0.ɵɵngDeclareNgModule({
|
|
228
228
|
minVersion: "14.0.0",
|
|
229
|
-
version: "22.2.
|
|
229
|
+
version: "22.2.3",
|
|
230
230
|
ngImport: i0,
|
|
231
231
|
type: TabsModule,
|
|
232
232
|
imports: [
|
|
@@ -244,7 +244,7 @@ var TabsModule = class TabsModule {
|
|
|
244
244
|
static {
|
|
245
245
|
this.ɵinj = i0.ɵɵngDeclareInjector({
|
|
246
246
|
minVersion: "12.0.0",
|
|
247
|
-
version: "22.2.
|
|
247
|
+
version: "22.2.3",
|
|
248
248
|
ngImport: i0,
|
|
249
249
|
type: TabsModule,
|
|
250
250
|
providers: [TabsService],
|
|
@@ -262,7 +262,7 @@ var TabsModule = class TabsModule {
|
|
|
262
262
|
};
|
|
263
263
|
i0.ɵɵngDeclareClassMetadata({
|
|
264
264
|
minVersion: "12.0.0",
|
|
265
|
-
version: "22.2.
|
|
265
|
+
version: "22.2.3",
|
|
266
266
|
ngImport: i0,
|
|
267
267
|
type: TabsModule,
|
|
268
268
|
decorators: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kirbydesign-designsystem-tabs.mjs","names":[],"sources":["../../tabs/src/tabs.service.ts","../../tabs/src/tabs.component.ts","../../tabs/src/tabs.component.html","../../tabs/src/tab-button/tab-button.events.ts","../../tabs/src/tab-button/tab-button.component.ts","../../tabs/src/tab-button/tab-button.component.html","../../tabs/src/tabs.module.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { IonRouterOutlet } from '@ionic/angular';\nimport { ReplaySubject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TabsService {\n private outletSubject$: ReplaySubject<IonRouterOutlet> = new ReplaySubject(1);\n public outlet$ = this.outletSubject$.asObservable();\n\n public setOutlet(outlet: IonRouterOutlet) {\n this.outletSubject$.next(outlet);\n }\n\n public resetOutlet() {\n this.outletSubject$.next(null);\n }\n}\n\nexport { IonRouterOutlet };\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n OnDestroy,\n ViewChild,\n} from '@angular/core';\nimport { IonTabBar, IonTabs } from '@ionic/angular';\n\nimport { TabsService } from './tabs.service';\n\n@Component({\n selector: 'kirby-tab-bar',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [IonTabs, IonTabBar],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class TabsComponent implements AfterViewInit, OnDestroy {\n @HostBinding('class.tab-bar-bottom-hidden')\n tabBarBottomHidden = false;\n @ViewChild(IonTabs, { static: true }) tabs: IonTabs;\n\n constructor(private tabsService: TabsService) {}\n\n ngAfterViewInit() {\n this.tabsService.setOutlet(this.tabs.outlet);\n }\n\n ngOnDestroy() {\n this.tabsService.resetOutlet();\n }\n}\n","<ion-tabs>\n <ion-tab-bar class=\"kirby-surface-raised\" [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n Output,\n QueryList,\n} from '@angular/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonTabButton } from '@ionic/angular';\nimport { selectedTabClickEvent } from './tab-button.events';\n\n@Component({\n selector: 'kirby-tab-button',\n templateUrl: './tab-button.component.html',\n styleUrls: ['./tab-button.component.scss'],\n imports: [IonTabButton],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class TabButtonComponent {\n @Input() tab: string;\n @Output() click = new EventEmitter<Event>();\n @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n\n onClick(event: Event, isSelected: boolean) {\n this.click.emit(event);\n\n if (isSelected) {\n const clickEvent = new CustomEvent(selectedTabClickEvent);\n dispatchEvent(clickEvent);\n }\n }\n}\n","<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n","import { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { NgModule } from '@angular/core';\nimport { IonTabBar, IonTabButton, IonTabs } from '@ionic/angular';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\nimport { TabsComponent } from './tabs.component';\n\n@NgModule({\n imports: [\n IconModule,\n CommonModule,\n IonTabs,\n IonTabBar,\n IonTabButton,\n TabsComponent,\n TabButtonComponent,\n ],\n providers: [TabsService],\n exports: [TabsComponent, TabButtonComponent],\n})\nexport class TabsModule {}\n"],"mappings":";;;;;;AAOA,IAAa,cAAb,MAAa,YAAW;CAHxB,cAAA;EAIU,KAAA,iBAAiD,IAAI,cAAc,CAAC;EACrE,KAAA,UAAU,KAAK,eAAe,aAAY;CASlD;CAPQ,UAAU,QAAuB;EACtC,KAAK,eAAe,KAAK,MAAM;CACjC;CAEO,cAAW;EAChB,KAAK,eAAe,KAAK,IAAI;CAC/B;CAVW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAW,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAX;EAAA,KAAA,QAAA,GAAA,sBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAW,YAFV;EAAM,CAAA;CAAA;;AAEP,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EAHvB,MAAA;EAAW,MAAA,CAAA,EACV,YAAY,OACb,CAAA;;;ACaD,IAAa,gBAAb,MAAa,cAAa;CAKxB,YAAoB,aAAwB;EAAxB,KAAA,cAAA;EAHpB,KAAA,qBAAqB;CAG0B;CAE/C,kBAAe;EACb,KAAK,YAAY,UAAU,KAAK,KAAK,MAAM;CAC7C;CAEA,cAAW;EACT,KAAK,YAAY,YAAW;CAC9B;CAbW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAa,MAAA,CAAA,EAAA,OAAA,YAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAb;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAa,cAAA;GAAA,UAAA;GAAA,MAAA,EAAA,YAAA,EAAA,+BAAA,0BAAA,EAAA;GAAA,aAAA,CAAA;IAAA,cAAA;IAAA,OAAA;IAAA,WAGb;IAAO,aAAA;IAAA,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UCtBpB;GAKA,QAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"kirbydesign-designsystem-tabs.mjs","names":[],"sources":["../../tabs/src/tabs.service.ts","../../tabs/src/tabs.component.ts","../../tabs/src/tabs.component.html","../../tabs/src/tab-button/tab-button.events.ts","../../tabs/src/tab-button/tab-button.component.ts","../../tabs/src/tab-button/tab-button.component.html","../../tabs/src/tabs.module.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { IonRouterOutlet } from '@ionic/angular';\nimport { ReplaySubject } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class TabsService {\n private outletSubject$: ReplaySubject<IonRouterOutlet> = new ReplaySubject(1);\n public outlet$ = this.outletSubject$.asObservable();\n\n public setOutlet(outlet: IonRouterOutlet) {\n this.outletSubject$.next(outlet);\n }\n\n public resetOutlet() {\n this.outletSubject$.next(null);\n }\n}\n\nexport { IonRouterOutlet };\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n HostBinding,\n OnDestroy,\n ViewChild,\n} from '@angular/core';\nimport { IonTabBar, IonTabs } from '@ionic/angular';\n\nimport { TabsService } from './tabs.service';\n\n@Component({\n selector: 'kirby-tab-bar',\n templateUrl: './tabs.component.html',\n styleUrls: ['./tabs.component.scss'],\n imports: [IonTabs, IonTabBar],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class TabsComponent implements AfterViewInit, OnDestroy {\n @HostBinding('class.tab-bar-bottom-hidden')\n tabBarBottomHidden = false;\n @ViewChild(IonTabs, { static: true }) tabs: IonTabs;\n\n constructor(private tabsService: TabsService) {}\n\n ngAfterViewInit() {\n this.tabsService.setOutlet(this.tabs.outlet);\n }\n\n ngOnDestroy() {\n this.tabsService.resetOutlet();\n }\n}\n","<ion-tabs>\n <ion-tab-bar class=\"kirby-surface-raised\" [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n Output,\n QueryList,\n} from '@angular/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonTabButton } from '@ionic/angular';\nimport { selectedTabClickEvent } from './tab-button.events';\n\n@Component({\n selector: 'kirby-tab-button',\n templateUrl: './tab-button.component.html',\n styleUrls: ['./tab-button.component.scss'],\n imports: [IonTabButton],\n changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class TabButtonComponent {\n @Input() tab: string;\n @Output() click = new EventEmitter<Event>();\n @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n\n onClick(event: Event, isSelected: boolean) {\n this.click.emit(event);\n\n if (isSelected) {\n const clickEvent = new CustomEvent(selectedTabClickEvent);\n dispatchEvent(clickEvent);\n }\n }\n}\n","<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 || !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n","import { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { NgModule } from '@angular/core';\nimport { IonTabBar, IonTabButton, IonTabs } from '@ionic/angular';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\nimport { TabsComponent } from './tabs.component';\n\n@NgModule({\n imports: [\n IconModule,\n CommonModule,\n IonTabs,\n IonTabBar,\n IonTabButton,\n TabsComponent,\n TabButtonComponent,\n ],\n providers: [TabsService],\n exports: [TabsComponent, TabButtonComponent],\n})\nexport class TabsModule {}\n"],"mappings":"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"}
|