@acorex/components 21.0.2-next.26 → 21.0.2-next.28

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "21.0.2-next.26",
+  "version": "21.0.2-next.28",
   "peerDependencies": {
-    "@acorex/core": "21.0.2-next.26",
-    "@acorex/cdk": "21.0.2-next.26",
+    "@acorex/core": "21.0.2-next.28",
+    "@acorex/cdk": "21.0.2-next.28",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
     "gridstack": ">=12.0.0",

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

@@ -2,6 +2,7 @@ import * as _angular_core from '@angular/core';
 import { WritableSignal, OutputEmitterRef, OnDestroy } from '@angular/core';
 import { AXStyleColorType, NXComponent, NXClickEvent, AXOrientation, NXEvent } from '@acorex/cdk/common';
 import { AXPoint } from '@acorex/core/utils';
+import { UrlTree, IsActiveMatchOptions } from '@angular/router';
 import { Subject } from 'rxjs';
 
 type AXMenuOpenTrigger = 'click' | 'hover';
@@ -16,22 +17,37 @@ declare abstract class AXRootMenu {
 }
 declare abstract class AXMenuItemComponentBase {
 }
-declare abstract class AXMenuItem {
-    color?: AXStyleColorType;
-    name?: string;
+/** Shared tree item shape for `ax-menu`, `ax-context-menu`, and `ax-side-menu`. */
+interface AXMenuItem {
     text: string;
-    data?: any;
+    name?: string;
     icon?: string;
+    data?: unknown;
     disabled?: boolean;
     items?: AXMenuItem[];
+    color?: AXStyleColorType;
     suffix?: {
         text: string;
     };
+    /** Side-menu alias for `suffix.text`. */
+    suffixText?: string;
     break?: boolean;
     group?: {
         name?: string;
         title?: string;
     };
+    title?: string;
+    routerLink?: string | any[] | UrlTree;
+    routerLinkActive?: string | string[];
+    routerLinkActiveOptions?: {
+        exact: boolean;
+    } | IsActiveMatchOptions;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    active?: boolean;
+    isLoading?: boolean;
+    isCollapsed?: boolean;
+    toggleOnClick?: boolean;
 }
 declare class AXMenuItemClickBaseEvent<T extends NXComponent = NXComponent> extends NXClickEvent<T> {
     item: {
@@ -56,6 +72,8 @@ declare class AXContextMenuComponent extends NXComponent {
     readonly orientation: _angular_core.InputSignal<AXOrientation>;
     readonly openOn: _angular_core.InputSignal<AXMenuOpenTrigger>;
     readonly closeOn: _angular_core.InputSignal<AXMenuCloseTrigger>;
+    /** When true, closes the menu on router navigation (e.g. side-menu route changes). */
+    readonly closeOnRouteChange: _angular_core.InputSignal<boolean>;
     readonly originalItems: _angular_core.InputSignal<AXMenuItem[]>;
     readonly target: _angular_core.InputSignal<string | HTMLElement | HTMLElement[]>;
     onItemClick: _angular_core.OutputEmitterRef<AXContextMenuItemsClickEvent>;
@@ -71,6 +89,8 @@ declare class AXContextMenuComponent extends NXComponent {
     private injector;
     private zToken;
     private lastOpenPoint;
+    private router;
+    private destroyRef;
     /** @ignore */
     constructor();
     ngOnDestroy(): void;
@@ -94,6 +114,8 @@ declare class AXContextMenuComponent extends NXComponent {
     private originalParent;
     protected items: _angular_core.WritableSignal<AXMenuItem[]>;
     /** @ignore */
+    private setupCloseOnRouteChange;
+    /** @ignore */
     private getTargetElements;
     /** @ignore */
     private bindContextEvent;
@@ -120,7 +142,7 @@ declare class AXContextMenuComponent extends NXComponent {
     /** @ignore */
     get __hostClass(): any;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXContextMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXContextMenuComponent, "ax-context-menu", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "closeOn": { "alias": "closeOn"; "required": false; "isSignal": true; }; "originalItems": { "alias": "items"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; "onOpening": "onOpening"; "onClose": "onClose"; }, never, ["ax-menu-item,ax-divider,ax-title,ng-container"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXContextMenuComponent, "ax-context-menu", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "closeOn": { "alias": "closeOn"; "required": false; "isSignal": true; }; "closeOnRouteChange": { "alias": "closeOnRouteChange"; "required": false; "isSignal": true; }; "originalItems": { "alias": "items"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; "onOpening": "onOpening"; "onClose": "onClose"; }, never, ["ax-menu-item,ax-divider,ax-title,ng-container"], true, never>;
 }
 
 type AXMenuItemClickEvent = AXMenuItemClickBaseEvent<AXMenuItemComponent>;
@@ -140,6 +162,7 @@ declare class AXMenuItemComponent extends NXComponent implements OnDestroy {
     private scrollableParents;
     private unsuscriber;
     private renderer;
+    private injector;
     private zIndexService;
     private zToken;
     protected arrowIcon: _angular_core.Signal<string>;
@@ -170,10 +193,18 @@ declare class AXMenuItemComponent extends NXComponent implements OnDestroy {
      * @returns void - No return value. Triggers submenu closing side-effects.
      */
     close(): void;
+    /**
+     * Positions the submenu after layout so nested levels measure their full height.
+     */
+    private schedulePositionCalculation;
     /**
      * Calculate the position of the submenu to avoid it going out of the viewport.
      */
     private calculatePosition;
+    /** Measures submenu size using the same flex layout as the rendered menu. */
+    private measureSubmenuRect;
+    /** Keeps the submenu fully inside the viewport vertically. */
+    private clampVerticalPosition;
     handleClick(e: MouseEvent): void;
     handleMouseEnter(event: MouseEvent): void;
     private mouseLeaveTimeout;
@@ -243,5 +274,5 @@ declare class AXMenuModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXMenuModule>;
 }
 
-export { AXContextMenuComponent, AXContextMenuOpeningEvent, AXMenuComponent, AXMenuItem, AXMenuItemClickBaseEvent, AXMenuItemComponent, AXMenuItemComponentBase, AXMenuModule, AXMenuService, AXRootMenu };
-export type { AXContextMenuItemsClickEvent, AXMenuCloseTrigger, AXMenuItemClickEvent, AXMenuItemsClickEvent, AXMenuOpenTrigger };
+export { AXContextMenuComponent, AXContextMenuOpeningEvent, AXMenuComponent, AXMenuItemClickBaseEvent, AXMenuItemComponent, AXMenuItemComponentBase, AXMenuModule, AXMenuService, AXRootMenu };
+export type { AXContextMenuItemsClickEvent, AXMenuCloseTrigger, AXMenuItem, AXMenuItemClickEvent, AXMenuItemsClickEvent, AXMenuOpenTrigger };

package/types/acorex-components-popup.d.ts

@@ -9,7 +9,7 @@ import * as i3 from '@acorex/components/decorators';
 import * as i4 from '@acorex/core/translation';
 
 type AXPopupContentType = TemplateRef<unknown> | AXComponentType<unknown>;
-type AXPopupSizeType = 'sm' | 'md' | 'lg' | 'full' | 'fit';
+type AXPopupSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | 'fit';
 interface AXPopupConfig {
     title?: string;
     closeButton?: boolean;

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

@@ -33,7 +33,6 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     isLoading: _angular_core.ModelSignal<boolean>;
     isCollapsed: _angular_core.ModelSignal<boolean>;
     onClick: _angular_core.OutputEmitterRef<AXSideMenuItemClickEvent>;
-    tooltipText: _angular_core.InputSignal<string>;
     readonly toggleOnClick: _angular_core.InputSignal<boolean>;
     readonly href: _angular_core.InputSignal<string>;
     readonly routerLink: _angular_core.InputSignal<string | any[] | UrlTree>;
@@ -79,7 +78,7 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     private getDirectChildElements;
     private reparentOrphanedChildren;
     private scheduleChildRefresh;
-    private hasRelevantChildMutation;
+    private hasRelevantMutation;
     private nodeListContainsMenuStructuralNode;
     private getItemLabel;
     private getItemIcon;
@@ -89,38 +88,18 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     private updateHasChild;
     private updateContentLabel;
     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-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; }; "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';
 type AXSideMenuLocation = 'start' | 'end';
-type AXSideMenuItem = {
-    title?: string;
-    routerLink?: string | any[] | UrlTree;
-    routerLinkActive?: string | string[];
-    routerLinkActiveOptions?: {
-        exact: boolean;
-    } | IsActiveMatchOptions;
-    href?: string;
-    target?: '_blank' | '_self' | '_parent' | '_top';
-    text: string;
-    active?: boolean;
-    disabled?: boolean;
-    isLoading?: boolean;
-    isCollapsed?: boolean;
-    icon?: string;
-    data?: unknown;
-    suffixText?: string;
-    toggleOnClick?: boolean;
-    items?: AXSideMenuItem[];
-};
 /**
  * @category
  * A component for displaying a side menu with customizable content.
  */
 declare class AXSideMenuComponent extends NXComponent implements AXSideMenuBase {
     #private;
-    items: _angular_core.ModelSignal<AXSideMenuItem[]>;
+    items: _angular_core.ModelSignal<AXMenuItem[]>;
     readonly look: _angular_core.InputSignal<AXSideMenuLook>;
     readonly location: _angular_core.InputSignal<AXSideMenuLocation>;
     readonly mode: _angular_core.InputSignal<"full" | "compact">;
@@ -191,4 +170,4 @@ declare class AXSideMenuModule {
 }
 
 export { AXOutlineSideMenuDirective, AXSideMenuBase, AXSideMenuComponent, AXSideMenuItemClickEvent, AXSideMenuItemComponent, AXSideMenuModule };
-export type { AXSideMenuContextMenuItemData, AXSideMenuItem, AXSideMenuLocation, AXSideMenuLook };
+export type { AXSideMenuContextMenuItemData, AXSideMenuLocation, AXSideMenuLook };