npm - @kirbydesign/designsystem - Versions diffs - 11.11.0-dev-d2c1fb9 → 11.11.0-dev-9d936c8 - Mend

@kirbydesign/designsystem 11.11.0-dev-d2c1fb9 → 11.11.0-dev-9d936c8

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

Files changed (104) hide show

package/fesm2022/kirbydesign-designsystem-section-header.mjs CHANGED Viewed

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { IonItemDivider } from '@ionic/angular';
+import { IonItemDivider } from '@ionic/angular/standalone';
 class SectionHeaderComponent {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SectionHeaderComponent, isStandalone: true, selector: "kirby-section-header", ngImport: i0, template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-section-header-color: var(--kirby-text-color-black);display:block}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;font-weight:inherit;min-height:0;z-index:initial;align-items:flex-end;padding-left:var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-start: var(--kirby-spacing-s)}:host ion-item-divider ::ng-deep>[heading]{font-weight:var(--kirby-font-weight-bold);font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m);color:var(--kirby-section-header-color);margin:0 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>h2[heading],:host ion-item-divider ::ng-deep>.kirby-text-large[heading]{font-size:var(--kirby-font-size-l);line-height:var(--kirby-line-height-l)}:host ion-item-divider ::ng-deep>.kirby-text-medium[heading]{font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m)}:host ion-item-divider ::ng-deep>h4[heading],:host ion-item-divider ::ng-deep>h5[heading],:host ion-item-divider ::ng-deep>h6[heading],:host ion-item-divider ::ng-deep>.kirby-text-normal[heading]{font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:var(--kirby-font-weight-light);font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);color:var(--kirby-section-header-color);margin:var(--kirby-spacing-xxxs) 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SectionHeaderComponent, isStandalone: true, selector: "kirby-section-header", ngImport: i0, template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-section-header-color: var(--kirby-color-content-base);display:block}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;font-weight:inherit;min-height:0;z-index:initial;align-items:flex-end;padding-left:var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-start: var(--kirby-spacing-s)}:host ion-item-divider ::ng-deep>[heading]{font-weight:var(--kirby-font-weight-bold);font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m);color:var(--kirby-section-header-color);margin:0 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>h2[heading],:host ion-item-divider ::ng-deep>.kirby-text-large[heading]{font-size:var(--kirby-font-size-l);line-height:var(--kirby-line-height-l)}:host ion-item-divider ::ng-deep>.kirby-text-medium[heading]{font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m)}:host ion-item-divider ::ng-deep>h4[heading],:host ion-item-divider ::ng-deep>h5[heading],:host ion-item-divider ::ng-deep>h6[heading],:host ion-item-divider ::ng-deep>.kirby-text-normal[heading]{font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:var(--kirby-font-weight-light);font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);color:var(--kirby-section-header-color);margin:var(--kirby-spacing-xxxs) 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SectionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ imports: [IonItemDivider], selector: 'kirby-section-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-section-header-color: var(--kirby-text-color-black);display:block}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;font-weight:inherit;min-height:0;z-index:initial;align-items:flex-end;padding-left:var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-start: var(--kirby-spacing-s)}:host ion-item-divider ::ng-deep>[heading]{font-weight:var(--kirby-font-weight-bold);font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m);color:var(--kirby-section-header-color);margin:0 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>h2[heading],:host ion-item-divider ::ng-deep>.kirby-text-large[heading]{font-size:var(--kirby-font-size-l);line-height:var(--kirby-line-height-l)}:host ion-item-divider ::ng-deep>.kirby-text-medium[heading]{font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m)}:host ion-item-divider ::ng-deep>h4[heading],:host ion-item-divider ::ng-deep>h5[heading],:host ion-item-divider ::ng-deep>h6[heading],:host ion-item-divider ::ng-deep>.kirby-text-normal[heading]{font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:var(--kirby-font-weight-light);font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);color:var(--kirby-section-header-color);margin:var(--kirby-spacing-xxxs) 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ imports: [IonItemDivider], selector: 'kirby-section-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-section-header-color: var(--kirby-color-content-base);display:block}:host ion-item-divider{--inner-padding-end: 0;--background: transparent;font-weight:inherit;min-height:0;z-index:initial;align-items:flex-end;padding-left:var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-start: var(--kirby-spacing-s)}:host ion-item-divider ::ng-deep>[heading]{font-weight:var(--kirby-font-weight-bold);font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m);color:var(--kirby-section-header-color);margin:0 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>h2[heading],:host ion-item-divider ::ng-deep>.kirby-text-large[heading]{font-size:var(--kirby-font-size-l);line-height:var(--kirby-line-height-l)}:host ion-item-divider ::ng-deep>.kirby-text-medium[heading]{font-size:var(--kirby-font-size-m);line-height:var(--kirby-line-height-m)}:host ion-item-divider ::ng-deep>h4[heading],:host ion-item-divider ::ng-deep>h5[heading],:host ion-item-divider ::ng-deep>h6[heading],:host ion-item-divider ::ng-deep>.kirby-text-normal[heading]{font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-n)}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:var(--kirby-font-weight-light);font-size:var(--kirby-font-size-s);line-height:var(--kirby-line-height-s);color:var(--kirby-section-header-color);margin:var(--kirby-spacing-xxxs) 0 var(--kirby-spacing-xxs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }] });
 /**

package/fesm2022/kirbydesign-designsystem-section-header.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-section-header.mjs","sources":["../../section-header/src/section-header.component.ts","../../section-header/src/section-header.component.html","../../section-header/src/kirbydesign-designsystem-section-header.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { IonItemDivider } from '@ionic/angular';\n\n@Component({\n imports: [IonItemDivider],\n selector: 'kirby-section-header',\n templateUrl: './section-header.component.html',\n styleUrls: ['./section-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionHeaderComponent {}\n","<ion-item-divider>\n <ng-content></ng-content>\n</ion-item-divider>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;MAUa,sBAAsB,CAAA;kIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVnC,wEAGA,EAAA,MAAA,EAAA,CAAA,~~oqDAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDCY,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMb,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,cAAc,CAAC,EAAA,QAAA,EACf,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wEAAA,EAAA,MAAA,EAAA,CAAA,~~oqDAAA~~,CAAA,EAAA;;;AERjD;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-section-header.mjs","sources":["../../section-header/src/section-header.component.ts","../../section-header/src/section-header.component.html","../../section-header/src/kirbydesign-designsystem-section-header.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { IonItemDivider } from '@ionic/angular/standalone';\n\n@Component({\n imports: [IonItemDivider],\n selector: 'kirby-section-header',\n templateUrl: './section-header.component.html',\n styleUrls: ['./section-header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SectionHeaderComponent {}\n","<ion-item-divider>\n <ng-content></ng-content>\n</ion-item-divider>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;MAUa,sBAAsB,CAAA;kIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVnC,wEAGA,EAAA,MAAA,EAAA,CAAA,sqDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDCY,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMb,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,cAAc,CAAC,EAAA,QAAA,EACf,sBAAsB,EAAA,eAAA,EAGf,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wEAAA,EAAA,MAAA,EAAA,CAAA,sqDAAA,CAAA,EAAA;;;AERjD;;AAEG;;;;"}

package/fesm2022/kirbydesign-designsystem-segmented-control.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { EventEmitter, ElementRef, forwardRef, HostListener, Output, Input, Host
 import { IconComponent } from '@kirbydesign/designsystem/icon';
 import { BadgeComponent } from '@kirbydesign/designsystem/badge';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { IonSegment, IonSegmentButton } from '@ionic/angular';
+import { IonSegment, IonSegmentButton } from '@ionic/angular/standalone';
 var SegmentedControlMode;
 (function (SegmentedControlMode) {
@@ -183,7 +183,7 @@ class SegmentedControlComponent {
                 useExisting: forwardRef((() => SegmentedControlComponent)),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "ionSegmentElement", first: true, predicate: IonSegment, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-inputs-background-color);box-shadow:var(--kirby-inputs-elevation);overflow:visible;contain:none;width:fit-content}:host.default-mode ion-segment-button{--color-hover: var(--kirby-inputs-color-hover)}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-inputs-background-color);--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}@media(hover:hover){:host.chip-mode ion-segment-button:hover,:host.compact ion-segment-button:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}@media(hover:hover){:host.chip-mode ion-segment-button.segment-button-checked:hover,:host.compact ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: none;--color: var(--kirby-inputs-color);--indicator-color: var(--kirby-inputs-indicator-background-color);--color-checked: var(--kirby-inputs-indicator-color);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}ion-segment-button::part(native){border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(native):after{transition:all 80ms linear 0ms;border-radius:var(--border-radius)}ion-segment-button::part(indicator){padding-inline:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: BadgeComponent, selector: "kirby-badge", inputs: ["text", "size"] }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "ionSegmentElement", first: true, predicate: IonSegment, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-color-fill-raised);outline:1px solid var(--kirby-color-border-raised-quiet);outline-offset:-1px;overflow:visible;contain:none;width:fit-content}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.chip-mode ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-raised)}:host.chip-mode ion-segment-button:not(.segment-button-checked)::part(native){border-color:var(--kirby-color-border-raised-quiet)}@media(hover:hover){:host.chip-mode ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-raised-hover)}:host.chip-mode ion-segment-button:not(.segment-button-checked):hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}:host.chip-mode ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-raised-active)}:host.chip-mode ion-segment-button:not(.segment-button-checked):active::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}:host.compact ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}:host.compact ion-segment-button:not(.segment-button-checked)::part(native),:host.compact ion-segment-button:not(.segment-button-checked):hover::part(native),:host.compact ion-segment-button:not(.segment-button-checked):active::part(native){border-color:transparent}@media(hover:hover){:host.compact ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-base-hover);--color: var(--kirby-color-content-base-hover)}}:host.compact ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-base-active);--color: var(--kirby-color-content-base-active)}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: transparent;--background-hover-opacity: 0;--color: var(--kirby-color-content-raised);--color-hover: var(--color);--indicator-color: var(--kirby-color-fill-brand);--color-checked: var(--kirby-color-content-brand);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}@media(hover:hover){ion-segment-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-hover);--indicator-color: var(--kirby-color-fill-brand-hover);--color-checked: var(--kirby-color-content-brand-hover)}}ion-segment-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--indicator-color: var(--kirby-color-fill-brand-active);--color-checked: var(--kirby-color-content-brand-active)}ion-segment-button::part(native){transition:all 80ms linear 0ms;box-sizing:border-box;border:1px solid transparent;border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(indicator){padding-inline:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: BadgeComponent, selector: "kirby-badge", inputs: ["text", "size"] }, { kind: "component", type: IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { kind: "component", type: IonSegmentButton, selector: "ion-segment-button", inputs: ["contentId", "disabled", "layout", "mode", "type", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
@@ -193,7 +193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                             useExisting: forwardRef((() => SegmentedControlComponent)),
                             multi: true,
                         },
-                    ], template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-inputs-background-color);box-shadow:var(--kirby-inputs-elevation);overflow:visible;contain:none;width:fit-content}:host.default-mode ion-segment-button{--color-hover: var(--kirby-inputs-color-hover)}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-inputs-background-color);--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}@media(hover:hover){:host.chip-mode ion-segment-button:hover,:host.compact ion-segment-button:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}@media(hover:hover){:host.chip-mode ion-segment-button.segment-button-checked:hover,:host.compact ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: none;--color: var(--kirby-inputs-color);--indicator-color: var(--kirby-inputs-indicator-background-color);--color-checked: var(--kirby-inputs-indicator-color);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}ion-segment-button::part(native){border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(native):after{transition:all 80ms linear 0ms;border-radius:var(--border-radius)}ion-segment-button::part(indicator){padding-inline:0}\n"] }]
+                    ], template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n  [disabled]=\"isDisabled\"\n>\n  @for (item of items; track item.id; let i = $index) {\n    <ion-segment-button\n      [value]=\"item.id\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.tabindex]=\"getTabIndex(item, i)\"\n      (click)=\"focusNativeButton($event)\"\n    >\n      {{ item.text }}\n      @if (item.badge) {\n        <kirby-badge\n          role=\"text\"\n          [attr.aria-label]=\"item.badge.description\"\n          [themeColor]=\"item.badge.themeColor\"\n        >\n          @if (item.badge.icon) {\n            <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n          } @else {\n            {{ item.badge.content }}\n          }\n        </kirby-badge>\n      }\n    </ion-segment-button>\n  }\n</ion-segment>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-position: absolute;--kirby-badge-top: -.8em;--kirby-badge-right: -1.6em;--kirby-badge-z-index: var(--kirby-z-index-segment-badge)}:host.sm ion-segment-button{min-height:var(--kirby-spacing-l);font-size:min(var(--kirby-font-size-xs),var(--kirby-spacing-xs) * 1.45);--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--kirby-badge-right: calc(-1 * var(--kirby-spacing-xxs))}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:var(--kirby-border-radius-pill)}:host.default-mode ion-segment{--background: var(--kirby-color-fill-raised);outline:1px solid var(--kirby-color-border-raised-quiet);outline-offset:-1px;overflow:visible;contain:none;width:fit-content}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:var(--kirby-spacing-xxxs);gap:var(--kirby-spacing-xxs)}@media(pointer:coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--indicator-transition: none}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.chip-mode ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-raised)}:host.chip-mode ion-segment-button:not(.segment-button-checked)::part(native){border-color:var(--kirby-color-border-raised-quiet)}@media(hover:hover){:host.chip-mode ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-raised-hover)}:host.chip-mode ion-segment-button:not(.segment-button-checked):hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}:host.chip-mode ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-raised-active)}:host.chip-mode ion-segment-button:not(.segment-button-checked):active::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--padding-start: var(--kirby-spacing-xs);--padding-end: var(--kirby-spacing-xs)}:host.compact ion-segment-button:not(.segment-button-checked){--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}:host.compact ion-segment-button:not(.segment-button-checked)::part(native),:host.compact ion-segment-button:not(.segment-button-checked):hover::part(native),:host.compact ion-segment-button:not(.segment-button-checked):active::part(native){border-color:transparent}@media(hover:hover){:host.compact ion-segment-button:not(.segment-button-checked):hover{--background: var(--kirby-color-fill-base-hover);--color: var(--kirby-color-content-base-hover)}}:host.compact ion-segment-button:not(.segment-button-checked):active{--background: var(--kirby-color-fill-base-active);--color: var(--kirby-color-content-base-active)}ion-segment{border-radius:var(--kirby-border-radius-pill);grid-auto-columns:max-content;box-sizing:border-box}ion-segment-button:focus-within::part(native):focus-visible,ion-segment-button:focus-visible:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-segment-button{position:relative}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}ion-segment-button{--border-radius: var(--kirby-border-radius-pill);--border-style: none;--background: transparent;--background-hover-opacity: 0;--color: var(--kirby-color-content-raised);--color-hover: var(--color);--indicator-color: var(--kirby-color-fill-brand);--color-checked: var(--kirby-color-content-brand);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:var(--kirby-spacing-xl);min-width:fit-content;font-weight:var(--kirby-font-weight-normal);font-size:min(var(--kirby-font-size-s),var(--kirby-spacing-s) * 1.45);text-transform:none;margin:0}@media(hover:hover){ion-segment-button:hover{--background: var(--kirby-color-fill-raised-hover);--color: var(--kirby-color-content-raised-hover);--indicator-color: var(--kirby-color-fill-brand-hover);--color-checked: var(--kirby-color-content-brand-hover)}}ion-segment-button:active{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--indicator-color: var(--kirby-color-fill-brand-active);--color-checked: var(--kirby-color-content-brand-active)}ion-segment-button::part(native){transition:all 80ms linear 0ms;box-sizing:border-box;border:1px solid transparent;border-radius:var(--border-radius);contain:none;overflow:visible;opacity:1}ion-segment-button::part(indicator){padding-inline:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ionSegmentElement: [{
                 type: ViewChild,
                 args: [IonSegment, { static: true, read: ElementRef }]

package/fesm2022/kirbydesign-designsystem-segmented-control.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html","../../segmented-control/src/kirbydesign-designsystem-segmented-control.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n chip = 'chip',\n compactChip = 'compactChip',\n default = 'default',\n}\n\n@Component({\n imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n selector: 'kirby-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedControlComponent),\n multi: true,\n },\n ],\n})\nexport class SegmentedControlComponent<\n TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n @ViewChild(IonSegment, { static: true, read: ElementRef })\n private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n /*\n Ensure that the click actually did originate from within the segment-button.\n * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n /\n preventOutsideClick(event: TouchEvent) {\n if (event.target instanceof HTMLElement) {\n const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n if (!targetIsInSegmentBtn) {\n event.stopImmediatePropagation();\n }\n }\n }\n\n @Input() mode: SegmentedControlMode \| `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n @HostBinding('class')\n get _modeCssClass() {\n return {\n [SegmentedControlMode.chip]: 'chip-mode',\n [SegmentedControlMode.default]: 'default-mode',\n [SegmentedControlMode.compactChip]: 'compact chip-mode',\n }[this.mode];\n }\n\n private _items: TItem[] = [];\n get items(): TItem[] {\n return this._items;\n }\n\n @Input() set items(value: TItem[]) {\n this._items = value \|\| [];\n this._value = this.items[this.selectedIndex];\n this.ensureIonSegmentSelected();\n }\n\n protected isDisabled = false;\n\n /\n After upgrading to Ionic standalone components (Ionic v.7.6.6)\n * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n * the value of the segment component to be reflected in the checked state\n * of it's slotted segment buttons.\n * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n * However the patch doesn't fix the problem if `items` are updated after first initialization\n * and the ion-segment-button(s) are re-rerendered.\n /\n private ensureIonSegmentSelected() {\n const ionSegment = this.ionSegmentElement.nativeElement;\n const ionSelectEvent = ionSegment['ionSelect'];\n if (this._value && typeof ionSelectEvent?.emit === 'function') {\n // Ensure changes has been reflected to the DOM:\n setTimeout(() => {\n const selectedSegmentButton = ionSegment.querySelector(\n 'ion-segment-button.segment-button-checked'\n );\n if (selectedSegmentButton) return; // Nothing to patch\n\n ionSelectEvent.emit({ value: this._value?.id });\n });\n }\n }\n\n private _selectedIndex: number = -1;\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @Input() set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n this._value = this.items[this.selectedIndex];\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n\n @Output() selectedIndexChange = new EventEmitter<number>();\n\n private _value: NoInfer<TItem>;\n get value(): NoInfer<TItem> {\n return this._value;\n }\n\n @Input() set value(value: NoInfer<TItem>) {\n this.selectedIndex = this.items.indexOf(value);\n }\n\n @HostBinding('class.sm')\n isSmallSize: boolean;\n\n @Input() set size(size: 'sm' \| 'md') {\n this.isSmallSize = size === 'sm';\n }\n\n private _disableChangeOnSwipe: boolean = false;\n get disableChangeOnSwipe(): boolean {\n return this._disableChangeOnSwipe;\n }\n\n @Input() set disableChangeOnSwipe(value: boolean) {\n this._disableChangeOnSwipe = value;\n }\n\n @Output() segmentSelect = new EventEmitter<TItem>();\n\n onSegmentSelect(selectedId: string) {\n const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n if (selectedItemIndex !== this.selectedIndex) {\n this.selectedIndex = selectedItemIndex;\n this.segmentSelect.emit(this.value);\n this.onChange(this.value);\n this.onTouched();\n }\n }\n\n focusNativeButton(event: UIEvent) {\n (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n }\n\n private _segmentElementHasFocus = false;\n\n getTabIndex(item: TItem, index: number) {\n // When focused prevent tab stop from inner native button to outer ion-segment-button:\n if (this._segmentElementHasFocus) return -1;\n // Allow tab stop on selected item:\n if (item.id === this.value?.id) return null;\n // Allow tab stop on first item if no value is set:\n if (!this.value && index === 0) return null;\n // Prevent tab stop on all other items:\n return -1;\n }\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n @HostListener('focusin')\n @HostListener('focusout')\n _onFocusInOut() {\n // @HostListener(focusin\|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n if (!this._segmentElementHasFocus) {\n this.onTouched();\n }\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private onChange: (value: NoInfer<TItem>) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private onTouched: () => void = () => {};\n /\n Sets the segmented control's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n \n @param value New value to be written to the model.\n /\n writeValue(value: NoInfer<TItem>): void {\n if (value !== this._value) {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n /\n Saves a callback function to be invoked when the segmented control's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n \n @param fn Callback to be triggered when the value changes.\n /\n registerOnChange(fn: (value: NoInfer<TItem>) => void): void {\n this.onChange = fn;\n }\n\n /\n Saves a callback function to be invoked when the segmented control is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n \n @param fn Callback to be triggered when the component has been touched.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n Disables the segmented control. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n \n @param isDisabled Sets whether the component is disabled.\n /\n setDisabledState(isDisabled: boolean): void {\n this.isDisabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe \|\| mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-segmented-control.mjs","sources":["../../segmented-control/src/segmented-control.component.ts","../../segmented-control/src/segmented-control.component.html","../../segmented-control/src/kirbydesign-designsystem-segmented-control.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n forwardRef,\n HostBinding,\n HostListener,\n Input,\n Output,\n ViewChild,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { IonSegment, IonSegmentButton } from '@ionic/angular/standalone';\n\nimport { SegmentItem } from './segment-item';\n\nexport enum SegmentedControlMode {\n chip = 'chip',\n compactChip = 'compactChip',\n default = 'default',\n}\n\n@Component({\n imports: [IconComponent, BadgeComponent, IonSegment, IonSegmentButton],\n selector: 'kirby-segmented-control',\n templateUrl: './segmented-control.component.html',\n styleUrls: ['./segmented-control.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => SegmentedControlComponent),\n multi: true,\n },\n ],\n})\nexport class SegmentedControlComponent<\n TItem extends SegmentItem = SegmentItem,\n> implements ControlValueAccessor {\n @ViewChild(IonSegment, { static: true, read: ElementRef })\n private ionSegmentElement: ElementRef<HTMLIonSegmentElement>;\n\n /*\n Ensure that the click actually did originate from within the segment-button.\n * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.\n /\n preventOutsideClick(event: TouchEvent) {\n if (event.target instanceof HTMLElement) {\n const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');\n if (!targetIsInSegmentBtn) {\n event.stopImmediatePropagation();\n }\n }\n }\n\n @Input() mode: SegmentedControlMode \| `${SegmentedControlMode}` = SegmentedControlMode.default;\n\n @HostBinding('class')\n get _modeCssClass() {\n return {\n [SegmentedControlMode.chip]: 'chip-mode',\n [SegmentedControlMode.default]: 'default-mode',\n [SegmentedControlMode.compactChip]: 'compact chip-mode',\n }[this.mode];\n }\n\n private _items: TItem[] = [];\n get items(): TItem[] {\n return this._items;\n }\n\n @Input() set items(value: TItem[]) {\n this._items = value \|\| [];\n this._value = this.items[this.selectedIndex];\n this.ensureIonSegmentSelected();\n }\n\n protected isDisabled = false;\n\n /\n After upgrading to Ionic standalone components (Ionic v.7.6.6)\n * there is a lifecycle bug between Angular/Ionic/Stencil that prevents\n * the value of the segment component to be reflected in the checked state\n * of it's slotted segment buttons.\n * This has been patched here: https://github.com/ionic-team/ionic-framework/pull/28837\n * However the patch doesn't fix the problem if `items` are updated after first initialization\n * and the ion-segment-button(s) are re-rerendered.\n /\n private ensureIonSegmentSelected() {\n const ionSegment = this.ionSegmentElement.nativeElement;\n const ionSelectEvent = ionSegment['ionSelect'];\n if (this._value && typeof ionSelectEvent?.emit === 'function') {\n // Ensure changes has been reflected to the DOM:\n setTimeout(() => {\n const selectedSegmentButton = ionSegment.querySelector(\n 'ion-segment-button.segment-button-checked'\n );\n if (selectedSegmentButton) return; // Nothing to patch\n\n ionSelectEvent.emit({ value: this._value?.id });\n });\n }\n }\n\n private _selectedIndex: number = -1;\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n\n @Input() set selectedIndex(index: number) {\n if (index !== this._selectedIndex) {\n this._selectedIndex = index;\n this._value = this.items[this.selectedIndex];\n this.selectedIndexChange.emit(this.selectedIndex);\n }\n }\n\n @Output() selectedIndexChange = new EventEmitter<number>();\n\n private _value: NoInfer<TItem>;\n get value(): NoInfer<TItem> {\n return this._value;\n }\n\n @Input() set value(value: NoInfer<TItem>) {\n this.selectedIndex = this.items.indexOf(value);\n }\n\n @HostBinding('class.sm')\n isSmallSize: boolean;\n\n @Input() set size(size: 'sm' \| 'md') {\n this.isSmallSize = size === 'sm';\n }\n\n private _disableChangeOnSwipe: boolean = false;\n get disableChangeOnSwipe(): boolean {\n return this._disableChangeOnSwipe;\n }\n\n @Input() set disableChangeOnSwipe(value: boolean) {\n this._disableChangeOnSwipe = value;\n }\n\n @Output() segmentSelect = new EventEmitter<TItem>();\n\n onSegmentSelect(selectedId: string) {\n const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);\n\n if (selectedItemIndex !== this.selectedIndex) {\n this.selectedIndex = selectedItemIndex;\n this.segmentSelect.emit(this.value);\n this.onChange(this.value);\n this.onTouched();\n }\n }\n\n focusNativeButton(event: UIEvent) {\n (event.target as HTMLIonSegmentButtonElement)?.setFocus();\n }\n\n private _segmentElementHasFocus = false;\n\n getTabIndex(item: TItem, index: number) {\n // When focused prevent tab stop from inner native button to outer ion-segment-button:\n if (this._segmentElementHasFocus) return -1;\n // Allow tab stop on selected item:\n if (item.id === this.value?.id) return null;\n // Allow tab stop on first item if no value is set:\n if (!this.value && index === 0) return null;\n // Prevent tab stop on all other items:\n return -1;\n }\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n @HostListener('focusin')\n @HostListener('focusout')\n _onFocusInOut() {\n // @HostListener(focusin\|focusout) triggers Change Detection and updates attr.tabindex on each ion-segment-button\n this._segmentElementHasFocus = this.ionSegmentElement.nativeElement.matches(':focus-within');\n if (!this._segmentElementHasFocus) {\n this.onTouched();\n }\n }\n\n // Initialize default ControlValueAccessor callback functions (noop)\n // eslint-disable-next-line no-empty-function\n private onChange: (value: NoInfer<TItem>) => void = () => {};\n // eslint-disable-next-line no-empty-function\n private onTouched: () => void = () => {};\n /\n Sets the segmented control's value. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n \n @param value New value to be written to the model.\n /\n writeValue(value: NoInfer<TItem>): void {\n if (value !== this._value) {\n this.value = value;\n this.cdr.markForCheck();\n }\n }\n\n /\n Saves a callback function to be invoked when the segmented control's value\n * changes from user input. Part of the ControlValueAccessor interface\n * required to integrate with Angular's core forms API.\n \n @param fn Callback to be triggered when the value changes.\n /\n registerOnChange(fn: (value: NoInfer<TItem>) => void): void {\n this.onChange = fn;\n }\n\n /\n Saves a callback function to be invoked when the segmented control is blurred\n * by the user. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n \n @param fn Callback to be triggered when the component has been touched.\n /\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n /\n Disables the segmented control. Part of the ControlValueAccessor interface required\n * to integrate with Angular's core forms API.\n \n @param isDisabled Sets whether the component is disabled.\n /\n setDisabledState(isDisabled: boolean): void {\n this.isDisabled = isDisabled;\n this.cdr.markForCheck();\n }\n}\n","<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe \|\| mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n [disabled]=\"isDisabled\"\n>\n @for (item of items; track item.id; let i = $index) {\n <ion-segment-button\n [value]=\"item.id\"\n [attr.aria-label]=\"item.ariaLabel\"\n [attr.tabindex]=\"getTabIndex(item, i)\"\n (click)=\"focusNativeButton($event)\"\n >\n {{ item.text }}\n @if (item.badge) {\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n @if (item.badge.icon) {\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n } @else {\n {{ item.badge.content }}\n }\n </kirby-badge>\n }\n </ion-segment-button>\n }\n</ion-segment>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -66,11 +66,11 @@ class SlideButtonComponent {
         this.isSlideDone = true;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SlideButtonComponent, isStandalone: true, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, viewQueries: [{ propertyName: "hiddenButton", first: true, predicate: ["hiddenButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    tabindex=\"-1\"\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    aria-hidden=\"true\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\" aria-hidden=\"true\">{{ text }}</p>\n  <button #hiddenButton class=\"kirby-visually-hidden breakout\" (click)=\"handleSlideDone()\">\n    {{ text }}\n  </button>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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-button-container:has(:focus-visible){transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-font-size-n);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:var(--kirby-border-radius-circle);background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:var(--kirby-spacing-m);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:var(--kirby-border-radius-circle);background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:var(--kirby-spacing-m);width:52px;height:52px;border:none;pointer-events:all}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}.kirby-visually-hidden.breakout{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SlideButtonComponent, isStandalone: true, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, viewQueries: [{ propertyName: "hiddenButton", first: true, predicate: ["hiddenButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    tabindex=\"-1\"\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    aria-hidden=\"true\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\" aria-hidden=\"true\">{{ text }}</p>\n  <button #hiddenButton class=\"kirby-visually-hidden breakout\" (click)=\"handleSlideDone()\">\n    {{ text }}\n  </button>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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-color-content-brand-loud);background-color:var(--kirby-color-fill-brand-loud);height:56px;border-radius:26px}:host .slide-button-container:has(:focus-visible){transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-font-size-n);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{background-color:var(--kirby-color-fill-raised-hover)}}:host .slide-button::-webkit-slider-thumb:active{background-color:var(--kirby-color-fill-raised-active)}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-raised);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:var(--kirby-spacing-m);width:52px;height:52px;border:none;pointer-events:all}@media(hover:hover){:host .slide-button::-moz-range-thumb:hover{background-color:var(--kirby-color-fill-raised-hover)}}:host .slide-button::-moz-range-thumb:active{background-color:var(--kirby-color-fill-raised-active)}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-raised);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:var(--kirby-spacing-m);width:52px;height:52px;border:none;pointer-events:all}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}.kirby-visually-hidden.breakout{width:100%;height:100%}\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: "21.2.18", ngImport: i0, type: SlideButtonComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    tabindex=\"-1\"\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    aria-hidden=\"true\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\" aria-hidden=\"true\">{{ text }}</p>\n  <button #hiddenButton class=\"kirby-visually-hidden breakout\" (click)=\"handleSlideDone()\">\n    {{ text }}\n  </button>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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-button-container:has(:focus-visible){transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-font-size-n);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:var(--kirby-border-radius-circle);background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:var(--kirby-spacing-m);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:var(--kirby-border-radius-circle);background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:var(--kirby-spacing-m);width:52px;height:52px;border:none;pointer-events:all}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}.kirby-visually-hidden.breakout{width:100%;height:100%}\n"] }]
+            args: [{ imports: [CommonModule], selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n  <input\n    tabindex=\"-1\"\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    aria-hidden=\"true\"\n  />\n  <p class=\"slide-button-text slide-{{ pctInTens }}-pct\" aria-hidden=\"true\">{{ text }}</p>\n  <button #hiddenButton class=\"kirby-visually-hidden breakout\" (click)=\"handleSlideDone()\">\n    {{ text }}\n  </button>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}: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-color-content-brand-loud);background-color:var(--kirby-color-fill-brand-loud);height:56px;border-radius:26px}:host .slide-button-container:has(:focus-visible){transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-font-size-n);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{background-color:var(--kirby-color-fill-raised-hover)}}:host .slide-button::-webkit-slider-thumb:active{background-color:var(--kirby-color-fill-raised-active)}:host .slide-button::-webkit-slider-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-raised);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:var(--kirby-spacing-m);width:52px;height:52px;border:none;pointer-events:all}@media(hover:hover){:host .slide-button::-moz-range-thumb:hover{background-color:var(--kirby-color-fill-raised-hover)}}:host .slide-button::-moz-range-thumb:active{background-color:var(--kirby-color-fill-raised-active)}:host .slide-button::-moz-range-thumb{transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-raised);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:var(--kirby-spacing-m);width:52px;height:52px;border:none;pointer-events:all}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}.kirby-visually-hidden.breakout{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { text: [{
                 type: Input
             }], expand: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-slide-button.mjs","sources":["../../slide-button/src/slide-button.component.ts","../../slide-button/src/slide-button.component.html","../../slide-button/src/kirbydesign-designsystem-slide-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n imports: [CommonModule],\n selector: 'kirby-slide-button',\n templateUrl: './slide-button.component.html',\n styleUrls: ['./slide-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SlideButtonComponent implements OnDestroy, AfterViewInit {\n @Input() text = '';\n @Input() expand: 'block';\n\n @Output() slideDone = new EventEmitter();\n @Output() slidingPercentageChanged = new EventEmitter<number>();\n\n @ViewChild('hiddenButton', { read: ElementRef })\n hiddenButton!: ElementRef<HTMLButtonElement>;\n\n private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n readonly slideDoneFadeTime = 500;\n readonly slideResetTime = 100;\n\n isSlideDone = false;\n pctInTens = 0;\n\n get value(): number {\n return this._value;\n }\n set value(v: number) {\n this._value = v;\n this.calculatePctInTens();\n }\n\n private _value: number = 0;\n private resetSliderIntervalTimer: any;\n private calculatePctInTens() {\n this.pctInTens = Math.ceil(this.value / 10) * 10;\n }\n\n constructor(\n private changeDetectionRef: ChangeDetectorRef,\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngAfterViewInit(): void {\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.hiddenButton.nativeElement\n );\n }\n\n ngOnDestroy(): void {\n if (this.resetSliderIntervalTimer) {\n clearInterval(this.resetSliderIntervalTimer);\n }\n }\n\n onSliderMouseup() {\n if (this.value == 100) {\n this.handleSlideDone();\n } else {\n // Return slider thumb to beginning of slider button in increments of 2\n this.resetSliderIntervalTimer = setInterval(() => {\n if (this.value > 0) {\n this.value -= 2;\n } else {\n clearInterval(this.resetSliderIntervalTimer);\n }\n\n this.changeDetectionRef.markForCheck();\n }, 1);\n }\n }\n\n onSliderValueChange(val: string) {\n this.value = +val;\n this.slidingPercentageChanged.emit(this.value);\n }\n\n onSliderMousedown() {\n clearInterval(this.resetSliderIntervalTimer);\n }\n\n handleSlideDone() {\n this.slideDone.emit();\n this.isSlideDone = true;\n }\n}\n","<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n <input\n tabindex=\"-1\"\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 aria-hidden=\"true\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\" aria-hidden=\"true\">{{ text }}</p>\n <button #hiddenButton class=\"kirby-visually-hidden breakout\" (click)=\"handleSlideDone()\">\n {{ text }}\n </button>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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~~ohGDFY~~,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMX,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAPhC,SAAS;AACC,YAAA,IAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAC,YAAY,CAAC,EAAA,QAAA,EACb,oBAAoB,EAAA,eAAA,EAGb,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,msBAAA,EAAA,MAAA,EAAA,CAAA,~~69FAAA~~,CAAA,EAAA;;sBAG9C;;sBACA;;sBAEA;;sBACA;;sBAEA,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,cAAc,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;;;AE9BjD;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-slide-button.mjs","sources":["../../slide-button/src/slide-button.component.ts","../../slide-button/src/slide-button.component.html","../../slide-button/src/kirbydesign-designsystem-slide-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n imports: [CommonModule],\n selector: 'kirby-slide-button',\n templateUrl: './slide-button.component.html',\n styleUrls: ['./slide-button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SlideButtonComponent implements OnDestroy, AfterViewInit {\n @Input() text = '';\n @Input() expand: 'block';\n\n @Output() slideDone = new EventEmitter();\n @Output() slidingPercentageChanged = new EventEmitter<number>();\n\n @ViewChild('hiddenButton', { read: ElementRef })\n hiddenButton!: ElementRef<HTMLButtonElement>;\n\n private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n readonly slideDoneFadeTime = 500;\n readonly slideResetTime = 100;\n\n isSlideDone = false;\n pctInTens = 0;\n\n get value(): number {\n return this._value;\n }\n set value(v: number) {\n this._value = v;\n this.calculatePctInTens();\n }\n\n private _value: number = 0;\n private resetSliderIntervalTimer: any;\n private calculatePctInTens() {\n this.pctInTens = Math.ceil(this.value / 10) * 10;\n }\n\n constructor(\n private changeDetectionRef: ChangeDetectorRef,\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngAfterViewInit(): void {\n forwardAttributes(\n this.elementRef.nativeElement,\n this._attributesToForward,\n this.renderer,\n this.hiddenButton.nativeElement\n );\n }\n\n ngOnDestroy(): void {\n if (this.resetSliderIntervalTimer) {\n clearInterval(this.resetSliderIntervalTimer);\n }\n }\n\n onSliderMouseup() {\n if (this.value == 100) {\n this.handleSlideDone();\n } else {\n // Return slider thumb to beginning of slider button in increments of 2\n this.resetSliderIntervalTimer = setInterval(() => {\n if (this.value > 0) {\n this.value -= 2;\n } else {\n clearInterval(this.resetSliderIntervalTimer);\n }\n\n this.changeDetectionRef.markForCheck();\n }, 1);\n }\n }\n\n onSliderValueChange(val: string) {\n this.value = +val;\n this.slidingPercentageChanged.emit(this.value);\n }\n\n onSliderMousedown() {\n clearInterval(this.resetSliderIntervalTimer);\n }\n\n handleSlideDone() {\n this.slideDone.emit();\n this.isSlideDone = true;\n }\n}\n","<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\" [inert]=\"isSlideDone\">\n <input\n tabindex=\"-1\"\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 aria-hidden=\"true\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\" aria-hidden=\"true\">{{ text }}</p>\n <button #hiddenButton class=\"kirby-visually-hidden breakout\" (click)=\"handleSlideDone()\">\n {{ text }}\n </button>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -97,11 +97,11 @@ class SlidesComponent {
         return { ...this.getDefaultConfig(), pagination: false, navigation: false };
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlidesComponent, deps: [{ token: i1.PlatformService }, { token: i0.ChangeDetectorRef }, { token: i2.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SlidesComponent, isStandalone: true, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 var(--kirby-spacing-s);margin-inline:var(--kirby-spacing-s)}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:var(--kirby-spacing-s)}:host .pagination ::ng-deep .swiper-pagination-bullet{display:inline-block;width:10px;height:6px;margin-inline:var(--kirby-spacing-xxxs);border-radius:var(--kirby-border-radius-pill);background:var(--kirby-black);opacity:.2}:host .pagination ::ng-deep .swiper-pagination-bullet-active{opacity:1}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:calc(var(--kirby-z-index-default) + 1)}@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:var(--kirby-spacing-xxs) 0}:host .swiper-button-lock{display:none}:host swiper-container::part(container){box-sizing:border-box;padding-block:var(--kirby-spacing-m);margin-block:calc(-1 * var(--kirby-spacing-m))}@media(max-width:767px){:host swiper-container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host swiper-container::part(container){padding-inline:var(--kirby-spacing-s)}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:var(--kirby-font-size-m);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-m)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: SlidesComponent, isStandalone: true, selector: "kirby-slides", inputs: { slidesOptions: "slidesOptions", title: "title", slides: "slides", showNavigation: "showNavigation" }, outputs: { slideChange: "slideChange" }, queries: [{ propertyName: "slideTemplate", first: true, predicate: SlideDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 var(--kirby-spacing-s);margin-inline:var(--kirby-spacing-s)}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:var(--kirby-spacing-s)}:host .pagination ::ng-deep .swiper-pagination-bullet{display:inline-block;width:10px;height:6px;margin-inline:var(--kirby-spacing-xxxs);border-radius:var(--kirby-border-radius-pill);background:var(--kirby-color-fill-neutral)}:host .pagination ::ng-deep .swiper-pagination-bullet-active{background:var(--kirby-color-fill-brand-loud)}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:calc(var(--kirby-z-index-default) + 1)}@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:var(--kirby-spacing-xxs) 0}:host .swiper-button-lock{display:none}:host swiper-container::part(container){box-sizing:border-box;padding-block:var(--kirby-spacing-m);margin-block:calc(-1 * var(--kirby-spacing-m))}@media(max-width:767px){:host swiper-container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host swiper-container::part(container){padding-inline:var(--kirby-spacing-s)}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:var(--kirby-font-size-m);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-m)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SlidesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 var(--kirby-spacing-s);margin-inline:var(--kirby-spacing-s)}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:var(--kirby-spacing-s)}:host .pagination ::ng-deep .swiper-pagination-bullet{display:inline-block;width:10px;height:6px;margin-inline:var(--kirby-spacing-xxxs);border-radius:var(--kirby-border-radius-pill);background:var(--kirby-black);opacity:.2}:host .pagination ::ng-deep .swiper-pagination-bullet-active{opacity:1}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:calc(var(--kirby-z-index-default) + 1)}@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:var(--kirby-spacing-xxs) 0}:host .swiper-button-lock{display:none}:host swiper-container::part(container){box-sizing:border-box;padding-block:var(--kirby-spacing-m);margin-block:calc(-1 * var(--kirby-spacing-m))}@media(max-width:767px){:host swiper-container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host swiper-container::part(container){padding-inline:var(--kirby-spacing-s)}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:var(--kirby-font-size-m);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-m)}\n"] }]
+            args: [{ selector: 'kirby-slides', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, ButtonComponent, IconComponent, NgTemplateOutlet], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (showNavigation || title !== undefined) {\n  <div class=\"navigation\">\n    <span class=\"title kirby-text-medium\">\n      <ng-content select=\"h1,h2,h3,h4,h5,h6\">{{ title }}</ng-content>\n    </span>\n    @if (\n      showNavigation &&\n      (!slidesOptions ||\n        slidesOptions?.navigation === undefined ||\n        slidesOptions?.pagination === undefined)\n    ) {\n      <div class=\"navigation-inner\">\n        @if (!slidesOptions || slidesOptions?.pagination === undefined) {\n          <div class=\"pagination\" [ngClass]=\"_paginationId\"></div>\n        }\n        @if (!_isTouch && (!slidesOptions || slidesOptions?.navigation === undefined)) {\n          <div class=\"buttons\">\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-prev swiper-button-prev\"\n              [ngClass]=\"_prevButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-back\"></kirby-icon>\n            </button>\n            <button\n              kirby-button\n              attentionLevel=\"3\"\n              class=\"nav-next swiper-button-next\"\n              [ngClass]=\"_nextButtonId\"\n              size=\"xs\"\n            >\n              <kirby-icon name=\"arrow-more\"></kirby-icon>\n            </button>\n            <ng-content select=\"button[kirby-button]\"></ng-content>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n\n<!-- We need to prevent Swiper from initialization by setting init=\"false\" until we pass all required parameters\nhttps://swiperjs.com/element#parameters-as-props -->\n<swiper-container init=\"false\" #swiperContainer>\n  @for (slide of slides; track slide; let i = $index) {\n    <swiper-slide>\n      <ng-container\n        *ngTemplateOutlet=\"slideTemplate; context: { $implicit: slide, index: i }\"\n      ></ng-container>\n    </swiper-slide>\n  }\n</swiper-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host .navigation{display:flex;justify-content:space-between;align-items:center;margin-block:0 var(--kirby-spacing-s);margin-inline:var(--kirby-spacing-s)}:host .navigation-inner{display:flex;align-items:center}:host .pagination{display:flex;align-items:center;width:auto;margin-inline-end:var(--kirby-spacing-s)}:host .pagination ::ng-deep .swiper-pagination-bullet{display:inline-block;width:10px;height:6px;margin-inline:var(--kirby-spacing-xxxs);border-radius:var(--kirby-border-radius-pill);background:var(--kirby-color-fill-neutral)}:host .pagination ::ng-deep .swiper-pagination-bullet-active{background:var(--kirby-color-fill-brand-loud)}:host .pagination ::ng-deep .swiper-pagination-bullet:last-of-type{margin-inline-end:0}:host .buttons{display:none;z-index:calc(var(--kirby-z-index-default) + 1)}@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:var(--kirby-spacing-xxs) 0}:host .swiper-button-lock{display:none}:host swiper-container::part(container){box-sizing:border-box;padding-block:var(--kirby-spacing-m);margin-block:calc(-1 * var(--kirby-spacing-m))}@media(max-width:767px){:host swiper-container{margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}:host swiper-container::part(container){padding-inline:var(--kirby-spacing-s)}:host .navigation,:host .pagination{margin-inline-end:0}}:host .swiper-button-next.swiper-button-disabled,:host .swiper-button-prev.swiper-button-disabled{opacity:1}:host swiper-slide:has([slideStretchHeight]){height:auto}:host .title ::ng-deep>h1,:host .title ::ng-deep>h2,:host .title ::ng-deep>h3,:host .title ::ng-deep>h4,:host .title ::ng-deep>h5,:host .title ::ng-deep>h6{margin:0;font-size:var(--kirby-font-size-m);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-m)}\n"] }]
         }], ctorParameters: () => [{ type: i1.PlatformService }, { type: i0.ChangeDetectorRef }, { type: i2.TranslationService }], propDecorators: { swiperContainer: [{
                 type: ViewChild,
                 args: ['swiperContainer']

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

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

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

@@ -4,11 +4,11 @@ import { CommonModule } from '@angular/common';
 class SpinnerComponent {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SpinnerComponent, isStandalone: true, selector: "kirby-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <div class=\"inner-circle\"></div>\n  <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:var(--kirby-spacing-l);height:var(--kirby-spacing-l);position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:var(--kirby-border-radius-circle);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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: SpinnerComponent, isStandalone: true, selector: "kirby-spinner", ngImport: i0, template: "<div class=\"spinner\">\n  <div class=\"inner-circle\"></div>\n  <div class=\"outer-circle\"></div>\n</div>\n", styles: [".spinner{overflow:hidden;width:var(--kirby-spacing-l);height:var(--kirby-spacing-l);position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-brand-loud);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: "21.2.18", 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:var(--kirby-spacing-l);height:var(--kirby-spacing-l);position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:var(--kirby-border-radius-circle);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"] }]
+            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:var(--kirby-spacing-l);height:var(--kirby-spacing-l);position:relative;margin:0 auto}.inner-circle,.outer-circle{width:100%;height:100%;border-radius:var(--kirby-border-radius-circle);background-color:var(--kirby-color-fill-brand-loud);opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.outer-circle{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}\n"] }]
         }] });
 class SpinnerModule {

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

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

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

@@ -18,11 +18,11 @@ class TabNavigationItemComponent {
         forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, tabElement);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabNavigationItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: TabNavigationItemComponent, isStandalone: true, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, host: { attributes: { "role": "presentation" } }, ngImport: i0, template: "<button role=\"tab\" type=\"button\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;padding:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:var(--kirby-spacing-s);font-size:min(var(--kirby-font-size-n),var(--kirby-spacing-s) * 1.45);line-height:var(--kirby-line-height-m);gap:var(--kirby-spacing-xxxs)}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab]:focus-visible{outline:none;border-radius:var(--kirby-spacing-xxxs);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}:host button[role=tab][aria-selected=true]{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:var(--kirby-font-weight-bold);height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: TabNavigationItemComponent, isStandalone: true, selector: "kirby-tab-navigation-item", inputs: { label: "label", truncate: "truncate" }, host: { attributes: { "role": "presentation" } }, ngImport: i0, template: "<button role=\"tab\" type=\"button\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;padding:0;width:auto;border:none;outline:none;color:var(--kirby-color-content-base);box-sizing:border-box;padding:var(--kirby-spacing-s);font-size:min(var(--kirby-font-size-n),var(--kirby-spacing-s) * 1.45);line-height:var(--kirby-line-height-m);gap:var(--kirby-spacing-xxxs)}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab]:focus-visible{outline:none;border-radius:var(--kirby-spacing-xxxs);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}:host button[role=tab][aria-selected=true]{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-color-border-base-loud);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:var(--kirby-font-weight-bold);height:0;overflow:hidden;visibility:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabNavigationItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'presentation' }, template: "<button role=\"tab\" type=\"button\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;padding:0;width:auto;border:none;outline:none;color:var(--kirby-black);box-sizing:border-box;padding:var(--kirby-spacing-s);font-size:min(var(--kirby-font-size-n),var(--kirby-spacing-s) * 1.45);line-height:var(--kirby-line-height-m);gap:var(--kirby-spacing-xxxs)}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab]:focus-visible{outline:none;border-radius:var(--kirby-spacing-xxxs);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}:host button[role=tab][aria-selected=true]{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:var(--kirby-font-weight-bold);height:0;overflow:hidden;visibility:hidden}\n"] }]
+            args: [{ selector: 'kirby-tab-navigation-item', changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'presentation' }, template: "<button role=\"tab\" type=\"button\" #tabButton>\n  <span attr.data-text=\"{{ label }}\" [class.truncate]=\"truncate\">{{ label }}</span>\n  <ng-content></ng-content>\n</button>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative;padding-bottom:2px}:host button[role=tab]{background:transparent;color:inherit;font:inherit;cursor:pointer;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;margin:0;padding:0;width:auto;border:none;outline:none;color:var(--kirby-color-content-base);box-sizing:border-box;padding:var(--kirby-spacing-s);font-size:min(var(--kirby-font-size-n),var(--kirby-spacing-s) * 1.45);line-height:var(--kirby-line-height-m);gap:var(--kirby-spacing-xxxs)}:host button[role=tab]:focus,:host button[role=tab]:hover{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab]:focus-visible{outline:none;border-radius:var(--kirby-spacing-xxxs);transition:box-shadow 80ms linear;box-shadow:var(--kirby-focus-ring-sm-inset)}:host button[role=tab][aria-selected=true]{font-weight:var(--kirby-font-weight-bold)}:host button[role=tab][aria-selected=true]:before{content:\"\";width:100%;background-color:var(--kirby-color-border-base-loud);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}span[data-text].truncate{max-width:100px;overflow:hidden;text-overflow:ellipsis}span[data-text]:before{display:block;content:attr(data-text);font-weight:var(--kirby-font-weight-bold);height:0;overflow:hidden;visibility:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { label: [{
                 type: Input
             }], truncate: [{
@@ -126,11 +126,11 @@ class TabNavigationComponent {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabNavigationComponent, deps: [{ token: i1.WindowRef }, { token: i2.KeyboardHandlerService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: TabNavigationComponent, isStandalone: true, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:var(--kirby-z-index-default);left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:var(--kirby-spacing-xs);-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media(max-width:767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: TabNavigationComponent, isStandalone: true, selector: "kirby-tab-navigation", inputs: { selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "click": "onItemSelect($event)", "keydown.enter": "onItemSelect($event)", "keydown.home": "onKeydown($event)", "keydown.end": "onKeydown($event)", "keydown.arrowright": "onKeydown($event)", "keydown.arrowleft": "onKeydown($event)" } }, queries: [{ propertyName: "tabs", predicate: TabNavigationItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "tabBar", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-color-border-base-quiet);position:absolute;height:1px;bottom:0;z-index:var(--kirby-z-index-default);left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:var(--kirby-spacing-xs);-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media(max-width:767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TabNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-tab-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:var(--kirby-z-index-default);left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:var(--kirby-spacing-xs);-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media(max-width:767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"] }]
+            args: [{ selector: 'kirby-tab-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"tablist\" #tabBar>\n  <ng-content></ng-content>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative}@media(max-width:767px){:host{inline-size:100dvi;margin-inline:calc(-1 * var(--padding-start)) calc(-1 * var(--padding-end))}}:host:before{content:\"\";background-color:var(--kirby-color-border-base-quiet);position:absolute;height:1px;bottom:0;z-index:var(--kirby-z-index-default);left:0;width:100%}div[role=tablist]{position:relative;margin:0 auto;display:flex;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-x:scroll;column-gap:var(--kirby-spacing-xs);-webkit-overflow-scrolling:auto;scrollbar-width:none}div[role=tablist]::-webkit-scrollbar{display:none}@media(max-width:767px){div[role=tablist]{padding-inline:var(--padding-start) var(--padding-end)}}\n"] }]
         }], ctorParameters: () => [{ type: i1.WindowRef }, { type: i2.KeyboardHandlerService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { tabBar: [{
                 type: ViewChild,
                 args: ['tabBar']