@acorex/components 21.1.0-next.0 → 21.1.0-next.2

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

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { OnInit, WritableSignal, TemplateRef, EventEmitter } from '@angular/core';
 import { MXSelectionValueComponent, AXDataSource, AXEvent, AXListDataSource } from '@acorex/cdk/common';
 
@@ -17,13 +17,13 @@ declare class AXListComponent extends MXSelectionValueComponent implements OnIni
      *
      * @defaultValue true
      */
-    isItemTruncated: i0.InputSignal<boolean>;
+    isItemTruncated: _angular_core.InputSignal<boolean>;
     /**
      * Determines if a tooltip is shown for an item.
      *
      * @defaultValue false
      */
-    showItemTooltip: i0.InputSignal<boolean>;
+    showItemTooltip: _angular_core.InputSignal<boolean>;
     /** @ignore */
     private _dataSource;
     /** @ignore */
@@ -43,6 +43,16 @@ declare class AXListComponent extends MXSelectionValueComponent implements OnIni
      *  @ignore
      */
     itemHeightSignal: WritableSignal<number | 'auto'>;
+    /**
+     * Fixed pixel size for CDK virtual scroll. Falls back to 40 when `itemHeight` is `'auto'`.
+     * @ignore
+     */
+    protected cdkItemSize: _angular_core.Signal<number>;
+    /**
+     * CSS value applied to `--ax-comp-list-item-height` so rendered rows match the virtual slot.
+     * @ignore
+     */
+    protected itemHeightCss: _angular_core.Signal<string>;
     /**
      * Sets the height of each item in the list.
      */
@@ -172,15 +182,15 @@ declare class AXListComponent extends MXSelectionValueComponent implements OnIni
      * Determines whether to show the empty template based on the presence of items and loading state.
      * @ignore
      */
-    showEmptyTemplate: i0.Signal<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXListComponent, "ax-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "disabledChange": "disabledChange"; "readonlyChange": "readonlyChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, never, ["ax-header", "ax-footer"], true, never>;
+    showEmptyTemplate: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXListComponent, "ax-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "disabledChange": "disabledChange"; "readonlyChange": "readonlyChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onScrolledIndexChanged": "onScrolledIndexChanged"; }, never, ["ax-header", "ax-footer"], true, never>;
 }
 
 declare class AXListModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXListModule, never, [typeof AXListComponent], [typeof AXListComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXListModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXListModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXListModule, never, [typeof AXListComponent], [typeof AXListComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXListModule>;
 }
 
 export { AXListComponent, AXListModule };

package/types/acorex-components-select-box.d.ts

@@ -161,6 +161,12 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
     private resetSearchAfterSelection;
     /** @ignore */
     private setDropdownSize;
+    /**
+     * Shrinks list height to the visible overlay area so virtual scroll ends on fully
+     * visible rows instead of inside an overflow:hidden clipped region.
+     * @ignore
+     */
+    private _fitListHeightToAvailableSpace;
     private updateDropdownPosition;
     private updateDropdownSize;
     private _fitDropdownToContent;

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

@@ -48,6 +48,8 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     protected isFirstLevel: _angular_core.Signal<boolean>;
     /** Tooltip text for first-level items in compact mode only. */
     protected tooltipContent: _angular_core.Signal<string>;
+    /** Accessible label for icon-only compact root items. */
+    protected compactAriaLabel: _angular_core.Signal<string>;
     private readonly elem;
     private readonly platformId;
     private readonly destroyRef;
@@ -68,7 +70,7 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     close(): void;
     protected handleContextMenuItemClick(event: AXContextMenuItemsClickEvent): void;
     protected handleContextMenuClosed(): void;
-    protected handleClickEvent(e: MouseEvent): void;
+    protected handleClickEvent(e: Event): void;
     private openCompactContextMenu;
     private getContextMenuAnchorPoint;
     private mapSlotChildrenToMenuItems;
@@ -91,7 +93,7 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     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 AXSideMenuLook = 'default' | "with-line";
 type AXSideMenuLocation = 'start' | 'end';
 /**
  * @category

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

@@ -0,0 +1,127 @@
+import * as _angular_core from '@angular/core';
+import { NXComponent, AXClickEvent } from '@acorex/cdk/common';
+
+/**
+ * Display mode for the sidebar shell and related utility components.
+ * Kept aligned with `AXSideMenu` mode values for shared binding.
+ */
+type AXSidebarMode = 'full' | 'compact';
+
+/** Marks projected header content inside `ax-sidebar`. */
+declare class AXSidebarHeaderDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXSidebarHeaderDirective, "[axSidebarHeader]", never, {}, {}, never, never, true, never>;
+}
+/** Marks projected navigation content (typically `ax-side-menu`) inside `ax-sidebar`. */
+declare class AXSidebarNavigationDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarNavigationDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXSidebarNavigationDirective, "[axSidebarNavigation]", never, {}, {}, never, never, true, never>;
+}
+/** Marks projected footer utility content inside `ax-sidebar`. */
+declare class AXSidebarFooterDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXSidebarFooterDirective, "[axSidebarFooter]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the user utility slot inside `ax-sidebar`. */
+declare class AXSidebarUserSlotDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarUserSlotDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXSidebarUserSlotDirective, "[axSidebarUser]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the collapse utility slot inside `ax-sidebar`. */
+declare class AXSidebarCollapseSlotDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarCollapseSlotDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXSidebarCollapseSlotDirective, "[axSidebarCollapse]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Layout shell for an enterprise sidebar with full and compact widths,
+ * sticky header/utility regions, and a scrollable navigation slot.
+ *
+ * @category Components
+ */
+declare class AXSidebarComponent extends NXComponent {
+    /**
+     * Sidebar display mode shared with collapse and side-menu consumers.
+     *
+     * @defaultValue 'full'
+     */
+    mode: _angular_core.ModelSignal<AXSidebarMode>;
+    /**
+     * Accessible name for the sidebar landmark.
+     *
+     * @defaultValue 'Sidebar'
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Optional id of the navigation region for `aria-controls` wiring from collapse.
+     */
+    readonly navigationId: _angular_core.InputSignal<string>;
+    protected readonly isFull: _angular_core.Signal<boolean>;
+    protected readonly isCompact: _angular_core.Signal<boolean>;
+    protected readonly hostClass: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSidebarComponent, "ax-sidebar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "navigationId": { "alias": "navigationId"; "required": false; "isSignal": true; }; }, { "mode": "modeChange"; }, never, ["[axSidebarHeader], ax-header", "ax-side-menu, [axSidebarNavigation]", "*", "ax-sidebar-user, [axSidebarUser]", "ax-sidebar-collapse, [axSidebarCollapse]", "[axSidebarFooter], ax-footer"], true, never>;
+}
+
+/**
+ * Reusable user/account row for sidebar utility areas.
+ * Renders expanded identity content or a compact avatar with tooltip.
+ * Project an <ax-avatar> for the avatar slot; size is always fixed by the host styles.
+ *
+ * @category Components
+ */
+declare class AXSidebarUserComponent extends NXComponent {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly status: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly compact: _angular_core.InputSignal<boolean>;
+    readonly tooltip: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly userClick: _angular_core.OutputEmitterRef<AXClickEvent>;
+    readonly actionClick: _angular_core.OutputEmitterRef<AXClickEvent>;
+    protected readonly tooltipContent: _angular_core.Signal<string>;
+    protected readonly accessibleLabel: _angular_core.Signal<string>;
+    protected readonly hostClass: _angular_core.Signal<string>;
+    protected handleUserClick(nativeEvent: MouseEvent): void;
+    protected handleActionClick(nativeEvent: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarUserComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSidebarUserComponent, "ax-sidebar-user", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "userClick": "userClick"; "actionClick": "actionClick"; }, never, ["ax-avatar", "ax-text, ax-title, ax-subtitle", "ax-suffix"], true, never>;
+}
+
+/**
+ * Sticky utility control that toggles sidebar full/compact mode.
+ *
+ * @category Components
+ */
+declare class AXSidebarCollapseComponent extends NXComponent {
+    /**
+     * Current sidebar mode. Two-way bindable via `[(mode)]`.
+     *
+     * @defaultValue 'full'
+     */
+    mode: _angular_core.ModelSignal<AXSidebarMode>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly fullLabel: _angular_core.InputSignal<string>;
+    readonly compactLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaControls: _angular_core.InputSignal<string>;
+    protected readonly isFull: _angular_core.Signal<boolean>;
+    protected readonly isCompact: _angular_core.Signal<boolean>;
+    protected readonly label: _angular_core.Signal<string>;
+    protected readonly accessibleLabel: _angular_core.Signal<string>;
+    protected readonly tooltipContent: _angular_core.Signal<string>;
+    protected readonly hostClass: _angular_core.Signal<string>;
+    protected toggleMode(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarCollapseComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSidebarCollapseComponent, "ax-sidebar-collapse", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullLabel": { "alias": "fullLabel"; "required": false; "isSignal": true; }; "compactLabel": { "alias": "compactLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; }, { "mode": "modeChange"; }, never, never, true, never>;
+}
+
+declare class AXSidebarModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSidebarModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXSidebarModule, never, [typeof AXSidebarComponent, typeof AXSidebarUserComponent, typeof AXSidebarCollapseComponent, typeof AXSidebarHeaderDirective, typeof AXSidebarNavigationDirective, typeof AXSidebarFooterDirective, typeof AXSidebarUserSlotDirective, typeof AXSidebarCollapseSlotDirective], [typeof AXSidebarComponent, typeof AXSidebarUserComponent, typeof AXSidebarCollapseComponent, typeof AXSidebarHeaderDirective, typeof AXSidebarNavigationDirective, typeof AXSidebarFooterDirective, typeof AXSidebarUserSlotDirective, typeof AXSidebarCollapseSlotDirective]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXSidebarModule>;
+}
+
+export { AXSidebarCollapseComponent, AXSidebarCollapseSlotDirective, AXSidebarComponent, AXSidebarFooterDirective, AXSidebarHeaderDirective, AXSidebarModule, AXSidebarNavigationDirective, AXSidebarUserComponent, AXSidebarUserSlotDirective };
+export type { AXSidebarMode };