@kirbydesign/designsystem 11.11.0-dev-1d9b4cd → 11.11.1

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-range.mjs","sources":["../../range/src/range.component.ts","../../range/src/range.component.html","../../range/src/kirbydesign-designsystem-range.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IonRange } from '@ionic/angular';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonRange],\n  selector: 'kirby-range',\n  templateUrl: './range.component.html',\n  styleUrls: ['./range.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      multi: true,\n      useExisting: forwardRef(() => RangeComponent),\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeComponent implements OnChanges, OnInit, ControlValueAccessor, AfterViewInit {\n  @Input() minLabel: string;\n  @Input() maxLabel: string;\n  @Input() debounce: number;\n  @Input() max: number;\n  @Input() min: number;\n  @Input() pin: boolean;\n  @Input() step = 1;\n  @Input() ticks: boolean;\n  @Input() disabled = false;\n  @Input() pinFormatter: (value: number) => string | number = this.defaultPinFormatter;\n  @Input()\n  set value(value: number) {\n    if (value !== this.currentValue) {\n      this.currentValue = value;\n      this.propagateChange(this.currentValue);\n    }\n  }\n\n  get value(): number {\n    return this.currentValue;\n  }\n\n  @Output() change: EventEmitter<number> = new EventEmitter<number>();\n  @Output() move: EventEmitter<number> = new EventEmitter<number>();\n\n  @ViewChild(IonRange, { static: true }) private ionRange: IonRange;\n\n  private currentValue: number;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private element: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit() {\n    this.initializeMoveEventEmitter();\n  }\n\n  ngOnChanges() {\n    if (!this.ticks) return;\n\n    /*\n     * Max 10 ticks are allowed\n     */\n    const amountOfTicks = (this.max - this.min) / this.step;\n    if (amountOfTicks > 9) {\n      this.step = (this.max - this.min) / 9;\n    }\n\n    /*\n     * Set value to the nearest tick\n     */\n    this.value = this.getTicks().reduce((a, b) => {\n      return Math.abs(b - this.value) < Math.abs(a - this.value) ? b : a;\n    });\n  }\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.element.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.element.nativeElement.querySelector('ion-range')\n    );\n  }\n\n  private getTicks() {\n    const ticks = [];\n    for (let value = Number(this.min); value <= Number(this.max); value += Number(this.step)) {\n      ticks.push(value);\n    }\n    return ticks;\n  }\n\n  private initializeMoveEventEmitter() {\n    // We subscribe to ionRange's ionInput imperatively instead of in markup\n    // to avoid doing work when no-one is listening to the move event.\n    if (this.move.observed) {\n      this.ionRange.ionInput.subscribe((rangeEvent) => {\n        this._onRangeKnobMove(rangeEvent);\n      });\n    }\n  }\n\n  private defaultPinFormatter(value: number): number {\n    return value;\n  }\n\n  public setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  public _onRangeValueChange($event: any): void {\n    this.writeValue($event.detail.value);\n    this.change.emit(this.currentValue);\n  }\n\n  public _onRangeKnobMove($event: any): void {\n    this.writeValue($event.detail.value);\n    this.move.emit(this.currentValue);\n  }\n\n  public onTouched = () => {};\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public propagateChange = (_: any) => {};\n\n  public writeValue(value: any): void {\n    if (value !== undefined) {\n      this.value = value;\n      this.cdr.markForCheck();\n    }\n  }\n\n  public registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  public registerOnChange(fn: any): void {\n    this.propagateChange = fn;\n  }\n}\n","<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-range.mjs","sources":["../../range/src/range.component.ts","../../range/src/range.component.html","../../range/src/kirbydesign-designsystem-range.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IonRange } from '@ionic/angular/standalone';\nimport { forwardAttributes } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  imports: [IonRange],\n  selector: 'kirby-range',\n  templateUrl: './range.component.html',\n  styleUrls: ['./range.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      multi: true,\n      useExisting: forwardRef(() => RangeComponent),\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RangeComponent implements OnChanges, OnInit, ControlValueAccessor, AfterViewInit {\n  @Input() minLabel: string;\n  @Input() maxLabel: string;\n  @Input() debounce: number;\n  @Input() max: number;\n  @Input() min: number;\n  @Input() pin: boolean;\n  @Input() step = 1;\n  @Input() ticks: boolean;\n  @Input() disabled = false;\n  @Input() pinFormatter: (value: number) => string | number = this.defaultPinFormatter;\n  @Input()\n  set value(value: number) {\n    if (value !== this.currentValue) {\n      this.currentValue = value;\n      this.propagateChange(this.currentValue);\n    }\n  }\n\n  get value(): number {\n    return this.currentValue;\n  }\n\n  @Output() change: EventEmitter<number> = new EventEmitter<number>();\n  @Output() move: EventEmitter<number> = new EventEmitter<number>();\n\n  @ViewChild(IonRange, { static: true }) private ionRange: IonRange;\n\n  private currentValue: number;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private element: ElementRef<HTMLElement>,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit() {\n    this.initializeMoveEventEmitter();\n  }\n\n  ngOnChanges() {\n    if (!this.ticks) return;\n\n    /*\n     * Max 10 ticks are allowed\n     */\n    const amountOfTicks = (this.max - this.min) / this.step;\n    if (amountOfTicks > 9) {\n      this.step = (this.max - this.min) / 9;\n    }\n\n    /*\n     * Set value to the nearest tick\n     */\n    this.value = this.getTicks().reduce((a, b) => {\n      return Math.abs(b - this.value) < Math.abs(a - this.value) ? b : a;\n    });\n  }\n\n  ngAfterViewInit(): void {\n    forwardAttributes(\n      this.element.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.element.nativeElement.querySelector('ion-range')\n    );\n  }\n\n  private getTicks() {\n    const ticks = [];\n    for (let value = Number(this.min); value <= Number(this.max); value += Number(this.step)) {\n      ticks.push(value);\n    }\n    return ticks;\n  }\n\n  private initializeMoveEventEmitter() {\n    // We subscribe to ionRange's ionInput imperatively instead of in markup\n    // to avoid doing work when no-one is listening to the move event.\n    if (this.move.observed) {\n      this.ionRange.ionInput.subscribe((rangeEvent) => {\n        this._onRangeKnobMove(rangeEvent);\n      });\n    }\n  }\n\n  private defaultPinFormatter(value: number): number {\n    return value;\n  }\n\n  public setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  public _onRangeValueChange($event: any): void {\n    this.writeValue($event.detail.value);\n    this.change.emit(this.currentValue);\n  }\n\n  public _onRangeKnobMove($event: any): void {\n    this.writeValue($event.detail.value);\n    this.move.emit(this.currentValue);\n  }\n\n  public onTouched = () => {};\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  public propagateChange = (_: any) => {};\n\n  public writeValue(value: any): void {\n    if (value !== undefined) {\n      this.value = value;\n      this.cdr.markForCheck();\n    }\n  }\n\n  public registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  public registerOnChange(fn: any): void {\n    this.propagateChange = fn;\n  }\n}\n","<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [pinFormatter]=\"pinFormatter\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n></ion-range>\n\n@if (minLabel) {\n  <label class=\"min-label\">{{ minLabel }}</label>\n}\n@if (maxLabel) {\n  <label class=\"max-label\">{{ maxLabel }}</label>\n}\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-reorder-list.mjs

@@ -5,7 +5,7 @@ import { EventEmitter, TemplateRef, ViewChildren, ContentChild, Output, Input, C
 import { CardComponent } from '@kirbydesign/designsystem/card';
 import { ItemComponent, LabelComponent } from '@kirbydesign/designsystem/item';
 import { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';
-import { IonBackdrop, IonReorderGroup } from '@ionic/angular';
+import { IonBackdrop, IonReorderGroup } from '@ionic/angular/standalone';
 
 class ReorderEvent {
     constructor(ev, parentItem) {
@@ -67,7 +67,7 @@ class ReorderListComponent {
         delete this.observer;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ReorderListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ReorderListComponent, isStandalone: true, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child kirby-item{border-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"], outputs: ["ionBackdropTap"] }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"], outputs: ["ionItemReorder", "ionReorderStart", "ionReorderMove", "ionReorderEnd"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ReorderListComponent, isStandalone: true, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ReorderListComponent, decorators: [{
             type: Component,
@@ -78,7 +78,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                         CommonModule,
                         IonBackdrop,
                         IonReorderGroup,
-                    ], selector: 'kirby-reorder-list', template: "@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:var(--kirby-border-radius-n);overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child kirby-item{border-radius:var(--kirby-border-radius-n);overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"] }]
+                    ], selector: 'kirby-reorder-list', template: "@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}:host>ion-reorder-group>div{border-bottom:20px transparent solid}:host>ion-reorder-group>div:last-child{border-bottom-width:0}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { items: [{
                 type: Input
             }], subItemsName: [{

package/fesm2022/kirbydesign-designsystem-reorder-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-reorder-list.mjs","sources":["../../reorder-list/src/reorder-event.ts","../../reorder-list/src/reorder-list.component.ts","../../reorder-list/src/reorder-list.component.html","../../reorder-list/src/kirbydesign-designsystem-reorder-list.ts"],"sourcesContent":["export class ReorderEvent {\n  private origEvent: CustomEvent<any>;\n  private parent?: any;\n\n  constructor(ev: CustomEvent<any>, parentItem?: any) {\n    this.origEvent = ev;\n    this.parent = parentItem;\n    this.origEvent.cancelBubble = true;\n  }\n  complete(listOrReorder?: boolean | any[]): Promise<any> {\n    return this.origEvent.detail.complete(listOrReorder);\n  }\n\n  get parentItem(): any {\n    return this.parent;\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChildren,\n} from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ItemComponent, LabelComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\n\nimport { IonBackdrop, IonReorderGroup } from '@ionic/angular';\nimport { ReorderEvent } from './reorder-event';\n\n@Component({\n  imports: [\n    CardComponent,\n    ItemComponent,\n    LabelComponent,\n    CommonModule,\n    IonBackdrop,\n    IonReorderGroup,\n  ],\n  selector: 'kirby-reorder-list',\n  templateUrl: './reorder-list.component.html',\n  styleUrls: ['./reorder-list.component.scss'],\n})\nexport class ReorderListComponent implements OnChanges, OnDestroy {\n  @Input() items: any[];\n  @Input() subItemsName: string;\n  @Input() getItemTextDefault: (item: any) => string;\n\n  @Output() itemReorder = new EventEmitter<ReorderEvent>();\n  @Output() subItemReorder = new EventEmitter<ReorderEvent>();\n\n  @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })\n  itemTemplate: TemplateRef<any>;\n  @ViewChildren('reorderGroupContainer')\n  reorderGroupContainer: QueryList<ElementRef>;\n\n  private observer: MutationObserver;\n  reorderActive: boolean = false;\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnChanges(): void {\n    if (this.items && this.items.length > 0) {\n      setTimeout(() => {\n        this.setupDomListener();\n      });\n    }\n  }\n\n  private setupDomListener() {\n    const callback = (mutationsList: any) => {\n      for (const mutation of mutationsList) {\n        if (mutation.oldValue !== mutation.target['className']) {\n          this.reorderActive = mutation.target['className'].includes('reorder-list-active');\n        }\n      }\n      this.cdr.detectChanges();\n    };\n    this.observer = new MutationObserver(callback);\n\n    this.reorderGroupContainer.forEach((div: ElementRef) => {\n      this.observer.observe(div.nativeElement, {\n        attributes: true,\n        attributeFilter: ['class'],\n        attributeOldValue: true,\n        childList: false,\n        subtree: true,\n      });\n    });\n  }\n\n  doReorder(ev: CustomEvent) {\n    this.itemReorder.emit(new ReorderEvent(ev));\n  }\n\n  doSubReorder(ev: CustomEvent, parentItem: any) {\n    this.subItemReorder.emit(new ReorderEvent(ev, parentItem));\n  }\n\n  ngOnDestroy() {\n    //clean up the observer\n    this.observer?.disconnect();\n    delete this.observer;\n  }\n}\n","@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-reorder-list.mjs","sources":["../../reorder-list/src/reorder-event.ts","../../reorder-list/src/reorder-list.component.ts","../../reorder-list/src/reorder-list.component.html","../../reorder-list/src/kirbydesign-designsystem-reorder-list.ts"],"sourcesContent":["export class ReorderEvent {\n  private origEvent: CustomEvent<any>;\n  private parent?: any;\n\n  constructor(ev: CustomEvent<any>, parentItem?: any) {\n    this.origEvent = ev;\n    this.parent = parentItem;\n    this.origEvent.cancelBubble = true;\n  }\n  complete(listOrReorder?: boolean | any[]): Promise<any> {\n    return this.origEvent.detail.complete(listOrReorder);\n  }\n\n  get parentItem(): any {\n    return this.parent;\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport {\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnDestroy,\n  Output,\n  QueryList,\n  TemplateRef,\n  ViewChildren,\n} from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ItemComponent, LabelComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\n\nimport { IonBackdrop, IonReorderGroup } from '@ionic/angular/standalone';\nimport { ReorderEvent } from './reorder-event';\n\n@Component({\n  imports: [\n    CardComponent,\n    ItemComponent,\n    LabelComponent,\n    CommonModule,\n    IonBackdrop,\n    IonReorderGroup,\n  ],\n  selector: 'kirby-reorder-list',\n  templateUrl: './reorder-list.component.html',\n  styleUrls: ['./reorder-list.component.scss'],\n})\nexport class ReorderListComponent implements OnChanges, OnDestroy {\n  @Input() items: any[];\n  @Input() subItemsName: string;\n  @Input() getItemTextDefault: (item: any) => string;\n\n  @Output() itemReorder = new EventEmitter<ReorderEvent>();\n  @Output() subItemReorder = new EventEmitter<ReorderEvent>();\n\n  @ContentChild(ListItemTemplateDirective, { static: true, read: TemplateRef })\n  itemTemplate: TemplateRef<any>;\n  @ViewChildren('reorderGroupContainer')\n  reorderGroupContainer: QueryList<ElementRef>;\n\n  private observer: MutationObserver;\n  reorderActive: boolean = false;\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnChanges(): void {\n    if (this.items && this.items.length > 0) {\n      setTimeout(() => {\n        this.setupDomListener();\n      });\n    }\n  }\n\n  private setupDomListener() {\n    const callback = (mutationsList: any) => {\n      for (const mutation of mutationsList) {\n        if (mutation.oldValue !== mutation.target['className']) {\n          this.reorderActive = mutation.target['className'].includes('reorder-list-active');\n        }\n      }\n      this.cdr.detectChanges();\n    };\n    this.observer = new MutationObserver(callback);\n\n    this.reorderGroupContainer.forEach((div: ElementRef) => {\n      this.observer.observe(div.nativeElement, {\n        attributes: true,\n        attributeFilter: ['class'],\n        attributeOldValue: true,\n        childList: false,\n        subtree: true,\n      });\n    });\n  }\n\n  doReorder(ev: CustomEvent) {\n    this.itemReorder.emit(new ReorderEvent(ev));\n  }\n\n  doSubReorder(ev: CustomEvent, parentItem: any) {\n    this.subItemReorder.emit(new ReorderEvent(ev, parentItem));\n  }\n\n  ngOnDestroy() {\n    //clean up the observer\n    this.observer?.disconnect();\n    delete this.observer;\n  }\n}\n","@if (reorderActive) {\n  <ion-backdrop [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\"></ion-backdrop>\n}\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n  @for (reorderItem of items; track reorderItem) {\n    <div>\n      <kirby-card>\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate || defaultItemTemplate;\n            context: { $implicit: reorderItem }\n          \"\n        ></ng-container>\n        @if (reorderItem[subItemsName]) {\n          <div #reorderGroupContainer>\n            <ion-reorder-group\n              (ionItemReorder)=\"doSubReorder($event, reorderItem)\"\n              disabled=\"false\"\n            >\n              @for (subItem of reorderItem[subItemsName]; track subItem) {\n                <div>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      itemTemplate || defaultItemTemplate;\n                      context: { $implicit: subItem, isSubItem: true }\n                    \"\n                  ></ng-container>\n                </div>\n              }\n            </ion-reorder-group>\n          </div>\n        }\n      </kirby-card>\n    </div>\n  }\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n  <kirby-item [reorderable]=\"true\">\n    <p class=\"kirby-item-title\">{{ getItemTextDefault(item) }}</p>\n  </kirby-item>\n</ng-template>\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-router-outlet.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { isPlatform, IonRouterOutlet } from '@ionic/angular';
-export { NavController } from '@ionic/angular';
+import { isPlatform, IonRouterOutlet } from '@ionic/angular/standalone';
+export { NavController } from '@ionic/angular/standalone';
 import { CommonModule } from '@angular/common';
 
 class RouterOutletComponent {
@@ -9,11 +9,11 @@ class RouterOutletComponent {
         this._animated = isPlatform('hybrid');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: RouterOutletComponent, isStandalone: true, selector: "kirby-router-outlet", inputs: { main: "main" }, ngImport: i0, template: "@if (main) {\n  <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n  <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"], dependencies: [{ kind: "component", type: IonRouterOutlet, selector: "ion-router-outlet" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: RouterOutletComponent, isStandalone: true, selector: "kirby-router-outlet", inputs: { main: "main" }, ngImport: i0, template: "@if (main) {\n  <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n  <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"], dependencies: [{ kind: "component", type: IonRouterOutlet, selector: "ion-router-outlet" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: RouterOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-router-outlet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonRouterOutlet], template: "@if (main) {\n  <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n  <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"] }]
+            args: [{ selector: 'kirby-router-outlet', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IonRouterOutlet], template: "@if (main) {\n  <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n  <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"] }]
         }], propDecorators: { main: [{
                 type: Input
             }] } });

package/fesm2022/kirbydesign-designsystem-router-outlet.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-router-outlet.mjs","sources":["../../router-outlet/src/router-outlet.component.ts","../../router-outlet/src/router-outlet.component.html","../../router-outlet/src/router-outlet.module.ts","../../router-outlet/src/kirbydesign-designsystem-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { IonRouterOutlet, isPlatform } from '@ionic/angular';\n\n@Component({\n  selector: 'kirby-router-outlet',\n  templateUrl: './router-outlet.component.html',\n  styleUrls: ['./router-outlet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonRouterOutlet],\n})\nexport class RouterOutletComponent {\n  @Input() main: boolean;\n\n  _animated = isPlatform('hybrid');\n}\n","@if (main) {\n  <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n  <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IonRouterOutlet } from '@ionic/angular';\nimport { RouterOutletComponent } from './router-outlet.component';\n\n@NgModule({\n  imports: [CommonModule, IonRouterOutlet, RouterOutletComponent],\n  exports: [RouterOutletComponent],\n})\nexport class RouterOutletModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAUa,qBAAqB,CAAA;AAPlC,IAAA,WAAA,GAAA;AAUE,QAAA,IAAA,CAAA,SAAS,GAAG,UAAU,CAAC,QAAQ,CAAC;AACjC,IAAA;kIAJY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVlC,kLAMA,EAAA,MAAA,EAAA,CAAA,uIAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEd,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,mBAGd,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,eAAe,CAAC,EAAA,QAAA,EAAA,kLAAA,EAAA,MAAA,EAAA,CAAA,uIAAA,CAAA,EAAA;;sBAGzB;;;MEFU,kBAAkB,CAAA;kIAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,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,kBAAkB,YAHnB,YAAY,EAAE,eAAe,EAAE,qBAAqB,aACpD,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAEpB,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,kBAAkB,EAAA,OAAA,EAAA,CAHnB,YAAY,EAAE,eAAe,EAAE,qBAAqB,CAAA,EAAA,CAAA,CAAA;;4FAGnD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,qBAAqB,CAAC;oBAC/D,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACjC,iBAAA;;;ACRD;;AAEG;;;;"}
+{"version":3,"file":"kirbydesign-designsystem-router-outlet.mjs","sources":["../../router-outlet/src/router-outlet.component.ts","../../router-outlet/src/router-outlet.component.html","../../router-outlet/src/router-outlet.module.ts","../../router-outlet/src/kirbydesign-designsystem-router-outlet.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { IonRouterOutlet, isPlatform } from '@ionic/angular/standalone';\n\n@Component({\n  selector: 'kirby-router-outlet',\n  templateUrl: './router-outlet.component.html',\n  styleUrls: ['./router-outlet.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [IonRouterOutlet],\n})\nexport class RouterOutletComponent {\n  @Input() main: boolean;\n\n  _animated = isPlatform('hybrid');\n}\n","@if (main) {\n  <ion-router-outlet main [animated]=\"_animated\"></ion-router-outlet>\n}\n@if (!main) {\n  <ion-router-outlet [animated]=\"_animated\"></ion-router-outlet>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IonRouterOutlet } from '@ionic/angular/standalone';\nimport { RouterOutletComponent } from './router-outlet.component';\n\n@NgModule({\n  imports: [CommonModule, IonRouterOutlet, RouterOutletComponent],\n  exports: [RouterOutletComponent],\n})\nexport class RouterOutletModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAUa,qBAAqB,CAAA;AAPlC,IAAA,WAAA,GAAA;AAUE,QAAA,IAAA,CAAA,SAAS,GAAG,UAAU,CAAC,QAAQ,CAAC;AACjC,IAAA;kIAJY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;sHAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECVlC,kLAMA,EAAA,MAAA,EAAA,CAAA,oQAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,eAAe,EAAA,QAAA,EAAA,mBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAEd,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,mBAGd,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,eAAe,CAAC,EAAA,QAAA,EAAA,kLAAA,EAAA,MAAA,EAAA,CAAA,oQAAA,CAAA,EAAA;;sBAGzB;;;MEFU,kBAAkB,CAAA;kIAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAlB,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,kBAAkB,YAHnB,YAAY,EAAE,eAAe,EAAE,qBAAqB,aACpD,qBAAqB,CAAA,EAAA,CAAA,CAAA;AAEpB,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,kBAAkB,EAAA,OAAA,EAAA,CAHnB,YAAY,EAAE,eAAe,EAAE,qBAAqB,CAAA,EAAA,CAAA,CAAA;;4FAGnD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAJ9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,qBAAqB,CAAC;oBAC/D,OAAO,EAAE,CAAC,qBAAqB,CAAC;AACjC,iBAAA;;;ACRD;;AAEG;;;;"}

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

@@ -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-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:16px;--padding-end: 16px;--padding-start: 16px}:host ion-item-divider ::ng-deep>[heading]{font-weight:700;font-size:clamp(14px,1.125rem,35px);line-height:1.3334;color:var(--kirby-section-header-color);margin:0 0 8px;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:clamp(19px,1.375rem,38px);line-height:1.2727}:host ion-item-divider ::ng-deep>.kirby-text-medium[heading]{font-size:clamp(14px,1.125rem,35px);line-height:1.3334}: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:clamp(13px,1rem,32px);line-height:1.5}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:300;font-size:clamp(12px,.875rem,28px);line-height:1.4286;color:var(--kirby-section-header-color);margin:4px 0 8px;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-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:16px;--padding-end: 16px;--padding-start: 16px}:host ion-item-divider ::ng-deep>[heading]{font-weight:700;font-size:clamp(14px,1.125rem,35px);line-height:1.3334;color:var(--kirby-section-header-color);margin:0 0 8px;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:clamp(19px,1.375rem,38px);line-height:1.2727}:host ion-item-divider ::ng-deep>.kirby-text-medium[heading]{font-size:clamp(14px,1.125rem,35px);line-height:1.3334}: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:clamp(13px,1rem,32px);line-height:1.5}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:300;font-size:clamp(12px,.875rem,28px);line-height:1.4286;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }] });
 
 /**

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

@@ -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;;;;"}
+{"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,k5CAAA,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,k5CAAA,CAAA,EAAA;;;AERjD;;AAEG;;;;"}

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

@@ -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: 2}:host.sm ion-segment-button{min-height:32px;font-size:min(clamp(11px,.75rem,24px),17.4px);--padding-start: 16px;--padding-end: 16px;--kirby-badge-right: -8px}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:999px}: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:4px;gap:8px}@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: 12px;--padding-end: 12px}@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:999px;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: 999px;--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: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:40px;min-width:fit-content;font-weight:400;font-size:min(clamp(12px,.875rem,28px),23.2px);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 }); }
 }
 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: 2}:host.sm ion-segment-button{min-height:32px;font-size:min(clamp(11px,.75rem,24px),17.4px);--padding-start: 16px;--padding-end: 16px;--kirby-badge-right: -8px}:host.sm ion-segment-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none;border-radius:999px}: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:4px;gap:8px}@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: 12px;--padding-end: 12px}@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:999px;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: 999px;--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: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:40px;min-width:fit-content;font-weight:400;font-size:min(clamp(12px,.875rem,28px),23.2px);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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ionSegmentElement: [{
                 type: ViewChild,
                 args: [IonSegment, { static: true, read: ElementRef }]

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

@@ -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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"}
+{"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-shared.mjs

@@ -292,6 +292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                 type: Input
             }] } });
 
+const fontSize = DesignTokenHelper.fontSize;
+const lineHeight = DesignTokenHelper.lineHeight;
 class FitHeadingDirective {
     constructor(elementRef, renderer, resizeObserverService, lineClampHelper) {
         this.elementRef = elementRef;
@@ -301,18 +303,18 @@ class FitHeadingDirective {
         this.headingSizes = [
             {
                 name: 'h1',
-                fontSize: 'var(--kirby-font-size-xl)',
-                lineHeight: 'var(--kirby-line-height-xl)',
+                fontSize: fontSize('xl'),
+                lineHeight: lineHeight('xl'),
             },
             {
                 name: 'h2',
-                fontSize: 'var(--kirby-font-size-l)',
-                lineHeight: 'var(--kirby-line-height-l)',
+                fontSize: fontSize('l'),
+                lineHeight: lineHeight('l'),
             },
             {
                 name: 'h3',
-                fontSize: 'var(--kirby-font-size-m)',
-                lineHeight: 'var(--kirby-line-height-m)',
+                fontSize: fontSize('m'),
+                lineHeight: lineHeight('m'),
             },
         ];
     }