@kirbydesign/extensions-angular 4.2.0 → 4.4.0-rc.0

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

@@ -0,0 +1,827 @@
+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';
+
+var OpenState;
+(function (OpenState) {
+    OpenState[OpenState["closed"] = 0] = "closed";
+    OpenState[OpenState["opening"] = 1] = "opening";
+    OpenState[OpenState["open"] = 2] = "open";
+})(OpenState || (OpenState = {}));
+
+class ComboboxComponent {
+    static { this.OPEN_DELAY_IN_MS = 100; }
+    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 * this.itemHeight;
+    }
+    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;
+        }
+        this.focusedItem = this._searchItems[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;
+        }
+    }
+    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-posintset', `${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 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;
+            setTimeout(() => this.showPopOver(), ComboboxComponent.OPEN_DELAY_IN_MS);
+            this.focusedItem = this.selectedItem;
+        }
+    }
+    showPopOver() {
+        if (this.state === OpenState.opening) {
+            this.state = OpenState.open;
+            this.popover?.show();
+            this.scrollToIndexIntoViewWhenOpeningPopup();
+            this.cdr.markForCheck();
+        }
+    }
+    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);
+    }
+    updateSearchResults(event) {
+        if (!this.isOpen) {
+            this.open();
+        }
+        const input = event.target;
+        this.searchItems = input.value ? this.searchFunction(input.value, this.items) : this.items;
+        // 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();
+        }
+    }
+    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();
+    }
+    onEnterO(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.textInput?.nativeElement) {
+            this.renderer.setProperty(this.textInput.nativeElement, 'value', value);
+        }
+    }
+    scrollFocusedItemIntoViewWhileNavigating() {
+        const kirbyItems = this.getKirbyItems();
+        if (!kirbyItems || kirbyItems.length === 0)
+            return;
+        if (!this.focusedItem) {
+            return;
+        }
+        const id = this.getItemId(this.focusedItem);
+        if (!id)
+            return;
+        const match = kirbyItems.toArray().find((el) => {
+            if (el.nativeElement.id === undefined) {
+                console.error('Each item must have an id attribute for scroll to work. Ensure that the ´[attr.id]´ is set correctly, and that each item has a unique id value.');
+            }
+            return el.nativeElement.id === id;
+        });
+        if (!match) {
+            this.scrollToIndexIntoViewWhenOpeningPopup();
+            return;
+        }
+        const scrollIntoView = match.nativeElement.scrollIntoView;
+        if (typeof scrollIntoView === 'function') {
+            scrollIntoView.call(match.nativeElement, { block: 'nearest' });
+        }
+    }
+    getKirbyItems() {
+        return this.kirbyItemsSlotted && this.kirbyItemsSlotted.length
+            ? this.kirbyItemsSlotted
+            : this.kirbyItemsDefault;
+    }
+    scrollToIndexIntoViewWhenOpeningPopup() {
+        const focusedIndex = this.searchItems.indexOf(this.focusedItem);
+        if (focusedIndex < 0)
+            return;
+        if (focusedIndex === 0) {
+            this.virtualScrollViewport?.setRenderedRange({ start: 0, end: 20 });
+            this.virtualScrollViewport?.checkViewportSize();
+            return;
+        }
+        this.virtualScrollViewport?.scrollToIndex(focusedIndex);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", 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.7", type: ComboboxComponent, isStandalone: true, selector: "kirby-x-combobox", inputs: { noSearchResultsText: "noSearchResultsText", 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": "onEnterO($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: "<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    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"updateSearchResults($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  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item [attr.aria-live]=\"'polite'\">\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        minBufferPx=\"1240\"\n        maxBufferPx=\"1620\"\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}@media(hover:hover)and (pointer:fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div>input[kirby-input]{padding-right:40px}:host div>input[kirby-input]:disabled~kirby-icon{color:var(--kirby-semi-dark-shade)}:host div>kirby-icon{display:flex;align-items:center;position:absolute;top:0;bottom:0;right:12px}: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:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;max-width:calc(100vw - 32px);min-width:288px}@media(min-width:321px){kirby-card{min-width:343px}}.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.7", 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: "<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    [attr.id]=\"_comboboxId\"\n    [attr.aria-controls]=\"_listboxId\"\n    [attr.aria-expanded]=\"isOpen\"\n    [attr.aria-activedescendant]=\"isOpen && focusedItem ? getItemId(focusedItem) : null\"\n    (input)=\"updateSearchResults($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  (willHide)=\"onPopoverWillHide()\"\n>\n  <kirby-card [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @if (searchItems.length === 0) {\n      <kirby-item [attr.aria-live]=\"'polite'\">\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        minBufferPx=\"1240\"\n        maxBufferPx=\"1620\"\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}@media(hover:hover)and (pointer:fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host div>input[kirby-input]{padding-right:40px}:host div>input[kirby-input]:disabled~kirby-icon{color:var(--kirby-semi-dark-shade)}:host div>kirby-icon{display:flex;align-items:center;position:absolute;top:0;bottom:0;right:12px}: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:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;max-width:calc(100vw - 32px);min-width:288px}@media(min-width:321px){kirby-card{min-width:343px}}.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
+            }], 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']
+            }], onEnterO: [{
+                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.
+ */
+
+export { ComboboxComponent };
+//# sourceMappingURL=kirbydesign-extensions-angular-combobox.mjs.map