import { AXClickEvent, MXInteractiveComponent, AXRippleDirective, AXComponent, NXComponent, AXCommonModule } from '@acorex/cdk/common';
import { AXLoadingComponent, AXLoadingModule } from '@acorex/components/loading';
import { AXContextMenuComponent } from '@acorex/components/menu';
import * as i1 from '@acorex/components/tooltip';
import { AXTooltipModule } from '@acorex/components/tooltip';
import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
import { AXHtmlUtil, AXUnsubscriber } from '@acorex/core/utils';
import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { model, output, input, viewChild, signal, computed, inject, ElementRef, PLATFORM_ID, DestroyRef, contentChildren, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component, HostBinding, Directive, NgModule } from '@angular/core';
import { RouterLink, RouterLinkActive, Router } from '@angular/router';
import { AXDecoratorGenericComponent, AXDecoratorIconComponent, AXDecoratorModule } from '@acorex/components/decorators';
import { AXOutlineContainerDirective } from '@acorex/cdk/outline';
import { isEqual } from 'lodash-es';
import { map, distinctUntilChanged } from 'rxjs';

/**
 * DI token for the parent `ax-side-menu`. Child `ax-side-menu-item`s inject this
 * to read shared state (e.g. the current display mode) without creating a
 * circular import on the concrete `AXSideMenuComponent` class.
 */
class AXSideMenuBase {
}

class AXSideMenuItemClickEvent extends AXClickEvent {
    constructor() {
        super(...arguments);
        this.handled = false;
    }
}
class AXSideMenuItemComponent extends MXInteractiveComponent {
    constructor() {
        super(...arguments);
        this.text = model('', ...(ngDevMode ? [{ debugName: "text" }] : []));
        this.active = model(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
        this.isLoading = model(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
        this.isCollapsed = model(true, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
        this.onClick = output();
        this.toggleOnClick = input(true, ...(ngDevMode ? [{ debugName: "toggleOnClick" }] : []));
        this.href = input(...(ngDevMode ? [undefined, { debugName: "href" }] : []));
        this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
        this.routerLinkActive = input('ax-state-active', ...(ngDevMode ? [{ debugName: "routerLinkActive" }] : []));
        this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
        this.target = input('_self', ...(ngDevMode ? [{ debugName: "target" }] : []));
        this.menuItemTrigger = viewChild.required('menuItemTrigger');
        this.hasChild = signal(false, ...(ngDevMode ? [{ debugName: "hasChild" }] : []));
        this.isCompactMode = computed(() => this.menuMode() === 'compact', ...(ngDevMode ? [{ debugName: "isCompactMode" }] : []));
        /** Top-level rail entry in compact mode (opens the flyout context menu). */
        this.isFirstLevel = computed(() => {
            if (!this.isCompactMode()) {
                return false;
            }
            return !this.hostElement.parentElement?.closest('.ax-side-children-content');
        }, ...(ngDevMode ? [{ debugName: "isFirstLevel" }] : []));
        /** Tooltip text for first-level items in compact mode only. */
        this.tooltipContent = computed(() => {
            if (!this.isFirstLevel())
                return null;
            return this.text().trim() || this.contentLabel().trim() || null;
        }, ...(ngDevMode ? [{ debugName: "tooltipContent" }] : []));
        this.elem = inject((ElementRef));
        this.platformId = inject(PLATFORM_ID);
        this.destroyRef = inject(DestroyRef);
        this.menuMode = signal('full', ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
        this.contentLabel = signal('', ...(ngDevMode ? [{ debugName: "contentLabel" }] : []));
        this.childObserver = null;
        this.childRefreshScheduled = false;
        this.childItems = contentChildren(AXSideMenuItemComponent, ...(ngDevMode ? [{ debugName: "childItems", descendants: true }] : [{ descendants: true }]));
        this.childrenSlot = viewChild('childrenSlot', ...(ngDevMode ? [{ debugName: "childrenSlot" }] : []));
        this.childrenContextMenu = viewChild('childrenContextMenu', ...(ngDevMode ? [{ debugName: "childrenContextMenu" }] : []));
        this.#childCheckEffect = effect(() => {
            if (this.childItems().length) {
                this.updateHasChild();
            }
        }, ...(ngDevMode ? [{ debugName: "#childCheckEffect" }] : []));
        this.#initChildren = afterNextRender(() => {
            if (!isPlatformBrowser(this.platformId)) {
                return;
            }
            this.reparentOrphanedChildren();
            this.updateHasChild();
            this.updateContentLabel();
            this.childObserver = new MutationObserver((records) => {
                if (!this.hasRelevantMutation(records)) {
                    return;
                }
                this.scheduleChildRefresh();
            });
            this.childObserver.observe(this.hostElement, { childList: true, subtree: true, characterData: true });
            this.destroyRef.onDestroy(() => this.childObserver?.disconnect());
        });
        this.#contextMenuSync = effect(() => {
            if (!this.isCompactMode() || !isPlatformBrowser(this.platformId) || !this.isFirstLevel() || !this.hasChild()) {
                return;
            }
            const menu = this.childrenContextMenu();
            if (!menu) {
                return;
            }
            if (this.isCollapsed()) {
                menu.close();
            }
            else {
                this.closeSiblingCompactMenus();
                this.openCompactContextMenu(menu);
            }
        }, ...(ngDevMode ? [{ debugName: "#contextMenuSync" }] : []));
    }
    get hostElement() {
        return this.elem.nativeElement;
    }
    #childCheckEffect;
    #initChildren;
    #contextMenuSync;
    syncMenuMode(mode) {
        if (this.menuMode() === mode) {
            return;
        }
        this.menuMode.set(mode);
        this.childrenContextMenu()?.close();
        if (mode === 'compact') {
            this.isCollapsed.set(true);
        }
    }
    /** Builds the cascading `AXMenuItem` tree used by the compact-mode context menu. */
    buildMenuItemsFromChildren() {
        this.reparentOrphanedChildren();
        const slot = this.childrenSlot()?.nativeElement;
        const itemsFromSlot = slot ? this.mapSlotChildrenToMenuItems(slot) : [];
        if (itemsFromSlot.length > 0) {
            return itemsFromSlot;
        }
        return this.getDirectChildElements().map((el) => this.toMenuItem(el));
    }
    activateFromContextMenu(nativeEvent) {
        if (this.disabled || this.isLoading()) {
            return;
        }
        const trigger = this.menuItemTrigger().nativeElement;
        if (trigger instanceof HTMLAnchorElement) {
            trigger.click();
            return;
        }
        this.onClick.emit({
            component: this,
            htmlElement: this.getHostElement(),
            nativeEvent,
            handled: false,
        });
    }
    toggle() {
        if (this.isCompactMode() && (!this.hasChild() || !this.isFirstLevel())) {
            return;
        }
        this.isCollapsed.update((collapsed) => !collapsed);
    }
    open() {
        this.isCollapsed.set(false);
    }
    close() {
        this.isCollapsed.set(true);
        this.childrenContextMenu()?.close();
    }
    handleContextMenuItemClick(event) {
        const instance = event.item.data?.sideMenuItem;
        if (!instance || instance.hasChild())
            return;
        instance.activateFromContextMenu(event.nativeEvent);
    }
    handleContextMenuClosed() {
        if (!this.isCollapsed())
            this.isCollapsed.set(true);
    }
    handleClickEvent(e) {
        if (this.disabled || this.isLoading())
            return;
        const event = {
            component: this,
            htmlElement: this.getHostElement(),
            nativeEvent: e,
            handled: false,
        };
        this.onClick.emit(event);
        if (!event.handled && this.toggleOnClick() && (this.hasChild() || !this.isCompactMode()))
            this.toggle();
        e.stopPropagation();
    }
    openCompactContextMenu(menu) {
        const items = this.buildMenuItemsFromChildren();
        if (!items.length)
            return;
        menu.showAt(this.getContextMenuAnchorPoint(), this.menuItemTrigger().nativeElement, {
            sender: menu,
            canceled: false,
            targetElement: this.menuItemTrigger().nativeElement,
            items,
        });
    }
    getContextMenuAnchorPoint() {
        const rect = this.menuItemTrigger().nativeElement.getBoundingClientRect();
        const offset = 8;
        if (AXHtmlUtil.isRtl(this.hostElement)) {
            return { x: rect.left - offset, y: rect.top };
        }
        return { x: rect.right + offset, y: rect.top };
    }
    mapSlotChildrenToMenuItems(slot) {
        const items = [];
        let pendingGroupTitle;
        for (const child of Array.from(slot.children)) {
            if (child.tagName === 'AX-TITLE') {
                pendingGroupTitle = child.textContent?.trim() || undefined;
                continue;
            }
            if (child.tagName === 'AX-DIVIDER') {
                if (items.length > 0) {
                    items[items.length - 1] = { ...items[items.length - 1], break: true };
                }
                continue;
            }
            if (child.tagName !== 'AX-SIDE-MENU-ITEM') {
                continue;
            }
            const menuItem = this.toMenuItem(child);
            if (pendingGroupTitle) {
                menuItem.group = { title: pendingGroupTitle };
                pendingGroupTitle = undefined;
            }
            items.push(menuItem);
        }
        return items;
    }
    toMenuItem(host) {
        const instance = this.getInstanceFromElement(host);
        const item = {
            text: this.getItemLabel(host, instance),
            disabled: instance?.disabled ?? false,
            icon: this.getItemIcon(host),
            suffix: this.getItemSuffix(host),
        };
        if (instance) {
            item.data = { sideMenuItem: instance };
        }
        if (this.hasNestedChildren(host, instance)) {
            item.items =
                instance?.buildMenuItemsFromChildren() ?? this.getDirectChildElements(host).map((el) => this.toMenuItem(el));
        }
        return item;
    }
    hasNestedChildren(host, instance) {
        return (instance?.hasChild() ?? false) || this.getDirectChildElements(host).length > 0;
    }
    /** Direct `ax-side-menu-item` children of `menuHost` (defaults to this item). */
    getDirectChildElements(menuHost = this.hostElement) {
        return Array.from(menuHost.querySelectorAll('ax-side-menu-item')).filter((el) => {
            if (el === menuHost) {
                return false;
            }
            return el.parentElement?.closest('ax-side-menu-item') === menuHost;
        });
    }
    reparentOrphanedChildren() {
        const container = this.childrenSlot()?.nativeElement;
        if (!container) {
            return;
        }
        for (const el of this.getDirectChildElements()) {
            if (!container.contains(el)) {
                try {
                    container.appendChild(el);
                }
                catch {
                    // HierarchyRequestError when the node is already being moved.
                }
            }
        }
    }
    scheduleChildRefresh() {
        if (this.childRefreshScheduled) {
            return;
        }
        this.childRefreshScheduled = true;
        requestAnimationFrame(() => {
            this.childRefreshScheduled = false;
            this.reparentOrphanedChildren();
            this.updateHasChild();
            this.updateContentLabel();
        });
    }
    hasRelevantMutation(records) {
        for (const record of records) {
            if (record.type === 'characterData') {
                return true;
            }
            if (this.nodeListContainsMenuStructuralNode(record.addedNodes) ||
                this.nodeListContainsMenuStructuralNode(record.removedNodes)) {
                return true;
            }
        }
        return false;
    }
    nodeListContainsMenuStructuralNode(nodes) {
        for (const node of Array.from(nodes)) {
            if (!(node instanceof Element)) {
                continue;
            }
            const tagName = node.tagName;
            if (tagName === 'AX-SIDE-MENU-ITEM' || tagName === 'AX-TITLE' || tagName === 'AX-DIVIDER') {
                return true;
            }
            if (node.querySelector?.('ax-side-menu-item,ax-title,ax-divider')) {
                return true;
            }
        }
        return false;
    }
    getItemLabel(host, instance) {
        if (instance?.text()) {
            return instance.text();
        }
        const insideText = host.querySelector('.ax-inside-text');
        if (insideText?.textContent?.trim()) {
            return insideText.textContent.trim();
        }
        return host.querySelector('ax-text')?.textContent?.trim() ?? '';
    }
    getItemIcon(host) {
        const axIcon = host.querySelector('ax-prefix ax-icon');
        if (!axIcon) {
            return undefined;
        }
        return axIcon.getAttribute('icon') ?? axIcon.querySelector('i')?.className ?? undefined;
    }
    getItemSuffix(host) {
        const text = host.querySelector('ax-suffix ax-text')?.textContent?.trim();
        return text ? { text } : undefined;
    }
    getInstanceFromElement(el) {
        const ctx = el.__axContext__;
        return ctx instanceof AXSideMenuItemComponent ? ctx : undefined;
    }
    closeSiblingCompactMenus() {
        const menuHost = this.hostElement.closest('ax-side-menu');
        if (!menuHost) {
            return;
        }
        menuHost.querySelectorAll(':scope > ax-side-menu-item').forEach((el) => {
            const sibling = this.getInstanceFromElement(el);
            if (!sibling || sibling === this) {
                return;
            }
            sibling.isCollapsed.set(true);
            sibling.childrenContextMenu()?.close();
        });
    }
    updateHasChild() {
        this.hasChild.set(this.childItems().length > 0 || this.getDirectChildElements().length > 0);
    }
    updateContentLabel() {
        if (!isPlatformBrowser(this.platformId))
            return;
        const insideText = this.hostElement.querySelector('.ax-inside-text');
        const label = insideText?.textContent?.trim() || this.hostElement.querySelector('ax-text')?.textContent?.trim() || '';
        if (label !== this.contentLabel()) {
            this.contentLabel.set(label);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSideMenuItemComponent, isStandalone: true, selector: "ax-side-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, toggleOnClick: { classPropertyName: "toggleOnClick", publicName: "toggleOnClick", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActive: { classPropertyName: "routerLinkActive", publicName: "routerLinkActive", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", active: "activeChange", isLoading: "isLoadingChange", isCollapsed: "isCollapsedChange", onClick: "onClick" }, providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], queries: [{ propertyName: "childItems", predicate: AXSideMenuItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "menuItemTrigger", first: true, predicate: ["menuItemTrigger"], descendants: true, isSignal: true }, { propertyName: "childrenSlot", first: true, predicate: ["childrenSlot"], descendants: true, isSignal: true }, { propertyName: "childrenContextMenu", first: true, predicate: ["childrenContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n  @if (!isCompactMode()) {\n    <ng-content select=\"ax-title\"></ng-content>\n  }\n  @if (routerLink()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (isCompactMode() && isFirstLevel())\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  @if (isCompactMode() && hasChild()) {\n    <ax-context-menu\n      #childrenContextMenu\n      class=\"ax-side-menu-children-context-menu\"\n      [openOn]=\"'hover'\"\n      [closeOn]=\"'leave'\"\n      [closeOnRouteChange]=\"true\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n      (onClose)=\"handleContextMenuClosed()\"\n    />\n  }\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      <div class=\"ax-inside-text\">\n        @if (text()) {\n          <span>{{ text() }}</span>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-side-menu-item', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        AXRippleDirective,
                        RouterLink,
                        RouterLinkActive,
                        NgTemplateOutlet,
                        AXLoadingComponent,
                        AsyncPipe,
                        AXTranslatorPipe,
                        AXTooltipModule,
                        AXContextMenuComponent,
                    ], providers: [{ provide: AXComponent, useExisting: AXSideMenuItemComponent }], template: "<div [axTooltip]=\"tooltipContent()\" axTooltipPlacement=\"end\" class=\"ax-side-menu-wrapper\">\n  @if (!isCompactMode()) {\n    <ng-content select=\"ax-title\"></ng-content>\n  }\n  @if (routerLink()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [routerLink]=\"routerLink()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n      [routerLinkActive]=\"routerLinkActive()\"\n      [routerLinkActiveOptions]=\"routerLinkActiveOptions()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else if (href()) {\n    <a\n      #menuItemTrigger\n      [axRipple]\n      [href]=\"href()\"\n      [target]=\"target()\"\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </a>\n  } @else {\n    <div\n      #menuItemTrigger\n      [axRipple]\n      class=\"ax-side-item\"\n      [class.ax-state-active]=\"active()\"\n      (click)=\"handleClickEvent($event)\"\n      [class.ax-state-disabled]=\"disabled\"\n    >\n      <ng-container [ngTemplateOutlet]=\"menuItemContent\"></ng-container>\n    </div>\n  }\n\n  <div\n    class=\"ax-side-children\"\n    [class.ax-collapsed]=\"(!isCompactMode() && isCollapsed()) || (isCompactMode() && isFirstLevel())\"\n    [class.ax-empty]=\"!hasChild() && !isLoading()\"\n  >\n    @if (isLoading()) {\n      <p>{{ '@acorex:common.status.loading' | translate | async }}</p>\n    }\n    <div #childrenSlot class=\"ax-side-children-content\" [hidden]=\"isLoading()\">\n      <ng-content select=\"ax-side-menu-item, ng-container, [ngTemplateOutlet]\"></ng-content>\n    </div>\n  </div>\n\n  @if (isCompactMode() && hasChild()) {\n    <ax-context-menu\n      #childrenContextMenu\n      class=\"ax-side-menu-children-context-menu\"\n      [openOn]=\"'hover'\"\n      [closeOn]=\"'leave'\"\n      [closeOnRouteChange]=\"true\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n      (onClose)=\"handleContextMenuClosed()\"\n    />\n  }\n\n  <ng-content select=\"ax-divider\"></ng-content>\n  <ng-template #menuItemContent>\n    <div class=\"ax-start-side\">\n      <ng-content select=\"ax-prefix\"></ng-content>\n      <div class=\"ax-inside-text\">\n        @if (text()) {\n          <span>{{ text() }}</span>\n        }\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"ax-end-side\">\n      <ng-content select=\"ax-suffix\"></ng-content>\n      @if (hasChild() && !isLoading() && toggleOnClick() && !isFirstLevel()) {\n        <span class=\"ax-icon ax-icon-chevron-right arrow-icon\" [class.arrow-icon-expand]=\"!isCollapsed()\"> </span>\n      }\n      @if (isLoading()) {\n        <ax-loading></ax-loading>\n      }\n    </div>\n  </ng-template>\n</div>\n" }]
        }] });

/**
 * @category
 * A component for displaying a side menu with customizable content.
 */
class AXSideMenuComponent extends NXComponent {
    constructor() {
        super(...arguments);
        this.items = model(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
        this.look = input('pills', ...(ngDevMode ? [{ debugName: "look" }] : []));
        this.location = input('start', ...(ngDevMode ? [{ debugName: "location" }] : []));
        this.mode = input('full', ...(ngDevMode ? [{ debugName: "mode" }] : []));
        this.elementRef = inject(ElementRef);
        /**
         * All `ax-side-menu-item` instances discovered by walking the host DOM.
         *
         * We use DOM discovery (instead of `contentChildren`) because Angular content
         * queries do **not** traverse embedded views created by `ngTemplateOutlet`,
         * and the `AXSideMenuBase` DI token is not reachable from inside those views
         * either (they inherit injection from the template's declaration site, not
         * the insertion site). Walking the DOM works for direct projection,
         * structural directives, and recursive `ngTemplateOutlet`-based templates
         * uniformly.
         */
        this._items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : []));
        /** Read-only signal exposing every discovered `ax-side-menu-item` instance. */
        this.children = this._items.asReadonly();
        this.platformId = inject(PLATFORM_ID);
        this.destroyRef = inject(DestroyRef);
        this.hostElement = this.elementRef.nativeElement;
        this.domRefreshScheduled = false;
        this.domRefreshObserver = null;
        this.#init = afterNextRender(() => {
            if (!isPlatformBrowser(this.platformId))
                return;
            this.refreshItemsFromDom();
            this.domRefreshObserver = new MutationObserver((records) => {
                if (!this.hasRelevantMenuItemMutation(records)) {
                    return;
                }
                this.scheduleDomRefresh();
            });
            this.domRefreshObserver.observe(this.elementRef.nativeElement, { childList: true, subtree: true });
            this.destroyRef.onDestroy(() => this.domRefreshObserver?.disconnect());
        });
        /** Push full/compact mode to every menu item whenever mode changes. */
        this.#syncItemMode = effect(() => {
            const mode = this.mode();
            this._items().forEach((item) => item.syncMenuMode(mode));
        }, ...(ngDevMode ? [{ debugName: "#syncItemMode" }] : []));
    }
    #init;
    /** Push full/compact mode to every menu item whenever mode changes. */
    #syncItemMode;
    /**
     * Walks the host DOM to discover every nested `ax-side-menu-item`, looks up
     * the component instance through the `__axContext__` property that
     * `MXBaseComponent.ngOnInit` attaches to each host element, and updates the
     * internal items signal and `.first-level` CSS class accordingly.
     *
     * Triggered both initially and from a `MutationObserver` so recursive
     * templates that add/remove items at runtime stay in sync.
     */
    refreshItemsFromDom() {
        const host = this.elementRef.nativeElement;
        const elements = host.querySelectorAll('ax-side-menu-item');
        const items = [];
        elements.forEach((el) => {
            const instance = el.__axContext__;
            if (instance instanceof AXSideMenuItemComponent) {
                items.push(instance);
            }
        });
        const current = this._items();
        const changed = current.length !== items.length || current.some((it, i) => it !== items[i]);
        if (changed) {
            this._items.set(items);
        }
        this.addFirstLevelClass();
    }
    scheduleDomRefresh() {
        if (this.domRefreshScheduled) {
            return;
        }
        this.domRefreshScheduled = true;
        // Batch multiple rapid mutations (e.g., large template updates or overlays closing)
        // into a single refresh to prevent long main-thread stalls.
        requestAnimationFrame(() => {
            this.domRefreshScheduled = false;
            this.refreshItemsFromDom();
        });
    }
    hasRelevantMenuItemMutation(records) {
        for (const record of records) {
            if (this.nodeListContainsMenuItem(record.addedNodes) || this.nodeListContainsMenuItem(record.removedNodes)) {
                return true;
            }
        }
        return false;
    }
    nodeListContainsMenuItem(nodes) {
        for (const node of Array.from(nodes)) {
            if (!(node instanceof Element)) {
                continue;
            }
            if (node.tagName === 'AX-SIDE-MENU-ITEM') {
                return true;
            }
            if (node.querySelector?.('ax-side-menu-item')) {
                return true;
            }
        }
        return false;
    }
    addFirstLevelClass() {
        const allChildren = this._items();
        allChildren.forEach((item) => item.getHostElement().querySelector('.ax-side-item')?.classList.remove('first-level'));
        allChildren
            .filter((item) => {
            const itemElement = item.getHostElement();
            return (this.hostElement.contains(itemElement) && !itemElement.parentElement?.closest('.ax-side-children-content'));
        })
            .forEach((item) => item.getHostElement().querySelector('.ax-side-item')?.classList.add('first-level'));
    }
    /** @ignore */
    get __hostClass() {
        return [`ax-look-${this.look()}`, `ax-location-${this.location()}`, `ax-mode-${this.mode()}`];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXSideMenuComponent, isStandalone: true, selector: "ax-side-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, location: { classPropertyName: "location", publicName: "location", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
            { provide: AXComponent, useExisting: AXSideMenuComponent },
            { provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText || item.suffix?.text) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText ?? item.suffix?.text }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: [":root{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:.5rem;color:inherit;font-size:.875rem;line-height:1.25rem;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block:.5rem;margin-top:.5rem;padding-inline:.75rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{display:block;width:100%;height:1px;margin-block:.25rem;background-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;font-size:inherit;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{display:grid;grid-template-rows:1fr;padding-inline-start:1.25rem;opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0fr;opacity:0}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:.5rem}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{position:absolute;height:100%;background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before{position:absolute;width:var(--ax-comp-side-menu-indicator-size, 2px);height:100%;background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))));content:\"\"}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-side-menu.ax-look-default{gap:.25rem}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{padding:.5rem 1rem;border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.5)}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{position:relative;gap:.25rem;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;width:1px;height:100%;margin-inline-start:1.5rem;background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\"}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:fit-content}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface, var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:.125rem!important;display:flex;justify-content:center;width:100%}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:fit-content;gap:0;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-side-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        NgTemplateOutlet,
                        AXDecoratorGenericComponent,
                        AXSideMenuItemComponent,
                        RouterLink,
                        RouterLinkActive,
                        AXDecoratorIconComponent,
                    ], providers: [
                        { provide: AXComponent, useExisting: AXSideMenuComponent },
                        { provide: AXSideMenuBase, useExisting: AXSideMenuComponent },
                    ], template: "<ng-content select=\"ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]\"></ng-content>\n\n@for (node of items(); track node) {\n  <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n}\n<ng-template #Recursion let-item>\n  @if (item.title) {\n    <ax-title>{{ item.title }}</ax-title>\n  }\n  @if (item.routerLink) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [target]=\"item.target\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [routerLink]=\"item.routerLink\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n      [routerLinkActive]=\"item.routerLinkActive\"\n      [routerLinkActiveOptions]=\"item.routerLinkActiveOptions\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else if (item.href) {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [href]=\"item.href\"\n      [target]=\"item.target\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  } @else {\n    <ax-side-menu-item\n      [text]=\"item.text\"\n      [active]=\"item.active\"\n      [disabled]=\"item.disabled\"\n      [isLoading]=\"item.isLoading\"\n      [isCollapsed]=\"item.isCollapsed\"\n      [toggleOnClick]=\"item.toggleOnClick\"\n    >\n      <ng-container [ngTemplateOutlet]=\"sideMenuItemContent\"></ng-container>\n    </ax-side-menu-item>\n  }\n\n  <ng-template #sideMenuItemContent>\n    <ax-prefix>\n      @if (item.icon) {\n        <ax-icon [icon]=\"item.icon\"> </ax-icon>\n      }\n    </ax-prefix>\n    @if (item.data) {\n      <ax-text>{{ item.data }}</ax-text>\n    }\n    @if (item.suffixText || item.suffix?.text) {\n      <ax-suffix>\n        <ax-text>{{ item.suffixText ?? item.suffix?.text }}</ax-text>\n      </ax-suffix>\n    }\n    @for (child of item.items; track child) {\n      <ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\n    }\n  </ng-template>\n</ng-template>\n", styles: [":root{--ax-comp-side-menu-indicator-size: 2px}ax-side-menu{display:flex;width:100%;flex-direction:column;gap:.5rem;color:inherit;font-size:.875rem;line-height:1.25rem;-webkit-user-select:none;user-select:none}ax-side-menu>ax-title{display:block;margin-block:.5rem;padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-title{display:block;margin-block:.5rem;margin-top:.5rem;padding-inline:.75rem;padding-bottom:.25rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;opacity:.5}ax-side-menu ax-side-menu-item ax-divider{display:block;width:100%;height:1px;margin-block:.25rem;background-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-side-menu ax-side-menu-item .ax-side-item{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;font-size:inherit;font-weight:500}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-side-menu ax-side-menu-item .ax-side-item.ax-state-disabled .ax-ripple{opacity:0}ax-side-menu ax-side-menu-item .ax-side-item:hover:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu ax-side-menu-item .ax-side-item:hover.ax-state-disabled,ax-side-menu ax-side-menu-item .ax-side-item.ax-state-active.ax-state-disabled) ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side,ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{display:flex;align-items:center}ax-side-menu ax-side-menu-item .ax-side-item .ax-start-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side{gap:.5rem}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon{display:block;transition-property:rotate;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:90deg}ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side ax-loading ax-loading-spinner span{border-color:rgba(var(--ax-sys-color-on-primary-surface))}ax-side-menu ax-side-menu-item .ax-side-item .ax-ripple{background-color:rgba(var(--ax-sys-color-on-surface),.3)!important}ax-side-menu ax-side-menu-item .ax-side-children{display:grid;grid-template-rows:1fr;padding-inline-start:1.25rem;opacity:1;transition-property:grid-template-rows,opacity;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu ax-side-menu-item .ax-side-children.ax-collapsed{grid-template-rows:0fr;opacity:0}ax-side-menu ax-side-menu-item .ax-side-children.ax-empty{display:none}ax-side-menu ax-side-menu-item .ax-side-children .ax-side-children-content{overflow:hidden}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child{padding-top:.5rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item:first-child ax-title{margin-top:1rem}ax-side-menu ax-side-menu-item .ax-side-children ax-side-menu-item .ax-side-item{font-weight:400}ax-side-menu ax-side-menu-item .ax-side-children-content{display:flex;flex-direction:column;gap:.5rem}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item{border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item:hover:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-surface))}ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-pills ax-side-menu-item .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line,ax-side-menu.ax-look-with-line-color{gap:0}ax-side-menu.ax-look-with-line .ax-ripple,ax-side-menu.ax-look-with-line-color .ax-ripple{display:none}ax-side-menu.ax-look-with-line.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-start .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-start .ax-side-item:before{inset-inline-start:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line.ax-location-end .ax-side-item:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-children:before,ax-side-menu.ax-look-with-line-color.ax-location-end .ax-side-item:before{inset-inline-end:0;width:calc(var(--ax-comp-side-menu-indicator-size, 2px) / 2)}ax-side-menu.ax-look-with-line ax-side-menu-item,ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line .ax-side-item,ax-side-menu.ax-look-with-line-color ax-side-menu-item,ax-side-menu.ax-look-with-line-color .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-item{position:relative}ax-side-menu.ax-look-with-line ax-side-menu-item:before,ax-side-menu.ax-look-with-line .ax-side-children:before,ax-side-menu.ax-look-with-line .ax-side-item:before,ax-side-menu.ax-look-with-line-color ax-side-menu-item:before,ax-side-menu.ax-look-with-line-color .ax-side-children:before,ax-side-menu.ax-look-with-line-color .ax-side-item:before{position:absolute;height:100%;background-color:rgba(var(--ax-sys-color-border-lightest-surface));content:\"\";transition-property:width;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-side-menu.ax-look-with-line .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled),ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-look-with-line .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line .ax-side-item.ax-state-disabled,ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled):before{position:absolute;width:var(--ax-comp-side-menu-indicator-size, 2px);height:100%;background-color:rgba(var(--ax-comp-side-menu-indicator-active-color, var(--ax-comp-side-menu-bg-color, var(--ax-sys-color-primary-surface))));content:\"\"}ax-side-menu.ax-look-with-line .ax-side-children,ax-side-menu.ax-look-with-line-color .ax-side-children{gap:0}ax-side-menu.ax-look-with-line .ax-side-children ax-side-menu-item:first-child,ax-side-menu.ax-look-with-line-color .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-look-with-line-color .ax-side-item:hover:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-with-line-color .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-side-menu.ax-look-default{gap:.25rem}ax-side-menu.ax-look-default ax-icon{opacity:.6}ax-side-menu.ax-look-default .ax-side-item{padding:.5rem 1rem;border-radius:var(--ax-sys-border-radius)}ax-side-menu.ax-look-default .ax-side-item:hover:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.5)}ax-side-menu.ax-look-default .ax-side-item.ax-state-active:not(ax-side-menu.ax-look-default .ax-side-item.ax-state-disabled){background-color:rgba(var(--ax-sys-color-surface),.1)}ax-side-menu.ax-look-default .ax-side-children{position:relative;gap:.25rem;padding-inline-start:2.25rem}ax-side-menu.ax-look-default .ax-side-children:before{position:absolute;width:1px;height:100%;margin-inline-start:1.5rem;background-color:rgba(var(--ax-sys-color-border-light-surface));content:\"\"}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item .ax-side-item{padding:.25rem .5rem}ax-side-menu.ax-look-default .ax-side-children ax-side-menu-item:first-child{padding-top:0}ax-side-menu.ax-mode-compact{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar{width:4px;height:4px}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-track{background:transparent}ax-side-menu.ax-mode-compact ::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}ax-side-menu.ax-mode-compact .ax-side-menu-wrapper{display:flex;flex-direction:column;align-items:center;width:fit-content}ax-side-menu.ax-mode-compact .ax-side-children{display:none}ax-side-menu.ax-mode-compact .ax-inside-text{display:none}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item:hover:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-surface));background-color:rgba(var(--ax-sys-color-darker-surface, var(--ax-sys-color-surface)))}ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-active:not(ax-side-menu.ax-mode-compact.ax-look-pills>ax-side-menu-item>.ax-side-item.ax-state-disabled){color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-side-menu.ax-mode-compact ax-side-menu-item{position:relative;padding:.125rem!important;display:flex;justify-content:center;width:100%}ax-side-menu.ax-mode-compact ax-side-menu-item ax-icon{font-size:1.4rem}ax-side-menu.ax-mode-compact ax-side-menu-item .ax-side-item{width:fit-content;gap:0;padding:.5rem}ax-side-menu.ax-mode-compact ax-badge{position:absolute;top:5px;right:5px}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon:before{scale:-1 1}[dir=rtl] ax-side-menu ax-side-menu-item .ax-side-item .ax-end-side .arrow-icon.arrow-icon-expand{rotate:-90deg}ax-side-menu-item>.ax-side-menu-wrapper>.ax-side-menu-children-context-menu:not(.ax-state-open){display:none}\n"] }]
        }], propDecorators: { __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

class AXOutlineSideMenuDirective {
    constructor() {
        this.router = inject(Router);
        this.unsubscriber = inject(AXUnsubscriber);
        this.sideMenu = inject(AXSideMenuComponent);
        this.container = inject(AXOutlineContainerDirective);
        this.#anr = afterNextRender(() => {
            this.container.outlineItems$
                .pipe(this.unsubscriber.takeUntilDestroy, map((items) => {
                if (!items || items.length === 0)
                    return [];
                return this.buildNestedMenuItems(items);
            }), distinctUntilChanged(isEqual))
                .subscribe((menuItems) => {
                this.updateSideMenu(menuItems);
            });
        });
    }
    #anr;
    updateSideMenu(newMenuItems) {
        const currentMenuItems = this.sideMenu.items();
        const newSignature = this.getStructuralSignature(newMenuItems);
        const currentSignature = this.getStructuralSignature(currentMenuItems || []);
        if (newSignature !== currentSignature) {
            this.sideMenu.items.set(newMenuItems);
            return;
        }
        const currentComponents = this.sideMenu.children();
        const newActiveItem = this.flattenMenuItems(newMenuItems).find((item) => item.active);
        const currentActiveComponent = currentComponents.find((c) => c.active());
        if (newActiveItem?.href === currentActiveComponent?.href()) {
            return;
        }
        currentActiveComponent?.active.set(false);
        if (newActiveItem) {
            const componentToActivate = currentComponents.find((c) => c.href() === newActiveItem.href);
            componentToActivate?.active.set(true);
        }
    }
    /**
     * Creates a string signature that represents the tree structure of the menu.
     * Example: "href1(href1.1,href1.2),href2,href3"
     * This will be different for a flat list vs. a nested list.
     */
    getStructuralSignature(items) {
        return items
            .map((item) => {
            let signature = item.href || '';
            if (item.items && item.items.length > 0) {
                signature += `(${this.getStructuralSignature(item.items)})`;
            }
            return signature;
        })
            .join(',');
    }
    flattenMenuItems(items) {
        return items.reduce((acc, item) => {
            acc.push(item);
            if (item.items) {
                acc.push(...this.flattenMenuItems(item.items));
            }
            return acc;
        }, []);
    }
    textReplace(item) {
        const text = item.el.textContent;
        if (item.hasAnchor) {
            const newStr = text?.slice(0, -1);
            return newStr?.trim() || '';
        }
        return text?.trim() || '';
    }
    buildNestedMenuItems(items) {
        const menuItemsMap = new Map();
        const rootItems = [];
        items.forEach((item) => {
            const menuItem = {
                items: [],
                target: '_self',
                active: item.active,
                toggleOnClick: false,
                text: this.textReplace(item),
                href: `${this.router.url.split('#')[0]}#${item.id}`,
            };
            menuItemsMap.set(item.id, menuItem);
        });
        items.forEach((item) => {
            const menuItem = menuItemsMap.get(item.id);
            if (!menuItem)
                return;
            if (item.parentId) {
                const parentMenuItem = menuItemsMap.get(item.parentId);
                if (parentMenuItem) {
                    parentMenuItem.items?.push(menuItem);
                }
                else {
                    console.warn(`Outline item with id "${item.id}" has a parentId "${item.parentId}" that does not exist.`);
                    rootItems.push(menuItem);
                }
            }
            else {
                rootItems.push(menuItem);
            }
        });
        return rootItems;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXOutlineSideMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: AXOutlineSideMenuDirective, isStandalone: true, selector: "[axOutlineSideMenu]", providers: [AXUnsubscriber], exportAs: ["axOutlineSideMenu"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXOutlineSideMenuDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[axOutlineSideMenu]',
                    exportAs: 'axOutlineSideMenu',
                    providers: [AXUnsubscriber],
                }]
        }] });

const COMPONENT = [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective];
const MODULES = [
    CommonModule,
    AXCommonModule,
    AXRippleDirective,
    AXLoadingModule,
    AXTranslationModule,
    RouterLink,
    RouterLinkActive,
    AXDecoratorModule,
];
class AXSideMenuModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
            AXCommonModule,
            AXRippleDirective,
            AXLoadingModule,
            AXTranslationModule,
            RouterLink,
            RouterLinkActive,
            AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective], exports: [AXSideMenuComponent, AXSideMenuItemComponent, AXOutlineSideMenuDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuModule, imports: [CommonModule,
            AXCommonModule,
            AXLoadingModule,
            AXTranslationModule,
            AXDecoratorModule, AXSideMenuComponent, AXSideMenuItemComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSideMenuModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXOutlineSideMenuDirective, AXSideMenuBase, AXSideMenuComponent, AXSideMenuItemClickEvent, AXSideMenuItemComponent, AXSideMenuModule };
//# sourceMappingURL=acorex-components-side-menu.mjs.map
