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

package/fesm2022/kirbydesign-designsystem-tabs.mjs

@@ -1,122 +1,287 @@
-import * as i0 from '@angular/core';
-import { Injectable, ViewChild, HostBinding, Component, EventEmitter, ContentChildren, Output, Input, NgModule } from '@angular/core';
-import { IonTabs, IonTabBar, IonTabButton } from '@ionic/angular';
-export { IonRouterOutlet } from '@ionic/angular';
-import { ReplaySubject } from 'rxjs';
-import { IconComponent, IconModule } from '@kirbydesign/designsystem/icon';
-import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, HostBinding, Injectable, Input, NgModule, Output, ViewChild } from "@angular/core";
+import { IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from "@ionic/angular";
+import { ReplaySubject } from "rxjs";
+import { IconComponent, IconModule } from "@kirbydesign/designsystem/icon";
+import { CommonModule } from "@angular/common";
+var TabsService = class TabsService {
+	constructor() {
+		this.outletSubject$ = new ReplaySubject(1);
+		this.outlet$ = this.outletSubject$.asObservable();
+	}
+	setOutlet(outlet) {
+		this.outletSubject$.next(outlet);
+	}
+	resetOutlet() {
+		this.outletSubject$.next(null);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabsService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabsService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TabsService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var TabsComponent = class TabsComponent {
+	constructor(tabsService) {
+		this.tabsService = tabsService;
+		this.tabBarBottomHidden = false;
+	}
+	ngAfterViewInit() {
+		this.tabsService.setOutlet(this.tabs.outlet);
+	}
+	ngOnDestroy() {
+		this.tabsService.resetOutlet();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabsComponent,
+			deps: [{ token: TabsService }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: TabsComponent,
+			isStandalone: true,
+			selector: "kirby-tab-bar",
+			host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } },
+			viewQueries: [{
+				propertyName: "tabs",
+				first: true,
+				predicate: IonTabs,
+				descendants: true,
+				static: true
+			}],
+			ngImport: i0,
+			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",
+			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: 1px 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"],
+			dependencies: [{
+				kind: "component",
+				type: IonTabs,
+				selector: "ion-tabs"
+			}, {
+				kind: "component",
+				type: IonTabBar,
+				selector: "ion-tab-bar",
+				inputs: [
+					"color",
+					"mode",
+					"selectedTab",
+					"translucent"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TabsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-tab-bar",
+			imports: [IonTabs, IonTabBar],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			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",
+			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: 1px 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"]
+		}]
+	}],
+	ctorParameters: () => [{ type: TabsService }],
+	propDecorators: {
+		tabBarBottomHidden: [{
+			type: HostBinding,
+			args: ["class.tab-bar-bottom-hidden"]
+		}],
+		tabs: [{
+			type: ViewChild,
+			args: [IonTabs, { static: true }]
+		}]
+	}
+});
+const selectedTabClickEvent = "kirbySelectedTabClick";
+var TabButtonComponent = class TabButtonComponent {
+	constructor() {
+		this.click = new EventEmitter();
+	}
+	onClick(event, isSelected) {
+		this.click.emit(event);
+		if (isSelected) {
+			const clickEvent = new CustomEvent(selectedTabClickEvent);
+			dispatchEvent(clickEvent);
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabButtonComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: TabButtonComponent,
+			isStandalone: true,
+			selector: "kirby-tab-button",
+			inputs: { tab: "tab" },
+			outputs: { click: "click" },
+			queries: [{
+				propertyName: "icons",
+				predicate: IconComponent
+			}],
+			ngImport: i0,
+			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",
+			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"],
+			dependencies: [{
+				kind: "component",
+				type: IonTabButton,
+				selector: "ion-tab-button",
+				inputs: [
+					"disabled",
+					"download",
+					"href",
+					"layout",
+					"mode",
+					"rel",
+					"selected",
+					"tab",
+					"target"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TabButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-tab-button",
+			imports: [IonTabButton],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			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",
+			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"]
+		}]
+	}],
+	propDecorators: {
+		tab: [{ type: Input }],
+		click: [{ type: Output }],
+		icons: [{
+			type: ContentChildren,
+			args: [IconComponent]
+		}]
+	}
+});
+var TabsModule = class TabsModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabsModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabsModule,
+			imports: [
+				IconModule,
+				CommonModule,
+				IonTabs,
+				IonTabBar,
+				IonTabButton,
+				TabsComponent,
+				TabButtonComponent
+			],
+			exports: [TabsComponent, TabButtonComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TabsModule,
+			providers: [TabsService],
+			imports: [
+				IconModule,
+				CommonModule,
+				IonTabs,
+				IonTabBar,
+				IonTabButton,
+				TabsComponent,
+				TabButtonComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TabsModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				IconModule,
+				CommonModule,
+				IonTabs,
+				IonTabBar,
+				IonTabButton,
+				TabsComponent,
+				TabButtonComponent
+			],
+			providers: [TabsService],
+			exports: [TabsComponent, TabButtonComponent]
+		}]
+	}]
+});
+export { IonRouterOutlet, TabButtonComponent, TabsComponent, TabsModule, TabsService, selectedTabClickEvent };
 
-class TabsService {
-    constructor() {
-        this.outletSubject$ = new ReplaySubject(1);
-        this.outlet$ = this.outletSubject$.asObservable();
-    }
-    setOutlet(outlet) {
-        this.outletSubject$.next(outlet);
-    }
-    resetOutlet() {
-        this.outletSubject$.next(null);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class TabsComponent {
-    constructor(tabsService) {
-        this.tabsService = tabsService;
-        this.tabBarBottomHidden = false;
-    }
-    ngAfterViewInit() {
-        this.tabsService.setOutlet(this.tabs.outlet);
-    }
-    ngOnDestroy() {
-        this.tabsService.resetOutlet();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: TabsComponent, isStandalone: true, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", 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: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);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"], dependencies: [{ kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-tab-bar', imports: [IonTabs, IonTabBar], template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", 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: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);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"] }]
-        }], ctorParameters: () => [{ type: TabsService }], propDecorators: { tabBarBottomHidden: [{
-                type: HostBinding,
-                args: ['class.tab-bar-bottom-hidden']
-            }], tabs: [{
-                type: ViewChild,
-                args: [IonTabs, { static: true }]
-            }] } });
-
-const selectedTabClickEvent = 'kirbySelectedTabClick';
-
-class TabButtonComponent {
-    constructor() {
-        this.click = new EventEmitter();
-    }
-    onClick(event, isSelected) {
-        this.click.emit(event);
-        if (isSelected) {
-            const clickEvent = new CustomEvent(selectedTabClickEvent);
-            dispatchEvent(clickEvent);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: TabButtonComponent, isStandalone: true, selector: "kirby-tab-button", inputs: { tab: "tab" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, 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", 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{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(96%, 96%, 96%)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(92%, 92%, 92%)}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-text-color-semi-dark);--color-selected: var(--kirby-black);--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"], dependencies: [{ kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-tab-button', imports: [IonTabButton], 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", 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{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(96%, 96%, 96%)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(92%, 92%, 92%)}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-text-color-semi-dark);--color-selected: var(--kirby-black);--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"] }]
-        }], propDecorators: { tab: [{
-                type: Input
-            }], click: [{
-                type: Output
-            }], icons: [{
-                type: ContentChildren,
-                args: [IconComponent]
-            }] } });
-
-class TabsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: TabsModule, imports: [IconModule,
-            CommonModule,
-            IonTabs,
-            IonTabBar,
-            IonTabButton,
-            TabsComponent,
-            TabButtonComponent], exports: [TabsComponent, TabButtonComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule,
-            CommonModule,
-            IonTabs,
-            IonTabBar,
-            IonTabButton,
-            TabsComponent,
-            TabButtonComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: TabsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        IconModule,
-                        CommonModule,
-                        IonTabs,
-                        IonTabBar,
-                        IonTabButton,
-                        TabsComponent,
-                        TabButtonComponent,
-                    ],
-                    providers: [TabsService],
-                    exports: [TabsComponent, TabButtonComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { TabButtonComponent, TabsComponent, TabsModule, TabsService, selectedTabClickEvent };
-//# sourceMappingURL=kirbydesign-designsystem-tabs.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-tabs.mjs.map

package/fesm2022/kirbydesign-designsystem-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-tabs.mjs","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","../../tabs/src/kirbydesign-designsystem-tabs.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 { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } 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})\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.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import { Component, ContentChildren, EventEmitter, Input, Output, QueryList } 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})\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.TabsService"],"mappings":"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"}
+{"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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"}