@acorex/components 21.0.2-next.19 → 21.0.2-next.20

package/types/acorex-components-side-menu.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Signal, OnDestroy } from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
 import * as i2 from '@acorex/cdk/common';
 import { MXInteractiveComponent, AXClickEvent, NXComponent } from '@acorex/cdk/common';
 import * as i5 from '@angular/router';
@@ -21,7 +21,7 @@ declare abstract class AXSideMenuBase {
 declare class AXSideMenuItemClickEvent extends AXClickEvent {
     handled: boolean;
 }
-declare class AXSideMenuItemComponent extends MXInteractiveComponent implements OnDestroy {
+declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     #private;
     text: _angular_core.ModelSignal<string>;
     active: _angular_core.ModelSignal<boolean>;
@@ -31,26 +31,20 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent implements
     tooltipStatus: _angular_core.WritableSignal<boolean>;
     tooltipText: _angular_core.InputSignal<string>;
     private elem;
-    private renderer;
+    private document;
     private platformId;
-    private zIndexService;
-    /**
-     * Parent `<ax-side-menu>` resolved via Angular DI. For items projected
-     * directly this works; for items inside `ngTemplateOutlet` embedded views
-     * Angular resolves DI from the template's declaration site (which is NOT
-     * inside an `<ax-side-menu>`), so this is `null`. In that case we fall back
-     * to a DOM-walked reference stored in `parentMenuFromDom`.
-     */
-    private parentMenu;
-    /**
-     * Fallback parent reference resolved by walking up the DOM and reading the
-     * `__axContext__` property that `MXBaseComponent.ngOnInit` attaches to
-     * each host element. Populated on first render in the browser.
-     */
-    private parentMenuFromDom;
     private destroyRef;
-    private zToken;
     private childObserver;
+    private childrenPopover;
+    protected menuItemTrigger: _angular_core.Signal<ElementRef<HTMLElement>>;
+    /** Synced from the parent `ax-side-menu` (source of truth for full vs compact). */
+    private menuMode;
+    /** True when this item should use compact flyout popovers (rail or inside a flyout). */
+    protected isCompactMode: _angular_core.Signal<boolean>;
+    /** Called by `ax-side-menu` so items always know the current display mode. */
+    syncMenuMode(mode: 'full' | 'compact'): void;
+    /** Top-level rail button in compact mode (icon only, opens flyout). */
+    protected isFirstLevel: _angular_core.Signal<boolean>;
     readonly toggleOnClick: _angular_core.InputSignal<boolean>;
     readonly href: _angular_core.InputSignal<string>;
     readonly routerLink: _angular_core.InputSignal<string | any[] | UrlTree>;
@@ -60,7 +54,8 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent implements
     } | IsActiveMatchOptions>;
     readonly target: _angular_core.InputSignal<"_blank" | "_self" | "_parent" | "_top">;
     private childItems;
-    private childrenContainer;
+    private childrenSlot;
+    private popoverSlot;
     protected hasChild: _angular_core.WritableSignal<boolean>;
     /**
      * Walks up the DOM to find the enclosing `<ax-side-menu>` host element and
@@ -68,7 +63,7 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent implements
      * rendered inside `ngTemplateOutlet` embedded views cannot inject the
      * `AXSideMenuBase` token (DI scope is the template's declaration site).
      */
-    private resolveParentMenuFromDom;
+    private resolveMenuHostElement;
     /**
      * Moves any `<ax-side-menu-item>` that belongs to this item (its nearest
      * `<ax-side-menu-item>` ancestor in the projected DOM is this host) but is
@@ -76,21 +71,26 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent implements
      * step a content-projection edge case in Angular 21+ leaves recursive items
      * stranded inside `.ax-inside-text` (the catch-all `<ng-content>` slot) and
      * the submenu cannot expand.
-     *
-     * IMPORTANT: We resolve our own container via the `childrenContainer`
-     * view-child (NOT `host.querySelector('.ax-side-children-content')`),
-     * because `querySelector` is depth-first and would otherwise return the
-     * deepest *nested* item's container first.
      */
+    private getActiveChildrenSlot;
     private reparentOrphanedChildren;
-    ngOnDestroy(): void;
+    private syncCompactPopover;
+    /** Closes other top-level compact flyouts when a rail item is opened. */
+    private closeSiblingCompactPopovers;
+    /**
+     * Moves projected submenu nodes into the popover panel when opening in compact mode.
+     * They are not moved back to the inline slot on close (that caused a full-mode flash below the rail).
+     */
+    private relocateChildren;
+    protected _handlePopoverClosed(): void;
     private checkForChildren;
+    private hasNestedMenuItems;
     protected _handleClickEvent(e: MouseEvent): void;
     toggle(): void;
     open(): void;
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSideMenuItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSideMenuItemComponent, "ax-side-menu-item", never, { "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; "toggleOnClick": { "alias": "toggleOnClick"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "text": "textChange"; "active": "activeChange"; "isLoading": "isLoadingChange"; "isCollapsed": "isCollapsedChange"; "onClick": "onClick"; }, ["childItems"], ["ax-title", "ax-side-menu-item, ng-container, [ngTemplateOutlet]", "ax-divider", "ax-prefix", "ax-text", "*", "ax-suffix"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSideMenuItemComponent, "ax-side-menu-item", never, { "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "tooltipText": { "alias": "tooltipText"; "required": false; "isSignal": true; }; "toggleOnClick": { "alias": "toggleOnClick"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "routerLinkActive": { "alias": "routerLinkActive"; "required": false; "isSignal": true; }; "routerLinkActiveOptions": { "alias": "routerLinkActiveOptions"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "text": "textChange"; "active": "activeChange"; "isLoading": "isLoadingChange"; "isCollapsed": "isCollapsedChange"; "onClick": "onClick"; }, ["childItems"], ["ax-title", "ax-side-menu-item, ng-container, [ngTemplateOutlet]", "ax-divider", "ax-prefix", "*", "ax-suffix"], true, never>;
 }
 
 type AXSideMenuLook = 'pills' | 'with-line' | 'with-line-color' | 'default';
@@ -126,7 +126,6 @@ declare class AXSideMenuComponent extends NXComponent implements AXSideMenuBase
     readonly location: _angular_core.InputSignal<AXSideMenuLocation>;
     readonly mode: _angular_core.InputSignal<"full" | "compact">;
     private elementRef;
-    private firstLevelItems;
     /**
      * All `ax-side-menu-item` instances discovered by walking the host DOM.
      *
@@ -141,9 +140,7 @@ declare class AXSideMenuComponent extends NXComponent implements AXSideMenuBase
     private _items;
     /** Read-only signal exposing every discovered `ax-side-menu-item` instance. */
     readonly children: _angular_core.Signal<AXSideMenuItemComponent[]>;
-    private document;
     private platformId;
-    private renderer;
     private destroyRef;
     hostElement: HTMLElement;
     /**
@@ -156,8 +153,7 @@ declare class AXSideMenuComponent extends NXComponent implements AXSideMenuBase
      * templates that add/remove items at runtime stay in sync.
      */
     private refreshItemsFromDom;
-    private closeFirstLevelItems;
-    addFirstLevelClass(): void;
+    private addFirstLevelClass;
     /** @ignore */
     private get __hostClass();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSideMenuComponent, never>;