@kirbydesign/designsystem 11.11.2 → 12.0.0

package/fesm2022/kirbydesign-designsystem-menu.mjs

@@ -1,312 +1,421 @@
-import * as i0 from '@angular/core';
-import { ElementRef, HostListener, ContentChildren, ViewChild, ContentChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { ItemComponent } from '@kirbydesign/designsystem/item';
-import { CardComponent } from '@kirbydesign/designsystem/card';
-import { IconComponent } from '@kirbydesign/designsystem/icon';
-import { ButtonSize, ButtonComponent } from '@kirbydesign/designsystem/button';
-import { FloatingOffset, FloatingDirective } from '@kirbydesign/designsystem/shared/floating';
-import { UniqueIdGenerator, StringSearchHelper } from '@kirbydesign/designsystem/helpers';
-import * as i1 from '@kirbydesign/designsystem/shared';
-import { forwardAttributes } from '@kirbydesign/designsystem/shared';
-import { componentOnReady } from '@ionic/core';
-import { startWith } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
-class MenuComponent {
-    constructor(cdr, elementRef, zone, renderer, translations, destroyRef) {
-        this.cdr = cdr;
-        this.elementRef = elementRef;
-        this.zone = zone;
-        this.renderer = renderer;
-        this.translations = translations;
-        this.destroyRef = destroyRef;
-        this.menuId = UniqueIdGenerator.scopedTo('kirby-menu').next();
-        this.triggerButtonId = UniqueIdGenerator.scopedTo('kirby-menu-trigger-button').next();
-        this._attributesToForward = ['aria-label', 'aria-labelledby'];
-        this.isDisabled = false;
-        this.buttonSize = ButtonSize.MD;
-        this.placement = 'bottom-start';
-        this.attentionLevel = '3';
-        this.triggers = ['click'];
-        this.DOMPortalOutlet = this.elementRef.nativeElement.ownerDocument.body;
-        this.autoPlacement = false;
-        this.closeOnSelect = true;
-        this.closeOnEscapeKey = true;
-        this.closeOnBackdrop = true;
-        this.shift = true;
-        this.floatingMenuIsShown = false;
-        this.FloatingOffset = FloatingOffset;
-        this.focusedIndex = -1;
-    }
-    _onKeydown(event) {
-        if (this.kirbyItems.length === 0) {
-            console.warn('[Kirby] No items found within menu');
-            return;
-        }
-        if (this.floatingMenuIsShown) {
-            this.handleKeyDownForOpenedMenu(event);
-        }
-        else {
-            this.handleKeyDownForClosedMenu(event);
-        }
-    }
-    _onClick() {
-        if (!this.floatingMenuIsShown)
-            return;
-        this.focusedIndex = 0;
-        this.focusItem();
-    }
-    preventDefaultAndStopImmediatePropagation(event) {
-        event.stopImmediatePropagation();
-        event.preventDefault();
-    }
-    getFirstInteractiveElement(el) {
-        return el.querySelector('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled])');
-    }
-    handleKeyDownForClosedMenu(event) {
-        const key = event.key;
-        switch (key) {
-            case ' ':
-            case 'Enter':
-            case 'ArrowDown':
-                this.preventDefaultAndStopImmediatePropagation(event);
-                this.focusedIndex = 0;
-                this.floatingMenu.show();
-                this.focusItem();
-                break;
-            case 'ArrowUp':
-                this.preventDefaultAndStopImmediatePropagation(event);
-                this.focusedIndex = this.kirbyItems.length - 1;
-                this.floatingMenu.show();
-                this.focusItem();
-                break;
-        }
-    }
-    handleKeyDownForOpenedMenu(event) {
-        const key = event.key;
-        switch (key) {
-            case 'ArrowDown':
-                this.preventDefaultAndStopImmediatePropagation(event);
-                if (this.focusedIndex === this.kirbyItems.length - 1) {
-                    this.focusedIndex = 0;
-                }
-                else {
-                    this.focusedIndex++;
-                }
-                this.focusItem();
-                break;
-            case 'ArrowUp':
-                this.preventDefaultAndStopImmediatePropagation(event);
-                if (this.focusedIndex === 0) {
-                    this.focusedIndex = this.kirbyItems.length - 1;
-                }
-                else {
-                    this.focusedIndex--;
-                }
-                this.focusItem();
-                break;
-            case 'Home': {
-                this.preventDefaultAndStopImmediatePropagation(event);
-                if (this.focusedIndex > 0) {
-                    this.focusedIndex = 0;
-                    this.focusItem();
-                }
-                break;
-            }
-            case 'End': {
-                this.preventDefaultAndStopImmediatePropagation(event);
-                if (this.focusedIndex < this.kirbyItems.length - 1) {
-                    this.focusedIndex = this.kirbyItems.length - 1;
-                    this.focusItem();
-                }
-                break;
-            }
-            case 'Escape':
-                this.preventDefaultAndStopImmediatePropagation(event);
-                if (this.closeOnEscapeKey) {
-                    this.floatingMenu.hide();
-                }
-                break;
-            case 'Tab':
-                this.floatingMenu.hide();
-                break;
-            default: {
-                if (StringSearchHelper.isPrintableCharacter(key)) {
-                    this.preventDefaultAndStopImmediatePropagation(event);
-                    const foundItemIndex = this.getIndexOfItemByFirstCharacter(key);
-                    if (foundItemIndex > -1) {
-                        this.focusedIndex = foundItemIndex;
-                        this.focusItem();
-                    }
-                }
-            }
-        }
-    }
-    getIndexOfItemByFirstCharacter(char) {
-        return StringSearchHelper.getIndexByFirstMatchingStartString(char, this.kirbyItems.map((item) => item.nativeElement.innerText), this.focusedIndex + 1);
-    }
-    focusItem() {
-        const itemToBeFocused = this.kirbyItems.get(this.focusedIndex);
-        const ionItem = itemToBeFocused.nativeElement.querySelector('ion-item');
-        // Look for interactive element within ion-item like toggle or checkbox and set focus if found
-        const firstInteractiveElementWithinItem = this.getFirstInteractiveElement(ionItem);
-        if (firstInteractiveElementWithinItem) {
-            firstInteractiveElementWithinItem.focus();
-        }
-        else {
-            this.focusSelectableItem(ionItem);
-        }
-    }
-    focusSelectableItem(ionItem) {
-        const nativeButton = ionItem.shadowRoot.querySelector('button:not([disabled])');
-        nativeButton?.focus();
-    }
-    getTriggerButton() {
-        return (this.userProvidedButton ?? this.defaultButtonElement).nativeElement;
-    }
-    ngAfterViewInit() {
-        this.cdr.detectChanges(); // Sets the updated reference for kirby-floating
-        this.zone.runOutsideAngular(() => {
-            /*
-             * Listen for ionScroll outside of Angular's change detection to
-             * avoid a change detection cycle for every scroll-event fired
-             */
-            this.disposeIonScrollListener = this.renderer.listen(document, 'ionScroll', () => {
-                this.floatingMenu.hide();
-            });
-        });
-        this.forwardAriaLabelToTriggerButton();
-    }
-    ngAfterContentInit() {
-        this.setUserProvidedButtonAriaAttributes();
-        this.kirbyItemComponents.changes
-            .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.setRoleAttributeForAllItems();
-            this.ensureSelectableItems();
-        });
-    }
-    forwardAriaLabelToTriggerButton() {
-        forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.getTriggerButton());
-    }
-    ensureSelectableItems() {
-        this.kirbyItemComponents.forEach((itemComponent) => {
-            if (itemComponent.selectable === undefined) {
-                itemComponent.selectable = true;
-            }
-        });
-    }
-    setRoleAttributeForAllItems() {
-        this.kirbyItems.forEach((item) => {
-            this.setRoleOnNativeControl(item.nativeElement);
-        });
-    }
-    async setRoleOnNativeControl(item) {
-        const ionItem = item.querySelector('ion-item');
-        if (!ionItem)
-            return;
-        await new Promise((resolve) => componentOnReady(ionItem, resolve));
-        const checkableInput = ionItem
-            .querySelector('ion-toggle, ion-checkbox')
-            ?.shadowRoot?.querySelector('input');
-        const button = ionItem.shadowRoot?.querySelector('button');
-        const nativeControl = checkableInput ?? button;
-        if (!nativeControl)
-            return;
-        this.renderer.setAttribute(nativeControl, 'role', checkableInput ? 'menuitemcheckbox' : 'menuitem');
-    }
-    menuVisibilityChanged(menuIsShown) {
-        this.floatingMenuIsShown = menuIsShown;
-        this.renderer.setAttribute(this.getTriggerButton(), 'aria-expanded', menuIsShown.toString());
-        if (!menuIsShown) {
-            this.focusedIndex = -1;
-            this.getTriggerButton().focus();
-        }
-    }
-    setUserProvidedButtonAriaAttributes() {
-        if (!this.userProvidedButton)
-            return;
-        const button = this.userProvidedButton.nativeElement;
-        if (button.id) {
-            this.triggerButtonId = button.id;
-        }
-        else {
-            this.renderer.setAttribute(button, 'id', this.triggerButtonId);
-        }
-        if (!button.getAttribute('aria-controls')) {
-            this.renderer.setAttribute(button, 'aria-controls', this.menuId);
-        }
-        if (!button.getAttribute('aria-haspopup')) {
-            this.renderer.setAttribute(button, 'aria-haspopup', 'true');
-        }
-        if (!button.getAttribute('aria-label')) {
-            this.renderer.setAttribute(button, 'aria-label', this.translations.get('more'));
-        }
-    }
-    ngOnDestroy() {
-        this.disposeIonScrollListener?.();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.TranslationService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MenuComponent, isStandalone: true, selector: "kirby-menu", inputs: { isDisabled: "isDisabled", buttonSize: "buttonSize", placement: "placement", attentionLevel: "attentionLevel", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop", shift: "shift", minWidth: "minWidth" }, host: { listeners: { "keydown": "_onKeydown($event)", "click": "_onClick()" } }, queries: [{ propertyName: "userProvidedButton", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }, { propertyName: "kirbyItems", predicate: ItemComponent, read: ElementRef }, { propertyName: "kirbyItemComponents", predicate: ItemComponent }], viewQueries: [{ propertyName: "buttonContainerElement", first: true, predicate: ["buttonContainer"], descendants: true, read: ElementRef }, { propertyName: "defaultButtonElement", first: true, predicate: ["defaultButton"], descendants: true, read: ElementRef }, { propertyName: "floatingMenu", first: true, predicate: FloatingDirective, descendants: true }], ngImport: i0, template: "<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;min-width:240px;max-width:460px}\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: FloatingDirective, selector: "[kirbyFloating]", inputs: ["reference", "placement", "strategy", "triggers", "DOMPortalOutlet", "portalOutletConfig", "isDisabled", "offset", "shift", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop"], outputs: ["displayChanged"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-menu', imports: [ButtonComponent, FloatingDirective, CardComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;min-width:240px;max-width:460px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.TranslationService }, { type: i0.DestroyRef }], propDecorators: { isDisabled: [{
-                type: Input
-            }], buttonSize: [{
-                type: Input
-            }], placement: [{
-                type: Input
-            }], attentionLevel: [{
-                type: Input
-            }], triggers: [{
-                type: Input
-            }], DOMPortalOutlet: [{
-                type: Input
-            }], portalOutletConfig: [{
-                type: Input
-            }], autoPlacement: [{
-                type: Input
-            }], closeOnSelect: [{
-                type: Input
-            }], closeOnEscapeKey: [{
-                type: Input
-            }], closeOnBackdrop: [{
-                type: Input
-            }], shift: [{
-                type: Input
-            }], minWidth: [{
-                type: Input
-            }], buttonContainerElement: [{
-                type: ViewChild,
-                args: ['buttonContainer', { read: ElementRef }]
-            }], defaultButtonElement: [{
-                type: ViewChild,
-                args: ['defaultButton', { read: ElementRef }]
-            }], userProvidedButton: [{
-                type: ContentChild,
-                args: [ButtonComponent, { read: ElementRef }]
-            }], floatingMenu: [{
-                type: ViewChild,
-                args: [FloatingDirective]
-            }], kirbyItems: [{
-                type: ContentChildren,
-                args: [ItemComponent, { read: ElementRef }]
-            }], kirbyItemComponents: [{
-                type: ContentChildren,
-                args: [ItemComponent]
-            }], _onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], _onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, ElementRef, HostListener, Input, ViewChild } from "@angular/core";
+import { ItemComponent } from "@kirbydesign/designsystem/item";
+import { CardComponent } from "@kirbydesign/designsystem/card";
+import { IconComponent } from "@kirbydesign/designsystem/icon";
+import { ButtonComponent, ButtonSize } from "@kirbydesign/designsystem/button";
+import { FloatingDirective, FloatingOffset } from "@kirbydesign/designsystem/shared/floating";
+import { StringSearchHelper, UniqueIdGenerator } from "@kirbydesign/designsystem/helpers";
+import * as i1 from "@kirbydesign/designsystem/shared";
+import { forwardAttributes } from "@kirbydesign/designsystem/shared";
+import { componentOnReady } from "@ionic/core";
+import { startWith } from "rxjs";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+var MenuComponent = class MenuComponent {
+	constructor(cdr, elementRef, zone, renderer, translations, destroyRef) {
+		this.cdr = cdr;
+		this.elementRef = elementRef;
+		this.zone = zone;
+		this.renderer = renderer;
+		this.translations = translations;
+		this.destroyRef = destroyRef;
+		this.menuId = UniqueIdGenerator.scopedTo("kirby-menu").next();
+		this.triggerButtonId = UniqueIdGenerator.scopedTo("kirby-menu-trigger-button").next();
+		this._attributesToForward = ["aria-label", "aria-labelledby"];
+		this.isDisabled = false;
+		this.buttonSize = ButtonSize.MD;
+		this.placement = "bottom-start";
+		this.attentionLevel = "3";
+		this.triggers = ["click"];
+		this.DOMPortalOutlet = this.elementRef.nativeElement.ownerDocument.body;
+		this.autoPlacement = false;
+		this.closeOnSelect = true;
+		this.closeOnEscapeKey = true;
+		this.closeOnBackdrop = true;
+		this.shift = true;
+		this.floatingMenuIsShown = false;
+		this.FloatingOffset = FloatingOffset;
+		this.focusedIndex = -1;
+	}
+	_onKeydown(event) {
+		if (this.kirbyItems.length === 0) {
+			console.warn("[Kirby] No items found within menu");
+			return;
+		}
+		if (this.floatingMenuIsShown) this.handleKeyDownForOpenedMenu(event);
+		else this.handleKeyDownForClosedMenu(event);
+	}
+	_onClick() {
+		if (!this.floatingMenuIsShown) return;
+		this.focusedIndex = 0;
+		this.focusItem();
+	}
+	preventDefaultAndStopImmediatePropagation(event) {
+		event.stopImmediatePropagation();
+		event.preventDefault();
+	}
+	getFirstInteractiveElement(el) {
+		return el.querySelector("ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled])");
+	}
+	handleKeyDownForClosedMenu(event) {
+		switch (event.key) {
+			case " ":
+			case "Enter":
+			case "ArrowDown":
+				this.preventDefaultAndStopImmediatePropagation(event);
+				this.focusedIndex = 0;
+				this.floatingMenu.show();
+				this.focusItem();
+				break;
+			case "ArrowUp":
+				this.preventDefaultAndStopImmediatePropagation(event);
+				this.focusedIndex = this.kirbyItems.length - 1;
+				this.floatingMenu.show();
+				this.focusItem();
+		}
+	}
+	handleKeyDownForOpenedMenu(event) {
+		const key = event.key;
+		switch (key) {
+			case "ArrowDown":
+				this.preventDefaultAndStopImmediatePropagation(event);
+				if (this.focusedIndex === this.kirbyItems.length - 1) this.focusedIndex = 0;
+				else this.focusedIndex++;
+				this.focusItem();
+				break;
+			case "ArrowUp":
+				this.preventDefaultAndStopImmediatePropagation(event);
+				if (this.focusedIndex === 0) this.focusedIndex = this.kirbyItems.length - 1;
+				else this.focusedIndex--;
+				this.focusItem();
+				break;
+			case "Home":
+				this.preventDefaultAndStopImmediatePropagation(event);
+				if (this.focusedIndex > 0) {
+					this.focusedIndex = 0;
+					this.focusItem();
+				}
+				break;
+			case "End":
+				this.preventDefaultAndStopImmediatePropagation(event);
+				if (this.focusedIndex < this.kirbyItems.length - 1) {
+					this.focusedIndex = this.kirbyItems.length - 1;
+					this.focusItem();
+				}
+				break;
+			case "Escape":
+				this.preventDefaultAndStopImmediatePropagation(event);
+				if (this.closeOnEscapeKey) this.floatingMenu.hide();
+				break;
+			case "Tab":
+				this.floatingMenu.hide();
+				break;
+			default: if (StringSearchHelper.isPrintableCharacter(key)) {
+				this.preventDefaultAndStopImmediatePropagation(event);
+				const foundItemIndex = this.getIndexOfItemByFirstCharacter(key);
+				if (foundItemIndex > -1) {
+					this.focusedIndex = foundItemIndex;
+					this.focusItem();
+				}
+			}
+		}
+	}
+	getIndexOfItemByFirstCharacter(char) {
+		return StringSearchHelper.getIndexByFirstMatchingStartString(char, this.kirbyItems.map((item) => item.nativeElement.innerText), this.focusedIndex + 1);
+	}
+	focusItem() {
+		const ionItem = this.kirbyItems.get(this.focusedIndex).nativeElement.querySelector("ion-item");
+		const firstInteractiveElementWithinItem = this.getFirstInteractiveElement(ionItem);
+		if (firstInteractiveElementWithinItem) firstInteractiveElementWithinItem.focus();
+		else this.focusSelectableItem(ionItem);
+	}
+	focusSelectableItem(ionItem) {
+		ionItem.shadowRoot.querySelector("button:not([disabled])")?.focus();
+	}
+	getTriggerButton() {
+		return (this.userProvidedButton ?? this.defaultButtonElement).nativeElement;
+	}
+	ngAfterViewInit() {
+		this.cdr.detectChanges();
+		this.zone.runOutsideAngular(() => {
+			this.disposeIonScrollListener = this.renderer.listen(document, "ionScroll", () => {
+				this.floatingMenu.hide();
+			});
+		});
+		this.forwardAriaLabelToTriggerButton();
+	}
+	ngAfterContentInit() {
+		this.setUserProvidedButtonAriaAttributes();
+		this.kirbyItemComponents.changes.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+			this.setRoleAttributeForAllItems();
+			this.ensureSelectableItems();
+		});
+	}
+	forwardAriaLabelToTriggerButton() {
+		forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.getTriggerButton());
+	}
+	ensureSelectableItems() {
+		this.kirbyItemComponents.forEach((itemComponent) => {
+			if (itemComponent.selectable === void 0) itemComponent.selectable = true;
+		});
+	}
+	setRoleAttributeForAllItems() {
+		this.kirbyItems.forEach((item) => {
+			this.setRoleOnNativeControl(item.nativeElement);
+		});
+	}
+	async setRoleOnNativeControl(item) {
+		const ionItem = item.querySelector("ion-item");
+		if (!ionItem) return;
+		await new Promise((resolve) => componentOnReady(ionItem, resolve));
+		const checkableInput = ionItem.querySelector("ion-toggle, ion-checkbox")?.shadowRoot?.querySelector("input");
+		const button = ionItem.shadowRoot?.querySelector("button");
+		const nativeControl = checkableInput ?? button;
+		if (!nativeControl) return;
+		this.renderer.setAttribute(nativeControl, "role", checkableInput ? "menuitemcheckbox" : "menuitem");
+	}
+	menuVisibilityChanged(menuIsShown) {
+		this.floatingMenuIsShown = menuIsShown;
+		this.renderer.setAttribute(this.getTriggerButton(), "aria-expanded", menuIsShown.toString());
+		if (!menuIsShown) {
+			this.focusedIndex = -1;
+			this.getTriggerButton().focus();
+		}
+	}
+	setUserProvidedButtonAriaAttributes() {
+		if (!this.userProvidedButton) return;
+		const button = this.userProvidedButton.nativeElement;
+		if (button.id) this.triggerButtonId = button.id;
+		else this.renderer.setAttribute(button, "id", this.triggerButtonId);
+		if (!button.getAttribute("aria-controls")) this.renderer.setAttribute(button, "aria-controls", this.menuId);
+		if (!button.getAttribute("aria-haspopup")) this.renderer.setAttribute(button, "aria-haspopup", "true");
+		if (!button.getAttribute("aria-label")) this.renderer.setAttribute(button, "aria-label", this.translations.get("more"));
+	}
+	ngOnDestroy() {
+		this.disposeIonScrollListener?.();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: MenuComponent,
+			deps: [
+				{ token: i0.ChangeDetectorRef },
+				{ token: i0.ElementRef },
+				{ token: i0.NgZone },
+				{ token: i0.Renderer2 },
+				{ token: i1.TranslationService },
+				{ token: i0.DestroyRef }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: MenuComponent,
+			isStandalone: true,
+			selector: "kirby-menu",
+			inputs: {
+				isDisabled: "isDisabled",
+				buttonSize: "buttonSize",
+				placement: "placement",
+				attentionLevel: "attentionLevel",
+				triggers: "triggers",
+				DOMPortalOutlet: "DOMPortalOutlet",
+				portalOutletConfig: "portalOutletConfig",
+				autoPlacement: "autoPlacement",
+				closeOnSelect: "closeOnSelect",
+				closeOnEscapeKey: "closeOnEscapeKey",
+				closeOnBackdrop: "closeOnBackdrop",
+				shift: "shift",
+				minWidth: "minWidth"
+			},
+			host: { listeners: {
+				"keydown": "_onKeydown($event)",
+				"click": "_onClick()"
+			} },
+			queries: [
+				{
+					propertyName: "userProvidedButton",
+					first: true,
+					predicate: ButtonComponent,
+					descendants: true,
+					read: ElementRef
+				},
+				{
+					propertyName: "kirbyItems",
+					predicate: ItemComponent,
+					read: ElementRef
+				},
+				{
+					propertyName: "kirbyItemComponents",
+					predicate: ItemComponent
+				}
+			],
+			viewQueries: [
+				{
+					propertyName: "buttonContainerElement",
+					first: true,
+					predicate: ["buttonContainer"],
+					descendants: true,
+					read: ElementRef
+				},
+				{
+					propertyName: "defaultButtonElement",
+					first: true,
+					predicate: ["defaultButton"],
+					descendants: true,
+					read: ElementRef
+				},
+				{
+					propertyName: "floatingMenu",
+					first: true,
+					predicate: FloatingDirective,
+					descendants: true
+				}
+			],
+			ngImport: i0,
+			template: "<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:var(--kirby-elevation-4);min-width:240px;max-width:460px}\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: FloatingDirective,
+					selector: "[kirbyFloating]",
+					inputs: [
+						"reference",
+						"placement",
+						"strategy",
+						"triggers",
+						"DOMPortalOutlet",
+						"portalOutletConfig",
+						"isDisabled",
+						"offset",
+						"shift",
+						"autoPlacement",
+						"closeOnSelect",
+						"closeOnEscapeKey",
+						"closeOnBackdrop"
+					],
+					outputs: ["displayChanged"]
+				},
+				{
+					kind: "component",
+					type: CardComponent,
+					selector: "kirby-card",
+					inputs: [
+						"title",
+						"subtitle",
+						"backgroundImageUrl",
+						"hasPadding",
+						"sizes",
+						"variant"
+					]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "kirby-icon",
+					inputs: ["size", "name"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: MenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-menu",
+			imports: [
+				ButtonComponent,
+				FloatingDirective,
+				CardComponent,
+				IconComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:var(--kirby-elevation-4);min-width:240px;max-width:460px}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.ElementRef },
+		{ type: i0.NgZone },
+		{ type: i0.Renderer2 },
+		{ type: i1.TranslationService },
+		{ type: i0.DestroyRef }
+	],
+	propDecorators: {
+		isDisabled: [{ type: Input }],
+		buttonSize: [{ type: Input }],
+		placement: [{ type: Input }],
+		attentionLevel: [{ type: Input }],
+		triggers: [{ type: Input }],
+		DOMPortalOutlet: [{ type: Input }],
+		portalOutletConfig: [{ type: Input }],
+		autoPlacement: [{ type: Input }],
+		closeOnSelect: [{ type: Input }],
+		closeOnEscapeKey: [{ type: Input }],
+		closeOnBackdrop: [{ type: Input }],
+		shift: [{ type: Input }],
+		minWidth: [{ type: Input }],
+		buttonContainerElement: [{
+			type: ViewChild,
+			args: ["buttonContainer", { read: ElementRef }]
+		}],
+		defaultButtonElement: [{
+			type: ViewChild,
+			args: ["defaultButton", { read: ElementRef }]
+		}],
+		userProvidedButton: [{
+			type: ContentChild,
+			args: [ButtonComponent, { read: ElementRef }]
+		}],
+		floatingMenu: [{
+			type: ViewChild,
+			args: [FloatingDirective]
+		}],
+		kirbyItems: [{
+			type: ContentChildren,
+			args: [ItemComponent, { read: ElementRef }]
+		}],
+		kirbyItemComponents: [{
+			type: ContentChildren,
+			args: [ItemComponent]
+		}],
+		_onKeydown: [{
+			type: HostListener,
+			args: ["keydown", ["$event"]]
+		}],
+		_onClick: [{
+			type: HostListener,
+			args: ["click"]
+		}]
+	}
+});
 export { MenuComponent };
-//# sourceMappingURL=kirbydesign-designsystem-menu.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-menu.mjs.map