@kirbydesign/extensions-angular 6.0.0-dev-d045bb2 → 6.0.0-dev-286cdc0

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.3",
+			ngImport: i0,
+			type: ComboboxItemTemplateDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: ComboboxItemTemplateDirective,
+			isStandalone: true,
+			selector: "[kirbyXComboboxItemTemplate]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ComboboxItemTemplateDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[kirbyXComboboxItemTemplate]",
+			standalone: true
+		}]
+	}]
+});
 var OpenState;
 (function(OpenState) {
 	OpenState[OpenState["closed"] = 0] = "closed";
@@ -476,7 +510,7 @@ var ComboboxComponent = class ComboboxComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ComboboxComponent,
 			deps: [
@@ -491,7 +525,7 @@ var ComboboxComponent = class ComboboxComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ComboboxComponent,
 			isStandalone: true,
 			selector: "kirby-x-combobox",
@@ -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
 				},
 				{
@@ -610,8 +644,8 @@ 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"],
+			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.keyboard-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{opacity:var(--kirby-opacity-40)}: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 ::ng-deep>.cdk-virtual-scroll-content-wrapper>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.combobox-viewport ::ng-deep>.cdk-virtual-scroll-content-wrapper>:first-child{--kirby-content-border-top-radius: var(--kirby-border-radius-n)}.combobox-viewport ::ng-deep>.cdk-virtual-scroll-content-wrapper>:last-child{--kirby-content-border-bottom-radius: var(--kirby-border-radius-n)}.no-results{color:var(--kirby-color-content-base-quiet)}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -722,7 +756,7 @@ var ComboboxComponent = class ComboboxComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ComboboxComponent,
 	decorators: [{
@@ -750,8 +784,8 @@ i0.ɵɵngDeclareClassMetadata({
 				CdkVirtualForOf
 			],
 			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"]
+			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.keyboard-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{opacity:var(--kirby-opacity-40)}: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 ::ng-deep>.cdk-virtual-scroll-content-wrapper>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.combobox-viewport ::ng-deep>.cdk-virtual-scroll-content-wrapper>:first-child{--kirby-content-border-top-radius: var(--kirby-border-radius-n)}.combobox-viewport ::ng-deep>.cdk-virtual-scroll-content-wrapper>:last-child{--kirby-content-border-bottom-radius: var(--kirby-border-radius-n)}.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":";;;;;;;;;;;;;;;AAAA,IAAY;CAAZ,SAAY,WAAS;CACnB,UAAA,UAAA,YAAA,KAAA;CACA,UAAA,UAAA,aAAA,KAAA;CACA,UAAA,UAAA,UAAA,KAAA;AACF,EAAA,CAJY,cAAA,YAAS,CAAA,EAAA;AC0ErB,IAAa,oBAAb,MAAa,kBAAiB;CAGJ;EAAA,KAAA,0BAA0B;CAAG;CAyC7C,sBAAsB,OAAe,OAAa;EACxD,IAAI,QAAQ,OACV,OAAO;EAET,IAAI,QAAQ,OACV,OAAO;EAET,OAAO;CACT;CAqBU,YAAY,MAAa;EACjC,IAAI,KAAK,aAAa,IAAI,GACxB,OAAO;EAGT,IAAI,KAAK,0BAA0B,IAAI,GAAG;GAExC,MAAM,YAAqB,KAAW,KAAK;GAE3C,IAAI,OAAO,cAAc,UACvB,OAAO;EAEX;EACA,OAAO;CACT;CAQA,IAAc,oBAAiB;EAC7B,OAAO,IAAI,kBAAkB;CAC/B;CAEA,IAAc,oBAAiB;EAC7B,OAAO,KAAK;CACd;CAEA,IAAc,iBAAc;EAC1B,MAAM,YAAY,KAAK,aAAa,UAAU;EAE9C,IAAI,cAAc,GAChB,OAAO,KAAK;EAGd,OAAO,KAAK,IACV,KAAK,mBACL,KAAK,IAAI,KAAK,mBAAmB,YAAY,KAAK,UAAU,CAAC;CAEjE;CAEQ,aAAa,MAAa;EAChC,OAAO,OAAO,SAAS;CACzB;CAEQ,0BAA0B,MAAa;EAC7C,OAAO,QAAQ,UAAa,OAAO,SAAS,YAAY,KAAK,oBAAoB;CACnF;CAEQ,wBAAwB,MAAa;EAC3C,OAAO,QAAQ,UAAa,OAAO,SAAS,YAAY,KAAK,kBAAkB;CACjF;CAOU,UAAU,MAAa;EAC/B,IAAI,KAAK,aAAa,IAAI,GACxB,OAAO;EAGT,IAAI,KAAK,wBAAwB,IAAI,GAAG;GAEtC,MAAM,UAAmB,KAAW,KAAK;GAEzC,IAAI,KAAK,aAAa,OAAO,GAC3B,OAAO;EAEX;EAEA,QAAQ,MACN,yJAAyJ;EAE3J,OAAO;CACT;CAUA,IAAc,cAAW;EACvB,OAAO,KAAK;CACd;CACA,IAAY,YAAY,OAAgB;EACtC,KAAK,eAAe;EACpB,IAAI,CAAC,KAAK,cACR;EAIF,IAAI,KAAK,WAAW,eAAe,OAAO;GACxC,KAAK,cAAc,KAAK,aAAa;GACrC,KAAK,wBAAwB,cAAc,CAAC;EAC9C;CACF;CAIA,IAAI,QAAK;EACP,OAAO,KAAK;CACd;CAMA,IACW,MAAM,OAAgB;EAC/B,KAAK,SAAS;EACd,KAAK,cAAc,KAAK;CAC1B;CAGA,IAAI,eAAY;EACd,OAAO,KAAK;CACd;CAMA,IACW,aAAa,OAAc;EAEpC,IAAI,UAAU,KAAK,eAAe;GAChC,KAAK,gBAAgB;GACrB,KAAK,cAAc,KAAK;GAExB,KAAK,QAAQ,KAAK;GAClB,KAAK,qBAAqB,KAAK,YAAY,KAAK,YAAY,CAAC;EAC/D;CACF;CAKA,IAAW,cAAW;EACpB,OAAO,KAAK;CACd;CAEA,IAAW,YAAY,MAAa;EAElC,KAAK,yBAAyB,IAAI;EAElC,IAAI,KAAK,iBAAiB,MACxB;EAGF,KAAK,eAAe;CACtB;CAEQ,eAAe,MAAa;EAClC,OAAO,KAAK,YAAY,QAAQ,IAAI;CACtC;CAEQ,gBAAgB,MAAyB;EAC/C,MAAM,aAAa,KAAK,cAAa;EACrC,IAAI,CAAC,cAAc,CAAC,MAClB;EAGF,MAAM,SAAS,KAAK,UAAU,IAAI;EAClC,OAAO,WAAW,MAAM,OAAO,GAAG,cAAc,OAAO,MAAM;CAC/D;CAEQ,yBAAyB,MAAa;EAC5C,MAAM,UAAU,KAAK,gBAAgB,IAAI;EACzC,MAAM,QAAQ,KAAK,eAAe,IAAI;EACtC,MAAM,UAAU,KAAK,YAAY;EAEjC,IAAI,CAAC,SACH;EAGF,KAAK,SAAS,aAAa,QAAQ,eAAe,gBAAgB,QAAQ,SAAQ,CAAE;EACpF,KAAK,SAAS,aAAa,QAAQ,eAAe,iBAAiB,GAAG,QAAQ,GAAG;CACnF;CAYA,IACW,OAAO,WAAyD;EACzE,KAAK,UAAU,aAAa,oBAAoB;CAClD;CAEA,IAAW,SAAM;EACf,OAAO,KAAK;CACd;CAcA,IACW,cAAW;EACpB,OAAO,KAAK,WAAW,aAAa;CACtC;CAYA,IACI,WAAQ;EACV,OAAO,KAAK;CACd;CAEA,IAAI,SAAS,OAAc;EACzB,IAAI,KAAK,cAAc,OAAO;GAC5B,KAAK,YAAY;GACjB,KAAK,eAAe,KAAK,KAAK,SAAS;EACzC;CACF;CASA,IACW,kBAAe;EACxB,OAAO;CACT;CAUA,IACW,gBAAa;EACtB,OAAO,KAAK,WAAW;CACzB;CAEA,IACW,aAAU;EACnB,OAAO,KAAK,UAAU,UAAU;CAClC;CAEA,IACW,SAAM;EACf,OAAO,KAAK,UAAU,UAAU;CAClC;CAEA,IACW,WAAQ;EACjB,OAAO,KAAK,gBAAgB;CAC9B;CAoBA,IAAI,qBAAkB;EACpB,OAAO,KAAK,UAAU;CACxB;CAKQ,6BAA0B;EAChC,kBACE,KAAK,WAAW,eAChB,KAAK,sBACL,KAAK,UACL,KAAK,YAAY,aAAa;CAElC;CAMA,IACW,kBAAkB,YAA8C;EAEzE,IADwB,KAAK,2BAA2B,SAAS,GAE/D,KAAK,wBAAuB;EAG9B,WAAW,SAAS,cAAa;GAC/B,KAAK,SAAS,aAAa,UAAU,eAAe,QAAQ,QAAQ;GACpE,MAAM,uBAA+C,KAAK,SAAS,OACjE,UAAU,eACV,eACK;IACH,MAAM,KAAK,UAAU,cAAc,aAAa,IAAI;IACpD,MAAM,OAAO,KAAK,MAAM,MAAM,OAAO,KAAK,UAAU,EAAE,MAAM,EAAE;IAC9D,IAAI,MACF,KAAK,aAAa,IAAI;GAE1B,CAAC;GAGH,KAAK,0BAA0B,KAAK,oBAAoB;EAC1D,CAAC;EAED,KAAK,qBAAqB;CAC5B;CAEA,IAAW,oBAAiB;EAC1B,OAAO,KAAK;CACd;CAIA,YACU,UACA,YACA,KACA,uBAA4C;EAH5C,KAAA,WAAA;EACA,KAAA,aAAA;EACA,KAAA,MAAA;EACA,KAAA,wBAAA;EA5aF,KAAA,QAAQ,UAAU;EAClB,KAAA,UAA0D,oBAAoB;EAC9E,KAAA,uBAAuB,CAAC,cAAc,iBAAiB;EAExD,KAAA,aAAqB,kBAAkB,SAAS,kBAAkB,CAAC,CAAC,KAAI;EACxE,KAAA,cAAsB,kBAAkB,SAAS,aAAa,CAAC,CAAC,KAAI;EAE1D,KAAA,0BACf,YACA,kBACa;GACb,IAAI,CAAC,YACH,OAAO;GAGT,MAAM,kBAAkB,WAAW,YAAW;GAC9C,OAAO,cACJ,QAAQ,SAAS,KAAK,YAAY,IAAI,CAAC,CAAC,YAAW,CAAE,CAAC,SAAS,eAAe,CAAC,CAAC,CAChF,MAAM,GAAG,MAAK;IACb,MAAM,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,YAAW;IAC7C,MAAM,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,YAAW;IAE7C,MAAM,kBAAkB,MAAM,WAAW,UAAU;IACnD,MAAM,kBAAkB,MAAM,WAAW,UAAU;IACnD,IAAI,mBAAmB,iBACrB,OAAO,KAAK,sBAAsB,OAAO,KAAK;IAGhD,IAAI,iBACF,OAAO;IAGT,IAAI,iBACF,OAAO;IAGT,OAAO,KAAK,sBAAsB,OAAO,KAAK;GAChD,CAAC;EACL;EAgBO,KAAA,sBAAsB;EAMtB,KAAA,+BAA+B;EAE/B,KAAA,kBAAkB;EAMlB,KAAA,mBAA2B;EAqB3B,KAAA,aAAqB;EAuCrB,KAAA,iBAAiB;EAyBjB,KAAA,iBACL,KAAK;EAEC,KAAA,eAA0B,CAAA;EAiB1B,KAAA,SAAoB,CAAA;EAgBpB,KAAA,gBAAyB;EAuBzB,KAAA,eAAwB;EA+CzB,KAAA,cAAc;EAyBd,KAAA,WAAW;EAWlB,KAAA,iBAAwC,IAAI,aAAY;EAChD,KAAA,YAAqB;EAqBtB,KAAA,OAAkB,UAAU;EAY5B,KAAA,SAA4B,IAAI,aAAY;EAE5C,KAAA,QAAiB;EA2FhB,KAAA,4BAAsD,CAAA;EAkGtD,KAAA,iBAA0C,CAElD;EACQ,KAAA,kBAAmC,CAE3C;CAhGG;CAEO,SAAS,OAAiB;EAClC,MAAM,gBAAe;EACrB,KAAK,WAAW,cAAc,MAAK;EAEnC,KAAK,OAAM;CACb;CAEQ,SAAM;EACZ,IAAI,KAAK,UACP;EAEF,KAAK,SAAS,KAAK,MAAK,IAAK,KAAK,KAAI;CACxC;CAEO,kBAAe;EACpB,IAAI,KAAK,WAAW,SAAS;GAC3B,MAAM,EAAE,OAAO,iBAAiB,KAAK,WAAW,cAAc,sBAAqB;GACnF,KAAK,oBAAoB,aAAa,SAAS;GAC/C,KAAK,oBAAoB,aAAa,SAAS;GAE/C,KAAK,oBAAoB,sBAAsB,GAAG,aAAY,GAAI;GAElE,KAAK,sBAAsB,QAAQ,KAAK,aAAa,UAAS;IAC5D,MAAM,WAAW,MAAM,YAAY;IACnC,IAAI,WAAW,GACb,KAAK,oBAAoB,sBAAsB,GAAG,SAAQ,GAAI;GAElE,CAAC;EACH;EACA,KAAK,2BAA0B;CACjC;CAGQ,oBAAoB,OAAe,OAAa;EACtD,KAAK,SAAS,SACZ,KAAK,aAAa,eAClB,OACA,OACA,oBAAoB,QAAQ;CAEhC;CAEO,cAAW;EAChB,KAAK,wBAAuB;EAC5B,KAAK,gBAAe;CACtB;CAEO,OAAI;EACT,IAAI,KAAK,UACP;EAEF,IAAI,CAAC,KAAK,QAAQ;GAChB,KAAK,QAAQ,UAAU;GACvB,KAAK,YAAW;GAChB,KAAK,cAAc,KAAK;EAC1B;CACF;CAEQ,cAAW;EACjB,IAAI,KAAK,UAAU,UAAU,SAAS;GACpC,KAAK,QAAQ,UAAU;GACvB,KAAK,SAAS,KAAI;GAClB,KAAK,IAAI,aAAY;GAIrB,4BAA4B,KAAK,sCAAqC,CAAE;EAC1E;CACF;CAEO,QAAK;EACV,IAAI,KAAK,UACP;EAEF,IAAI,KAAK,QAAQ;GACf,KAAK,QAAQ,UAAU;GACvB,KAAK,qBAAqB,KAAK,YAAY,KAAK,YAAY,CAAC;GAC7D,KAAK,cAAc,KAAK;GACxB,KAAK,SAAS,KAAI;EACpB;CACF;CAEU,aAAa,MAAa;EAElC,IAAI,gBAAgB,aAAa;EACjC,KAAK,WAAW,IAAI;EACpB,KAAK,MAAK;CACZ;CAeO,WAAW,OAAa;EAC7B,KAAK,kBAAkB,KAAK;EAG5B,KAAK,qBAAqB,KAAK,YAAY,KAAK,KAAK,CAAC;EAEtD,KAAK,IAAI,aAAY;CACvB;CASA,iBAAiB,IAA4B;EAC3C,KAAK,WAAW;CAClB;CASA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAQO,iBAAkB,YAAmB;EAC1C,KAAK,WAAW;EAChB,KAAK,IAAI,aAAY;CACvB;CAEQ,WAAW,MAAa;EAC9B,IAAI,QAAQ,KAAK,cAAc;GAC7B,KAAK,eAAe;GACpB,KAAK,cAAc;GACnB,KAAK,OAAO,KAAK,KAAK,KAAK;GAC3B,KAAK,SAAS,KAAK,KAAK;GACxB,KAAK,qBAAqB,KAAK,YAAY,IAAI,CAAC;GAChD,KAAK,cAAc,KAAK;EAC1B;CACF;CAEQ,kBAAkB,OAAa;EACrC,KAAK,eAAe,KAAK,gBAAgB,KAAK;CAChD;CAEU,QAAQ,OAAY;EAC5B,IAAI,CAAC,KAAK,QACR,KAAK,KAAI;EAGX,MAAM,QAAQ,MAAM;EAEpB,IAAI,CAAC,MAAM,OACT,KAAK,eAAc;EAGrB,KAAK,oBAAoB,MAAM,KAAK;EAMpC,IAAI,SAAS,kBAAkB,KAAK,WAAW,eAC7C,KAAK,WAAW,cAAc,MAAK;CAEvC;CAEQ,iBAAc;EACpB,KAAK,WAAW,MAAS;EAEzB,KAAK,SAAS,KAAK,4BAA4B;CACjD;CAGQ,SAAS,SAAe;EAC9B,aAAa,KAAK,gBAAgB;EAClC,KAAK,kBAAkB;EACvB,KAAK,mBAAmB,iBAAgB;GACtC,KAAK,kBAAkB;GACvB,KAAK,IAAI,aAAY;EACvB,GAAG,GAAG;CACR;CAEQ,oBAAoB,YAAkB;EAC5C,KAAK,cAAc,aAAa,KAAK,eAAe,YAAY,KAAK,KAAK,IAAI,KAAK;EAEnF,IAAI,cAAc,KAAK,YAAY,WAAW,GAC5C,KAAK,SAAS,KAAK,mBAAmB;CAE1C;CAEU,oBAAiB;EACzB,KAAK,QAAQ,UAAU;EACvB,KAAK,YAAY,cAAc,MAAK;EACpC,KAAK,UAAS;CAChB;CAEU,iBAAc;EACtB,KAAK,MAAK;CACZ;CAGO,YAAY,OAAiB;EAClC,IAAI,KAAK,UAAU;GACjB,MAAM,eAAc;GACpB,MAAM,yBAAwB;EAChC;CACF;CAGO,aAAa,OAAiB;EACnC,IAAI,KAAK,QACP,MAAM,gBAAe;CAEzB;CAGO,aAAU;EAIf,iBAAgB;GACd,MAAM,gBAAgB,SAAS;GAC/B,MAAM,oBACJ,iBAAiB,KAAK,WAAW,cAAc,SAAS,aAAa;GACvE,MAAM,kBAAkB,iBAAiB,cAAc,QAAQ,eAAe;GAE9E,IAAI,qBAAqB,iBAEvB;GASF,IAAI,KAAK,UAAU,kBAAkB,SAAS,MAAM;IAClD,KAAK,WAAW,cAAc,MAAK;IACnC;GACF;GAEA,IAAI,KAAK,QACP,KAAK,MAAK;GAEZ,KAAK,UAAS;EAChB,GAAG,CAAC;CACN;CAGO,QAAK;EACV,IAAI,KAAK,QAAQ;GACf,KAAK,WAAW,KAAK,WAAW;GAChC,KAAK,MAAK;EACZ;CACF;CAGO,WAAQ;EACb,KAAK,MAAK;CACZ;CAGO,QAAQ,OAAY;EACzB,MAAM,eAAc;EACpB,MAAM,gBAAe;EAErB,IAAI,KAAK,QACP,KAAK,WAAW,KAAK,WAAW;EAElC,KAAK,OAAM;CACb;CAQO,YAAY,OAAY;EAC7B,IAAI,KAAK,UAAU;EAEnB,MAAM,WAAW;EAEjB,MAAM,eAAc;EAEpB,IAAI,CAAC,KAAK,QAAQ;GAChB,KAAK,KAAI;GACT,IAAI,KAAK,cACP,KAAK,uBAAsB;QAE3B,KAAK,0BAA0B,QAAQ;EAE3C,OACE,KAAK,sBAAsB,QAAQ;CAEvC;CAEQ,sBAAsB,UAAuB;EACnD,QAAQ,SAAS,KAAjB;GACE,KAAK;IACH,KAAK,gBAAgB,CAAC;IACtB;GACF,KAAK;IACH,KAAK,gBAAgB,EAAE;IACvB;GACF,KAAK;IACH,KAAK,gBAAgB,EAAE;IACvB;GACF,KAAK;IACH,KAAK,gBAAgB,GAAG;IACxB;GACF,KAAK;IACH,KAAK,oBAAmB;IACxB;GACF,KAAK,OACH,KAAK,mBAAkB;EAI3B;CACF;CAEQ,gBAAgB,eAAqB;EAE3C,MAAM,eAAe,KAAK,YAAY,QAAQ,KAAK,WAAW;EAC9D,IAAI;EAEJ,IAAI,gBAAgB,GAClB,WAAW,KAAK,IAAI,KAAK,YAAY,SAAS,GAAG,eAAe,aAAa;OAE7E,WAAW,KAAK,IAAI,GAAG,eAAe,aAAa;EAGrD,IAAI,aAAa,cACf,KAAK,cAAc,KAAK,YAAY;EAEtC,KAAK,yCAAwC;CAC/C;CAEQ,0BAA0B,UAAuB;EACvD,QAAQ,SAAS,KAAjB;GACE,KAAK;GACL,KAAK;GACL,KAAK;IACH,KAAK,oBAAmB;IACxB;GACF,KAAK;GACL,KAAK;GACL,KAAK,OACH,KAAK,mBAAkB;EAI3B;CACF;CAEQ,yBAAsB;EAC5B,IAAI,KAAK,cACP,KAAK,cAAc,KAAK;CAE5B;CAEQ,qBAAkB;EACxB,IAAI,KAAK,YAAY,SAAS,GAC5B,KAAK,cAAc,KAAK,YAAY,KAAK,YAAY,SAAS;CAElE;CAEQ,sBAAmB;EACzB,IAAI,KAAK,YAAY,SAAS,GAC5B,KAAK,cAAc,KAAK,YAAY;CAExC;CAEQ,0BAAuB;EAC7B,IAAI;EACJ,QAAQ,uBAAuB,KAAK,0BAA0B,IAAG,OAAQ,QACvE,qBAAoB;CAExB;CAEQ,kBAAe;EACrB,KAAK,sBAAsB,UAAU,KAAK,UAAU;CACtD;CAOQ,gBAAgB,OAAa;EACnC,IAAI,CAAC,KAAK,SAAS,KAAK,MAAM,WAAW,GACvC,OAAO;EAGT,OAAO,KAAK,MAAM,MAAM,OAAO,KAAK,YAAY,EAAE,MAAM,KAAK,KAAK;CACpE;CAEQ,qBAAqB,OAAa;EAGxC,IAAI,KAAK,oBACP,KAAK,SAAS,YAAY,KAAK,oBAAoB,SAAS,KAAK;CAErE;CAEQ,2CAAwC;EAC9C,IAAI,CAAC,KAAK,eAAe,CAAC,KAAK,wBAC7B;EAGF,MAAM,eAAe,KAAK,YAAY,QAAQ,KAAK,WAAW;EAC9D,IAAI,iBAAiB,IAAI;EAEzB,MAAM,UAAU,eAAe,KAAK;EACpC,MAAM,aAAa,UAAU,KAAK;EAClC,MAAM,eAAe,KAAK,uBAAuB,oBAAmB;EACpE,MAAM,eAAe,KAAK,uBAAuB,gBAAe;EAEhE,IAAI,UAAU,cAEZ,KAAK,uBAAuB,eAAe,OAAO;OAC7C,IAAI,aAAa,eAAe,cAErC,KAAK,uBAAuB,eAAe,aAAa,YAAY;EAGtE,KAAK,uBAAuB,kBAAiB;CAC/C;CAEQ,gBAAa;EACnB,OAAO,KAAK,qBAAqB,KAAK,kBAAkB,SACpD,KAAK,oBACL,KAAK;CACX;CAEQ,wCAAqC;EAC3C,MAAM,eAAe,KAAK,YAAY,QAAQ,KAAK,WAAW;EAE9D,KAAK,wBAAwB,iBAAiB;GAAE,OAAO;GAAG,KAAK;EAAE,CAAE;EACnE,KAAK,wBAAwB,kBAAiB;EAE9C,KAAK,wBAAwB,cAAc,YAAY;CACzD;CA93BW;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAiB,MAAA;IAAA,EAAA,OAAA,GAAA,UAAA;IAAA,EAAA,OAAA,GAAA,WAAA;IAAA,EAAA,OAAA,GAAA,kBAAA;IAAA,EAAA,OAAA,GAAA,sBAAA;GAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAjB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAiB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,qBAAA;IAAA,8BAAA;IAAA,kBAAA;IAAA,YAAA;IAAA,gBAAA;IAAA,gBAAA;IAAA,OAAA;IAAA,cAAA;IAAA,aAAA;IAAA,QAAA;IAAA,QAAA;IAAA,UAAA;IAAA,UAAA;IAAA,MAAA;GAAA;GAAA,SAAA;IAAA,gBAAA;IAAA,QAAA;GAAA;GAAA,MAAA;IAAA,WAAA;KAAA,aAAA;KAAA,cAAA;KAAA,YAAA;KAAA,eAAA;KAAA,kBAAA;KAAA,iBAAA;KAAA,mBAAA;KAAA,qBAAA;KAAA,kBAAA;KAAA,oBAAA;KAAA,gBAAA;KAAA,eAAA;IAAA;IAAA,YAAA;KAAA,iBAAA;KAAA,gBAAA;KAAA,gBAAA;KAAA,oBAAA;KAAA,iBAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,WAzBjB,CACT;IACE,SAAS;IACT,aAAa,iBAAiB,iBAAiB;IAC/C,OAAO;GACR,GACD;IACE,SAAS;IACT,aAAa,iBAAiB,iBAAiB;GAChD,CACF;GAAA,SAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAoXa;KAAyB,aAAA;KAAA,MAAU;IAAW;IAAA;KAAA,cAAA;KAAA,WAG3C;KAAyB,MAAU;IAAU;IAAA;KAAA,cAAA;KAAA,WAmC7C;KAAa,MAAU;IAAU;GAAA;GAAA,aAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAhCvC;KAAa,aAAA;KAAA,MAAU;IAAU;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAGjC;KAAgB,aAAA;IAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAAA,CAAA,aAAA;KAAA,aAAA;KAAA,MAGqB;KAAU,QAAA;IAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAG/C;KAAc,aAAA;KAAA,MAAwB;KAAU,QAAA;IAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAOhD;KAAwB,aAAA;IAAA;IAAA;KAAA,cAAA;KAAA,WAYrB;KAAa,aAAA;KAAA,MAAU;IAAU;GAAA;GAAA,UAAA;GAAA,UCjdjD;GA2EA,QAAA,CAAA,0wCAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDdI;KAAc,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;KAAA,SAAA,CAAA,gBAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAgB,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAChB;KAAgB,UAAA;KAAA,QAAA,CAAA,UAAA,QAAA;KAAA,SAAA,CAAA,UAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAChB;KAAa,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAa,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAa,UAAA;KAAA,QAAA,CAAA,QAAA,MAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAc,UAAA;KAAA,QAAA,CAAA,aAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAyB,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACzB;KAAwB,UAAA;KAAA,QAAA,CAAA,eAAA,YAAA;KAAA,SAAA,CAAA,qBAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACxB;KAAe,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;EAAA,CAAA;CAAA;;AAIN,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EA7B7B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAkB,WAGjB,CACT;IACE,SAAS;IACT,aAAa,iBAAgB,iBAAkB;IAC/C,OAAO;GACR,GACD;IACE,SAAS;IACT,aAAa,iBAAgB,iBAAkB;GAChD,CACF;GAAA,SACQ;IACP;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACD;GAAA,iBACgB,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,0wCAAA;EAAA,CAAA;;;;;;;;;EA2D9C,qBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAMA,8BAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAQA,kBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAqBA,YAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAuCA,gBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAyBA,gBAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EA+BA,OAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAeA,cAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EA4DA,aAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAOA,QAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAYA,QAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAMA,UAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAGA,MAAA;GAAY,MAAA,CAAA,eAAe;;EAQ3B,gBAAA,CAAA,EAAA,MAAA,OAAA,CAAA;EAOA,UAAA,CAAA,EAAA,MAAA,MAAA,CAAA;EAeA,MAAA,CAAA,EAAA,MAAA,MAAA,CAAA;;GAIA,MAAA;GAAY,MAAA,CAAA,cAAc;;EAQ1B,QAAA,CAAA,EAAA,MAAA,OAAA,CAAA;;GAKA,MAAA;GAAY,MAAA,CAAA,cAAc;;;GAK1B,MAAA;GAAY,MAAA,CAAA,kBAAkB;;;GAK9B,MAAA;GAAY,MAAA,CAAA,eAAe;;;GAK3B,MAAA;GAAY,MAAA,CAAA,iBAAiB;;;GAK7B,MAAA;GAAa,MAAA,CAAA,2BAA2B,EAAE,MAAM,YAAW,CAAE;;;GAG7D,MAAA;GAAgB,MAAA,CAAA,2BAA2B,EAAE,MAAM,WAAU,CAAE;;;GAG/D,MAAA;GAAU,MAAA,CAAA,eAAe,EAAE,MAAM,WAAU,CAAE;;;GAG7C,MAAA;GAAU,MAAA,CAAA,gBAAgB;;;GAG1B,MAAA;GAAU,MAAA,CAAA,eAAe;IAAE,QAAQ;IAAM,MAAM;GAAU,CAAE;;;GAG3D,MAAA;GAAU,MAAA,CAAA,gBAAgB;IAAE,QAAQ;IAAM,MAAM;GAAU,CAAE;;;GAO5D,MAAA;GAAU,MAAA,CAAA,wBAAwB;;;GAYlC,MAAA;GAAa,MAAA,CAAA,eAAe,EAAE,MAAM,WAAU,CAAE;;;GAIhD,MAAA;GAAgB,MAAA,CAAA,eAAe,EAAE,MAAM,WAAU,CAAE;;;GA+PnD,MAAA;GAAa,MAAA,CAAA,aAAa,CAAC,QAAQ,CAAC;;;GAQpC,MAAA;GAAa,MAAA,CAAA,cAAc,CAAC,QAAQ,CAAC;;;GAOrC,MAAA;GAAa,MAAA,CAAA,UAAU;;;GAkCvB,MAAA;GAAa,MAAA,CAAA,aAAa;;;GAQ1B,MAAA;GAAa,MAAA,CAAA,gBAAgB;;;GAK7B,MAAA;GAAa,MAAA,CAAA,iBAAiB,CAAC,QAAQ,CAAC;;;;IAWxC,MAAA;IAAa,MAAA,CAAA,mBAAmB,CAAC,QAAQ,CAAC;;;IAC1C,MAAA;IAAa,MAAA,CAAA,qBAAqB,CAAC,QAAQ,CAAC;;;IAC5C,MAAA;IAAa,MAAA,CAAA,kBAAkB,CAAC,QAAQ,CAAC;;;IACzC,MAAA;IAAa,MAAA,CAAA,oBAAoB,CAAC,QAAQ,CAAC;;;IAC3C,MAAA;IAAa,MAAA,CAAA,gBAAgB,CAAC,QAAQ,CAAC;;;IACvC,MAAA;IAAa,MAAA,CAAA,eAAe,CAAC,QAAQ,CAAC"}
+{"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.keyboard-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

@@ -29,7 +29,7 @@ var ImageBannerHeightDirective = class ImageBannerHeightDirective {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ImageBannerHeightDirective,
 			deps: [],
@@ -39,7 +39,7 @@ var ImageBannerHeightDirective = class ImageBannerHeightDirective {
 	static {
 		this.ɵdir = i0.ɵɵngDeclareDirective({
 			minVersion: "14.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ImageBannerHeightDirective,
 			isStandalone: true,
 			selector: "[kirbyImageBannerResize]",
@@ -49,7 +49,7 @@ var ImageBannerHeightDirective = class ImageBannerHeightDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ImageBannerHeightDirective,
 	decorators: [{
@@ -80,7 +80,7 @@ var ImageBannerComponent = class ImageBannerComponent {
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
 			minVersion: "12.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			ngImport: i0,
 			type: ImageBannerComponent,
 			deps: [{ token: i1.TranslationService }],
@@ -90,7 +90,7 @@ var ImageBannerComponent = class ImageBannerComponent {
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
 			minVersion: "17.0.0",
-			version: "22.2.2",
+			version: "22.2.3",
 			type: ImageBannerComponent,
 			isStandalone: true,
 			selector: "kirby-x-image-banner",
@@ -114,8 +114,8 @@ 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"],
+			template: "<kirby-card [variant]=\"backgroundBlur === 'dark' ? 'brand' : 'raised'\">\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]=\"'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]=\"'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]=\"'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]=\"'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      [noDecoration]=\"true\"\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}: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}@media(hover:hover){button.dismiss:hover{--kirby-button-background-color: rgba(0 0 0 / var(--kirby-opacity-20));--kirby-button-border-color: rgba(0 0 0 / var(--kirby-opacity-20))}}button.dismiss:active{--kirby-button-background-color: rgba(0 0 0 / var(--kirby-opacity-40));--kirby-button-border-color: rgba(0 0 0 / var(--kirby-opacity-40))}.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",
@@ -149,12 +149,6 @@ var ImageBannerComponent = class ImageBannerComponent {
 					type: IconComponent,
 					selector: "kirby-icon",
 					inputs: ["size", "name"]
-				},
-				{
-					kind: "directive",
-					type: ThemeColorDirective,
-					selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]",
-					inputs: ["themeColor"]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.Eager
@@ -163,7 +157,7 @@ var ImageBannerComponent = class ImageBannerComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ImageBannerComponent,
 	decorators: [{
@@ -178,8 +172,8 @@ 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"]
+			template: "<kirby-card [variant]=\"backgroundBlur === 'dark' ? 'brand' : 'raised'\">\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]=\"'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]=\"'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]=\"'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]=\"'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      [noDecoration]=\"true\"\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}: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}@media(hover:hover){button.dismiss:hover{--kirby-button-background-color: rgba(0 0 0 / var(--kirby-opacity-20));--kirby-button-border-color: rgba(0 0 0 / var(--kirby-opacity-20))}}button.dismiss:active{--kirby-button-background-color: rgba(0 0 0 / var(--kirby-opacity-40));--kirby-button-border-color: rgba(0 0 0 / var(--kirby-opacity-40))}.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 }],