@acorex/components 20.7.12 → 20.7.13

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "20.7.12",
+  "version": "20.7.13",
   "peerDependencies": {
-    "@acorex/core": "20.7.12",
-    "@acorex/cdk": "20.7.12",
+    "@acorex/core": "20.7.13",
+    "@acorex/cdk": "20.7.13",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
     "gridstack": ">=12.0.0",
@@ -60,6 +60,10 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/acorex-components-accordion.mjs"
     },
+    "./action-sheet": {
+      "types": "./action-sheet/index.d.ts",
+      "default": "./fesm2022/acorex-components-action-sheet.mjs"
+    },
     "./alert": {
       "types": "./alert/index.d.ts",
       "default": "./fesm2022/acorex-components-alert.mjs"
@@ -68,10 +72,6 @@
       "types": "./aspect-ratio/index.d.ts",
       "default": "./fesm2022/acorex-components-aspect-ratio.mjs"
     },
-    "./action-sheet": {
-      "types": "./action-sheet/index.d.ts",
-      "default": "./fesm2022/acorex-components-action-sheet.mjs"
-    },
     "./audio-wave": {
       "types": "./audio-wave/index.d.ts",
       "default": "./fesm2022/acorex-components-audio-wave.mjs"
@@ -396,6 +396,10 @@
       "types": "./select-box/index.d.ts",
       "default": "./fesm2022/acorex-components-select-box.mjs"
     },
+    "./selection-list": {
+      "types": "./selection-list/index.d.ts",
+      "default": "./fesm2022/acorex-components-selection-list.mjs"
+    },
     "./selection-list-2": {
       "types": "./selection-list-2/index.d.ts",
       "default": "./fesm2022/acorex-components-selection-list-2.mjs"
@@ -483,10 +487,6 @@
     "./wysiwyg": {
       "types": "./wysiwyg/index.d.ts",
       "default": "./fesm2022/acorex-components-wysiwyg.mjs"
-    },
-    "./selection-list": {
-      "types": "./selection-list/index.d.ts",
-      "default": "./fesm2022/acorex-components-selection-list.mjs"
     }
   }
 }

package/side-menu/index.d.ts

@@ -1,4 +1,5 @@
 import * as _angular_core 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';
@@ -8,6 +9,15 @@ import * as i3 from '@acorex/components/loading';
 import * as i4 from '@acorex/core/translation';
 import * as i6 from '@acorex/components/decorators';
 
+/**
+ * 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.
+ */
+declare abstract class AXSideMenuBase {
+    abstract readonly mode: Signal<'full' | 'compact'>;
+}
+
 declare class AXSideMenuItemClickEvent extends AXClickEvent {
     handled: boolean;
 }
@@ -18,7 +28,23 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     isLoading: _angular_core.ModelSignal<boolean>;
     isCollapsed: _angular_core.ModelSignal<boolean>;
     onClick: _angular_core.OutputEmitterRef<AXSideMenuItemClickEvent>;
+    tooltipStatus: _angular_core.WritableSignal<boolean>;
+    tooltipText: _angular_core.InputSignal<string>;
     private elem;
+    private document;
+    private platformId;
+    private destroyRef;
+    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>;
@@ -27,14 +53,51 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
         exact: boolean;
     } | IsActiveMatchOptions>;
     readonly target: _angular_core.InputSignal<"_blank" | "_self" | "_parent" | "_top">;
+    private childItems;
+    private childrenSlot;
+    private popoverSlot;
     protected hasChild: _angular_core.WritableSignal<boolean>;
+    /**
+     * Walks up the DOM to find the enclosing `<ax-side-menu>` host element and
+     * reads its component instance from `__axContext__`. Needed because items
+     * rendered inside `ngTemplateOutlet` embedded views cannot inject the
+     * `AXSideMenuBase` token (DI scope is the template's declaration site).
+     */
+    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
+     * NOT inside our own `.ax-side-children-content` container. Without this
+     * 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.
+     */
+    private getActiveChildrenSlot;
+    private reparentOrphanedChildren;
+    private syncCompactPopover;
+    /** Restores submenu nodes to the inline slot before the overlay is disposed. */
+    private closeCompactFlyout;
+    /** 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;
+    /**
+     * Pulls direct submenu nodes back into the inline slot from the popover host and
+     * from any open flyout overlay panel so they are not destroyed on overlay dispose.
+     */
+    private moveChildrenToInlineSlot;
+    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; }; "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"; }, never, ["ax-title", "ax-side-menu-item, ng-container", "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';
@@ -63,15 +126,45 @@ type AXSideMenuItem = {
  * @category
  * A component for displaying a side menu with customizable content.
  */
-declare class AXSideMenuComponent extends NXComponent {
+declare class AXSideMenuComponent extends NXComponent implements AXSideMenuBase {
+    #private;
     items: _angular_core.ModelSignal<AXSideMenuItem[]>;
     readonly look: _angular_core.InputSignal<AXSideMenuLook>;
     readonly location: _angular_core.InputSignal<AXSideMenuLocation>;
-    children: _angular_core.Signal<readonly AXSideMenuItemComponent[]>;
+    readonly mode: _angular_core.InputSignal<"full" | "compact">;
+    private 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.
+     */
+    private _items;
+    /** Read-only signal exposing every discovered `ax-side-menu-item` instance. */
+    readonly children: _angular_core.Signal<AXSideMenuItemComponent[]>;
+    private platformId;
+    private destroyRef;
+    hostElement: HTMLElement;
+    /**
+     * 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.
+     */
+    private refreshItemsFromDom;
+    private addFirstLevelClass;
     /** @ignore */
     private get __hostClass();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSideMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSideMenuComponent, "ax-side-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "location": { "alias": "location"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; }, never, ["ax-side-menu-item,ax-title,ng-container,ng-content"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSideMenuComponent, "ax-side-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "location": { "alias": "location"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; }, { "items": "itemsChange"; }, never, ["ax-side-menu-item,ax-title,ng-container,[ngTemplateOutlet]"], true, never>;
 }
 
 declare class AXOutlineSideMenuDirective {
@@ -100,5 +193,5 @@ declare class AXSideMenuModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXSideMenuModule>;
 }
 
-export { AXOutlineSideMenuDirective, AXSideMenuComponent, AXSideMenuItemClickEvent, AXSideMenuItemComponent, AXSideMenuModule };
+export { AXOutlineSideMenuDirective, AXSideMenuBase, AXSideMenuComponent, AXSideMenuItemClickEvent, AXSideMenuItemComponent, AXSideMenuModule };
 export type { AXSideMenuItem, AXSideMenuLocation, AXSideMenuLook };