@kirbydesign/extensions-angular 6.0.0-dev-d045bb2 → 6.0.0-dev-67d5287

package/fesm2022/kirbydesign-extensions-angular-combobox.mjs

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, RendererStyleFlags2, TemplateRef, ViewChild, ViewChildren, forwardRef } from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, RendererStyleFlags2, TemplateRef, ViewChild, ViewChildren, forwardRef } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { CardComponent } from "@kirbydesign/designsystem/card";
 import { UniqueIdGenerator } from "@kirbydesign/designsystem/helpers";
 import { ItemComponent } from "@kirbydesign/designsystem/item";
-import { ListItemTemplateDirective } from "@kirbydesign/designsystem/list";
 import { HorizontalDirection, PopoverComponent } from "@kirbydesign/designsystem/popover";
 import { AffixDirective, InputComponent, InputSize } from "@kirbydesign/designsystem/form-field";
 import { FORM_FIELD_CONTROL } from "@kirbydesign/designsystem/types";
@@ -13,6 +12,41 @@ import { forwardAttributes } from "@kirbydesign/designsystem/shared";
 import { IconComponent } from "@kirbydesign/designsystem/icon";
 import { NgTemplateOutlet } from "@angular/common";
 import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+var ComboboxItemTemplateDirective = class ComboboxItemTemplateDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ComboboxItemTemplateDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: ComboboxItemTemplateDirective,
+			isStandalone: true,
+			selector: "[kirbyXComboboxItemTemplate]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ComboboxItemTemplateDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[kirbyXComboboxItemTemplate]",
+			standalone: true
+		}]
+	}]
+});
 var OpenState;
 (function(OpenState) {
 	OpenState[OpenState["closed"] = 0] = "closed";
@@ -551,13 +585,13 @@ var ComboboxComponent = class ComboboxComponent {
 				{
 					propertyName: "itemTemplate",
 					first: true,
-					predicate: ListItemTemplateDirective,
+					predicate: ComboboxItemTemplateDirective,
 					descendants: true,
 					read: TemplateRef
 				},
 				{
 					propertyName: "slottedItems",
-					predicate: ListItemTemplateDirective,
+					predicate: ComboboxItemTemplateDirective,
 					read: ElementRef
 				},
 				{
@@ -611,7 +645,7 @@ var ComboboxComponent = class ComboboxComponent {
 			],
 			ngImport: i0,
 			template: "<span class=\"kirby-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ _liveRegionText }}\n</span>\n<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    (change)=\"$event.stopPropagation()\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"onInput($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (mousedown)=\"$event.preventDefault()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item>\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\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}:host: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{display:inline-block;position:relative;max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)))}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div{position:relative}:host div>input[kirby-input]{padding-right:var(--kirby-spacing-xl)}:host div>input[kirby-input]:disabled~kirby-icon{color:var(--kirby-semi-dark-shade)}:host div>kirby-icon{position:absolute;top:0;bottom:0;right:var(--kirby-spacing-xs)}:host.has-value>div>input[kirby-input]{text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{display:flex;flex-direction:column;max-height:352px;overflow:hidden;box-shadow:var(--kirby-elevation-4);max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)));min-width:calc(320px - calc(2 * var(--kirby-spacing-s)))}@media(min-width:321px){kirby-card{min-width:calc(375px - calc(2 * var(--kirby-spacing-s)))}}.combobox-viewport{display:block;width:100%}.no-results{color:var(--kirby-text-color-semi-dark)}\n"],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host: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{display:inline-block;position:relative;max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)))}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div{position:relative}:host div>input[kirby-input]{padding-right:var(--kirby-spacing-xl)}:host div>input[kirby-input]:disabled~kirby-icon{opacity:.4}:host div>kirby-icon{color:var(--kirby-color-content-raised);position:absolute;top:0;bottom:0;right:var(--kirby-spacing-xs)}:host.has-value>div>input[kirby-input]{text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{display:flex;flex-direction:column;max-height:352px;overflow:hidden;box-shadow:var(--kirby-elevation-4);max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)));min-width:calc(320px - calc(2 * var(--kirby-spacing-s)))}@media(min-width:321px){kirby-card{min-width:calc(375px - calc(2 * var(--kirby-spacing-s)))}}.combobox-viewport{display:block;width:100%}.no-results{color:var(--kirby-color-content-base-quiet)}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -751,7 +785,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<span class=\"kirby-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ _liveRegionText }}\n</span>\n<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    (change)=\"$event.stopPropagation()\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"onInput($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (mousedown)=\"$event.preventDefault()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item>\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\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}:host: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{display:inline-block;position:relative;max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)))}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div{position:relative}:host div>input[kirby-input]{padding-right:var(--kirby-spacing-xl)}:host div>input[kirby-input]:disabled~kirby-icon{color:var(--kirby-semi-dark-shade)}:host div>kirby-icon{position:absolute;top:0;bottom:0;right:var(--kirby-spacing-xs)}:host.has-value>div>input[kirby-input]{text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{display:flex;flex-direction:column;max-height:352px;overflow:hidden;box-shadow:var(--kirby-elevation-4);max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)));min-width:calc(320px - calc(2 * var(--kirby-spacing-s)))}@media(min-width:321px){kirby-card{min-width:calc(375px - calc(2 * var(--kirby-spacing-s)))}}.combobox-viewport{display:block;width:100%}.no-results{color:var(--kirby-text-color-semi-dark)}\n"]
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host: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{display:inline-block;position:relative;max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)))}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div{position:relative}:host div>input[kirby-input]{padding-right:var(--kirby-spacing-xl)}:host div>input[kirby-input]:disabled~kirby-icon{opacity:.4}:host div>kirby-icon{color:var(--kirby-color-content-raised);position:absolute;top:0;bottom:0;right:var(--kirby-spacing-xs)}:host.has-value>div>input[kirby-input]{text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{display:flex;flex-direction:column;max-height:352px;overflow:hidden;box-shadow:var(--kirby-elevation-4);max-width:calc(100vw - calc(2 * var(--kirby-spacing-s)));min-width:calc(320px - calc(2 * var(--kirby-spacing-s)))}@media(min-width:321px){kirby-card{min-width:calc(375px - calc(2 * var(--kirby-spacing-s)))}}.combobox-viewport{display:block;width:100%}.no-results{color:var(--kirby-color-content-base-quiet)}\n"]
 		}]
 	}],
 	ctorParameters: () => [
@@ -803,11 +837,11 @@ i0.ɵɵngDeclareClassMetadata({
 		}],
 		itemTemplate: [{
 			type: ContentChild,
-			args: [ListItemTemplateDirective, { read: TemplateRef }]
+			args: [ComboboxItemTemplateDirective, { read: TemplateRef }]
 		}],
 		slottedItems: [{
 			type: ContentChildren,
-			args: [ListItemTemplateDirective, { read: ElementRef }]
+			args: [ComboboxItemTemplateDirective, { read: ElementRef }]
 		}],
 		cardElement: [{
 			type: ViewChild,
@@ -895,6 +929,6 @@ i0.ɵɵngDeclareClassMetadata({
 		]
 	}
 });
-export { ComboboxComponent };
+export { ComboboxComponent, ComboboxItemTemplateDirective };
 
 //# sourceMappingURL=kirbydesign-extensions-angular-combobox.mjs.map

package/fesm2022/kirbydesign-extensions-angular-combobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-extensions-angular-combobox.mjs","names":[],"sources":["../../combobox/src/combobox.types.ts","../../combobox/src/combobox.component.ts","../../combobox/src/combobox.component.html"],"sourcesContent":["export enum OpenState {\n  closed,\n  opening,\n  open,\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  Renderer2,\n  RendererStyleFlags2,\n  TemplateRef,\n  ViewChild,\n  ViewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';\nimport { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';\nimport { AffixDirective, InputSize } from '@kirbydesign/designsystem/form-field';\nimport {\n  EventListenerDisposeFn,\n  FORM_FIELD_CONTROL,\n  FormFieldControl,\n} from '@kirbydesign/designsystem/types';\nimport { forwardAttributes, ResizeObserverService } from '@kirbydesign/designsystem/shared';\nimport { InputComponent } from '@kirbydesign/designsystem/form-field';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  CdkFixedSizeVirtualScroll,\n  CdkVirtualForOf,\n  CdkVirtualScrollViewport,\n} from '@angular/cdk/scrolling';\nimport { OpenState } from './combobox.types';\n\n@Component({\n  selector: 'kirby-x-combobox',\n  templateUrl: './combobox.component.html',\n  styleUrls: ['./combobox.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ComboboxComponent),\n      multi: true,\n    },\n    {\n      provide: FORM_FIELD_CONTROL,\n      useExisting: forwardRef(() => ComboboxComponent),\n    },\n  ],\n  imports: [\n    InputComponent,\n    NgTemplateOutlet,\n    PopoverComponent,\n    CardComponent,\n    ItemComponent,\n    IconComponent,\n    AffixDirective,\n    CdkFixedSizeVirtualScroll,\n    CdkVirtualScrollViewport,\n    CdkVirtualForOf,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ComboboxComponent\n  implements AfterViewInit, OnDestroy, ControlValueAccessor, FormFieldControl\n{\n  private static readonly HEIGHT_OF_STANDARD_ITEM = 44;\n  private state = OpenState.closed;\n  private _popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  public _listboxId: string = UniqueIdGenerator.scopedTo('kirby-x-combobox').next();\n  public _comboboxId: string = UniqueIdGenerator.scopedTo('kirby-input').next();\n\n  private readonly _defaultSearchFunction = (\n    searchTerm: string,\n    itemsToSearch: unknown[]\n  ): unknown[] => {\n    if (!searchTerm) {\n      return itemsToSearch;\n    }\n\n    const lowerSearchTerm = searchTerm.toLowerCase();\n    return itemsToSearch\n      .filter((item) => this.getItemText(item).toLowerCase().includes(lowerSearchTerm))\n      .sort((a, b) => {\n        const textA = this.getItemText(a).toLowerCase();\n        const textB = this.getItemText(b).toLowerCase();\n\n        const textAStartsWith = textA.startsWith(searchTerm);\n        const textBStartsWith = textB.startsWith(searchTerm);\n        if (textAStartsWith && textBStartsWith) {\n          return this.compareAlphabetically(textA, textB);\n        }\n\n        if (textAStartsWith) {\n          return -1;\n        }\n\n        if (textBStartsWith) {\n          return 1;\n        }\n\n        return this.compareAlphabetically(textA, textB);\n      });\n  };\n\n  private compareAlphabetically(textA: string, textB: string): number {\n    if (textA < textB) {\n      return -1;\n    }\n    if (textA > textB) {\n      return 1;\n    }\n    return 0;\n  }\n\n  /**\n   * The text to display when the search returns no results.\n   */\n  @Input()\n  public noSearchResultsText = 'No results found.';\n\n  /**\n   * The text announced by screen readers when the selection is cleared.\n   */\n  @Input()\n  public selectionClearedAnnouncement = 'Selection cleared.';\n\n  public _liveRegionText = '';\n\n  /**\n   * The name of the property to use as the display text for each item.\n   */\n  @Input()\n  public itemTextProperty: string = 'text';\n  protected getItemText(item: unknown): string {\n    if (this.isTypeString(item)) {\n      return item as string;\n    }\n\n    if (this.objectHasItemTextProperty(item)) {\n      const objectItem = item as Record<string, unknown>;\n      const textValue: unknown = objectItem[this.itemTextProperty];\n\n      if (typeof textValue === 'string') {\n        return textValue;\n      }\n    }\n    return '';\n  }\n\n  /**\n   * The height of each item in the dropdown, in pixels. This is used to calculate the height of the dropdown based on the number of items.\n   */\n  @Input()\n  public itemHeight: number = 44;\n\n  protected get dropdownMaxHeight(): number {\n    return 8 * ComboboxComponent.HEIGHT_OF_STANDARD_ITEM;\n  }\n\n  protected get dropdownMinHeight(): number {\n    return this.itemHeight;\n  }\n\n  protected get viewportHeight(): number {\n    const itemCount = this.searchItems?.length ?? 0;\n\n    if (itemCount === 0) {\n      return this.dropdownMinHeight;\n    }\n\n    return Math.min(\n      this.dropdownMaxHeight,\n      Math.max(this.dropdownMinHeight, itemCount * this.itemHeight)\n    );\n  }\n\n  private isTypeString(item: unknown): boolean {\n    return typeof item === 'string';\n  }\n\n  private objectHasItemTextProperty(item: unknown): boolean {\n    return item != undefined && typeof item === 'object' && this.itemTextProperty in item;\n  }\n\n  private objectHasItemIdProperty(item: unknown): boolean {\n    return item != undefined && typeof item === 'object' && this.itemIdProperty in item;\n  }\n\n  /**\n   * The name of the property to use as the unique identifier for each item.\n   */\n  @Input()\n  public itemIdProperty = 'id';\n  protected getItemId(item: unknown): string {\n    if (this.isTypeString(item)) {\n      return item as string;\n    }\n\n    if (this.objectHasItemIdProperty(item)) {\n      const objectItem = item as Record<string, unknown>;\n      const idValue: unknown = objectItem[this.itemIdProperty];\n\n      if (this.isTypeString(idValue)) {\n        return idValue as string;\n      }\n    }\n\n    console.error(\n      'Each item must have an id property for scroll to work. Ensure that the itemIdProperty input is set correctly, and that each item has a unique id value.'\n    );\n    return '';\n  }\n\n  /**\n   * A function that takes a search term and the list of items, and returns a filtered list of items to display in the dropdown.\n   */\n  @Input()\n  public searchFunction: (searchTerm: string, itemsToSearch: any[]) => any[] =\n    this._defaultSearchFunction;\n\n  private _searchItems: unknown[] = [];\n  protected get searchItems(): unknown[] {\n    return this._searchItems;\n  }\n  private set searchItems(value: unknown[]) {\n    this._searchItems = value;\n    if (!this._searchItems) {\n      return;\n    }\n\n    // only set the focused item of the search result, if the input has value\n    if (this.textInput?.nativeElement?.value) {\n      this.focusedItem = this._searchItems[0];\n      this._virtualScrollViewport?.scrollToIndex(0);\n    }\n  }\n\n  private _items: unknown[] = [];\n\n  get items(): unknown[] {\n    return this._items;\n  }\n\n  /**\n   * The list of items to display in the dropdown.\n   * @param value\n   */\n  @Input()\n  public set items(value: unknown[]) {\n    this._items = value;\n    this.searchItems = this._items;\n  }\n\n  private _selectedItem: unknown = undefined;\n  get selectedItem(): unknown {\n    return this._selectedItem;\n  }\n\n  /**\n   * The currently selected item.\n   * @param value\n   */\n  @Input()\n  public set selectedItem(value: unknown) {\n    // Allow clearing by setting undefined\n    if (value !== this._selectedItem) {\n      this._selectedItem = value;\n      this.focusedItem = this._selectedItem;\n      // Keep ControlValueAccessor value in sync with the selected data item\n      this.value = this._selectedItem;\n      this.setInputDisplayValue(this.getItemText(this.selectedItem));\n    }\n  }\n\n  // _focusedItem keeps track of which element has focus and will be selected\n  // if it is activated (by pressing ENTER)\n  private _focusedItem: unknown = undefined;\n  public get focusedItem(): unknown {\n    return this._focusedItem;\n  }\n\n  public set focusedItem(item: unknown) {\n    // the focus might not have changed, but where in the list might\n    this.setAriaPosinsetOnElement(item);\n\n    if (this._focusedItem === item) {\n      return;\n    }\n\n    this._focusedItem = item;\n  }\n\n  private getIndexOfItem(item: unknown): number {\n    return this.searchItems.indexOf(item);\n  }\n\n  private getKirbyElement(item: unknown | undefined): ElementRef<HTMLElement> | undefined {\n    const kirbyItems = this.getKirbyItems();\n    if (!kirbyItems || !item) {\n      return undefined;\n    }\n\n    const itemId = this.getItemId(item);\n    return kirbyItems.find((el) => el.nativeElement.id === itemId);\n  }\n\n  private setAriaPosinsetOnElement(item: unknown) {\n    const element = this.getKirbyElement(item);\n    const index = this.getIndexOfItem(item);\n    const setsize = this.searchItems.length;\n\n    if (!element) {\n      return;\n    }\n\n    this.renderer.setAttribute(element.nativeElement, 'aria-setsize', setsize.toString());\n    this.renderer.setAttribute(element.nativeElement, 'aria-posinset', `${index + 1}`);\n  }\n\n  /**\n   * The placeholder text to display in the input when no item is selected and the input is empty.\n   */\n  @Input()\n  public placeholder = 'Please search...';\n\n  /**\n   * The direction in which the dropdown should open relative to the input.\n   * @param direction\n   */\n  @Input()\n  public set popout(direction: HorizontalDirection | `${HorizontalDirection}`) {\n    this._popout = direction || HorizontalDirection.right;\n  }\n\n  public get popout() {\n    return this._popout;\n  }\n\n  /**\n   * If the combobox needs to expand to full width of its parent container, then use expand.\n   */\n  @Input()\n  public expand?: 'block';\n\n  /**\n   * When `true`, the user cannot interact with the combobox.\n   */\n  @Input()\n  public disabled = false;\n\n  @HostBinding('attr.disabled')\n  public get _isDisabled(): 'disabled' | null {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  /**\n   * Will emit the new value when error changes.\n   */\n  @Output()\n  hasErrorChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n  private _hasError: boolean = false;\n\n  /**\n   * When `true`, the combobox will be styled with error styles.\n   */\n  @Input()\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  set hasError(value: boolean) {\n    if (this._hasError !== value) {\n      this._hasError = value;\n      this.hasErrorChange.emit(this._hasError);\n    }\n  }\n\n  /**\n   * The size of the input element.\n   */\n  @Input()\n  public size: InputSize = InputSize.medium;\n\n  // Prevent Ionic blur on scroll\n  @HostBinding('attr.no-blur')\n  public get _noBlurOnScroll(): boolean {\n    return true;\n  }\n\n  /**\n   * Emitted when an item is selected (tap on mobile, click/keypress on web)\n   */\n  @Output()\n  public change: EventEmitter<any> = new EventEmitter<any>();\n\n  public value: unknown = undefined;\n\n  @HostBinding('class.expand')\n  public get _isBlockLevel() {\n    return this.expand === 'block';\n  }\n\n  @HostBinding('class.is-opening')\n  public get _isOpening(): boolean {\n    return this.state === OpenState.opening;\n  }\n\n  @HostBinding('class.is-open')\n  public get isOpen(): boolean {\n    return this.state === OpenState.open;\n  }\n\n  @HostBinding('class.has-value')\n  public get hasValue(): boolean {\n    return this.selectedItem != null;\n  }\n\n  @ContentChild(ListItemTemplateDirective, { read: TemplateRef })\n  public itemTemplate?: TemplateRef<unknown>;\n\n  @ContentChildren(ListItemTemplateDirective, { read: ElementRef })\n  public slottedItems?: QueryList<ElementRef<HTMLElement>>;\n\n  @ViewChild(CardComponent, { read: ElementRef })\n  public cardElement?: ElementRef<HTMLElement>;\n\n  @ViewChild(PopoverComponent)\n  public popover?: PopoverComponent;\n\n  @ViewChild('rootElement', { static: true, read: ElementRef })\n  public rootElement!: ElementRef<HTMLElement>;\n\n  @ViewChild(InputComponent, { static: true, read: ElementRef })\n  private textInput!: ElementRef<HTMLInputElement>;\n\n  get interactiveElement(): HTMLElement {\n    return this.textInput.nativeElement;\n  }\n\n  @ViewChild(CdkVirtualScrollViewport)\n  public _virtualScrollViewport?: CdkVirtualScrollViewport;\n\n  private forwardAriaLabelToCombobox() {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.rootElement.nativeElement\n    );\n  }\n\n  @ViewChildren(ItemComponent, { read: ElementRef })\n  public kirbyItemsDefault?: QueryList<ElementRef<HTMLElement>>;\n\n  _kirbyItemsSlotted?: QueryList<ElementRef<HTMLElement>>;\n  @ContentChildren(ItemComponent, { read: ElementRef })\n  public set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>) {\n    const hasSlottedItems = this.disposeItemClickListeners?.length > 0;\n    if (hasSlottedItems) {\n      this.unlistenAllSlottedItems();\n    }\n\n    kirbyItems.forEach((kirbyItem) => {\n      this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');\n      const disposeClickListener: EventListenerDisposeFn = this.renderer.listen(\n        kirbyItem.nativeElement,\n        'click',\n        () => {\n          const id = kirbyItem.nativeElement.getAttribute('id');\n          const item = this.items.find((it) => this.getItemId(it) === id);\n          if (item) {\n            this.onItemSelect(item);\n          }\n        }\n      );\n\n      this.disposeItemClickListeners.push(disposeClickListener);\n    });\n\n    this._kirbyItemsSlotted = kirbyItems;\n  }\n\n  public get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>> | undefined {\n    return this._kirbyItemsSlotted;\n  }\n\n  private disposeItemClickListeners: EventListenerDisposeFn[] = [];\n\n  public constructor(\n    private renderer: Renderer2,\n    private elementRef: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef,\n    private resizeObserverService: ResizeObserverService\n  ) {}\n\n  protected onToggle(event: MouseEvent) {\n    event.stopPropagation();\n    this.textInput?.nativeElement.focus();\n\n    this.toggle();\n  }\n\n  private toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.isOpen ? this.close() : this.open();\n  }\n\n  public ngAfterViewInit() {\n    if (this.expand === 'block') {\n      const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();\n      this.setPopoverCardStyle('max-width', 'initial');\n      this.setPopoverCardStyle('min-width', 'initial');\n      // Ensure initial width is set even if the resize observer callback also fires initially:\n      this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);\n\n      this.resizeObserverService.observe(this.elementRef, (entry) => {\n        const newWidth = entry.contentRect.width;\n        if (newWidth > 0) {\n          this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);\n        }\n      });\n    }\n    this.forwardAriaLabelToCombobox();\n  }\n\n  /* Utility that makes it easier to set styles on card element */\n  private setPopoverCardStyle(style: string, value: string) {\n    this.renderer.setStyle(\n      this.cardElement?.nativeElement,\n      style,\n      value,\n      RendererStyleFlags2.DashCase\n    );\n  }\n\n  public ngOnDestroy(): void {\n    this.unlistenAllSlottedItems();\n    this.unobserveResize();\n  }\n\n  public open(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (!this.isOpen) {\n      this.state = OpenState.opening;\n      this.showPopOver();\n      this.focusedItem = this.selectedItem;\n    }\n  }\n\n  private showPopOver() {\n    if (this.state === OpenState.opening) {\n      this.state = OpenState.open;\n      this.popover?.show();\n      this.cdr.markForCheck();\n      // PopoverComponent.show() appends the element to document.body synchronously but\n      // finishes positioning in a requestAnimationFrame. One rAF is enough to let the\n      // browser compute layout so the CDK viewport has a real size before we scroll.\n      requestAnimationFrame(() => this.scrollToIndexIntoViewWhenOpeningPopup());\n    }\n  }\n\n  public close() {\n    if (this.disabled) {\n      return;\n    }\n    if (this.isOpen) {\n      this.state = OpenState.closed;\n      this.setInputDisplayValue(this.getItemText(this.selectedItem));\n      this.searchItems = this.items;\n      this.popover?.hide();\n    }\n  }\n\n  protected onItemSelect(item: unknown) {\n    // Guard: slotted click listeners should map back to a data item, but be safe.\n    if (item instanceof HTMLElement) return;\n    this.selectItem(item);\n    this.close();\n  }\n\n  private onChange: (value: unknown) => void = () => {\n    /* empty */\n  };\n  private onTouched: () => void = (): void => {\n    /* empty */\n  };\n\n  /**\n   * Sets the select'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  public writeValue(value: string): void {\n    this.selectItemByInput(value);\n\n    // When written from outside, reflect selected text in the input\n    this.setInputDisplayValue(this.getItemText(this.value));\n\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select'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: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select 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 select. 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  public setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  private selectItem(item: unknown): void {\n    if (item != this.selectedItem) {\n      this.selectedItem = item;\n      this.focusedItem = item;\n      this.change.emit(this.value);\n      this.onChange(this.value);\n      this.setInputDisplayValue(this.getItemText(item));\n      this.searchItems = this.items;\n    }\n  }\n\n  private selectItemByInput(input: string): void {\n    this.selectedItem = this.findItemByInput(input);\n  }\n\n  protected onInput(event: Event): void {\n    if (!this.isOpen) {\n      this.open();\n    }\n\n    const input = event.target as HTMLInputElement;\n\n    if (!input.value) {\n      this.clearSelection();\n    }\n\n    this.updateSearchResults(input.value);\n\n    // Screen readers (VoiceOver/NVDA) may move real browser focus to a list-item button.\n    // When the list re-renders after filtering, that button is removed from the DOM and\n    // focus falls to `document.body`. Restore it to the input so the user can keep typing\n    // and the focusout handler doesn't mistake the body-focus for a genuine blur-away.\n    if (document.activeElement !== this.textInput?.nativeElement) {\n      this.textInput?.nativeElement.focus();\n    }\n  }\n\n  private clearSelection(): void {\n    this.selectItem(undefined);\n    // Reset after a short delay so the same message can be announced again on subsequent clears\n    this.announce(this.selectionClearedAnnouncement);\n  }\n\n  private _announceTimeout: ReturnType<typeof setTimeout> | undefined;\n  private announce(message: string): void {\n    clearTimeout(this._announceTimeout);\n    this._liveRegionText = '';\n    this._announceTimeout = setTimeout(() => {\n      this._liveRegionText = message;\n      this.cdr.markForCheck();\n    }, 100);\n  }\n\n  private updateSearchResults(inputValue: string): void {\n    this.searchItems = inputValue ? this.searchFunction(inputValue, this.items) : this.items;\n\n    if (inputValue && this.searchItems.length === 0) {\n      this.announce(this.noSearchResultsText);\n    }\n  }\n\n  protected onPopoverWillHide() {\n    this.state = OpenState.closed;\n    this.rootElement.nativeElement.focus();\n    this.onTouched();\n  }\n\n  protected onPopoverClick() {\n    this.close();\n  }\n\n  @HostListener('mousedown', ['$event'])\n  public onMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @HostListener('touchstart', ['$event'])\n  public onTouchStart(event: TouchEvent) {\n    if (this.isOpen) {\n      event.stopPropagation();\n    }\n  }\n\n  @HostListener('focusout')\n  public onFocusOut() {\n    // Defer the check to allow the browser (and screen readers like VoiceOver/NVDA)\n    // to settle focus. `relatedTarget` is often `null` with screen readers, so we\n    // inspect `document.activeElement` after the microtask queue has flushed.\n    setTimeout(() => {\n      const activeElement = document.activeElement as HTMLElement | null;\n      const isOnTriggerButton =\n        activeElement && this.elementRef.nativeElement.contains(activeElement);\n      const isInsidePopover = activeElement && activeElement.closest('kirby-popover');\n\n      if (isOnTriggerButton || isInsidePopover) {\n        // Focus is still within the component — nothing to do.\n        return;\n      }\n\n      // When a screen reader (VoiceOver/NVDA) moves real focus to a list-item button\n      // and the user then types a character, CDK virtual scroll re-renders the list and\n      // removes the focused button from the DOM. The browser then drops focus to\n      // `document.body`. Detect this case: if the popover is still showing and focus is\n      // on the body, it means focus was lost due to DOM removal — restore it to the\n      // input rather than closing the popover.\n      if (this.isOpen && activeElement === document.body) {\n        this.textInput?.nativeElement.focus();\n        return;\n      }\n\n      if (this.isOpen) {\n        this.close();\n      }\n      this.onTouched();\n    }, 0);\n  }\n\n  @HostListener('keydown.tab')\n  public onTab() {\n    if (this.isOpen) {\n      this.selectItem(this.focusedItem);\n      this.close();\n    }\n  }\n\n  @HostListener('keydown.escape')\n  public onEscape() {\n    this.close();\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  public onEnter(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.isOpen) {\n      this.selectItem(this.focusedItem);\n    }\n    this.toggle();\n  }\n\n  @HostListener('keydown.arrowUp', ['$event'])\n  @HostListener('keydown.arrowDown', ['$event'])\n  @HostListener('keydown.pageUp', ['$event'])\n  @HostListener('keydown.pageDown', ['$event'])\n  @HostListener('keydown.home', ['$event'])\n  @HostListener('keydown.end', ['$event'])\n  public onArrowKeys(event: Event): void {\n    if (this.disabled) return;\n\n    const keyEvent = event as KeyboardEvent; // safe in this context\n    // Avoid page scroll\n    event.preventDefault();\n\n    if (!this.isOpen) {\n      this.open();\n      if (this.selectedItem) {\n        this.setFocusOnSelectedItem();\n      } else {\n        this.setFocusOnFirstOrLastItem(keyEvent);\n      }\n    } else {\n      this.handleFocusNavigation(keyEvent);\n    }\n  }\n\n  private handleFocusNavigation(keyEvent: KeyboardEvent): void {\n    switch (keyEvent.key) {\n      case 'ArrowDown':\n        this.shiftFocusIndex(1);\n        break;\n      case 'ArrowUp':\n        this.shiftFocusIndex(-1);\n        break;\n      case 'PageDown':\n        this.shiftFocusIndex(10);\n        break;\n      case 'PageUp':\n        this.shiftFocusIndex(-10);\n        break;\n      case 'Home':\n        this.setFocusOnFirstItem();\n        break;\n      case 'End':\n        this.setFocusOnLastItem();\n        break;\n      default:\n        break;\n    }\n  }\n\n  private shiftFocusIndex(numberOfItems: number) {\n    // Handle up/down navigation when open\n    const currentIndex = this.searchItems.indexOf(this.focusedItem);\n    let newIndex;\n\n    if (numberOfItems > 0) {\n      newIndex = Math.min(this.searchItems.length - 1, currentIndex + numberOfItems);\n    } else {\n      newIndex = Math.max(0, currentIndex + numberOfItems);\n    }\n\n    if (newIndex !== currentIndex) {\n      this.focusedItem = this.searchItems[newIndex];\n    }\n    this.scrollFocusedItemIntoViewWhileNavigating();\n  }\n\n  private setFocusOnFirstOrLastItem(keyEvent: KeyboardEvent): void {\n    switch (keyEvent.key) {\n      case 'ArrowDown':\n      case 'PageDown':\n      case 'Home':\n        this.setFocusOnFirstItem();\n        break;\n      case 'ArrowUp':\n      case 'PageUp':\n      case 'End':\n        this.setFocusOnLastItem();\n        break;\n      default:\n        break;\n    }\n  }\n\n  private setFocusOnSelectedItem(): void {\n    if (this.selectedItem) {\n      this.focusedItem = this.selectedItem;\n    }\n  }\n\n  private setFocusOnLastItem(): void {\n    if (this.searchItems.length > 0) {\n      this.focusedItem = this.searchItems[this.searchItems.length - 1];\n    }\n  }\n\n  private setFocusOnFirstItem(): void {\n    if (this.searchItems.length > 0) {\n      this.focusedItem = this.searchItems[0];\n    }\n  }\n\n  private unlistenAllSlottedItems(): void {\n    let disposeClickListener: EventListenerDisposeFn | undefined;\n    while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {\n      disposeClickListener();\n    }\n  }\n\n  private unobserveResize() {\n    this.resizeObserverService.unobserve(this.elementRef);\n  }\n\n  /**\n   * Resolve a model/data item based on current `items` by comparing displayed text.\n   * This is used to map an incoming form value or input `selectedItem` to an item\n   * from the list.\n   */\n  private findItemByInput(input: string): unknown {\n    if (!this.items || this.items.length === 0) {\n      return input;\n    }\n\n    return this.items.find((it) => this.getItemText(it) === input) ?? input;\n  }\n\n  private setInputDisplayValue(value: string): void {\n    // We intentionally update the DOM input imperatively (\"hard way\")\n    // to ensure the visible value is cleared/updated immediately.\n    if (this.interactiveElement) {\n      this.renderer.setProperty(this.interactiveElement, 'value', value);\n    }\n  }\n\n  private scrollFocusedItemIntoViewWhileNavigating(): void {\n    if (!this.focusedItem || !this._virtualScrollViewport) {\n      return;\n    }\n\n    const focusedIndex = this.searchItems.indexOf(this.focusedItem);\n    if (focusedIndex === -1) return;\n\n    const itemTop = focusedIndex * this.itemHeight;\n    const itemBottom = itemTop + this.itemHeight;\n    const scrollOffset = this._virtualScrollViewport.measureScrollOffset();\n    const viewportSize = this._virtualScrollViewport.getViewportSize();\n\n    if (itemTop < scrollOffset) {\n      // Item is above the visible area — scroll up so item appears at the top.\n      this._virtualScrollViewport.scrollToOffset(itemTop);\n    } else if (itemBottom > scrollOffset + viewportSize) {\n      // Item is below the visible area — scroll down so item appears at the bottom.\n      this._virtualScrollViewport.scrollToOffset(itemBottom - viewportSize);\n    }\n\n    this._virtualScrollViewport.checkViewportSize();\n  }\n\n  private getKirbyItems(): QueryList<ElementRef<HTMLElement>> | undefined {\n    return this.kirbyItemsSlotted && this.kirbyItemsSlotted.length\n      ? this.kirbyItemsSlotted\n      : this.kirbyItemsDefault;\n  }\n\n  private scrollToIndexIntoViewWhenOpeningPopup(): void {\n    const focusedIndex = this.searchItems.indexOf(this.focusedItem);\n\n    this._virtualScrollViewport?.setRenderedRange({ start: 0, end: 20 });\n    this._virtualScrollViewport?.checkViewportSize();\n\n    this._virtualScrollViewport?.scrollToIndex(focusedIndex);\n  }\n}\n","<span class=\"kirby-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ _liveRegionText }}\n</span>\n<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    (change)=\"$event.stopPropagation()\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"onInput($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (mousedown)=\"$event.preventDefault()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item>\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-extensions-angular-combobox.mjs","names":[],"sources":["../../combobox/src/combobox-item-template.directive.ts","../../combobox/src/combobox.types.ts","../../combobox/src/combobox.component.ts","../../combobox/src/combobox.component.html"],"sourcesContent":["import { Directive } from '@angular/core';\n\n@Directive({\n  selector: '[kirbyXComboboxItemTemplate]',\n  standalone: true,\n})\nexport class ComboboxItemTemplateDirective {}\n","export enum OpenState {\n  closed,\n  opening,\n  open,\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  ElementRef,\n  EventEmitter,\n  forwardRef,\n  HostBinding,\n  HostListener,\n  Input,\n  OnDestroy,\n  Output,\n  QueryList,\n  Renderer2,\n  RendererStyleFlags2,\n  TemplateRef,\n  ViewChild,\n  ViewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';\nimport { AffixDirective, InputSize } from '@kirbydesign/designsystem/form-field';\nimport {\n  EventListenerDisposeFn,\n  FORM_FIELD_CONTROL,\n  FormFieldControl,\n} from '@kirbydesign/designsystem/types';\nimport { forwardAttributes, ResizeObserverService } from '@kirbydesign/designsystem/shared';\nimport { InputComponent } from '@kirbydesign/designsystem/form-field';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  CdkFixedSizeVirtualScroll,\n  CdkVirtualForOf,\n  CdkVirtualScrollViewport,\n} from '@angular/cdk/scrolling';\nimport { ComboboxItemTemplateDirective } from './combobox-item-template.directive';\nimport { OpenState } from './combobox.types';\n\n@Component({\n  selector: 'kirby-x-combobox',\n  templateUrl: './combobox.component.html',\n  styleUrls: ['./combobox.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ComboboxComponent),\n      multi: true,\n    },\n    {\n      provide: FORM_FIELD_CONTROL,\n      useExisting: forwardRef(() => ComboboxComponent),\n    },\n  ],\n  imports: [\n    InputComponent,\n    NgTemplateOutlet,\n    PopoverComponent,\n    CardComponent,\n    ItemComponent,\n    IconComponent,\n    AffixDirective,\n    CdkFixedSizeVirtualScroll,\n    CdkVirtualScrollViewport,\n    CdkVirtualForOf,\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ComboboxComponent\n  implements AfterViewInit, OnDestroy, ControlValueAccessor, FormFieldControl\n{\n  private static readonly HEIGHT_OF_STANDARD_ITEM = 44;\n  private state = OpenState.closed;\n  private _popout: HorizontalDirection | `${HorizontalDirection}` = HorizontalDirection.right;\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  public _listboxId: string = UniqueIdGenerator.scopedTo('kirby-x-combobox').next();\n  public _comboboxId: string = UniqueIdGenerator.scopedTo('kirby-input').next();\n\n  private readonly _defaultSearchFunction = (\n    searchTerm: string,\n    itemsToSearch: unknown[]\n  ): unknown[] => {\n    if (!searchTerm) {\n      return itemsToSearch;\n    }\n\n    const lowerSearchTerm = searchTerm.toLowerCase();\n    return itemsToSearch\n      .filter((item) => this.getItemText(item).toLowerCase().includes(lowerSearchTerm))\n      .sort((a, b) => {\n        const textA = this.getItemText(a).toLowerCase();\n        const textB = this.getItemText(b).toLowerCase();\n\n        const textAStartsWith = textA.startsWith(searchTerm);\n        const textBStartsWith = textB.startsWith(searchTerm);\n        if (textAStartsWith && textBStartsWith) {\n          return this.compareAlphabetically(textA, textB);\n        }\n\n        if (textAStartsWith) {\n          return -1;\n        }\n\n        if (textBStartsWith) {\n          return 1;\n        }\n\n        return this.compareAlphabetically(textA, textB);\n      });\n  };\n\n  private compareAlphabetically(textA: string, textB: string): number {\n    if (textA < textB) {\n      return -1;\n    }\n    if (textA > textB) {\n      return 1;\n    }\n    return 0;\n  }\n\n  /**\n   * The text to display when the search returns no results.\n   */\n  @Input()\n  public noSearchResultsText = 'No results found.';\n\n  /**\n   * The text announced by screen readers when the selection is cleared.\n   */\n  @Input()\n  public selectionClearedAnnouncement = 'Selection cleared.';\n\n  public _liveRegionText = '';\n\n  /**\n   * The name of the property to use as the display text for each item.\n   */\n  @Input()\n  public itemTextProperty: string = 'text';\n  protected getItemText(item: unknown): string {\n    if (this.isTypeString(item)) {\n      return item as string;\n    }\n\n    if (this.objectHasItemTextProperty(item)) {\n      const objectItem = item as Record<string, unknown>;\n      const textValue: unknown = objectItem[this.itemTextProperty];\n\n      if (typeof textValue === 'string') {\n        return textValue;\n      }\n    }\n    return '';\n  }\n\n  /**\n   * The height of each item in the dropdown, in pixels. This is used to calculate the height of the dropdown based on the number of items.\n   */\n  @Input()\n  public itemHeight: number = 44;\n\n  protected get dropdownMaxHeight(): number {\n    return 8 * ComboboxComponent.HEIGHT_OF_STANDARD_ITEM;\n  }\n\n  protected get dropdownMinHeight(): number {\n    return this.itemHeight;\n  }\n\n  protected get viewportHeight(): number {\n    const itemCount = this.searchItems?.length ?? 0;\n\n    if (itemCount === 0) {\n      return this.dropdownMinHeight;\n    }\n\n    return Math.min(\n      this.dropdownMaxHeight,\n      Math.max(this.dropdownMinHeight, itemCount * this.itemHeight)\n    );\n  }\n\n  private isTypeString(item: unknown): boolean {\n    return typeof item === 'string';\n  }\n\n  private objectHasItemTextProperty(item: unknown): boolean {\n    return item != undefined && typeof item === 'object' && this.itemTextProperty in item;\n  }\n\n  private objectHasItemIdProperty(item: unknown): boolean {\n    return item != undefined && typeof item === 'object' && this.itemIdProperty in item;\n  }\n\n  /**\n   * The name of the property to use as the unique identifier for each item.\n   */\n  @Input()\n  public itemIdProperty = 'id';\n  protected getItemId(item: unknown): string {\n    if (this.isTypeString(item)) {\n      return item as string;\n    }\n\n    if (this.objectHasItemIdProperty(item)) {\n      const objectItem = item as Record<string, unknown>;\n      const idValue: unknown = objectItem[this.itemIdProperty];\n\n      if (this.isTypeString(idValue)) {\n        return idValue as string;\n      }\n    }\n\n    console.error(\n      'Each item must have an id property for scroll to work. Ensure that the itemIdProperty input is set correctly, and that each item has a unique id value.'\n    );\n    return '';\n  }\n\n  /**\n   * A function that takes a search term and the list of items, and returns a filtered list of items to display in the dropdown.\n   */\n  @Input()\n  public searchFunction: (searchTerm: string, itemsToSearch: any[]) => any[] =\n    this._defaultSearchFunction;\n\n  private _searchItems: unknown[] = [];\n  protected get searchItems(): unknown[] {\n    return this._searchItems;\n  }\n  private set searchItems(value: unknown[]) {\n    this._searchItems = value;\n    if (!this._searchItems) {\n      return;\n    }\n\n    // only set the focused item of the search result, if the input has value\n    if (this.textInput?.nativeElement?.value) {\n      this.focusedItem = this._searchItems[0];\n      this._virtualScrollViewport?.scrollToIndex(0);\n    }\n  }\n\n  private _items: unknown[] = [];\n\n  get items(): unknown[] {\n    return this._items;\n  }\n\n  /**\n   * The list of items to display in the dropdown.\n   * @param value\n   */\n  @Input()\n  public set items(value: unknown[]) {\n    this._items = value;\n    this.searchItems = this._items;\n  }\n\n  private _selectedItem: unknown = undefined;\n  get selectedItem(): unknown {\n    return this._selectedItem;\n  }\n\n  /**\n   * The currently selected item.\n   * @param value\n   */\n  @Input()\n  public set selectedItem(value: unknown) {\n    // Allow clearing by setting undefined\n    if (value !== this._selectedItem) {\n      this._selectedItem = value;\n      this.focusedItem = this._selectedItem;\n      // Keep ControlValueAccessor value in sync with the selected data item\n      this.value = this._selectedItem;\n      this.setInputDisplayValue(this.getItemText(this.selectedItem));\n    }\n  }\n\n  // _focusedItem keeps track of which element has focus and will be selected\n  // if it is activated (by pressing ENTER)\n  private _focusedItem: unknown = undefined;\n  public get focusedItem(): unknown {\n    return this._focusedItem;\n  }\n\n  public set focusedItem(item: unknown) {\n    // the focus might not have changed, but where in the list might\n    this.setAriaPosinsetOnElement(item);\n\n    if (this._focusedItem === item) {\n      return;\n    }\n\n    this._focusedItem = item;\n  }\n\n  private getIndexOfItem(item: unknown): number {\n    return this.searchItems.indexOf(item);\n  }\n\n  private getKirbyElement(item: unknown | undefined): ElementRef<HTMLElement> | undefined {\n    const kirbyItems = this.getKirbyItems();\n    if (!kirbyItems || !item) {\n      return undefined;\n    }\n\n    const itemId = this.getItemId(item);\n    return kirbyItems.find((el) => el.nativeElement.id === itemId);\n  }\n\n  private setAriaPosinsetOnElement(item: unknown) {\n    const element = this.getKirbyElement(item);\n    const index = this.getIndexOfItem(item);\n    const setsize = this.searchItems.length;\n\n    if (!element) {\n      return;\n    }\n\n    this.renderer.setAttribute(element.nativeElement, 'aria-setsize', setsize.toString());\n    this.renderer.setAttribute(element.nativeElement, 'aria-posinset', `${index + 1}`);\n  }\n\n  /**\n   * The placeholder text to display in the input when no item is selected and the input is empty.\n   */\n  @Input()\n  public placeholder = 'Please search...';\n\n  /**\n   * The direction in which the dropdown should open relative to the input.\n   * @param direction\n   */\n  @Input()\n  public set popout(direction: HorizontalDirection | `${HorizontalDirection}`) {\n    this._popout = direction || HorizontalDirection.right;\n  }\n\n  public get popout() {\n    return this._popout;\n  }\n\n  /**\n   * If the combobox needs to expand to full width of its parent container, then use expand.\n   */\n  @Input()\n  public expand?: 'block';\n\n  /**\n   * When `true`, the user cannot interact with the combobox.\n   */\n  @Input()\n  public disabled = false;\n\n  @HostBinding('attr.disabled')\n  public get _isDisabled(): 'disabled' | null {\n    return this.disabled ? 'disabled' : null;\n  }\n\n  /**\n   * Will emit the new value when error changes.\n   */\n  @Output()\n  hasErrorChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n  private _hasError: boolean = false;\n\n  /**\n   * When `true`, the combobox will be styled with error styles.\n   */\n  @Input()\n  get hasError(): boolean {\n    return this._hasError;\n  }\n\n  set hasError(value: boolean) {\n    if (this._hasError !== value) {\n      this._hasError = value;\n      this.hasErrorChange.emit(this._hasError);\n    }\n  }\n\n  /**\n   * The size of the input element.\n   */\n  @Input()\n  public size: InputSize = InputSize.medium;\n\n  // Prevent Ionic blur on scroll\n  @HostBinding('attr.no-blur')\n  public get _noBlurOnScroll(): boolean {\n    return true;\n  }\n\n  /**\n   * Emitted when an item is selected (tap on mobile, click/keypress on web)\n   */\n  @Output()\n  public change: EventEmitter<any> = new EventEmitter<any>();\n\n  public value: unknown = undefined;\n\n  @HostBinding('class.expand')\n  public get _isBlockLevel() {\n    return this.expand === 'block';\n  }\n\n  @HostBinding('class.is-opening')\n  public get _isOpening(): boolean {\n    return this.state === OpenState.opening;\n  }\n\n  @HostBinding('class.is-open')\n  public get isOpen(): boolean {\n    return this.state === OpenState.open;\n  }\n\n  @HostBinding('class.has-value')\n  public get hasValue(): boolean {\n    return this.selectedItem != null;\n  }\n\n  @ContentChild(ComboboxItemTemplateDirective, { read: TemplateRef })\n  public itemTemplate?: TemplateRef<unknown>;\n\n  @ContentChildren(ComboboxItemTemplateDirective, { read: ElementRef })\n  public slottedItems?: QueryList<ElementRef<HTMLElement>>;\n\n  @ViewChild(CardComponent, { read: ElementRef })\n  public cardElement?: ElementRef<HTMLElement>;\n\n  @ViewChild(PopoverComponent)\n  public popover?: PopoverComponent;\n\n  @ViewChild('rootElement', { static: true, read: ElementRef })\n  public rootElement!: ElementRef<HTMLElement>;\n\n  @ViewChild(InputComponent, { static: true, read: ElementRef })\n  private textInput!: ElementRef<HTMLInputElement>;\n\n  get interactiveElement(): HTMLElement {\n    return this.textInput.nativeElement;\n  }\n\n  @ViewChild(CdkVirtualScrollViewport)\n  public _virtualScrollViewport?: CdkVirtualScrollViewport;\n\n  private forwardAriaLabelToCombobox() {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.rootElement.nativeElement\n    );\n  }\n\n  @ViewChildren(ItemComponent, { read: ElementRef })\n  public kirbyItemsDefault?: QueryList<ElementRef<HTMLElement>>;\n\n  _kirbyItemsSlotted?: QueryList<ElementRef<HTMLElement>>;\n  @ContentChildren(ItemComponent, { read: ElementRef })\n  public set kirbyItemsSlotted(kirbyItems: QueryList<ElementRef<HTMLElement>>) {\n    const hasSlottedItems = this.disposeItemClickListeners?.length > 0;\n    if (hasSlottedItems) {\n      this.unlistenAllSlottedItems();\n    }\n\n    kirbyItems.forEach((kirbyItem) => {\n      this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');\n      const disposeClickListener: EventListenerDisposeFn = this.renderer.listen(\n        kirbyItem.nativeElement,\n        'click',\n        () => {\n          const id = kirbyItem.nativeElement.getAttribute('id');\n          const item = this.items.find((it) => this.getItemId(it) === id);\n          if (item) {\n            this.onItemSelect(item);\n          }\n        }\n      );\n\n      this.disposeItemClickListeners.push(disposeClickListener);\n    });\n\n    this._kirbyItemsSlotted = kirbyItems;\n  }\n\n  public get kirbyItemsSlotted(): QueryList<ElementRef<HTMLElement>> | undefined {\n    return this._kirbyItemsSlotted;\n  }\n\n  private disposeItemClickListeners: EventListenerDisposeFn[] = [];\n\n  public constructor(\n    private renderer: Renderer2,\n    private elementRef: ElementRef<HTMLElement>,\n    private cdr: ChangeDetectorRef,\n    private resizeObserverService: ResizeObserverService\n  ) {}\n\n  protected onToggle(event: MouseEvent) {\n    event.stopPropagation();\n    this.textInput?.nativeElement.focus();\n\n    this.toggle();\n  }\n\n  private toggle(): void {\n    if (this.disabled) {\n      return;\n    }\n    this.isOpen ? this.close() : this.open();\n  }\n\n  public ngAfterViewInit() {\n    if (this.expand === 'block') {\n      const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();\n      this.setPopoverCardStyle('max-width', 'initial');\n      this.setPopoverCardStyle('min-width', 'initial');\n      // Ensure initial width is set even if the resize observer callback also fires initially:\n      this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);\n\n      this.resizeObserverService.observe(this.elementRef, (entry) => {\n        const newWidth = entry.contentRect.width;\n        if (newWidth > 0) {\n          this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);\n        }\n      });\n    }\n    this.forwardAriaLabelToCombobox();\n  }\n\n  /* Utility that makes it easier to set styles on card element */\n  private setPopoverCardStyle(style: string, value: string) {\n    this.renderer.setStyle(\n      this.cardElement?.nativeElement,\n      style,\n      value,\n      RendererStyleFlags2.DashCase\n    );\n  }\n\n  public ngOnDestroy(): void {\n    this.unlistenAllSlottedItems();\n    this.unobserveResize();\n  }\n\n  public open(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (!this.isOpen) {\n      this.state = OpenState.opening;\n      this.showPopOver();\n      this.focusedItem = this.selectedItem;\n    }\n  }\n\n  private showPopOver() {\n    if (this.state === OpenState.opening) {\n      this.state = OpenState.open;\n      this.popover?.show();\n      this.cdr.markForCheck();\n      // PopoverComponent.show() appends the element to document.body synchronously but\n      // finishes positioning in a requestAnimationFrame. One rAF is enough to let the\n      // browser compute layout so the CDK viewport has a real size before we scroll.\n      requestAnimationFrame(() => this.scrollToIndexIntoViewWhenOpeningPopup());\n    }\n  }\n\n  public close() {\n    if (this.disabled) {\n      return;\n    }\n    if (this.isOpen) {\n      this.state = OpenState.closed;\n      this.setInputDisplayValue(this.getItemText(this.selectedItem));\n      this.searchItems = this.items;\n      this.popover?.hide();\n    }\n  }\n\n  protected onItemSelect(item: unknown) {\n    // Guard: slotted click listeners should map back to a data item, but be safe.\n    if (item instanceof HTMLElement) return;\n    this.selectItem(item);\n    this.close();\n  }\n\n  private onChange: (value: unknown) => void = () => {\n    /* empty */\n  };\n  private onTouched: () => void = (): void => {\n    /* empty */\n  };\n\n  /**\n   * Sets the select'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  public writeValue(value: string): void {\n    this.selectItemByInput(value);\n\n    // When written from outside, reflect selected text in the input\n    this.setInputDisplayValue(this.getItemText(this.value));\n\n    this.cdr.markForCheck();\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select'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: unknown) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * Saves a callback function to be invoked when the select 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 select. 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  public setDisabledState?(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  private selectItem(item: unknown): void {\n    if (item != this.selectedItem) {\n      this.selectedItem = item;\n      this.focusedItem = item;\n      this.change.emit(this.value);\n      this.onChange(this.value);\n      this.setInputDisplayValue(this.getItemText(item));\n      this.searchItems = this.items;\n    }\n  }\n\n  private selectItemByInput(input: string): void {\n    this.selectedItem = this.findItemByInput(input);\n  }\n\n  protected onInput(event: Event): void {\n    if (!this.isOpen) {\n      this.open();\n    }\n\n    const input = event.target as HTMLInputElement;\n\n    if (!input.value) {\n      this.clearSelection();\n    }\n\n    this.updateSearchResults(input.value);\n\n    // Screen readers (VoiceOver/NVDA) may move real browser focus to a list-item button.\n    // When the list re-renders after filtering, that button is removed from the DOM and\n    // focus falls to `document.body`. Restore it to the input so the user can keep typing\n    // and the focusout handler doesn't mistake the body-focus for a genuine blur-away.\n    if (document.activeElement !== this.textInput?.nativeElement) {\n      this.textInput?.nativeElement.focus();\n    }\n  }\n\n  private clearSelection(): void {\n    this.selectItem(undefined);\n    // Reset after a short delay so the same message can be announced again on subsequent clears\n    this.announce(this.selectionClearedAnnouncement);\n  }\n\n  private _announceTimeout: ReturnType<typeof setTimeout> | undefined;\n  private announce(message: string): void {\n    clearTimeout(this._announceTimeout);\n    this._liveRegionText = '';\n    this._announceTimeout = setTimeout(() => {\n      this._liveRegionText = message;\n      this.cdr.markForCheck();\n    }, 100);\n  }\n\n  private updateSearchResults(inputValue: string): void {\n    this.searchItems = inputValue ? this.searchFunction(inputValue, this.items) : this.items;\n\n    if (inputValue && this.searchItems.length === 0) {\n      this.announce(this.noSearchResultsText);\n    }\n  }\n\n  protected onPopoverWillHide() {\n    this.state = OpenState.closed;\n    this.rootElement.nativeElement.focus();\n    this.onTouched();\n  }\n\n  protected onPopoverClick() {\n    this.close();\n  }\n\n  @HostListener('mousedown', ['$event'])\n  public onMouseDown(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @HostListener('touchstart', ['$event'])\n  public onTouchStart(event: TouchEvent) {\n    if (this.isOpen) {\n      event.stopPropagation();\n    }\n  }\n\n  @HostListener('focusout')\n  public onFocusOut() {\n    // Defer the check to allow the browser (and screen readers like VoiceOver/NVDA)\n    // to settle focus. `relatedTarget` is often `null` with screen readers, so we\n    // inspect `document.activeElement` after the microtask queue has flushed.\n    setTimeout(() => {\n      const activeElement = document.activeElement as HTMLElement | null;\n      const isOnTriggerButton =\n        activeElement && this.elementRef.nativeElement.contains(activeElement);\n      const isInsidePopover = activeElement && activeElement.closest('kirby-popover');\n\n      if (isOnTriggerButton || isInsidePopover) {\n        // Focus is still within the component — nothing to do.\n        return;\n      }\n\n      // When a screen reader (VoiceOver/NVDA) moves real focus to a list-item button\n      // and the user then types a character, CDK virtual scroll re-renders the list and\n      // removes the focused button from the DOM. The browser then drops focus to\n      // `document.body`. Detect this case: if the popover is still showing and focus is\n      // on the body, it means focus was lost due to DOM removal — restore it to the\n      // input rather than closing the popover.\n      if (this.isOpen && activeElement === document.body) {\n        this.textInput?.nativeElement.focus();\n        return;\n      }\n\n      if (this.isOpen) {\n        this.close();\n      }\n      this.onTouched();\n    }, 0);\n  }\n\n  @HostListener('keydown.tab')\n  public onTab() {\n    if (this.isOpen) {\n      this.selectItem(this.focusedItem);\n      this.close();\n    }\n  }\n\n  @HostListener('keydown.escape')\n  public onEscape() {\n    this.close();\n  }\n\n  @HostListener('keydown.enter', ['$event'])\n  public onEnter(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (this.isOpen) {\n      this.selectItem(this.focusedItem);\n    }\n    this.toggle();\n  }\n\n  @HostListener('keydown.arrowUp', ['$event'])\n  @HostListener('keydown.arrowDown', ['$event'])\n  @HostListener('keydown.pageUp', ['$event'])\n  @HostListener('keydown.pageDown', ['$event'])\n  @HostListener('keydown.home', ['$event'])\n  @HostListener('keydown.end', ['$event'])\n  public onArrowKeys(event: Event): void {\n    if (this.disabled) return;\n\n    const keyEvent = event as KeyboardEvent; // safe in this context\n    // Avoid page scroll\n    event.preventDefault();\n\n    if (!this.isOpen) {\n      this.open();\n      if (this.selectedItem) {\n        this.setFocusOnSelectedItem();\n      } else {\n        this.setFocusOnFirstOrLastItem(keyEvent);\n      }\n    } else {\n      this.handleFocusNavigation(keyEvent);\n    }\n  }\n\n  private handleFocusNavigation(keyEvent: KeyboardEvent): void {\n    switch (keyEvent.key) {\n      case 'ArrowDown':\n        this.shiftFocusIndex(1);\n        break;\n      case 'ArrowUp':\n        this.shiftFocusIndex(-1);\n        break;\n      case 'PageDown':\n        this.shiftFocusIndex(10);\n        break;\n      case 'PageUp':\n        this.shiftFocusIndex(-10);\n        break;\n      case 'Home':\n        this.setFocusOnFirstItem();\n        break;\n      case 'End':\n        this.setFocusOnLastItem();\n        break;\n      default:\n        break;\n    }\n  }\n\n  private shiftFocusIndex(numberOfItems: number) {\n    // Handle up/down navigation when open\n    const currentIndex = this.searchItems.indexOf(this.focusedItem);\n    let newIndex;\n\n    if (numberOfItems > 0) {\n      newIndex = Math.min(this.searchItems.length - 1, currentIndex + numberOfItems);\n    } else {\n      newIndex = Math.max(0, currentIndex + numberOfItems);\n    }\n\n    if (newIndex !== currentIndex) {\n      this.focusedItem = this.searchItems[newIndex];\n    }\n    this.scrollFocusedItemIntoViewWhileNavigating();\n  }\n\n  private setFocusOnFirstOrLastItem(keyEvent: KeyboardEvent): void {\n    switch (keyEvent.key) {\n      case 'ArrowDown':\n      case 'PageDown':\n      case 'Home':\n        this.setFocusOnFirstItem();\n        break;\n      case 'ArrowUp':\n      case 'PageUp':\n      case 'End':\n        this.setFocusOnLastItem();\n        break;\n      default:\n        break;\n    }\n  }\n\n  private setFocusOnSelectedItem(): void {\n    if (this.selectedItem) {\n      this.focusedItem = this.selectedItem;\n    }\n  }\n\n  private setFocusOnLastItem(): void {\n    if (this.searchItems.length > 0) {\n      this.focusedItem = this.searchItems[this.searchItems.length - 1];\n    }\n  }\n\n  private setFocusOnFirstItem(): void {\n    if (this.searchItems.length > 0) {\n      this.focusedItem = this.searchItems[0];\n    }\n  }\n\n  private unlistenAllSlottedItems(): void {\n    let disposeClickListener: EventListenerDisposeFn | undefined;\n    while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {\n      disposeClickListener();\n    }\n  }\n\n  private unobserveResize() {\n    this.resizeObserverService.unobserve(this.elementRef);\n  }\n\n  /**\n   * Resolve a model/data item based on current `items` by comparing displayed text.\n   * This is used to map an incoming form value or input `selectedItem` to an item\n   * from the list.\n   */\n  private findItemByInput(input: string): unknown {\n    if (!this.items || this.items.length === 0) {\n      return input;\n    }\n\n    return this.items.find((it) => this.getItemText(it) === input) ?? input;\n  }\n\n  private setInputDisplayValue(value: string): void {\n    // We intentionally update the DOM input imperatively (\"hard way\")\n    // to ensure the visible value is cleared/updated immediately.\n    if (this.interactiveElement) {\n      this.renderer.setProperty(this.interactiveElement, 'value', value);\n    }\n  }\n\n  private scrollFocusedItemIntoViewWhileNavigating(): void {\n    if (!this.focusedItem || !this._virtualScrollViewport) {\n      return;\n    }\n\n    const focusedIndex = this.searchItems.indexOf(this.focusedItem);\n    if (focusedIndex === -1) return;\n\n    const itemTop = focusedIndex * this.itemHeight;\n    const itemBottom = itemTop + this.itemHeight;\n    const scrollOffset = this._virtualScrollViewport.measureScrollOffset();\n    const viewportSize = this._virtualScrollViewport.getViewportSize();\n\n    if (itemTop < scrollOffset) {\n      // Item is above the visible area — scroll up so item appears at the top.\n      this._virtualScrollViewport.scrollToOffset(itemTop);\n    } else if (itemBottom > scrollOffset + viewportSize) {\n      // Item is below the visible area — scroll down so item appears at the bottom.\n      this._virtualScrollViewport.scrollToOffset(itemBottom - viewportSize);\n    }\n\n    this._virtualScrollViewport.checkViewportSize();\n  }\n\n  private getKirbyItems(): QueryList<ElementRef<HTMLElement>> | undefined {\n    return this.kirbyItemsSlotted && this.kirbyItemsSlotted.length\n      ? this.kirbyItemsSlotted\n      : this.kirbyItemsDefault;\n  }\n\n  private scrollToIndexIntoViewWhenOpeningPopup(): void {\n    const focusedIndex = this.searchItems.indexOf(this.focusedItem);\n\n    this._virtualScrollViewport?.setRenderedRange({ start: 0, end: 20 });\n    this._virtualScrollViewport?.checkViewportSize();\n\n    this._virtualScrollViewport?.scrollToIndex(focusedIndex);\n  }\n}\n","<span class=\"kirby-visually-hidden\" aria-live=\"polite\" aria-atomic=\"true\">\n  {{ _liveRegionText }}\n</span>\n<div (click)=\"onToggle($event)\" #rootElement>\n  <input\n    kirby-input\n    type=\"text\"\n    aria-haspopup=\"listbox\"\n    role=\"combobox\"\n    [hasError]=\"hasError\"\n    [size]=\"size\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"placeholder\"\n    (change)=\"$event.stopPropagation()\"\n    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"onInput($event)\"\n  />\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\" kirby-affix=\"suffix\"></kirby-icon>\n</div>\n\n<kirby-popover\n  [target]=\"rootElement\"\n  [popout]=\"popout\"\n  (click)=\"onPopoverClick()\"\n  (mousedown)=\"$event.preventDefault()\"\n  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item>\n        <p class=\"kirby-item-title no-results\">{{ noSearchResultsText }}</p>\n      </kirby-item>\n    } @else {\n      <cdk-virtual-scroll-viewport\n        class=\"combobox-viewport\"\n        role=\"listbox\"\n        [itemSize]=\"itemHeight\"\n        [style.height.px]=\"viewportHeight\"\n      >\n        <ng-container *cdkVirtualFor=\"let item of searchItems\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              itemTemplate || defaultItemTemplate;\n              context: {\n                $implicit: item,\n                selected: item === selectedItem,\n                focused: item === focusedItem,\n              }\n            \"\n          ></ng-container>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-focused=\"focused\">\n  <kirby-item\n    role=\"option\"\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    [class.focused]=\"focused\"\n    [attr.id]=\"getItemId(item)\"\n    [attr.aria-selected]=\"selected\"\n    (click)=\"onItemSelect(item)\"\n  >\n    <p class=\"kirby-item-title\">{{ getItemText(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n"],"mappings":"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"}

package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs

@@ -115,7 +115,7 @@ var ImageBannerComponent = class ImageBannerComponent {
 			hostDirectives: [{ directive: ImageBannerHeightDirective }],
 			ngImport: i0,
 			template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <button\n      kirby-button\n      size=\"xs\"\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      class=\"dismiss\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  }\n</kirby-card>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){outline:none}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)):after{content:\"\";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--kirby-focus-ring-md-inset);pointer-events:none;z-index:1;transition:box-shadow 80ms linear}.main-content-wrapper{width:100%;min-height:180px;padding:var(--kirby-spacing-xxs);box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:var(--kirby-spacing-s);flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:var(--kirby-border-radius-s)}@container banner (width >= 600px){.main-content-image-wrapper{flex:1;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--kirby-spacing-s) - 2px) 0 calc(var(--kirby-spacing-xxs) - 2px) var(--kirby-spacing-xxs);overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:var(--kirby-spacing-xs);padding:calc(var(--kirby-spacing-xs) - 2px) var(--kirby-spacing-xxs) var(--kirby-spacing-xxs) 0}}.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{position:absolute;inset:0;height:100%}}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:var(--kirby-spacing-xxl)}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:var(--kirby-spacing-s);align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:var(--kirby-spacing-m);min-width:var(--kirby-spacing-m);margin-bottom:var(--kirby-spacing-xxxs)}.narrow-view-action:is(a) kirby-icon{font-size:var(--kirby-spacing-m)}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:var(--kirby-spacing-xxs)}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:var(--kirby-spacing-s);right:var(--kirby-spacing-s);margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:var(--kirby-x-image-banner-min-height, calc(var(--kirby-font-size-n) * var(--kirby-line-height-n) + 2 * var(--kirby-font-size-s) * var(--kirby-line-height-s)))}@container banner (width >= 600px){.text-content-layout{gap:var(--kirby-spacing-xs);min-height:initial}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-n)}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss:focus-within)){--kirby-card-border: var(--kirby-card-border-width) solid var(--kirby-color-border-focus);outline:none}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss:focus-within)) .breakout{box-shadow:none}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss:focus-within)):after{content:\"\";position:absolute;inset:0;border-radius:calc(var(--kirby-border-radius-n) - var(--kirby-card-border-width));box-shadow:var(--kirby-focus-ring-md-combined-inset);pointer-events:none;z-index:1;transition:box-shadow 80ms linear}.main-content-wrapper{width:100%;min-height:180px;padding:var(--kirby-spacing-xxs);box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:var(--kirby-spacing-s);flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:var(--kirby-border-radius-s)}@container banner (width >= 600px){.main-content-image-wrapper{flex:1;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--kirby-spacing-s) - 2px) 0 calc(var(--kirby-spacing-xxs) - 2px) var(--kirby-spacing-xxs);overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:var(--kirby-spacing-xs);padding:calc(var(--kirby-spacing-xs) - 2px) var(--kirby-spacing-xxs) var(--kirby-spacing-xxs) 0}}.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{position:absolute;inset:0;height:100%}}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:var(--kirby-spacing-xxl)}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:var(--kirby-spacing-s);align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:var(--kirby-spacing-m);min-width:var(--kirby-spacing-m);margin-bottom:var(--kirby-spacing-xxxs)}.narrow-view-action:is(a) kirby-icon{font-size:var(--kirby-spacing-m)}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:var(--kirby-spacing-xxs)}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:var(--kirby-spacing-s);right:var(--kirby-spacing-s);margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:var(--kirby-x-image-banner-min-height, calc(var(--kirby-font-size-n) * var(--kirby-line-height-n) + 2 * var(--kirby-font-size-s) * var(--kirby-line-height-s)))}@container banner (width >= 600px){.text-content-layout{gap:var(--kirby-spacing-xs);min-height:initial}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-n)}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -179,7 +179,7 @@ i0.ɵɵngDeclareClassMetadata({
 			hostDirectives: [ImageBannerHeightDirective],
 			changeDetection: ChangeDetectionStrategy.Eager,
 			template: "<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <button\n      kirby-button\n      size=\"xs\"\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      class=\"dismiss\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  }\n</kirby-card>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)){outline:none}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)) .breakout{box-shadow:none}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss :focus)):after{content:\"\";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--kirby-focus-ring-md-inset);pointer-events:none;z-index:1;transition:box-shadow 80ms linear}.main-content-wrapper{width:100%;min-height:180px;padding:var(--kirby-spacing-xxs);box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:var(--kirby-spacing-s);flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:var(--kirby-border-radius-s)}@container banner (width >= 600px){.main-content-image-wrapper{flex:1;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--kirby-spacing-s) - 2px) 0 calc(var(--kirby-spacing-xxs) - 2px) var(--kirby-spacing-xxs);overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:var(--kirby-spacing-xs);padding:calc(var(--kirby-spacing-xs) - 2px) var(--kirby-spacing-xxs) var(--kirby-spacing-xxs) 0}}.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{position:absolute;inset:0;height:100%}}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:var(--kirby-spacing-xxl)}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:var(--kirby-spacing-s);align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:var(--kirby-spacing-m);min-width:var(--kirby-spacing-m);margin-bottom:var(--kirby-spacing-xxxs)}.narrow-view-action:is(a) kirby-icon{font-size:var(--kirby-spacing-m)}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:var(--kirby-spacing-xxs)}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:var(--kirby-spacing-s);right:var(--kirby-spacing-s);margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:var(--kirby-x-image-banner-min-height, calc(var(--kirby-font-size-n) * var(--kirby-line-height-n) + 2 * var(--kirby-font-size-s) * var(--kirby-line-height-s)))}@container banner (width >= 600px){.text-content-layout{gap:var(--kirby-spacing-xs);min-height:initial}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-n)}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"]
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block}:host(.none) .blur-image{display:none}@container banner (width < 600px){:host(.none) .dismiss{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black)}}:host(.none) .main-content-body-action-link{color:var(--kirby-semi-dark)}:host(.dark) .blur-image{filter:blur(110px)}:host(.light) .blur-image{filter:blur(110px)}:host(.dark) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000052;z-index:1}:host(.light) .blur-image-wrapper:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff73;z-index:1}.blur-image-wrapper{position:absolute;inset:-330px;z-index:-1}.blur-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0)}kirby-card{container-name:banner;container-type:inline-size;height:100%}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss:focus-within)){--kirby-card-border: var(--kirby-card-border-width) solid var(--kirby-color-border-focus);outline:none}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss:focus-within)) .breakout{box-shadow:none}kirby-card:focus-within:has(:focus-visible):not(:has(.dismiss:focus-within)):after{content:\"\";position:absolute;inset:0;border-radius:calc(var(--kirby-border-radius-n) - var(--kirby-card-border-width));box-shadow:var(--kirby-focus-ring-md-combined-inset);pointer-events:none;z-index:1;transition:box-shadow 80ms linear}.main-content-wrapper{width:100%;min-height:180px;padding:var(--kirby-spacing-xxs);box-sizing:border-box;display:flex;flex-direction:column}@container banner (width >= 600px){.main-content-wrapper{gap:var(--kirby-spacing-s);flex-direction:initial}}.main-content-image-wrapper{display:flex;overflow:hidden;border-radius:var(--kirby-border-radius-s)}@container banner (width >= 600px){.main-content-image-wrapper{flex:1;position:relative}}.main-content{box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--kirby-spacing-s) - 2px) 0 calc(var(--kirby-spacing-xxs) - 2px) var(--kirby-spacing-xxs);overflow:hidden}@container banner (width < 600px){.main-content{flex-direction:row}}@container banner (width >= 600px){.main-content{flex:1;gap:var(--kirby-spacing-xs);padding:calc(var(--kirby-spacing-xs) - 2px) var(--kirby-spacing-xxs) var(--kirby-spacing-xxs) 0}}.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}}.main-content:has(.main-content-body-action-link) .main-content-header{padding-inline-end:var(--kirby-spacing-xl)}.main-content-header p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0;padding:0}.main-content-image{width:100%;height:132px;object-fit:cover;object-position:center}@container banner (width >= 600px){.main-content-image{position:absolute;inset:0;height:100%}}.main-content-body p{text-wrap-mode:wrap;margin-bottom:0}@container banner (width >= 600px){.main-content-body{max-width:324px}}@container banner (width >= 600px){.main-content-body .main-content-body-action-link{display:none}}.main-content-body-text{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-inline-end:var(--kirby-spacing-xxs)}@container banner (width >= 600px){.main-content-body-text{padding-inline-end:var(--kirby-spacing-xxl)}}@container banner (width < 600px){.main-content-body-text{-webkit-line-clamp:2;line-clamp:2;max-height:3em}}.breakout{position:initial;border-radius:var(--kirby-spacing-s);align-self:center}.breakout:before{content:\"\";display:block;position:absolute;inset:0}.wide-view-action{display:none}@container banner (width >= 600px){.wide-view-action{display:inline-flex;align-self:start;margin:0}}.narrow-view-action{display:inline-flex;margin:0}@container banner (width >= 600px){.narrow-view-action{display:none}}.narrow-view-action:is(a){width:var(--kirby-spacing-m);min-width:var(--kirby-spacing-m);margin-bottom:var(--kirby-spacing-xxxs)}.narrow-view-action:is(a) kirby-icon{font-size:var(--kirby-spacing-m)}.narrow-view-action:is(button){min-width:1px;width:1px;height:1px}:host(.show-button-in-narrow-view) .wide-view-action{display:inline-flex;margin-bottom:var(--kirby-spacing-xxs)}:host(.show-button-in-narrow-view) .narrow-view-action{display:none}button.dismiss{position:absolute;top:var(--kirby-spacing-s);right:var(--kirby-spacing-s);margin:0}.text-content-layout{display:flex;flex:1;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:var(--kirby-x-image-banner-min-height, calc(var(--kirby-font-size-n) * var(--kirby-line-height-n) + 2 * var(--kirby-font-size-s) * var(--kirby-line-height-s)))}@container banner (width >= 600px){.text-content-layout{gap:var(--kirby-spacing-xs);min-height:initial}}.title ::ng-deep>h1,.title ::ng-deep>h2,.title ::ng-deep>h3,.title ::ng-deep>h4,.title ::ng-deep>h5,.title ::ng-deep>h6{margin-bottom:0;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);line-height:var(--kirby-line-height-n)}@supports (text-box: trim-start text alphabetic){.kirby-text-normal-bold,.title{margin-top:0;text-box:trim-start text alphabetic}}\n"]
 		}]
 	}],
 	ctorParameters: () => [{ type: i1.TranslationService }],

package/fesm2022/kirbydesign-extensions-angular-image-banner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","names":[],"sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/**\n * @Description Temporary directive to ensure correct scroll position behavior on Safari.\n *\n * When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n */\n@Directive({\n  selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n  private currentHeight: number = 0;\n  private host = inject(ElementRef);\n  private resizeObserverService = inject(ResizeObserverService);\n  private renderer = inject(Renderer2);\n\n  ngOnInit() {\n    this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n  }\n\n  ngOnDestroy() {\n    this.resizeObserverService.unobserve(this.host);\n  }\n\n  private setCardHeightOnHost(entry: ResizeObserverEntry) {\n    const hostElement = entry.target as HTMLElement;\n    const card = hostElement.querySelector('kirby-card');\n    const cardHeight = card?.getBoundingClientRect().height;\n\n    if (!hostElement || !cardHeight) return;\n    if (cardHeight === this.currentHeight) return;\n\n    this.currentHeight = cardHeight;\n    this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n  selector: 'kirby-x-image-banner',\n  imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective],\n  hostDirectives: [ImageBannerHeightDirective],\n  templateUrl: './image-banner.component.html',\n  styleUrl: './image-banner.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class ImageBannerComponent {\n  /**\n   * The title placed inside the image banners header.\n   */\n  @Input() title: string | undefined;\n\n  /**\n   * The image shown on the banner, and used for the background blur effect.\n   */\n  @Input() imagePath: string | undefined;\n\n  /**\n   * The body text placed below the title.\n   */\n  @Input() bodyText: string | undefined;\n\n  /**\n   * Whether the button should be shown in narrow view or not.\n   */\n  @HostBinding('class.show-button-in-narrow-view')\n  @Input()\n  showButtonInNarrowView: boolean = false;\n\n  /**\n   * The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n   */\n  @Input() actionButtonText: string | undefined = this.translations.get('readMore');\n\n  /**\n   * When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.\n   */\n  @Input() externalLink: string | undefined;\n\n  /**\n   * The blur-effect used for the background.\n   */\n  @HostBinding('class')\n  @Input()\n  backgroundBlur: 'dark' | 'light' | 'none' = 'dark';\n\n  /**\n   * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n   */\n  @Output() bannerClick = new EventEmitter<Event>();\n\n  /**\n   * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n   */\n  @Output() dismissClick = new EventEmitter<Event>();\n\n  /**\n   * If the input imagePath results in an error, it will be reflected in this output.\n   */\n  @Output()\n  imageError = new EventEmitter<ErrorEvent>();\n\n  constructor(public translations: TranslationService) {}\n\n  public bannerClicked(event: Event) {\n    const eventTarget = event.target as HTMLElement;\n    const dismissButtonClicked = eventTarget.closest('.dismiss');\n    if (dismissButtonClicked) return;\n    this.bannerClick.emit(event);\n  }\n\n  public dismissClicked(event: Event) {\n    this.dismissClick.emit(event);\n  }\n\n  public onImageError($event: ErrorEvent) {\n    this.imageError.emit($event);\n  }\n}\n","<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <button\n      kirby-button\n      size=\"xs\"\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      class=\"dismiss\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  }\n</kirby-card>\n"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-extensions-angular-image-banner.mjs","names":[],"sources":["../../image-banner/src/image-banner-height.directive.ts","../../image-banner/src/image-banner.component.ts","../../image-banner/src/image-banner.component.html"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n/**\n * @Description Temporary directive to ensure correct scroll position behavior on Safari.\n *\n * When navigating between stacked pages, scroll position is not correctly restored on Safari,\n * when the nested kirby-card element uses containment and the host element does not have an explicit height.\n */\n@Directive({\n  selector: `[kirbyImageBannerResize]`,\n})\nexport class ImageBannerHeightDirective implements OnInit, OnDestroy {\n  private currentHeight: number = 0;\n  private host = inject(ElementRef);\n  private resizeObserverService = inject(ResizeObserverService);\n  private renderer = inject(Renderer2);\n\n  ngOnInit() {\n    this.resizeObserverService.observe(this.host, (entry) => this.setCardHeightOnHost(entry));\n  }\n\n  ngOnDestroy() {\n    this.resizeObserverService.unobserve(this.host);\n  }\n\n  private setCardHeightOnHost(entry: ResizeObserverEntry) {\n    const hostElement = entry.target as HTMLElement;\n    const card = hostElement.querySelector('kirby-card');\n    const cardHeight = card?.getBoundingClientRect().height;\n\n    if (!hostElement || !cardHeight) return;\n    if (cardHeight === this.currentHeight) return;\n\n    this.currentHeight = cardHeight;\n    this.renderer.setStyle(hostElement, 'min-height', `${cardHeight}px`);\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { ThemeColorDirective, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { ImageBannerHeightDirective } from './image-banner-height.directive';\n\n@Component({\n  selector: 'kirby-x-image-banner',\n  imports: [CardComponent, ButtonComponent, IconComponent, ThemeColorDirective],\n  hostDirectives: [ImageBannerHeightDirective],\n  templateUrl: './image-banner.component.html',\n  styleUrl: './image-banner.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class ImageBannerComponent {\n  /**\n   * The title placed inside the image banners header.\n   */\n  @Input() title: string | undefined;\n\n  /**\n   * The image shown on the banner, and used for the background blur effect.\n   */\n  @Input() imagePath: string | undefined;\n\n  /**\n   * The body text placed below the title.\n   */\n  @Input() bodyText: string | undefined;\n\n  /**\n   * Whether the button should be shown in narrow view or not.\n   */\n  @HostBinding('class.show-button-in-narrow-view')\n  @Input()\n  showButtonInNarrowView: boolean = false;\n\n  /**\n   * The text of the button in the content area of the image banner. If left empty, will default to 'Read more' (or equivalent translation for [supported locales](https://cookbook.kirby.design/#/home/localization)).\n   */\n  @Input() actionButtonText: string | undefined = this.translations.get('readMore');\n\n  /**\n   * When an external link is supplied the entire banner will be an anchor-tag and navigate when activated.\n   */\n  @Input() externalLink: string | undefined;\n\n  /**\n   * The blur-effect used for the background.\n   */\n  @HostBinding('class')\n  @Input()\n  backgroundBlur: 'dark' | 'light' | 'none' = 'dark';\n\n  /**\n   * Emitted every time the banner is activated. The entire banner is interactive, and will be activated by click and keyboard interaction.\n   */\n  @Output() bannerClick = new EventEmitter<Event>();\n\n  /**\n   * If subscribed to, a dismiss button will be shown. Emitted every time the dismiss button is activated by click and keyboard interaction.\n   */\n  @Output() dismissClick = new EventEmitter<Event>();\n\n  /**\n   * If the input imagePath results in an error, it will be reflected in this output.\n   */\n  @Output()\n  imageError = new EventEmitter<ErrorEvent>();\n\n  constructor(public translations: TranslationService) {}\n\n  public bannerClicked(event: Event) {\n    const eventTarget = event.target as HTMLElement;\n    const dismissButtonClicked = eventTarget.closest('.dismiss');\n    if (dismissButtonClicked) return;\n    this.bannerClick.emit(event);\n  }\n\n  public dismissClicked(event: Event) {\n    this.dismissClick.emit(event);\n  }\n\n  public onImageError($event: ErrorEvent) {\n    this.imageError.emit($event);\n  }\n}\n","<kirby-card [themeColor]=\"backgroundBlur === 'none' ? 'white' : backgroundBlur\">\n  <div class=\"blur-image-wrapper\">\n    <img class=\"blur-image\" [src]=\"imagePath\" alt=\"\" />\n  </div>\n\n  <div class=\"main-content-wrapper\">\n    <div class=\"main-content-image-wrapper\">\n      <img class=\"main-content-image\" [src]=\"imagePath\" alt=\"\" (error)=\"onImageError($event)\" />\n    </div>\n\n    <div class=\"main-content\">\n      <div class=\"text-content-layout\">\n        <div class=\"main-content-header\">\n          @if (title) {\n            <p class=\"kirby-text-normal-bold\">\n              {{ title }}\n            </p>\n          } @else {\n            <div class=\"title kirby-text-normal-bold\">\n              <ng-content select=\"[title]\"></ng-content>\n            </div>\n          }\n        </div>\n\n        <div class=\"main-content-body\">\n          <p class=\"main-content-body-text kirby-text-small\">\n            @if (bodyText) {\n              {{ bodyText }}\n            } @else {\n              <ng-content select=\"[bodyText]\"></ng-content>\n            }\n          </p>\n        </div>\n      </div>\n      @if (externalLink) {\n        <!-- Only one of below anchors is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <a\n          kirby-button\n          class=\"breakout wide-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n\n        <a\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [href]=\"externalLink\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n          target=\"_blank\"\n          size=\"sm\"\n        >\n          {{ actionButtonText }}\n          <kirby-icon name=\"link\"></kirby-icon>\n        </a>\n      }\n\n      @if (!externalLink) {\n        <!-- Only one of below buttons is displayed at a time -\n            we want different behavior on varying screen widths -->\n        <button\n          kirby-button\n          class=\"breakout wide-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n        >\n          {{ actionButtonText }}\n        </button>\n\n        <button\n          kirby-button\n          class=\"breakout narrow-view-action\"\n          size=\"sm\"\n          (click)=\"bannerClicked($event)\"\n          [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n          [noDecoration]=\"true\"\n          [showIconOnly]=\"true\"\n        >\n          <span class=\"kirby-visually-hidden\">\n            {{ actionButtonText }}\n          </span>\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (dismissClick.observed) {\n    <button\n      kirby-button\n      size=\"xs\"\n      (click)=\"dismissClicked($event)\"\n      [attentionLevel]=\"backgroundBlur === 'none' ? '3' : '2'\"\n      [showIconOnly]=\"true\"\n      [attr.aria-label]=\"translations.get('close') + ' ' + title\"\n      class=\"dismiss\"\n    >\n      <kirby-icon name=\"close\"></kirby-icon>\n    </button>\n  }\n</kirby-card>\n"],"mappings":"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"}

package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs

@@ -159,7 +159,7 @@ var SidebarContainerComponent = class SidebarContainerComponent {
 			selector: "aside[kirby-x-sidebar-container]",
 			ngImport: i0,
 			template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n  <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n  kirbyXHeightObserver\n  class=\"sidebar-content\"\n  cdkScrollable\n  (scroll)=\"vm.setScroll($event)\"\n  (heightChange)=\"vm.setContainerHeight($event)\"\n>\n  <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n  <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-color-hover: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none;height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-tertiary));color:var(--sidebar-color, var(--kirby-tertiary-contrast));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"],
+			styles: [":host{height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-color-fill-base));color:var(--sidebar-color, var(--kirby-color-content-base));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-color-content-base-quiet) var(--kirby-color-fill-base)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--kirby-color-content-base-quiet) 50%,transparent);border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: HeightObserverDirective,
@@ -186,7 +186,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [HeightObserverDirective, CdkScrollable],
 			changeDetection: ChangeDetectionStrategy.Eager,
 			template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n  <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n  kirbyXHeightObserver\n  class=\"sidebar-content\"\n  cdkScrollable\n  (scroll)=\"vm.setScroll($event)\"\n  (heightChange)=\"vm.setContainerHeight($event)\"\n>\n  <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n  <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-color-hover: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none;height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-tertiary));color:var(--sidebar-color, var(--kirby-tertiary-contrast));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"]
+			styles: [":host{height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-color-fill-base));color:var(--sidebar-color, var(--kirby-color-content-base));display:flex;flex-direction:column}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-color-content-base-quiet) var(--kirby-color-fill-base)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--kirby-color-content-base-quiet) 50%,transparent);border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"]
 		}]
 	}]
 });
@@ -210,7 +210,7 @@ var SidebarComponent = class SidebarComponent {
 			selector: "kirby-x-sidebar",
 			ngImport: i0,
 			template: `
-    <aside kirby-x-sidebar-container>
+    <aside kirby-x-sidebar-container class="kirby-surface-brand">
       <ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
       <ng-content slot="content"></ng-content>
       <ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
@@ -236,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "kirby-x-sidebar",
 			template: `
-    <aside kirby-x-sidebar-container>
+    <aside kirby-x-sidebar-container class="kirby-surface-brand">
       <ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
       <ng-content slot="content"></ng-content>
       <ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
@@ -405,7 +405,7 @@ var MenuItemComponent = class MenuItemComponent {
 			} },
 			ngImport: i0,
 			template: "<div class=\"menu-item-start {{ size() }}\">\n  @if (icon(); as icon) {\n    <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n  }\n</div>\n\n<div class=\"menu-item-content\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n  <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-tertiary))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-color-fill-base))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"],
 			dependencies: [{
 				kind: "ngmodule",
 				type: IconModule
@@ -435,7 +435,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [IconModule],
 			changeDetection: ChangeDetectionStrategy.Eager,
 			template: "<div class=\"menu-item-start {{ size() }}\">\n  @if (icon(); as icon) {\n    <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n  }\n</div>\n\n<div class=\"menu-item-content\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n  <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n",
-			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-tertiary))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"]
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:var(--kirby-spacing-l);border-radius:var(--kirby-border-radius-s);padding:var(--kirby-spacing-xxxs) var(--kirby-spacing-xs);gap:var(--kirby-spacing-xxs);border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:var(--kirby-spacing-xl)}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset);outline:none}:host-context(.cdk-drag-preview){transform:scale(1.05);transition:transform .2s ease;border-radius:var(--kirby-border-radius-s)}:host-context(.cdk-drag-preview):before{content:\"\";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}:host-context(.cdk-drag-preview).selected:before{display:none}:host-context(.cdk-drag-preview):not(.selected){background:var(--sidebar-background-color, var(--kirby-color-fill-base))}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:var(--kirby-icon-font-size-sm);height:var(--kirby-icon-font-size-sm)}.menu-item-start.sm,.menu-item-start.xs{width:var(--kirby-icon-font-size-xs);height:var(--kirby-icon-font-size-xs)}.menu-item-start.sm{padding-left:var(--kirby-spacing-l)}.menu-item-start.xs{padding-left:var(--kirby-spacing-xxxl)}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4;font-size:var(--kirby-font-size-n);line-height:var(--kirby-line-height-m)}.menu-item-end{display:inline-flex;min-width:var(--kirby-icon-font-size-sm);align-items:center;justify-content:center;gap:var(--kirby-spacing-xxs)}.menu-item-end:empty{display:none}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -694,7 +694,7 @@ var MenuAnchorItemComponent = class MenuAnchorItemComponent {
 			} },
 			ngImport: i0,
 			template: "@let item = vm.item();\n@switch (item.type) {\n  @case ('action') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [attr.href]=\"item.href\"\n      (click)=\"$event.preventDefault(); vm.selectItem()\"\n      (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      @if (item.isLink) {\n        <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n      }\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n  @case ('router-link') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [routerLink]=\"item.route\"\n      [queryParams]=\"item.queryParams\"\n      [skipLocationChange]=\"item.skipLocationChange\"\n      [replaceUrl]=\"item.replaceUrl\"\n      (click)=\"vm.selectItem()\"\n      (keydown.enter)=\"vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n  @case ('external-link') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [attr.href]=\"item.url\"\n      [attr.target]=\"item.target\"\n      (click)=\"vm.selectItem()\"\n      (keydown.enter)=\"vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n}\n\n@if (item.toggle) {\n  <kirby-toggle-button\n    class=\"toggle-button-wrapper\"\n    [checked]=\"vm.isChecked()\"\n    (checkChanged)=\"vm.checkItem($event)\"\n  >\n    <button\n      kirby-button\n      unchecked\n      size=\"xs\"\n      attentionLevel=\"3\"\n      tabindex=\"-1\"\n      [noDecoration]=\"true\"\n      class=\"toggle-button\"\n    >\n      <kirby-icon size=\"xs\" [name]=\"item.toggle.uncheckedIcon\"></kirby-icon>\n    </button>\n    <button\n      kirby-button\n      checked\n      size=\"xs\"\n      attentionLevel=\"3\"\n      tabindex=\"-1\"\n      [noDecoration]=\"true\"\n      class=\"toggle-button\"\n    >\n      <kirby-icon size=\"xs\" [name]=\"item.toggle.checkedIcon\"></kirby-icon>\n    </button>\n  </kirby-toggle-button>\n}\n",
-			styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative;overflow:visible}:host.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"],
+			styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative;overflow:visible}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-color-fill-brand-loud));color:var(--menuitem-selected-color, var(--kirby-color-content-brand-loud));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -787,7 +787,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.Eager,
 			template: "@let item = vm.item();\n@switch (item.type) {\n  @case ('action') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [attr.href]=\"item.href\"\n      (click)=\"$event.preventDefault(); vm.selectItem()\"\n      (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      @if (item.isLink) {\n        <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n      }\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n  @case ('router-link') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [routerLink]=\"item.route\"\n      [queryParams]=\"item.queryParams\"\n      [skipLocationChange]=\"item.skipLocationChange\"\n      [replaceUrl]=\"item.replaceUrl\"\n      (click)=\"vm.selectItem()\"\n      (keydown.enter)=\"vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n  @case ('external-link') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [attr.href]=\"item.url\"\n      [attr.target]=\"item.target\"\n      (click)=\"vm.selectItem()\"\n      (keydown.enter)=\"vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n}\n\n@if (item.toggle) {\n  <kirby-toggle-button\n    class=\"toggle-button-wrapper\"\n    [checked]=\"vm.isChecked()\"\n    (checkChanged)=\"vm.checkItem($event)\"\n  >\n    <button\n      kirby-button\n      unchecked\n      size=\"xs\"\n      attentionLevel=\"3\"\n      tabindex=\"-1\"\n      [noDecoration]=\"true\"\n      class=\"toggle-button\"\n    >\n      <kirby-icon size=\"xs\" [name]=\"item.toggle.uncheckedIcon\"></kirby-icon>\n    </button>\n    <button\n      kirby-button\n      checked\n      size=\"xs\"\n      attentionLevel=\"3\"\n      tabindex=\"-1\"\n      [noDecoration]=\"true\"\n      class=\"toggle-button\"\n    >\n      <kirby-icon size=\"xs\" [name]=\"item.toggle.checkedIcon\"></kirby-icon>\n    </button>\n  </kirby-toggle-button>\n}\n",
-			styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative;overflow:visible}:host.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"]
+			styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative;overflow:visible}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-color-fill-base-hover))}:host:not(.selected):active a{background:var(--menuitem-active-background-color, var(--kirby-color-fill-base-active))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-color-fill-brand-loud));color:var(--menuitem-selected-color, var(--kirby-color-content-brand-loud));font-weight:var(--kirby-font-weight-bold)}.item-badge{display:inline-flex}.toggle-spacer{width:var(--kirby-icon-font-size-sm);display:none}:host.has-toggle:hover .item-badge,:host.has-toggle:active .item-badge,:host.has-toggle:has(a:focus-visible) .item-badge,:host.has-toggle:has(.toggle-button:focus-visible) .item-badge{display:none}:host.has-toggle:hover .toggle-spacer,:host.has-toggle:active .toggle-spacer,:host.has-toggle:has(a:focus-visible) .toggle-spacer,:host.has-toggle:has(.toggle-button:focus-visible) .toggle-spacer{display:initial}:host.has-toggle:hover .external-link,:host.has-toggle:active .external-link,:host.has-toggle:has(a:focus-visible) .external-link,:host.has-toggle:has(.toggle-button:focus-visible) .external-link{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:var(--kirby-spacing-xs)}.toggle-button{margin:0;transition:opacity 0ms;--kirby-button-color: inherit}.toggle-button:not(:focus-visible){opacity:0}:host:hover .toggle-button,:host:active .toggle-button,:host:has(a:focus-visible) .toggle-button{opacity:1}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -1072,7 +1072,7 @@ var MenuItemListComponent = class MenuItemListComponent {
 			} },
 			ngImport: i0,
 			template: "@for (item of vm.items(); track item.id) {\n  @switch (item.type) {\n    @case ('divider') {\n      <kirby-divider aria-hidden=\"true\"></kirby-divider>\n    }\n    @case ('submenu') {\n      <li\n        kirby-x-menu-submenu-item\n        [item]=\"item\"\n        [size]=\"vm.size()\"\n        cdkDrag\n        cdkDragPreviewContainer=\"parent\"\n        [cdkDragBoundary]=\"'[cdkDropList]'\"\n        [cdkDragDisabled]=\"!vm.isReorderable()\"\n        [cdkDragData]=\"item.id\"\n      ></li>\n    }\n    @default {\n      <li\n        kirby-x-menu-anchor-item\n        [item]=\"item\"\n        [size]=\"vm.size()\"\n        cdkDrag\n        cdkDragPreviewContainer=\"parent\"\n        [cdkDragBoundary]=\"'[cdkDropList]'\"\n        [cdkDragDisabled]=\"!vm.isReorderable()\"\n        [cdkDragData]=\"item.id\"\n      ></li>\n    }\n  }\n}\n",
-			styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;background:var(--kirby-white-overlay-20);margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"],
+			styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -1146,7 +1146,7 @@ i0.ɵɵngDeclareClassMetadata({
 				CdkDrag
 			],
 			template: "@for (item of vm.items(); track item.id) {\n  @switch (item.type) {\n    @case ('divider') {\n      <kirby-divider aria-hidden=\"true\"></kirby-divider>\n    }\n    @case ('submenu') {\n      <li\n        kirby-x-menu-submenu-item\n        [item]=\"item\"\n        [size]=\"vm.size()\"\n        cdkDrag\n        cdkDragPreviewContainer=\"parent\"\n        [cdkDragBoundary]=\"'[cdkDropList]'\"\n        [cdkDragDisabled]=\"!vm.isReorderable()\"\n        [cdkDragData]=\"item.id\"\n      ></li>\n    }\n    @default {\n      <li\n        kirby-x-menu-anchor-item\n        [item]=\"item\"\n        [size]=\"vm.size()\"\n        cdkDrag\n        cdkDragPreviewContainer=\"parent\"\n        [cdkDragBoundary]=\"'[cdkDropList]'\"\n        [cdkDragDisabled]=\"!vm.isReorderable()\"\n        [cdkDragData]=\"item.id\"\n      ></li>\n    }\n  }\n}\n",
-			styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;background:var(--kirby-white-overlay-20);margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"]
+			styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;margin:var(--kirby-spacing-xxs) 0}li{margin-block-start:0!important}.cdk-drag-placeholder{opacity:0}:host.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition-property:transform;transition-duration:var(--kirby-transition-duration-short);transition-timing-function:var(--kirby-transition-easing-static);pointer-events:none}:host .cdk-drag:not(.cdk-drag-preview,.cdk-drag-placeholder){transition:none}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -1413,7 +1413,7 @@ var SidebarMenuLoaderComponent = class SidebarMenuLoaderComponent {
 			isStandalone: true,
 			selector: "kirby-x-sidebar-menu-loader",
 			ngImport: i0,
-			template: "<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n",
+			template: "<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n",
 			styles: [":host{display:flex;padding:0 var(--kirby-spacing-xxs, 8px);flex-direction:column;align-items:center;gap:var(--kirby-spacing-xxxs, 4px);flex:1 0 0;align-self:stretch}.skeleton-loader{height:var(--kirby-spacing-xl);align-self:stretch}\n"],
 			dependencies: [{
 				kind: "component",
@@ -1436,7 +1436,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "kirby-x-sidebar-menu-loader",
 			imports: [SkeletonLoaderComponent],
 			changeDetection: ChangeDetectionStrategy.Eager,
-			template: "<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n",
+			template: "<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n",
 			styles: [":host{display:flex;padding:0 var(--kirby-spacing-xxs, 8px);flex-direction:column;align-items:center;gap:var(--kirby-spacing-xxxs, 4px);flex:1 0 0;align-self:stretch}.skeleton-loader{height:var(--kirby-spacing-xl);align-self:stretch}\n"]
 		}]
 	}]

package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-extensions-angular-sidebar-menu.mjs","names":[],"sources":["../../sidebar-menu/src/directives/height-observer/height-observer.directive.ts","../../sidebar-menu/src/services/sidebar/sidebar.service.ts","../../sidebar-menu/src/components/sidebar-container/sidebar-container.component.ts","../../sidebar-menu/src/components/sidebar-container/sidebar-container.component.html","../../sidebar-menu/src/public-components/sidebar/sidebar.component.ts","../../sidebar-menu/src/public-components/sidebar-footer/sidebar-footer.component.ts","../../sidebar-menu/src/public-components/sidebar-header/sidebar-header.component.ts","../../sidebar-menu/src/functions/scroll-into-view-if-necessary/scroll-into-view-if-necessary.function.ts","../../sidebar-menu/src/components/menu-item/menu-item.component.ts","../../sidebar-menu/src/components/menu-item/menu-item.component.html","../../sidebar-menu/src/services/menu-state/menu-state.service.ts","../../sidebar-menu/src/components/menu-anchor-item/menu-anchor-item.component.ts","../../sidebar-menu/src/components/menu-anchor-item/menu-anchor-item.component.html","../../sidebar-menu/src/functions/ensure-in-view/ensure-in-view.function.ts","../../sidebar-menu/src/animations/drop-down.animation.ts","../../sidebar-menu/src/components/menu-submenu-item/menu-submenu-item.component.ts","../../sidebar-menu/src/components/menu-submenu-item/menu-submenu-item.component.html","../../sidebar-menu/src/components/menu-item-list/menu-item-list.component.ts","../../sidebar-menu/src/components/menu-item-list/menu-item-list.component.html","../../sidebar-menu/src/components/menu-container/menu-container.component.ts","../../sidebar-menu/src/public-components/sidebar-menu/sidebar-menu.component.ts","../../sidebar-menu/src/public-components/sidebar-menu-loader/sidebar-menu-loader.component.ts","../../sidebar-menu/src/public-components/sidebar-menu-loader/sidebar-menu-loader.component.html","../../sidebar-menu/src/sidebar.module.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, output } from '@angular/core';\nimport { debounceTime, Subject } from 'rxjs';\nimport { distinctUntilChanged } from 'rxjs/operators';\n\n@Directive({\n  selector: '[kirbyXHeightObserver]',\n})\nexport class HeightObserverDirective implements OnDestroy {\n  readonly heightChange = output<number>();\n\n  readonly #element = inject(ElementRef).nativeElement;\n  readonly #heightChanges = new Subject<number>();\n\n  readonly #observer = new ResizeObserver((entries) => {\n    this.#heightChanges.next(entries[0].contentRect.height);\n  });\n\n  constructor() {\n    this.#observer.observe(this.#element, { box: 'content-box' });\n    this.#heightChanges\n      .pipe(debounceTime(50), distinctUntilChanged())\n      .subscribe(this.heightChange.emit.bind(this.heightChange));\n  }\n\n  ngOnDestroy() {\n    this.#observer.unobserve(this.#element);\n    this.#observer.disconnect();\n  }\n}\n","import { computed, Injectable, Signal, signal } from '@angular/core';\n\n@Injectable({ providedIn: 'root' })\nexport class SidebarService {\n  readonly #menuHeight = signal<number>(0);\n  readonly #containerHeight = signal<number>(0);\n  readonly #scrollDistance = signal<number>(0);\n\n  readonly #scrollableDistance = computed(() =>\n    Math.max(0, this.#menuHeight() - this.#containerHeight())\n  );\n  readonly #hasScrollbar = computed(() => this.#scrollableDistance() > 0);\n  readonly #notAtBottom = computed(() => this.#scrollDistance() < this.#scrollableDistance());\n  readonly #showHeaderBottomBorder = computed(() => this.#scrollDistance() > 0);\n  readonly #showFooterTopBorder = computed(() => this.#hasScrollbar() && this.#notAtBottom());\n\n  get showHeaderBottomBorder(): Signal<boolean> {\n    return this.#showHeaderBottomBorder;\n  }\n\n  get showFooterTopBorder(): Signal<boolean> {\n    return this.#showFooterTopBorder;\n  }\n\n  set menuHeight(height: number) {\n    this.#menuHeight.set(height);\n  }\n\n  set containerHeight(height: number) {\n    this.#containerHeight.set(height);\n  }\n\n  set scrollDistance(distance: number) {\n    this.#scrollDistance.set(distance);\n  }\n}\n","import { ChangeDetectionStrategy, Component, inject, Signal } from '@angular/core';\nimport { CdkScrollable } from '@angular/cdk/overlay';\nimport { HeightObserverDirective } from '../../directives/height-observer';\nimport { SidebarService } from '../../services/sidebar';\n\ntype ViewModel = {\n  showHeaderBottomBorder: Signal<boolean>;\n  showFooterTopBorder: Signal<boolean>;\n  setContainerHeight: (height: number) => void;\n  setScroll: (scroll: Event) => void;\n};\n\n@Component({\n  selector: 'aside[kirby-x-sidebar-container]',\n  templateUrl: './sidebar-container.component.html',\n  styleUrls: ['./sidebar-container.component.scss'],\n  imports: [HeightObserverDirective, CdkScrollable],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarContainerComponent {\n  readonly #sidebarService = inject(SidebarService);\n\n  #setContainerHeight(height: number): void {\n    this.#sidebarService.containerHeight = height;\n  }\n\n  #setScrollDistance(event: Event): void {\n    const target = event.target as HTMLElement | null;\n    if (target) {\n      this.#sidebarService.scrollDistance = target.scrollTop;\n    }\n  }\n\n  readonly vm: ViewModel = {\n    showHeaderBottomBorder: this.#sidebarService.showHeaderBottomBorder,\n    showFooterTopBorder: this.#sidebarService.showFooterTopBorder,\n    setContainerHeight: this.#setContainerHeight.bind(this),\n    setScroll: this.#setScrollDistance.bind(this),\n  };\n}\n","<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n  <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n  kirbyXHeightObserver\n  class=\"sidebar-content\"\n  cdkScrollable\n  (scroll)=\"vm.setScroll($event)\"\n  (heightChange)=\"vm.setContainerHeight($event)\"\n>\n  <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n  <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SidebarContainerComponent } from '../../components/sidebar-container';\n\n@Component({\n  selector: 'kirby-x-sidebar',\n  template: `\n    <aside kirby-x-sidebar-container>\n      <ng-content select=\"kirby-x-sidebar-header\" slot=\"header\"></ng-content>\n      <ng-content slot=\"content\"></ng-content>\n      <ng-content select=\"kirby-x-sidebar-footer\" slot=\"footer\"></ng-content>\n    </aside>\n  `,\n  imports: [SidebarContainerComponent],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kirby-x-sidebar-footer',\n  template: '<footer><ng-content></ng-content></footer>',\n  styles: `\n    :host,\n    footer {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n    }\n\n    :host {\n      min-height: 80px;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarFooterComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kirby-x-sidebar-header',\n  template: `\n    <header>\n      <span class=\"sidebar-logo\"><ng-content select=\"[slot='logo']\"></ng-content></span>\n      <div class=\"action-bar\">\n        <ng-content select=\"[slot='action']\"></ng-content>\n      </div>\n    </header>\n  `,\n  styles: `\n    :host,\n    header {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n    }\n\n    :host::ng-deep [slot='logo'] {\n      display: inline-flex;\n    }\n\n    :host::ng-deep [slot='logo'] img,\n    :host::ng-deep img[slot='logo'] {\n      object-fit: contain;\n      max-width: 100%;\n      max-height: 100%;\n    }\n\n    .sidebar-logo {\n      display: flex;\n      align-items: center;\n      height: 50px;\n      margin: var(--kirby-spacing-l) var(--kirby-spacing-m);\n    }\n\n    .action-bar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      width: 100%;\n\n      &:has([slot='action']) {\n        padding: 0 var(--kirby-spacing-xs) var(--kirby-spacing-xs);\n      }\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarHeaderComponent {}\n","/**\n * the HTMLElement.scrollIntoViewIfNecessary is non-standard and not supported in all browsers (e.g. firefox),\n * so we implement a version based on standard\n */\nexport function scrollIntoViewIfNecessary(\n  scrollContainer: Element,\n  child: Element,\n  position: ScrollLogicalPosition = 'center'\n) {\n  const containerRect = scrollContainer.getBoundingClientRect();\n  const elementRect = child.getBoundingClientRect();\n  if (containerRect.top > elementRect.top || containerRect.bottom < elementRect.bottom) {\n    child.scrollIntoView({\n      behavior: 'instant',\n      block: position,\n      inline: position,\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { MenuItemSize } from '../../types';\n\n@Component({\n  selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]',\n  host: {\n    '[attr.id]': '\"item\" + id()',\n    '[class]': 'size()',\n  },\n  templateUrl: './menu-item.component.html',\n  styleUrls: ['./menu-item.component.scss'],\n  imports: [IconModule],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class MenuItemComponent {\n  readonly id = input.required<string>();\n  readonly size = input.required<MenuItemSize>();\n  readonly icon = input<string>();\n\n  readonly iconSize = computed(() => (this.size() === 'lg' ? 'sm' : 'xs'));\n}\n","<div class=\"menu-item-start {{ size() }}\">\n  @if (icon(); as icon) {\n    <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n  }\n</div>\n\n<div class=\"menu-item-content\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n  <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n","import { Injectable, Signal, signal } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\nimport { moveItemInArray } from '@angular/cdk/drag-drop';\nimport {\n  CheckEvent,\n  ExpandEvent,\n  SidebarMenuItem,\n  SidebarMenuItemReorderEvent,\n  SubmenuItem,\n} from '../../models';\n\n@Injectable({ providedIn: 'root' })\nexport class MenuStateService {\n  readonly #menuItems = signal<SidebarMenuItem[]>([]);\n  readonly #selectedItem = signal<string | undefined>(undefined);\n  readonly #expandedItems = signal<Set<string>>(new Set());\n  readonly #checkedItems = signal<Set<string>>(new Set());\n  readonly #autoCollapse = signal<boolean>(false);\n  readonly #animationsDisabled = signal<boolean>(false);\n  readonly #expandEvents = new Subject<ExpandEvent>();\n  readonly #checkEvents = new Subject<CheckEvent>();\n  readonly #reorderEvents = new Subject<SidebarMenuItemReorderEvent>();\n  readonly #selectEvents = new Subject<string>();\n\n  get menuItems(): Signal<SidebarMenuItem[]> {\n    return this.#menuItems.asReadonly();\n  }\n\n  set menuItems(items: SidebarMenuItem[]) {\n    this.#menuItems.set(items);\n  }\n\n  get selectedItem(): Signal<string | undefined> {\n    return this.#selectedItem.asReadonly();\n  }\n\n  set selectedItem(id: string) {\n    this.#selectedItem.set(id);\n  }\n\n  get expandedItems(): Signal<Set<string>> {\n    return this.#expandedItems.asReadonly();\n  }\n\n  set expandedItems(ids: Set<string>) {\n    this.#expandedItems.set(ids);\n  }\n\n  get checkedItems(): Signal<Set<string>> {\n    return this.#checkedItems.asReadonly();\n  }\n\n  set checkedItems(ids: Set<string>) {\n    this.#checkedItems.set(ids);\n  }\n\n  set autoCollapse(enabled: boolean) {\n    this.#autoCollapse.set(enabled);\n  }\n\n  get animationsDisabled(): Signal<boolean> {\n    return this.#animationsDisabled.asReadonly();\n  }\n\n  set animationsDisabled(disabled: boolean) {\n    this.#animationsDisabled.set(disabled);\n  }\n\n  get expandEvents(): Observable<ExpandEvent> {\n    return this.#expandEvents.asObservable();\n  }\n\n  get checkEvents(): Observable<CheckEvent> {\n    return this.#checkEvents.asObservable();\n  }\n\n  get reorderEvents(): Observable<SidebarMenuItemReorderEvent> {\n    return this.#reorderEvents.asObservable();\n  }\n\n  get selectEvents(): Observable<string> {\n    return this.#selectEvents.asObservable();\n  }\n\n  expandItem(id: string): void {\n    this.#expandEvents.next({ id, isExpanded: true });\n    if (this.#autoCollapse()) {\n      this.#expandedItems.set(this.#findAncestors(id));\n      return;\n    }\n    this.#expandedItems.update((items) => {\n      items.add(id);\n      return new Set(items);\n    });\n  }\n\n  collapseItem(id: string): void {\n    this.#expandEvents.next({ id, isExpanded: false });\n    this.#expandedItems.update((items) => {\n      items.delete(id);\n      return new Set(items);\n    });\n  }\n\n  checkItem(id: string): void {\n    this.#checkEvents.next({ id, isChecked: true });\n    this.#checkedItems.update((items) => {\n      items.add(id);\n      return new Set(items);\n    });\n  }\n\n  uncheckItem(id: string): void {\n    this.#checkEvents.next({ id, isChecked: false });\n    this.#checkedItems.update((items) => {\n      items.delete(id);\n      return new Set(items);\n    });\n  }\n\n  selectItem(id: string): void {\n    this.#selectEvents.next(id);\n    this.#selectedItem.set(id);\n  }\n\n  #findAncestors(id: string): Set<string> {\n    return recursivelyFindAncestors(this.#menuItems(), id) ?? new Set();\n  }\n\n  reorderItems(\n    submenu: SubmenuItem,\n    itemId: string,\n    previousIndex: number,\n    currentIndex: number\n  ): void {\n    moveItemInArray(submenu.children, previousIndex, currentIndex);\n    this.#reorderEvents.next({\n      parentId: submenu.id,\n      itemId,\n      previousIndex,\n      currentIndex,\n      reorderedItemIds: submenu.children.map((item) => item.id),\n    });\n    this.#menuItems.update((items) => [...items]);\n  }\n}\n\nfunction recursivelyFindAncestors(items: SidebarMenuItem[], id: string): Set<string> | undefined {\n  for (const item of items) {\n    if (item.id === id) {\n      return new Set([item.id]);\n    }\n    if (item.type === 'submenu') {\n      const foundAncestors = recursivelyFindAncestors(item.children, id);\n      if (foundAncestors) {\n        foundAncestors.add(item.id);\n        return foundAncestors;\n      }\n    }\n  }\n  return undefined;\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input, Signal } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { ToggleButtonComponent } from '@kirbydesign/designsystem/toggle-button';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ActionItem, ExternalLinkItem, RouterLinkItem } from '../../models';\nimport { MenuItemSize } from '../../types';\nimport { MenuItemComponent } from '../menu-item';\nimport { MenuStateService } from '../../services/menu-state';\n\ntype ViewModel = {\n  item: Signal<ActionItem | RouterLinkItem | ExternalLinkItem>;\n  size: Signal<MenuItemSize>;\n  isSelected: Signal<boolean>;\n  isChecked: Signal<boolean>;\n  selectItem: () => void;\n  checkItem: (checked: boolean) => void;\n};\n\n@Component({\n  selector: 'li[kirby-x-menu-anchor-item]',\n  templateUrl: './menu-anchor-item.component.html',\n  styleUrls: ['./menu-anchor-item.component.scss'],\n  host: {\n    '[class.selected]': 'vm.isSelected()',\n    '[class.has-toggle]': '!!vm.item().toggle',\n    '[class.has-badge]': '!!vm.item().badge',\n  },\n  imports: [\n    MenuItemComponent,\n    RouterLink,\n    ToggleButtonComponent,\n    ButtonComponent,\n    IconComponent,\n    BadgeComponent,\n  ],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class MenuAnchorItemComponent {\n  readonly item = input.required<ActionItem | RouterLinkItem | ExternalLinkItem>();\n  readonly size = input.required<MenuItemSize>();\n\n  readonly #stateService = inject(MenuStateService);\n\n  readonly #isSelected = computed(() => this.item().id === this.#stateService.selectedItem());\n  readonly #isChecked = computed(() => {\n    const id = this.item().id;\n    const checkedItems = this.#stateService.checkedItems();\n    return checkedItems.has(id);\n  });\n\n  #selectItem(): void {\n    this.#stateService.selectItem(this.item().id);\n  }\n\n  #checkItem(checked: boolean): void {\n    if (checked) {\n      this.#stateService.checkItem(this.item().id);\n    } else {\n      this.#stateService.uncheckItem(this.item().id);\n    }\n  }\n\n  readonly vm: ViewModel = {\n    item: this.item,\n    size: this.size,\n    isSelected: this.#isSelected,\n    isChecked: this.#isChecked,\n    selectItem: this.#selectItem.bind(this),\n    checkItem: this.#checkItem.bind(this),\n  };\n}\n","@let item = vm.item();\n@switch (item.type) {\n  @case ('action') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [attr.href]=\"item.href\"\n      (click)=\"$event.preventDefault(); vm.selectItem()\"\n      (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      @if (item.isLink) {\n        <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n      }\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n  @case ('router-link') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [routerLink]=\"item.route\"\n      [queryParams]=\"item.queryParams\"\n      [skipLocationChange]=\"item.skipLocationChange\"\n      [replaceUrl]=\"item.replaceUrl\"\n      (click)=\"vm.selectItem()\"\n      (keydown.enter)=\"vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n  @case ('external-link') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [attr.href]=\"item.url\"\n      [attr.target]=\"item.target\"\n      (click)=\"vm.selectItem()\"\n      (keydown.enter)=\"vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n}\n\n@if (item.toggle) {\n  <kirby-toggle-button\n    class=\"toggle-button-wrapper\"\n    [checked]=\"vm.isChecked()\"\n    (checkChanged)=\"vm.checkItem($event)\"\n  >\n    <button\n      kirby-button\n      unchecked\n      size=\"xs\"\n      attentionLevel=\"3\"\n      tabindex=\"-1\"\n      [noDecoration]=\"true\"\n      class=\"toggle-button\"\n    >\n      <kirby-icon size=\"xs\" [name]=\"item.toggle.uncheckedIcon\"></kirby-icon>\n    </button>\n    <button\n      kirby-button\n      checked\n      size=\"xs\"\n      attentionLevel=\"3\"\n      tabindex=\"-1\"\n      [noDecoration]=\"true\"\n      class=\"toggle-button\"\n    >\n      <kirby-icon size=\"xs\" [name]=\"item.toggle.checkedIcon\"></kirby-icon>\n    </button>\n  </kirby-toggle-button>\n}\n","import { scrollIntoViewIfNecessary } from '../scroll-into-view-if-necessary';\n\n/**\n * Ensures the element top is not smaller than the scroll container top.\n */\nexport function ensureInView(scrollContainer: Element, element: Element, durationMs: number): void {\n  let startTime: number | null = null;\n\n  const updatePosition = (timestamp: number) => {\n    if (!startTime) {\n      startTime = timestamp;\n    }\n\n    const elapsedTime = timestamp - startTime;\n\n    if (elapsedTime < durationMs) {\n      scrollIntoViewIfNecessary(scrollContainer, element, 'start');\n      requestAnimationFrame(updatePosition);\n    }\n  };\n\n  requestAnimationFrame(updatePosition);\n}\n","import { animate, AUTO_STYLE, style, transition, trigger } from '@angular/animations';\n\nexport const DropDownAnimation = trigger('dropDownMenu', [\n  transition(':enter', [\n    style({ height: 0, overflow: 'hidden' }),\n    animate('300ms ease', style({ height: AUTO_STYLE })),\n  ]),\n\n  transition(':leave', [\n    style({ height: AUTO_STYLE, overflow: 'hidden' }),\n    animate('300ms ease', style({ height: 0 })),\n  ]),\n]);\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  Signal,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';\nimport { SubmenuItem } from '../../models';\nimport { MenuItemComponent } from '../menu-item';\nimport { MenuItemSize } from '../../types';\nimport { MenuItemListComponent } from '../menu-item-list';\nimport { MenuStateService } from '../../services/menu-state';\nimport { ensureInView } from '../../functions/ensure-in-view';\nimport { DropDownAnimation } from '../../animations';\n\ntype ViewModel = {\n  item: Signal<SubmenuItem>;\n  size: Signal<MenuItemSize>;\n  isExpanded: Signal<boolean>;\n  submenuId: Signal<string>;\n  submenuSize: Signal<MenuItemSize>;\n  animationsDisabled: Signal<boolean>;\n  toggleSubmenu: () => void;\n  reorderItem: (event: CdkDragDrop<string[]>) => void;\n};\n\n@Component({\n  selector: 'li[kirby-x-menu-submenu-item]',\n  templateUrl: './menu-submenu-item.component.html',\n  styleUrls: ['./menu-submenu-item.component.scss'],\n  animations: [DropDownAnimation],\n  imports: [MenuItemComponent, IconComponent, forwardRef(() => MenuItemListComponent), CdkDropList],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class MenuSubmenuItemComponent {\n  readonly item = input.required<SubmenuItem>();\n  readonly size = input.required<MenuItemSize>();\n\n  readonly #element = inject(ElementRef).nativeElement as Element;\n  readonly #stateService = inject(MenuStateService);\n\n  readonly #isExpanded = computed(() => {\n    const id = this.item().id;\n    const expandedItems = this.#stateService.expandedItems();\n    return expandedItems.has(id);\n  });\n  readonly #submenuSize = computed(() => {\n    switch (this.size()) {\n      case 'lg':\n        return 'md';\n      case 'md':\n        return 'sm';\n      default:\n        return 'xs';\n    }\n  });\n\n  #toggleSubmenu(): void {\n    const button = this.#element.querySelector('button[kirby-x-menu-item]');\n    const scrollContainer = this.#element.closest('.sidebar-content');\n    if (button && scrollContainer) {\n      ensureInView(scrollContainer, button, 400);\n    }\n    if (this.#isExpanded()) {\n      this.#stateService.collapseItem(this.item().id);\n    } else {\n      this.#stateService.expandItem(this.item().id);\n    }\n  }\n\n  #reorderItem(event: CdkDragDrop<string[]>): void {\n    this.#stateService.reorderItems(\n      this.item(),\n      event.item.data,\n      event.previousIndex,\n      event.currentIndex\n    );\n  }\n\n  readonly vm: ViewModel = {\n    item: this.item,\n    size: this.size,\n    isExpanded: this.#isExpanded,\n    submenuId: computed(() => `item-${this.item().id}-content`),\n    submenuSize: this.#submenuSize,\n    animationsDisabled: this.#stateService.animationsDisabled,\n    toggleSubmenu: this.#toggleSubmenu.bind(this),\n    reorderItem: this.#reorderItem.bind(this),\n  };\n}\n","@let item = vm.item();\n<button\n  kirby-x-menu-item\n  type=\"button\"\n  class=\"submenu-toggle\"\n  [size]=\"vm.size()\"\n  [id]=\"item.id\"\n  [icon]=\"item.icon\"\n  [attr.aria-controls]=\"vm.submenuId()\"\n  [attr.aria-expanded]=\"vm.isExpanded()\"\n  (click)=\"vm.toggleSubmenu()\"\n>\n  {{ item.title }}\n  <kirby-icon\n    slot=\"end\"\n    name=\"arrow-more\"\n    class=\"disclosure\"\n    [class.rotate]=\"vm.isExpanded()\"\n  ></kirby-icon>\n</button>\n@if (vm.isExpanded()) {\n  <ul\n    kirby-x-menu-item-list\n    [items]=\"item.children\"\n    [size]=\"vm.submenuSize()\"\n    [id]=\"vm.submenuId()\"\n    [@dropDownMenu]\n    [@.disabled]=\"vm.animationsDisabled()\"\n    cdkDropList\n    (cdkDropListDropped)=\"vm.reorderItem($event)\"\n    [isReorderable]=\"item.isReorderable ?? false\"\n  ></ul>\n}\n","import { ChangeDetectionStrategy, Component, forwardRef, input, Signal } from '@angular/core';\nimport { DividerComponent } from '@kirbydesign/designsystem/divider';\nimport { CdkDrag } from '@angular/cdk/drag-drop';\nimport { SidebarMenuItem } from '../../models';\nimport { MenuAnchorItemComponent } from '../menu-anchor-item';\nimport { MenuSubmenuItemComponent } from '../menu-submenu-item';\nimport { MenuItemSize } from '../../types';\n\ntype ViewModel = {\n  id: Signal<string | undefined>;\n  size: Signal<MenuItemSize>;\n  items: Signal<SidebarMenuItem[]>;\n  isReorderable: Signal<boolean>;\n};\n\n@Component({\n  selector: 'ul[kirby-x-menu-item-list]',\n  templateUrl: './menu-item-list.component.html',\n  styleUrls: ['./menu-item-list.component.scss'],\n  host: {\n    '[attr.id]': 'vm.id()',\n    '[class]': 'vm.size()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DividerComponent,\n    MenuAnchorItemComponent,\n    forwardRef(() => MenuSubmenuItemComponent),\n    CdkDrag,\n  ],\n})\nexport class MenuItemListComponent {\n  readonly items = input.required<SidebarMenuItem[]>();\n  readonly size = input<MenuItemSize>('lg');\n  readonly id = input<string>();\n  readonly isReorderable = input<boolean>(false);\n\n  readonly vm: ViewModel = {\n    id: this.id,\n    size: this.size,\n    items: this.items,\n    isReorderable: this.isReorderable,\n  };\n}\n","@for (item of vm.items(); track item.id) {\n  @switch (item.type) {\n    @case ('divider') {\n      <kirby-divider aria-hidden=\"true\"></kirby-divider>\n    }\n    @case ('submenu') {\n      <li\n        kirby-x-menu-submenu-item\n        [item]=\"item\"\n        [size]=\"vm.size()\"\n        cdkDrag\n        cdkDragPreviewContainer=\"parent\"\n        [cdkDragBoundary]=\"'[cdkDropList]'\"\n        [cdkDragDisabled]=\"!vm.isReorderable()\"\n        [cdkDragData]=\"item.id\"\n      ></li>\n    }\n    @default {\n      <li\n        kirby-x-menu-anchor-item\n        [item]=\"item\"\n        [size]=\"vm.size()\"\n        cdkDrag\n        cdkDragPreviewContainer=\"parent\"\n        [cdkDragBoundary]=\"'[cdkDropList]'\"\n        [cdkDragDisabled]=\"!vm.isReorderable()\"\n        [cdkDragData]=\"item.id\"\n      ></li>\n    }\n  }\n}\n","import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  Signal,\n} from '@angular/core';\n\nimport { scrollIntoViewIfNecessary } from '../../functions/scroll-into-view-if-necessary';\nimport { SidebarMenuItem } from '../../models';\nimport { MenuItemListComponent } from '../menu-item-list';\nimport { MenuStateService } from '../../services/menu-state';\n\ntype ViewModel = {\n  items: Signal<SidebarMenuItem[]>;\n};\n\n@Component({\n  selector: 'kirby-x-menu-container',\n  template: `\n    <nav aria-label=\"Sidebar Menu\">\n      <ul kirby-x-menu-item-list [items]=\"vm.items()\"></ul>\n    </nav>\n  `,\n  styles: 'nav { padding: 0 var(--kirby-spacing-xxs); }',\n  imports: [MenuItemListComponent],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class MenuContainerComponent {\n  readonly #element = inject(ElementRef).nativeElement;\n  readonly #stateService = inject(MenuStateService);\n\n  constructor() {\n    this.#stateService.animationsDisabled = true;\n    afterNextRender({\n      read: () => {\n        this.#scrollSelectedItemIntoView();\n        this.#stateService.animationsDisabled = false;\n      },\n    });\n  }\n\n  #scrollSelectedItemIntoView() {\n    const selectedItem = this.#element.querySelector('li.selected');\n    const scrollContainer = this.#element.closest('.sidebar-content');\n    if (selectedItem && scrollContainer) {\n      scrollIntoViewIfNecessary(scrollContainer, selectedItem);\n    }\n  }\n\n  readonly vm: ViewModel = {\n    items: this.#stateService.menuItems,\n  };\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  EventEmitter,\n  inject,\n  Input,\n  Output,\n} from '@angular/core';\nimport { MenuContainerComponent } from '../../components/menu-container';\nimport { HeightObserverDirective } from '../../directives/height-observer';\nimport { SidebarService } from '../../services/sidebar';\nimport { MenuStateService } from '../../services/menu-state';\nimport { SidebarMenuItem } from '../../models';\n\n@Component({\n  selector: 'kirby-x-sidebar-menu',\n  template: `\n    <kirby-x-menu-container\n      kirbyXHeightObserver\n      (heightChange)=\"setMenuHeight($event)\"\n    ></kirby-x-menu-container>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    }\n  `,\n  imports: [MenuContainerComponent, HeightObserverDirective],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarMenuComponent {\n  readonly #sidebarService = inject(SidebarService);\n  readonly #stateService = inject(MenuStateService);\n\n  @Input()\n  set menuItems(menuItems: SidebarMenuItem[]) {\n    this.#stateService.menuItems = menuItems;\n  }\n\n  @Input()\n  set selectedItem(value: string) {\n    this.#stateService.selectedItem = value;\n  }\n\n  @Input()\n  set expandedItems(value: Set<string>) {\n    this.#stateService.expandedItems = value;\n  }\n\n  @Input()\n  set checkedItems(value: Set<string>) {\n    this.#stateService.checkedItems = value;\n  }\n\n  @Input()\n  set autoCollapse(value: boolean) {\n    this.#stateService.autoCollapse = value;\n  }\n\n  setMenuHeight(height: number): void {\n    this.#sidebarService.menuHeight = height;\n  }\n\n  @Output() menuItemsChange = new EventEmitter<SidebarMenuItem[]>();\n  @Output() selectedItemChange = new EventEmitter<string>();\n  @Output() expandedItemsChange = new EventEmitter<Set<string>>();\n  @Output() checkedItemsChange = new EventEmitter<Set<string>>();\n  @Output() expandChange = this.#stateService.expandEvents;\n  @Output() checkChange = this.#stateService.checkEvents;\n  @Output() itemReorder = this.#stateService.reorderEvents;\n  @Output() itemSelect = this.#stateService.selectEvents;\n\n  constructor() {\n    effect(() => this.menuItemsChange.emit(this.#stateService.menuItems()));\n    effect(() => this.selectedItemChange.emit(this.#stateService.selectedItem()));\n    effect(() => this.expandedItemsChange.emit(this.#stateService.expandedItems()));\n    effect(() => this.checkedItemsChange.emit(this.#stateService.checkedItems()));\n  }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkeletonLoaderComponent } from '@kirbydesign/extensions-angular/skeleton-loader';\n\n@Component({\n  selector: 'kirby-x-sidebar-menu-loader',\n  templateUrl: './sidebar-menu-loader.component.html',\n  styleUrl: './sidebar-menu-loader.component.scss',\n  imports: [SkeletonLoaderComponent],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarMenuLoaderComponent {}\n","<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader theme=\"dark\" class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n","import { NgModule } from '@angular/core';\nimport { SidebarComponent } from './public-components/sidebar';\nimport { SidebarFooterComponent } from './public-components/sidebar-footer';\nimport { SidebarHeaderComponent } from './public-components/sidebar-header';\n\n@NgModule({\n  imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],\n  exports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],\n})\nexport class SidebarModule {}\n"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-extensions-angular-sidebar-menu.mjs","names":[],"sources":["../../sidebar-menu/src/directives/height-observer/height-observer.directive.ts","../../sidebar-menu/src/services/sidebar/sidebar.service.ts","../../sidebar-menu/src/components/sidebar-container/sidebar-container.component.ts","../../sidebar-menu/src/components/sidebar-container/sidebar-container.component.html","../../sidebar-menu/src/public-components/sidebar/sidebar.component.ts","../../sidebar-menu/src/public-components/sidebar-footer/sidebar-footer.component.ts","../../sidebar-menu/src/public-components/sidebar-header/sidebar-header.component.ts","../../sidebar-menu/src/functions/scroll-into-view-if-necessary/scroll-into-view-if-necessary.function.ts","../../sidebar-menu/src/components/menu-item/menu-item.component.ts","../../sidebar-menu/src/components/menu-item/menu-item.component.html","../../sidebar-menu/src/services/menu-state/menu-state.service.ts","../../sidebar-menu/src/components/menu-anchor-item/menu-anchor-item.component.ts","../../sidebar-menu/src/components/menu-anchor-item/menu-anchor-item.component.html","../../sidebar-menu/src/functions/ensure-in-view/ensure-in-view.function.ts","../../sidebar-menu/src/animations/drop-down.animation.ts","../../sidebar-menu/src/components/menu-submenu-item/menu-submenu-item.component.ts","../../sidebar-menu/src/components/menu-submenu-item/menu-submenu-item.component.html","../../sidebar-menu/src/components/menu-item-list/menu-item-list.component.ts","../../sidebar-menu/src/components/menu-item-list/menu-item-list.component.html","../../sidebar-menu/src/components/menu-container/menu-container.component.ts","../../sidebar-menu/src/public-components/sidebar-menu/sidebar-menu.component.ts","../../sidebar-menu/src/public-components/sidebar-menu-loader/sidebar-menu-loader.component.ts","../../sidebar-menu/src/public-components/sidebar-menu-loader/sidebar-menu-loader.component.html","../../sidebar-menu/src/sidebar.module.ts"],"sourcesContent":["import { Directive, ElementRef, inject, OnDestroy, output } from '@angular/core';\nimport { debounceTime, Subject } from 'rxjs';\nimport { distinctUntilChanged } from 'rxjs/operators';\n\n@Directive({\n  selector: '[kirbyXHeightObserver]',\n})\nexport class HeightObserverDirective implements OnDestroy {\n  readonly heightChange = output<number>();\n\n  readonly #element = inject(ElementRef).nativeElement;\n  readonly #heightChanges = new Subject<number>();\n\n  readonly #observer = new ResizeObserver((entries) => {\n    this.#heightChanges.next(entries[0].contentRect.height);\n  });\n\n  constructor() {\n    this.#observer.observe(this.#element, { box: 'content-box' });\n    this.#heightChanges\n      .pipe(debounceTime(50), distinctUntilChanged())\n      .subscribe(this.heightChange.emit.bind(this.heightChange));\n  }\n\n  ngOnDestroy() {\n    this.#observer.unobserve(this.#element);\n    this.#observer.disconnect();\n  }\n}\n","import { computed, Injectable, Signal, signal } from '@angular/core';\n\n@Injectable({ providedIn: 'root' })\nexport class SidebarService {\n  readonly #menuHeight = signal<number>(0);\n  readonly #containerHeight = signal<number>(0);\n  readonly #scrollDistance = signal<number>(0);\n\n  readonly #scrollableDistance = computed(() =>\n    Math.max(0, this.#menuHeight() - this.#containerHeight())\n  );\n  readonly #hasScrollbar = computed(() => this.#scrollableDistance() > 0);\n  readonly #notAtBottom = computed(() => this.#scrollDistance() < this.#scrollableDistance());\n  readonly #showHeaderBottomBorder = computed(() => this.#scrollDistance() > 0);\n  readonly #showFooterTopBorder = computed(() => this.#hasScrollbar() && this.#notAtBottom());\n\n  get showHeaderBottomBorder(): Signal<boolean> {\n    return this.#showHeaderBottomBorder;\n  }\n\n  get showFooterTopBorder(): Signal<boolean> {\n    return this.#showFooterTopBorder;\n  }\n\n  set menuHeight(height: number) {\n    this.#menuHeight.set(height);\n  }\n\n  set containerHeight(height: number) {\n    this.#containerHeight.set(height);\n  }\n\n  set scrollDistance(distance: number) {\n    this.#scrollDistance.set(distance);\n  }\n}\n","import { ChangeDetectionStrategy, Component, inject, Signal } from '@angular/core';\nimport { CdkScrollable } from '@angular/cdk/overlay';\nimport { HeightObserverDirective } from '../../directives/height-observer';\nimport { SidebarService } from '../../services/sidebar';\n\ntype ViewModel = {\n  showHeaderBottomBorder: Signal<boolean>;\n  showFooterTopBorder: Signal<boolean>;\n  setContainerHeight: (height: number) => void;\n  setScroll: (scroll: Event) => void;\n};\n\n@Component({\n  selector: 'aside[kirby-x-sidebar-container]',\n  templateUrl: './sidebar-container.component.html',\n  styleUrls: ['./sidebar-container.component.scss'],\n  imports: [HeightObserverDirective, CdkScrollable],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarContainerComponent {\n  readonly #sidebarService = inject(SidebarService);\n\n  #setContainerHeight(height: number): void {\n    this.#sidebarService.containerHeight = height;\n  }\n\n  #setScrollDistance(event: Event): void {\n    const target = event.target as HTMLElement | null;\n    if (target) {\n      this.#sidebarService.scrollDistance = target.scrollTop;\n    }\n  }\n\n  readonly vm: ViewModel = {\n    showHeaderBottomBorder: this.#sidebarService.showHeaderBottomBorder,\n    showFooterTopBorder: this.#sidebarService.showFooterTopBorder,\n    setContainerHeight: this.#setContainerHeight.bind(this),\n    setScroll: this.#setScrollDistance.bind(this),\n  };\n}\n","<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n  <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n  kirbyXHeightObserver\n  class=\"sidebar-content\"\n  cdkScrollable\n  (scroll)=\"vm.setScroll($event)\"\n  (heightChange)=\"vm.setContainerHeight($event)\"\n>\n  <ng-content select=\"[slot='content']\"></ng-content>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n  <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SidebarContainerComponent } from '../../components/sidebar-container';\n\n@Component({\n  selector: 'kirby-x-sidebar',\n  template: `\n    <aside kirby-x-sidebar-container class=\"kirby-surface-brand\">\n      <ng-content select=\"kirby-x-sidebar-header\" slot=\"header\"></ng-content>\n      <ng-content slot=\"content\"></ng-content>\n      <ng-content select=\"kirby-x-sidebar-footer\" slot=\"footer\"></ng-content>\n    </aside>\n  `,\n  imports: [SidebarContainerComponent],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kirby-x-sidebar-footer',\n  template: '<footer><ng-content></ng-content></footer>',\n  styles: `\n    :host,\n    footer {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n    }\n\n    :host {\n      min-height: 80px;\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarFooterComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'kirby-x-sidebar-header',\n  template: `\n    <header>\n      <span class=\"sidebar-logo\"><ng-content select=\"[slot='logo']\"></ng-content></span>\n      <div class=\"action-bar\">\n        <ng-content select=\"[slot='action']\"></ng-content>\n      </div>\n    </header>\n  `,\n  styles: `\n    :host,\n    header {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n    }\n\n    :host::ng-deep [slot='logo'] {\n      display: inline-flex;\n    }\n\n    :host::ng-deep [slot='logo'] img,\n    :host::ng-deep img[slot='logo'] {\n      object-fit: contain;\n      max-width: 100%;\n      max-height: 100%;\n    }\n\n    .sidebar-logo {\n      display: flex;\n      align-items: center;\n      height: 50px;\n      margin: var(--kirby-spacing-l) var(--kirby-spacing-m);\n    }\n\n    .action-bar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      width: 100%;\n\n      &:has([slot='action']) {\n        padding: 0 var(--kirby-spacing-xs) var(--kirby-spacing-xs);\n      }\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarHeaderComponent {}\n","/**\n * the HTMLElement.scrollIntoViewIfNecessary is non-standard and not supported in all browsers (e.g. firefox),\n * so we implement a version based on standard\n */\nexport function scrollIntoViewIfNecessary(\n  scrollContainer: Element,\n  child: Element,\n  position: ScrollLogicalPosition = 'center'\n) {\n  const containerRect = scrollContainer.getBoundingClientRect();\n  const elementRect = child.getBoundingClientRect();\n  if (containerRect.top > elementRect.top || containerRect.bottom < elementRect.bottom) {\n    child.scrollIntoView({\n      behavior: 'instant',\n      block: position,\n      inline: position,\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { MenuItemSize } from '../../types';\n\n@Component({\n  selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]',\n  host: {\n    '[attr.id]': '\"item\" + id()',\n    '[class]': 'size()',\n  },\n  templateUrl: './menu-item.component.html',\n  styleUrls: ['./menu-item.component.scss'],\n  imports: [IconModule],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class MenuItemComponent {\n  readonly id = input.required<string>();\n  readonly size = input.required<MenuItemSize>();\n  readonly icon = input<string>();\n\n  readonly iconSize = computed(() => (this.size() === 'lg' ? 'sm' : 'xs'));\n}\n","<div class=\"menu-item-start {{ size() }}\">\n  @if (icon(); as icon) {\n    <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n  }\n</div>\n\n<div class=\"menu-item-content\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n  <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n","import { Injectable, Signal, signal } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\nimport { moveItemInArray } from '@angular/cdk/drag-drop';\nimport {\n  CheckEvent,\n  ExpandEvent,\n  SidebarMenuItem,\n  SidebarMenuItemReorderEvent,\n  SubmenuItem,\n} from '../../models';\n\n@Injectable({ providedIn: 'root' })\nexport class MenuStateService {\n  readonly #menuItems = signal<SidebarMenuItem[]>([]);\n  readonly #selectedItem = signal<string | undefined>(undefined);\n  readonly #expandedItems = signal<Set<string>>(new Set());\n  readonly #checkedItems = signal<Set<string>>(new Set());\n  readonly #autoCollapse = signal<boolean>(false);\n  readonly #animationsDisabled = signal<boolean>(false);\n  readonly #expandEvents = new Subject<ExpandEvent>();\n  readonly #checkEvents = new Subject<CheckEvent>();\n  readonly #reorderEvents = new Subject<SidebarMenuItemReorderEvent>();\n  readonly #selectEvents = new Subject<string>();\n\n  get menuItems(): Signal<SidebarMenuItem[]> {\n    return this.#menuItems.asReadonly();\n  }\n\n  set menuItems(items: SidebarMenuItem[]) {\n    this.#menuItems.set(items);\n  }\n\n  get selectedItem(): Signal<string | undefined> {\n    return this.#selectedItem.asReadonly();\n  }\n\n  set selectedItem(id: string) {\n    this.#selectedItem.set(id);\n  }\n\n  get expandedItems(): Signal<Set<string>> {\n    return this.#expandedItems.asReadonly();\n  }\n\n  set expandedItems(ids: Set<string>) {\n    this.#expandedItems.set(ids);\n  }\n\n  get checkedItems(): Signal<Set<string>> {\n    return this.#checkedItems.asReadonly();\n  }\n\n  set checkedItems(ids: Set<string>) {\n    this.#checkedItems.set(ids);\n  }\n\n  set autoCollapse(enabled: boolean) {\n    this.#autoCollapse.set(enabled);\n  }\n\n  get animationsDisabled(): Signal<boolean> {\n    return this.#animationsDisabled.asReadonly();\n  }\n\n  set animationsDisabled(disabled: boolean) {\n    this.#animationsDisabled.set(disabled);\n  }\n\n  get expandEvents(): Observable<ExpandEvent> {\n    return this.#expandEvents.asObservable();\n  }\n\n  get checkEvents(): Observable<CheckEvent> {\n    return this.#checkEvents.asObservable();\n  }\n\n  get reorderEvents(): Observable<SidebarMenuItemReorderEvent> {\n    return this.#reorderEvents.asObservable();\n  }\n\n  get selectEvents(): Observable<string> {\n    return this.#selectEvents.asObservable();\n  }\n\n  expandItem(id: string): void {\n    this.#expandEvents.next({ id, isExpanded: true });\n    if (this.#autoCollapse()) {\n      this.#expandedItems.set(this.#findAncestors(id));\n      return;\n    }\n    this.#expandedItems.update((items) => {\n      items.add(id);\n      return new Set(items);\n    });\n  }\n\n  collapseItem(id: string): void {\n    this.#expandEvents.next({ id, isExpanded: false });\n    this.#expandedItems.update((items) => {\n      items.delete(id);\n      return new Set(items);\n    });\n  }\n\n  checkItem(id: string): void {\n    this.#checkEvents.next({ id, isChecked: true });\n    this.#checkedItems.update((items) => {\n      items.add(id);\n      return new Set(items);\n    });\n  }\n\n  uncheckItem(id: string): void {\n    this.#checkEvents.next({ id, isChecked: false });\n    this.#checkedItems.update((items) => {\n      items.delete(id);\n      return new Set(items);\n    });\n  }\n\n  selectItem(id: string): void {\n    this.#selectEvents.next(id);\n    this.#selectedItem.set(id);\n  }\n\n  #findAncestors(id: string): Set<string> {\n    return recursivelyFindAncestors(this.#menuItems(), id) ?? new Set();\n  }\n\n  reorderItems(\n    submenu: SubmenuItem,\n    itemId: string,\n    previousIndex: number,\n    currentIndex: number\n  ): void {\n    moveItemInArray(submenu.children, previousIndex, currentIndex);\n    this.#reorderEvents.next({\n      parentId: submenu.id,\n      itemId,\n      previousIndex,\n      currentIndex,\n      reorderedItemIds: submenu.children.map((item) => item.id),\n    });\n    this.#menuItems.update((items) => [...items]);\n  }\n}\n\nfunction recursivelyFindAncestors(items: SidebarMenuItem[], id: string): Set<string> | undefined {\n  for (const item of items) {\n    if (item.id === id) {\n      return new Set([item.id]);\n    }\n    if (item.type === 'submenu') {\n      const foundAncestors = recursivelyFindAncestors(item.children, id);\n      if (foundAncestors) {\n        foundAncestors.add(item.id);\n        return foundAncestors;\n      }\n    }\n  }\n  return undefined;\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input, Signal } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { ToggleButtonComponent } from '@kirbydesign/designsystem/toggle-button';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { BadgeComponent } from '@kirbydesign/designsystem/badge';\nimport { ActionItem, ExternalLinkItem, RouterLinkItem } from '../../models';\nimport { MenuItemSize } from '../../types';\nimport { MenuItemComponent } from '../menu-item';\nimport { MenuStateService } from '../../services/menu-state';\n\ntype ViewModel = {\n  item: Signal<ActionItem | RouterLinkItem | ExternalLinkItem>;\n  size: Signal<MenuItemSize>;\n  isSelected: Signal<boolean>;\n  isChecked: Signal<boolean>;\n  selectItem: () => void;\n  checkItem: (checked: boolean) => void;\n};\n\n@Component({\n  selector: 'li[kirby-x-menu-anchor-item]',\n  templateUrl: './menu-anchor-item.component.html',\n  styleUrls: ['./menu-anchor-item.component.scss'],\n  host: {\n    '[class.selected]': 'vm.isSelected()',\n    '[class.has-toggle]': '!!vm.item().toggle',\n    '[class.has-badge]': '!!vm.item().badge',\n  },\n  imports: [\n    MenuItemComponent,\n    RouterLink,\n    ToggleButtonComponent,\n    ButtonComponent,\n    IconComponent,\n    BadgeComponent,\n  ],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class MenuAnchorItemComponent {\n  readonly item = input.required<ActionItem | RouterLinkItem | ExternalLinkItem>();\n  readonly size = input.required<MenuItemSize>();\n\n  readonly #stateService = inject(MenuStateService);\n\n  readonly #isSelected = computed(() => this.item().id === this.#stateService.selectedItem());\n  readonly #isChecked = computed(() => {\n    const id = this.item().id;\n    const checkedItems = this.#stateService.checkedItems();\n    return checkedItems.has(id);\n  });\n\n  #selectItem(): void {\n    this.#stateService.selectItem(this.item().id);\n  }\n\n  #checkItem(checked: boolean): void {\n    if (checked) {\n      this.#stateService.checkItem(this.item().id);\n    } else {\n      this.#stateService.uncheckItem(this.item().id);\n    }\n  }\n\n  readonly vm: ViewModel = {\n    item: this.item,\n    size: this.size,\n    isSelected: this.#isSelected,\n    isChecked: this.#isChecked,\n    selectItem: this.#selectItem.bind(this),\n    checkItem: this.#checkItem.bind(this),\n  };\n}\n","@let item = vm.item();\n@switch (item.type) {\n  @case ('action') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [attr.href]=\"item.href\"\n      (click)=\"$event.preventDefault(); vm.selectItem()\"\n      (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      @if (item.isLink) {\n        <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n      }\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n  @case ('router-link') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [routerLink]=\"item.route\"\n      [queryParams]=\"item.queryParams\"\n      [skipLocationChange]=\"item.skipLocationChange\"\n      [replaceUrl]=\"item.replaceUrl\"\n      (click)=\"vm.selectItem()\"\n      (keydown.enter)=\"vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n  @case ('external-link') {\n    <a\n      kirby-x-menu-item\n      [class.selected]=\"vm.isSelected()\"\n      [size]=\"vm.size()\"\n      [id]=\"item.id\"\n      [icon]=\"item.icon\"\n      [attr.href]=\"item.url\"\n      [attr.target]=\"item.target\"\n      (click)=\"vm.selectItem()\"\n      (keydown.enter)=\"vm.selectItem()\"\n    >\n      {{ item.title }}\n      @if (item.badge) {\n        <kirby-badge\n          slot=\"end\"\n          class=\"item-badge\"\n          [themeColor]=\"item.badge.themeColor ?? 'primary'\"\n        >\n          {{ item.badge.value }}\n        </kirby-badge>\n      }\n      <kirby-icon name=\"link\" slot=\"end\" class=\"external-link\"></kirby-icon>\n      @if (item.toggle) {\n        <div slot=\"end\" class=\"toggle-spacer\"></div>\n      }\n    </a>\n  }\n}\n\n@if (item.toggle) {\n  <kirby-toggle-button\n    class=\"toggle-button-wrapper\"\n    [checked]=\"vm.isChecked()\"\n    (checkChanged)=\"vm.checkItem($event)\"\n  >\n    <button\n      kirby-button\n      unchecked\n      size=\"xs\"\n      attentionLevel=\"3\"\n      tabindex=\"-1\"\n      [noDecoration]=\"true\"\n      class=\"toggle-button\"\n    >\n      <kirby-icon size=\"xs\" [name]=\"item.toggle.uncheckedIcon\"></kirby-icon>\n    </button>\n    <button\n      kirby-button\n      checked\n      size=\"xs\"\n      attentionLevel=\"3\"\n      tabindex=\"-1\"\n      [noDecoration]=\"true\"\n      class=\"toggle-button\"\n    >\n      <kirby-icon size=\"xs\" [name]=\"item.toggle.checkedIcon\"></kirby-icon>\n    </button>\n  </kirby-toggle-button>\n}\n","import { scrollIntoViewIfNecessary } from '../scroll-into-view-if-necessary';\n\n/**\n * Ensures the element top is not smaller than the scroll container top.\n */\nexport function ensureInView(scrollContainer: Element, element: Element, durationMs: number): void {\n  let startTime: number | null = null;\n\n  const updatePosition = (timestamp: number) => {\n    if (!startTime) {\n      startTime = timestamp;\n    }\n\n    const elapsedTime = timestamp - startTime;\n\n    if (elapsedTime < durationMs) {\n      scrollIntoViewIfNecessary(scrollContainer, element, 'start');\n      requestAnimationFrame(updatePosition);\n    }\n  };\n\n  requestAnimationFrame(updatePosition);\n}\n","import { animate, AUTO_STYLE, style, transition, trigger } from '@angular/animations';\n\nexport const DropDownAnimation = trigger('dropDownMenu', [\n  transition(':enter', [\n    style({ height: 0, overflow: 'hidden' }),\n    animate('300ms ease', style({ height: AUTO_STYLE })),\n  ]),\n\n  transition(':leave', [\n    style({ height: AUTO_STYLE, overflow: 'hidden' }),\n    animate('300ms ease', style({ height: 0 })),\n  ]),\n]);\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  forwardRef,\n  inject,\n  input,\n  Signal,\n} from '@angular/core';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';\nimport { SubmenuItem } from '../../models';\nimport { MenuItemComponent } from '../menu-item';\nimport { MenuItemSize } from '../../types';\nimport { MenuItemListComponent } from '../menu-item-list';\nimport { MenuStateService } from '../../services/menu-state';\nimport { ensureInView } from '../../functions/ensure-in-view';\nimport { DropDownAnimation } from '../../animations';\n\ntype ViewModel = {\n  item: Signal<SubmenuItem>;\n  size: Signal<MenuItemSize>;\n  isExpanded: Signal<boolean>;\n  submenuId: Signal<string>;\n  submenuSize: Signal<MenuItemSize>;\n  animationsDisabled: Signal<boolean>;\n  toggleSubmenu: () => void;\n  reorderItem: (event: CdkDragDrop<string[]>) => void;\n};\n\n@Component({\n  selector: 'li[kirby-x-menu-submenu-item]',\n  templateUrl: './menu-submenu-item.component.html',\n  styleUrls: ['./menu-submenu-item.component.scss'],\n  animations: [DropDownAnimation],\n  imports: [MenuItemComponent, IconComponent, forwardRef(() => MenuItemListComponent), CdkDropList],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class MenuSubmenuItemComponent {\n  readonly item = input.required<SubmenuItem>();\n  readonly size = input.required<MenuItemSize>();\n\n  readonly #element = inject(ElementRef).nativeElement as Element;\n  readonly #stateService = inject(MenuStateService);\n\n  readonly #isExpanded = computed(() => {\n    const id = this.item().id;\n    const expandedItems = this.#stateService.expandedItems();\n    return expandedItems.has(id);\n  });\n  readonly #submenuSize = computed(() => {\n    switch (this.size()) {\n      case 'lg':\n        return 'md';\n      case 'md':\n        return 'sm';\n      default:\n        return 'xs';\n    }\n  });\n\n  #toggleSubmenu(): void {\n    const button = this.#element.querySelector('button[kirby-x-menu-item]');\n    const scrollContainer = this.#element.closest('.sidebar-content');\n    if (button && scrollContainer) {\n      ensureInView(scrollContainer, button, 400);\n    }\n    if (this.#isExpanded()) {\n      this.#stateService.collapseItem(this.item().id);\n    } else {\n      this.#stateService.expandItem(this.item().id);\n    }\n  }\n\n  #reorderItem(event: CdkDragDrop<string[]>): void {\n    this.#stateService.reorderItems(\n      this.item(),\n      event.item.data,\n      event.previousIndex,\n      event.currentIndex\n    );\n  }\n\n  readonly vm: ViewModel = {\n    item: this.item,\n    size: this.size,\n    isExpanded: this.#isExpanded,\n    submenuId: computed(() => `item-${this.item().id}-content`),\n    submenuSize: this.#submenuSize,\n    animationsDisabled: this.#stateService.animationsDisabled,\n    toggleSubmenu: this.#toggleSubmenu.bind(this),\n    reorderItem: this.#reorderItem.bind(this),\n  };\n}\n","@let item = vm.item();\n<button\n  kirby-x-menu-item\n  type=\"button\"\n  class=\"submenu-toggle\"\n  [size]=\"vm.size()\"\n  [id]=\"item.id\"\n  [icon]=\"item.icon\"\n  [attr.aria-controls]=\"vm.submenuId()\"\n  [attr.aria-expanded]=\"vm.isExpanded()\"\n  (click)=\"vm.toggleSubmenu()\"\n>\n  {{ item.title }}\n  <kirby-icon\n    slot=\"end\"\n    name=\"arrow-more\"\n    class=\"disclosure\"\n    [class.rotate]=\"vm.isExpanded()\"\n  ></kirby-icon>\n</button>\n@if (vm.isExpanded()) {\n  <ul\n    kirby-x-menu-item-list\n    [items]=\"item.children\"\n    [size]=\"vm.submenuSize()\"\n    [id]=\"vm.submenuId()\"\n    [@dropDownMenu]\n    [@.disabled]=\"vm.animationsDisabled()\"\n    cdkDropList\n    (cdkDropListDropped)=\"vm.reorderItem($event)\"\n    [isReorderable]=\"item.isReorderable ?? false\"\n  ></ul>\n}\n","import { ChangeDetectionStrategy, Component, forwardRef, input, Signal } from '@angular/core';\nimport { DividerComponent } from '@kirbydesign/designsystem/divider';\nimport { CdkDrag } from '@angular/cdk/drag-drop';\nimport { SidebarMenuItem } from '../../models';\nimport { MenuAnchorItemComponent } from '../menu-anchor-item';\nimport { MenuSubmenuItemComponent } from '../menu-submenu-item';\nimport { MenuItemSize } from '../../types';\n\ntype ViewModel = {\n  id: Signal<string | undefined>;\n  size: Signal<MenuItemSize>;\n  items: Signal<SidebarMenuItem[]>;\n  isReorderable: Signal<boolean>;\n};\n\n@Component({\n  selector: 'ul[kirby-x-menu-item-list]',\n  templateUrl: './menu-item-list.component.html',\n  styleUrls: ['./menu-item-list.component.scss'],\n  host: {\n    '[attr.id]': 'vm.id()',\n    '[class]': 'vm.size()',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DividerComponent,\n    MenuAnchorItemComponent,\n    forwardRef(() => MenuSubmenuItemComponent),\n    CdkDrag,\n  ],\n})\nexport class MenuItemListComponent {\n  readonly items = input.required<SidebarMenuItem[]>();\n  readonly size = input<MenuItemSize>('lg');\n  readonly id = input<string>();\n  readonly isReorderable = input<boolean>(false);\n\n  readonly vm: ViewModel = {\n    id: this.id,\n    size: this.size,\n    items: this.items,\n    isReorderable: this.isReorderable,\n  };\n}\n","@for (item of vm.items(); track item.id) {\n  @switch (item.type) {\n    @case ('divider') {\n      <kirby-divider aria-hidden=\"true\"></kirby-divider>\n    }\n    @case ('submenu') {\n      <li\n        kirby-x-menu-submenu-item\n        [item]=\"item\"\n        [size]=\"vm.size()\"\n        cdkDrag\n        cdkDragPreviewContainer=\"parent\"\n        [cdkDragBoundary]=\"'[cdkDropList]'\"\n        [cdkDragDisabled]=\"!vm.isReorderable()\"\n        [cdkDragData]=\"item.id\"\n      ></li>\n    }\n    @default {\n      <li\n        kirby-x-menu-anchor-item\n        [item]=\"item\"\n        [size]=\"vm.size()\"\n        cdkDrag\n        cdkDragPreviewContainer=\"parent\"\n        [cdkDragBoundary]=\"'[cdkDropList]'\"\n        [cdkDragDisabled]=\"!vm.isReorderable()\"\n        [cdkDragData]=\"item.id\"\n      ></li>\n    }\n  }\n}\n","import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  Signal,\n} from '@angular/core';\n\nimport { scrollIntoViewIfNecessary } from '../../functions/scroll-into-view-if-necessary';\nimport { SidebarMenuItem } from '../../models';\nimport { MenuItemListComponent } from '../menu-item-list';\nimport { MenuStateService } from '../../services/menu-state';\n\ntype ViewModel = {\n  items: Signal<SidebarMenuItem[]>;\n};\n\n@Component({\n  selector: 'kirby-x-menu-container',\n  template: `\n    <nav aria-label=\"Sidebar Menu\">\n      <ul kirby-x-menu-item-list [items]=\"vm.items()\"></ul>\n    </nav>\n  `,\n  styles: 'nav { padding: 0 var(--kirby-spacing-xxs); }',\n  imports: [MenuItemListComponent],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class MenuContainerComponent {\n  readonly #element = inject(ElementRef).nativeElement;\n  readonly #stateService = inject(MenuStateService);\n\n  constructor() {\n    this.#stateService.animationsDisabled = true;\n    afterNextRender({\n      read: () => {\n        this.#scrollSelectedItemIntoView();\n        this.#stateService.animationsDisabled = false;\n      },\n    });\n  }\n\n  #scrollSelectedItemIntoView() {\n    const selectedItem = this.#element.querySelector('li.selected');\n    const scrollContainer = this.#element.closest('.sidebar-content');\n    if (selectedItem && scrollContainer) {\n      scrollIntoViewIfNecessary(scrollContainer, selectedItem);\n    }\n  }\n\n  readonly vm: ViewModel = {\n    items: this.#stateService.menuItems,\n  };\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  EventEmitter,\n  inject,\n  Input,\n  Output,\n} from '@angular/core';\nimport { MenuContainerComponent } from '../../components/menu-container';\nimport { HeightObserverDirective } from '../../directives/height-observer';\nimport { SidebarService } from '../../services/sidebar';\nimport { MenuStateService } from '../../services/menu-state';\nimport { SidebarMenuItem } from '../../models';\n\n@Component({\n  selector: 'kirby-x-sidebar-menu',\n  template: `\n    <kirby-x-menu-container\n      kirbyXHeightObserver\n      (heightChange)=\"setMenuHeight($event)\"\n    ></kirby-x-menu-container>\n  `,\n  styles: `\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    }\n  `,\n  imports: [MenuContainerComponent, HeightObserverDirective],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarMenuComponent {\n  readonly #sidebarService = inject(SidebarService);\n  readonly #stateService = inject(MenuStateService);\n\n  @Input()\n  set menuItems(menuItems: SidebarMenuItem[]) {\n    this.#stateService.menuItems = menuItems;\n  }\n\n  @Input()\n  set selectedItem(value: string) {\n    this.#stateService.selectedItem = value;\n  }\n\n  @Input()\n  set expandedItems(value: Set<string>) {\n    this.#stateService.expandedItems = value;\n  }\n\n  @Input()\n  set checkedItems(value: Set<string>) {\n    this.#stateService.checkedItems = value;\n  }\n\n  @Input()\n  set autoCollapse(value: boolean) {\n    this.#stateService.autoCollapse = value;\n  }\n\n  setMenuHeight(height: number): void {\n    this.#sidebarService.menuHeight = height;\n  }\n\n  @Output() menuItemsChange = new EventEmitter<SidebarMenuItem[]>();\n  @Output() selectedItemChange = new EventEmitter<string>();\n  @Output() expandedItemsChange = new EventEmitter<Set<string>>();\n  @Output() checkedItemsChange = new EventEmitter<Set<string>>();\n  @Output() expandChange = this.#stateService.expandEvents;\n  @Output() checkChange = this.#stateService.checkEvents;\n  @Output() itemReorder = this.#stateService.reorderEvents;\n  @Output() itemSelect = this.#stateService.selectEvents;\n\n  constructor() {\n    effect(() => this.menuItemsChange.emit(this.#stateService.menuItems()));\n    effect(() => this.selectedItemChange.emit(this.#stateService.selectedItem()));\n    effect(() => this.expandedItemsChange.emit(this.#stateService.expandedItems()));\n    effect(() => this.checkedItemsChange.emit(this.#stateService.checkedItems()));\n  }\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { SkeletonLoaderComponent } from '@kirbydesign/extensions-angular/skeleton-loader';\n\n@Component({\n  selector: 'kirby-x-sidebar-menu-loader',\n  templateUrl: './sidebar-menu-loader.component.html',\n  styleUrl: './sidebar-menu-loader.component.scss',\n  imports: [SkeletonLoaderComponent],\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SidebarMenuLoaderComponent {}\n","<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n<kirby-x-skeleton-loader class=\"skeleton-loader\"></kirby-x-skeleton-loader>\n","import { NgModule } from '@angular/core';\nimport { SidebarComponent } from './public-components/sidebar';\nimport { SidebarFooterComponent } from './public-components/sidebar-footer';\nimport { SidebarHeaderComponent } from './public-components/sidebar-header';\n\n@NgModule({\n  imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],\n  exports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],\n})\nexport class SidebarModule {}\n"],"mappings":"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"}

package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs

@@ -5,11 +5,14 @@ import { IconComponent } from "@kirbydesign/designsystem/icon";
 import { IonSkeletonText } from "@ionic/angular";
 var SkeletonLoaderComponent = class SkeletonLoaderComponent {
 	constructor() {
-		this.theme = "light";
 		this.shape = "rectangle";
 	}
+	set theme(_value) {
+		console.warn(`[Kirby Skeleton Loader] The 'theme' input is deprecated and no longer has any effect.
+        The skeleton loader now follows the surface it's placed on. This input will be removed in a future major version.`);
+	}
 	get _cssClass() {
-		return [this.theme, this.shape].filter((cssClass) => !!cssClass);
+		return [this.shape].filter((cssClass) => !!cssClass);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -35,7 +38,7 @@ var SkeletonLoaderComponent = class SkeletonLoaderComponent {
 			host: { properties: { "class": "this._cssClass" } },
 			ngImport: i0,
 			template: "<ion-skeleton-text animated=\"true\"></ion-skeleton-text>\n",
-			styles: [":host{overflow:hidden;display:flex;justify-content:center;align-items:center;height:var(--kirby-font-size-n)}:host.rectangle{border-radius:var(--kirby-border-radius-xs)}:host.circle{border-radius:var(--kirby-border-radius-circle)}:host.pill{border-radius:var(--kirby-border-radius-pill)}:host.dark ion-skeleton-text{background-image:linear-gradient(to right,#ffffff29,#ffffff47,#ffffff29 50%)}:host.light ion-skeleton-text{background-image:linear-gradient(to right,#2828280f,#2828281f,#2828280f 50%)}:host-context(.kirby-color-brightness-white) ion-skeleton-text,:host-context(.kirby-color-brightness-light) ion-skeleton-text{background-image:linear-gradient(to right,#2828280f,#2828281f,#2828280f 50%)}:host-context(.kirby-color-brightness-dark) ion-skeleton-text{background-image:linear-gradient(to right,#ffffff29,#ffffff47,#ffffff29 50%)}ion-skeleton-text{position:relative;margin:0;animation-duration:1.5s;background-clip:border-box;border-radius:inherit}\n"],
+			styles: [":host{overflow:hidden;display:flex;justify-content:center;align-items:center;height:var(--kirby-font-size-n)}:host.rectangle{border-radius:var(--kirby-border-radius-xs)}:host.circle{border-radius:var(--kirby-border-radius-circle)}:host.pill{border-radius:var(--kirby-border-radius-pill)}ion-skeleton-text{background-image:linear-gradient(to right,var(--kirby-skeleton-color-fill) 0%,var(--kirby-skeleton-color-fill-loud) 25%,var(--kirby-skeleton-color-fill) 50%);position:relative;margin:0;animation-duration:1.5s;background-clip:border-box;border-radius:inherit}\n"],
 			dependencies: [{
 				kind: "component",
 				type: IonSkeletonText,
@@ -63,7 +66,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			changeDetection: ChangeDetectionStrategy.Eager,
 			template: "<ion-skeleton-text animated=\"true\"></ion-skeleton-text>\n",
-			styles: [":host{overflow:hidden;display:flex;justify-content:center;align-items:center;height:var(--kirby-font-size-n)}:host.rectangle{border-radius:var(--kirby-border-radius-xs)}:host.circle{border-radius:var(--kirby-border-radius-circle)}:host.pill{border-radius:var(--kirby-border-radius-pill)}:host.dark ion-skeleton-text{background-image:linear-gradient(to right,#ffffff29,#ffffff47,#ffffff29 50%)}:host.light ion-skeleton-text{background-image:linear-gradient(to right,#2828280f,#2828281f,#2828280f 50%)}:host-context(.kirby-color-brightness-white) ion-skeleton-text,:host-context(.kirby-color-brightness-light) ion-skeleton-text{background-image:linear-gradient(to right,#2828280f,#2828281f,#2828280f 50%)}:host-context(.kirby-color-brightness-dark) ion-skeleton-text{background-image:linear-gradient(to right,#ffffff29,#ffffff47,#ffffff29 50%)}ion-skeleton-text{position:relative;margin:0;animation-duration:1.5s;background-clip:border-box;border-radius:inherit}\n"]
+			styles: [":host{overflow:hidden;display:flex;justify-content:center;align-items:center;height:var(--kirby-font-size-n)}:host.rectangle{border-radius:var(--kirby-border-radius-xs)}:host.circle{border-radius:var(--kirby-border-radius-circle)}:host.pill{border-radius:var(--kirby-border-radius-pill)}ion-skeleton-text{background-image:linear-gradient(to right,var(--kirby-skeleton-color-fill) 0%,var(--kirby-skeleton-color-fill-loud) 25%,var(--kirby-skeleton-color-fill) 50%);position:relative;margin:0;animation-duration:1.5s;background-clip:border-box;border-radius:inherit}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/kirbydesign-extensions-angular-skeleton-loader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-extensions-angular-skeleton-loader.mjs","names":[],"sources":["../../skeleton-loader/src/skeleton-loader.component.ts","../../skeleton-loader/src/skeleton-loader.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonSkeletonText } from '@ionic/angular';\n\n@Component({\n  selector: 'kirby-x-skeleton-loader',\n  standalone: true,\n  imports: [CardComponent, IconComponent, IonSkeletonText],\n  templateUrl: './skeleton-loader.component.html',\n  styleUrl: './skeleton-loader.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SkeletonLoaderComponent {\n  /**\n   * The theme for the skeleton loader to use for gradient color. Theme is automatically set when used inside a themed kirby-card.\n   */\n  @Input()\n  theme: 'light' | 'dark' = 'light';\n\n  /**\n   * The shape of the skeleton loader.\n   */\n  @Input()\n  shape: 'rectangle' | 'circle' | 'pill' = 'rectangle';\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.theme, this.shape].filter((cssClass) => !!cssClass);\n  }\n}\n","<ion-skeleton-text animated=\"true\"></ion-skeleton-text>\n"],"mappings":";;;;;AAaA,IAAa,0BAAb,MAAa,wBAAuB;CARpC,cAAA;EAaE,KAAA,QAA0B;EAM1B,KAAA,QAAyC;CAM1C;CAJC,IACI,YAAS;EACX,OAAO,CAAC,KAAK,OAAO,KAAK,KAAK,CAAC,CAAC,QAAQ,aAAa,CAAC,CAAC,QAAQ;CACjE;CAhBW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAuB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAvB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAuB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,OAAA;IAAA,OAAA;GAAA;GAAA,MAAA,EAAA,YAAA,EAAA,SAAA,iBAAA,EAAA;GAAA,UAAA;GAAA,UCbpC;GACA,QAAA,CAAA,o8BAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MDO0C;IAAe,UAAA;IAAA,QAAA,CAAA,UAAA;GAAA,CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAK5C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EARnC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAyB,YACvB;GAAI,SACP;IAAC;IAAe;IAAe;GAAe;GAAC,iBAGvC,wBAAwB;GAAK,UAAA;GAAA,QAAA,CAAA,o8BAAA;EAAA,CAAA;;;EAM7C,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAMA,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAGA,MAAA;GAAY,MAAA,CAAA,OAAO"}
+{"version":3,"file":"kirbydesign-extensions-angular-skeleton-loader.mjs","names":[],"sources":["../../skeleton-loader/src/skeleton-loader.component.ts","../../skeleton-loader/src/skeleton-loader.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { IonSkeletonText } from '@ionic/angular';\n\n@Component({\n  selector: 'kirby-x-skeleton-loader',\n  standalone: true,\n  imports: [CardComponent, IconComponent, IonSkeletonText],\n  templateUrl: './skeleton-loader.component.html',\n  styleUrl: './skeleton-loader.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SkeletonLoaderComponent {\n  /**\n   * @deprecated The skeleton loader now follows the surface it's placed on, so this input no longer has any effect.\n   * This input will be removed in a future major version.\n   */\n  @Input() set theme(_value: 'light' | 'dark') {\n    console.warn(\n      `[Kirby Skeleton Loader] The 'theme' input is deprecated and no longer has any effect.\n        The skeleton loader now follows the surface it's placed on. This input will be removed in a future major version.`\n    );\n  }\n\n  /**\n   * The shape of the skeleton loader.\n   */\n  @Input()\n  shape: 'rectangle' | 'circle' | 'pill' = 'rectangle';\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.shape].filter((cssClass) => !!cssClass);\n  }\n}\n","<ion-skeleton-text animated=\"true\"></ion-skeleton-text>\n"],"mappings":";;;;;AAaA,IAAa,0BAAb,MAAa,wBAAuB;CARpC,cAAA;EAwBE,KAAA,QAAyC;CAM1C;CAjBC,IAAa,MAAM,QAAwB;EACzC,QAAQ,KACN;0HACoH;CAExH;CAQA,IACI,YAAS;EACX,OAAO,CAAC,KAAK,KAAK,CAAC,CAAC,QAAQ,aAAa,CAAC,CAAC,QAAQ;CACrD;CArBW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAuB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAvB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAuB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,OAAA;IAAA,OAAA;GAAA;GAAA,MAAA,EAAA,YAAA,EAAA,SAAA,iBAAA,EAAA;GAAA,UAAA;GAAA,UCbpC;GACA,QAAA,CAAA,ujBAAA;GAAA,cAAA,CAAA;IAAA,MAAA;IAAA,MDO0C;IAAe,UAAA;IAAA,QAAA,CAAA,UAAA;GAAA,CAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAK5C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAuB,YAAA,CAAA;EARnC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAyB,YACvB;GAAI,SACP;IAAC;IAAe;IAAe;GAAe;GAAC,iBAGvC,wBAAwB;GAAK,UAAA;GAAA,QAAA,CAAA,ujBAAA;EAAA,CAAA;;;EAO7C,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAUA,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAGA,MAAA;GAAY,MAAA,CAAA,OAAO"}

package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs

@@ -107,7 +107,7 @@ var SpotIllustrationComponent = class SpotIllustrationComponent {
 			},
 			ngImport: i0,
 			template: "@if (svg()) {\n  <ion-icon [src]=\"svg()\" [class]=\"size()\"></ion-icon>\n}\n",
-			styles: [".sm{font-size:40px;display:block}.md{font-size:56px;display:block}.lg{font-size:96px;display:block}.xl{font-size:136px;display:block}:host-context(.kirby-color-brightness-dark){--kirby-x-spot-illustration-background-color: var(--kirby-white-overlay);--kirby-x-spot-illustration-outline-color: var(--kirby-white);--kirby-x-spot-illustration-highlight-color: var(--kirby-primary)}:host-context(.kirby-color-brightness-white){--kirby-x-spot-illustration-background-color: var(--kirby-dark-overlay);--kirby-x-spot-illustration-outline-color: var(--kirby-black);--kirby-x-spot-illustration-highlight-color: var(--kirby-primary)}ion-icon::part(background){fill:var(--kirby-x-spot-illustration-background-color, var(--kirby-dark-overlay))}ion-icon::part(outline){fill:var(--kirby-x-spot-illustration-outline-color, var(--kirby-black))}ion-icon::part(highlight){fill:var(--kirby-x-spot-illustration-highlight-color, var(--kirby-primary))}ion-icon::part(danger){fill:var(--kirby-danger)}ion-icon::part(warning){fill:var(--kirby-warning)}ion-icon::part(success){fill:var(--kirby-success)}\n"],
+			styles: [".sm{font-size:40px;display:block}.md{font-size:56px;display:block}.lg{font-size:96px;display:block}.xl{font-size:136px;display:block}ion-icon::part(background){fill:var(--kirby-x-spot-illustration-background-color, var(--kirby-spot-illustration-color-fill-raised))}ion-icon::part(outline){fill:var(--kirby-x-spot-illustration-outline-color, var(--kirby-spot-illustration-color-content-base))}ion-icon::part(highlight){fill:var(--kirby-x-spot-illustration-highlight-color, var(--kirby-spot-illustration-color-fill-brand))}ion-icon::part(danger){fill:var(--kirby-spot-illustration-color-fill-danger)}ion-icon::part(warning){fill:var(--kirby-spot-illustration-color-fill-warning)}ion-icon::part(success){fill:var(--kirby-spot-illustration-color-fill-success)}\n"],
 			dependencies: [{
 				kind: "component",
 				type: IonIcon,
@@ -142,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [IonIcon],
 			changeDetection: ChangeDetectionStrategy.Eager,
 			template: "@if (svg()) {\n  <ion-icon [src]=\"svg()\" [class]=\"size()\"></ion-icon>\n}\n",
-			styles: [".sm{font-size:40px;display:block}.md{font-size:56px;display:block}.lg{font-size:96px;display:block}.xl{font-size:136px;display:block}:host-context(.kirby-color-brightness-dark){--kirby-x-spot-illustration-background-color: var(--kirby-white-overlay);--kirby-x-spot-illustration-outline-color: var(--kirby-white);--kirby-x-spot-illustration-highlight-color: var(--kirby-primary)}:host-context(.kirby-color-brightness-white){--kirby-x-spot-illustration-background-color: var(--kirby-dark-overlay);--kirby-x-spot-illustration-outline-color: var(--kirby-black);--kirby-x-spot-illustration-highlight-color: var(--kirby-primary)}ion-icon::part(background){fill:var(--kirby-x-spot-illustration-background-color, var(--kirby-dark-overlay))}ion-icon::part(outline){fill:var(--kirby-x-spot-illustration-outline-color, var(--kirby-black))}ion-icon::part(highlight){fill:var(--kirby-x-spot-illustration-highlight-color, var(--kirby-primary))}ion-icon::part(danger){fill:var(--kirby-danger)}ion-icon::part(warning){fill:var(--kirby-warning)}ion-icon::part(success){fill:var(--kirby-success)}\n"]
+			styles: [".sm{font-size:40px;display:block}.md{font-size:56px;display:block}.lg{font-size:96px;display:block}.xl{font-size:136px;display:block}ion-icon::part(background){fill:var(--kirby-x-spot-illustration-background-color, var(--kirby-spot-illustration-color-fill-raised))}ion-icon::part(outline){fill:var(--kirby-x-spot-illustration-outline-color, var(--kirby-spot-illustration-color-content-base))}ion-icon::part(highlight){fill:var(--kirby-x-spot-illustration-highlight-color, var(--kirby-spot-illustration-color-fill-brand))}ion-icon::part(danger){fill:var(--kirby-spot-illustration-color-fill-danger)}ion-icon::part(warning){fill:var(--kirby-spot-illustration-color-fill-warning)}ion-icon::part(success){fill:var(--kirby-spot-illustration-color-fill-success)}\n"]
 		}]
 	}],
 	propDecorators: {

package/fesm2022/kirbydesign-extensions-angular-spot-illustration.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-extensions-angular-spot-illustration.mjs","names":[],"sources":["../../spot-illustration/src/spot-illustrations.ts","../../spot-illustration/src/spot-illustration.component.ts","../../spot-illustration/src/spot-illustration.component.html"],"sourcesContent":["export interface Illustration {\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n}\n\nexport enum SpotIllustrationSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\nexport const illustrations = {\n  'airballoon.wind.ballon-part.cloud': {\n    md: 'airballoon.wind.ballon-part.cloud.medium.svg',\n  },\n  'banknotes.arrow.dot.circle': {\n    md: 'banknotes.arrow.dot.circle.medium.svg',\n  },\n  'bell.checkmark.dot.bars': {\n    xl: 'bell.checkmark.dot.bars.xlarge.svg',\n  },\n  'bell.exclamation-mark.triangle.bars': {\n    md: 'bell.exclamation-mark.triangle.bars.medium.svg',\n  },\n  'box.curve.box.half-circle': {\n    md: 'box.curve.box.half-circle.medium.svg',\n  },\n  'box.none.plus-dot.bars': {\n    lg: 'box.none.plus-dot.bars.large.svg',\n  },\n  'calculator.money.coin.rectangle': {\n    md: 'calculator.money.coin.rectangle.medium.svg',\n  },\n  'calendar.money.coin.bars': {\n    md: 'calendar.money.coin.bars.medium.svg',\n  },\n  'calender.loop-arrow.zoom.bars': {\n    lg: 'calender.loop-arrow.zoom.bars.large.svg',\n    xl: 'calender.loop-arrow.zoom.bars.xlarge.svg',\n  },\n  'calender.money-arrows.header.bars': {\n    md: 'calender.money-arrows.header.bars.medium.svg',\n    lg: 'calender.money-arrows.header.bars.large.svg',\n  },\n  'checkmark.circle.circle-part.shadow': {\n    lg: 'checkmark.circle.circle-part.shadow.large.svg',\n  },\n  'computer.certificate.padlock.circle': {\n    lg: 'computer.certificate.padlock.circle.large.svg',\n  },\n  'cross.circle.circle-part.shadow': {\n    lg: 'cross.circle.circle-part.shadow.large.svg',\n  },\n  'device.arrow-download.dot.circle': {\n    xl: 'device.arrow-download.dot.circle.xlarge.svg',\n  },\n  'document.card.dot.circle': {\n    lg: 'document.card.dot.circle.large.svg',\n  },\n  'exclamation-mark.circle.circle-part.shadow': {\n    lg: 'exclamation-mark.circle.circle-part.shadow.large.svg',\n  },\n  'graph.coins.dot.bars': {\n    md: 'graph.coins.dot.bars.medium.svg',\n  },\n  'hand-money.line.money-dot.bars': {\n    md: 'hand-money.line.money-dot.bars.medium.svg',\n  },\n  'hand.balloon.balloon.circle': {\n    xl: 'hand.balloon.balloon.circle.xlarge.svg',\n  },\n  'hand.moneybag.ribbon.circle': {\n    lg: 'hand.moneybag.ribbon.circle.large.svg',\n  },\n  'house.plant.door.bars': {\n    md: 'house.plant.door.bars.medium.svg',\n  },\n  'invest-document.graph.bars.square': {\n    md: 'invest-document.graph.bars.square.medium.svg',\n    lg: 'invest-document.graph.bars.square.large.svg',\n    xl: 'invest-document.graph.bars.square.xlarge.svg',\n  },\n  'invest-page.money.dot.circle': {\n    md: 'invest-page.money.dot.circle.medium.svg',\n  },\n  'letters.arrow.triangle.circle': {\n    lg: 'letters.arrow.triangle.circle.large.svg',\n  },\n  'megaphone.sound.megaphone-part.circle': {\n    xl: 'megaphone.sound.megaphone-part.circle.xlarge.svg',\n  },\n  'money-coinstack.graphline.topcoin.bars': {\n    md: 'money-coinstack.graphline.topcoin.bars.medium.svg',\n  },\n  'money-notes.shield.heart.circle': {\n    md: 'money-notes.shield.heart.circle.medium.svg',\n  },\n  'money.arrow.coin.bars': {\n    md: 'money.arrow.coin.bars.medium.svg',\n  },\n  'money.none.coin.bars': {\n    md: 'money.none.coin.bars.medium.svg',\n  },\n  'moneybag.money-notes.dot.bars': {\n    md: 'moneybag.money-notes.dot.bars.medium.svg',\n  },\n  'piggy-bank.money.money-dot.bars': {\n    md: 'piggy-bank.money.money-dot.bars.medium.svg',\n  },\n  'plant.bars.leaf.bars': {\n    md: 'plant.bars.leaf.bars.medium.svg',\n  },\n  'robot.none.antenna-dot.body': {\n    md: 'robot.none.antenna-dot.body.medium.svg',\n    lg: 'robot.none.antenna-dot.body.large.svg',\n  },\n  'template.plus.dot.circle': {\n    xl: 'template.plus.dot.circle.xlarge.svg',\n  },\n  'wallet.face-coins.star.circle': {\n    lg: 'wallet.face-coins.star.circle.large.svg',\n  },\n} as const satisfies Record<string, Illustration>;\n\nexport type SpotIllustrationName = keyof typeof illustrations | null;\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { IonIcon } from '@ionic/angular';\nimport {\n  Illustration,\n  illustrations,\n  SpotIllustrationName,\n  SpotIllustrationSize,\n} from './spot-illustrations';\n\n@Component({\n  selector: 'kirby-x-spot-illustration',\n  imports: [IonIcon],\n  templateUrl: './spot-illustration.component.html',\n  styleUrl: './spot-illustration.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SpotIllustrationComponent {\n  /**\n   * The size of the Spot Illustration\n   */\n  size = input<SpotIllustrationSize>(SpotIllustrationSize.MD);\n\n  /**\n   * The name of the Spot Illustration to display\n   */\n  name = input.required<SpotIllustrationName>();\n\n  illustration = computed(() => {\n    const name = this.name();\n    return name ? illustrations[name] : null;\n  });\n\n  svg = computed(() => {\n    const illustration = this.illustration() as Illustration;\n    const size = this.size();\n    return illustration && illustration[size]\n      ? `assets/spot-illustrations/${illustration[size]}`\n      : undefined;\n  });\n}\n","@if (svg()) {\n  <ion-icon [src]=\"svg()\" [class]=\"size()\"></ion-icon>\n}\n"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-extensions-angular-spot-illustration.mjs","names":[],"sources":["../../spot-illustration/src/spot-illustrations.ts","../../spot-illustration/src/spot-illustration.component.ts","../../spot-illustration/src/spot-illustration.component.html"],"sourcesContent":["export interface Illustration {\n  sm?: string;\n  md?: string;\n  lg?: string;\n  xl?: string;\n}\n\nexport enum SpotIllustrationSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\nexport const illustrations = {\n  'airballoon.wind.ballon-part.cloud': {\n    md: 'airballoon.wind.ballon-part.cloud.medium.svg',\n  },\n  'banknotes.arrow.dot.circle': {\n    md: 'banknotes.arrow.dot.circle.medium.svg',\n  },\n  'bell.checkmark.dot.bars': {\n    xl: 'bell.checkmark.dot.bars.xlarge.svg',\n  },\n  'bell.exclamation-mark.triangle.bars': {\n    md: 'bell.exclamation-mark.triangle.bars.medium.svg',\n  },\n  'box.curve.box.half-circle': {\n    md: 'box.curve.box.half-circle.medium.svg',\n  },\n  'box.none.plus-dot.bars': {\n    lg: 'box.none.plus-dot.bars.large.svg',\n  },\n  'calculator.money.coin.rectangle': {\n    md: 'calculator.money.coin.rectangle.medium.svg',\n  },\n  'calendar.money.coin.bars': {\n    md: 'calendar.money.coin.bars.medium.svg',\n  },\n  'calender.loop-arrow.zoom.bars': {\n    lg: 'calender.loop-arrow.zoom.bars.large.svg',\n    xl: 'calender.loop-arrow.zoom.bars.xlarge.svg',\n  },\n  'calender.money-arrows.header.bars': {\n    md: 'calender.money-arrows.header.bars.medium.svg',\n    lg: 'calender.money-arrows.header.bars.large.svg',\n  },\n  'checkmark.circle.circle-part.shadow': {\n    lg: 'checkmark.circle.circle-part.shadow.large.svg',\n  },\n  'computer.certificate.padlock.circle': {\n    lg: 'computer.certificate.padlock.circle.large.svg',\n  },\n  'cross.circle.circle-part.shadow': {\n    lg: 'cross.circle.circle-part.shadow.large.svg',\n  },\n  'device.arrow-download.dot.circle': {\n    xl: 'device.arrow-download.dot.circle.xlarge.svg',\n  },\n  'document.card.dot.circle': {\n    lg: 'document.card.dot.circle.large.svg',\n  },\n  'exclamation-mark.circle.circle-part.shadow': {\n    lg: 'exclamation-mark.circle.circle-part.shadow.large.svg',\n  },\n  'graph.coins.dot.bars': {\n    md: 'graph.coins.dot.bars.medium.svg',\n  },\n  'hand-money.line.money-dot.bars': {\n    md: 'hand-money.line.money-dot.bars.medium.svg',\n  },\n  'hand.balloon.balloon.circle': {\n    xl: 'hand.balloon.balloon.circle.xlarge.svg',\n  },\n  'hand.moneybag.ribbon.circle': {\n    lg: 'hand.moneybag.ribbon.circle.large.svg',\n  },\n  'house.plant.door.bars': {\n    md: 'house.plant.door.bars.medium.svg',\n  },\n  'invest-document.graph.bars.square': {\n    md: 'invest-document.graph.bars.square.medium.svg',\n    lg: 'invest-document.graph.bars.square.large.svg',\n    xl: 'invest-document.graph.bars.square.xlarge.svg',\n  },\n  'invest-page.money.dot.circle': {\n    md: 'invest-page.money.dot.circle.medium.svg',\n  },\n  'letters.arrow.triangle.circle': {\n    lg: 'letters.arrow.triangle.circle.large.svg',\n  },\n  'megaphone.sound.megaphone-part.circle': {\n    xl: 'megaphone.sound.megaphone-part.circle.xlarge.svg',\n  },\n  'money-coinstack.graphline.topcoin.bars': {\n    md: 'money-coinstack.graphline.topcoin.bars.medium.svg',\n  },\n  'money-notes.shield.heart.circle': {\n    md: 'money-notes.shield.heart.circle.medium.svg',\n  },\n  'money.arrow.coin.bars': {\n    md: 'money.arrow.coin.bars.medium.svg',\n  },\n  'money.none.coin.bars': {\n    md: 'money.none.coin.bars.medium.svg',\n  },\n  'moneybag.money-notes.dot.bars': {\n    md: 'moneybag.money-notes.dot.bars.medium.svg',\n  },\n  'piggy-bank.money.money-dot.bars': {\n    md: 'piggy-bank.money.money-dot.bars.medium.svg',\n  },\n  'plant.bars.leaf.bars': {\n    md: 'plant.bars.leaf.bars.medium.svg',\n  },\n  'robot.none.antenna-dot.body': {\n    md: 'robot.none.antenna-dot.body.medium.svg',\n    lg: 'robot.none.antenna-dot.body.large.svg',\n  },\n  'template.plus.dot.circle': {\n    xl: 'template.plus.dot.circle.xlarge.svg',\n  },\n  'wallet.face-coins.star.circle': {\n    lg: 'wallet.face-coins.star.circle.large.svg',\n  },\n} as const satisfies Record<string, Illustration>;\n\nexport type SpotIllustrationName = keyof typeof illustrations | null;\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { IonIcon } from '@ionic/angular';\nimport {\n  Illustration,\n  illustrations,\n  SpotIllustrationName,\n  SpotIllustrationSize,\n} from './spot-illustrations';\n\n@Component({\n  selector: 'kirby-x-spot-illustration',\n  imports: [IonIcon],\n  templateUrl: './spot-illustration.component.html',\n  styleUrl: './spot-illustration.component.scss',\n  changeDetection: ChangeDetectionStrategy.Eager,\n})\nexport class SpotIllustrationComponent {\n  /**\n   * The size of the Spot Illustration\n   */\n  size = input<SpotIllustrationSize>(SpotIllustrationSize.MD);\n\n  /**\n   * The name of the Spot Illustration to display\n   */\n  name = input.required<SpotIllustrationName>();\n\n  illustration = computed(() => {\n    const name = this.name();\n    return name ? illustrations[name] : null;\n  });\n\n  svg = computed(() => {\n    const illustration = this.illustration() as Illustration;\n    const size = this.size();\n    return illustration && illustration[size]\n      ? `assets/spot-illustrations/${illustration[size]}`\n      : undefined;\n  });\n}\n","@if (svg()) {\n  <ion-icon [src]=\"svg()\" [class]=\"size()\"></ion-icon>\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kirbydesign/extensions-angular",
-  "version": "6.0.0-dev-d045bb2",
+  "version": "6.0.0-dev-67d5287",
   "author": "kirby@bankdata.dk",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
     "@angular/platform-browser": "^21.0.0 || ^22.0.0",
     "@angular/platform-browser-dynamic": "^21.0.0 || ^22.0.0",
     "@angular/router": "^21.0.0 || ^22.0.0",
-    "@kirbydesign/designsystem": "12.0.0",
+    "@kirbydesign/designsystem": "12.0.0-dev-67d5287",
     "rxjs": "^7.0.0"
   },
   "dependencies": {

package/types/kirbydesign-extensions-angular-combobox.d.ts

@@ -270,4 +270,8 @@ export declare class ComboboxComponent implements AfterViewInit, OnDestroy, Cont
     "hasErrorChange": "hasErrorChange";
     "change": "change";
   }, ["itemTemplate", "slottedItems", "kirbyItemsSlotted"], never, true, never>;
+}
+export declare class ComboboxItemTemplateDirective {
+  static ɵfac: i0.ɵɵFactoryDeclaration<ComboboxItemTemplateDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<ComboboxItemTemplateDirective, "[kirbyXComboboxItemTemplate]", never, {}, {}, never, never, true, never>;
 }

package/types/kirbydesign-extensions-angular-skeleton-loader.d.ts

@@ -1,14 +1,15 @@
 import * as i0 from "@angular/core";
 export declare class SkeletonLoaderComponent {
   /**
-   * The theme for the skeleton loader to use for gradient color. Theme is automatically set when used inside a themed kirby-card.
+   * @deprecated The skeleton loader now follows the surface it's placed on, so this input no longer has any effect.
+   * This input will be removed in a future major version.
    */
-  theme: 'light' | 'dark';
+  set theme(_value: 'light' | 'dark');
   /**
    * The shape of the skeleton loader.
    */
   shape: 'rectangle' | 'circle' | 'pill';
-  get _cssClass(): ("light" | "dark" | "rectangle" | "circle" | "pill")[];
+  get _cssClass(): ("rectangle" | "circle" | "pill")[];
   static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonLoaderComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonLoaderComponent, "kirby-x-skeleton-loader", never, {
     "theme": {