@acorex/components 20.7.19 → 20.7.21

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "20.7.19",
+  "version": "20.7.21",
   "peerDependencies": {
-    "@acorex/core": "20.7.19",
-    "@acorex/cdk": "20.7.19",
+    "@acorex/core": "20.7.21",
+    "@acorex/cdk": "20.7.21",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
     "gridstack": ">=12.0.0",
@@ -240,14 +240,6 @@
       "types": "./json-viewer/index.d.ts",
       "default": "./fesm2022/acorex-components-json-viewer.mjs"
     },
-    "./kanban": {
-      "types": "./kanban/index.d.ts",
-      "default": "./fesm2022/acorex-components-kanban.mjs"
-    },
-    "./kbd": {
-      "types": "./kbd/index.d.ts",
-      "default": "./fesm2022/acorex-components-kbd.mjs"
-    },
     "./label": {
       "types": "./label/index.d.ts",
       "default": "./fesm2022/acorex-components-label.mjs"
@@ -256,6 +248,14 @@
       "types": "./list/index.d.ts",
       "default": "./fesm2022/acorex-components-list.mjs"
     },
+    "./kbd": {
+      "types": "./kbd/index.d.ts",
+      "default": "./fesm2022/acorex-components-kbd.mjs"
+    },
+    "./kanban": {
+      "types": "./kanban/index.d.ts",
+      "default": "./fesm2022/acorex-components-kanban.mjs"
+    },
     "./loading": {
       "types": "./loading/index.d.ts",
       "default": "./fesm2022/acorex-components-loading.mjs"
@@ -440,6 +440,10 @@
       "types": "./tag-box/index.d.ts",
       "default": "./fesm2022/acorex-components-tag-box.mjs"
     },
+    "./text-area": {
+      "types": "./text-area/index.d.ts",
+      "default": "./fesm2022/acorex-components-text-area.mjs"
+    },
     "./text-box": {
       "types": "./text-box/index.d.ts",
       "default": "./fesm2022/acorex-components-text-box.mjs"
@@ -448,18 +452,22 @@
       "types": "./time-duration/index.d.ts",
       "default": "./fesm2022/acorex-components-time-duration.mjs"
     },
-    "./text-area": {
-      "types": "./text-area/index.d.ts",
-      "default": "./fesm2022/acorex-components-text-area.mjs"
-    },
     "./time-line": {
       "types": "./time-line/index.d.ts",
       "default": "./fesm2022/acorex-components-time-line.mjs"
     },
+    "./toast": {
+      "types": "./toast/index.d.ts",
+      "default": "./fesm2022/acorex-components-toast.mjs"
+    },
     "./toolbar": {
       "types": "./toolbar/index.d.ts",
       "default": "./fesm2022/acorex-components-toolbar.mjs"
     },
+    "./tooltip": {
+      "types": "./tooltip/index.d.ts",
+      "default": "./fesm2022/acorex-components-tooltip.mjs"
+    },
     "./tree-view": {
       "types": "./tree-view/index.d.ts",
       "default": "./fesm2022/acorex-components-tree-view.mjs"
@@ -468,13 +476,9 @@
       "types": "./tree-view-legacy/index.d.ts",
       "default": "./fesm2022/acorex-components-tree-view-legacy.mjs"
     },
-    "./tooltip": {
-      "types": "./tooltip/index.d.ts",
-      "default": "./fesm2022/acorex-components-tooltip.mjs"
-    },
-    "./toast": {
-      "types": "./toast/index.d.ts",
-      "default": "./fesm2022/acorex-components-toast.mjs"
+    "./uploader": {
+      "types": "./uploader/index.d.ts",
+      "default": "./fesm2022/acorex-components-uploader.mjs"
     },
     "./video-player": {
       "types": "./video-player/index.d.ts",
@@ -483,10 +487,6 @@
     "./wysiwyg": {
       "types": "./wysiwyg/index.d.ts",
       "default": "./fesm2022/acorex-components-wysiwyg.mjs"
-    },
-    "./uploader": {
-      "types": "./uploader/index.d.ts",
-      "default": "./fesm2022/acorex-components-uploader.mjs"
     }
   }
 }

package/side-menu/index.d.ts

@@ -2,6 +2,7 @@ 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 { AXMenuItem, AXContextMenuItemsClickEvent } from '@acorex/components/menu';
 import * as i5 from '@angular/router';
 import { UrlTree, IsActiveMatchOptions } from '@angular/router';
 import * as i1 from '@angular/common';
@@ -21,6 +22,10 @@ declare abstract class AXSideMenuBase {
 declare class AXSideMenuItemClickEvent extends AXClickEvent {
     handled: boolean;
 }
+/** Routes context-menu clicks back to the matching `ax-side-menu-item`. */
+interface AXSideMenuContextMenuItemData {
+    sideMenuItem: AXSideMenuItemComponent;
+}
 declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     #private;
     text: _angular_core.ModelSignal<string>;
@@ -30,21 +35,6 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     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>;
@@ -53,49 +43,44 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
         exact: boolean;
     } | IsActiveMatchOptions>;
     readonly target: _angular_core.InputSignal<"_blank" | "_self" | "_parent" | "_top">;
-    private childItems;
-    private childrenSlot;
-    private popoverSlot;
+    protected menuItemTrigger: _angular_core.Signal<ElementRef<HTMLElement>>;
     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;
+    protected isCompactMode: _angular_core.Signal<boolean>;
+    /** Top-level rail entry in compact mode (opens the flyout context menu). */
+    protected isFirstLevel: _angular_core.Signal<boolean>;
+    private readonly elem;
+    private readonly platformId;
+    private readonly destroyRef;
+    private readonly menuMode;
+    private childObserver;
+    private readonly childItems;
+    private readonly childrenSlot;
+    private readonly childrenContextMenu;
+    private get hostElement();
+    syncMenuMode(mode: 'full' | 'compact'): void;
+    /** Builds the cascading `AXMenuItem` tree used by the compact-mode context menu. */
+    buildMenuItemsFromChildren(): AXMenuItem[];
+    activateFromContextMenu(nativeEvent: MouseEvent): void;
     toggle(): void;
     open(): void;
     close(): void;
+    protected handleContextMenuItemClick(event: AXContextMenuItemsClickEvent): void;
+    protected _handleContextMenuClosed(): void;
+    protected _handleClickEvent(e: MouseEvent): void;
+    private openCompactContextMenu;
+    private getContextMenuAnchorPoint;
+    private mapSlotChildrenToMenuItems;
+    private toMenuItem;
+    private hasNestedChildren;
+    /** Direct `ax-side-menu-item` children of `menuHost` (defaults to this item). */
+    private getDirectChildElements;
+    private reparentOrphanedChildren;
+    private getItemLabel;
+    private getItemIcon;
+    private getItemSuffix;
+    private getInstanceFromElement;
+    private closeSiblingCompactMenus;
+    private updateHasChild;
     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>;
 }
@@ -194,4 +179,4 @@ declare class AXSideMenuModule {
 }
 
 export { AXOutlineSideMenuDirective, AXSideMenuBase, AXSideMenuComponent, AXSideMenuItemClickEvent, AXSideMenuItemComponent, AXSideMenuModule };
-export type { AXSideMenuItem, AXSideMenuLocation, AXSideMenuLook };
+export type { AXSideMenuContextMenuItemData, AXSideMenuItem, AXSideMenuLocation, AXSideMenuLook };