npm - @kirbydesign/designsystem - Versions diffs - 11.4.2 → 11.5.0 - Mend

@kirbydesign/designsystem 11.4.2 → 11.5.0

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

Files changed (267) hide show

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

@@ -9,10 +9,10 @@ import { IconComponent, IconModule } from '@kirbydesign/designsystem/icon';
 import * as i2 from '@kirbydesign/designsystem/shared';
 class SlideDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: SlideDirective, isStandalone: true, selector: "[kirbySlide]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: SlideDirective, isStandalone: true, selector: "[kirbySlide]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlideDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[kirbySlide]' }]
         }] });
@@ -95,12 +95,12 @@ class SlidesComponent {
     getNoControlsConfig() {
         return { ...this.getDefaultConfig(), pagination: false, navigation: false };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", 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: "17.0.0", version: "20.3.15", type: SlidesComponent, isStandalone: true, 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: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\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            <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            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\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}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:18px;font-weight:700;line-height:24px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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: "17.0.0", version: "21.0.6", type: SlidesComponent, isStandalone: true, 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: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\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            <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            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\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}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:18px;font-weight:700;line-height:24px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlidesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlidesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\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            <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            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\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}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:18px;font-weight:700;line-height:24px}\n"] }]
+            args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\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            <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            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\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}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:18px;font-weight:700;line-height:24px}\n"] }]
         }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i0.ChangeDetectorRef }, { type: i2.TranslationService }], propDecorators: { swiperContainer: [{
                 type: ViewChild,
                 args: ['swiperContainer']
@@ -125,10 +125,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: "20.3.15", 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: "20.3.15", type: SlideStretchHeightDirective, isStandalone: true, selector: "[slideStretchHeight]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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: "21.0.6", type: SlideStretchHeightDirective, isStandalone: true, selector: "[slideStretchHeight]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideStretchHeightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlideStretchHeightDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -138,11 +138,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 const imports = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];
 class SlideModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule, SlidesComponent, SlideDirective, SlideStretchHeightDirective], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule, SlidesComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule, SlidesComponent, SlideDirective, SlideStretchHeightDirective], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule, SlidesComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SlideModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonComponent, IconModule, ...imports],

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({ selector: '[kirbySlide]' })\nexport class SlideDirective {}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n CUSTOM_ELEMENTS_SCHEMA,\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 { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\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 imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\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","@if (showNavigation \|\| title !== undefined) {\n <div class=\"navigation\">\n <span class=\"title kirby-text-medium\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n </span>\n @if (\n showNavigation &&\n (!slidesOptions \|\|\n slidesOptions?.navigation === undefined \|\|\n slidesOptions?.pagination === undefined)\n ) {\n <div class=\"navigation-inner\">\n @if (!slidesOptions \|\| slidesOptions?.pagination === undefined) {\n <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n }\n @if (!_isTouch && (!slidesOptions \|\| slidesOptions?.navigation === undefined)) {\n <div class=\"buttons\">\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 <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 <ng-content select=\"button[kirby-button]\"></ng-content>\n </div>\n }\n </div>\n }\n </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n @for (slide of slides; track slide; let i = $index) {\n <swiper-slide>\n <ng-container\n ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n ></ng-container>\n </swiper-slide>\n }\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 imports = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];\n\n@NgModule({\n imports: [CommonModule, ButtonComponent, IconModule, ...imports],\n exports: [...imports],\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({ selector: '[kirbySlide]' })\nexport class SlideDirective {}\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n CUSTOM_ELEMENTS_SCHEMA,\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 { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\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 imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\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","@if (showNavigation \|\| title !== undefined) {\n <div class=\"navigation\">\n <span class=\"title kirby-text-medium\">\n <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n </span>\n @if (\n showNavigation &&\n (!slidesOptions \|\|\n slidesOptions?.navigation === undefined \|\|\n slidesOptions?.pagination === undefined)\n ) {\n <div class=\"navigation-inner\">\n @if (!slidesOptions \|\| slidesOptions?.pagination === undefined) {\n <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n }\n @if (!_isTouch && (!slidesOptions \|\| slidesOptions?.navigation === undefined)) {\n <div class=\"buttons\">\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 <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 <ng-content select=\"button[kirby-button]\"></ng-content>\n </div>\n }\n </div>\n }\n </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n @for (slide of slides; track slide; let i = $index) {\n <swiper-slide>\n <ng-container\n ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n ></ng-container>\n </swiper-slide>\n }\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 imports = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];\n\n@NgModule({\n imports: [CommonModule, ButtonComponent, IconModule, ...imports],\n exports: [...imports],\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":";;;;;;;;;;MAGa,cAAc,CAAA;iIAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAD1B,SAAS;mBAAC,EAAE,QAAQ,EAAE,cAAc,EAAE;;;AC4BvC;AACA;AACA;AACA,QAAQ,EAAE;MAkBG,eAAe,CAAA;AAC1B,IAAA,WAAA,CACU,QAAyB,EACzB,GAAsB,EACtB,YAAgC,EAAA;QAFhC,IAAA,CAAA,QAAQ,GAAR,QAAQ;QACR,IAAA,CAAA,GAAG,GAAH,GAAG;QACH,IAAA,CAAA,YAAY,GAAZ,YAAY;QAWb,IAAA,CAAA,cAAc,GAAY,IAAI;AAE7B,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAiB;QAEzD,IAAA,CAAA,aAAa,GAAG,iBAAiB,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE;QAC/D,IAAA,CAAA,aAAa,GAAG,iBAAiB,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC,IAAI,EAAE;QACvE,IAAA,CAAA,aAAa,GAAG,iBAAiB,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC,IAAI,EAAE;IAhBpE;IAmBH,QAAQ,GAAA;QACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;IACzC;IAEA,eAAe,GAAA;AACb,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC;AACzB,cAAE,IAAI,CAAC,gBAAgB;AACvB,cAAE,IAAI,CAAC,mBAAmB,EAAE;QAE9B,MAAM,MAAM,GAAG,EAAE,GAAG,aAAa,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE;QAE1D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,aAAa,EAAE,MAAM,CAAC;AAEzD,QAAA,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,UAAU,EAAE;IACjD;AAEO,IAAA,OAAO,CAAC,KAAa,EAAA;QAC1B,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;IAC1D;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;QAChC,IAAI,OAAO,CAAC,MAAM,EAAE,WAAW,KAAK,KAAK,EAAE;AACzC,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;YACxB,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,MAAM,CAAC,YAAY,EAAE;QAC1D;IACF;IAEQ,gBAAgB,GAAA;QACtB,MAAM,iBAAiB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,WAAW,CAAC,MAAM,CAAC;QACxE,MAAM,YAAY,GAAG,QAAQ,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC1D,MAAM,kBAAkB,GAAG,QAAQ,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACjF,OAAO;AACL,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,oBAAoB,EAAE,IAAI;AAC1B,YAAA,aAAa,EAAE,GAAG;AAClB,YAAA,cAAc,EAAE,CAAC;AACjB,YAAA,WAAW,EAAE;gBACX,CAAC,iBAAiB,GAAG;AACnB,oBAAA,cAAc,EAAE,KAAK;AACrB,oBAAA,aAAa,EAAE,CAAC;AAChB,oBAAA,cAAc,EAAE,CAAC;AAClB,iBAAA;AACF,aAAA;AACD,YAAA,YAAY,EAAE,YAAY;AAC1B,YAAA,KAAK,EAAE,kBAAkB;AACzB,YAAA,UAAU,EAAE;AACV,gBAAA,EAAE,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,aAAa,CAAA,CAAE;AAC5B,gBAAA,IAAI,EAAE,SAAS;AAChB,aAAA;AACD,YAAA,UAAU,EAAE;AACV,gBAAA,MAAM,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,aAAa,CAAA,CAAE;AAChC,gBAAA,MAAM,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,aAAa,CAAA,CAAE;AACjC,aAAA;AACD,YAAA,EAAE,EAAE;AACF,gBAAA,WAAW,EAAE,CAAC,MAAM,KAAI;AACtB,oBAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;wBACpB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC;wBACtC,KAAK,EAAE,MAAM,CAAC,WAAW;AAC1B,qBAAA,CAAC;gBACJ,CAAC;AACF,aAAA;AACD,YAAA,IAAI,EAAE;gBACJ,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,eAAe,CAAC;gBACxD,gBAAgB,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC;AACrD,aAAA;SACF;IACH;IAEQ,mBAAmB,GAAA;AACzB,QAAA,OAAO,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE;IAC7E;iIA9FW,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,eAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,eAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAQZ,cAAc,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAwB,WAAW,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC3DjE,84DAsDA,EAAA,MAAA,EAAA,CAAA,iqDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNY,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,2DAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,cAAA,EAAA,YAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,iFAAE,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGxD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAR3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,mBAGP,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,gBAAgB,CAAC,EAAA,OAAA,EAC3D,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,84DAAA,EAAA,MAAA,EAAA,CAAA,iqDAAA,CAAA,EAAA;;sBAShC,SAAS;uBAAC,iBAAiB;;sBAC3B,YAAY;uBAAC,cAAc,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE;;sBAGhE;;sBACA;;sBACA;;sBAEA;;sBAEA;;;ME9DU,2BAA2B,CAAA;IACtC,WAAA,CACU,UAAsB,EACtB,QAAmB,EAAA;QADnB,IAAA,CAAA,UAAU,GAAV,UAAU;QACV,IAAA,CAAA,QAAQ,GAAR,QAAQ;AAEhB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,QAAQ,EAAE,MAAM,CAAC;IACzE;iIANW,2BAA2B,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAJvC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;;AAET,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA;;;ACID,MAAM,OAAO,GAAG,CAAC,eAAe,EAAE,cAAc,EAAE,2BAA2B,CAAC;MAOjE,WAAW,CAAA;iIAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAX,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,WAAW,YAJZ,YAAY,EAAE,eAAe,EAAE,UAAU,EAHpC,eAAe,EAAE,cAAc,EAAE,2BAA2B,CAAA,EAAA,OAAA,EAAA,CAA5D,eAAe,EAAE,cAAc,EAAE,2BAA2B,CAAA,EAAA,CAAA,CAAA;AAOhE,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,WAAW,YAJZ,YAAY,EAAE,eAAe,EAAE,UAAU,EAHpC,eAAe,CAAA,EAAA,CAAA,CAAA;;2FAOnB,WAAW,EAAA,UAAA,EAAA,CAAA;kBALvB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;AAChE,oBAAA,OAAO,EAAE,CAAC,GAAG,OAAO,CAAC;oBACrB,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA;;;ACfD;;AAEG;;;;"}

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

@@ -3,20 +3,20 @@ import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 class SpinnerComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SpinnerComponent, isStandalone: true, 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: "21.0.6", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: SpinnerComponent, isStandalone: true, 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: "20.3.15", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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: "20.3.15", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SpinnerModule, imports: [CommonModule, SpinnerComponent], exports: [SpinnerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: SpinnerModule, imports: [CommonModule, SpinnerComponent], exports: [SpinnerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, 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 imports: [CommonModule, SpinnerComponent],\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;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~SAAA~~,EAAA,IAAA,EAAA,gBAAgB,yECR7B,+GAIA,EAAA,MAAA,EAAA,CAAA,6XAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~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;;;MEIpC,aAAa,CAAA;~~kIAAb~~,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;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,EAAA,OAAA,EAAA,CAJd,YAAY,EAAE,gBAAgB,aAC9B,gBAAgB,CAAA,EAAA,CAAA,CAAA;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;;~~4FAIX~~,aAAa,EAAA,UAAA,EAAA,CAAA;kBALzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC;oBACzC,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC3B,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACTD;;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 imports: [CommonModule, SpinnerComponent],\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;AAAhB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,yECR7B,+GAIA,EAAA,MAAA,EAAA,CAAA,6XAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;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;;;MEIpC,aAAa,CAAA;iIAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;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,EAAA,OAAA,EAAA,CAJd,YAAY,EAAE,gBAAgB,aAC9B,gBAAgB,CAAA,EAAA,CAAA,CAAA;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;;2FAIX,aAAa,EAAA,UAAA,EAAA,CAAA;kBALzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC;oBACzC,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC3B,oBAAA,SAAS,EAAE,EAAE;AACd,iBAAA;;;ACTD;;AAEG;;;;"}

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

@@ -17,10 +17,10 @@ class TabNavigationItemComponent {
         const tabElement = this.elementRef.nativeElement.querySelector('[role="tab"]');
         forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, tabElement);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabNavigationItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TabNavigationItemComponent, isStandalone: true, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, host: { attributes: { "role": "presentation" } }, ngImport: i0, template: "<button role=\"tab\" type=\"button\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":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: "21.0.6", ngImport: i0, type: TabNavigationItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TabNavigationItemComponent, isStandalone: true, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, host: { attributes: { "role": "presentation" } }, ngImport: i0, template: "<button role=\"tab\" type=\"button\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":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: "20.3.15", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'presentation' }, template: "<button role=\"tab\" type=\"button\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":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: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { label: [{
@@ -125,12 +125,12 @@ class TabNavigationComponent {
             this.setTabElements();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TabNavigationComponent, isStandalone: true, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":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: "21.0.6", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TabNavigationComponent, isStandalone: true, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":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: "20.3.15", ngImport: i0, type: TabNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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"] }]
+            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 }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tabBar: [{
                 type: ViewChild,
                 args: ['tabBar']
@@ -162,11 +162,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 class TabNavigationModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TabNavigationModule, imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: TabNavigationModule, imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabNavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent],

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 {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n Renderer2,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-tab-navigation-item',\n templateUrl: './tab-navigation-item.component.html',\n styleUrls: ['./tab-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { role: 'presentation' },\n})\nexport class TabNavigationItemComponent implements AfterViewInit {\n private _attributesToForward: string[] = ['aria-controls', 'id'];\n\n @Input()\n label = '';\n\n @Input()\n truncate = true;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngAfterViewInit(): void {\n const tabElement: HTMLElement = this.elementRef.nativeElement.querySelector('[role=\"tab\"]');\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n tabElement\n );\n }\n}\n","<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n QueryList,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { TabNavigationItemComponent } from '../tab-navigation-item/tab-navigation-item.component';\n\n@Component({\n selector: 'kirby-tab-navigation',\n templateUrl: './tab-navigation.component.html',\n styleUrls: ['./tab-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationComponent implements AfterViewInit {\n public readonly DEBOUNCE_TIME_MS = 250;\n\n @ViewChild('tabBar')\n private tabBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabNavigationItemComponent, { read: ElementRef })\n private tabs: QueryList<ElementRef<HTMLElement>>;\n\n private tabBarElement: HTMLElement;\n private tabElements = new Array<HTMLElement>();\n private tabButtonElements = new Array<HTMLElement>();\n\n private _attributesToForward: string[] = ['aria-label', 'aria-labelledby'];\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex && index !== -1) {\n this._selectedIndex = index;\n\n this.focusIndex = index;\n this.selectTab(this.selectedIndex);\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n private _selectedIndex = -1;\n\n get focusIndex(): number {\n return this._focusIndex;\n }\n\n set focusIndex(index: number) {\n if (index !== this._focusIndex) {\n this._focusIndex = index;\n\n this.scrollToTab(this.focusIndex);\n this.focusTab(this.focusIndex);\n }\n }\n private _focusIndex = -1;\n\n @Output()\n selectedIndexChange = new EventEmitter<number>();\n\n constructor(\n private window: WindowRef,\n private keyboardHandlerService: KeyboardHandlerService,\n private renderer: Renderer2,\n private elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.setTabElements();\n this.updateTabElementsOnChanges();\n\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.tabBarElement\n );\n }\n\n @HostListener('click', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n onItemSelect(event: PointerEvent) {\n if (event.target !== this.tabBarElement) {\n const targetTabNavItem = (event.target as HTMLElement).closest('button');\n this.selectedIndex = this.tabButtonElements.indexOf(targetTabNavItem);\n }\n }\n\n @HostListener('keydown.home', ['$event'])\n @HostListener('keydown.end', ['$event'])\n @HostListener('keydown.arrowright', ['$event'])\n @HostListener('keydown.arrowleft', ['$event'])\n onKeydown(event: KeyboardEvent) {\n event.preventDefault();\n this.focusIndex = this.keyboardHandlerService.handle(\n event,\n this.focusIndex,\n this.tabElements.length - 1,\n true\n );\n }\n\n private selectTab(tabIndex: number): void {\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('aria-selected', index === tabIndex ? 'true' : 'false');\n });\n }\n\n private focusTab(focusIndex: number): void {\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('tabindex', index === focusIndex ? '0' : '-1');\n });\n\n if (0 <= focusIndex && focusIndex < this.tabButtonElements.length) {\n this.tabButtonElements[focusIndex].focus();\n }\n }\n\n private scrollToTab(tabIndex: number): void {\n if (0 <= tabIndex && tabIndex < this.tabElements.length) {\n const selectedTabElement = this.tabElements[tabIndex];\n const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;\n const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;\n const tabBarElementWidth = this.tabBarElement.getBoundingClientRect().width;\n\n this.window.nativeWindow.requestAnimationFrame(() => {\n this.tabBarElement?.scrollTo({\n behavior: 'smooth',\n left: Math.max(\n 0,\n selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2\n ),\n });\n });\n }\n }\n\n private setTabElements() {\n this.tabs.forEach((tab) => {\n this.tabElements.push(tab.nativeElement);\n });\n\n this.tabElements.forEach((tabElement) =>\n this.tabButtonElements.push(tabElement.querySelector('[role=\"tab\"]'))\n );\n\n this.selectTab(this.selectedIndex);\n this.focusTab(this.focusIndex);\n\n setTimeout(() => {\n this.scrollToTab(this.focusIndex);\n }, this.DEBOUNCE_TIME_MS);\n }\n\n private updateTabElementsOnChanges() {\n this.tabs.changes.subscribe(() => {\n this.tabElements = [];\n this.tabButtonElements = [];\n this.setTabElements();\n });\n }\n}\n","<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabNavigationComponent } from './tab-navigation/tab-navigation.component';\nimport { TabNavigationItemComponent } from './tab-navigation-item/tab-navigation-item.component';\n\n@NgModule({\n imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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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 {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n Input,\n Renderer2,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n selector: 'kirby-tab-navigation-item',\n templateUrl: './tab-navigation-item.component.html',\n styleUrls: ['./tab-navigation-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { role: 'presentation' },\n})\nexport class TabNavigationItemComponent implements AfterViewInit {\n private _attributesToForward: string[] = ['aria-controls', 'id'];\n\n @Input()\n label = '';\n\n @Input()\n truncate = true;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngAfterViewInit(): void {\n const tabElement: HTMLElement = this.elementRef.nativeElement.querySelector('[role=\"tab\"]');\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n tabElement\n );\n }\n}\n","<button role=\"tab\" type=\"button\" #tabButton>\n <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n <ng-content></ng-content>\n</button>\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n Output,\n QueryList,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { WindowRef } from '@kirbydesign/designsystem/types';\nimport { KeyboardHandlerService } from '@kirbydesign/designsystem/dropdown';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\nimport { TabNavigationItemComponent } from '../tab-navigation-item/tab-navigation-item.component';\n\n@Component({\n selector: 'kirby-tab-navigation',\n templateUrl: './tab-navigation.component.html',\n styleUrls: ['./tab-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TabNavigationComponent implements AfterViewInit {\n public readonly DEBOUNCE_TIME_MS = 250;\n\n @ViewChild('tabBar')\n private tabBar: ElementRef<HTMLElement>;\n\n @ContentChildren(TabNavigationItemComponent, { read: ElementRef })\n private tabs: QueryList<ElementRef<HTMLElement>>;\n\n private tabBarElement: HTMLElement;\n private tabElements = new Array<HTMLElement>();\n private tabButtonElements = new Array<HTMLElement>();\n\n private _attributesToForward: string[] = ['aria-label', 'aria-labelledby'];\n\n @Input()\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n set selectedIndex(index: number) {\n if (index !== this._selectedIndex && index !== -1) {\n this._selectedIndex = index;\n\n this.focusIndex = index;\n this.selectTab(this.selectedIndex);\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n private _selectedIndex = -1;\n\n get focusIndex(): number {\n return this._focusIndex;\n }\n\n set focusIndex(index: number) {\n if (index !== this._focusIndex) {\n this._focusIndex = index;\n\n this.scrollToTab(this.focusIndex);\n this.focusTab(this.focusIndex);\n }\n }\n private _focusIndex = -1;\n\n @Output()\n selectedIndexChange = new EventEmitter<number>();\n\n constructor(\n private window: WindowRef,\n private keyboardHandlerService: KeyboardHandlerService,\n private renderer: Renderer2,\n private elementRef: ElementRef<HTMLElement>\n ) {}\n\n ngAfterViewInit(): void {\n this.tabBarElement = this.tabBar.nativeElement;\n this.setTabElements();\n this.updateTabElementsOnChanges();\n\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.tabBarElement\n );\n }\n\n @HostListener('click', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n onItemSelect(event: PointerEvent) {\n if (event.target !== this.tabBarElement) {\n const targetTabNavItem = (event.target as HTMLElement).closest('button');\n this.selectedIndex = this.tabButtonElements.indexOf(targetTabNavItem);\n }\n }\n\n @HostListener('keydown.home', ['$event'])\n @HostListener('keydown.end', ['$event'])\n @HostListener('keydown.arrowright', ['$event'])\n @HostListener('keydown.arrowleft', ['$event'])\n onKeydown(event: KeyboardEvent) {\n event.preventDefault();\n this.focusIndex = this.keyboardHandlerService.handle(\n event,\n this.focusIndex,\n this.tabElements.length - 1,\n true\n );\n }\n\n private selectTab(tabIndex: number): void {\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('aria-selected', index === tabIndex ? 'true' : 'false');\n });\n }\n\n private focusTab(focusIndex: number): void {\n this.tabButtonElements.forEach((tabButtonElement, index) => {\n tabButtonElement.setAttribute('tabindex', index === focusIndex ? '0' : '-1');\n });\n\n if (0 <= focusIndex && focusIndex < this.tabButtonElements.length) {\n this.tabButtonElements[focusIndex].focus();\n }\n }\n\n private scrollToTab(tabIndex: number): void {\n if (0 <= tabIndex && tabIndex < this.tabElements.length) {\n const selectedTabElement = this.tabElements[tabIndex];\n const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;\n const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;\n const tabBarElementWidth = this.tabBarElement.getBoundingClientRect().width;\n\n this.window.nativeWindow.requestAnimationFrame(() => {\n this.tabBarElement?.scrollTo({\n behavior: 'smooth',\n left: Math.max(\n 0,\n selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2\n ),\n });\n });\n }\n }\n\n private setTabElements() {\n this.tabs.forEach((tab) => {\n this.tabElements.push(tab.nativeElement);\n });\n\n this.tabElements.forEach((tabElement) =>\n this.tabButtonElements.push(tabElement.querySelector('[role=\"tab\"]'))\n );\n\n this.selectTab(this.selectedIndex);\n this.focusTab(this.focusIndex);\n\n setTimeout(() => {\n this.scrollToTab(this.focusIndex);\n }, this.DEBOUNCE_TIME_MS);\n }\n\n private updateTabElementsOnChanges() {\n this.tabs.changes.subscribe(() => {\n this.tabElements = [];\n this.tabButtonElements = [];\n this.setTabElements();\n });\n }\n}\n","<div role=\"tablist\" #tabBar>\n <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TabNavigationComponent } from './tab-navigation/tab-navigation.component';\nimport { TabNavigationItemComponent } from './tab-navigation-item/tab-navigation-item.component';\n\n@NgModule({\n imports: [CommonModule, TabNavigationComponent, TabNavigationItemComponent],\n exports: [TabNavigationComponent, TabNavigationItemComponent],\n})\nexport class TabNavigationModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -17,10 +17,10 @@ class TabsService {
     resetOutlet() {
         this.outletSubject$.next(null);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -38,12 +38,12 @@ class TabsComponent {
     ngOnDestroy() {
         this.tabsService.resetOutlet();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TabsComponent, isStandalone: true, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":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: IonTabs, selector: "ion-tabs" }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsComponent, deps: [{ token: TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: TabsComponent, isStandalone: true, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":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: IonTabs, selector: "ion-tabs" }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-tab-bar', imports: [IonTabs, IonTabBar], template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":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"] }]
+            args: [{ selector: 'kirby-tab-bar', imports: [IonTabs, IonTabBar], template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":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: [{
                 type: HostBinding,
                 args: ['class.tab-bar-bottom-hidden']
@@ -65,12 +65,12 @@ class TabButtonComponent {
             dispatchEvent(clickEvent);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TabButtonComponent, isStandalone: true, selector: "kirby-tab-button", inputs: { tab: "tab" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  @if (icons.length === 1 || !ionTabButton.selected) {\n    <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n  }\n  @if (ionTabButton.selected) {\n    <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":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: "component", type: 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: "21.0.6", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: TabButtonComponent, isStandalone: true, selector: "kirby-tab-button", inputs: { tab: "tab" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  @if (icons.length === 1 || !ionTabButton.selected) {\n    <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n  }\n  @if (ionTabButton.selected) {\n    <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":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: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-tab-button', imports: [IonTabButton], template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  @if (icons.length === 1 || !ionTabButton.selected) {\n    <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n  }\n  @if (ionTabButton.selected) {\n    <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":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"] }]
+            args: [{ selector: 'kirby-tab-button', imports: [IonTabButton], template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  @if (icons.length === 1 || !ionTabButton.selected) {\n    <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n  }\n  @if (ionTabButton.selected) {\n    <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n  }\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":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: [{
                 type: Input
             }], click: [{
@@ -81,15 +81,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 class TabsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TabsModule, imports: [IconModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: TabsModule, imports: [IconModule,
             CommonModule,
             IonTabs,
             IonTabBar,
             IonTabButton,
             TabsComponent,
             TabButtonComponent], exports: [TabsComponent, TabButtonComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule,
             CommonModule,
             IonTabs,
             IonTabBar,
@@ -97,7 +97,7 @@ class TabsModule {
             TabsComponent,
             TabButtonComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: TabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

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 { IonTabBar, 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 imports: [IonTabs, IonTabBar],\n})\nexport class TabsComponent implements AfterViewInit, OnDestroy {\n @HostBinding('class.tab-bar-bottom-hidden')\n tabBarBottomHidden = false;\n @ViewChild(IonTabs, { static: true }) tabs: IonTabs;\n\n constructor(private tabsService: TabsService) {}\n\n ngAfterViewInit() {\n this.tabsService.setOutlet(this.tabs.outlet);\n }\n\n ngOnDestroy() {\n this.tabsService.resetOutlet();\n }\n}\n","<ion-tabs>\n <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import { Component, ContentChildren, EventEmitter, Input, Output, QueryList } from '@angular/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonTabButton } from '@ionic/angular/standalone';\nimport { selectedTabClickEvent } from './tab-button.events';\n\n@Component({\n selector: 'kirby-tab-button',\n templateUrl: './tab-button.component.html',\n styleUrls: ['./tab-button.component.scss'],\n imports: [IonTabButton],\n})\nexport class TabButtonComponent {\n @Input() tab: string;\n @Output() click = new EventEmitter<Event>();\n @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n\n onClick(event: Event, isSelected: boolean) {\n this.click.emit(event);\n\n if (isSelected) {\n const clickEvent = new CustomEvent(selectedTabClickEvent);\n dispatchEvent(clickEvent);\n }\n }\n}\n","<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 \|\| !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n","import { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { NgModule } from '@angular/core';\nimport { IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\nimport { TabsComponent } from './tabs.component';\n\n@NgModule({\n imports: [\n IconModule,\n CommonModule,\n IonTabs,\n IonTabBar,\n IonTabButton,\n TabsComponent,\n TabButtonComponent,\n ],\n providers: [TabsService],\n exports: [TabsComponent, TabButtonComponent],\n})\nexport class TabsModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1.TabsService"],"mappings":";;;;;;;;MAOa,WAAW,CAAA;AAHxB,IAAA,WAAA,GAAA;AAIU,QAAA,IAAA,CAAA,cAAc,GAAmC,IAAI,aAAa,CAAC,CAAC,CAAC;AACtE,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE;AASpD,IAAA;AAPQ,IAAA,SAAS,CAAC,MAAuB,EAAA;AACtC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC;IAClC;IAEO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;IAChC;~~kIAVW~~,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAX,uBAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~SAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAW,cAFV,MAAM,EAAA,CAAA,CAAA;;~~4FAEP~~,WAAW,EAAA,UAAA,EAAA,CAAA;kBAHvB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;MCKY,aAAa,CAAA;AAKxB,IAAA,WAAA,CAAoB,WAAwB,EAAA;QAAxB,IAAA,CAAA,WAAW,GAAX,WAAW;QAH/B,IAAA,CAAA,kBAAkB,GAAG,KAAK;IAGqB;IAE/C,eAAe,GAAA;QACb,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;IAC9C;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE;IAChC;~~kIAbW~~,aAAa,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,WAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~SAAA~~,EAAA,IAAA,EAAA,aAAa,mMAGb,OAAO,EAAA,WAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdpB,0IAKA,EAAA,MAAA,EAAA,CAAA,~~o5BAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDIY,OAAO,qDAAE,SAAS,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,aAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;~~4FAEjB~~,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,OAAA,EAGhB,CAAC,OAAO,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,0IAAA,EAAA,MAAA,EAAA,CAAA,~~o5BAAA~~,CAAA,EAAA;;sBAG5B,WAAW;uBAAC,6BAA6B;;sBAEzC,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;;;AEd/B,MAAM,qBAAqB,GAAG;;MCYxB,kBAAkB,CAAA;AAN/B,IAAA,WAAA,GAAA;AAQY,QAAA,IAAA,CAAA,KAAK,GAAG,IAAI,YAAY,EAAS;AAW5C,IAAA;IARC,OAAO,CAAC,KAAY,EAAE,UAAmB,EAAA;AACvC,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QAEtB,IAAI,UAAU,EAAE;AACd,YAAA,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,qBAAqB,CAAC;YACzD,aAAa,CAAC,UAAU,CAAC;QAC3B;IACF;~~kIAZW~~,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~SAAA~~,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,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,ECfhC,mdAeA,~~8tDDLY~~,YAAY,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;;~~4FAEX~~,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;+BACE,kBAAkB,EAAA,OAAA,EAGnB,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,mdAAA,EAAA,MAAA,EAAA,CAAA,~~sqDAAA~~,CAAA,EAAA;;sBAGtB;;sBACA;;sBACA,eAAe;uBAAC,aAAa;;;MEOnB,UAAU,CAAA;~~kIAAV~~,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAV,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,UAAU,YAXnB,UAAU;YACV,YAAY;YACZ,OAAO;YACP,SAAS;YACT,YAAY;YACZ,aAAa;YACb,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAGV,aAAa,EAAE,kBAAkB,CAAA,EAAA,CAAA,CAAA;AAEhC,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,UAAU,EAAA,SAAA,EAHV,CAAC,WAAW,CAAC,YARtB,UAAU;YACV,YAAY;YACZ,OAAO;YACP,SAAS;YACT,YAAY;YACZ,aAAa;YACb,kBAAkB,CAAA,EAAA,CAAA,CAAA;;~~4FAKT~~,UAAU,EAAA,UAAA,EAAA,CAAA;kBAbtB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,UAAU;wBACV,YAAY;wBACZ,OAAO;wBACP,SAAS;wBACT,YAAY;wBACZ,aAAa;wBACb,kBAAkB;AACnB,qBAAA;oBACD,SAAS,EAAE,CAAC,WAAW,CAAC;AACxB,oBAAA,OAAO,EAAE,CAAC,aAAa,EAAE,kBAAkB,CAAC;AAC7C,iBAAA;;;ACrBD;;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 { IonTabBar, 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 imports: [IonTabs, IonTabBar],\n})\nexport class TabsComponent implements AfterViewInit, OnDestroy {\n @HostBinding('class.tab-bar-bottom-hidden')\n tabBarBottomHidden = false;\n @ViewChild(IonTabs, { static: true }) tabs: IonTabs;\n\n constructor(private tabsService: TabsService) {}\n\n ngAfterViewInit() {\n this.tabsService.setOutlet(this.tabs.outlet);\n }\n\n ngOnDestroy() {\n this.tabsService.resetOutlet();\n }\n}\n","<ion-tabs>\n <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n","export const selectedTabClickEvent = 'kirbySelectedTabClick';\n","import { Component, ContentChildren, EventEmitter, Input, Output, QueryList } from '@angular/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonTabButton } from '@ionic/angular/standalone';\nimport { selectedTabClickEvent } from './tab-button.events';\n\n@Component({\n selector: 'kirby-tab-button',\n templateUrl: './tab-button.component.html',\n styleUrls: ['./tab-button.component.scss'],\n imports: [IonTabButton],\n})\nexport class TabButtonComponent {\n @Input() tab: string;\n @Output() click = new EventEmitter<Event>();\n @ContentChildren(IconComponent) icons: QueryList<IconComponent>;\n\n onClick(event: Event, isSelected: boolean) {\n this.click.emit(event);\n\n if (isSelected) {\n const clickEvent = new CustomEvent(selectedTabClickEvent);\n dispatchEvent(clickEvent);\n }\n }\n}\n","<ion-tab-button\n #ionTabButton\n [tab]=\"tab\"\n (click)=\"onClick($event, ionTabButton.selected)\"\n tabindex=\"0\"\n>\n @if (icons.length === 1 \|\| !ionTabButton.selected) {\n <ng-content select=\"kirby-icon:not([selected-tab])\"></ng-content>\n }\n @if (ionTabButton.selected) {\n <ng-content select=\"kirby-icon[selected-tab]\"></ng-content>\n }\n <ng-content></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n","import { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { NgModule } from '@angular/core';\nimport { IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone';\nimport { TabButtonComponent } from './tab-button/tab-button.component';\nimport { TabsService } from './tabs.service';\nimport { TabsComponent } from './tabs.component';\n\n@NgModule({\n imports: [\n IconModule,\n CommonModule,\n IonTabs,\n IonTabBar,\n IonTabButton,\n TabsComponent,\n TabButtonComponent,\n ],\n providers: [TabsService],\n exports: [TabsComponent, TabButtonComponent],\n})\nexport class TabsModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1.TabsService"],"mappings":"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"}