@kirbydesign/designsystem 11.11.3-dev-e7cb27f → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs

@@ -1,182 +1,349 @@
-import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, EventEmitter, ElementRef, HostListener, Output, ContentChildren, ViewChild, NgModule } from '@angular/core';
-import { forwardAttributes } from '@kirbydesign/designsystem/shared';
-import * as i1 from '@kirbydesign/designsystem/types';
-import * as i2 from '@kirbydesign/designsystem/dropdown';
-import { CommonModule } from '@angular/common';
-
-class TabNavigationItemComponent {
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this._attributesToForward = ['aria-controls', 'id'];
-        this.label = '';
-        this.truncate = true;
-    }
-    ngAfterViewInit() {
-        const tabElement = this.elementRef.nativeElement.querySelector('[role="tab"]');
-        forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, tabElement);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabNavigationItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: TabNavigationItemComponent, isStandalone: true, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, host: { attributes: { "role": "presentation" } }, ngImport: i0, 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", 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: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;padding:0;width:auto;border:none;outline:none;color:var(--kirby-black);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-dark);position:absolute;border-radius:1px;height:2px;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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'presentation' }, 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", 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: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;padding:0;width:auto;border:none;outline:none;color:var(--kirby-black);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-dark);position:absolute;border-radius:1px;height:2px;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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { label: [{
-                type: Input
-            }], truncate: [{
-                type: Input
-            }] } });
-
-class TabNavigationComponent {
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(index) {
-        if (index !== this._selectedIndex && index !== -1) {
-            this._selectedIndex = index;
-            this.focusIndex = index;
-            this.selectTab(this.selectedIndex);
-            this.selectedIndexChange.emit(this.selectedIndex);
-        }
-    }
-    get focusIndex() {
-        return this._focusIndex;
-    }
-    set focusIndex(index) {
-        if (index !== this._focusIndex) {
-            this._focusIndex = index;
-            this.scrollToTab(this.focusIndex);
-            this.focusTab(this.focusIndex);
-        }
-    }
-    constructor(window, keyboardHandlerService, renderer, elementRef) {
-        this.window = window;
-        this.keyboardHandlerService = keyboardHandlerService;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.DEBOUNCE_TIME_MS = 250;
-        this.tabElements = new Array();
-        this.tabButtonElements = new Array();
-        this._attributesToForward = ['aria-label', 'aria-labelledby'];
-        this._selectedIndex = -1;
-        this._focusIndex = -1;
-        this.selectedIndexChange = new EventEmitter();
-    }
-    ngAfterViewInit() {
-        this.tabBarElement = this.tabBar.nativeElement;
-        this.setTabElements();
-        this.updateTabElementsOnChanges();
-        forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.tabBarElement);
-    }
-    onItemSelect(event) {
-        if (event.target !== this.tabBarElement) {
-            const targetTabNavItem = event.target.closest('button');
-            this.selectedIndex = this.tabButtonElements.indexOf(targetTabNavItem);
-        }
-    }
-    onKeydown(event) {
-        event.preventDefault();
-        this.focusIndex = this.keyboardHandlerService.handle(event, this.focusIndex, this.tabElements.length - 1, true);
-    }
-    selectTab(tabIndex) {
-        this.tabButtonElements.forEach((tabButtonElement, index) => {
-            tabButtonElement.setAttribute('aria-selected', index === tabIndex ? 'true' : 'false');
-        });
-    }
-    focusTab(focusIndex) {
-        this.tabButtonElements.forEach((tabButtonElement, index) => {
-            tabButtonElement.setAttribute('tabindex', index === focusIndex ? '0' : '-1');
-        });
-        if (0 <= focusIndex && focusIndex < this.tabButtonElements.length) {
-            this.tabButtonElements[focusIndex].focus();
-        }
-    }
-    scrollToTab(tabIndex) {
-        if (0 <= tabIndex && tabIndex < this.tabElements.length) {
-            const selectedTabElement = this.tabElements[tabIndex];
-            const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;
-            const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;
-            const tabBarElementWidth = this.tabBarElement.getBoundingClientRect().width;
-            this.window.nativeWindow.requestAnimationFrame(() => {
-                this.tabBarElement?.scrollTo({
-                    behavior: 'smooth',
-                    left: Math.max(0, selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2),
-                });
-            });
-        }
-    }
-    setTabElements() {
-        this.tabs.forEach((tab) => {
-            this.tabElements.push(tab.nativeElement);
-        });
-        this.tabElements.forEach((tabElement) => this.tabButtonElements.push(tabElement.querySelector('[role="tab"]')));
-        this.selectTab(this.selectedIndex);
-        this.focusTab(this.focusIndex);
-        setTimeout(() => {
-            this.scrollToTab(this.focusIndex);
-        }, this.DEBOUNCE_TIME_MS);
-    }
-    updateTabElementsOnChanges() {
-        this.tabs.changes.subscribe(() => {
-            this.tabElements = [];
-            this.tabButtonElements = [];
-            this.setTabElements();
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: TabNavigationComponent, isStandalone: true, 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 role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", 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-medium);position:absolute;height:1px;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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabNavigationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-tab-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", 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-medium);position:absolute;height:1px;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"] }]
-        }], ctorParameters: () => [{ type: i1.WindowRef }, { type: i2.KeyboardHandlerService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tabBar: [{
-                type: ViewChild,
-                args: ['tabBar']
-            }], tabs: [{
-                type: ContentChildren,
-                args: [TabNavigationItemComponent, { read: ElementRef }]
-            }], selectedIndex: [{
-                type: Input
-            }], selectedIndexChange: [{
-                type: Output
-            }], onItemSelect: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown.home', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.end', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.arrowright', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.arrowleft', ['$event']]
-            }] } });
-
-class TabNavigationModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: TabNavigationModule, imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabNavigationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent],
-                    exports: [TabNavigationComponent, TabNavigationItemComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, HostListener, Input, NgModule, Output, ViewChild } from "@angular/core";
+import { forwardAttributes } from "@kirbydesign/designsystem/shared";
+import * as i1 from "@kirbydesign/designsystem/types";
+import * as i2 from "@kirbydesign/designsystem/dropdown";
+import { CommonModule } from "@angular/common";
+var TabNavigationItemComponent = class TabNavigationItemComponent {
+	constructor(elementRef, renderer) {
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this._attributesToForward = ["aria-controls", "id"];
+		this.label = "";
+		this.truncate = true;
+	}
+	ngAfterViewInit() {
+		const tabElement = this.elementRef.nativeElement.querySelector("[role=\"tab\"]");
+		forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, tabElement);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabNavigationItemComponent,
+			deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: TabNavigationItemComponent,
+			isStandalone: true,
+			selector: "kirby-tab-navigation-item",
+			inputs: {
+				label: "label",
+				truncate: "truncate"
+			},
+			host: { attributes: { "role": "presentation" } },
+			ngImport: i0,
+			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",
+			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: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;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:2px;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"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TabNavigationItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-tab-navigation-item",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { role: "presentation" },
+			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",
+			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: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;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:2px;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"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }],
+	propDecorators: {
+		label: [{ type: Input }],
+		truncate: [{ type: Input }]
+	}
+});
+var TabNavigationComponent = class TabNavigationComponent {
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	set selectedIndex(index) {
+		if (index !== this._selectedIndex && index !== -1) {
+			this._selectedIndex = index;
+			if (!this.containsFocus()) this.focusIndex = index;
+			this.selectTab(this.selectedIndex);
+			this.scrollToTab(this.selectedIndex);
+			this.selectedIndexChange.emit(this.selectedIndex);
+		}
+	}
+	get focusIndex() {
+		return this._focusIndex;
+	}
+	set focusIndex(index) {
+		if (index !== this._focusIndex) {
+			this._focusIndex = index;
+			this.updateRovingTabindex();
+		}
+	}
+	constructor(window, keyboardHandlerService, renderer, elementRef) {
+		this.window = window;
+		this.keyboardHandlerService = keyboardHandlerService;
+		this.renderer = renderer;
+		this.elementRef = elementRef;
+		this.DEBOUNCE_TIME_MS = 250;
+		this.tabElements = new Array();
+		this.tabButtonElements = new Array();
+		this._attributesToForward = ["aria-label", "aria-labelledby"];
+		this._selectedIndex = -1;
+		this._focusIndex = -1;
+		this.selectedIndexChange = new EventEmitter();
+	}
+	ngAfterViewInit() {
+		this.tabBarElement = this.tabBar.nativeElement;
+		this.setTabElements();
+		this.updateTabElementsOnChanges();
+		forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.tabBarElement);
+	}
+	onItemSelect(event) {
+		this.selectedIndex = this.indexOfTabNavButton(event.target);
+	}
+	onKeydown(event) {
+		event.preventDefault();
+		this.focusIndex = this.keyboardHandlerService.handle(event, this.focusIndex, this.tabElements.length - 1, true);
+		this.scrollToTab(this.focusIndex);
+		this.focusTab(this.focusIndex);
+	}
+	onFocusIn(event) {
+		const focusedIndex = this.indexOfTabNavButton(event.target);
+		if (focusedIndex !== -1) this.focusIndex = focusedIndex;
+	}
+	onFocusOut(event) {
+		if (!this.elementRef.nativeElement.contains(event.relatedTarget)) this.focusIndex = this.selectedIndex;
+	}
+	selectTab(tabIndex) {
+		this.tabButtonElements.forEach((tabButtonElement, index) => {
+			tabButtonElement.setAttribute("aria-selected", index === tabIndex ? "true" : "false");
+		});
+	}
+	updateRovingTabindex() {
+		const tabStopIndex = this.isValidTabIndex(this.focusIndex) ? this.focusIndex : 0;
+		this.tabButtonElements.forEach((tabButtonElement, index) => {
+			tabButtonElement.setAttribute("tabindex", index === tabStopIndex ? "0" : "-1");
+		});
+	}
+	focusTab(tabIndex) {
+		if (this.isValidTabIndex(tabIndex)) this.tabButtonElements[tabIndex].focus();
+	}
+	indexOfTabNavButton(target) {
+		return this.tabButtonElements.indexOf(target.closest("[role=\"tab\"]"));
+	}
+	isValidTabIndex(tabIndex) {
+		return 0 <= tabIndex && tabIndex < this.tabButtonElements.length;
+	}
+	containsFocus() {
+		return this.elementRef.nativeElement.contains(document.activeElement);
+	}
+	scrollToTab(tabIndex) {
+		if (this.isValidTabIndex(tabIndex)) {
+			const selectedTabElement = this.tabElements[tabIndex];
+			const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;
+			const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;
+			const tabBarElementWidth = this.tabBarElement.getBoundingClientRect().width;
+			this.window.nativeWindow.requestAnimationFrame(() => {
+				this.tabBarElement?.scrollTo({
+					behavior: "smooth",
+					left: Math.max(0, selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2)
+				});
+			});
+		}
+	}
+	setTabElements() {
+		this.tabs.forEach((tab) => {
+			this.tabElements.push(tab.nativeElement);
+		});
+		this.tabElements.forEach((tabElement) => this.tabButtonElements.push(tabElement.querySelector("[role=\"tab\"]")));
+		this.selectTab(this.selectedIndex);
+		this.updateRovingTabindex();
+		setTimeout(() => {
+			this.scrollToTab(this.focusIndex);
+		}, this.DEBOUNCE_TIME_MS);
+	}
+	updateTabElementsOnChanges() {
+		this.tabs.changes.subscribe(() => {
+			this.tabElements = [];
+			this.tabButtonElements = [];
+			this.setTabElements();
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabNavigationComponent,
+			deps: [
+				{ token: i1.WindowRef },
+				{ token: i2.KeyboardHandlerService },
+				{ token: i0.Renderer2 },
+				{ token: i0.ElementRef }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: TabNavigationComponent,
+			isStandalone: true,
+			selector: "kirby-tab-navigation",
+			inputs: { selectedIndex: "selectedIndex" },
+			outputs: { selectedIndexChange: "selectedIndexChange" },
+			host: { listeners: {
+				"click": "onItemSelect($event)",
+				"keydown.home": "onKeydown($event)",
+				"keydown.end": "onKeydown($event)",
+				"keydown.arrowright": "onKeydown($event)",
+				"keydown.arrowleft": "onKeydown($event)",
+				"focusin": "onFocusIn($event)",
+				"focusout": "onFocusOut($event)"
+			} },
+			queries: [{
+				propertyName: "tabs",
+				predicate: TabNavigationItemComponent,
+				read: ElementRef
+			}],
+			viewQueries: [{
+				propertyName: "tabBar",
+				first: true,
+				predicate: ["tabBar"],
+				descendants: true
+			}],
+			ngImport: i0,
+			template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n",
+			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:1px;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"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TabNavigationComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-tab-navigation",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n",
+			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:1px;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"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i1.WindowRef },
+		{ type: i2.KeyboardHandlerService },
+		{ type: i0.Renderer2 },
+		{ type: i0.ElementRef }
+	],
+	propDecorators: {
+		tabBar: [{
+			type: ViewChild,
+			args: ["tabBar"]
+		}],
+		tabs: [{
+			type: ContentChildren,
+			args: [TabNavigationItemComponent, { read: ElementRef }]
+		}],
+		selectedIndex: [{ type: Input }],
+		selectedIndexChange: [{ type: Output }],
+		onItemSelect: [{
+			type: HostListener,
+			args: ["click", ["$event"]]
+		}],
+		onKeydown: [
+			{
+				type: HostListener,
+				args: ["keydown.home", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.end", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.arrowright", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.arrowleft", ["$event"]]
+			}
+		],
+		onFocusIn: [{
+			type: HostListener,
+			args: ["focusin", ["$event"]]
+		}],
+		onFocusOut: [{
+			type: HostListener,
+			args: ["focusout", ["$event"]]
+		}]
+	}
+});
+var TabNavigationModule = class TabNavigationModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabNavigationModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabNavigationModule,
+			imports: [
+				CommonModule,
+				TabNavigationComponent,
+				TabNavigationItemComponent
+			],
+			exports: [TabNavigationComponent, TabNavigationItemComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabNavigationModule,
+			imports: [CommonModule]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TabNavigationModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				TabNavigationComponent,
+				TabNavigationItemComponent
+			],
+			exports: [TabNavigationComponent, TabNavigationItemComponent]
+		}]
+	}]
+});
 export { TabNavigationComponent, TabNavigationItemComponent, TabNavigationModule };
-//# sourceMappingURL=kirbydesign-designsystem-tab-navigation.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-tab-navigation.mjs.map

package/fesm2022/kirbydesign-designsystem-tab-navigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-tab-navigation.mjs","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","../../tab-navigation/src/kirbydesign-designsystem-tab-navigation.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      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(\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  @HostListener('keydown.enter', ['$event'])\n  onItemSelect(event: PointerEvent) {\n    if (event.target !== this.tabBarElement) {\n      const targetTabNavItem = (event.target as HTMLElement).closest('button');\n      this.selectedIndex = this.tabButtonElements.indexOf(targetTabNavItem);\n    }\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  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.focusTab(this.focusIndex);\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;MAiBa,0BAA0B,CAAA;IASrC,WAAA,CACU,UAAmC,EACnC,QAAmB,EAAA;QADnB,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,QAAQ,GAAR,QAAQ;AAVV,QAAA,IAAA,CAAA,oBAAoB,GAAa,CAAC,eAAe,EAAE,IAAI,CAAC;QAGhE,IAAA,CAAA,KAAK,GAAG,EAAE;QAGV,IAAA,CAAA,QAAQ,GAAG,IAAI;IAKZ;IAEH,eAAe,GAAA;AACb,QAAA,MAAM,UAAU,GAAgB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAC,cAAc,CAAC;AAC3F,QAAA,iBAAiB,CACf,IAAI,CAAC,UAAU,CAAC,aAAa,EAC7B,IAAI,CAAC,oBAAoB,EACzB,IAAI,CAAC,QAAQ,EACb,UAAU,CACX;IACH;kIAtBW,0BAA0B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0BAA0B,yLCjBvC,qLAIA,EAAA,MAAA,EAAA,CAAA,+7CAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDaa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBAPtC,SAAS;+BACE,2BAA2B,EAAA,eAAA,EAGpB,uBAAuB,CAAC,MAAM,QACzC,EAAE,IAAI,EAAE,cAAc,EAAE,EAAA,QAAA,EAAA,qLAAA,EAAA,MAAA,EAAA,CAAA,+7CAAA,CAAA,EAAA;;sBAK7B;;sBAGA;;;MEEU,sBAAsB,CAAA;AAejC,IAAA,IACI,aAAa,GAAA;QACf,OAAO,IAAI,CAAC,cAAc;IAC5B;IAEA,IAAI,aAAa,CAAC,KAAa,EAAA;QAC7B,IAAI,KAAK,KAAK,IAAI,CAAC,cAAc,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;AACjD,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAE3B,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;AACvB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;YAClC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACnD;IACF;AAGA,IAAA,IAAI,UAAU,GAAA;QACZ,OAAO,IAAI,CAAC,WAAW;IACzB;IAEA,IAAI,UAAU,CAAC,KAAa,EAAA;AAC1B,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;AAC9B,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AAExB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AACjC,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;QAChC;IACF;AAMA,IAAA,WAAA,CACU,MAAiB,EACjB,sBAA8C,EAC9C,QAAmB,EACnB,UAAmC,EAAA;QAHnC,IAAA,CAAA,MAAM,GAAN,MAAM;QACN,IAAA,CAAA,sBAAsB,GAAtB,sBAAsB;QACtB,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,UAAU,GAAV,UAAU;QAnDJ,IAAA,CAAA,gBAAgB,GAAG,GAAG;AAS9B,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,KAAK,EAAe;AACtC,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,KAAK,EAAe;AAE5C,QAAA,IAAA,CAAA,oBAAoB,GAAa,CAAC,YAAY,EAAE,iBAAiB,CAAC;QAgBlE,IAAA,CAAA,cAAc,GAAG,CAAC,CAAC;QAcnB,IAAA,CAAA,WAAW,GAAG,CAAC,CAAC;AAGxB,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,YAAY,EAAU;IAO7C;IAEH,eAAe,GAAA;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa;QAC9C,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,0BAA0B,EAAE;AAEjC,QAAA,iBAAiB,CACf,IAAI,CAAC,UAAU,CAAC,aAAa,EAC7B,IAAI,CAAC,oBAAoB,EACzB,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,aAAa,CACnB;IACH;AAIA,IAAA,YAAY,CAAC,KAAmB,EAAA;QAC9B,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,EAAE;YACvC,MAAM,gBAAgB,GAAI,KAAK,CAAC,MAAsB,CAAC,OAAO,CAAC,QAAQ,CAAC;YACxE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;QACvE;IACF;AAMA,IAAA,SAAS,CAAC,KAAoB,EAAA;QAC5B,KAAK,CAAC,cAAc,EAAE;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAClD,KAAK,EACL,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAC3B,IAAI,CACL;IACH;AAEQ,IAAA,SAAS,CAAC,QAAgB,EAAA;QAChC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,KAAK,KAAI;AACzD,YAAA,gBAAgB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AACvF,QAAA,CAAC,CAAC;IACJ;AAEQ,IAAA,QAAQ,CAAC,UAAkB,EAAA;QACjC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,KAAK,KAAI;AACzD,YAAA,gBAAgB,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,KAAK,UAAU,GAAG,GAAG,GAAG,IAAI,CAAC;AAC9E,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,IAAI,UAAU,IAAI,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE;YACjE,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE;QAC5C;IACF;AAEQ,IAAA,WAAW,CAAC,QAAgB,EAAA;AAClC,QAAA,IAAI,CAAC,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;YACvD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC;YACrD,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,KAAK;AAChF,YAAA,MAAM,4BAA4B,GAAG,kBAAkB,CAAC,UAAU;YAClE,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK;YAE3E,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,qBAAqB,CAAC,MAAK;AAClD,gBAAA,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC;AAC3B,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,IAAI,EAAE,IAAI,CAAC,GAAG,CACZ,CAAC,EACD,4BAA4B,GAAG,CAAC,kBAAkB,GAAG,uBAAuB,IAAI,CAAC,CAClF;AACF,iBAAA,CAAC;AACJ,YAAA,CAAC,CAAC;QACJ;IACF;IAEQ,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;AAC1C,QAAA,CAAC,CAAC;QAEF,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,KAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CACtE;AAED,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;AAClC,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;QAE9B,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC;AACnC,QAAA,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;IAC3B;IAEQ,0BAA0B,GAAA;QAChC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,YAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE;YAC3B,IAAI,CAAC,cAAc,EAAE;AACvB,QAAA,CAAC,CAAC;IACJ;kIArJW,sBAAsB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,OAAA,EAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,oBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,SAAA,EAMhB,0BAA0B,EAAA,IAAA,EAAU,UAAU,+HC/BjE,uEAGA,EAAA,MAAA,EAAA,CAAA,uzBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDsBa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;+BACE,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,uEAAA,EAAA,MAAA,EAAA,CAAA,uzBAAA,CAAA,EAAA;;sBAK9C,SAAS;uBAAC,QAAQ;;sBAGlB,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,0BAA0B,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;;sBAShE;;sBA8BA;;sBAuBA,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC;;sBAChC,YAAY;uBAAC,eAAe,EAAE,CAAC,QAAQ,CAAC;;sBAQxC,YAAY;uBAAC,cAAc,EAAE,CAAC,QAAQ,CAAC;;sBACvC,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC;;sBACtC,YAAY;uBAAC,oBAAoB,EAAE,CAAC,QAAQ,CAAC;;sBAC7C,YAAY;uBAAC,mBAAmB,EAAE,CAAC,QAAQ,CAAC;;;MEhGlC,mBAAmB,CAAA;kIAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;mIAAnB,mBAAmB,EAAA,OAAA,EAAA,CAHpB,YAAY,EAAE,sBAAsB,EAAE,0BAA0B,CAAA,EAAA,OAAA,EAAA,CAChE,sBAAsB,EAAE,0BAA0B,CAAA,EAAA,CAAA,CAAA;AAEjD,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAHpB,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAGX,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAJ/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,sBAAsB,EAAE,0BAA0B,CAAC;AAC3E,oBAAA,OAAO,EAAE,CAAC,sBAAsB,EAAE,0BAA0B,CAAC;AAC9D,iBAAA;;;ACRD;;AAEG;;;;"}
+{"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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"}