@kirbydesign/designsystem 11.5.0 → 11.6.0

package/fesm2022/kirbydesign-designsystem-dropdown.mjs

@@ -2,7 +2,7 @@ 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, DesignTokenHelper, StringSearchHelper } from '@kirbydesign/designsystem/helpers';
+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';
@@ -18,11 +18,6 @@ var OpenState;
     OpenState[OpenState["opening"] = 1] = "opening";
     OpenState[OpenState["open"] = 2] = "open";
 })(OpenState || (OpenState = {}));
-var VerticalDirection;
-(function (VerticalDirection) {
-    VerticalDirection[VerticalDirection["up"] = 0] = "up";
-    VerticalDirection[VerticalDirection["down"] = 1] = "down";
-})(VerticalDirection || (VerticalDirection = {}));
 
 class KeyboardHandlerService {
     handle(event, selectedIndex, maxIndex, cyclicIndex = false) {
@@ -62,10 +57,10 @@ class KeyboardHandlerService {
         }
         return newIndex;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: KeyboardHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: KeyboardHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeyboardHandlerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: KeyboardHandlerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -101,10 +96,10 @@ class DropdownComponent {
         }
     }
     set popout(direction) {
-        this.horizontalDirection = direction || HorizontalDirection.right;
+        this._popout = direction || HorizontalDirection.right;
     }
     get popout() {
-        return this.horizontalDirection;
+        return this._popout;
     }
     get _isDisabled() {
         return this.disabled ? 'disabled' : null;
@@ -118,6 +113,14 @@ class DropdownComponent {
             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.
+        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;
     }
@@ -140,12 +143,6 @@ class DropdownComponent {
     get isOpen() {
         return this.state === OpenState.open;
     }
-    get _popoutLeft() {
-        return this.horizontalDirection === HorizontalDirection.left;
-    }
-    get _popoutUp() {
-        return this.verticalDirection === VerticalDirection.up;
-    }
     forwardAriaLabelToDropdownButton() {
         forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.buttonElement.nativeElement);
     }
@@ -174,8 +171,7 @@ class DropdownComponent {
         this.keyboardHandlerService = keyboardHandlerService;
         this.resizeObserverService = resizeObserverService;
         this.state = OpenState.closed;
-        this.horizontalDirection = HorizontalDirection.right;
-        this.verticalDirection = VerticalDirection.down;
+        this._popout = HorizontalDirection.right;
         this._attributesToForward = ['aria-label', 'aria-labelledby'];
         this._listboxId = UniqueIdGenerator.scopedTo('kirby-dropdown').next();
         this._comboboxId = UniqueIdGenerator.scopedTo('kirby-button').next();
@@ -193,7 +189,6 @@ class DropdownComponent {
         // 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;
-        this.usePopover = false;
         /**
          * Emitted when an item is selected (tap on mobile, click/keypress on web)
          */
@@ -227,15 +222,12 @@ class DropdownComponent {
         }
         this.isOpen ? this.close() : this.open();
     }
-    /* Utility that makes it easier to set styles on card element
-    when using popover*/
+    /* Utility that makes it easier to set styles on card element */
     setPopoverCardStyle(style, value) {
-        if (!this.usePopover)
-            return;
         this.renderer.setStyle(this.cardElement.nativeElement, style, value, RendererStyleFlags2.DashCase);
     }
     ngAfterViewInit() {
-        if (this.usePopover && this.expand === 'block') {
+        if (this.expand === 'block') {
             const { width: initialWidth } = this.elementRef.nativeElement.getBoundingClientRect();
             this.setPopoverCardStyle('max-width', 'initial');
             this.setPopoverCardStyle('min-width', 'initial');
@@ -249,71 +241,6 @@ class DropdownComponent {
             });
         }
         this.forwardAriaLabelToDropdownButton();
-        this.initializeAlignment();
-    }
-    initializeAlignment() {
-        if (this.usePopover)
-            return;
-        if (!this.intersectionObserverRef) {
-            // Get the design token size of the button. In the button stylesheet a medium button height is utils.size(xl)
-            // and a small button height is utils.size("l")
-            const designTokenSizeHeight = this.size === 'md' ? 'xl' : 'l';
-            // Setting the rootMargin equal to the height of the button
-            // allows the Intersection Observer Callback to be called
-            // even if the dropdown button is intersecting with the viewport
-            const options = {
-                rootMargin: DesignTokenHelper.size(designTokenSizeHeight),
-            };
-            const callback = (entries) => {
-                // Only apply alignment when opening:
-                if (this.state !== OpenState.opening) {
-                    return;
-                }
-                // Cancel any pending timer to show dropdown:
-                clearTimeout(this.showDropdownTimeoutId);
-                const entry = entries[0];
-                const isVisible = entry.boundingClientRect.width > 0;
-                if (isVisible && entry.intersectionRatio < 1) {
-                    this.setHorizontalDirection(entry);
-                    this.setVerticalDirection(entry);
-                }
-                this.showDropdown();
-                this.cdr.markForCheck();
-            };
-            this.intersectionObserverRef = new IntersectionObserver(callback, options);
-            this.intersectionObserverRef.observe(this.cardElement.nativeElement);
-        }
-    }
-    setHorizontalDirection(entry) {
-        // If popout direction is set to right, and the entry is cut off to the right by ${entry.boundingClientRect.right - entry.intersectionRect.right}px
-        // it is set to popout left instead, and vice versa for popout direction left
-        if (this.horizontalDirection === HorizontalDirection.right) {
-            if (entry.boundingClientRect.right > entry.rootBounds.right) {
-                this.horizontalDirection = HorizontalDirection.left;
-            }
-        }
-        else {
-            if (entry.boundingClientRect.left < entry.rootBounds.left) {
-                this.horizontalDirection = HorizontalDirection.right;
-            }
-        }
-    }
-    setVerticalDirection(entry) {
-        if (entry.boundingClientRect.top < 0) {
-            // entry is cut off at the top by ${entry.boundingClientRect.top}px
-            // open downwards:
-            this.verticalDirection = VerticalDirection.down;
-        }
-        if (entry.boundingClientRect.bottom > entry.rootBounds.bottom) {
-            // entry is cut off at the bottom by ${entry.boundingClientRect.bottom - entry.intersectionRect.bottom}px
-            const containerOffsetTop = this.elementRef.nativeElement.getBoundingClientRect().top;
-            const SPACING = 5; //TODO: Get from SCSS
-            // Check if the card can fit on top of button:
-            if (containerOffsetTop > entry.target.clientHeight + SPACING) {
-                // open upwards:
-                this.verticalDirection = VerticalDirection.up;
-            }
-        }
     }
     open() {
         if (this.disabled) {
@@ -322,7 +249,7 @@ class DropdownComponent {
         if (!this.isOpen) {
             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);
+            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;
         }
@@ -341,8 +268,6 @@ class DropdownComponent {
         }
         if (this.isOpen) {
             this.state = OpenState.closed;
-            // Reset vertical direction to default
-            this.verticalDirection = VerticalDirection.down;
             this.popover?.hide();
         }
     }
@@ -551,20 +476,25 @@ class DropdownComponent {
     _onPopoverWillHide() {
         this.state = OpenState.closed;
         this.buttonElement.nativeElement.focus();
+        this._onTouched();
+    }
+    _onFocusOut(event) {
+        const relatedTarget = event.relatedTarget; // relatedTarget is the element receiving focus
+        const isOnTriggerButton = relatedTarget && this.elementRef.nativeElement.contains(relatedTarget);
+        const isInsidePopover = relatedTarget && relatedTarget.closest('kirby-popover');
+        if (!isOnTriggerButton && !isInsidePopover) {
+            if (this.isOpen) {
+                this.close();
+            }
+            this._onTouched();
+        }
     }
     _onEnterOrEscape() {
         this.close();
-        this._onTouched();
     }
     _onPopoverClick() {
         this.close();
     }
-    _onBlur() {
-        if (this.usePopover)
-            return;
-        this.close();
-        this._onTouched();
-    }
     _onEnterOrSpace(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -627,20 +557,17 @@ class DropdownComponent {
     ngOnDestroy() {
         this.unlistenAllSlottedItems();
         this.resizeObserverService.unobserve(this.elementRef);
-        if (this.intersectionObserverRef) {
-            this.intersectionObserverRef.disconnect();
-        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", 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.0.6", 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": "_onKeydown($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "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", "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: "21.1.4", 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.1.4", 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": "_onKeydown($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focusout": "_onFocusOut($event)", "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,
             },
-        ], 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  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  (blur)=\"_onBlur()\"\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<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{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}: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: 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"] }] }); }
+        ], 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    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: ["@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{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}: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.0.6", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-dropdown', providers: [
                         {
@@ -655,7 +582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         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]=\"_listboxId + '-item-' + focusedIndex\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  (blur)=\"_onBlur()\"\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<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{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}: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"] }]
+                    ], 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    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: ["@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{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}: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: [{
@@ -689,9 +616,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }], tabindex: [{
                 type: Input
             }], usePopover: [{
-                type: HostBinding,
-                args: ['class.with-popover']
-            }, {
                 type: Input
             }], _noBlurOnScroll: [{
                 type: HostBinding,
@@ -707,12 +631,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }], isOpen: [{
                 type: HostBinding,
                 args: ['class.is-open']
-            }], _popoutLeft: [{
-                type: HostBinding,
-                args: ['class.popout-left']
-            }], _popoutUp: [{
-                type: HostBinding,
-                args: ['class.popout-up']
             }], clicked: [{
                 type: HostBinding,
                 args: ['class.clicked']
@@ -749,6 +667,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }], _onTouchStart: [{
                 type: HostListener,
                 args: ['touchstart', ['$event']]
+            }], _onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
             }], _onEnterOrEscape: [{
                 type: HostListener,
                 args: ['keydown.enter']
@@ -782,8 +703,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }] } });
 
 class DropdownModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: DropdownModule, imports: [CardModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.4", ngImport: i0, type: DropdownModule, imports: [CardModule,
             IconModule,
             ItemModule,
             PopoverComponent,
@@ -791,7 +712,7 @@ class DropdownModule {
             CommonModule,
             ListModule,
             DropdownComponent], exports: [DropdownComponent, ListItemTemplateDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownModule, providers: [KeyboardHandlerService], imports: [CardModule,
             IconModule,
             ItemModule,
             PopoverComponent,
@@ -800,7 +721,7 @@ class DropdownModule {
             ListModule,
             DropdownComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DropdownModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DropdownModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -822,5 +743,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DropdownComponent, DropdownModule, KeyboardHandlerService, OpenState, VerticalDirection };
+export { DropdownComponent, DropdownModule, KeyboardHandlerService, OpenState };
 //# sourceMappingURL=kirbydesign-designsystem-dropdown.mjs.map