npm - @kirbydesign/designsystem - Versions diffs - 10.1.3 → 10.2.1 - Mend

@kirbydesign/designsystem 10.1.3 → 10.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

package/fesm2022/kirbydesign-designsystem-slide.mjs CHANGED Viewed

@@ -3,18 +3,19 @@ import { Directive, EventEmitter, TemplateRef, Component, ChangeDetectionStrateg
 import { register } from 'swiper/element/bundle';
 import * as i1 from '@kirbydesign/designsystem/helpers';
 import { UniqueIdGenerator, DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
-import * as i2 from '@angular/common';
+import * as i2 from '@kirbydesign/designsystem/shared';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@kirbydesign/designsystem/button';
+import * as i4 from '@kirbydesign/designsystem/button';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import * as i4 from '@kirbydesign/designsystem/icon';
+import * as i5 from '@kirbydesign/designsystem/icon';
 import { IconModule } from '@kirbydesign/designsystem/icon';
 class SlideDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SlideDirective, selector: "[kirbySlide]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SlideDirective, selector: "[kirbySlide]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbySlide]',
@@ -26,9 +27,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 // https://swiperjs.com/element
 register();
 class SlidesComponent {
-    constructor(platform, cdr) {
+    constructor(platform, cdr, translations) {
         this.platform = platform;
         this.cdr = cdr;
+        this.translations = translations;
         this.showNavigation = true;
         this.slideChange = new EventEmitter();
         this._paginationId = UniqueIdGenerator.scopedTo('pagination').next();
@@ -89,18 +91,22 @@ class SlidesComponent {
                     });
                 },
             },
+            a11y: {
+                prevSlideMessage: this.translations.get('previousSlide'),
+                nextSlideMessage: this.translations.get('nextSlide'),
+            },
         };
     }
     getNoControlsConfig() {
         return { ...this.getDefaultConfig(), pagination: false, navigation: false };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SlidesComponent, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SlidesComponent, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i5.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlidesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlidesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i0.ChangeDetectorRef }], propDecorators: { swiperContainer: [{
+        }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i0.ChangeDetectorRef }, { type: i2.TranslationService }], propDecorators: { swiperContainer: [{
                 type: ViewChild,
                 args: ['swiperContainer']
             }], slideTemplate: [{
@@ -124,10 +130,10 @@ class SlideStretchHeightDirective {
         this.renderer = renderer;
         this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideStretchHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SlideStretchHeightDirective, selector: "[slideStretchHeight]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideStretchHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SlideStretchHeightDirective, selector: "[slideStretchHeight]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideStretchHeightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideStretchHeightDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -137,11 +143,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
 const declarations = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];
 class SlideModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SlideModule, declarations: [SlidesComponent, SlideDirective, SlideStretchHeightDirective], imports: [CommonModule, ButtonComponent, IconModule], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SlideModule, declarations: [SlidesComponent, SlideDirective, SlideStretchHeightDirective], imports: [CommonModule, ButtonComponent, IconModule], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SlideModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...declarations],

package/fesm2022/kirbydesign-designsystem-slide.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-slide.mjs","sources":["../../slide/src/slide.directive.ts","../../slide/src/slides.component.ts","../../slide/src/slides.component.html","../../slide/src/slide-stretch-height.directive.ts","../../slide/src/slide.module.ts","../../slide/src/kirbydesign-designsystem-slide.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[kirbySlide]',\n})\nexport class SlideDirective {}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\nimport { Swiper, SwiperOptions } from 'swiper';\nimport { register } from 'swiper/element/bundle';\nimport {\n DesignTokenHelper,\n PlatformService,\n UniqueIdGenerator,\n} from '@kirbydesign/designsystem/helpers';\nimport { SlideDirective } from './slide.directive';\n\n// Swiper is not an Angular library,\n// so we need to use their web components and register them manually.\n// https://swiperjs.com/element\nregister();\n\nexport type SelectedSlide = {\n slide: any;\n index: number;\n};\n\nexport type KirbySwiperOptions = SwiperOptions;\ntype SwiperContainer = HTMLElement & { initialize: () => void; swiper: Swiper };\n\n@Component({\n selector: 'kirby-slides',\n templateUrl: './slides.component.html',\n styleUrls: ['./slides.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SlidesComponent implements OnInit, AfterViewInit, OnChanges {\n constructor(private platform: PlatformService, private cdr: ChangeDetectorRef) {}\n\n @ViewChild('swiperContainer') swiperContainer: ElementRef<SwiperContainer>;\n @ContentChild(SlideDirective, { static: true, read: TemplateRef })\n public slideTemplate: TemplateRef<SlideDirective>;\n\n @Input() slidesOptions?: KirbySwiperOptions;\n @Input() title: string;\n @Input() slides: unknown[];\n\n @Input() showNavigation: boolean = true;\n\n @Output() slideChange = new EventEmitter<SelectedSlide>();\n\n _paginationId = UniqueIdGenerator.scopedTo('pagination').next();\n _prevButtonId = UniqueIdGenerator.scopedTo('swiper-button-prev').next();\n _nextButtonId = UniqueIdGenerator.scopedTo('swiper-button-next').next();\n _isTouch: boolean;\n\n ngOnInit() {\n this._isTouch = this.platform.isTouch();\n }\n\n ngAfterViewInit() {\n const defaultConfig = this.showNavigation\n ? this.getDefaultConfig()\n : this.getNoControlsConfig();\n\n const config = { ...defaultConfig, ...this.slidesOptions };\n\n Object.assign(this.swiperContainer.nativeElement, config);\n\n this.swiperContainer.nativeElement.initialize();\n }\n\n public slideTo(index: number) {\n this.swiperContainer.nativeElement.swiper.slideTo(index);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.slides?.firstChange === false) {\n this.cdr.detectChanges();\n this.swiperContainer.nativeElement.swiper.updateSlides();\n }\n }\n\n private getDefaultConfig(): KirbySwiperOptions {\n const desktopBreakpoint = parseInt(DesignTokenHelper.breakpoints.medium);\n const spaceBetween = parseInt(DesignTokenHelper.size('s'));\n const transitionDuration = parseInt(DesignTokenHelper.transitionDuration('long'));\n return {\n centeredSlides: true,\n centeredSlidesBounds: true,\n slidesPerView: 1.2,\n slidesPerGroup: 1,\n breakpoints: {\n [desktopBreakpoint]: {\n centeredSlides: false,\n slidesPerView: 3,\n slidesPerGroup: 3,\n },\n },\n spaceBetween: spaceBetween,\n speed: transitionDuration,\n pagination: {\n el: `.${this._paginationId}`,\n type: 'bullets',\n },\n navigation: {\n nextEl: `.${this._nextButtonId}`,\n prevEl: `.${this._prevButtonId}`,\n },\n on: {\n slideChange: (swiper) => {\n this.slideChange.emit({\n slide: this.slides[swiper.activeIndex],\n index: swiper.activeIndex,\n });\n },\n },\n };\n }\n\n private getNoControlsConfig(): KirbySwiperOptions {\n return { ...this.getDefaultConfig(), pagination: false, navigation: false };\n }\n}\n","<div class=\"navigation\" ngIf=\"showNavigation \|\| title !== undefined\">\n <span class=\"kirby-text-medium\">{{ title }}</span>\n\n <div\n class=\"navigation-inner\"\n ngIf=\"\n showNavigation &&\n (!slidesOptions \|\|\n slidesOptions?.navigation === undefined \|\|\n slidesOptions?.pagination === undefined)\n \"\n >\n <div\n class=\"pagination\"\n [ngClass]=\"_paginationId\"\n ngIf=\"!slidesOptions \|\| slidesOptions?.pagination === undefined\"\n ></div>\n <div\n class=\"buttons\"\n ngIf=\"!_isTouch && (!slidesOptions \|\| slidesOptions?.navigation === undefined)\"\n >\n <button\n kirby-button\n attentionLevel=\"3\"\n class=\"nav-prev swiper-button-prev\"\n [ngClass]=\"_prevButtonId\"\n size=\"xs\"\n >\n <kirby-icon name=\"arrow-back\"></kirby-icon>\n </button>\n\n <button\n kirby-button\n attentionLevel=\"3\"\n class=\"nav-next swiper-button-next\"\n [ngClass]=\"_nextButtonId\"\n size=\"xs\"\n >\n <kirby-icon name=\"arrow-more\"></kirby-icon>\n </button>\n\n <ng-content select=\"button[kirby-button]\"></ng-content>\n </div>\n </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n <swiper-slide ngFor=\"let slide of slides; let i = index\">\n <ng-container\n ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n ></ng-container>\n </swiper-slide>\n</swiper-container>\n","import { Directive, ElementRef, Renderer2 } from '@angular/core';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[slideStretchHeight]',\n})\nexport class SlideStretchHeightDirective {\n constructor(private elementRef: ElementRef, private renderer: Renderer2) {\n this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\n\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { SlidesComponent } from './slides.component';\nimport { SlideDirective } from './slide.directive';\nimport { SlideStretchHeightDirective } from './slide-stretch-height.directive';\n\nconst declarations = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];\n\n@NgModule({\n declarations: [...declarations],\n imports: [CommonModule, ButtonComponent, IconModule],\n exports: [...declarations],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class SlideModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-slide.mjs","sources":["../../slide/src/slide.directive.ts","../../slide/src/slides.component.ts","../../slide/src/slides.component.html","../../slide/src/slide-stretch-height.directive.ts","../../slide/src/slide.module.ts","../../slide/src/kirbydesign-designsystem-slide.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n selector: '[kirbySlide]',\n})\nexport class SlideDirective {}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\nimport { Swiper, SwiperOptions } from 'swiper';\nimport { register } from 'swiper/element/bundle';\nimport {\n DesignTokenHelper,\n PlatformService,\n UniqueIdGenerator,\n} from '@kirbydesign/designsystem/helpers';\nimport { TranslationService } from '@kirbydesign/designsystem/shared';\nimport { SlideDirective } from './slide.directive';\n\n// Swiper is not an Angular library,\n// so we need to use their web components and register them manually.\n// https://swiperjs.com/element\nregister();\n\nexport type SelectedSlide = {\n slide: any;\n index: number;\n};\n\nexport type KirbySwiperOptions = SwiperOptions;\ntype SwiperContainer = HTMLElement & { initialize: () => void; swiper: Swiper };\n\n@Component({\n selector: 'kirby-slides',\n templateUrl: './slides.component.html',\n styleUrls: ['./slides.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SlidesComponent implements OnInit, AfterViewInit, OnChanges {\n constructor(\n private platform: PlatformService,\n private cdr: ChangeDetectorRef,\n private translations: TranslationService\n ) {}\n\n @ViewChild('swiperContainer') swiperContainer: ElementRef<SwiperContainer>;\n @ContentChild(SlideDirective, { static: true, read: TemplateRef })\n public slideTemplate: TemplateRef<SlideDirective>;\n\n @Input() slidesOptions?: KirbySwiperOptions;\n @Input() title: string;\n @Input() slides: unknown[];\n\n @Input() showNavigation: boolean = true;\n\n @Output() slideChange = new EventEmitter<SelectedSlide>();\n\n _paginationId = UniqueIdGenerator.scopedTo('pagination').next();\n _prevButtonId = UniqueIdGenerator.scopedTo('swiper-button-prev').next();\n _nextButtonId = UniqueIdGenerator.scopedTo('swiper-button-next').next();\n _isTouch: boolean;\n\n ngOnInit() {\n this._isTouch = this.platform.isTouch();\n }\n\n ngAfterViewInit() {\n const defaultConfig = this.showNavigation\n ? this.getDefaultConfig()\n : this.getNoControlsConfig();\n\n const config = { ...defaultConfig, ...this.slidesOptions };\n\n Object.assign(this.swiperContainer.nativeElement, config);\n\n this.swiperContainer.nativeElement.initialize();\n }\n\n public slideTo(index: number) {\n this.swiperContainer.nativeElement.swiper.slideTo(index);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.slides?.firstChange === false) {\n this.cdr.detectChanges();\n this.swiperContainer.nativeElement.swiper.updateSlides();\n }\n }\n\n private getDefaultConfig(): KirbySwiperOptions {\n const desktopBreakpoint = parseInt(DesignTokenHelper.breakpoints.medium);\n const spaceBetween = parseInt(DesignTokenHelper.size('s'));\n const transitionDuration = parseInt(DesignTokenHelper.transitionDuration('long'));\n return {\n centeredSlides: true,\n centeredSlidesBounds: true,\n slidesPerView: 1.2,\n slidesPerGroup: 1,\n breakpoints: {\n [desktopBreakpoint]: {\n centeredSlides: false,\n slidesPerView: 3,\n slidesPerGroup: 3,\n },\n },\n spaceBetween: spaceBetween,\n speed: transitionDuration,\n pagination: {\n el: `.${this._paginationId}`,\n type: 'bullets',\n },\n navigation: {\n nextEl: `.${this._nextButtonId}`,\n prevEl: `.${this._prevButtonId}`,\n },\n on: {\n slideChange: (swiper) => {\n this.slideChange.emit({\n slide: this.slides[swiper.activeIndex],\n index: swiper.activeIndex,\n });\n },\n },\n a11y: {\n prevSlideMessage: this.translations.get('previousSlide'),\n nextSlideMessage: this.translations.get('nextSlide'),\n },\n };\n }\n\n private getNoControlsConfig(): KirbySwiperOptions {\n return { ...this.getDefaultConfig(), pagination: false, navigation: false };\n }\n}\n","<div class=\"navigation\" ngIf=\"showNavigation \|\| title !== undefined\">\n <span class=\"kirby-text-medium\">{{ title }}</span>\n\n <div\n class=\"navigation-inner\"\n ngIf=\"\n showNavigation &&\n (!slidesOptions \|\|\n slidesOptions?.navigation === undefined \|\|\n slidesOptions?.pagination === undefined)\n \"\n >\n <div\n class=\"pagination\"\n [ngClass]=\"_paginationId\"\n ngIf=\"!slidesOptions \|\| slidesOptions?.pagination === undefined\"\n ></div>\n <div\n class=\"buttons\"\n ngIf=\"!_isTouch && (!slidesOptions \|\| slidesOptions?.navigation === undefined)\"\n >\n <button\n kirby-button\n attentionLevel=\"3\"\n class=\"nav-prev swiper-button-prev\"\n [ngClass]=\"_prevButtonId\"\n size=\"xs\"\n >\n <kirby-icon name=\"arrow-back\"></kirby-icon>\n </button>\n\n <button\n kirby-button\n attentionLevel=\"3\"\n class=\"nav-next swiper-button-next\"\n [ngClass]=\"_nextButtonId\"\n size=\"xs\"\n >\n <kirby-icon name=\"arrow-more\"></kirby-icon>\n </button>\n\n <ng-content select=\"button[kirby-button]\"></ng-content>\n </div>\n </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n <swiper-slide ngFor=\"let slide of slides; let i = index\">\n <ng-container\n ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n ></ng-container>\n </swiper-slide>\n</swiper-container>\n","import { Directive, ElementRef, Renderer2 } from '@angular/core';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: '[slideStretchHeight]',\n})\nexport class SlideStretchHeightDirective {\n constructor(\n private elementRef: ElementRef,\n private renderer: Renderer2\n ) {\n this.renderer.setStyle(this.elementRef.nativeElement, 'height', '100%');\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\n\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { SlidesComponent } from './slides.component';\nimport { SlideDirective } from './slide.directive';\nimport { SlideStretchHeightDirective } from './slide-stretch-height.directive';\n\nconst declarations = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];\n\n@NgModule({\n declarations: [...declarations],\n imports: [CommonModule, ButtonComponent, IconModule],\n exports: [...declarations],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class SlideModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-spinner.mjs CHANGED Viewed

@@ -3,20 +3,20 @@ import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 class SpinnerComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SpinnerComponent, selector: "kirby-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <div class=\"inner-circle\"></div>\n  <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:32px;height:32px;position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:50%;background-color:var(--kirby-primary);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SpinnerComponent, selector: "kirby-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <div class=\"inner-circle\"></div>\n  <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:32px;height:32px;position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:50%;background-color:var(--kirby-primary);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"spinner\">\n  <div class=\"inner-circle\"></div>\n  <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:32px;height:32px;position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:50%;background-color:var(--kirby-primary);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"] }]
         }] });
 class SpinnerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule], exports: [SpinnerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule], exports: [SpinnerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SpinnerComponent],

package/fesm2022/kirbydesign-designsystem-spinner.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-spinner.mjs","sources":["../../spinner/src/spinner.component.ts","../../spinner/src/spinner.component.html","../../spinner/src/spinner.module.ts","../../spinner/src/kirbydesign-designsystem-spinner.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'kirby-spinner',\n templateUrl: './spinner.component.html',\n styleUrls: ['./spinner.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpinnerComponent {}\n","<div class=\"spinner\">\n <div class=\"inner-circle\"></div>\n <div class=\"outer-circle\"></div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { SpinnerComponent } from './spinner.component';\n\n@NgModule({\n declarations: [SpinnerComponent],\n imports: [CommonModule],\n exports: [SpinnerComponent],\n providers: [],\n})\nexport class SpinnerModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;MAQa,gBAAgB,CAAA;~~iIAAhB~~,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,IAAA,EAAA,gBAAgB,qDCR7B,+GAIA,EAAA,MAAA,EAAA,CAAA,6XAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;~~2FDIa~~,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;+BACE,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+GAAA,EAAA,MAAA,EAAA,CAAA,6XAAA,CAAA,EAAA,CAAA;;;MEKpC,aAAa,CAAA;~~iIAAb~~,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,EALT,YAAA,EAAA,CAAA,gBAAgB,CACrB,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,gBAAgB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGf,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,YAJd,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;~~2FAIX~~,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,gBAAgB,CAAC;oBAChC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC3B,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-spinner.mjs","sources":["../../spinner/src/spinner.component.ts","../../spinner/src/spinner.component.html","../../spinner/src/spinner.module.ts","../../spinner/src/kirbydesign-designsystem-spinner.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'kirby-spinner',\n templateUrl: './spinner.component.html',\n styleUrls: ['./spinner.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpinnerComponent {}\n","<div class=\"spinner\">\n <div class=\"inner-circle\"></div>\n <div class=\"outer-circle\"></div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { SpinnerComponent } from './spinner.component';\n\n@NgModule({\n declarations: [SpinnerComponent],\n imports: [CommonModule],\n exports: [SpinnerComponent],\n providers: [],\n})\nexport class SpinnerModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;MAQa,gBAAgB,CAAA;kIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,qDCR7B,+GAIA,EAAA,MAAA,EAAA,CAAA,6XAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FDIa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;+BACE,eAAe,EAAA,eAAA,EAGR,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,+GAAA,EAAA,MAAA,EAAA,CAAA,6XAAA,CAAA,EAAA,CAAA;;;MEKpC,aAAa,CAAA;kIAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAb,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,aAAa,EALT,YAAA,EAAA,CAAA,gBAAgB,CACrB,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,gBAAgB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGf,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,aAAa,YAJd,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAIX,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,gBAAgB,CAAC;oBAChC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC3B,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}

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

@@ -10,10 +10,10 @@ class TabNavigationItemComponent {
         this.truncate = true;
         /* */
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabNavigationItemComponent, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, ngImport: i0, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabNavigationItemComponent, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, ngImport: i0, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{
@@ -115,10 +115,10 @@ class TabNavigationComponent {
             this.setTabElements();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabNavigationComponent, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":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:1;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:12px;-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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabNavigationComponent, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":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:1;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:12px;-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: "18.2.8", ngImport: i0, type: TabNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: [":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:1;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:12px;-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 }], propDecorators: { tabBar: [{
@@ -152,11 +152,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }] } });
 class TabNavigationModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationModule, declarations: [TabNavigationComponent, TabNavigationItemComponent], imports: [CommonModule], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TabNavigationModule, declarations: [TabNavigationComponent, TabNavigationItemComponent], imports: [CommonModule], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

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

	@@ -1 +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 { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-tab-navigation-item',\n templateUrl: './tab-navigation-item.component.html',\n styleUrls: ['./tab-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationItemComponent {\n @Input()\n label = '';\n\n @Input()\n truncate = true;\n\n constructor() {\n /* /\n }\n}\n","<button role=\"tab\" #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 ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { TabNavigationItemComponent } from '../tab-navigation-item/tab-navigation-item.component';\n\n@Component({\n selector: 'kirby-tab-navigation',\n templateUrl: './tab-navigation.component.html',\n styleUrls: ['./tab-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationComponent implements AfterViewInit {\n public readonly DEBOUNCE_TIME_MS = 250;\n\n @ViewChild('tabBar')\n private tabBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabNavigationItemComponent, { read: ElementRef })\n private tabs: QueryList<ElementRef<HTMLElement>>;\n\n private tabBarElement: HTMLElement;\n private tabElements = new Array<HTMLElement>();\n private tabButtonElements = new Array<HTMLElement>();\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex && 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(private window: WindowRef, private keyboardHandlerService: KeyboardHandlerService) {\n //\n }\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.setTabElements();\n this.updateTabElementsOnChanges();\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],\n declarations: [TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
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 { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-tab-navigation-item',\n templateUrl: './tab-navigation-item.component.html',\n styleUrls: ['./tab-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationItemComponent {\n @Input()\n label = '';\n\n @Input()\n truncate = true;\n\n constructor() {\n /* /\n }\n}\n","<button role=\"tab\" #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 ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { TabNavigationItemComponent } from '../tab-navigation-item/tab-navigation-item.component';\n\n@Component({\n selector: 'kirby-tab-navigation',\n templateUrl: './tab-navigation.component.html',\n styleUrls: ['./tab-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationComponent implements AfterViewInit {\n public readonly DEBOUNCE_TIME_MS = 250;\n\n @ViewChild('tabBar')\n private tabBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabNavigationItemComponent, { read: ElementRef })\n private tabs: QueryList<ElementRef<HTMLElement>>;\n\n private tabBarElement: HTMLElement;\n private tabElements = new Array<HTMLElement>();\n private tabButtonElements = new Array<HTMLElement>();\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex && 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 ) {\n //\n }\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.setTabElements();\n this.updateTabElementsOnChanges();\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],\n declarations: [TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;MAQa,0BAA0B,CAAA;AAOrC,IAAA,WAAA,GAAA;QALA,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QAGX,IAAQ,CAAA,QAAA,GAAG,IAAI,CAAC;;KAIf;kIATU,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA1B,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,0BAA0B,mHCRvC,qKAIA,EAAA,MAAA,EAAA,CAAA,68BAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FDIa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBANtC,SAAS;+BACE,2BAA2B,EAAA,eAAA,EAGpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qKAAA,EAAA,MAAA,EAAA,CAAA,68BAAA,CAAA,EAAA,CAAA;wDAI/C,KAAK,EAAA,CAAA;sBADJ,KAAK;gBAIN,QAAQ,EAAA,CAAA;sBADP,KAAK;;;MEWK,sBAAsB,CAAA;AAajC,IAAA,IACI,aAAa,GAAA;QACf,OAAO,IAAI,CAAC,cAAc,CAAC;KAC5B;IAED,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,CAAC;AAE5B,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;AACxB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YACnC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SACnD;KACF;AAGD,IAAA,IAAI,UAAU,GAAA;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;KACzB;IAED,IAAI,UAAU,CAAC,KAAa,EAAA;AAC1B,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;AAC9B,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;AAEzB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAClC,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAChC;KACF;IAMD,WACU,CAAA,MAAiB,EACjB,sBAA8C,EAAA;QAD9C,IAAM,CAAA,MAAA,GAAN,MAAM,CAAW;QACjB,IAAsB,CAAA,sBAAA,GAAtB,sBAAsB,CAAwB;QA/CxC,IAAgB,CAAA,gBAAA,GAAG,GAAG,CAAC;AAS/B,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,KAAK,EAAe,CAAC;AACvC,QAAA,IAAA,CAAA,iBAAiB,GAAG,IAAI,KAAK,EAAe,CAAC;QAgB7C,IAAc,CAAA,cAAA,GAAG,CAAC,CAAC,CAAC;QAcpB,IAAW,CAAA,WAAA,GAAG,CAAC,CAAC,CAAC;AAGzB,QAAA,IAAA,CAAA,mBAAmB,GAAG,IAAI,YAAY,EAAU,CAAC;;KAOhD;IAED,eAAe,GAAA;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;QAC/C,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,0BAA0B,EAAE,CAAC;KACnC;AAID,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,CAAC;YACzE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;SACvE;KACF;AAMD,IAAA,SAAS,CAAC,KAAoB,EAAA;QAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,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,CAAC;KACH;AAEO,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,CAAC;AACxF,SAAC,CAAC,CAAC;KACJ;AAEO,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,CAAC;AAC/E,SAAC,CAAC,CAAC;AAEH,QAAA,IAAI,CAAC,IAAI,UAAU,IAAI,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE;YACjE,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;SAC5C;KACF;AAEO,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,CAAC;YACtD,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;AACjF,YAAA,MAAM,4BAA4B,GAAG,kBAAkB,CAAC,UAAU,CAAC;YACnE,MAAM,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAE5E,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,CAAC;AACL,aAAC,CAAC,CAAC;SACJ;KACF;IAEO,cAAc,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;YACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AAC3C,SAAC,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,KAClC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,CACtE,CAAC;AAEF,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACnC,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAE/B,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACpC,SAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC3B;IAEO,0BAA0B,GAAA;QAChC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAK;AAC/B,YAAA,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;AACtB,YAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC;YAC5B,IAAI,CAAC,cAAc,EAAE,CAAC;AACxB,SAAC,CAAC,CAAC;KACJ;kIA5IU,sBAAsB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAtB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sBAAsB,EAMhB,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,EAAA,0BAA0B,EAAU,IAAA,EAAA,UAAU,+HC7BjE,uEAGA,EAAA,MAAA,EAAA,CAAA,gpBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FDoBa,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBANlC,SAAS;+BACE,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,uEAAA,EAAA,MAAA,EAAA,CAAA,gpBAAA,CAAA,EAAA,CAAA;mHAMvC,MAAM,EAAA,CAAA;sBADb,SAAS;uBAAC,QAAQ,CAAA;gBAIX,IAAI,EAAA,CAAA;sBADX,eAAe;AAAC,gBAAA,IAAA,EAAA,CAAA,0BAA0B,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAQ7D,aAAa,EAAA,CAAA;sBADhB,KAAK;gBA+BN,mBAAmB,EAAA,CAAA;sBADlB,MAAM;gBAkBP,YAAY,EAAA,CAAA;sBAFX,YAAY;uBAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,CAAA;;sBAChC,YAAY;uBAAC,eAAe,EAAE,CAAC,QAAQ,CAAC,CAAA;gBAYzC,SAAS,EAAA,CAAA;sBAJR,YAAY;uBAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,CAAA;;sBACvC,YAAY;uBAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,CAAA;;sBACtC,YAAY;uBAAC,oBAAoB,EAAE,CAAC,QAAQ,CAAC,CAAA;;sBAC7C,YAAY;uBAAC,mBAAmB,EAAE,CAAC,QAAQ,CAAC,CAAA;;;MEpFlC,mBAAmB,CAAA;kIAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;mIAAnB,mBAAmB,EAAA,YAAA,EAAA,CAHf,sBAAsB,EAAE,0BAA0B,aADvD,YAAY,CAAA,EAAA,OAAA,EAAA,CAEZ,sBAAsB,EAAE,0BAA0B,CAAA,EAAA,CAAA,CAAA,EAAA;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,YAJpB,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAIX,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,YAAY,EAAE,CAAC,sBAAsB,EAAE,0BAA0B,CAAC;AAClE,oBAAA,OAAO,EAAE,CAAC,sBAAsB,EAAE,0BAA0B,CAAC;AAC9D,iBAAA,CAAA;;;ACTD;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-tabs.mjs CHANGED Viewed

@@ -19,10 +19,10 @@ class TabsService {
     resetOutlet() {
         this.outletSubject$.next(null);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -40,10 +40,10 @@ class TabsComponent {
     ngOnDestroy() {
         this.tabsService.resetOutlet();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabsComponent, 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: [":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:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){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: i2.IonTabs, selector: "ion-tabs" }, { kind: "component", type: i2.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabsComponent, 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: [":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:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){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: i2.IonTabs, selector: "ion-tabs" }, { kind: "component", type: i2.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-bar', 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: [":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:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){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: [{
@@ -67,10 +67,10 @@ class TabButtonComponent {
             dispatchEvent(clickEvent);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabButtonComponent, 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  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }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:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TabButtonComponent, 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  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }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:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-button', template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }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:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"] }]
         }], propDecorators: { tab: [{
@@ -83,11 +83,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }] } });
 class TabsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: TabsModule, declarations: [TabsComponent, TabButtonComponent], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton], exports: [TabsComponent, TabButtonComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TabsModule, declarations: [TabsComponent, TabButtonComponent], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton], exports: [TabsComponent, TabButtonComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton],

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

	@@ -1 +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/standalone';\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 { IonTabs } from '@ionic/angular/standalone';\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})\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 { 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})\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 <ng-content\n ngIf=\"icons.length === 1 \|\| !ionTabButton.selected\"\n select=\"kirby-icon:not([selected-tab])\"\n ></ng-content>\n <ng-content ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\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/standalone';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\nimport { TabsComponent } from './tabs.component';\n\n@NgModule({\n imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton],\n providers: [TabsService],\n declarations: [TabsComponent, TabButtonComponent],\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":";;;;;;;;;;MAOa,WAAW,CAAA;AAHxB,IAAA,WAAA,GAAA;AAIU,QAAA,IAAA,CAAA,cAAc,GAAmC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;AACvE,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;AASrD,KAAA;AAPQ,IAAA,SAAS,CAAC,MAAuB,EAAA;AACtC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAClC;IAEM,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;~~iIAVU~~,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;AAAX,uBAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,cAFV,MAAM,EAAA,CAAA,CAAA,EAAA;;~~2FAEP~~,WAAW,EAAA,UAAA,EAAA,CAAA;kBAHvB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA,CAAA;;;MCIY,aAAa,CAAA;AAKxB,IAAA,WAAA,CAAoB,WAAwB,EAAA;QAAxB,IAAW,CAAA,WAAA,GAAX,WAAW,CAAa;QAH5C,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;KAGqB;IAEhD,eAAe,GAAA;QACb,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC9C;IAED,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;KAChC;~~iIAbU~~,aAAa,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,WAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;~~qHAAb~~,aAAa,EAAA,QAAA,EAAA,eAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,6BAAA,EAAA,yBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGb,OAAO,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECbpB,0IAKA,EAAA,MAAA,EAAA,CAAA,o5BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,aAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;~~2FDKa~~,aAAa,EAAA,UAAA,EAAA,CAAA;kBALzB,SAAS;+BACE,eAAe,EAAA,QAAA,EAAA,0IAAA,EAAA,MAAA,EAAA,CAAA,o5BAAA,CAAA,EAAA,CAAA;6EAMzB,kBAAkB,EAAA,CAAA;sBADjB,WAAW;uBAAC,6BAA6B,CAAA;gBAEJ,IAAI,EAAA,CAAA;sBAAzC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;;;AEb/B,MAAM,qBAAqB,GAAG;;MCUxB,kBAAkB,CAAA;AAL/B,IAAA,WAAA,GAAA;AAOY,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,YAAY,EAAS,CAAC;AAW7C,KAAA;IARC,OAAO,CAAC,KAAY,EAAE,UAAmB,EAAA;AACvC,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAI,UAAU,EAAE;AACd,YAAA,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,qBAAqB,CAAC,CAAC;YAC1D,aAAa,CAAC,UAAU,CAAC,CAAC;SAC3B;KACF;~~iIAZU~~,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;~~qHAAlB~~,kBAAkB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,KAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAGZ,aAAa,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECbhC,idAcA,EAAA,MAAA,EAAA,CAAA,sqDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,MAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;~~2FDJa~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,SAAS;+BACE,kBAAkB,EAAA,QAAA,EAAA,idAAA,EAAA,MAAA,EAAA,CAAA,sqDAAA,CAAA,EAAA,CAAA;8BAKnB,GAAG,EAAA,CAAA;sBAAX,KAAK;gBACI,KAAK,EAAA,CAAA;sBAAd,MAAM;gBACyB,KAAK,EAAA,CAAA;sBAApC,eAAe;uBAAC,aAAa,CAAA;;;MEEnB,UAAU,CAAA;~~iIAAV~~,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAV,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,iBAHN,aAAa,EAAE,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAFtC,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAG1D,EAAA,OAAA,EAAA,CAAA,aAAa,EAAE,kBAAkB,CAAA,EAAA,CAAA,CAAA,EAAA;AAEhC,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~QAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,EAJV,SAAA,EAAA,CAAC,WAAW,CAAC,EADd,OAAA,EAAA,CAAA,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;~~2FAKzD~~,UAAU,EAAA,UAAA,EAAA,CAAA;kBANtB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,CAAC;oBACrE,SAAS,EAAE,CAAC,WAAW,CAAC;AACxB,oBAAA,YAAY,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC;AACjD,oBAAA,OAAO,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC;AAC7C,iBAAA,CAAA;;;ACdD;;AAEG;;;;"}
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/standalone';\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 { IonTabs } from '@ionic/angular/standalone';\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})\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 { 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})\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 <ng-content\n ngIf=\"icons.length === 1 \|\| !ionTabButton.selected\"\n select=\"kirby-icon:not([selected-tab])\"\n ></ng-content>\n <ng-content ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\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/standalone';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\nimport { TabsComponent } from './tabs.component';\n\n@NgModule({\n imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton],\n providers: [TabsService],\n declarations: [TabsComponent, TabButtonComponent],\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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"}