@kirbydesign/extensions-angular 5.1.0 → 6.0.0-dev-d045bb2

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

@@ -1,855 +1,900 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, RendererStyleFlags2, ElementRef, TemplateRef, forwardRef, HostListener, ContentChildren, ViewChildren, ViewChild, ContentChild, HostBinding, Output, Input, ChangeDetectionStrategy, Component } 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 { InputSize, InputComponent, AffixDirective } from '@kirbydesign/designsystem/form-field';
-import { FORM_FIELD_CONTROL } from '@kirbydesign/designsystem/types';
-import * as i1 from '@kirbydesign/designsystem/shared';
-import { forwardAttributes } from '@kirbydesign/designsystem/shared';
-import { IconComponent } from '@kirbydesign/designsystem/icon';
-import { NgTemplateOutlet } from '@angular/common';
-import { CdkFixedSizeVirtualScroll, CdkVirtualScrollViewport, CdkVirtualForOf } from '@angular/cdk/scrolling';
-
+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 { 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";
+import * as i1 from "@kirbydesign/designsystem/shared";
+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 OpenState;
-(function (OpenState) {
-    OpenState[OpenState["closed"] = 0] = "closed";
-    OpenState[OpenState["opening"] = 1] = "opening";
-    OpenState[OpenState["open"] = 2] = "open";
+(function(OpenState) {
+	OpenState[OpenState["closed"] = 0] = "closed";
+	OpenState[OpenState["opening"] = 1] = "opening";
+	OpenState[OpenState["open"] = 2] = "open";
 })(OpenState || (OpenState = {}));
-
-class ComboboxComponent {
-    static { this.HEIGHT_OF_STANDARD_ITEM = 44; }
-    compareAlphabetically(textA, textB) {
-        if (textA < textB) {
-            return -1;
-        }
-        if (textA > textB) {
-            return 1;
-        }
-        return 0;
-    }
-    getItemText(item) {
-        if (this.isTypeString(item)) {
-            return item;
-        }
-        if (this.objectHasItemTextProperty(item)) {
-            const objectItem = item;
-            const textValue = objectItem[this.itemTextProperty];
-            if (typeof textValue === 'string') {
-                return textValue;
-            }
-        }
-        return '';
-    }
-    get dropdownMaxHeight() {
-        return 8 * ComboboxComponent.HEIGHT_OF_STANDARD_ITEM;
-    }
-    get dropdownMinHeight() {
-        return this.itemHeight;
-    }
-    get viewportHeight() {
-        const itemCount = this.searchItems?.length ?? 0;
-        if (itemCount === 0) {
-            return this.dropdownMinHeight;
-        }
-        return Math.min(this.dropdownMaxHeight, Math.max(this.dropdownMinHeight, itemCount * this.itemHeight));
-    }
-    isTypeString(item) {
-        return typeof item === 'string';
-    }
-    objectHasItemTextProperty(item) {
-        return item != undefined && typeof item === 'object' && this.itemTextProperty in item;
-    }
-    objectHasItemIdProperty(item) {
-        return item != undefined && typeof item === 'object' && this.itemIdProperty in item;
-    }
-    getItemId(item) {
-        if (this.isTypeString(item)) {
-            return item;
-        }
-        if (this.objectHasItemIdProperty(item)) {
-            const objectItem = item;
-            const idValue = objectItem[this.itemIdProperty];
-            if (this.isTypeString(idValue)) {
-                return idValue;
-            }
-        }
-        console.error('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.');
-        return '';
-    }
-    get searchItems() {
-        return this._searchItems;
-    }
-    set searchItems(value) {
-        this._searchItems = value;
-        if (!this._searchItems) {
-            return;
-        }
-        // only set the focused item of the search result, if the input has value
-        if (this.textInput?.nativeElement?.value) {
-            this.focusedItem = this._searchItems[0];
-            this._virtualScrollViewport?.scrollToIndex(0);
-        }
-    }
-    get items() {
-        return this._items;
-    }
-    /**
-     * The list of items to display in the dropdown.
-     * @param value
-     */
-    set items(value) {
-        this._items = value;
-        this.searchItems = this._items;
-    }
-    get selectedItem() {
-        return this._selectedItem;
-    }
-    /**
-     * The currently selected item.
-     * @param value
-     */
-    set selectedItem(value) {
-        // Allow clearing by setting undefined
-        if (value !== this._selectedItem) {
-            this._selectedItem = value;
-            this.focusedItem = this._selectedItem;
-            // Keep ControlValueAccessor value in sync with the selected data item
-            this.value = this._selectedItem;
-            this.setInputDisplayValue(this.getItemText(this.selectedItem));
-        }
-    }
-    get focusedItem() {
-        return this._focusedItem;
-    }
-    set focusedItem(item) {
-        // the focus might not have changed, but where in the list might
-        this.setAriaPosinsetOnElement(item);
-        if (this._focusedItem === item) {
-            return;
-        }
-        this._focusedItem = item;
-    }
-    getIndexOfItem(item) {
-        return this.searchItems.indexOf(item);
-    }
-    getKirbyElement(item) {
-        const kirbyItems = this.getKirbyItems();
-        if (!kirbyItems || !item) {
-            return undefined;
-        }
-        const itemId = this.getItemId(item);
-        return kirbyItems.find((el) => el.nativeElement.id === itemId);
-    }
-    setAriaPosinsetOnElement(item) {
-        const element = this.getKirbyElement(item);
-        const index = this.getIndexOfItem(item);
-        const setsize = this.searchItems.length;
-        if (!element) {
-            return;
-        }
-        this.renderer.setAttribute(element.nativeElement, 'aria-setsize', setsize.toString());
-        this.renderer.setAttribute(element.nativeElement, 'aria-posinset', `${index + 1}`);
-    }
-    /**
-     * The direction in which the dropdown should open relative to the input.
-     * @param direction
-     */
-    set popout(direction) {
-        this._popout = direction || HorizontalDirection.right;
-    }
-    get popout() {
-        return this._popout;
-    }
-    get _isDisabled() {
-        return this.disabled ? 'disabled' : null;
-    }
-    /**
-     * When `true`, the combobox will be styled with error styles.
-     */
-    get hasError() {
-        return this._hasError;
-    }
-    set hasError(value) {
-        if (this._hasError !== value) {
-            this._hasError = value;
-            this.hasErrorChange.emit(this._hasError);
-        }
-    }
-    // Prevent Ionic blur on scroll
-    get _noBlurOnScroll() {
-        return true;
-    }
-    get _isBlockLevel() {
-        return this.expand === 'block';
-    }
-    get _isOpening() {
-        return this.state === OpenState.opening;
-    }
-    get isOpen() {
-        return this.state === OpenState.open;
-    }
-    get hasValue() {
-        return this.selectedItem != null;
-    }
-    get interactiveElement() {
-        return this.textInput.nativeElement;
-    }
-    forwardAriaLabelToCombobox() {
-        forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.rootElement.nativeElement);
-    }
-    set kirbyItemsSlotted(kirbyItems) {
-        const hasSlottedItems = this.disposeItemClickListeners?.length > 0;
-        if (hasSlottedItems) {
-            this.unlistenAllSlottedItems();
-        }
-        kirbyItems.forEach((kirbyItem) => {
-            this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');
-            const disposeClickListener = this.renderer.listen(kirbyItem.nativeElement, 'click', () => {
-                const id = kirbyItem.nativeElement.getAttribute('id');
-                const item = this.items.find((it) => this.getItemId(it) === id);
-                if (item) {
-                    this.onItemSelect(item);
-                }
-            });
-            this.disposeItemClickListeners.push(disposeClickListener);
-        });
-        this._kirbyItemsSlotted = kirbyItems;
-    }
-    get kirbyItemsSlotted() {
-        return this._kirbyItemsSlotted;
-    }
-    constructor(renderer, elementRef, cdr, resizeObserverService) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.resizeObserverService = resizeObserverService;
-        this.state = OpenState.closed;
-        this._popout = HorizontalDirection.right;
-        this._attributesToForward = ['aria-label', 'aria-labelledby'];
-        this._listboxId = UniqueIdGenerator.scopedTo('kirby-x-combobox').next();
-        this._comboboxId = UniqueIdGenerator.scopedTo('kirby-input').next();
-        this._defaultSearchFunction = (searchTerm, itemsToSearch) => {
-            if (!searchTerm) {
-                return itemsToSearch;
-            }
-            const lowerSearchTerm = searchTerm.toLowerCase();
-            return itemsToSearch
-                .filter((item) => this.getItemText(item).toLowerCase().includes(lowerSearchTerm))
-                .sort((a, b) => {
-                const textA = this.getItemText(a).toLowerCase();
-                const textB = this.getItemText(b).toLowerCase();
-                const textAStartsWith = textA.startsWith(searchTerm);
-                const textBStartsWith = textB.startsWith(searchTerm);
-                if (textAStartsWith && textBStartsWith) {
-                    return this.compareAlphabetically(textA, textB);
-                }
-                if (textAStartsWith) {
-                    return -1;
-                }
-                if (textBStartsWith) {
-                    return 1;
-                }
-                return this.compareAlphabetically(textA, textB);
-            });
-        };
-        /**
-         * The text to display when the search returns no results.
-         */
-        this.noSearchResultsText = 'No results found.';
-        /**
-         * The text announced by screen readers when the selection is cleared.
-         */
-        this.selectionClearedAnnouncement = 'Selection cleared.';
-        this._liveRegionText = '';
-        /**
-         * The name of the property to use as the display text for each item.
-         */
-        this.itemTextProperty = 'text';
-        /**
-         * 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.
-         */
-        this.itemHeight = 44;
-        /**
-         * The name of the property to use as the unique identifier for each item.
-         */
-        this.itemIdProperty = 'id';
-        /**
-         * A function that takes a search term and the list of items, and returns a filtered list of items to display in the dropdown.
-         */
-        this.searchFunction = this._defaultSearchFunction;
-        this._searchItems = [];
-        this._items = [];
-        this._selectedItem = undefined;
-        // _focusedItem keeps track of which element has focus and will be selected
-        // if it is activated (by pressing ENTER)
-        this._focusedItem = undefined;
-        /**
-         * The placeholder text to display in the input when no item is selected and the input is empty.
-         */
-        this.placeholder = 'Please search...';
-        /**
-         * When `true`, the user cannot interact with the combobox.
-         */
-        this.disabled = false;
-        /**
-         * Will emit the new value when error changes.
-         */
-        this.hasErrorChange = new EventEmitter();
-        this._hasError = false;
-        /**
-         * The size of the input element.
-         */
-        this.size = InputSize.medium;
-        /**
-         * Emitted when an item is selected (tap on mobile, click/keypress on web)
-         */
-        this.change = new EventEmitter();
-        this.value = undefined;
-        this.disposeItemClickListeners = [];
-        this.onChange = () => {
-            /* empty */
-        };
-        this.onTouched = () => {
-            /* empty */
-        };
-    }
-    onToggle(event) {
-        event.stopPropagation();
-        this.textInput?.nativeElement.focus();
-        this.toggle();
-    }
-    toggle() {
-        if (this.disabled) {
-            return;
-        }
-        this.isOpen ? this.close() : this.open();
-    }
-    ngAfterViewInit() {
-        if (this.expand === 'block') {
-            const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();
-            this.setPopoverCardStyle('max-width', 'initial');
-            this.setPopoverCardStyle('min-width', 'initial');
-            // Ensure initial width is set even if the resize observer callback also fires initially:
-            this.setPopoverCardStyle('--kirby-card-width', `${initialWidth}px`);
-            this.resizeObserverService.observe(this.elementRef, (entry) => {
-                const newWidth = entry.contentRect.width;
-                if (newWidth > 0) {
-                    this.setPopoverCardStyle('--kirby-card-width', `${newWidth}px`);
-                }
-            });
-        }
-        this.forwardAriaLabelToCombobox();
-    }
-    /* Utility that makes it easier to set styles on card element */
-    setPopoverCardStyle(style, value) {
-        this.renderer.setStyle(this.cardElement?.nativeElement, style, value, RendererStyleFlags2.DashCase);
-    }
-    ngOnDestroy() {
-        this.unlistenAllSlottedItems();
-        this.unobserveResize();
-    }
-    open() {
-        if (this.disabled) {
-            return;
-        }
-        if (!this.isOpen) {
-            this.state = OpenState.opening;
-            this.showPopOver();
-            this.focusedItem = this.selectedItem;
-        }
-    }
-    showPopOver() {
-        if (this.state === OpenState.opening) {
-            this.state = OpenState.open;
-            this.popover?.show();
-            this.cdr.markForCheck();
-            // PopoverComponent.show() appends the element to document.body synchronously but
-            // finishes positioning in a requestAnimationFrame. One rAF is enough to let the
-            // browser compute layout so the CDK viewport has a real size before we scroll.
-            requestAnimationFrame(() => this.scrollToIndexIntoViewWhenOpeningPopup());
-        }
-    }
-    close() {
-        if (this.disabled) {
-            return;
-        }
-        if (this.isOpen) {
-            this.state = OpenState.closed;
-            this.setInputDisplayValue(this.getItemText(this.selectedItem));
-            this.searchItems = this.items;
-            this.popover?.hide();
-        }
-    }
-    onItemSelect(item) {
-        // Guard: slotted click listeners should map back to a data item, but be safe.
-        if (item instanceof HTMLElement)
-            return;
-        this.selectItem(item);
-        this.close();
-    }
-    /**
-     * Sets the select's value. Part of the ControlValueAccessor interface
-     * required to integrate with Angular's core forms API.
-     *
-     * @param value New value to be written to the model.
-     */
-    writeValue(value) {
-        this.selectItemByInput(value);
-        // When written from outside, reflect selected text in the input
-        this.setInputDisplayValue(this.getItemText(this.value));
-        this.cdr.markForCheck();
-    }
-    /**
-     * Saves a callback function to be invoked when the select's value
-     * changes from user input. Part of the ControlValueAccessor interface
-     * required to integrate with Angular's core forms API.
-     *
-     * @param fn Callback to be triggered when the value changes.
-     */
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    /**
-     * Saves a callback function to be invoked when the select is blurred
-     * by the user. Part of the ControlValueAccessor interface required
-     * to integrate with Angular's core forms API.
-     *
-     * @param fn Callback to be triggered when the component has been touched.
-     */
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    /**
-     * Disables the select. Part of the ControlValueAccessor interface required
-     * to integrate with Angular's core forms API.
-     *
-     * @param isDisabled Sets whether the component is disabled.
-     */
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    selectItem(item) {
-        if (item != this.selectedItem) {
-            this.selectedItem = item;
-            this.focusedItem = item;
-            this.change.emit(this.value);
-            this.onChange(this.value);
-            this.setInputDisplayValue(this.getItemText(item));
-            this.searchItems = this.items;
-        }
-    }
-    selectItemByInput(input) {
-        this.selectedItem = this.findItemByInput(input);
-    }
-    onInput(event) {
-        if (!this.isOpen) {
-            this.open();
-        }
-        const input = event.target;
-        if (!input.value) {
-            this.clearSelection();
-        }
-        this.updateSearchResults(input.value);
-        // Screen readers (VoiceOver/NVDA) may move real browser focus to a list-item button.
-        // When the list re-renders after filtering, that button is removed from the DOM and
-        // focus falls to `document.body`. Restore it to the input so the user can keep typing
-        // and the focusout handler doesn't mistake the body-focus for a genuine blur-away.
-        if (document.activeElement !== this.textInput?.nativeElement) {
-            this.textInput?.nativeElement.focus();
-        }
-    }
-    clearSelection() {
-        this.selectItem(undefined);
-        // Reset after a short delay so the same message can be announced again on subsequent clears
-        this.announce(this.selectionClearedAnnouncement);
-    }
-    announce(message) {
-        clearTimeout(this._announceTimeout);
-        this._liveRegionText = '';
-        this._announceTimeout = setTimeout(() => {
-            this._liveRegionText = message;
-            this.cdr.markForCheck();
-        }, 100);
-    }
-    updateSearchResults(inputValue) {
-        this.searchItems = inputValue ? this.searchFunction(inputValue, this.items) : this.items;
-        if (inputValue && this.searchItems.length === 0) {
-            this.announce(this.noSearchResultsText);
-        }
-    }
-    onPopoverWillHide() {
-        this.state = OpenState.closed;
-        this.rootElement.nativeElement.focus();
-        this.onTouched();
-    }
-    onPopoverClick() {
-        this.close();
-    }
-    onMouseDown(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-    }
-    onTouchStart(event) {
-        if (this.isOpen) {
-            event.stopPropagation();
-        }
-    }
-    onFocusOut() {
-        // Defer the check to allow the browser (and screen readers like VoiceOver/NVDA)
-        // to settle focus. `relatedTarget` is often `null` with screen readers, so we
-        // inspect `document.activeElement` after the microtask queue has flushed.
-        setTimeout(() => {
-            const activeElement = document.activeElement;
-            const isOnTriggerButton = activeElement && this.elementRef.nativeElement.contains(activeElement);
-            const isInsidePopover = activeElement && activeElement.closest('kirby-popover');
-            if (isOnTriggerButton || isInsidePopover) {
-                // Focus is still within the component — nothing to do.
-                return;
-            }
-            // When a screen reader (VoiceOver/NVDA) moves real focus to a list-item button
-            // and the user then types a character, CDK virtual scroll re-renders the list and
-            // removes the focused button from the DOM. The browser then drops focus to
-            // `document.body`. Detect this case: if the popover is still showing and focus is
-            // on the body, it means focus was lost due to DOM removal — restore it to the
-            // input rather than closing the popover.
-            if (this.isOpen && activeElement === document.body) {
-                this.textInput?.nativeElement.focus();
-                return;
-            }
-            if (this.isOpen) {
-                this.close();
-            }
-            this.onTouched();
-        }, 0);
-    }
-    onTab() {
-        if (this.isOpen) {
-            this.selectItem(this.focusedItem);
-            this.close();
-        }
-    }
-    onEscape() {
-        this.close();
-    }
-    onEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.isOpen) {
-            this.selectItem(this.focusedItem);
-        }
-        this.toggle();
-    }
-    onArrowKeys(event) {
-        if (this.disabled)
-            return;
-        const keyEvent = event; // safe in this context
-        // Avoid page scroll
-        event.preventDefault();
-        if (!this.isOpen) {
-            this.open();
-            if (this.selectedItem) {
-                this.setFocusOnSelectedItem();
-            }
-            else {
-                this.setFocusOnFirstOrLastItem(keyEvent);
-            }
-        }
-        else {
-            this.handleFocusNavigation(keyEvent);
-        }
-    }
-    handleFocusNavigation(keyEvent) {
-        switch (keyEvent.key) {
-            case 'ArrowDown':
-                this.shiftFocusIndex(1);
-                break;
-            case 'ArrowUp':
-                this.shiftFocusIndex(-1);
-                break;
-            case 'PageDown':
-                this.shiftFocusIndex(10);
-                break;
-            case 'PageUp':
-                this.shiftFocusIndex(-10);
-                break;
-            case 'Home':
-                this.setFocusOnFirstItem();
-                break;
-            case 'End':
-                this.setFocusOnLastItem();
-                break;
-            default:
-                break;
-        }
-    }
-    shiftFocusIndex(numberOfItems) {
-        // Handle up/down navigation when open
-        const currentIndex = this.searchItems.indexOf(this.focusedItem);
-        let newIndex;
-        if (numberOfItems > 0) {
-            newIndex = Math.min(this.searchItems.length - 1, currentIndex + numberOfItems);
-        }
-        else {
-            newIndex = Math.max(0, currentIndex + numberOfItems);
-        }
-        if (newIndex !== currentIndex) {
-            this.focusedItem = this.searchItems[newIndex];
-        }
-        this.scrollFocusedItemIntoViewWhileNavigating();
-    }
-    setFocusOnFirstOrLastItem(keyEvent) {
-        switch (keyEvent.key) {
-            case 'ArrowDown':
-            case 'PageDown':
-            case 'Home':
-                this.setFocusOnFirstItem();
-                break;
-            case 'ArrowUp':
-            case 'PageUp':
-            case 'End':
-                this.setFocusOnLastItem();
-                break;
-            default:
-                break;
-        }
-    }
-    setFocusOnSelectedItem() {
-        if (this.selectedItem) {
-            this.focusedItem = this.selectedItem;
-        }
-    }
-    setFocusOnLastItem() {
-        if (this.searchItems.length > 0) {
-            this.focusedItem = this.searchItems[this.searchItems.length - 1];
-        }
-    }
-    setFocusOnFirstItem() {
-        if (this.searchItems.length > 0) {
-            this.focusedItem = this.searchItems[0];
-        }
-    }
-    unlistenAllSlottedItems() {
-        let disposeClickListener;
-        while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {
-            disposeClickListener();
-        }
-    }
-    unobserveResize() {
-        this.resizeObserverService.unobserve(this.elementRef);
-    }
-    /**
-     * Resolve a model/data item based on current `items` by comparing displayed text.
-     * This is used to map an incoming form value or input `selectedItem` to an item
-     * from the list.
-     */
-    findItemByInput(input) {
-        if (!this.items || this.items.length === 0) {
-            return input;
-        }
-        return this.items.find((it) => this.getItemText(it) === input) ?? input;
-    }
-    setInputDisplayValue(value) {
-        // We intentionally update the DOM input imperatively ("hard way")
-        // to ensure the visible value is cleared/updated immediately.
-        if (this.interactiveElement) {
-            this.renderer.setProperty(this.interactiveElement, 'value', value);
-        }
-    }
-    scrollFocusedItemIntoViewWhileNavigating() {
-        if (!this.focusedItem || !this._virtualScrollViewport) {
-            return;
-        }
-        const focusedIndex = this.searchItems.indexOf(this.focusedItem);
-        if (focusedIndex === -1)
-            return;
-        const itemTop = focusedIndex * this.itemHeight;
-        const itemBottom = itemTop + this.itemHeight;
-        const scrollOffset = this._virtualScrollViewport.measureScrollOffset();
-        const viewportSize = this._virtualScrollViewport.getViewportSize();
-        if (itemTop < scrollOffset) {
-            // Item is above the visible area — scroll up so item appears at the top.
-            this._virtualScrollViewport.scrollToOffset(itemTop);
-        }
-        else if (itemBottom > scrollOffset + viewportSize) {
-            // Item is below the visible area — scroll down so item appears at the bottom.
-            this._virtualScrollViewport.scrollToOffset(itemBottom - viewportSize);
-        }
-        this._virtualScrollViewport.checkViewportSize();
-    }
-    getKirbyItems() {
-        return this.kirbyItemsSlotted && this.kirbyItemsSlotted.length
-            ? this.kirbyItemsSlotted
-            : this.kirbyItemsDefault;
-    }
-    scrollToIndexIntoViewWhenOpeningPopup() {
-        const focusedIndex = this.searchItems.indexOf(this.focusedItem);
-        this._virtualScrollViewport?.setRenderedRange({ start: 0, end: 20 });
-        this._virtualScrollViewport?.checkViewportSize();
-        this._virtualScrollViewport?.scrollToIndex(focusedIndex);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComboboxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ComboboxComponent, isStandalone: true, selector: "kirby-x-combobox", inputs: { noSearchResultsText: "noSearchResultsText", selectionClearedAnnouncement: "selectionClearedAnnouncement", itemTextProperty: "itemTextProperty", itemHeight: "itemHeight", itemIdProperty: "itemIdProperty", searchFunction: "searchFunction", items: "items", selectedItem: "selectedItem", placeholder: "placeholder", popout: "popout", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size" }, outputs: { hasErrorChange: "hasErrorChange", change: "change" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onTouchStart($event)", "focusout": "onFocusOut()", "keydown.tab": "onTab()", "keydown.escape": "onEscape()", "keydown.enter": "onEnter($event)", "keydown.arrowUp": "onArrowKeys($event)", "keydown.arrowDown": "onArrowKeys($event)", "keydown.pageUp": "onArrowKeys($event)", "keydown.pageDown": "onArrowKeys($event)", "keydown.home": "onArrowKeys($event)", "keydown.end": "onArrowKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.has-value": "this.hasValue" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ComboboxComponent),
-                multi: true,
-            },
-            {
-                provide: FORM_FIELD_CONTROL,
-                useExisting: forwardRef(() => ComboboxComponent),
-            },
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "rootElement", first: true, predicate: ["rootElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "textInput", first: true, predicate: InputComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "_virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], 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"], dependencies: [{ kind: "component", type: InputComponent, selector: "input[kirby-input]", inputs: ["type", "size", "borderless", "hasError", "autocomplete", "autocorrect", "value", "maxlength", "inputmode"], outputs: ["hasErrorChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "directive", type: AffixDirective, selector: "[kirby-affix]", inputs: ["kirby-affix"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ComboboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-x-combobox', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ComboboxComponent),
-                            multi: true,
-                        },
-                        {
-                            provide: FORM_FIELD_CONTROL,
-                            useExisting: forwardRef(() => ComboboxComponent),
-                        },
-                    ], imports: [
-                        InputComponent,
-                        NgTemplateOutlet,
-                        PopoverComponent,
-                        CardComponent,
-                        ItemComponent,
-                        IconComponent,
-                        AffixDirective,
-                        CdkFixedSizeVirtualScroll,
-                        CdkVirtualScrollViewport,
-                        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"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ResizeObserverService }], propDecorators: { noSearchResultsText: [{
-                type: Input
-            }], selectionClearedAnnouncement: [{
-                type: Input
-            }], itemTextProperty: [{
-                type: Input
-            }], itemHeight: [{
-                type: Input
-            }], itemIdProperty: [{
-                type: Input
-            }], searchFunction: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], selectedItem: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], popout: [{
-                type: Input
-            }], expand: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], _isDisabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], hasErrorChange: [{
-                type: Output
-            }], hasError: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], _noBlurOnScroll: [{
-                type: HostBinding,
-                args: ['attr.no-blur']
-            }], change: [{
-                type: Output
-            }], _isBlockLevel: [{
-                type: HostBinding,
-                args: ['class.expand']
-            }], _isOpening: [{
-                type: HostBinding,
-                args: ['class.is-opening']
-            }], isOpen: [{
-                type: HostBinding,
-                args: ['class.is-open']
-            }], hasValue: [{
-                type: HostBinding,
-                args: ['class.has-value']
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [ListItemTemplateDirective, { read: TemplateRef }]
-            }], slottedItems: [{
-                type: ContentChildren,
-                args: [ListItemTemplateDirective, { read: ElementRef }]
-            }], cardElement: [{
-                type: ViewChild,
-                args: [CardComponent, { read: ElementRef }]
-            }], popover: [{
-                type: ViewChild,
-                args: [PopoverComponent]
-            }], rootElement: [{
-                type: ViewChild,
-                args: ['rootElement', { static: true, read: ElementRef }]
-            }], textInput: [{
-                type: ViewChild,
-                args: [InputComponent, { static: true, read: ElementRef }]
-            }], _virtualScrollViewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport]
-            }], kirbyItemsDefault: [{
-                type: ViewChildren,
-                args: [ItemComponent, { read: ElementRef }]
-            }], kirbyItemsSlotted: [{
-                type: ContentChildren,
-                args: [ItemComponent, { read: ElementRef }]
-            }], onMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], onTouchStart: [{
-                type: HostListener,
-                args: ['touchstart', ['$event']]
-            }], onFocusOut: [{
-                type: HostListener,
-                args: ['focusout']
-            }], onTab: [{
-                type: HostListener,
-                args: ['keydown.tab']
-            }], onEscape: [{
-                type: HostListener,
-                args: ['keydown.escape']
-            }], onEnter: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }], onArrowKeys: [{
-                type: HostListener,
-                args: ['keydown.arrowUp', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.arrowDown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.pageUp', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.pageDown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.home', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.end', ['$event']]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var ComboboxComponent = class ComboboxComponent {
+	static {
+		this.HEIGHT_OF_STANDARD_ITEM = 44;
+	}
+	compareAlphabetically(textA, textB) {
+		if (textA < textB) return -1;
+		if (textA > textB) return 1;
+		return 0;
+	}
+	getItemText(item) {
+		if (this.isTypeString(item)) return item;
+		if (this.objectHasItemTextProperty(item)) {
+			const textValue = item[this.itemTextProperty];
+			if (typeof textValue === "string") return textValue;
+		}
+		return "";
+	}
+	get dropdownMaxHeight() {
+		return 8 * ComboboxComponent.HEIGHT_OF_STANDARD_ITEM;
+	}
+	get dropdownMinHeight() {
+		return this.itemHeight;
+	}
+	get viewportHeight() {
+		const itemCount = this.searchItems?.length ?? 0;
+		if (itemCount === 0) return this.dropdownMinHeight;
+		return Math.min(this.dropdownMaxHeight, Math.max(this.dropdownMinHeight, itemCount * this.itemHeight));
+	}
+	isTypeString(item) {
+		return typeof item === "string";
+	}
+	objectHasItemTextProperty(item) {
+		return item != void 0 && typeof item === "object" && this.itemTextProperty in item;
+	}
+	objectHasItemIdProperty(item) {
+		return item != void 0 && typeof item === "object" && this.itemIdProperty in item;
+	}
+	getItemId(item) {
+		if (this.isTypeString(item)) return item;
+		if (this.objectHasItemIdProperty(item)) {
+			const idValue = item[this.itemIdProperty];
+			if (this.isTypeString(idValue)) return idValue;
+		}
+		console.error("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.");
+		return "";
+	}
+	get searchItems() {
+		return this._searchItems;
+	}
+	set searchItems(value) {
+		this._searchItems = value;
+		if (!this._searchItems) return;
+		if (this.textInput?.nativeElement?.value) {
+			this.focusedItem = this._searchItems[0];
+			this._virtualScrollViewport?.scrollToIndex(0);
+		}
+	}
+	get items() {
+		return this._items;
+	}
+	set items(value) {
+		this._items = value;
+		this.searchItems = this._items;
+	}
+	get selectedItem() {
+		return this._selectedItem;
+	}
+	set selectedItem(value) {
+		if (value !== this._selectedItem) {
+			this._selectedItem = value;
+			this.focusedItem = this._selectedItem;
+			this.value = this._selectedItem;
+			this.setInputDisplayValue(this.getItemText(this.selectedItem));
+		}
+	}
+	get focusedItem() {
+		return this._focusedItem;
+	}
+	set focusedItem(item) {
+		this.setAriaPosinsetOnElement(item);
+		if (this._focusedItem === item) return;
+		this._focusedItem = item;
+	}
+	getIndexOfItem(item) {
+		return this.searchItems.indexOf(item);
+	}
+	getKirbyElement(item) {
+		const kirbyItems = this.getKirbyItems();
+		if (!kirbyItems || !item) return;
+		const itemId = this.getItemId(item);
+		return kirbyItems.find((el) => el.nativeElement.id === itemId);
+	}
+	setAriaPosinsetOnElement(item) {
+		const element = this.getKirbyElement(item);
+		const index = this.getIndexOfItem(item);
+		const setsize = this.searchItems.length;
+		if (!element) return;
+		this.renderer.setAttribute(element.nativeElement, "aria-setsize", setsize.toString());
+		this.renderer.setAttribute(element.nativeElement, "aria-posinset", `${index + 1}`);
+	}
+	set popout(direction) {
+		this._popout = direction || HorizontalDirection.right;
+	}
+	get popout() {
+		return this._popout;
+	}
+	get _isDisabled() {
+		return this.disabled ? "disabled" : null;
+	}
+	get hasError() {
+		return this._hasError;
+	}
+	set hasError(value) {
+		if (this._hasError !== value) {
+			this._hasError = value;
+			this.hasErrorChange.emit(this._hasError);
+		}
+	}
+	get _noBlurOnScroll() {
+		return true;
+	}
+	get _isBlockLevel() {
+		return this.expand === "block";
+	}
+	get _isOpening() {
+		return this.state === OpenState.opening;
+	}
+	get isOpen() {
+		return this.state === OpenState.open;
+	}
+	get hasValue() {
+		return this.selectedItem != null;
+	}
+	get interactiveElement() {
+		return this.textInput.nativeElement;
+	}
+	forwardAriaLabelToCombobox() {
+		forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.rootElement.nativeElement);
+	}
+	set kirbyItemsSlotted(kirbyItems) {
+		if (this.disposeItemClickListeners?.length > 0) this.unlistenAllSlottedItems();
+		kirbyItems.forEach((kirbyItem) => {
+			this.renderer.setAttribute(kirbyItem.nativeElement, "role", "option");
+			const disposeClickListener = this.renderer.listen(kirbyItem.nativeElement, "click", () => {
+				const id = kirbyItem.nativeElement.getAttribute("id");
+				const item = this.items.find((it) => this.getItemId(it) === id);
+				if (item) this.onItemSelect(item);
+			});
+			this.disposeItemClickListeners.push(disposeClickListener);
+		});
+		this._kirbyItemsSlotted = kirbyItems;
+	}
+	get kirbyItemsSlotted() {
+		return this._kirbyItemsSlotted;
+	}
+	constructor(renderer, elementRef, cdr, resizeObserverService) {
+		this.renderer = renderer;
+		this.elementRef = elementRef;
+		this.cdr = cdr;
+		this.resizeObserverService = resizeObserverService;
+		this.state = OpenState.closed;
+		this._popout = HorizontalDirection.right;
+		this._attributesToForward = ["aria-label", "aria-labelledby"];
+		this._listboxId = UniqueIdGenerator.scopedTo("kirby-x-combobox").next();
+		this._comboboxId = UniqueIdGenerator.scopedTo("kirby-input").next();
+		this._defaultSearchFunction = (searchTerm, itemsToSearch) => {
+			if (!searchTerm) return itemsToSearch;
+			const lowerSearchTerm = searchTerm.toLowerCase();
+			return itemsToSearch.filter((item) => this.getItemText(item).toLowerCase().includes(lowerSearchTerm)).sort((a, b) => {
+				const textA = this.getItemText(a).toLowerCase();
+				const textB = this.getItemText(b).toLowerCase();
+				const textAStartsWith = textA.startsWith(searchTerm);
+				const textBStartsWith = textB.startsWith(searchTerm);
+				if (textAStartsWith && textBStartsWith) return this.compareAlphabetically(textA, textB);
+				if (textAStartsWith) return -1;
+				if (textBStartsWith) return 1;
+				return this.compareAlphabetically(textA, textB);
+			});
+		};
+		this.noSearchResultsText = "No results found.";
+		this.selectionClearedAnnouncement = "Selection cleared.";
+		this._liveRegionText = "";
+		this.itemTextProperty = "text";
+		this.itemHeight = 44;
+		this.itemIdProperty = "id";
+		this.searchFunction = this._defaultSearchFunction;
+		this._searchItems = [];
+		this._items = [];
+		this._selectedItem = void 0;
+		this._focusedItem = void 0;
+		this.placeholder = "Please search...";
+		this.disabled = false;
+		this.hasErrorChange = new EventEmitter();
+		this._hasError = false;
+		this.size = InputSize.medium;
+		this.change = new EventEmitter();
+		this.value = void 0;
+		this.disposeItemClickListeners = [];
+		this.onChange = () => {};
+		this.onTouched = () => {};
+	}
+	onToggle(event) {
+		event.stopPropagation();
+		this.textInput?.nativeElement.focus();
+		this.toggle();
+	}
+	toggle() {
+		if (this.disabled) return;
+		this.isOpen ? this.close() : this.open();
+	}
+	ngAfterViewInit() {
+		if (this.expand === "block") {
+			const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();
+			this.setPopoverCardStyle("max-width", "initial");
+			this.setPopoverCardStyle("min-width", "initial");
+			this.setPopoverCardStyle("--kirby-card-width", `${initialWidth}px`);
+			this.resizeObserverService.observe(this.elementRef, (entry) => {
+				const newWidth = entry.contentRect.width;
+				if (newWidth > 0) this.setPopoverCardStyle("--kirby-card-width", `${newWidth}px`);
+			});
+		}
+		this.forwardAriaLabelToCombobox();
+	}
+	setPopoverCardStyle(style, value) {
+		this.renderer.setStyle(this.cardElement?.nativeElement, style, value, RendererStyleFlags2.DashCase);
+	}
+	ngOnDestroy() {
+		this.unlistenAllSlottedItems();
+		this.unobserveResize();
+	}
+	open() {
+		if (this.disabled) return;
+		if (!this.isOpen) {
+			this.state = OpenState.opening;
+			this.showPopOver();
+			this.focusedItem = this.selectedItem;
+		}
+	}
+	showPopOver() {
+		if (this.state === OpenState.opening) {
+			this.state = OpenState.open;
+			this.popover?.show();
+			this.cdr.markForCheck();
+			requestAnimationFrame(() => this.scrollToIndexIntoViewWhenOpeningPopup());
+		}
+	}
+	close() {
+		if (this.disabled) return;
+		if (this.isOpen) {
+			this.state = OpenState.closed;
+			this.setInputDisplayValue(this.getItemText(this.selectedItem));
+			this.searchItems = this.items;
+			this.popover?.hide();
+		}
+	}
+	onItemSelect(item) {
+		if (item instanceof HTMLElement) return;
+		this.selectItem(item);
+		this.close();
+	}
+	writeValue(value) {
+		this.selectItemByInput(value);
+		this.setInputDisplayValue(this.getItemText(this.value));
+		this.cdr.markForCheck();
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	selectItem(item) {
+		if (item != this.selectedItem) {
+			this.selectedItem = item;
+			this.focusedItem = item;
+			this.change.emit(this.value);
+			this.onChange(this.value);
+			this.setInputDisplayValue(this.getItemText(item));
+			this.searchItems = this.items;
+		}
+	}
+	selectItemByInput(input) {
+		this.selectedItem = this.findItemByInput(input);
+	}
+	onInput(event) {
+		if (!this.isOpen) this.open();
+		const input = event.target;
+		if (!input.value) this.clearSelection();
+		this.updateSearchResults(input.value);
+		if (document.activeElement !== this.textInput?.nativeElement) this.textInput?.nativeElement.focus();
+	}
+	clearSelection() {
+		this.selectItem(void 0);
+		this.announce(this.selectionClearedAnnouncement);
+	}
+	announce(message) {
+		clearTimeout(this._announceTimeout);
+		this._liveRegionText = "";
+		this._announceTimeout = setTimeout(() => {
+			this._liveRegionText = message;
+			this.cdr.markForCheck();
+		}, 100);
+	}
+	updateSearchResults(inputValue) {
+		this.searchItems = inputValue ? this.searchFunction(inputValue, this.items) : this.items;
+		if (inputValue && this.searchItems.length === 0) this.announce(this.noSearchResultsText);
+	}
+	onPopoverWillHide() {
+		this.state = OpenState.closed;
+		this.rootElement.nativeElement.focus();
+		this.onTouched();
+	}
+	onPopoverClick() {
+		this.close();
+	}
+	onMouseDown(event) {
+		if (this.disabled) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	}
+	onTouchStart(event) {
+		if (this.isOpen) event.stopPropagation();
+	}
+	onFocusOut() {
+		setTimeout(() => {
+			const activeElement = document.activeElement;
+			const isOnTriggerButton = activeElement && this.elementRef.nativeElement.contains(activeElement);
+			const isInsidePopover = activeElement && activeElement.closest("kirby-popover");
+			if (isOnTriggerButton || isInsidePopover) return;
+			if (this.isOpen && activeElement === document.body) {
+				this.textInput?.nativeElement.focus();
+				return;
+			}
+			if (this.isOpen) this.close();
+			this.onTouched();
+		}, 0);
+	}
+	onTab() {
+		if (this.isOpen) {
+			this.selectItem(this.focusedItem);
+			this.close();
+		}
+	}
+	onEscape() {
+		this.close();
+	}
+	onEnter(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (this.isOpen) this.selectItem(this.focusedItem);
+		this.toggle();
+	}
+	onArrowKeys(event) {
+		if (this.disabled) return;
+		const keyEvent = event;
+		event.preventDefault();
+		if (!this.isOpen) {
+			this.open();
+			if (this.selectedItem) this.setFocusOnSelectedItem();
+			else this.setFocusOnFirstOrLastItem(keyEvent);
+		} else this.handleFocusNavigation(keyEvent);
+	}
+	handleFocusNavigation(keyEvent) {
+		switch (keyEvent.key) {
+			case "ArrowDown":
+				this.shiftFocusIndex(1);
+				break;
+			case "ArrowUp":
+				this.shiftFocusIndex(-1);
+				break;
+			case "PageDown":
+				this.shiftFocusIndex(10);
+				break;
+			case "PageUp":
+				this.shiftFocusIndex(-10);
+				break;
+			case "Home":
+				this.setFocusOnFirstItem();
+				break;
+			case "End": this.setFocusOnLastItem();
+		}
+	}
+	shiftFocusIndex(numberOfItems) {
+		const currentIndex = this.searchItems.indexOf(this.focusedItem);
+		let newIndex;
+		if (numberOfItems > 0) newIndex = Math.min(this.searchItems.length - 1, currentIndex + numberOfItems);
+		else newIndex = Math.max(0, currentIndex + numberOfItems);
+		if (newIndex !== currentIndex) this.focusedItem = this.searchItems[newIndex];
+		this.scrollFocusedItemIntoViewWhileNavigating();
+	}
+	setFocusOnFirstOrLastItem(keyEvent) {
+		switch (keyEvent.key) {
+			case "ArrowDown":
+			case "PageDown":
+			case "Home":
+				this.setFocusOnFirstItem();
+				break;
+			case "ArrowUp":
+			case "PageUp":
+			case "End": this.setFocusOnLastItem();
+		}
+	}
+	setFocusOnSelectedItem() {
+		if (this.selectedItem) this.focusedItem = this.selectedItem;
+	}
+	setFocusOnLastItem() {
+		if (this.searchItems.length > 0) this.focusedItem = this.searchItems[this.searchItems.length - 1];
+	}
+	setFocusOnFirstItem() {
+		if (this.searchItems.length > 0) this.focusedItem = this.searchItems[0];
+	}
+	unlistenAllSlottedItems() {
+		let disposeClickListener;
+		while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== void 0) disposeClickListener();
+	}
+	unobserveResize() {
+		this.resizeObserverService.unobserve(this.elementRef);
+	}
+	findItemByInput(input) {
+		if (!this.items || this.items.length === 0) return input;
+		return this.items.find((it) => this.getItemText(it) === input) ?? input;
+	}
+	setInputDisplayValue(value) {
+		if (this.interactiveElement) this.renderer.setProperty(this.interactiveElement, "value", value);
+	}
+	scrollFocusedItemIntoViewWhileNavigating() {
+		if (!this.focusedItem || !this._virtualScrollViewport) return;
+		const focusedIndex = this.searchItems.indexOf(this.focusedItem);
+		if (focusedIndex === -1) return;
+		const itemTop = focusedIndex * this.itemHeight;
+		const itemBottom = itemTop + this.itemHeight;
+		const scrollOffset = this._virtualScrollViewport.measureScrollOffset();
+		const viewportSize = this._virtualScrollViewport.getViewportSize();
+		if (itemTop < scrollOffset) this._virtualScrollViewport.scrollToOffset(itemTop);
+		else if (itemBottom > scrollOffset + viewportSize) this._virtualScrollViewport.scrollToOffset(itemBottom - viewportSize);
+		this._virtualScrollViewport.checkViewportSize();
+	}
+	getKirbyItems() {
+		return this.kirbyItemsSlotted && this.kirbyItemsSlotted.length ? this.kirbyItemsSlotted : this.kirbyItemsDefault;
+	}
+	scrollToIndexIntoViewWhenOpeningPopup() {
+		const focusedIndex = this.searchItems.indexOf(this.focusedItem);
+		this._virtualScrollViewport?.setRenderedRange({
+			start: 0,
+			end: 20
+		});
+		this._virtualScrollViewport?.checkViewportSize();
+		this._virtualScrollViewport?.scrollToIndex(focusedIndex);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: ComboboxComponent,
+			deps: [
+				{ token: i0.Renderer2 },
+				{ token: i0.ElementRef },
+				{ token: i0.ChangeDetectorRef },
+				{ token: i1.ResizeObserverService }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: ComboboxComponent,
+			isStandalone: true,
+			selector: "kirby-x-combobox",
+			inputs: {
+				noSearchResultsText: "noSearchResultsText",
+				selectionClearedAnnouncement: "selectionClearedAnnouncement",
+				itemTextProperty: "itemTextProperty",
+				itemHeight: "itemHeight",
+				itemIdProperty: "itemIdProperty",
+				searchFunction: "searchFunction",
+				items: "items",
+				selectedItem: "selectedItem",
+				placeholder: "placeholder",
+				popout: "popout",
+				expand: "expand",
+				disabled: "disabled",
+				hasError: "hasError",
+				size: "size"
+			},
+			outputs: {
+				hasErrorChange: "hasErrorChange",
+				change: "change"
+			},
+			host: {
+				listeners: {
+					"mousedown": "onMouseDown($event)",
+					"touchstart": "onTouchStart($event)",
+					"focusout": "onFocusOut()",
+					"keydown.tab": "onTab()",
+					"keydown.escape": "onEscape()",
+					"keydown.enter": "onEnter($event)",
+					"keydown.arrowUp": "onArrowKeys($event)",
+					"keydown.arrowDown": "onArrowKeys($event)",
+					"keydown.pageUp": "onArrowKeys($event)",
+					"keydown.pageDown": "onArrowKeys($event)",
+					"keydown.home": "onArrowKeys($event)",
+					"keydown.end": "onArrowKeys($event)"
+				},
+				properties: {
+					"attr.disabled": "this._isDisabled",
+					"attr.no-blur": "this._noBlurOnScroll",
+					"class.expand": "this._isBlockLevel",
+					"class.is-opening": "this._isOpening",
+					"class.is-open": "this.isOpen",
+					"class.has-value": "this.hasValue"
+				}
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => ComboboxComponent),
+				multi: true
+			}, {
+				provide: FORM_FIELD_CONTROL,
+				useExisting: forwardRef(() => ComboboxComponent)
+			}],
+			queries: [
+				{
+					propertyName: "itemTemplate",
+					first: true,
+					predicate: ListItemTemplateDirective,
+					descendants: true,
+					read: TemplateRef
+				},
+				{
+					propertyName: "slottedItems",
+					predicate: ListItemTemplateDirective,
+					read: ElementRef
+				},
+				{
+					propertyName: "kirbyItemsSlotted",
+					predicate: ItemComponent,
+					read: ElementRef
+				}
+			],
+			viewQueries: [
+				{
+					propertyName: "cardElement",
+					first: true,
+					predicate: CardComponent,
+					descendants: true,
+					read: ElementRef
+				},
+				{
+					propertyName: "popover",
+					first: true,
+					predicate: PopoverComponent,
+					descendants: true
+				},
+				{
+					propertyName: "rootElement",
+					first: true,
+					predicate: ["rootElement"],
+					descendants: true,
+					read: ElementRef,
+					static: true
+				},
+				{
+					propertyName: "textInput",
+					first: true,
+					predicate: InputComponent,
+					descendants: true,
+					read: ElementRef,
+					static: true
+				},
+				{
+					propertyName: "_virtualScrollViewport",
+					first: true,
+					predicate: CdkVirtualScrollViewport,
+					descendants: true
+				},
+				{
+					propertyName: "kirbyItemsDefault",
+					predicate: ItemComponent,
+					descendants: true,
+					read: ElementRef
+				}
+			],
+			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"],
+			dependencies: [
+				{
+					kind: "component",
+					type: InputComponent,
+					selector: "input[kirby-input]",
+					inputs: [
+						"type",
+						"size",
+						"borderless",
+						"hasError",
+						"autocomplete",
+						"autocorrect",
+						"value",
+						"maxlength",
+						"inputmode"
+					],
+					outputs: ["hasErrorChange"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: PopoverComponent,
+					selector: "kirby-popover",
+					inputs: ["popout", "target"],
+					outputs: ["willHide"]
+				},
+				{
+					kind: "component",
+					type: CardComponent,
+					selector: "kirby-card",
+					inputs: [
+						"title",
+						"subtitle",
+						"backgroundImageUrl",
+						"hasPadding",
+						"sizes",
+						"variant"
+					]
+				},
+				{
+					kind: "component",
+					type: ItemComponent,
+					selector: "kirby-item",
+					inputs: [
+						"disabled",
+						"selected",
+						"disclosure",
+						"selectable",
+						"reorderable",
+						"size",
+						"href",
+						"rotateIcon"
+					]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "kirby-icon",
+					inputs: ["size", "name"]
+				},
+				{
+					kind: "directive",
+					type: AffixDirective,
+					selector: "[kirby-affix]",
+					inputs: ["kirby-affix"]
+				},
+				{
+					kind: "directive",
+					type: CdkFixedSizeVirtualScroll,
+					selector: "cdk-virtual-scroll-viewport[itemSize]",
+					inputs: [
+						"itemSize",
+						"minBufferPx",
+						"maxBufferPx"
+					]
+				},
+				{
+					kind: "component",
+					type: CdkVirtualScrollViewport,
+					selector: "cdk-virtual-scroll-viewport",
+					inputs: ["orientation", "appendOnly"],
+					outputs: ["scrolledIndexChange"]
+				},
+				{
+					kind: "directive",
+					type: CdkVirtualForOf,
+					selector: "[cdkVirtualFor][cdkVirtualForOf]",
+					inputs: [
+						"cdkVirtualForOf",
+						"cdkVirtualForTrackBy",
+						"cdkVirtualForTemplate",
+						"cdkVirtualForTemplateCacheSize"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ComboboxComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-x-combobox",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => ComboboxComponent),
+				multi: true
+			}, {
+				provide: FORM_FIELD_CONTROL,
+				useExisting: forwardRef(() => ComboboxComponent)
+			}],
+			imports: [
+				InputComponent,
+				NgTemplateOutlet,
+				PopoverComponent,
+				CardComponent,
+				ItemComponent,
+				IconComponent,
+				AffixDirective,
+				CdkFixedSizeVirtualScroll,
+				CdkVirtualScrollViewport,
+				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"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.Renderer2 },
+		{ type: i0.ElementRef },
+		{ type: i0.ChangeDetectorRef },
+		{ type: i1.ResizeObserverService }
+	],
+	propDecorators: {
+		noSearchResultsText: [{ type: Input }],
+		selectionClearedAnnouncement: [{ type: Input }],
+		itemTextProperty: [{ type: Input }],
+		itemHeight: [{ type: Input }],
+		itemIdProperty: [{ type: Input }],
+		searchFunction: [{ type: Input }],
+		items: [{ type: Input }],
+		selectedItem: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		popout: [{ type: Input }],
+		expand: [{ type: Input }],
+		disabled: [{ type: Input }],
+		_isDisabled: [{
+			type: HostBinding,
+			args: ["attr.disabled"]
+		}],
+		hasErrorChange: [{ type: Output }],
+		hasError: [{ type: Input }],
+		size: [{ type: Input }],
+		_noBlurOnScroll: [{
+			type: HostBinding,
+			args: ["attr.no-blur"]
+		}],
+		change: [{ type: Output }],
+		_isBlockLevel: [{
+			type: HostBinding,
+			args: ["class.expand"]
+		}],
+		_isOpening: [{
+			type: HostBinding,
+			args: ["class.is-opening"]
+		}],
+		isOpen: [{
+			type: HostBinding,
+			args: ["class.is-open"]
+		}],
+		hasValue: [{
+			type: HostBinding,
+			args: ["class.has-value"]
+		}],
+		itemTemplate: [{
+			type: ContentChild,
+			args: [ListItemTemplateDirective, { read: TemplateRef }]
+		}],
+		slottedItems: [{
+			type: ContentChildren,
+			args: [ListItemTemplateDirective, { read: ElementRef }]
+		}],
+		cardElement: [{
+			type: ViewChild,
+			args: [CardComponent, { read: ElementRef }]
+		}],
+		popover: [{
+			type: ViewChild,
+			args: [PopoverComponent]
+		}],
+		rootElement: [{
+			type: ViewChild,
+			args: ["rootElement", {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		textInput: [{
+			type: ViewChild,
+			args: [InputComponent, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		_virtualScrollViewport: [{
+			type: ViewChild,
+			args: [CdkVirtualScrollViewport]
+		}],
+		kirbyItemsDefault: [{
+			type: ViewChildren,
+			args: [ItemComponent, { read: ElementRef }]
+		}],
+		kirbyItemsSlotted: [{
+			type: ContentChildren,
+			args: [ItemComponent, { read: ElementRef }]
+		}],
+		onMouseDown: [{
+			type: HostListener,
+			args: ["mousedown", ["$event"]]
+		}],
+		onTouchStart: [{
+			type: HostListener,
+			args: ["touchstart", ["$event"]]
+		}],
+		onFocusOut: [{
+			type: HostListener,
+			args: ["focusout"]
+		}],
+		onTab: [{
+			type: HostListener,
+			args: ["keydown.tab"]
+		}],
+		onEscape: [{
+			type: HostListener,
+			args: ["keydown.escape"]
+		}],
+		onEnter: [{
+			type: HostListener,
+			args: ["keydown.enter", ["$event"]]
+		}],
+		onArrowKeys: [
+			{
+				type: HostListener,
+				args: ["keydown.arrowUp", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.arrowDown", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.pageUp", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.pageDown", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.home", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.end", ["$event"]]
+			}
+		]
+	}
+});
 export { ComboboxComponent };
-//# sourceMappingURL=kirbydesign-extensions-angular-combobox.mjs.map
+
+//# sourceMappingURL=kirbydesign-extensions-angular-combobox.mjs.map