@kirbydesign/designsystem 11.1.0 → 11.2.0

package/fesm2022/kirbydesign-designsystem-dropdown.mjs

@@ -3,7 +3,7 @@ import { Injectable, EventEmitter, RendererStyleFlags2, ElementRef, TemplateRef,
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from '@kirbydesign/designsystem/card';
 import { CardComponent, CardModule } from '@kirbydesign/designsystem/card';
-import { UniqueIdGenerator, DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
+import { UniqueIdGenerator, DesignTokenHelper, StringSearchHelper } from '@kirbydesign/designsystem/helpers';
 import * as i5 from '@kirbydesign/designsystem/item';
 import { ItemComponent, ItemModule } from '@kirbydesign/designsystem/item';
 import { ListItemTemplateDirective, ListModule } from '@kirbydesign/designsystem/list';
@@ -69,10 +69,10 @@ class KeyboardHandlerService {
         }
         return newIndex;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: KeyboardHandlerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: KeyboardHandlerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -148,17 +148,17 @@ class DropdownComponent {
         forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.buttonElement.nativeElement);
     }
     set kirbyItemsSlotted(kirbyItems) {
-        const hasSlottedItems = this.itemClickUnlisten?.length > 0;
+        const hasSlottedItems = this.disposeItemClickListeners?.length > 0;
         if (hasSlottedItems) {
             this.unlistenAllSlottedItems();
         }
         // Setup a click listener for each new slotted items
         kirbyItems.forEach((kirbyItem, index) => {
             this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');
-            const unlisten = this.renderer.listen(kirbyItem.nativeElement, 'click', () => {
+            const disposeClickListener = this.renderer.listen(kirbyItem.nativeElement, 'click', () => {
                 this.onItemSelect(index);
             });
-            this.itemClickUnlisten.push(unlisten);
+            this.disposeItemClickListeners.push(disposeClickListener);
         });
         this._kirbyItemsSlotted = kirbyItems;
     }
@@ -181,7 +181,7 @@ class DropdownComponent {
         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 = -1;
+        this._focusedIndex = 0;
         this.itemTextProperty = 'text';
         this.placeholder = 'Please select:';
         this.attentionLevel = '3';
@@ -205,16 +205,15 @@ class DropdownComponent {
           clicking outside of the dropdown.
           */
         this.clicked = false;
-        this.itemClickUnlisten = [];
+        this.disposeItemClickListeners = [];
+        this.searchBuffer = '';
+        this.SEARCH_BUFFER_DELAY = 500; // ms
         this._onChange = () => { };
         this._onTouched = () => { };
     }
     onToggle(event) {
         event.stopPropagation();
         this.clicked = true;
-        if (!this.isOpen) {
-            this.elementRef.nativeElement.focus();
-        }
         this.toggle();
     }
     toggle() {
@@ -223,10 +222,6 @@ class DropdownComponent {
         }
         this.isOpen ? this.close() : this.open();
     }
-    onButtonMouseEvent(event) {
-        // Prevent button focus;
-        event.preventDefault();
-    }
     /* Utility that makes it easier to set styles on card element
     when using popover*/
     setPopoverCardStyle(style, value) {
@@ -248,11 +243,8 @@ class DropdownComponent {
                 }
             });
         }
-        // Only call initializeAlignment if cardElement is defined
-        if (this.cardElement && this.cardElement.nativeElement) {
-            this.initializeAlignment();
-        }
         this.forwardAriaLabelToDropdownButton();
+        this.initializeAlignment();
     }
     initializeAlignment() {
         if (this.usePopover)
@@ -326,8 +318,7 @@ class DropdownComponent {
             this.state = OpenState.opening;
             // ensures that the dropdown is opened in case the IntersectionObserverCallback isn't invoked
             this.showDropdownTimeoutId = setTimeout(() => this.showDropdown(), DropdownComponent.OPEN_DELAY_IN_MS);
-            // Move focus to selected item (if any)
-            // If no item is selected, focus the first item
+            // Move focus to selected item (if any) or first item
             this.focusedIndex = this.selectedIndex > -1 ? this.selectedIndex : 0;
         }
     }
@@ -335,7 +326,7 @@ class DropdownComponent {
         if (this.state === OpenState.opening) {
             this.state = OpenState.open;
             this.popover?.show();
-            this.scrollItemIntoView(this.selectedIndex);
+            this.scrollItemIntoView(this.focusedIndex);
             this.changeDetectorRef.markForCheck();
         }
     }
@@ -421,9 +412,9 @@ class DropdownComponent {
             }
         }
     }
-    _onTab(event) {
+    _onTab() {
         if (this.isOpen) {
-            event.preventDefault();
+            this.selectItem(this.focusedIndex);
             this.close();
         }
         if (this.clicked) {
@@ -433,6 +424,112 @@ class DropdownComponent {
             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();
@@ -486,13 +583,13 @@ class DropdownComponent {
             event.preventDefault();
             this.open();
             // If no selected item then focus first or last item
-            if (this.selectedIndex < 0) {
+            if (!event.altKey && this.selectedIndex < 0) {
                 switch (event.key) {
                     case 'ArrowUp':
-                        this.focusedIndex = this.items.length - 1;
+                        this.focusedIndex = 0;
                         break;
                     case 'ArrowDown':
-                        this.focusedIndex = 0;
+                        this.focusedIndex = this.items.length - 1;
                         break;
                     default:
                         break;
@@ -509,8 +606,10 @@ class DropdownComponent {
     _onHomeEndKeys(event) {
         if (this.disabled)
             return;
-        if (!this.isOpen)
-            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;
@@ -518,9 +617,9 @@ class DropdownComponent {
         return false;
     }
     unlistenAllSlottedItems() {
-        let unlistenItem;
-        while ((unlistenItem = this.itemClickUnlisten.pop()) !== undefined) {
-            unlistenItem();
+        let disposeClickListener;
+        while ((disposeClickListener = this.disposeItemClickListeners.pop()) !== undefined) {
+            disposeClickListener();
         }
     }
     ngOnDestroy() {
@@ -530,16 +629,16 @@ class DropdownComponent {
             this.intersectionObserverRef.disconnect();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", 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: "20.1.7", type: DropdownComponent, isStandalone: false, 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: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "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", "class.with-popover": "this.usePopover", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp", "class.clicked": "this.clicked" } }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", 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: "20.3.1", type: DropdownComponent, isStandalone: false, 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: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab()", "keydown": "_onKeydown($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "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", "class.with-popover": "this.usePopover", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp", "class.clicked": "this.clicked" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => DropdownComponent)),
                 multi: true,
             },
-        ], 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]=\"_listboxId + '-item-' + focusedIndex\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick()\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\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</ng-template>\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    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\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: ["@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.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;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: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: i5.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: i6.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+        ], 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]=\"_listboxId + '-item-' + focusedIndex\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick()\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\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</ng-template>\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    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\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: ["@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.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;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: i3.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: i4.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: i5.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: i6.PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-dropdown', providers: [
                         {
@@ -547,7 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             useExisting: forwardRef((() => DropdownComponent)),
                             multi: true,
                         },
-                    ], standalone: false, 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]=\"_listboxId + '-item-' + focusedIndex\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick()\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\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</ng-template>\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    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\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: ["@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.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;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"] }]
+                    ], standalone: false, 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]=\"_listboxId + '-item-' + focusedIndex\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick()\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\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</ng-template>\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    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\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: ["@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.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;min-width:0}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;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: [{
@@ -629,7 +728,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 args: [ItemComponent, { read: ElementRef }]
             }], _onTab: [{
                 type: HostListener,
-                args: ['keydown.tab', ['$event']]
+                args: ['keydown.tab']
+            }], _onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }], _onMouseDown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
@@ -676,8 +778,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
 
 const declarations = [DropdownComponent];
 class DropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [CardModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.1", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [CardModule,
             IconModule,
             ItemModule,
             FormFieldModule,
@@ -685,7 +787,7 @@ class DropdownModule {
             ButtonComponent,
             CommonModule,
             ListModule], exports: [DropdownComponent, ListItemTemplateDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
             IconModule,
             ItemModule,
             FormFieldModule,
@@ -694,7 +796,7 @@ class DropdownModule {
             CommonModule,
             ListModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [