@kirbydesign/extensions-angular 3.3.0 → 3.5.0

package/fesm2022/kirbydesign-extensions-angular-sidebar-menu.mjs

@@ -0,0 +1,620 @@
+import * as i0 from '@angular/core';
+import { input, computed, Component, signal, Injectable, inject, ElementRef, forwardRef, ChangeDetectionStrategy, afterNextRender, output, Directive, model, effect, EventEmitter, Output, Input, NgModule } from '@angular/core';
+import { DividerComponent } from '@kirbydesign/designsystem/divider';
+import { RouterLink } from '@angular/router';
+import { ToggleButtonComponent } from '@kirbydesign/designsystem/toggle-button';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import * as i1 from '@kirbydesign/designsystem/icon';
+import { IconModule, IconComponent } from '@kirbydesign/designsystem/icon';
+import { BadgeComponent } from '@kirbydesign/designsystem/badge';
+import { trigger, transition, style, animate, AUTO_STYLE } from '@angular/animations';
+import { Subject, debounceTime } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+
+/**
+ * the HTMLElement.scrollIntoViewIfNecessary is non-standard and not supported in all browsers (e.g. firefox),
+ * so we implement a version based on standard
+ */
+function scrollIntoViewIfNecessary(scrollContainer, child, position = 'center') {
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = child.getBoundingClientRect();
+    if (containerRect.top > elementRect.top || containerRect.bottom < elementRect.bottom) {
+        child.scrollIntoView({
+            behavior: 'instant',
+            block: position,
+            inline: position,
+        });
+    }
+}
+
+class MenuItemComponent {
+    constructor() {
+        this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
+        this.iconSize = computed(() => (this.size() === 'lg' ? 'sm' : 'xs'), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MenuItemComponent, isStandalone: true, selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "\"item\" + id()", "class": "size()" } }, ngImport: i0, template: "<div class=\"menu-item-start {{ size() }}\">\n  @if (icon(); as icon) {\n    <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n  }\n</div>\n\n<div class=\"menu-item-content {{ size() }}\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n  <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:32px;border-radius:8px;padding:4px 12px;gap:8px;border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:40px}@media (pointer: coarse){:host.md{min-height:40px}}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{outline:none}@media (hover: hover) and (pointer: fine){: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}}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:24px;height:24px}.menu-item-start.sm,.menu-item-start.xs{width:16px;height:16px}.menu-item-start.sm{padding-left:32px}.menu-item-start.xs{padding-left:56px}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left}.menu-item-content.lg,.menu-item-content.md{font-size:16px;line-height:24px}.menu-item-content.sm{font-size:14px;line-height:20px}.menu-item-content.xs{font-size:12px;line-height:16px}.menu-item-end{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[kirby-x-menu-item],button[kirby-x-menu-item]', host: {
+                        '[attr.id]': '"item" + id()',
+                        '[class]': 'size()',
+                    }, imports: [IconModule, BadgeComponent], template: "<div class=\"menu-item-start {{ size() }}\">\n  @if (icon(); as icon) {\n    <kirby-icon [size]=\"iconSize()\" [name]=\"icon\"></kirby-icon>\n  }\n</div>\n\n<div class=\"menu-item-content {{ size() }}\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"menu-item-end\">\n  <ng-content select=\"[slot='end']\"></ng-content>\n</div>\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;align-items:center;align-self:stretch;box-sizing:border-box;min-height:32px;border-radius:8px;padding:4px 12px;gap:8px;border:none;background:inherit;font:inherit;color:inherit;text-decoration:none;cursor:pointer}:host.lg{min-height:40px}@media (pointer: coarse){:host.md{min-height:40px}}:host:hover{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}:host:active{background:var(--menuitem-active-background-color, var(--kirby-inputs-background-color-active))}:host:focus-visible{outline:none}@media (hover: hover) and (pointer: fine){: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}}.menu-item-start{display:flex;align-items:center;justify-content:center;flex-shrink:0}.menu-item-start.lg,.menu-item-start.md{width:24px;height:24px}.menu-item-start.sm,.menu-item-start.xs{width:16px;height:16px}.menu-item-start.sm{padding-left:32px}.menu-item-start.xs{padding-left:56px}.menu-item-content{display:flex;flex-grow:1;align-items:center;text-align:left}.menu-item-content.lg,.menu-item-content.md{font-size:16px;line-height:24px}.menu-item-content.sm{font-size:14px;line-height:20px}.menu-item-content.xs{font-size:12px;line-height:16px}.menu-item-end{display:inline-flex;align-items:center}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
+
+class MenuStateService {
+    #toggledSubmenu = signal(undefined, ...(ngDevMode ? [{ debugName: "#toggledSubmenu" }] : []));
+    #selectedItem = signal(undefined, ...(ngDevMode ? [{ debugName: "#selectedItem" }] : []));
+    #checkEvent = signal(undefined, ...(ngDevMode ? [{ debugName: "#checkEvent" }] : []));
+    get toggledSubmenu() {
+        return this.#toggledSubmenu;
+    }
+    set toggledSubmenu(item) {
+        this.#toggledSubmenu.set(item);
+    }
+    get selectedItem() {
+        return this.#selectedItem;
+    }
+    set selectedItem(item) {
+        if (item.selectable ?? true) {
+            this.#selectedItem.set(item);
+        }
+    }
+    get checkEvent() {
+        return this.#checkEvent.asReadonly();
+    }
+    set checkEvent(event) {
+        this.#checkEvent.set(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuStateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MenuAnchorItemComponent {
+    constructor() {
+        this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+        this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.#menuStateService = inject(MenuStateService);
+        this.vm = {
+            link: computed(() => determineLinkType(this.item())),
+            id: computed(() => this.item().id),
+            size: this.size,
+            badge: computed(() => this.item().badge),
+            toggle: computed(() => this.item().toggle),
+            icon: computed(() => this.item().icon),
+            isSelected: computed(() => this.item().selected ?? false),
+            title: computed(() => this.item().title ?? ''),
+            selectItem: this.#selectItem.bind(this),
+            checkItem: this.#checkItem.bind(this),
+        };
+    }
+    #menuStateService;
+    #selectItem() {
+        this.#menuStateService.selectedItem = this.item();
+    }
+    #checkItem(checked) {
+        this.#menuStateService.checkEvent = { item: this.item(), checked };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuAnchorItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MenuAnchorItemComponent, isStandalone: true, selector: "li[kirby-x-menu-anchor-item]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.selected": "vm.isSelected()", "class.checked": "vm.toggle()?.isChecked", "class.has-toggle": "!!vm.toggle()", "class.has-badge": "!!vm.badge()" } }, ngImport: i0, template: "@let link = vm.link();\n@if (link) {\n  @switch (link.type) {\n    @case ('action') {\n      <a\n        kirby-x-menu-item\n        [class.selected]=\"vm.isSelected()\"\n        [id]=\"vm.id()\"\n        [size]=\"vm.size()\"\n        [icon]=\"vm.icon()\"\n        [attr.href]=\"link.url\"\n        (click)=\"$event.preventDefault(); vm.selectItem()\"\n        (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n      >\n        {{ vm.title() }}\n        <div class=\"end-wrapper\" slot=\"end\">\n          @if (vm.badge(); as badge) {\n            <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n              {{ badge.value }}\n            </kirby-badge>\n          }\n        </div>\n      </a>\n    }\n    @case ('router-link') {\n      <a\n        kirby-x-menu-item\n        [class.selected]=\"vm.isSelected()\"\n        [id]=\"vm.id()\"\n        [size]=\"vm.size()\"\n        [icon]=\"vm.icon()\"\n        [routerLink]=\"link.route\"\n        [queryParams]=\"link.queryParams\"\n        [skipLocationChange]=\"link.skipLocationChange\"\n        [replaceUrl]=\"link.replaceUrl\"\n        (click)=\"vm.selectItem()\"\n        (keydown.enter)=\"vm.selectItem()\"\n      >\n        {{ vm.title() }}\n        <div class=\"end-wrapper\" slot=\"end\">\n          @if (vm.badge(); as badge) {\n            <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n              {{ badge.value }}\n            </kirby-badge>\n          }\n        </div>\n      </a>\n    }\n    @case ('external-link') {\n      <a\n        kirby-x-menu-item\n        [class.selected]=\"vm.isSelected()\"\n        [id]=\"vm.id()\"\n        [size]=\"vm.size()\"\n        [icon]=\"vm.icon()\"\n        [attr.href]=\"link.url\"\n        [attr.target]=\"link.target\"\n        (click)=\"vm.selectItem()\"\n        (keydown.enter)=\"vm.selectItem()\"\n      >\n        {{ vm.title() }}\n        <div class=\"end-wrapper\" slot=\"end\">\n          @if (vm.badge(); as badge) {\n            <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n              {{ badge.value }}\n            </kirby-badge>\n          }\n        </div>\n      </a>\n    }\n  }\n\n  @if (vm.toggle(); as toggle) {\n    <kirby-toggle-button\n      class=\"toggle-button-wrapper\"\n      [checked]=\"toggle.isChecked\"\n      (checkChanged)=\"vm.checkItem($event)\"\n    >\n      <button\n        kirby-button\n        unchecked\n        size=\"xs\"\n        attentionLevel=\"3\"\n        tabindex=\"-1\"\n        [noDecoration]=\"true\"\n        class=\"toggle-button toggle-button-unchecked\"\n      >\n        <kirby-icon size=\"xs\" [name]=\"toggle.uncheckedIcon\"></kirby-icon>\n      </button>\n      <button\n        kirby-button\n        checked\n        size=\"xs\"\n        attentionLevel=\"3\"\n        tabindex=\"-1\"\n        [noDecoration]=\"true\"\n        class=\"toggle-button toggle-button-checked\"\n      >\n        <kirby-icon size=\"xs\" [name]=\"toggle.checkedIcon\"></kirby-icon>\n      </button>\n    </kirby-toggle-button>\n  }\n}\n", styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative}:host.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:700}:host:where(.has-toggle,.has-badge) .end-wrapper{display:inline-flex;justify-content:center;box-sizing:border-box;min-width:24px}:host.checked .end-wrapper{padding-right:32px}.item-badge{display:inline-flex}:host.has-toggle:not(.checked):hover .item-badge,:host.has-toggle:not(.checked):active .item-badge,:host.has-toggle:not(.checked):has(a:focus-visible) .item-badge,:host.has-toggle:not(.checked):has(.toggle-button-unchecked:focus-visible) .item-badge{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:12px}.toggle-button{margin:0;--kirby-button-color: inherit}.toggle-button-unchecked{transition:opacity 0ms}.toggle-button-unchecked:not(:focus-visible){opacity:0}:host:hover .toggle-button-unchecked,:host:active .toggle-button-unchecked,:host:has(a:focus-visible) .toggle-button-unchecked{opacity:1}\n"], dependencies: [{ kind: "component", type: MenuItemComponent, selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]", inputs: ["id", "size", "icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ToggleButtonComponent, selector: "kirby-toggle-button", inputs: ["checked"], outputs: ["checkChanged"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: BadgeComponent, selector: "kirby-badge", inputs: ["text", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuAnchorItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[kirby-x-menu-anchor-item]', host: {
+                        '[class.selected]': 'vm.isSelected()',
+                        '[class.checked]': 'vm.toggle()?.isChecked',
+                        '[class.has-toggle]': '!!vm.toggle()',
+                        '[class.has-badge]': '!!vm.badge()',
+                    }, imports: [
+                        MenuItemComponent,
+                        RouterLink,
+                        ToggleButtonComponent,
+                        ButtonComponent,
+                        IconComponent,
+                        BadgeComponent,
+                    ], template: "@let link = vm.link();\n@if (link) {\n  @switch (link.type) {\n    @case ('action') {\n      <a\n        kirby-x-menu-item\n        [class.selected]=\"vm.isSelected()\"\n        [id]=\"vm.id()\"\n        [size]=\"vm.size()\"\n        [icon]=\"vm.icon()\"\n        [attr.href]=\"link.url\"\n        (click)=\"$event.preventDefault(); vm.selectItem()\"\n        (keydown.enter)=\"$event.preventDefault(); vm.selectItem()\"\n      >\n        {{ vm.title() }}\n        <div class=\"end-wrapper\" slot=\"end\">\n          @if (vm.badge(); as badge) {\n            <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n              {{ badge.value }}\n            </kirby-badge>\n          }\n        </div>\n      </a>\n    }\n    @case ('router-link') {\n      <a\n        kirby-x-menu-item\n        [class.selected]=\"vm.isSelected()\"\n        [id]=\"vm.id()\"\n        [size]=\"vm.size()\"\n        [icon]=\"vm.icon()\"\n        [routerLink]=\"link.route\"\n        [queryParams]=\"link.queryParams\"\n        [skipLocationChange]=\"link.skipLocationChange\"\n        [replaceUrl]=\"link.replaceUrl\"\n        (click)=\"vm.selectItem()\"\n        (keydown.enter)=\"vm.selectItem()\"\n      >\n        {{ vm.title() }}\n        <div class=\"end-wrapper\" slot=\"end\">\n          @if (vm.badge(); as badge) {\n            <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n              {{ badge.value }}\n            </kirby-badge>\n          }\n        </div>\n      </a>\n    }\n    @case ('external-link') {\n      <a\n        kirby-x-menu-item\n        [class.selected]=\"vm.isSelected()\"\n        [id]=\"vm.id()\"\n        [size]=\"vm.size()\"\n        [icon]=\"vm.icon()\"\n        [attr.href]=\"link.url\"\n        [attr.target]=\"link.target\"\n        (click)=\"vm.selectItem()\"\n        (keydown.enter)=\"vm.selectItem()\"\n      >\n        {{ vm.title() }}\n        <div class=\"end-wrapper\" slot=\"end\">\n          @if (vm.badge(); as badge) {\n            <kirby-badge class=\"item-badge\" [themeColor]=\"badge.themeColor ?? 'primary'\">\n              {{ badge.value }}\n            </kirby-badge>\n          }\n        </div>\n      </a>\n    }\n  }\n\n  @if (vm.toggle(); as toggle) {\n    <kirby-toggle-button\n      class=\"toggle-button-wrapper\"\n      [checked]=\"toggle.isChecked\"\n      (checkChanged)=\"vm.checkItem($event)\"\n    >\n      <button\n        kirby-button\n        unchecked\n        size=\"xs\"\n        attentionLevel=\"3\"\n        tabindex=\"-1\"\n        [noDecoration]=\"true\"\n        class=\"toggle-button toggle-button-unchecked\"\n      >\n        <kirby-icon size=\"xs\" [name]=\"toggle.uncheckedIcon\"></kirby-icon>\n      </button>\n      <button\n        kirby-button\n        checked\n        size=\"xs\"\n        attentionLevel=\"3\"\n        tabindex=\"-1\"\n        [noDecoration]=\"true\"\n        class=\"toggle-button toggle-button-checked\"\n      >\n        <kirby-icon size=\"xs\" [name]=\"toggle.checkedIcon\"></kirby-icon>\n      </button>\n    </kirby-toggle-button>\n  }\n}\n", styles: [":host{display:flex;flex-direction:row;align-items:center;position:relative}:host.selected{color:var(--menuitem-selected-color, var(--kirby-primary-contrast))}:host:not(.selected):hover a{background:var(--menuitem-hover-background-color, var(--kirby-inputs-background-color-hover))}.selected,.selected:hover,.selected:active,.selected:focus-visible{background:var(--menuitem-selected-background-color, var(--kirby-primary));font-weight:700}:host:where(.has-toggle,.has-badge) .end-wrapper{display:inline-flex;justify-content:center;box-sizing:border-box;min-width:24px}:host.checked .end-wrapper{padding-right:32px}.item-badge{display:inline-flex}:host.has-toggle:not(.checked):hover .item-badge,:host.has-toggle:not(.checked):active .item-badge,:host.has-toggle:not(.checked):has(a:focus-visible) .item-badge,:host.has-toggle:not(.checked):has(.toggle-button-unchecked:focus-visible) .item-badge{display:none}.toggle-button-wrapper{display:inline-flex;position:absolute;right:12px}.toggle-button{margin:0;--kirby-button-color: inherit}.toggle-button-unchecked{transition:opacity 0ms}.toggle-button-unchecked:not(:focus-visible){opacity:0}:host:hover .toggle-button-unchecked,:host:active .toggle-button-unchecked,:host:has(a:focus-visible) .toggle-button-unchecked{opacity:1}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
+function determineLinkType(item) {
+    if (item.isAction) {
+        return {
+            type: 'action',
+            url: item.link?.url ?? '',
+        };
+    }
+    if (item.link?.relativeLink) {
+        return {
+            type: 'router-link',
+            target: item.link.target ?? '_self',
+            route: item.link.relativeLink,
+            queryParams: item.link.queryParams,
+            skipLocationChange: item.skipLocationChange ?? false,
+            replaceUrl: item.replaceUrl ?? false,
+        };
+    }
+    if (item.link?.url) {
+        return {
+            type: 'external-link',
+            url: item.link.url,
+            target: item.link.target ?? '_self',
+        };
+    }
+    return undefined;
+}
+
+/**
+ * Ensures the element top is not smaller than the scroll container top.
+ */
+function ensureInView(scrollContainer, element, durationMs) {
+    let startTime = null;
+    const updatePosition = (timestamp) => {
+        if (!startTime) {
+            startTime = timestamp;
+        }
+        const elapsedTime = timestamp - startTime;
+        if (elapsedTime < durationMs) {
+            scrollIntoViewIfNecessary(scrollContainer, element, 'start');
+            requestAnimationFrame(updatePosition);
+        }
+    };
+    requestAnimationFrame(updatePosition);
+}
+
+const DropDownAnimation = trigger('dropDownMenu', [
+    transition(':enter', [
+        style({ height: 0, overflow: 'hidden' }),
+        animate('300ms ease', style({ height: AUTO_STYLE })),
+    ]),
+    transition(':leave', [
+        style({ height: AUTO_STYLE, overflow: 'hidden' }),
+        animate('300ms ease', style({ height: 0 })),
+    ]),
+]);
+
+class MenuSubmenuItemComponent {
+    constructor() {
+        this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+        this.size = input.required(...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.disableAnimations = input.required(...(ngDevMode ? [{ debugName: "disableAnimations" }] : []));
+        this.#element = inject(ElementRef).nativeElement;
+        this.#menuStateService = inject(MenuStateService);
+        this.#isExpanded = computed(() => this.item().isExpanded ?? false, ...(ngDevMode ? [{ debugName: "#isExpanded" }] : []));
+        this.#submenuSize = computed(() => {
+            switch (this.size()) {
+                case 'lg':
+                    return 'md';
+                case 'md':
+                    return 'sm';
+                default:
+                    return 'xs';
+            }
+        }, ...(ngDevMode ? [{ debugName: "#submenuSize" }] : []));
+        this.vm = {
+            id: computed(() => this.item().id),
+            submenuId: computed(() => `item-${this.item().id}-content`),
+            title: computed(() => this.item().title ?? ''),
+            size: this.size,
+            icon: computed(() => this.item().icon),
+            isExpanded: this.#isExpanded,
+            children: computed(() => this.item().children ?? []),
+            submenuSize: this.#submenuSize,
+            disableAnimations: this.disableAnimations,
+            toggleSubmenu: this.#toggleSubmenu.bind(this),
+        };
+    }
+    #element;
+    #menuStateService;
+    #isExpanded;
+    #submenuSize;
+    #toggleSubmenu() {
+        const button = this.#element.querySelector('button[kirby-x-menu-item]');
+        const scrollContainer = this.#element.closest('.sidebar-content');
+        if (button && scrollContainer) {
+            console.log('Ensuring submenu item is in view');
+            ensureInView(scrollContainer, button, 400);
+        }
+        this.#menuStateService.toggledSubmenu = this.item();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuSubmenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MenuSubmenuItemComponent, isStandalone: true, selector: "li[kirby-x-menu-submenu-item]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, disableAnimations: { classPropertyName: "disableAnimations", publicName: "disableAnimations", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<button\n  kirby-x-menu-item\n  type=\"button\"\n  class=\"submenu-toggle\"\n  [id]=\"vm.id()\"\n  [size]=\"vm.size()\"\n  [icon]=\"vm.icon()\"\n  [attr.aria-controls]=\"vm.submenuId()\"\n  [attr.aria-expanded]=\"vm.isExpanded()\"\n  (click)=\"vm.toggleSubmenu()\"\n>\n  {{ vm.title() }}\n  <kirby-icon\n    slot=\"end\"\n    name=\"arrow-more\"\n    class=\"disclosure\"\n    [class.rotate]=\"vm.isExpanded()\"\n  ></kirby-icon>\n</button>\n@if (vm.isExpanded()) {\n  <ul\n    kirby-x-menu-item-list\n    [items]=\"vm.children()\"\n    [size]=\"vm.submenuSize()\"\n    [id]=\"vm.submenuId()\"\n    [disableAnimations]=\"vm.disableAnimations()\"\n    [@dropDownMenu]\n    [@.disabled]=\"vm.disableAnimations()\"\n  ></ul>\n}\n", styles: [":host{display:flex;flex-direction:column}.submenu-toggle{width:100%}.submenu-toggle[aria-expanded=true]{font-weight:700}.disclosure{transition:transform .2s}.disclosure.rotate{transform:rotate(90deg)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => MenuItemComponent), selector: "a[kirby-x-menu-item],button[kirby-x-menu-item]", inputs: ["id", "size", "icon"] }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: i0.forwardRef(() => MenuItemListComponent), selector: "ul[kirby-x-menu-item-list]", inputs: ["items", "size", "id", "disableAnimations"] }], animations: [DropDownAnimation] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuSubmenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'li[kirby-x-menu-submenu-item]', animations: [DropDownAnimation], imports: [MenuItemComponent, IconComponent, forwardRef(() => MenuItemListComponent)], template: "<button\n  kirby-x-menu-item\n  type=\"button\"\n  class=\"submenu-toggle\"\n  [id]=\"vm.id()\"\n  [size]=\"vm.size()\"\n  [icon]=\"vm.icon()\"\n  [attr.aria-controls]=\"vm.submenuId()\"\n  [attr.aria-expanded]=\"vm.isExpanded()\"\n  (click)=\"vm.toggleSubmenu()\"\n>\n  {{ vm.title() }}\n  <kirby-icon\n    slot=\"end\"\n    name=\"arrow-more\"\n    class=\"disclosure\"\n    [class.rotate]=\"vm.isExpanded()\"\n  ></kirby-icon>\n</button>\n@if (vm.isExpanded()) {\n  <ul\n    kirby-x-menu-item-list\n    [items]=\"vm.children()\"\n    [size]=\"vm.submenuSize()\"\n    [id]=\"vm.submenuId()\"\n    [disableAnimations]=\"vm.disableAnimations()\"\n    [@dropDownMenu]\n    [@.disabled]=\"vm.disableAnimations()\"\n  ></ul>\n}\n", styles: [":host{display:flex;flex-direction:column}.submenu-toggle{width:100%}.submenu-toggle[aria-expanded=true]{font-weight:700}.disclosure{transition:transform .2s}.disclosure.rotate{transform:rotate(90deg)}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], disableAnimations: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimations", required: true }] }] } });
+
+class MenuItemListComponent {
+    constructor() {
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.size = input('lg', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
+        this.disableAnimations = input(false, ...(ngDevMode ? [{ debugName: "disableAnimations" }] : []));
+        this.vm = {
+            id: this.id,
+            size: this.size,
+            items: computed(() => this.items().filter((item) => !item.hidden)),
+            disableAnimations: this.disableAnimations,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MenuItemListComponent, isStandalone: true, selector: "ul[kirby-x-menu-item-list]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disableAnimations: { classPropertyName: "disableAnimations", publicName: "disableAnimations", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "vm.id()", "class": "vm.size()" } }, ngImport: i0, template: "@for (item of vm.items(); track item.id) {\n  @if (item.isDivider) {\n    <kirby-divider aria-hidden=\"true\"></kirby-divider>\n  } @else if (item.children) {\n    <li\n      kirby-x-menu-submenu-item\n      [item]=\"item\"\n      [size]=\"vm.size()\"\n      [disableAnimations]=\"vm.disableAnimations()\"\n    ></li>\n  } @else {\n    <li kirby-x-menu-anchor-item [item]=\"item\" [size]=\"vm.size()\"></li>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;background:var(--kirby-white-overlay-20);margin:8px 0}li{margin-block-start:0!important}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DividerComponent), selector: "kirby-divider", inputs: ["hasMargin"] }, { kind: "component", type: i0.forwardRef(() => MenuAnchorItemComponent), selector: "li[kirby-x-menu-anchor-item]", inputs: ["item", "size"] }, { kind: "component", type: i0.forwardRef(() => MenuSubmenuItemComponent), selector: "li[kirby-x-menu-submenu-item]", inputs: ["item", "size", "disableAnimations"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuItemListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul[kirby-x-menu-item-list]', host: {
+                        '[attr.id]': 'vm.id()',
+                        '[class]': 'vm.size()',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [DividerComponent, MenuAnchorItemComponent, forwardRef(() => MenuSubmenuItemComponent)], template: "@for (item of vm.items(); track item.id) {\n  @if (item.isDivider) {\n    <kirby-divider aria-hidden=\"true\"></kirby-divider>\n  } @else if (item.children) {\n    <li\n      kirby-x-menu-submenu-item\n      [item]=\"item\"\n      [size]=\"vm.size()\"\n      [disableAnimations]=\"vm.disableAnimations()\"\n    ></li>\n  } @else {\n    <li kirby-x-menu-anchor-item [item]=\"item\" [size]=\"vm.size()\"></li>\n  }\n}\n", styles: [":host{display:flex;flex-direction:column;margin:0;padding-left:0;padding-right:0;list-style-type:none}kirby-divider{display:flex;background:var(--kirby-white-overlay-20);margin:8px 0}li{margin-block-start:0!important}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disableAnimations: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAnimations", required: false }] }] } });
+
+class MenuContainerComponent {
+    #element;
+    #disableAnimations;
+    constructor() {
+        this.items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.#element = inject(ElementRef).nativeElement;
+        this.#disableAnimations = signal(true, ...(ngDevMode ? [{ debugName: "#disableAnimations" }] : []));
+        this.vm = {
+            items: this.items,
+            disableAnimations: this.#disableAnimations.asReadonly(),
+        };
+        afterNextRender({
+            read: () => {
+                this.#scrollSelectedItemIntoView();
+                this.#disableAnimations.set(false);
+            },
+        });
+    }
+    #scrollSelectedItemIntoView() {
+        const selectedItem = this.#element.querySelector('.menu-item.selected');
+        const scrollContainer = this.#element.closest('.sidebar-content');
+        if (selectedItem && scrollContainer) {
+            scrollIntoViewIfNecessary(scrollContainer, selectedItem);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: MenuContainerComponent, isStandalone: true, selector: "kirby-x-menu-container", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <nav aria-label="Sidebar Menu">
+      <ul
+        kirby-x-menu-item-list
+        [items]="vm.items()"
+        [disableAnimations]="vm.disableAnimations()"
+      ></ul>
+    </nav>
+  `, isInline: true, styles: ["nav{padding:0 var(--kirby-spacing-xxs)}\n"], dependencies: [{ kind: "component", type: MenuItemListComponent, selector: "ul[kirby-x-menu-item-list]", inputs: ["items", "size", "id", "disableAnimations"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-x-menu-container', template: `
+    <nav aria-label="Sidebar Menu">
+      <ul
+        kirby-x-menu-item-list
+        [items]="vm.items()"
+        [disableAnimations]="vm.disableAnimations()"
+      ></ul>
+    </nav>
+  `, imports: [MenuItemListComponent], styles: ["nav{padding:0 var(--kirby-spacing-xxs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
+
+class HeightObserverDirective {
+    #element;
+    #heightChanges;
+    #observer;
+    constructor() {
+        this.heightChange = output();
+        this.#element = inject(ElementRef).nativeElement;
+        this.#heightChanges = new Subject();
+        this.#observer = new ResizeObserver((entries) => {
+            this.#heightChanges.next(entries[0].contentRect.height);
+        });
+        this.#observer.observe(this.#element, { box: 'content-box' });
+        this.#heightChanges
+            .pipe(debounceTime(50), distinctUntilChanged())
+            .subscribe(this.heightChange.emit.bind(this.heightChange));
+    }
+    ngOnDestroy() {
+        this.#observer.unobserve(this.#element);
+        this.#observer.disconnect();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HeightObserverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: HeightObserverDirective, isStandalone: true, selector: "[kirbyXHeightObserver]", outputs: { heightChange: "heightChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HeightObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kirbyXHeightObserver]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { heightChange: [{ type: i0.Output, args: ["heightChange"] }] } });
+
+function selectMenuItem(itemId, items) {
+    return items.map((item) => {
+        if (item.id === itemId) {
+            return { ...item, selected: true };
+        }
+        if (item.children) {
+            return { ...item, children: selectMenuItem(itemId, item.children) };
+        }
+        return { ...item, selected: false };
+    });
+}
+
+function toggleSubmenu(itemId, items) {
+    return items.map((item) => {
+        if (item.id === itemId) {
+            return { ...item, isExpanded: !item.isExpanded };
+        }
+        if (item.children && item.isExpanded) {
+            return { ...item, children: toggleSubmenu(itemId, item.children) };
+        }
+        return item;
+    });
+}
+
+function toggleSubmenuAutoCollapsed(itemId, items) {
+    return toggleSubmenuAndCollapseNonAncestors(itemId, items).updatedItems;
+}
+function toggleSubmenuAndCollapseNonAncestors(itemId, items) {
+    let found = false;
+    const updatedItems = items.map((item) => {
+        if (found) {
+            return collapse(item);
+        }
+        if (item.id === itemId) {
+            found = true;
+            return item.isExpanded ? collapse(item) : { ...item, isExpanded: true };
+        }
+        if (item.children && item.isExpanded) {
+            const { updatedItems, isAncestor } = toggleSubmenuAndCollapseNonAncestors(itemId, item.children);
+            found = isAncestor;
+            return { ...item, isExpanded: isAncestor, children: updatedItems };
+        }
+        return item;
+    });
+    return { updatedItems, isAncestor: found };
+}
+function collapse(item) {
+    if (item.children && item.isExpanded) {
+        return { ...item, isExpanded: false, children: item.children.map(collapse) };
+    }
+    return item;
+}
+
+class SidebarService {
+    #menuHeight = signal(0, ...(ngDevMode ? [{ debugName: "#menuHeight" }] : []));
+    #containerHeight = signal(0, ...(ngDevMode ? [{ debugName: "#containerHeight" }] : []));
+    #scrollDistance = signal(0, ...(ngDevMode ? [{ debugName: "#scrollDistance" }] : []));
+    #scrollableDistance = computed(() => Math.max(0, this.#menuHeight() - this.#containerHeight()), ...(ngDevMode ? [{ debugName: "#scrollableDistance" }] : []));
+    #hasScrollbar = computed(() => this.#scrollableDistance() > 0, ...(ngDevMode ? [{ debugName: "#hasScrollbar" }] : []));
+    #notAtBottom = computed(() => this.#scrollDistance() < this.#scrollableDistance(), ...(ngDevMode ? [{ debugName: "#notAtBottom" }] : []));
+    #showHeaderBottomBorder = computed(() => this.#scrollDistance() > 0, ...(ngDevMode ? [{ debugName: "#showHeaderBottomBorder" }] : []));
+    #showFooterTopBorder = computed(() => this.#hasScrollbar() && this.#notAtBottom(), ...(ngDevMode ? [{ debugName: "#showFooterTopBorder" }] : []));
+    get showHeaderBottomBorder() {
+        return this.#showHeaderBottomBorder;
+    }
+    get showFooterTopBorder() {
+        return this.#showFooterTopBorder;
+    }
+    set menuHeight(height) {
+        this.#menuHeight.set(height);
+    }
+    set containerHeight(height) {
+        this.#containerHeight.set(height);
+    }
+    set scrollDistance(distance) {
+        this.#scrollDistance.set(distance);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+function checkMenuItem(itemId, isChecked, items) {
+    return items.map((item) => {
+        if (item.id === itemId) {
+            return { ...item, toggle: { ...item.toggle, isChecked } };
+        }
+        if (item.children) {
+            return { ...item, children: checkMenuItem(itemId, isChecked, item.children) };
+        }
+        return item;
+    });
+}
+
+class SidebarMenuComponent {
+    #sidebarService;
+    #menuStateService;
+    constructor() {
+        this.menuItems = model.required(...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+        this.autoCollapse = input(false, ...(ngDevMode ? [{ debugName: "autoCollapse" }] : []));
+        this.submenuToggle = output();
+        this.itemClick = output();
+        this.itemChecked = output();
+        this.#sidebarService = inject(SidebarService);
+        this.#menuStateService = inject((MenuStateService));
+        this.vm = {
+            items: this.menuItems.asReadonly(),
+            showHeaderBottomBorder: this.#sidebarService.showHeaderBottomBorder,
+            showFooterTopBorder: this.#sidebarService.showFooterTopBorder,
+            setContainerHeight: this.#setContainerHeight.bind(this),
+            setMenuHeight: this.#setMenuHeight.bind(this),
+            setScroll: this.#setScrollDistance.bind(this),
+        };
+        effect(() => {
+            const toggledSubmenu = this.#menuStateService.toggledSubmenu();
+            if (toggledSubmenu) {
+                this.submenuToggle.emit(toggledSubmenu);
+                this.menuItems.update((items) => this.autoCollapse()
+                    ? toggleSubmenuAutoCollapsed(toggledSubmenu.id, items)
+                    : toggleSubmenu(toggledSubmenu.id, items));
+            }
+        });
+        effect(() => {
+            const selectedItem = this.#menuStateService.selectedItem();
+            if (selectedItem) {
+                this.itemClick.emit(selectedItem);
+                this.menuItems.update((items) => selectMenuItem(selectedItem.id, items));
+            }
+        });
+        effect(() => {
+            const checkEvent = this.#menuStateService.checkEvent();
+            if (checkEvent) {
+                this.itemChecked.emit(checkEvent);
+                this.menuItems.update((items) => checkMenuItem(checkEvent.item.id, checkEvent.checked, items));
+            }
+        });
+    }
+    #setContainerHeight(height) {
+        this.#sidebarService.containerHeight = height;
+    }
+    #setMenuHeight(height) {
+        this.#sidebarService.menuHeight = height;
+    }
+    #setScrollDistance(event) {
+        const target = event.target;
+        if (target) {
+            this.#sidebarService.scrollDistance = target.scrollTop;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: SidebarMenuComponent, isStandalone: true, selector: "aside[kirby-x-sidebar-menu]", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, autoCollapse: { classPropertyName: "autoCollapse", publicName: "autoCollapse", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItems: "menuItemsChange", submenuToggle: "submenuToggle", itemClick: "itemClick", itemChecked: "itemChecked" }, ngImport: i0, template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n  <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n  kirbyXHeightObserver\n  class=\"sidebar-content\"\n  (scroll)=\"vm.setScroll($event)\"\n  (heightChange)=\"vm.setContainerHeight($event)\"\n>\n  <kirby-x-menu-container\n    kirbyXHeightObserver\n    [items]=\"vm.items()\"\n    (heightChange)=\"vm.setMenuHeight($event)\"\n  ></kirby-x-menu-container>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n  <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none;height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-tertiary));color:var(--sidebar-color, var(--kirby-tertiary-contrast));display:flex;flex-direction:column;overflow:auto}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;display:flex;align-items:center;justify-content:center;position:sticky}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"], dependencies: [{ kind: "directive", type: HeightObserverDirective, selector: "[kirbyXHeightObserver]", outputs: ["heightChange"] }, { kind: "component", type: MenuContainerComponent, selector: "kirby-x-menu-container", inputs: ["items"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'aside[kirby-x-sidebar-menu]', imports: [HeightObserverDirective, MenuContainerComponent], template: "<div class=\"sidebar-header\" [class.bottom-border]=\"vm.showHeaderBottomBorder()\">\n  <ng-content select=\"[slot='header']\"></ng-content>\n</div>\n<div\n  kirbyXHeightObserver\n  class=\"sidebar-content\"\n  (scroll)=\"vm.setScroll($event)\"\n  (heightChange)=\"vm.setContainerHeight($event)\"\n>\n  <kirby-x-menu-container\n    kirbyXHeightObserver\n    [items]=\"vm.items()\"\n    (heightChange)=\"vm.setMenuHeight($event)\"\n  ></kirby-x-menu-container>\n</div>\n<div class=\"sidebar-footer\" [class.top-border]=\"vm.showFooterTopBorder()\">\n  <ng-content select=\"[slot='footer']\"></ng-content>\n</div>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none;height:100%;height:100dvh;background-color:var(--sidebar-background-color, var(--kirby-tertiary));color:var(--sidebar-color, var(--kirby-tertiary-contrast));display:flex;flex-direction:column;overflow:auto}:host *{scrollbar-width:thin;scrollbar-color:var(--kirby-semi-dark) var(--kirby-tertiary)}:host *::-webkit-scrollbar{width:16px}:host *::-webkit-scrollbar-track{background:transparent}:host *::-webkit-scrollbar-thumb{background-color:#8e8e8e80;border-radius:20px;border:4px solid transparent;background-clip:content-box}.sidebar-content{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto}@supports (scrollbar-gutter: stable){.sidebar-content{overflow:hidden auto;scrollbar-gutter:auto}}.sidebar-header,.sidebar-footer{z-index:1;display:flex;align-items:center;justify-content:center;position:sticky}.sidebar-header.bottom-border{box-shadow:0 4px 10px 2px #1c1c1c4d;transition:opacity .3s}.sidebar-footer.top-border{box-shadow:0 -4px 10px 2px #1c1c1c4d;transition:opacity .3s}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }, { type: i0.Output, args: ["menuItemsChange"] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }], submenuToggle: [{ type: i0.Output, args: ["submenuToggle"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], itemChecked: [{ type: i0.Output, args: ["itemChecked"] }] } });
+
+class SidebarComponent {
+    constructor() {
+        this.autoCollapse = false;
+        this.menuItemsChange = new EventEmitter();
+        this.afterMenuClicked = new EventEmitter();
+        this.afterMenuToggled = new EventEmitter();
+        this.itemChecked = new EventEmitter();
+        /**
+         * @deprecated has not had an effect for a long time
+         */
+        this.expandIconOnHover = false;
+        /**
+         * @deprecated should use menuItemsChange or two-way binding on menuItems instead
+         **/
+        this.menuItemsChanged = new EventEmitter();
+    }
+    changeMenuItems(event) {
+        this.menuItems = event;
+        this.menuItemsChange.emit(this.menuItems);
+        this.menuItemsChanged.emit(this.menuItems);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SidebarComponent, isStandalone: true, selector: "kirby-x-sidebar", inputs: { menuItems: "menuItems", autoCollapse: "autoCollapse", expandIconOnHover: "expandIconOnHover" }, outputs: { menuItemsChange: "menuItemsChange", afterMenuClicked: "afterMenuClicked", afterMenuToggled: "afterMenuToggled", itemChecked: "itemChecked", menuItemsChanged: "menuItemsChanged" }, ngImport: i0, template: `
+    <aside
+      kirby-x-sidebar-menu
+      [menuItems]="menuItems"
+      [autoCollapse]="autoCollapse"
+      (menuItemsChange)="changeMenuItems($event)"
+      (itemClick)="afterMenuClicked.emit($event)"
+      (submenuToggle)="afterMenuToggled.emit($event)"
+      (itemChecked)="itemChecked.emit($event)"
+    >
+      <ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
+      <ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
+    </aside>
+  `, isInline: true, dependencies: [{ kind: "component", type: SidebarMenuComponent, selector: "aside[kirby-x-sidebar-menu]", inputs: ["menuItems", "autoCollapse"], outputs: ["menuItemsChange", "submenuToggle", "itemClick", "itemChecked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kirby-x-sidebar',
+                    template: `
+    <aside
+      kirby-x-sidebar-menu
+      [menuItems]="menuItems"
+      [autoCollapse]="autoCollapse"
+      (menuItemsChange)="changeMenuItems($event)"
+      (itemClick)="afterMenuClicked.emit($event)"
+      (submenuToggle)="afterMenuToggled.emit($event)"
+      (itemChecked)="itemChecked.emit($event)"
+    >
+      <ng-content select="kirby-x-sidebar-header" slot="header"></ng-content>
+      <ng-content select="kirby-x-sidebar-footer" slot="footer"></ng-content>
+    </aside>
+  `,
+                    imports: [SidebarMenuComponent],
+                }]
+        }], propDecorators: { menuItems: [{
+                type: Input
+            }], autoCollapse: [{
+                type: Input
+            }], menuItemsChange: [{
+                type: Output
+            }], afterMenuClicked: [{
+                type: Output
+            }], afterMenuToggled: [{
+                type: Output
+            }], itemChecked: [{
+                type: Output
+            }], expandIconOnHover: [{
+                type: Input
+            }], menuItemsChanged: [{
+                type: Output
+            }] } });
+
+class SidebarFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SidebarFooterComponent, isStandalone: true, selector: "kirby-x-sidebar-footer", ngImport: i0, template: '<footer><ng-content></ng-content></footer>', isInline: true, styles: [":host,footer{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{min-height:80px}footer{width:100%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-x-sidebar-footer', template: '<footer><ng-content></ng-content></footer>', styles: [":host,footer{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{min-height:80px}footer{width:100%}\n"] }]
+        }] });
+
+class SidebarHeaderComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SidebarHeaderComponent, isStandalone: true, selector: "kirby-x-sidebar-header", ngImport: i0, template: `
+    <header>
+      <span class="sidebar-logo"><ng-content slot="logo"></ng-content></span>
+      <div class="action-bar">
+        <ng-content select="[slot='action']"></ng-content>
+      </div>
+    </header>
+  `, isInline: true, styles: [":host,header{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{flex-grow:1}header{width:100%}:host::ng-deep [slot=logo]{height:inherit}:host::ng-deep [slot=logo] img{object-fit:contain;width:100%;height:100%}.sidebar-logo{display:flex;align-items:center;height:50px;margin:var(--kirby-spacing-l) var(--kirby-spacing-m)}.action-bar{display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;width:100%}.action-bar:has([slot=action]){padding:0 var(--kirby-spacing-xs) var(--kirby-spacing-xs)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-x-sidebar-header', template: `
+    <header>
+      <span class="sidebar-logo"><ng-content slot="logo"></ng-content></span>
+      <div class="action-bar">
+        <ng-content select="[slot='action']"></ng-content>
+      </div>
+    </header>
+  `, styles: [":host,header{display:flex;flex-direction:column;align-items:center;justify-content:center}:host{flex-grow:1}header{width:100%}:host::ng-deep [slot=logo]{height:inherit}:host::ng-deep [slot=logo] img{object-fit:contain;width:100%;height:100%}.sidebar-logo{display:flex;align-items:center;height:50px;margin:var(--kirby-spacing-l) var(--kirby-spacing-m)}.action-bar{display:flex;flex-direction:row;align-items:center;justify-content:center;box-sizing:border-box;width:100%}.action-bar:has([slot=action]){padding:0 var(--kirby-spacing-xs) var(--kirby-spacing-xs)}\n"] }]
+        }] });
+
+class SidebarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SidebarModule, imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent], exports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarModule, imports: [SidebarComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],
+                    exports: [SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule };
+//# sourceMappingURL=kirbydesign-extensions-angular-sidebar-menu.mjs.map