@kirbydesign/designsystem 11.11.2 → 12.0.0

package/fesm2022/kirbydesign-designsystem-dropdown.mjs

@@ -1,756 +1,882 @@
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, RendererStyleFlags2, ElementRef, TemplateRef, forwardRef, HostListener, ContentChildren, ViewChildren, ViewChild, ContentChild, HostBinding, Output, Input, Component, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CardComponent, CardModule } from '@kirbydesign/designsystem/card';
-import { UniqueIdGenerator, StringSearchHelper } from '@kirbydesign/designsystem/helpers';
-import { ItemComponent, ItemModule } from '@kirbydesign/designsystem/item';
-import { ListItemTemplateDirective, ListModule } from '@kirbydesign/designsystem/list';
-import { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import { FORM_FIELD_CONTROL } from '@kirbydesign/designsystem/types';
-import * as i2 from '@kirbydesign/designsystem/shared';
-import { forwardAttributes } from '@kirbydesign/designsystem/shared';
-import { IconComponent, IconModule } from '@kirbydesign/designsystem/icon';
-import { NgTemplateOutlet, CommonModule } from '@angular/common';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Injectable, Input, NgModule, Output, RendererStyleFlags2, TemplateRef, ViewChild, ViewChildren, forwardRef } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { CardComponent, CardModule } from "@kirbydesign/designsystem/card";
+import { StringSearchHelper, UniqueIdGenerator } from "@kirbydesign/designsystem/helpers";
+import { ItemComponent, ItemModule } from "@kirbydesign/designsystem/item";
+import { ListItemTemplateDirective, ListModule } from "@kirbydesign/designsystem/list";
+import { HorizontalDirection, PopoverComponent } from "@kirbydesign/designsystem/popover";
+import { ButtonComponent } from "@kirbydesign/designsystem/button";
+import { FORM_FIELD_CONTROL } from "@kirbydesign/designsystem/types";
+import * as i2 from "@kirbydesign/designsystem/shared";
+import { forwardAttributes } from "@kirbydesign/designsystem/shared";
+import { IconComponent, IconModule } from "@kirbydesign/designsystem/icon";
+import { CommonModule, NgTemplateOutlet } from "@angular/common";
 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 KeyboardHandlerService {
-    handle(event, selectedIndex, maxIndex, cyclicIndex = false) {
-        let newIndex = -1;
-        switch (event.key) {
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                if (selectedIndex === 0 && cyclicIndex) {
-                    newIndex = maxIndex;
-                }
-                else {
-                    // Select previous item:
-                    newIndex = selectedIndex - 1;
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowRight':
-                if (selectedIndex === undefined || (selectedIndex === maxIndex && cyclicIndex)) {
-                    // None selected, select first item:
-                    newIndex = 0;
-                }
-                else if (selectedIndex < maxIndex) {
-                    // Select next item:
-                    newIndex = selectedIndex + 1;
-                }
-                break;
-            case 'Home':
-                // Select first item:
-                newIndex = 0;
-                break;
-            case 'End':
-                // Select last item:
-                newIndex = maxIndex;
-                break;
-            default:
-                break;
-        }
-        return newIndex;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KeyboardHandlerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class DropdownComponent {
-    static { this.OPEN_DELAY_IN_MS = 100; }
-    get items() {
-        return this._items;
-    }
-    set items(value) {
-        this._items = value;
-        this._value = this.items[this.selectedIndex] || null;
-    }
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(value) {
-        if (value !== undefined && this._selectedIndex != value) {
-            this._selectedIndex = value;
-            this.focusedIndex = this._selectedIndex;
-            this._value = this.items[this.selectedIndex] || null;
-        }
-    }
-    get focusedIndex() {
-        return this._focusedIndex;
-    }
-    set focusedIndex(value) {
-        if (this._focusedIndex !== value) {
-            this._focusedIndex = value;
-            this.scrollItemIntoView(this._focusedIndex);
-        }
-    }
-    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);
-        }
-    }
-    /**
-     * @deprecated This input is no longer needed. The dropdown now always uses popover positioning.
-     * This input will be removed in a future major version.
-     */
-    set usePopover(_value) {
-        console.warn(`[Kirby Dropdown] The 'usePopover' input is deprecated and no longer has any effect.
+var KeyboardHandlerService = class KeyboardHandlerService {
+	handle(event, selectedIndex, maxIndex, cyclicIndex = false) {
+		let newIndex = -1;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowLeft":
+				if (selectedIndex === 0 && cyclicIndex) newIndex = maxIndex;
+				else newIndex = selectedIndex - 1;
+				break;
+			case "ArrowDown":
+			case "ArrowRight":
+				if (selectedIndex === void 0 || selectedIndex === maxIndex && cyclicIndex) newIndex = 0;
+				else if (selectedIndex < maxIndex) newIndex = selectedIndex + 1;
+				break;
+			case "Home":
+				newIndex = 0;
+				break;
+			case "End": newIndex = maxIndex;
+		}
+		return newIndex;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: KeyboardHandlerService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: KeyboardHandlerService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: KeyboardHandlerService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+var DropdownComponent = class DropdownComponent {
+	static {
+		this.OPEN_DELAY_IN_MS = 100;
+	}
+	get items() {
+		return this._items;
+	}
+	set items(value) {
+		this._items = value;
+		this._value = this.items[this.selectedIndex] || null;
+	}
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	set selectedIndex(value) {
+		if (value !== void 0 && this._selectedIndex != value) {
+			this._selectedIndex = value;
+			this.focusedIndex = this._selectedIndex;
+			this._value = this.items[this.selectedIndex] || null;
+		}
+	}
+	get focusedIndex() {
+		return this._focusedIndex;
+	}
+	set focusedIndex(value) {
+		if (this._focusedIndex !== value) {
+			this._focusedIndex = value;
+			this.scrollItemIntoView(this._focusedIndex);
+		}
+	}
+	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);
+		}
+	}
+	set usePopover(_value) {
+		console.warn(`[Kirby Dropdown] The 'usePopover' input is deprecated and no longer has any effect.
         The dropdown now always uses popover positioning. This input will be removed in a future major version.`);
-    }
-    get _tabindex() {
-        return this.disabled ? -1 : this.tabindex;
-    }
-    // Prevent Ionic blur on scroll
-    get _noBlurOnScroll() {
-        return true;
-    }
-    get value() {
-        return this._value;
-    }
-    get selectedText() {
-        return this.getTextFromItem(this.value);
-    }
-    get _isBlockLevel() {
-        return this.expand === 'block';
-    }
-    get _isOpening() {
-        return this.state === OpenState.opening;
-    }
-    get isOpen() {
-        return this.state === OpenState.open;
-    }
-    get interactiveElement() {
-        return this.buttonElement.nativeElement;
-    }
-    forwardAriaLabelToDropdownButton() {
-        forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.buttonElement.nativeElement);
-    }
-    set kirbyItemsSlotted(kirbyItems) {
-        const hasSlottedItems = this.disposeItemClickListeners?.length > 0;
-        if (hasSlottedItems) {
-            this.unlistenAllSlottedItems();
-        }
-        // Setup a click listener for each new slotted items
-        kirbyItems.forEach((kirbyItem) => {
-            this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');
-            const disposeClickListener = this.renderer.listen(kirbyItem.nativeElement, 'click', () => {
-                this.onItemSelect(this.domIndexOf(kirbyItem));
-            });
-            this.disposeItemClickListeners.push(disposeClickListener);
-        });
-        this._kirbyItemsSlotted = kirbyItems;
-    }
-    get kirbyItemsSlotted() {
-        return this._kirbyItemsSlotted;
-    }
-    constructor(renderer, elementRef, cdr, keyboardHandlerService, resizeObserverService) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.keyboardHandlerService = keyboardHandlerService;
-        this.resizeObserverService = resizeObserverService;
-        this.state = OpenState.closed;
-        this._popout = HorizontalDirection.right;
-        this._attributesToForward = ['aria-label', 'aria-labelledby'];
-        this._listboxId = UniqueIdGenerator.scopedTo('kirby-dropdown').next();
-        this._comboboxId = UniqueIdGenerator.scopedTo('kirby-button').next();
-        this._items = [];
-        this._selectedIndex = -1;
-        // _focusedIndex keeps track of which element has focus and will be selected
-        // if it is activated (by pressing ENTER or SPACE key)
-        this._focusedIndex = 0;
-        this.itemTextProperty = 'text';
-        this.placeholder = 'Please select:';
-        this.attentionLevel = '3';
-        this.disabled = false;
-        this.hasErrorChange = new EventEmitter();
-        this.size = 'md';
-        // Tabindex defaults to 0 instead of no value to align tabbing behavior in Safari
-        // with other browsers and the default select behavior: https://mayank.co/blog/safari-focus/
-        this.tabindex = 0;
-        /**
-         * Emitted when an item is selected (tap on mobile, click/keypress on web)
-         */
-        this.change = new EventEmitter();
-        this._value = null;
-        /* The 'clicked' class is applied through Hostbinding to prevent the dropdown from getting a focus ring on click.
-          There is a bug that causes the dropdown to get a focus ring on click, if it is the first element that is interacted with
-          after the page is loaded. If the user interacts with any other element before, then the dropdown won't get a focus ring.
-          See issue: https://github.com/kirbydesign/designsystem/issues/2477.
-      
-          This solution can potentially be refactored, when popover is not experimental anymore. Then it could be possible
-          to close the dropdown when the popover backdrop is clicked, instead of relying on the blur event, which is utilized
-          by this line below: this.elementRef.nativeElement.focus(). Right now this forces the blur event to be triggered, when
-          clicking outside of the dropdown.
-          */
-        this.clicked = false;
-        this.disposeItemClickListeners = [];
-        this.searchBuffer = '';
-        this.SEARCH_BUFFER_DELAY = 500; // ms
-        this._onChange = () => { };
-        this._onTouched = () => { };
-    }
-    onToggle(event) {
-        event.stopPropagation();
-        this.clicked = true;
-        this.toggle();
-    }
-    toggle() {
-        if (this.disabled) {
-            return;
-        }
-        this.isOpen ? this.close() : this.open();
-    }
-    /* Utility that makes it easier to set styles on card element */
-    setPopoverCardStyle(style, value) {
-        this.renderer.setStyle(this.cardElement.nativeElement, style, value, RendererStyleFlags2.DashCase);
-    }
-    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.forwardAriaLabelToDropdownButton();
-    }
-    open() {
-        if (this.disabled) {
-            return;
-        }
-        if (!this.isOpen) {
-            this.state = OpenState.opening;
-            // ensures that the dropdown is opened in case the IntersectionObserverCallback isn't invoked
-            setTimeout(() => this.showDropdown(), DropdownComponent.OPEN_DELAY_IN_MS);
-            // Move focus to selected item (if any) or first item
-            this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;
-        }
-    }
-    showDropdown() {
-        if (this.state === OpenState.opening) {
-            this.state = OpenState.open;
-            this.popover?.show();
-            this.scrollItemIntoView(this.focusedIndex);
-            this.cdr.markForCheck();
-        }
-    }
-    close() {
-        if (this.disabled) {
-            return;
-        }
-        if (this.isOpen) {
-            this.state = OpenState.closed;
-            this.popover?.hide();
-        }
-    }
-    onItemSelect(index) {
-        this.selectItem(index);
-        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._selectItemByValue(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(index) {
-        if (index != this.selectedIndex) {
-            this.selectedIndex = index;
-            this.focusedIndex = index;
-            this.change.emit(this.value);
-            this._onChange(this.value);
-        }
-    }
-    _selectItemByValue(value) {
-        this.selectedIndex = this.items.indexOf(value);
-    }
-    getTextFromItem(item) {
-        if (!item) {
-            return null;
-        }
-        return typeof item === 'string' ? item : item[this.itemTextProperty];
-    }
-    scrollItemIntoView(index) {
-        const kirbyItems = this.kirbyItemsSlotted && this.kirbyItemsSlotted.length
-            ? this.kirbyItemsSlotted
-            : this.kirbyItemsDefault;
-        if (kirbyItems && kirbyItems.length) {
-            const selectedKirbyItem = kirbyItems.toArray()[index];
-            if (selectedKirbyItem && selectedKirbyItem.nativeElement) {
-                const itemElement = selectedKirbyItem.nativeElement;
-                itemElement.scrollIntoView({ block: 'nearest' });
-            }
-        }
-    }
-    _onTab() {
-        if (this.isOpen) {
-            this.selectItem(this.focusedIndex);
-            this.close();
-        }
-        if (this.clicked) {
-            // Remove the 'clicked' class (Hostbinding) if the user has previously opened the dropdown by clicking,
-            // since the class prevents the focus ring from showing,
-            // which is expected to happen, when using the tab key
-            this.clicked = false;
-        }
-    }
-    preventDefaultAndStopImmediatePropagation(event) {
-        event.stopImmediatePropagation();
-        event.preventDefault();
-    }
-    addToSearchBuffer(char) {
-        clearTimeout(this.searchBufferTimeout);
-        this.searchBuffer += char;
-        this.searchBufferTimeout = setTimeout(() => {
-            this.resetSearchBuffer();
-        }, this.SEARCH_BUFFER_DELAY);
-    }
-    resetSearchBuffer() {
-        this.searchBuffer = '';
-    }
-    _onKeydown(event) {
-        const key = event.key;
-        if (this.items.length === 0) {
-            console.warn('[Kirby] No items found within dropdown');
-            return;
-        }
-        if (this.disabled)
-            return;
-        if (StringSearchHelper.isPrintableCharacter(key)) {
-            this.handlePrintableCharacterKey(event, this.isOpen);
-        }
-        // ALT + ArrowDown: Open dropdown
-        if (key === 'ArrowDown' && event.altKey) {
-            this.preventDefaultAndStopImmediatePropagation(event);
-            if (!this.isOpen) {
-                this.open();
-                this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;
-            }
-            return;
-        }
-        // ALT + ArrowUp: Select focused item and close dropdown
-        if (key === 'ArrowUp' && event.altKey) {
-            this.preventDefaultAndStopImmediatePropagation(event);
-            if (this.focusedIndex > -1) {
-                this.selectItem(this.focusedIndex);
-                this.close();
-            }
-        }
-        // PageUp: Jump up 10 options or to first
-        if (key === 'PageUp') {
-            this.preventDefaultAndStopImmediatePropagation(event);
-            if (!this.isOpen) {
-                this.open();
-            }
-            this.focusedIndex = Math.max(0, this.focusedIndex - 10);
-            return;
-        }
-        // PageDown: Jump down 10 options or to last
-        if (key === 'PageDown') {
-            this.preventDefaultAndStopImmediatePropagation(event);
-            if (!this.isOpen) {
-                this.open();
-            }
-            this.focusedIndex = Math.min(this.items.length - 1, this.focusedIndex + 10);
-            return;
-        }
-    }
-    handlePrintableCharacterKey(event, isOpen) {
-        const key = event.key;
-        if (isOpen) {
-            this.preventDefaultAndStopImmediatePropagation(event);
-        }
-        else {
-            this.open();
-        }
-        // If the same character is typed twice, the search buffer should only contain that character once
-        if (this.searchBuffer.length === 1 &&
-            this.searchBuffer[0].toLowerCase() === key.toLowerCase()) {
-            this.searchBuffer = key;
-        }
-        else {
-            this.addToSearchBuffer(key);
-        }
-        const isMultiCharSearch = this.searchBuffer.length > 1;
-        let startIndex = 0;
-        if (!isMultiCharSearch && this.isOpen) {
-            startIndex = this.focusedIndex + 1;
-        }
-        let foundItemIndex = this.getIndexOfItemByFirstCharacter(this.searchBuffer, startIndex);
-        if (foundItemIndex === -1 && isMultiCharSearch) {
-            foundItemIndex = this.getIndexOfItemByFirstCharacter(key, startIndex);
-        }
-        if (foundItemIndex === -1 && !isMultiCharSearch && this.isOpen) {
-            foundItemIndex = this.getIndexOfItemByFirstCharacter(this.searchBuffer, 0);
-        }
-        if (foundItemIndex > -1) {
-            this.focusedIndex = foundItemIndex;
-        }
-    }
-    getIndexOfItemByFirstCharacter(char, startIndex = 0) {
-        let itemTexts;
-        // Prefer slotted/projected items if present
-        if (this.kirbyItemsSlotted && this.kirbyItemsSlotted.length) {
-            itemTexts = this.kirbyItemsSlotted
-                .toArray()
-                .map((ref) => ref.nativeElement.textContent?.trim() ?? '');
-        }
-        else {
-            itemTexts = this.items.map((item) => this.getTextFromItem(item) ?? '');
-        }
-        return StringSearchHelper.getIndexByFirstMatchingStartString(char, itemTexts, startIndex);
-    }
-    _onMouseDown(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-    }
-    _onTouchStart(event) {
-        if (this.isOpen) {
-            event.stopPropagation();
-        }
-    }
-    _onPopoverWillHide() {
-        this.state = OpenState.closed;
-        this.buttonElement.nativeElement.focus();
-        this._onTouched();
-    }
-    _onFocusOut() {
-        if (!this.isOpen) {
-            this._onTouched();
-        }
-    }
-    _onEnterOrEscape() {
-        this.close();
-    }
-    _onPopoverClick() {
-        this.close();
-    }
-    _onEnterOrSpace(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.isOpen) {
-            this.selectItem(this.focusedIndex);
-        }
-        this.toggle();
-    }
-    _onArrowKeys(event) {
-        if (this.disabled)
-            return false;
-        // Mirror default HTML5 select behaviour - prevent left/right arrows when open:
-        if (this.isOpen && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
-            return false;
-        }
-        if (!this.isOpen) {
-            // Avoid page scroll
-            event.preventDefault();
-            this.open();
-            // If no selected item then focus first or last item
-            if (!event.altKey && this.selectedIndex < 0) {
-                switch (event.key) {
-                    case 'ArrowUp':
-                        this.focusedIndex = 0;
-                        break;
-                    case 'ArrowDown':
-                        this.focusedIndex = this.items.length - 1;
-                        break;
-                    default:
-                        break;
-                }
-            }
-            return false;
-        }
-        const newFocusedIndex = this.keyboardHandlerService.handle(event, this.focusedIndex, this.items.length - 1);
-        if (newFocusedIndex > -1) {
-            this.focusedIndex = newFocusedIndex;
-        }
-        return false;
-    }
-    _onHomeEndKeys(event) {
-        if (this.disabled)
-            return;
-        if (!this.isOpen) {
-            event.preventDefault();
-            this.open();
-        }
-        const newFocusedIndex = this.keyboardHandlerService.handle(event, this.focusedIndex, this.items.length - 1);
-        if (newFocusedIndex > -1) {
-            this.focusedIndex = newFocusedIndex;
-        }
-        return false;
-    }
-    domIndexOf(kirbyItem) {
-        return this.kirbyItemsSlotted
-            .toArray()
-            .filter((item) => item.nativeElement.compareDocumentPosition(kirbyItem.nativeElement) &
-            Node.DOCUMENT_POSITION_FOLLOWING).length;
-    }
-    unlistenAllSlottedItems() {
-        let disposeClickListener;
-        while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {
-            disposeClickListener();
-        }
-    }
-    ngOnDestroy() {
-        this.unlistenAllSlottedItems();
-        this.resizeObserverService.unobserve(this.elementRef);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KeyboardHandlerService }, { token: i2.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: DropdownComponent, isStandalone: true, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", focusedIndex: "focusedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { hasErrorChange: "hasErrorChange", change: "change" }, host: { listeners: { "keydown.tab": "_onTab()", "keydown.shift.tab": "_onTab()", "keydown": "_onKeydown($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focusout": "_onFocusOut()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "keydown.space": "_onEnterOrSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.clicked": "this.clicked" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => DropdownComponent)),
-                multi: true,
-            },
-            { provide: FORM_FIELD_CONTROL, useExisting: forwardRef((() => DropdownComponent)) },
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { 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: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    [class.keyboard-focused]=\"focused && !clicked\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(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:999px}:host{display:inline-block;position:relative;max-width:min(100vw - 32px,100%)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{outline-color:var(--kirby-danger)}:host>button{position:relative;margin:0;width:100%;min-width:0;outline:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;overflow-y:auto;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}}@media(hover:hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-dropdown', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef((() => DropdownComponent)),
-                            multi: true,
-                        },
-                        { provide: FORM_FIELD_CONTROL, useExisting: forwardRef((() => DropdownComponent)) },
-                    ], imports: [
-                        ButtonComponent,
-                        NgTemplateOutlet,
-                        PopoverComponent,
-                        CardComponent,
-                        ItemComponent,
-                        IconComponent,
-                    ], template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    [class.keyboard-focused]=\"focused && !clicked\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(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:999px}:host{display:inline-block;position:relative;max-width:min(100vw - 32px,100%)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{outline-color:var(--kirby-danger)}:host>button{position:relative;margin:0;width:100%;min-width:0;outline:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;overflow-y:auto;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}}@media(hover:hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }, { type: i2.ResizeObserverService }], propDecorators: { items: [{
-                type: Input
-            }], selectedIndex: [{
-                type: Input
-            }], focusedIndex: [{
-                type: Input
-            }], itemTextProperty: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], popout: [{
-                type: Input
-            }], attentionLevel: [{
-                type: Input
-            }], expand: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], _isDisabled: [{
-                type: HostBinding,
-                args: ['attr.disabled']
-            }], hasErrorChange: [{
-                type: Output
-            }], hasError: [{
-                type: HostBinding,
-                args: ['class.error']
-            }, {
-                type: Input
-            }], size: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }], usePopover: [{
-                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']
-            }], clicked: [{
-                type: HostBinding,
-                args: ['class.clicked']
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [ListItemTemplateDirective, { static: true, read: TemplateRef }]
-            }], slottedItems: [{
-                type: ContentChildren,
-                args: [ListItemTemplateDirective, { read: ElementRef }]
-            }], cardElement: [{
-                type: ViewChild,
-                args: [CardComponent, { read: ElementRef }]
-            }], popover: [{
-                type: ViewChild,
-                args: [PopoverComponent]
-            }], buttonElement: [{
-                type: ViewChild,
-                args: [ButtonComponent, { static: true, read: ElementRef }]
-            }], kirbyItemsDefault: [{
-                type: ViewChildren,
-                args: [ItemComponent, { read: ElementRef }]
-            }], kirbyItemsSlotted: [{
-                type: ContentChildren,
-                args: [ItemComponent, { read: ElementRef }]
-            }], _onTab: [{
-                type: HostListener,
-                args: ['keydown.tab']
-            }, {
-                type: HostListener,
-                args: ['keydown.shift.tab']
-            }], _onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], _onMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], _onTouchStart: [{
-                type: HostListener,
-                args: ['touchstart', ['$event']]
-            }], _onFocusOut: [{
-                type: HostListener,
-                args: ['focusout']
-            }], _onEnterOrEscape: [{
-                type: HostListener,
-                args: ['keydown.enter']
-            }, {
-                type: HostListener,
-                args: ['keydown.escape']
-            }], _onEnterOrSpace: [{
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }], _onArrowKeys: [{
-                type: HostListener,
-                args: ['keydown.arrowup', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.arrowdown', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.arrowleft', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.arrowright', ['$event']]
-            }], _onHomeEndKeys: [{
-                type: HostListener,
-                args: ['keydown.home', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.end', ['$event']]
-            }] } });
-
-class DropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: DropdownModule, imports: [CardModule,
-            IconModule,
-            ItemModule,
-            PopoverComponent,
-            ButtonComponent,
-            CommonModule,
-            ListModule,
-            DropdownComponent], exports: [DropdownComponent, ListItemTemplateDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
-            IconModule,
-            ItemModule,
-            PopoverComponent,
-            ButtonComponent,
-            CommonModule,
-            ListModule,
-            DropdownComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: DropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CardModule,
-                        IconModule,
-                        ItemModule,
-                        PopoverComponent,
-                        ButtonComponent,
-                        CommonModule,
-                        ListModule,
-                        DropdownComponent,
-                    ],
-                    exports: [DropdownComponent, ListItemTemplateDirective],
-                    providers: [KeyboardHandlerService],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+	}
+	get _tabindex() {
+		return this.disabled ? -1 : this.tabindex;
+	}
+	get _noBlurOnScroll() {
+		return true;
+	}
+	get value() {
+		return this._value;
+	}
+	get selectedText() {
+		return this.getTextFromItem(this.value);
+	}
+	get _isBlockLevel() {
+		return this.expand === "block";
+	}
+	get _isOpening() {
+		return this.state === OpenState.opening;
+	}
+	get isOpen() {
+		return this.state === OpenState.open;
+	}
+	get interactiveElement() {
+		return this.buttonElement.nativeElement;
+	}
+	forwardAriaLabelToDropdownButton() {
+		forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.buttonElement.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", () => {
+				this.onItemSelect(this.domIndexOf(kirbyItem));
+			});
+			this.disposeItemClickListeners.push(disposeClickListener);
+		});
+		this._kirbyItemsSlotted = kirbyItems;
+	}
+	get kirbyItemsSlotted() {
+		return this._kirbyItemsSlotted;
+	}
+	constructor(renderer, elementRef, cdr, keyboardHandlerService, resizeObserverService) {
+		this.renderer = renderer;
+		this.elementRef = elementRef;
+		this.cdr = cdr;
+		this.keyboardHandlerService = keyboardHandlerService;
+		this.resizeObserverService = resizeObserverService;
+		this.state = OpenState.closed;
+		this._popout = HorizontalDirection.right;
+		this._attributesToForward = ["aria-label", "aria-labelledby"];
+		this._listboxId = UniqueIdGenerator.scopedTo("kirby-dropdown").next();
+		this._comboboxId = UniqueIdGenerator.scopedTo("kirby-button").next();
+		this._items = [];
+		this._selectedIndex = -1;
+		this._focusedIndex = 0;
+		this.itemTextProperty = "text";
+		this.placeholder = "Please select:";
+		this.attentionLevel = "3";
+		this.disabled = false;
+		this.hasErrorChange = new EventEmitter();
+		this.size = "md";
+		this.tabindex = 0;
+		this.change = new EventEmitter();
+		this._value = null;
+		this.clicked = false;
+		this.disposeItemClickListeners = [];
+		this.searchBuffer = "";
+		this.SEARCH_BUFFER_DELAY = 500;
+		this._onChange = () => {};
+		this._onTouched = () => {};
+	}
+	onToggle(event) {
+		event.stopPropagation();
+		this.clicked = true;
+		this.toggle();
+	}
+	toggle() {
+		if (this.disabled) return;
+		this.isOpen ? this.close() : this.open();
+	}
+	setPopoverCardStyle(style, value) {
+		this.renderer.setStyle(this.cardElement.nativeElement, style, value, RendererStyleFlags2.DashCase);
+	}
+	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.forwardAriaLabelToDropdownButton();
+	}
+	open() {
+		if (this.disabled) return;
+		if (!this.isOpen) {
+			this.state = OpenState.opening;
+			setTimeout(() => this.showDropdown(), DropdownComponent.OPEN_DELAY_IN_MS);
+			this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;
+		}
+	}
+	showDropdown() {
+		if (this.state === OpenState.opening) {
+			this.state = OpenState.open;
+			this.popover?.show();
+			this.scrollItemIntoView(this.focusedIndex);
+			this.cdr.markForCheck();
+		}
+	}
+	close() {
+		if (this.disabled) return;
+		if (this.isOpen) {
+			this.state = OpenState.closed;
+			this.popover?.hide();
+		}
+	}
+	onItemSelect(index) {
+		this.selectItem(index);
+		this.close();
+	}
+	writeValue(value) {
+		this._selectItemByValue(value);
+		this.cdr.markForCheck();
+	}
+	registerOnChange(fn) {
+		this._onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this._onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	selectItem(index) {
+		if (index != this.selectedIndex) {
+			this.selectedIndex = index;
+			this.focusedIndex = index;
+			this.change.emit(this.value);
+			this._onChange(this.value);
+		}
+	}
+	_selectItemByValue(value) {
+		this.selectedIndex = this.items.indexOf(value);
+	}
+	getTextFromItem(item) {
+		if (!item) return null;
+		return typeof item === "string" ? item : item[this.itemTextProperty];
+	}
+	scrollItemIntoView(index) {
+		const kirbyItems = this.kirbyItemsSlotted && this.kirbyItemsSlotted.length ? this.kirbyItemsSlotted : this.kirbyItemsDefault;
+		if (kirbyItems && kirbyItems.length) {
+			const selectedKirbyItem = kirbyItems.toArray()[index];
+			if (selectedKirbyItem && selectedKirbyItem.nativeElement) selectedKirbyItem.nativeElement.scrollIntoView({ block: "nearest" });
+		}
+	}
+	_onTab() {
+		if (this.isOpen) {
+			this.selectItem(this.focusedIndex);
+			this.close();
+		}
+		if (this.clicked) this.clicked = false;
+	}
+	preventDefaultAndStopImmediatePropagation(event) {
+		event.stopImmediatePropagation();
+		event.preventDefault();
+	}
+	addToSearchBuffer(char) {
+		clearTimeout(this.searchBufferTimeout);
+		this.searchBuffer += char;
+		this.searchBufferTimeout = setTimeout(() => {
+			this.resetSearchBuffer();
+		}, this.SEARCH_BUFFER_DELAY);
+	}
+	resetSearchBuffer() {
+		this.searchBuffer = "";
+	}
+	_onKeydown(event) {
+		const key = event.key;
+		if (this.items.length === 0) {
+			console.warn("[Kirby] No items found within dropdown");
+			return;
+		}
+		if (this.disabled) return;
+		if (StringSearchHelper.isPrintableCharacter(key)) this.handlePrintableCharacterKey(event, this.isOpen);
+		if (key === "ArrowDown" && event.altKey) {
+			this.preventDefaultAndStopImmediatePropagation(event);
+			if (!this.isOpen) {
+				this.open();
+				this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;
+			}
+			return;
+		}
+		if (key === "ArrowUp" && event.altKey) {
+			this.preventDefaultAndStopImmediatePropagation(event);
+			if (this.focusedIndex > -1) {
+				this.selectItem(this.focusedIndex);
+				this.close();
+			}
+		}
+		if (key === "PageUp") {
+			this.preventDefaultAndStopImmediatePropagation(event);
+			if (!this.isOpen) this.open();
+			this.focusedIndex = Math.max(0, this.focusedIndex - 10);
+			return;
+		}
+		if (key === "PageDown") {
+			this.preventDefaultAndStopImmediatePropagation(event);
+			if (!this.isOpen) this.open();
+			this.focusedIndex = Math.min(this.items.length - 1, this.focusedIndex + 10);
+			return;
+		}
+	}
+	handlePrintableCharacterKey(event, isOpen) {
+		const key = event.key;
+		if (isOpen) this.preventDefaultAndStopImmediatePropagation(event);
+		else this.open();
+		if (this.searchBuffer.length === 1 && this.searchBuffer[0].toLowerCase() === key.toLowerCase()) this.searchBuffer = key;
+		else this.addToSearchBuffer(key);
+		const isMultiCharSearch = this.searchBuffer.length > 1;
+		let startIndex = 0;
+		if (!isMultiCharSearch && this.isOpen) startIndex = this.focusedIndex + 1;
+		let foundItemIndex = this.getIndexOfItemByFirstCharacter(this.searchBuffer, startIndex);
+		if (foundItemIndex === -1 && isMultiCharSearch) foundItemIndex = this.getIndexOfItemByFirstCharacter(key, startIndex);
+		if (foundItemIndex === -1 && !isMultiCharSearch && this.isOpen) foundItemIndex = this.getIndexOfItemByFirstCharacter(this.searchBuffer, 0);
+		if (foundItemIndex > -1) this.focusedIndex = foundItemIndex;
+	}
+	getIndexOfItemByFirstCharacter(char, startIndex = 0) {
+		let itemTexts;
+		if (this.kirbyItemsSlotted && this.kirbyItemsSlotted.length) itemTexts = this.kirbyItemsSlotted.toArray().map((ref) => ref.nativeElement.textContent?.trim() ?? "");
+		else itemTexts = this.items.map((item) => this.getTextFromItem(item) ?? "");
+		return StringSearchHelper.getIndexByFirstMatchingStartString(char, itemTexts, startIndex);
+	}
+	_onMouseDown(event) {
+		if (this.disabled) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		}
+	}
+	_onTouchStart(event) {
+		if (this.isOpen) event.stopPropagation();
+	}
+	_onPopoverWillHide() {
+		this.state = OpenState.closed;
+		this.buttonElement.nativeElement.focus();
+		this._onTouched();
+	}
+	_onFocusOut() {
+		if (!this.isOpen) this._onTouched();
+	}
+	_onEnterOrEscape() {
+		this.close();
+	}
+	_onPopoverClick() {
+		this.close();
+	}
+	_onEnterOrSpace(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (this.isOpen) this.selectItem(this.focusedIndex);
+		this.toggle();
+	}
+	_onArrowKeys(event) {
+		if (this.disabled) return false;
+		if (this.isOpen && (event.key === "ArrowLeft" || event.key === "ArrowRight")) return false;
+		if (!this.isOpen) {
+			event.preventDefault();
+			this.open();
+			if (!event.altKey && this.selectedIndex < 0) switch (event.key) {
+				case "ArrowUp":
+					this.focusedIndex = 0;
+					break;
+				case "ArrowDown": this.focusedIndex = this.items.length - 1;
+			}
+			return false;
+		}
+		const newFocusedIndex = this.keyboardHandlerService.handle(event, this.focusedIndex, this.items.length - 1);
+		if (newFocusedIndex > -1) this.focusedIndex = newFocusedIndex;
+		return false;
+	}
+	_onHomeEndKeys(event) {
+		if (this.disabled) return;
+		if (!this.isOpen) {
+			event.preventDefault();
+			this.open();
+		}
+		const newFocusedIndex = this.keyboardHandlerService.handle(event, this.focusedIndex, this.items.length - 1);
+		if (newFocusedIndex > -1) this.focusedIndex = newFocusedIndex;
+		return false;
+	}
+	domIndexOf(kirbyItem) {
+		return this.kirbyItemsSlotted.toArray().filter((item) => item.nativeElement.compareDocumentPosition(kirbyItem.nativeElement) & Node.DOCUMENT_POSITION_FOLLOWING).length;
+	}
+	unlistenAllSlottedItems() {
+		let disposeClickListener;
+		while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== void 0) disposeClickListener();
+	}
+	ngOnDestroy() {
+		this.unlistenAllSlottedItems();
+		this.resizeObserverService.unobserve(this.elementRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DropdownComponent,
+			deps: [
+				{ token: i0.Renderer2 },
+				{ token: i0.ElementRef },
+				{ token: i0.ChangeDetectorRef },
+				{ token: KeyboardHandlerService },
+				{ token: i2.ResizeObserverService }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: DropdownComponent,
+			isStandalone: true,
+			selector: "kirby-dropdown",
+			inputs: {
+				items: "items",
+				selectedIndex: "selectedIndex",
+				focusedIndex: "focusedIndex",
+				itemTextProperty: "itemTextProperty",
+				placeholder: "placeholder",
+				popout: "popout",
+				attentionLevel: "attentionLevel",
+				expand: "expand",
+				disabled: "disabled",
+				hasError: "hasError",
+				size: "size",
+				tabindex: "tabindex",
+				usePopover: "usePopover"
+			},
+			outputs: {
+				hasErrorChange: "hasErrorChange",
+				change: "change"
+			},
+			host: {
+				listeners: {
+					"keydown.tab": "_onTab()",
+					"keydown.shift.tab": "_onTab()",
+					"keydown": "_onKeydown($event)",
+					"mousedown": "_onMouseDown($event)",
+					"touchstart": "_onTouchStart($event)",
+					"focusout": "_onFocusOut()",
+					"keydown.enter": "_onEnterOrSpace($event)",
+					"keydown.escape": "_onEnterOrEscape()",
+					"keydown.space": "_onEnterOrSpace($event)",
+					"keydown.arrowup": "_onArrowKeys($event)",
+					"keydown.arrowdown": "_onArrowKeys($event)",
+					"keydown.arrowleft": "_onArrowKeys($event)",
+					"keydown.arrowright": "_onArrowKeys($event)",
+					"keydown.home": "_onHomeEndKeys($event)",
+					"keydown.end": "_onHomeEndKeys($event)"
+				},
+				properties: {
+					"attr.disabled": "this._isDisabled",
+					"class.error": "this.hasError",
+					"attr.no-blur": "this._noBlurOnScroll",
+					"class.expand": "this._isBlockLevel",
+					"class.is-opening": "this._isOpening",
+					"class.is-open": "this.isOpen",
+					"class.clicked": "this.clicked"
+				}
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef((() => DropdownComponent)),
+				multi: true
+			}, {
+				provide: FORM_FIELD_CONTROL,
+				useExisting: forwardRef((() => DropdownComponent))
+			}],
+			queries: [
+				{
+					propertyName: "itemTemplate",
+					first: true,
+					predicate: ListItemTemplateDirective,
+					descendants: true,
+					read: TemplateRef,
+					static: true
+				},
+				{
+					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: "buttonElement",
+					first: true,
+					predicate: ButtonComponent,
+					descendants: true,
+					read: ElementRef,
+					static: true
+				},
+				{
+					propertyName: "kirbyItemsDefault",
+					predicate: ItemComponent,
+					descendants: true,
+					read: ElementRef
+				}
+			],
+			ngImport: i0,
+			template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    [class.keyboard-focused]=\"focused && !clicked\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(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:min(100vw - calc(2 * var(--kirby-spacing-s)),100%)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{outline-color:var(--kirby-danger)}:host>button{position:relative;margin:0;width:100%;min-width:0;outline:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-open>button{box-shadow:var(--kirby-elevation-4)}kirby-card{max-height:min(352px,var(--kirby-popover-available-max-height, 352px));overflow-y:auto;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)))}}@media(hover:hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:var(--kirby-font-weight-bold);font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
+					inputs: [
+						"attentionLevel",
+						"noDecoration",
+						"themeColor",
+						"expand",
+						"isFloating",
+						"size",
+						"showIconOnly"
+					]
+				},
+				{
+					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"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: DropdownComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-dropdown",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef((() => DropdownComponent)),
+				multi: true
+			}, {
+				provide: FORM_FIELD_CONTROL,
+				useExisting: forwardRef((() => DropdownComponent))
+			}],
+			imports: [
+				ButtonComponent,
+				NgTemplateOutlet,
+				PopoverComponent,
+				CardComponent,
+				ItemComponent,
+				IconComponent
+			],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    [class.keyboard-focused]=\"focused && !clicked\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(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:min(100vw - calc(2 * var(--kirby-spacing-s)),100%)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{outline-color:var(--kirby-danger)}:host>button{position:relative;margin:0;width:100%;min-width:0;outline:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host.is-open>button{box-shadow:var(--kirby-elevation-4)}kirby-card{max-height:min(352px,var(--kirby-popover-available-max-height, 352px));overflow-y:auto;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)))}}@media(hover:hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:var(--kirby-font-weight-bold);font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.Renderer2 },
+		{ type: i0.ElementRef },
+		{ type: i0.ChangeDetectorRef },
+		{ type: KeyboardHandlerService },
+		{ type: i2.ResizeObserverService }
+	],
+	propDecorators: {
+		items: [{ type: Input }],
+		selectedIndex: [{ type: Input }],
+		focusedIndex: [{ type: Input }],
+		itemTextProperty: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		popout: [{ type: Input }],
+		attentionLevel: [{ type: Input }],
+		expand: [{ type: Input }],
+		disabled: [{ type: Input }],
+		_isDisabled: [{
+			type: HostBinding,
+			args: ["attr.disabled"]
+		}],
+		hasErrorChange: [{ type: Output }],
+		hasError: [{
+			type: HostBinding,
+			args: ["class.error"]
+		}, { type: Input }],
+		size: [{ type: Input }],
+		tabindex: [{ type: Input }],
+		usePopover: [{ 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"]
+		}],
+		clicked: [{
+			type: HostBinding,
+			args: ["class.clicked"]
+		}],
+		itemTemplate: [{
+			type: ContentChild,
+			args: [ListItemTemplateDirective, {
+				static: true,
+				read: TemplateRef
+			}]
+		}],
+		slottedItems: [{
+			type: ContentChildren,
+			args: [ListItemTemplateDirective, { read: ElementRef }]
+		}],
+		cardElement: [{
+			type: ViewChild,
+			args: [CardComponent, { read: ElementRef }]
+		}],
+		popover: [{
+			type: ViewChild,
+			args: [PopoverComponent]
+		}],
+		buttonElement: [{
+			type: ViewChild,
+			args: [ButtonComponent, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		kirbyItemsDefault: [{
+			type: ViewChildren,
+			args: [ItemComponent, { read: ElementRef }]
+		}],
+		kirbyItemsSlotted: [{
+			type: ContentChildren,
+			args: [ItemComponent, { read: ElementRef }]
+		}],
+		_onTab: [{
+			type: HostListener,
+			args: ["keydown.tab"]
+		}, {
+			type: HostListener,
+			args: ["keydown.shift.tab"]
+		}],
+		_onKeydown: [{
+			type: HostListener,
+			args: ["keydown", ["$event"]]
+		}],
+		_onMouseDown: [{
+			type: HostListener,
+			args: ["mousedown", ["$event"]]
+		}],
+		_onTouchStart: [{
+			type: HostListener,
+			args: ["touchstart", ["$event"]]
+		}],
+		_onFocusOut: [{
+			type: HostListener,
+			args: ["focusout"]
+		}],
+		_onEnterOrEscape: [{
+			type: HostListener,
+			args: ["keydown.enter"]
+		}, {
+			type: HostListener,
+			args: ["keydown.escape"]
+		}],
+		_onEnterOrSpace: [{
+			type: HostListener,
+			args: ["keydown.enter", ["$event"]]
+		}, {
+			type: HostListener,
+			args: ["keydown.space", ["$event"]]
+		}],
+		_onArrowKeys: [
+			{
+				type: HostListener,
+				args: ["keydown.arrowup", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.arrowdown", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.arrowleft", ["$event"]]
+			},
+			{
+				type: HostListener,
+				args: ["keydown.arrowright", ["$event"]]
+			}
+		],
+		_onHomeEndKeys: [{
+			type: HostListener,
+			args: ["keydown.home", ["$event"]]
+		}, {
+			type: HostListener,
+			args: ["keydown.end", ["$event"]]
+		}]
+	}
+});
+var DropdownModule = class DropdownModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DropdownModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DropdownModule,
+			imports: [
+				CardModule,
+				IconModule,
+				ItemModule,
+				PopoverComponent,
+				ButtonComponent,
+				CommonModule,
+				ListModule,
+				DropdownComponent
+			],
+			exports: [DropdownComponent, ListItemTemplateDirective]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DropdownModule,
+			providers: [KeyboardHandlerService],
+			imports: [
+				CardModule,
+				IconModule,
+				ItemModule,
+				PopoverComponent,
+				ButtonComponent,
+				CommonModule,
+				ListModule,
+				DropdownComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: DropdownModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CardModule,
+				IconModule,
+				ItemModule,
+				PopoverComponent,
+				ButtonComponent,
+				CommonModule,
+				ListModule,
+				DropdownComponent
+			],
+			exports: [DropdownComponent, ListItemTemplateDirective],
+			providers: [KeyboardHandlerService]
+		}]
+	}]
+});
 export { DropdownComponent, DropdownModule, KeyboardHandlerService, OpenState };
-//# sourceMappingURL=kirbydesign-designsystem-dropdown.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-dropdown.mjs.map