@kirbydesign/designsystem 10.0.0 → 10.1.1

package/esm2022/slide/slide.directive.mjs

@@ -1,10 +1,10 @@
 import { Directive } from '@angular/core';
 import * as i0 from "@angular/core";
 export class SlideDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: SlideDirective, selector: "[kirbySlide]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SlideDirective, selector: "[kirbySlide]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlideDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbySlide]',

package/esm2022/slide/slide.module.mjs

@@ -8,11 +8,11 @@ import { SlideStretchHeightDirective } from './slide-stretch-height.directive';
 import * as i0 from "@angular/core";
 const declarations = [SlidesComponent, SlideDirective, SlideStretchHeightDirective];
 export class SlideModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: SlideModule, declarations: [SlidesComponent, SlideDirective, SlideStretchHeightDirective], imports: [CommonModule, ButtonComponent, IconModule], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SlideModule, declarations: [SlidesComponent, SlideDirective, SlideStretchHeightDirective], imports: [CommonModule, ButtonComponent, IconModule], exports: [SlidesComponent, SlideDirective, SlideStretchHeightDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideModule, imports: [CommonModule, ButtonComponent, IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlideModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...declarations],

package/esm2022/slide/slides.component.mjs

@@ -80,10 +80,10 @@ export class SlidesComponent {
     getNoControlsConfig() {
         return { ...this.getDefaultConfig(), pagination: false, navigation: false };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: SlidesComponent, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SlidesComponent, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlidesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlidesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigation\" *ngIf=\"showNavigation || title !== undefined\">\n  <span class=\"kirby-text-medium\">{{ title }}</span>\n\n  <div\n    class=\"navigation-inner\"\n    *ngIf=\"\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    \"\n  >\n    <div\n      class=\"pagination\"\n      [ngClass]=\"_paginationId\"\n      *ngIf=\"!slidesOptions || slidesOptions?.pagination === undefined\"\n    ></div>\n    <div\n      class=\"buttons\"\n      *ngIf=\"!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)\"\n    >\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-prev swiper-button-prev\"\n        [ngClass]=\"_prevButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-back\"></kirby-icon>\n      </button>\n\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        class=\"nav-next swiper-button-next\"\n        [ngClass]=\"_nextButtonId\"\n        size=\"xs\"\n      >\n        <kirby-icon name=\"arrow-more\"></kirby-icon>\n      </button>\n\n      <ng-content select=\"button[kirby-button]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\n     https://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  <swiper-slide *ngFor=\"let slide of slides; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n    ></ng-container>\n  </swiper-slide>\n</swiper-container>\n", styles: [":host{--swiper-navigation-sides-offset: 0;--swiper-pagination-bullet-width: 10px;--swiper-pagination-bullet-height: 6px;--swiper-pagination-bullet-border-radius: 3px;--swiper-pagination-bullet-horizontal-gap: 4px;--swiper-pagination-color: var(--kirby-black);--swiper-pagination-bullet-inactive-color: var(--kirby-black);--swiper-pagination-bullet-inactive-opacity: .2}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 16px;margin-inline:16px}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:16px}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:2}@media (min-width: 768px){:host .buttons{display:block}}:host .buttons .swiper-button-prev{margin-block:0;margin-inline-start:0}:host .buttons .swiper-button-next{margin-block:0;margin-inline-end:0}:host .buttons ::ng-deep>button[kirby-button]{margin-inline:8px 0}:host .swiper-button-lock{display:none}:host swiper-container{padding-block:24px;margin-block:-24px}@media (max-width: 767px){:host swiper-container{padding-inline:16px;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i0.ChangeDetectorRef }], propDecorators: { swiperContainer: [{

package/esm2022/slide-button/slide-button.component.mjs

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 export class SlideButtonComponent {
@@ -13,6 +13,15 @@ export class SlideButtonComponent {
     calculatePctInTens() {
         this.pctInTens = Math.ceil(this.value / 10) * 10;
     }
+    resetStep() {
+        this.step = 1;
+    }
+    get step() {
+        return this._step;
+    }
+    set step(value) {
+        this._step = value;
+    }
     constructor(changeDetectionRef) {
         this.changeDetectionRef = changeDetectionRef;
         this.text = '';
@@ -23,6 +32,7 @@ export class SlideButtonComponent {
         this.isSlideDone = false;
         this.pctInTens = 0;
         this._value = 0;
+        this._step = 1;
     }
     ngOnDestroy() {
         if (this.resetSliderIntervalTimer) {
@@ -30,10 +40,12 @@ export class SlideButtonComponent {
         }
     }
     onSliderMouseup() {
+        this.resetStep();
         if (this.value == 100) {
             this.handleSlideDone();
         }
         else {
+            // Return slider thumb to beginning of slider button in increments of 2
             this.resetSliderIntervalTimer = setInterval(() => {
                 if (this.value > 0) {
                     this.value -= 2;
@@ -49,6 +61,10 @@ export class SlideButtonComponent {
         this.value = +val;
         this.slidingPercentageChanged.emit(this.value);
     }
+    onKeyDownEvents() {
+        clearInterval(this.resetSliderIntervalTimer);
+        this.step = 10;
+    }
     onSliderMousedown() {
         clearInterval(this.resetSliderIntervalTimer);
     }
@@ -56,12 +72,12 @@ export class SlideButtonComponent {
         this.slideDone.emit();
         this.isSlideDone = true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: SlideButtonComponent, isStandalone: true, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: SlideButtonComponent, isStandalone: true, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, host: { listeners: { "keyup.arrowup": "onSliderMouseup($event)", "keyup.arrowdown": "onSliderMouseup($event)", "keyup.arrowleft": "onSliderMouseup($event)", "keyup.arrowright": "onSliderMouseup($event)", "keyup.pageup": "onSliderMouseup($event)", "keyup.pagedown": "onSliderMouseup($event)", "keyup.home": "onSliderMouseup($event)", "keyup.end": "onSliderMouseup($event)", "keydown.arrowup": "onKeyDownEvents($event)", "keydown.arrowdown": "onKeyDownEvents($event)", "keydown.arrowleft": "onKeyDownEvents($event)", "keydown.arrowright": "onKeyDownEvents($event)", "keydown.pageup": "onSliderMousedown($event)", "keydown.pagedown": "onSliderMousedown($event)", "keydown.home": "onSliderMousedown($event)", "keydown.end": "onSliderMousedown($event)" } }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n    [step]=\"step\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}:host .slide-button:focus-visible::-webkit-slider-thumb{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SlideButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SlideButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    type=\"range\"\n    (mouseup)=\"onSliderMouseup()\"\n    (touchend)=\"onSliderMouseup()\"\n    (input)=\"onSliderValueChange($event.target.value)\"\n    (mousedown)=\"onSliderMousedown()\"\n    (touchstart)=\"onSliderMousedown()\"\n    class=\"slide-button\"\n    [value]=\"value\"\n    max=\"100\"\n    [step]=\"step\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px;pointer-events:none}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2;pointer-events:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;pointer-events:all}:host .slide-button:focus-visible::-webkit-slider-thumb{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { text: [{
                 type: Input
             }], expand: [{
@@ -70,5 +86,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                 type: Output
             }], slidingPercentageChanged: [{
                 type: Output
+            }], onSliderMouseup: [{
+                type: HostListener,
+                args: ['keyup.arrowup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keyup.arrowdown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keyup.arrowleft', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keyup.arrowright', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keyup.pageup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keyup.pagedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keyup.home', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keyup.end', ['$event']]
+            }], onKeyDownEvents: [{
+                type: HostListener,
+                args: ['keydown.arrowup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowdown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowleft', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.arrowright', ['$event']]
+            }], onSliderMousedown: [{
+                type: HostListener,
+                args: ['keydown.pageup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.pagedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.home', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.end', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGUtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NsaWRlLWJ1dHRvbi9zcmMvc2xpZGUtYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL3NsaWRlLWJ1dHRvbi9zcmMvc2xpZGUtYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7OztBQVV2QixNQUFNLE9BQU8sb0JBQW9CO0lBYS9CLElBQUksS0FBSztRQUNQLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNyQixDQUFDO0lBQ0QsSUFBSSxLQUFLLENBQUMsQ0FBUztRQUNqQixJQUFJLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztRQUNoQixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBSU8sa0JBQWtCO1FBQ3hCLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQyxHQUFHLEVBQUUsQ0FBQztJQUNuRCxDQUFDO0lBRUQsWUFBb0Isa0JBQXFDO1FBQXJDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBbUI7UUExQmhELFNBQUksR0FBRyxFQUFFLENBQUM7UUFHVCxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMvQiw2QkFBd0IsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRXZELHNCQUFpQixHQUFHLEdBQUcsQ0FBQztRQUN4QixtQkFBYyxHQUFHLEdBQUcsQ0FBQztRQUU5QixnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBVU4sV0FBTSxHQUFXLENBQUMsQ0FBQztJQU1pQyxDQUFDO0lBRTdELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxDQUFDO1lBQ2xDLGFBQWEsQ0FBQyxJQUFJLENBQUMsd0JBQXdCLENBQUMsQ0FBQztRQUMvQyxDQUFDO0lBQ0gsQ0FBQztJQUVELGVBQWU7UUFDYixJQUFJLElBQUksQ0FBQyxLQUFLLElBQUksR0FBRyxFQUFFLENBQUM7WUFDdEIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3pCLENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLHdCQUF3QixHQUFHLFdBQVcsQ0FBQyxHQUFHLEVBQUU7Z0JBQy9DLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQUUsQ0FBQztvQkFDbkIsSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLENBQUM7Z0JBQ2xCLENBQUM7cUJBQU0sQ0FBQztvQkFDTixhQUFhLENBQUMsSUFBSSxDQUFDLHdCQUF3QixDQUFDLENBQUM7Z0JBQy9DLENBQUM7Z0JBRUQsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3pDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNSLENBQUM7SUFDSCxDQUFDO0lBRUQsbUJBQW1CLENBQUMsR0FBVztRQUM3QixJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsR0FBRyxDQUFDO1FBQ2xCLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFRCxpQkFBaUI7UUFDZixhQUFhLENBQUMsSUFBSSxDQUFDLHdCQUF3QixDQUFDLENBQUM7SUFDL0MsQ0FBQztJQUVPLGVBQWU7UUFDckIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUMxQixDQUFDO2lJQS9EVSxvQkFBb0I7cUhBQXBCLG9CQUFvQixxTkNuQmpDLHllQWNBLDBsRkREWSxZQUFZOzsyRkFNWCxvQkFBb0I7a0JBUmhDLFNBQVM7aUNBQ0ksSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDLFlBQ2Isb0JBQW9CLG1CQUdiLHVCQUF1QixDQUFDLE1BQU07c0ZBR3RDLElBQUk7c0JBQVosS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBRUksU0FBUztzQkFBbEIsTUFBTTtnQkFDRyx3QkFBd0I7c0JBQWpDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBzZWxlY3RvcjogJ2tpcmJ5LXNsaWRlLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zbGlkZS1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zbGlkZS1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgQElucHV0KCkgdGV4dCA9ICcnO1xuICBASW5wdXQoKSBleHBhbmQ6ICdibG9jayc7XG5cbiAgQE91dHB1dCgpIHNsaWRlRG9uZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIHNsaWRpbmdQZXJjZW50YWdlQ2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIHJlYWRvbmx5IHNsaWRlRG9uZUZhZGVUaW1lID0gNTAwO1xuICByZWFkb25seSBzbGlkZVJlc2V0VGltZSA9IDEwMDtcblxuICBpc1NsaWRlRG9uZSA9IGZhbHNlO1xuICBwY3RJblRlbnMgPSAwO1xuXG4gIGdldCB2YWx1ZSgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuICBzZXQgdmFsdWUodjogbnVtYmVyKSB7XG4gICAgdGhpcy5fdmFsdWUgPSB2O1xuICAgIHRoaXMuY2FsY3VsYXRlUGN0SW5UZW5zKCk7XG4gIH1cblxuICBwcml2YXRlIF92YWx1ZTogbnVtYmVyID0gMDtcbiAgcHJpdmF0ZSByZXNldFNsaWRlckludGVydmFsVGltZXI6IGFueTtcbiAgcHJpdmF0ZSBjYWxjdWxhdGVQY3RJblRlbnMoKSB7XG4gICAgdGhpcy5wY3RJblRlbnMgPSBNYXRoLmNlaWwodGhpcy52YWx1ZSAvIDEwKSAqIDEwO1xuICB9XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjaGFuZ2VEZXRlY3Rpb25SZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnJlc2V0U2xpZGVySW50ZXJ2YWxUaW1lcikge1xuICAgICAgY2xlYXJJbnRlcnZhbCh0aGlzLnJlc2V0U2xpZGVySW50ZXJ2YWxUaW1lcik7XG4gICAgfVxuICB9XG5cbiAgb25TbGlkZXJNb3VzZXVwKCkge1xuICAgIGlmICh0aGlzLnZhbHVlID09IDEwMCkge1xuICAgICAgdGhpcy5oYW5kbGVTbGlkZURvbmUoKTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5yZXNldFNsaWRlckludGVydmFsVGltZXIgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICAgIGlmICh0aGlzLnZhbHVlID4gMCkge1xuICAgICAgICAgIHRoaXMudmFsdWUgLT0gMjtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBjbGVhckludGVydmFsKHRoaXMucmVzZXRTbGlkZXJJbnRlcnZhbFRpbWVyKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0aW9uUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgICAgfSwgMSk7XG4gICAgfVxuICB9XG5cbiAgb25TbGlkZXJWYWx1ZUNoYW5nZSh2YWw6IHN0cmluZykge1xuICAgIHRoaXMudmFsdWUgPSArdmFsO1xuICAgIHRoaXMuc2xpZGluZ1BlcmNlbnRhZ2VDaGFuZ2VkLmVtaXQodGhpcy52YWx1ZSk7XG4gIH1cblxuICBvblNsaWRlck1vdXNlZG93bigpIHtcbiAgICBjbGVhckludGVydmFsKHRoaXMucmVzZXRTbGlkZXJJbnRlcnZhbFRpbWVyKTtcbiAgfVxuXG4gIHByaXZhdGUgaGFuZGxlU2xpZGVEb25lKCkge1xuICAgIHRoaXMuc2xpZGVEb25lLmVtaXQoKTtcbiAgICB0aGlzLmlzU2xpZGVEb25lID0gdHJ1ZTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNsaWRlLWJ1dHRvbi1jb250YWluZXJcIiBbbmdDbGFzc109XCJ7ICdzbGlkZS1kb25lJzogaXNTbGlkZURvbmUgfVwiPlxuICA8aW5wdXRcbiAgICB0eXBlPVwicmFuZ2VcIlxuICAgIChtb3VzZXVwKT1cIm9uU2xpZGVyTW91c2V1cCgpXCJcbiAgICAodG91Y2hlbmQpPVwib25TbGlkZXJNb3VzZXVwKClcIlxuICAgIChpbnB1dCk9XCJvblNsaWRlclZhbHVlQ2hhbmdlKCRldmVudC50YXJnZXQudmFsdWUpXCJcbiAgICAobW91c2Vkb3duKT1cIm9uU2xpZGVyTW91c2Vkb3duKClcIlxuICAgICh0b3VjaHN0YXJ0KT1cIm9uU2xpZGVyTW91c2Vkb3duKClcIlxuICAgIGNsYXNzPVwic2xpZGUtYnV0dG9uXCJcbiAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgIG1heD1cIjEwMFwiXG4gIC8+XG4gIDxwIGNsYXNzPVwic2xpZGUtYnV0dG9uLXRleHQgc2xpZGUte3sgcGN0SW5UZW5zIH19LXBjdFwiPnt7IHRleHQgfX08L3A+XG48L2Rpdj5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGUtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NsaWRlLWJ1dHRvbi9zcmMvc2xpZGUtYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL3NsaWRlLWJ1dHRvbi9zcmMvc2xpZGUtYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBRUwsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDOzs7QUFVdkIsTUFBTSxPQUFPLG9CQUFvQjtJQWEvQixJQUFJLEtBQUs7UUFDUCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDckIsQ0FBQztJQUNELElBQUksS0FBSyxDQUFDLENBQVM7UUFDakIsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7UUFDaEIsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUlPLGtCQUFrQjtRQUN4QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUMsR0FBRyxFQUFFLENBQUM7SUFDbkQsQ0FBQztJQUdPLFNBQVM7UUFDZixJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztJQUNoQixDQUFDO0lBQ0QsSUFBVyxJQUFJO1FBQ2IsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFDRCxJQUFXLElBQUksQ0FBQyxLQUFLO1FBQ25CLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDO0lBQ3JCLENBQUM7SUFFRCxZQUFvQixrQkFBcUM7UUFBckMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFtQjtRQXJDaEQsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUdULGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQy9CLDZCQUF3QixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFFdkQsc0JBQWlCLEdBQUcsR0FBRyxDQUFDO1FBQ3hCLG1CQUFjLEdBQUcsR0FBRyxDQUFDO1FBRTlCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLGNBQVMsR0FBRyxDQUFDLENBQUM7UUFVTixXQUFNLEdBQVcsQ0FBQyxDQUFDO1FBTW5CLFVBQUssR0FBRyxDQUFDLENBQUM7SUFXMEMsQ0FBQztJQUU3RCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsd0JBQXdCLEVBQUUsQ0FBQztZQUNsQyxhQUFhLENBQUMsSUFBSSxDQUFDLHdCQUF3QixDQUFDLENBQUM7UUFDL0MsQ0FBQztJQUNILENBQUM7SUFVRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ2pCLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxHQUFHLEVBQUUsQ0FBQztZQUN0QixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDekIsQ0FBQzthQUFNLENBQUM7WUFDTix1RUFBdUU7WUFDdkUsSUFBSSxDQUFDLHdCQUF3QixHQUFHLFdBQVcsQ0FBQyxHQUFHLEVBQUU7Z0JBQy9DLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQUUsQ0FBQztvQkFDbkIsSUFBSSxDQUFDLEtBQUssSUFBSSxDQUFDLENBQUM7Z0JBQ2xCLENBQUM7cUJBQU0sQ0FBQztvQkFDTixhQUFhLENBQUMsSUFBSSxDQUFDLHdCQUF3QixDQUFDLENBQUM7Z0JBQy9DLENBQUM7Z0JBRUQsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3pDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNSLENBQUM7SUFDSCxDQUFDO0lBRUQsbUJBQW1CLENBQUMsR0FBVztRQUM3QixJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsR0FBRyxDQUFDO1FBQ2xCLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFNRCxlQUFlO1FBQ2IsYUFBYSxDQUFDLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDO1FBQzdDLElBQUksQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFNRCxpQkFBaUI7UUFDZixhQUFhLENBQUMsSUFBSSxDQUFDLHdCQUF3QixDQUFDLENBQUM7SUFDL0MsQ0FBQztJQUVPLGVBQWU7UUFDckIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztJQUMxQixDQUFDO2lJQWpHVSxvQkFBb0I7cUhBQXBCLG9CQUFvQixzOEJDcEJqQyxzaEJBZUEsc3ZGRERZLFlBQVk7OzJGQU1YLG9CQUFvQjtrQkFSaEMsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsWUFDYixvQkFBb0IsbUJBR2IsdUJBQXVCLENBQUMsTUFBTTtzRkFHdEMsSUFBSTtzQkFBWixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFFSSxTQUFTO3NCQUFsQixNQUFNO2dCQUNHLHdCQUF3QjtzQkFBakMsTUFBTTtnQkFpRFAsZUFBZTtzQkFSZCxZQUFZO3VCQUFDLGVBQWUsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQ3hDLFlBQVk7dUJBQUMsaUJBQWlCLEVBQUUsQ0FBQyxRQUFRLENBQUM7O3NCQUMxQyxZQUFZO3VCQUFDLGlCQUFpQixFQUFFLENBQUMsUUFBUSxDQUFDOztzQkFDMUMsWUFBWTt1QkFBQyxrQkFBa0IsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQzNDLFlBQVk7dUJBQUMsY0FBYyxFQUFFLENBQUMsUUFBUSxDQUFDOztzQkFDdkMsWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQ3pDLFlBQVk7dUJBQUMsWUFBWSxFQUFFLENBQUMsUUFBUSxDQUFDOztzQkFDckMsWUFBWTt1QkFBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBNEJyQyxlQUFlO3NCQUpkLFlBQVk7dUJBQUMsaUJBQWlCLEVBQUUsQ0FBQyxRQUFRLENBQUM7O3NCQUMxQyxZQUFZO3VCQUFDLG1CQUFtQixFQUFFLENBQUMsUUFBUSxDQUFDOztzQkFDNUMsWUFBWTt1QkFBQyxtQkFBbUIsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQzVDLFlBQVk7dUJBQUMsb0JBQW9CLEVBQUUsQ0FBQyxRQUFRLENBQUM7Z0JBVTlDLGlCQUFpQjtzQkFKaEIsWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQ3pDLFlBQVk7dUJBQUMsa0JBQWtCLEVBQUUsQ0FBQyxRQUFRLENBQUM7O3NCQUMzQyxZQUFZO3VCQUFDLGNBQWMsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7c0JBQ3ZDLFlBQVk7dUJBQUMsYUFBYSxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBzZWxlY3RvcjogJ2tpcmJ5LXNsaWRlLWJ1dHRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9zbGlkZS1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zbGlkZS1idXR0b24uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFNsaWRlQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgQElucHV0KCkgdGV4dCA9ICcnO1xuICBASW5wdXQoKSBleHBhbmQ6ICdibG9jayc7XG5cbiAgQE91dHB1dCgpIHNsaWRlRG9uZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIHNsaWRpbmdQZXJjZW50YWdlQ2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIHJlYWRvbmx5IHNsaWRlRG9uZUZhZGVUaW1lID0gNTAwO1xuICByZWFkb25seSBzbGlkZVJlc2V0VGltZSA9IDEwMDtcblxuICBpc1NsaWRlRG9uZSA9IGZhbHNlO1xuICBwY3RJblRlbnMgPSAwO1xuXG4gIGdldCB2YWx1ZSgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLl92YWx1ZTtcbiAgfVxuICBzZXQgdmFsdWUodjogbnVtYmVyKSB7XG4gICAgdGhpcy5fdmFsdWUgPSB2O1xuICAgIHRoaXMuY2FsY3VsYXRlUGN0SW5UZW5zKCk7XG4gIH1cblxuICBwcml2YXRlIF92YWx1ZTogbnVtYmVyID0gMDtcbiAgcHJpdmF0ZSByZXNldFNsaWRlckludGVydmFsVGltZXI6IGFueTtcbiAgcHJpdmF0ZSBjYWxjdWxhdGVQY3RJblRlbnMoKSB7XG4gICAgdGhpcy5wY3RJblRlbnMgPSBNYXRoLmNlaWwodGhpcy52YWx1ZSAvIDEwKSAqIDEwO1xuICB9XG5cbiAgcHJpdmF0ZSBfc3RlcCA9IDE7XG4gIHByaXZhdGUgcmVzZXRTdGVwKCkge1xuICAgIHRoaXMuc3RlcCA9IDE7XG4gIH1cbiAgcHVibGljIGdldCBzdGVwKCkge1xuICAgIHJldHVybiB0aGlzLl9zdGVwO1xuICB9XG4gIHB1YmxpYyBzZXQgc3RlcCh2YWx1ZSkge1xuICAgIHRoaXMuX3N0ZXAgPSB2YWx1ZTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0aW9uUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5yZXNldFNsaWRlckludGVydmFsVGltZXIpIHtcbiAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy5yZXNldFNsaWRlckludGVydmFsVGltZXIpO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2tleXVwLmFycm93dXAnLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXl1cC5hcnJvd2Rvd24nLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXl1cC5hcnJvd2xlZnQnLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXl1cC5hcnJvd3JpZ2h0JywgWyckZXZlbnQnXSlcbiAgQEhvc3RMaXN0ZW5lcigna2V5dXAucGFnZXVwJywgWyckZXZlbnQnXSlcbiAgQEhvc3RMaXN0ZW5lcigna2V5dXAucGFnZWRvd24nLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXl1cC5ob21lJywgWyckZXZlbnQnXSlcbiAgQEhvc3RMaXN0ZW5lcigna2V5dXAuZW5kJywgWyckZXZlbnQnXSlcbiAgb25TbGlkZXJNb3VzZXVwKCkge1xuICAgIHRoaXMucmVzZXRTdGVwKCk7XG4gICAgaWYgKHRoaXMudmFsdWUgPT0gMTAwKSB7XG4gICAgICB0aGlzLmhhbmRsZVNsaWRlRG9uZSgpO1xuICAgIH0gZWxzZSB7XG4gICAgICAvLyBSZXR1cm4gc2xpZGVyIHRodW1iIHRvIGJlZ2lubmluZyBvZiBzbGlkZXIgYnV0dG9uIGluIGluY3JlbWVudHMgb2YgMlxuICAgICAgdGhpcy5yZXNldFNsaWRlckludGVydmFsVGltZXIgPSBzZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgICAgIGlmICh0aGlzLnZhbHVlID4gMCkge1xuICAgICAgICAgIHRoaXMudmFsdWUgLT0gMjtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBjbGVhckludGVydmFsKHRoaXMucmVzZXRTbGlkZXJJbnRlcnZhbFRpbWVyKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0aW9uUmVmLm1hcmtGb3JDaGVjaygpO1xuICAgICAgfSwgMSk7XG4gICAgfVxuICB9XG5cbiAgb25TbGlkZXJWYWx1ZUNoYW5nZSh2YWw6IHN0cmluZykge1xuICAgIHRoaXMudmFsdWUgPSArdmFsO1xuICAgIHRoaXMuc2xpZGluZ1BlcmNlbnRhZ2VDaGFuZ2VkLmVtaXQodGhpcy52YWx1ZSk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmFycm93dXAnLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLmFycm93ZG93bicsIFsnJGV2ZW50J10pXG4gIEBIb3N0TGlzdGVuZXIoJ2tleWRvd24uYXJyb3dsZWZ0JywgWyckZXZlbnQnXSlcbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5hcnJvd3JpZ2h0JywgWyckZXZlbnQnXSlcbiAgb25LZXlEb3duRXZlbnRzKCkge1xuICAgIGNsZWFySW50ZXJ2YWwodGhpcy5yZXNldFNsaWRlckludGVydmFsVGltZXIpO1xuICAgIHRoaXMuc3RlcCA9IDEwO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5wYWdldXAnLCBbJyRldmVudCddKVxuICBASG9zdExpc3RlbmVyKCdrZXlkb3duLnBhZ2Vkb3duJywgWyckZXZlbnQnXSlcbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5ob21lJywgWyckZXZlbnQnXSlcbiAgQEhvc3RMaXN0ZW5lcigna2V5ZG93bi5lbmQnLCBbJyRldmVudCddKVxuICBvblNsaWRlck1vdXNlZG93bigpIHtcbiAgICBjbGVhckludGVydmFsKHRoaXMucmVzZXRTbGlkZXJJbnRlcnZhbFRpbWVyKTtcbiAgfVxuXG4gIHByaXZhdGUgaGFuZGxlU2xpZGVEb25lKCkge1xuICAgIHRoaXMuc2xpZGVEb25lLmVtaXQoKTtcbiAgICB0aGlzLmlzU2xpZGVEb25lID0gdHJ1ZTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNsaWRlLWJ1dHRvbi1jb250YWluZXJcIiBbbmdDbGFzc109XCJ7ICdzbGlkZS1kb25lJzogaXNTbGlkZURvbmUgfVwiIFtpbmVydF09XCJpc1NsaWRlRG9uZVwiPlxuICA8aW5wdXRcbiAgICB0eXBlPVwicmFuZ2VcIlxuICAgIChtb3VzZXVwKT1cIm9uU2xpZGVyTW91c2V1cCgpXCJcbiAgICAodG91Y2hlbmQpPVwib25TbGlkZXJNb3VzZXVwKClcIlxuICAgIChpbnB1dCk9XCJvblNsaWRlclZhbHVlQ2hhbmdlKCRldmVudC50YXJnZXQudmFsdWUpXCJcbiAgICAobW91c2Vkb3duKT1cIm9uU2xpZGVyTW91c2Vkb3duKClcIlxuICAgICh0b3VjaHN0YXJ0KT1cIm9uU2xpZGVyTW91c2Vkb3duKClcIlxuICAgIGNsYXNzPVwic2xpZGUtYnV0dG9uXCJcbiAgICBbdmFsdWVdPVwidmFsdWVcIlxuICAgIG1heD1cIjEwMFwiXG4gICAgW3N0ZXBdPVwic3RlcFwiXG4gIC8+XG4gIDxwIGNsYXNzPVwic2xpZGUtYnV0dG9uLXRleHQgc2xpZGUte3sgcGN0SW5UZW5zIH19LXBjdFwiPnt7IHRleHQgfX08L3A+XG48L2Rpdj5cbiJdfQ==

package/esm2022/spinner/spinner.component.mjs

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

package/esm2022/spinner/spinner.module.mjs

@@ -3,11 +3,11 @@ import { NgModule } from '@angular/core';
 import { SpinnerComponent } from './spinner.component';
 import * as i0 from "@angular/core";
 export class SpinnerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule], exports: [SpinnerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SpinnerModule, declarations: [SpinnerComponent], imports: [CommonModule], exports: [SpinnerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SpinnerModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: SpinnerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SpinnerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SpinnerComponent],

package/esm2022/tab-navigation/tab-navigation/tab-navigation.component.mjs

@@ -98,12 +98,12 @@ export class TabNavigationComponent {
             this.setTabElements();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: TabNavigationComponent, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:12px;-webkit-overflow-scrolling:auto;scrollbar-width:none}@media (max-width: 767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}div[role=tablist]::-webkit-scrollbar{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabNavigationComponent, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;position:relative}@media (max-width: 767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:12px;-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media (max-width: 767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", 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}@media (max-width: 767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}div[role=tablist]::-webkit-scrollbar{display:none}\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 }], propDecorators: { tabBar: [{
                 type: ViewChild,
                 args: ['tabBar']

package/esm2022/tab-navigation/tab-navigation-item/tab-navigation-item.component.mjs

@@ -6,10 +6,10 @@ export class TabNavigationItemComponent {
         this.truncate = true;
         /* */
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: TabNavigationItemComponent, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, ngImport: i0, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabNavigationItemComponent, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, ngImport: i0, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button role=\"tab\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [":host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:16px;font-size:16px;line-height:24px;gap:4px}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:700}:host button[role=tab][aria-selected=true]{font-weight:700}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{

package/esm2022/tab-navigation/tab-navigation.module.mjs

@@ -4,11 +4,11 @@ import { TabNavigationComponent } from './tab-navigation/tab-navigation.componen
 import { TabNavigationItemComponent } from './tab-navigation-item/tab-navigation-item.component';
 import * as i0 from "@angular/core";
 export class TabNavigationModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: TabNavigationModule, declarations: [TabNavigationComponent, TabNavigationItemComponent], imports: [CommonModule], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationModule, declarations: [TabNavigationComponent, TabNavigationItemComponent], imports: [CommonModule], exports: [TabNavigationComponent, TabNavigationItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabNavigationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabNavigationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/tabs/tab-button/tab-button.component.mjs

@@ -15,12 +15,12 @@ export class TabButtonComponent {
             dispatchEvent(clickEvent);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: TabButtonComponent, selector: "kirby-tab-button", inputs: { tab: "tab" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}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) }@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--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: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media (min-width: 768px){ion-tab-button{flex:none;flex-direction:row;font-size:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabButtonComponent, selector: "kirby-tab-button", inputs: { tab: "tab" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media (min-width: 768px){ion-tab-button{flex:none;flex-direction:row;font-size:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-tab-button', template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}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) }@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--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: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}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', template: "<ion-tab-button\n  #ionTabButton\n  [tab]=\"tab\"\n  (click)=\"onClick($event, ionTabButton.selected)\"\n  tabindex=\"0\"\n>\n  <ng-content\n    *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n    select=\"kirby-icon:not([selected-tab])\"\n  ></ng-content>\n  <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: [":host{display:contents}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: rgb(244.8, 244.8, 244.8);--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: rgb(244.8, 244.8, 244.8)}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: rgb(234.6, 234.6, 234.6)}ion-tab-button{transition:background-color 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-weight:500;font-size:12px;line-height:16px;--color: var(--kirby-text-color-semi-dark);--color-selected: var(--kirby-black);--padding-start: 0;--padding-end: 0;--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left: calc(50% + .4em) }ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left: calc(50% + .2em) }@media (min-width: 768px){ion-tab-button{flex:none;flex-direction:row;font-size:14px;line-height:20px;--padding-start: 24px;--padding-end: 24px;--kirby-badge-position: absolute;--kirby-badge-top: calc(50% - 1.35em) ;--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button ::ng-deep>kirby-icon{--kirby-icon-margin-right: 8px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tab-button{--padding-start: 12px;--padding-end: 12px}}\n"] }]
         }], propDecorators: { tab: [{
                 type: Input
             }], click: [{

package/esm2022/tabs/tabs.component.mjs

@@ -15,10 +15,10 @@ export class TabsComponent {
     ngOnDestroy() {
         this.tabsService.resetOutlet();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsComponent, deps: [{ token: i1.TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: TabsComponent, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"], dependencies: [{ kind: "component", type: i2.IonTabs, selector: "ion-tabs" }, { kind: "component", type: i2.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsComponent, deps: [{ token: i1.TabsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TabsComponent, selector: "kirby-tab-bar", host: { properties: { "class.tab-bar-bottom-hidden": "this.tabBarBottomHidden" } }, viewQueries: [{ propertyName: "tabs", first: true, predicate: IonTabs, descendants: true, static: true }], ngImport: i0, template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"], dependencies: [{ kind: "component", type: i2.IonTabs, selector: "ion-tabs" }, { kind: "component", type: i2.IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-tab-bar', template: "<ion-tabs>\n  <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n    <ng-content></ng-content>\n  </ion-tab-bar>\n</ion-tabs>\n", styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom: 0px}ion-tabs ion-tab-bar{--background: rgba(var(--kirby-white-rgb), .94);--border: 1px solid var(--kirby-light);--color: var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width, none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width: 768px){ion-tabs{--kirby-tab-bar-height: 70px}ion-tabs ion-tab-bar{column-gap:24px}}@media (min-width: 992px) and (hover: hover) and (pointer: fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom: initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end;column-gap:initial}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}\n"] }]
         }], ctorParameters: () => [{ type: i1.TabsService }], propDecorators: { tabBarBottomHidden: [{

package/esm2022/tabs/tabs.module.mjs

@@ -7,11 +7,11 @@ import { TabsService } from './tabs.service';
 import { TabsComponent } from './tabs.component';
 import * as i0 from "@angular/core";
 export class TabsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: TabsModule, declarations: [TabsComponent, TabButtonComponent], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton], exports: [TabsComponent, TabButtonComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: TabsModule, declarations: [TabsComponent, TabButtonComponent], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton], exports: [TabsComponent, TabButtonComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsModule, providers: [TabsService], imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [IconModule, CommonModule, IonTabs, IonTabBar, IonTabButton],

package/esm2022/tabs/tabs.service.mjs

@@ -13,10 +13,10 @@ export class TabsService {
     resetOutlet() {
         this.outletSubject$.next(null);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TabsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TabsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',

package/esm2022/testing/test-helper.mjs

@@ -3,11 +3,11 @@ import { provideIonicAngular } from '@ionic/angular/standalone';
 import { componentOnReady } from '@ionic/core';
 import * as i0 from "@angular/core";
 class IonicTestingModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IonicTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: IonicTestingModule }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IonicTestingModule, providers: [provideIonicAngular({ mode: 'ios', _testing: true })] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: IonicTestingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: IonicTestingModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: IonicTestingModule, providers: [provideIonicAngular({ mode: 'ios', _testing: true })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IonicTestingModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: IonicTestingModule, decorators: [{
             type: NgModule,
             args: [{
                     providers: [provideIonicAngular({ mode: 'ios', _testing: true })],

package/esm2022/testing-base/lib/components/mock.accordion-item.component.mjs

@@ -3,15 +3,15 @@ import { AccordionItemComponent } from '@kirbydesign/designsystem';
 import * as i0 from "@angular/core";
 // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
 export class MockAccordionItemComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MockAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: MockAccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle" }, host: { attributes: { "mock": "mock" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MockAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: MockAccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle" }, host: { attributes: { "mock": "mock" } }, providers: [
             {
                 provide: AccordionItemComponent,
                 useExisting: forwardRef((() => MockAccordionItemComponent)),
             },
         ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MockAccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MockAccordionItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kirby-accordion-item',

package/esm2022/testing-base/lib/components/mock.action-group.component.mjs

@@ -3,15 +3,15 @@ import { ActionGroupComponent } from '@kirbydesign/designsystem/action-group';
 import * as i0 from "@angular/core";
 // #region AUTO-GENERATED - PLEASE DON'T EDIT CONTENT WITHIN!
 export class MockActionGroupComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MockActionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: MockActionGroupComponent, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", emphasizeActions: "emphasizeActions", align: "align" }, host: { attributes: { "mock": "mock" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MockActionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: MockActionGroupComponent, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", emphasizeActions: "emphasizeActions", align: "align" }, host: { attributes: { "mock": "mock" } }, providers: [
             {
                 provide: ActionGroupComponent,
                 useExisting: forwardRef((() => MockActionGroupComponent)),
             },
         ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MockActionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MockActionGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kirby-action-group',

package/esm2022/testing-base/lib/components/mock.action-sheet.component.mjs

@@ -7,15 +7,15 @@ export class MockActionSheetComponent {
         this.cancel = new EventEmitter();
         this.itemSelect = new EventEmitter();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MockActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: MockActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, host: { attributes: { "mock": "mock" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MockActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: MockActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, host: { attributes: { "mock": "mock" } }, providers: [
             {
                 provide: ActionSheetComponent,
                 useExisting: forwardRef((() => MockActionSheetComponent)),
             },
         ], ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: MockActionSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: MockActionSheetComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kirby-action-sheet',