@acorex/components 20.7.20 → 20.7.21

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "20.7.20",
+  "version": "20.7.21",
   "peerDependencies": {
-    "@acorex/core": "20.7.20",
-    "@acorex/cdk": "20.7.20",
+    "@acorex/core": "20.7.21",
+    "@acorex/cdk": "20.7.21",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
     "gridstack": ">=12.0.0",
@@ -56,6 +56,10 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/acorex-components.mjs"
     },
+    "./accordion": {
+      "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"
@@ -64,10 +68,6 @@
       "types": "./alert/index.d.ts",
       "default": "./fesm2022/acorex-components-alert.mjs"
     },
-    "./accordion": {
-      "types": "./accordion/index.d.ts",
-      "default": "./fesm2022/acorex-components-accordion.mjs"
-    },
     "./aspect-ratio": {
       "types": "./aspect-ratio/index.d.ts",
       "default": "./fesm2022/acorex-components-aspect-ratio.mjs"
@@ -184,6 +184,10 @@
       "types": "./decorators/index.d.ts",
       "default": "./fesm2022/acorex-components-decorators.mjs"
     },
+    "./dialog": {
+      "types": "./dialog/index.d.ts",
+      "default": "./fesm2022/acorex-components-dialog.mjs"
+    },
     "./drawer": {
       "types": "./drawer/index.d.ts",
       "default": "./fesm2022/acorex-components-drawer.mjs"
@@ -196,10 +200,6 @@
       "types": "./dropdown/index.d.ts",
       "default": "./fesm2022/acorex-components-dropdown.mjs"
     },
-    "./dialog": {
-      "types": "./dialog/index.d.ts",
-      "default": "./fesm2022/acorex-components-dialog.mjs"
-    },
     "./dropdown-button": {
       "types": "./dropdown-button/index.d.ts",
       "default": "./fesm2022/acorex-components-dropdown-button.mjs"
@@ -220,14 +220,14 @@
       "types": "./flow-chart/index.d.ts",
       "default": "./fesm2022/acorex-components-flow-chart.mjs"
     },
-    "./grid-layout-builder": {
-      "types": "./grid-layout-builder/index.d.ts",
-      "default": "./fesm2022/acorex-components-grid-layout-builder.mjs"
-    },
     "./form": {
       "types": "./form/index.d.ts",
       "default": "./fesm2022/acorex-components-form.mjs"
     },
+    "./grid-layout-builder": {
+      "types": "./grid-layout-builder/index.d.ts",
+      "default": "./fesm2022/acorex-components-grid-layout-builder.mjs"
+    },
     "./image": {
       "types": "./image/index.d.ts",
       "default": "./fesm2022/acorex-components-image.mjs"
@@ -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"

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 };