@acontplus/ng-components 3.0.0 → 3.1.0

package/types/acontplus-ng-components.d.ts

@@ -1,5 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { EventEmitter, TemplateRef, Type, AfterViewInit, OnDestroy, Signal, ViewContainerRef, ElementRef, OnInit, OnChanges, SimpleChanges, NgZone, InjectionToken, QueryList, TrackByFunction, KeyValueChangeRecord, OutputEmitterRef, WritableSignal, ComponentRef, AfterContentInit, PipeTransform } from '@angular/core';
+import { EventEmitter, TemplateRef, InjectionToken, OnDestroy, OnInit, ElementRef, Type, AfterViewInit, Signal, ViewContainerRef, OnChanges, SimpleChanges, NgZone, QueryList, TrackByFunction, KeyValueChangeRecord, OutputEmitterRef, WritableSignal, ComponentRef, AfterContentInit, PipeTransform } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { FormControl, ControlValueAccessor, FormGroup } from '@angular/forms';
@@ -16,8 +18,6 @@ import { MatBadgePosition, MatBadgeSize } from '@angular/material/badge';
 import { MatButtonAppearance } from '@angular/material/button';
 import { ThemePalette } from '@angular/material/core';
 import { TooltipPosition, TooltipTouchGestures } from '@angular/material/tooltip';
-import * as rxjs from 'rxjs';
-import { Observable, Subject } from 'rxjs';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
 import { NgxDatexLocale, NgxDatexTheme, NgxDatexValue } from 'ngx-datex';
@@ -28,6 +28,8 @@ import { DialogRole, CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
 import { DateRange, MatCalendar } from '@angular/material/datepicker';
 import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import * as _acontplus_ng_components from '@acontplus/ng-components';
+import { MatSidenav, MatSidenavContent } from '@angular/material/sidenav';
+import { RouterLinkActive } from '@angular/router';
 
 type AcpAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';
 declare class AcpAlert {
@@ -241,6 +243,422 @@ declare class DynamicCard {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicCard, "acp-dynamic-card", never, { "cardTitle": { "alias": "cardTitle"; "required": false; "isSignal": true; }; "cardSubtitle": { "alias": "cardSubtitle"; "required": false; "isSignal": true; }; "avatarImageUrl": { "alias": "avatarImageUrl"; "required": false; "isSignal": true; }; "isHeaderVisible": { "alias": "isHeaderVisible"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "hasDivider": { "alias": "hasDivider"; "required": false; "isSignal": true; }; "areActionsVisible": { "alias": "areActionsVisible"; "required": false; "isSignal": true; }; "primaryButtonText": { "alias": "primaryButtonText"; "required": false; "isSignal": true; }; "secondaryButtonText": { "alias": "secondaryButtonText"; "required": false; "isSignal": true; }; "primaryButtonIcon": { "alias": "primaryButtonIcon"; "required": false; "isSignal": true; }; "secondaryButtonIcon": { "alias": "secondaryButtonIcon"; "required": false; "isSignal": true; }; "buttonsPosition": { "alias": "buttonsPosition"; "required": false; "isSignal": true; }; }, { "primaryButtonClicked": "primaryButtonClicked"; "secondaryButtonClicked": "secondaryButtonClicked"; "cardClicked": "cardClicked"; "keyDown": "keyDown"; "keyUp": "keyUp"; "keyPress": "keyPress"; }, never, ["*"], true, never>;
 }
 
+/**
+ * Context Menu Types and Interfaces
+ * Defines the API contract for the ContextMenu component
+ */
+/**
+ * Represents a single item in the context menu
+ */
+interface AcpContextMenuItem {
+    /** Unique identifier for the menu item */
+    id?: string;
+    /** Display label for the menu item (not required for separators) */
+    label?: string;
+    /** Material Icon name or SVG icon identifier */
+    icon?: string;
+    /** Badge text or number to display */
+    badge?: string | number;
+    /** Keyboard shortcut text to display (e.g., 'Ctrl+S') */
+    shortcut?: string;
+    /** Whether the menu item is disabled */
+    disabled?: boolean;
+    /** Whether the menu item is visible */
+    visible?: boolean;
+    /** Whether this is a separator line (ignores other properties) */
+    separator?: boolean;
+    /** Nested menu items for submenu support */
+    children?: AcpContextMenuItem[];
+    /** Callback function when item is clicked */
+    command?: (context: AcpContextMenuItemContext) => void;
+    /** Router link for navigation */
+    routerLink?: any;
+    /** External URL to navigate to */
+    url?: string;
+    /** Target for URL navigation (_blank, _self, etc) */
+    target?: string;
+    /** Whether this is a dangerous action (e.g., delete) */
+    danger?: boolean;
+    /** Whether the item is in loading state */
+    loading?: boolean;
+    /** Tooltip text for the menu item */
+    tooltip?: string;
+    /** Custom data associated with the menu item */
+    data?: unknown;
+    /** CSS class to apply to the menu item */
+    class?: string;
+    /** Whether to close menu after executing command */
+    closeOnClick?: boolean;
+}
+/**
+ * Context passed to the command callback
+ */
+interface AcpContextMenuItemContext {
+    /** The menu item that was clicked */
+    item: AcpContextMenuItem;
+    /** The event that triggered the action */
+    event: MouseEvent | KeyboardEvent;
+    /** The element that triggered the context menu */
+    element?: HTMLElement;
+    /** Custom data passed to the context menu */
+    data?: unknown;
+    /** Row data (for DataGrid integration) */
+    row?: unknown;
+    /** Column data (for DataGrid integration) */
+    column?: unknown;
+    /** Row index (for DataGrid integration) */
+    index?: number;
+}
+/**
+ * Configuration for opening a context menu
+ */
+interface AcpContextMenuOpenConfig {
+    /** X coordinate for menu position */
+    x: number;
+    /** Y coordinate for menu position */
+    y: number;
+    /** Element to position relative to (if not using x/y) */
+    element?: HTMLElement;
+    /** Custom data to pass to menu items */
+    data?: unknown;
+    /** Close menu when clicking outside */
+    closeOnOutsideClick?: boolean;
+    /** Close menu when pressing Escape */
+    closeOnEscape?: boolean;
+    /** Custom CSS classes for the menu panel */
+    panelClass?: string | string[];
+    /** Z-index for the menu overlay */
+    zIndex?: number;
+}
+/**
+ * Configuration for the context menu trigger
+ */
+interface AcpContextMenuTriggerConfig {
+    /** Trigger on right-click (contextmenu event) */
+    rightClick?: boolean;
+    /** Trigger on left-click */
+    leftClick?: boolean;
+    /** Trigger on hover */
+    hover?: boolean;
+    /** Delay before opening on hover (ms) */
+    hoverDelay?: number;
+    /** Delay before closing on hover leave (ms) */
+    hoverLeaveDelay?: number;
+    /** Custom data to pass to menu items */
+    data?: unknown;
+    /** Close menu when clicking outside */
+    closeOnOutsideClick?: boolean;
+    /** Close menu when pressing Escape */
+    closeOnEscape?: boolean;
+}
+/**
+ * Position strategy for the context menu
+ */
+type AcpContextMenuPosition = 'auto' | 'above' | 'below' | 'left' | 'right';
+/**
+ * Reference to an open context menu
+ */
+interface AcpContextMenuRef {
+    /** Close the context menu */
+    close(): void;
+    /** Update menu items */
+    updateItems(items: AcpContextMenuItem[]): void;
+    /** Get current menu items */
+    getItems(): AcpContextMenuItem[];
+    /** Update context data */
+    updateData(data: unknown): void;
+    /** Get current context data */
+    getData(): unknown;
+    /** Check if menu is open */
+    isOpen(): boolean;
+}
+
+declare const CONTEXT_MENU_ITEMS: InjectionToken<AcpContextMenuItem[]>;
+declare const CONTEXT_MENU_DATA: InjectionToken<unknown>;
+/**
+ * Service to manage context menu instances
+ * Handles overlay creation, positioning, and lifecycle management
+ */
+declare class AcpContextMenuService {
+    private readonly overlay;
+    private readonly ngZone;
+    private readonly document;
+    private readonly injector;
+    private readonly openMenuRef;
+    private readonly menuItems;
+    private readonly contextData;
+    private readonly itemSelected$;
+    constructor();
+    /**
+     * Open a context menu at the specified position
+     */
+    open(items: AcpContextMenuItem[], config: AcpContextMenuOpenConfig): Promise<AcpContextMenuRef>;
+    /**
+     * Close all open context menus
+     */
+    closeAll(): void;
+    /**
+     * Check if any menu is open
+     */
+    isOpen(): boolean;
+    /**
+     * Get the item selection subject
+     */
+    getItemSelected$(): rxjs.Observable<AcpContextMenuItemContext>;
+    /**
+     * Emit item selection
+     */
+    selectItem(context: AcpContextMenuItemContext): void;
+    /**
+     * Create overlay reference with position strategy
+     */
+    private createOverlay;
+    /**
+     * Create position strategy for the overlay
+     */
+    private createPositionStrategy;
+    /**
+     * Create injector for the menu component
+     */
+    private createInjector;
+    /**
+     * Create menu reference object
+     */
+    private createMenuRef;
+    /**
+     * Setup handler for closing menu on outside click
+     */
+    private setupOutsideClickHandler;
+    /**
+     * Check if click is inside the menu
+     */
+    private isClickInsideMenu;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpContextMenuService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AcpContextMenuService>;
+}
+
+/**
+ * Directive to attach a context menu to any element
+ *
+ * @example
+ * ```html
+ * <div [acpContextMenu]="menuItems" [contextMenuData]="row">
+ *   Right-click me
+ * </div>
+ * ```
+ *
+ * @example
+ * ```html
+ * <div
+ *   [acpContextMenu]="items"
+ *   [contextMenuTrigger]="{ leftClick: true }"
+ *   (contextMenuItemSelected)="onItemSelected($event)">
+ *   Left-click me
+ * </div>
+ * ```
+ */
+declare class AcpContextMenuDirective implements OnDestroy {
+    private readonly elementRef;
+    private readonly contextMenuService;
+    private destroy$;
+    private menuRef;
+    private hoverTimeout;
+    /** Menu items to display */
+    acpContextMenu: AcpContextMenuItem[];
+    /** Custom data to pass to menu items */
+    contextMenuData?: unknown;
+    /** Trigger configuration */
+    contextMenuTrigger: AcpContextMenuTriggerConfig;
+    /** Emitted when a menu item is selected */
+    contextMenuItemSelected: EventEmitter<AcpContextMenuItemContext>;
+    /** Emitted when menu is opened */
+    contextMenuOpened: EventEmitter<AcpContextMenuRef>;
+    /** Emitted when menu is closed */
+    contextMenuClosed: EventEmitter<void>;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Handle right-click
+     */
+    onContextMenu(event: MouseEvent): void;
+    /**
+     * Handle left-click
+     */
+    onClick(event: MouseEvent): void;
+    /**
+     * Handle mouse enter for hover trigger
+     */
+    onMouseEnter(): void;
+    /**
+     * Handle mouse leave for hover trigger
+     */
+    onMouseLeave(): void;
+    /**
+     * Open the context menu
+     */
+    openMenu(x: number, y: number, _event: MouseEvent | KeyboardEvent, rowData?: unknown): void;
+    /**
+     * Close the context menu
+     */
+    closeMenu(): void;
+    /**
+     * Update menu items
+     */
+    updateItems(items: AcpContextMenuItem[]): void;
+    /**
+     * Update context data
+     */
+    updateData(data: unknown): void;
+    /**
+     * Check if menu is open
+     */
+    isOpen(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpContextMenuDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AcpContextMenuDirective, "[acpContextMenu]", ["acpContextMenu"], { "acpContextMenu": { "alias": "acpContextMenu"; "required": false; }; "contextMenuData": { "alias": "contextMenuData"; "required": false; }; "contextMenuTrigger": { "alias": "contextMenuTrigger"; "required": false; }; }, { "contextMenuItemSelected": "contextMenuItemSelected"; "contextMenuOpened": "contextMenuOpened"; "contextMenuClosed": "contextMenuClosed"; }, never, never, true, never>;
+}
+
+/**
+ * Internal component that renders the context menu panel
+ * Not meant to be used directly - use ContextMenuService or ngContextMenu directive
+ */
+declare class AcpContextMenuPanel implements OnInit, OnDestroy {
+    private readonly contextMenuService;
+    private readonly ngZone;
+    private readonly elementRef;
+    menuContainer?: ElementRef;
+    items: _angular_core.WritableSignal<AcpContextMenuItem[]>;
+    contextData: _angular_core.WritableSignal<unknown>;
+    selectedIndex: _angular_core.WritableSignal<number>;
+    expandedIndex: _angular_core.WritableSignal<number>;
+    private destroy$;
+    visibleItems: _angular_core.Signal<AcpContextMenuItem[]>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Handle keyboard navigation
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * Handle item click
+     */
+    onItemClick(item: AcpContextMenuItem, event: MouseEvent): void;
+    /**
+     * Handle item hover
+     */
+    onItemHover(index: number): void;
+    /**
+     * Check if item has children
+     */
+    hasChildren(item: AcpContextMenuItem): boolean;
+    /**
+     * Get item classes
+     */
+    getItemClasses(item: AcpContextMenuItem, index: number): Record<string, boolean>;
+    /**
+     * Select next item
+     */
+    private selectNext;
+    /**
+     * Select previous item
+     */
+    private selectPrevious;
+    /**
+     * Select first item
+     */
+    private selectFirst;
+    /**
+     * Select last item
+     */
+    private selectLast;
+    /**
+     * Expand selected item
+     */
+    private expandSelected;
+    /**
+     * Collapse selected item
+     */
+    private collapseSelected;
+    /**
+     * Activate selected item
+     */
+    private activateSelected;
+    /**
+     * Track by function for items
+     */
+    trackByIndex(index: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpContextMenuPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpContextMenuPanel, "acp-context-menu-panel", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Declarative context menu component
+ *
+ * @example
+ * ```html
+ * <div #trigger>Right-click here</div>
+ * <acp-contextmenu #cm [model]="items" [target]="trigger" (onHide)="onHide()" />
+ *
+ * <button (click)="showMenu(event)">Show Menu</button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <acp-contextmenu #cm [model]="items" (onHide)="onHide()" />
+ *
+ * <button (contextmenu)="onContextMenu($event)">Right-click</button>
+ * ```
+ */
+declare class AcpContextMenu implements OnDestroy {
+    private readonly contextMenuService;
+    private destroy$;
+    private menuRef;
+    /** Menu items to display */
+    readonly model: _angular_core.InputSignal<AcpContextMenuItem[]>;
+    /** Target element to attach the context menu to */
+    readonly target: _angular_core.InputSignal<HTMLElement | undefined>;
+    /** Emitted when menu is hidden/closed */
+    readonly hide: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when a menu item is selected */
+    readonly itemSelected: _angular_core.OutputEmitterRef<AcpContextMenuItemContext>;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Show the context menu at the specified position
+     *
+     * @param event - Mouse event or custom event with clientX/clientY
+     * @param data - Optional data to pass to menu items (e.g., row data)
+     */
+    show(event: MouseEvent | {
+        clientX: number;
+        clientY: number;
+    }, data?: unknown): void;
+    /**
+     * Show the context menu positioned relative to an element
+     *
+     * @param element - Element to position the menu relative to
+     * @param data - Optional data to pass to menu items
+     */
+    showForElement(element: HTMLElement, data?: unknown): void;
+    /**
+     * Close the context menu
+     */
+    close(): void;
+    /**
+     * Check if the menu is currently open
+     */
+    isOpen(): boolean;
+    /**
+     * Update the menu items
+     */
+    updateItems(items: AcpContextMenuItem[]): void;
+    /**
+     * Update the context data
+     */
+    updateData(data: unknown): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpContextMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpContextMenu, "acp-contextmenu", ["acpContextMenu"], { "model": { "alias": "model"; "required": true; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "hide": "hide"; "itemSelected": "itemSelected"; }, never, never, true, never>;
+}
+
 type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full';
 /**
  * @interface MatCustomDialogConfig
@@ -498,7 +916,7 @@ declare class DynamicSelect implements OnInit, OnDestroy {
     clearable: _angular_core.InputSignal<boolean>;
     searchable: _angular_core.InputSignal<boolean>;
     virtualScroll: _angular_core.InputSignal<boolean>;
-    dropdownPosition: _angular_core.InputSignal<"auto" | "bottom" | "top">;
+    dropdownPosition: _angular_core.InputSignal<"auto" | "top" | "bottom">;
     closeOnSelect: _angular_core.InputSignal<boolean>;
     hideSelected: _angular_core.InputSignal<boolean>;
     multiple: _angular_core.InputSignal<boolean>;
@@ -725,12 +1143,16 @@ declare abstract class BaseButton {
     icon: _angular_core.InputSignal<string | undefined>;
     suffixIcon: _angular_core.InputSignal<string | undefined>;
     loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    showProgress: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    progressType: _angular_core.InputSignal<"text" | "spinner">;
+    progressText: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     disableRipple: _angular_core.InputSignalWithTransform<boolean, unknown>;
     variant: _angular_core.InputSignal<AcpButtonVariant>;
     appearance: _angular_core.InputSignal<AcpButtonAppearance>;
     type: _angular_core.InputSignal<AcpButtonType>;
     extended: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    block: _angular_core.InputSignalWithTransform<boolean, unknown>;
     size: _angular_core.InputSignal<"small" | "medium" | "large">;
     text: _angular_core.InputSignal<string | undefined>;
     hasText: _angular_core.Signal<boolean>;
@@ -740,10 +1162,11 @@ declare abstract class BaseButton {
     colorClass: _angular_core.Signal<string>;
     sizeClass: _angular_core.Signal<string>;
     squareClass: _angular_core.Signal<"" | "acp-square">;
+    blockClass: _angular_core.Signal<"" | "acp-block">;
     isDisabled: _angular_core.Signal<boolean>;
     pointerEvents: _angular_core.Signal<"none" | "auto">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BaseButton, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseButton, never, never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "square": { "alias": "square"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "extended": { "alias": "extended"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BaseButton, never, never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "square": { "alias": "square"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "showProgress": { "alias": "showProgress"; "required": false; "isSignal": true; }; "progressType": { "alias": "progressType"; "required": false; "isSignal": true; }; "progressText": { "alias": "progressText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "extended": { "alias": "extended"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "focused": "focused"; "blurred": "blurred"; }, never, never, true, never>;
 }
 
 declare class AcpButton extends BaseButton {
@@ -907,7 +1330,7 @@ interface DataGridColumnButton<T = any> {
     color?: ThemePalette;
     class?: string;
     disabled?: boolean | ((rowData: T) => boolean);
-    click?: (rowData: T) => void;
+    click?: (rowData: T, event: Event) => void;
     iif?: (rowData: T) => boolean;
     pop?: string | Observable<string> | DataGridColumnButtonPop;
     tooltip?: string | Observable<string> | DataGridColumnButtonTooltip;
@@ -1006,7 +1429,7 @@ interface DataGridMenuItem<T = any> {
     svgIcon?: string;
     class?: string;
     disabled?: boolean | ((rowData: T) => boolean);
-    click?: (rowData: T) => void;
+    click?: (rowData: T, event: Event) => void;
     iif?: (rowData: T) => boolean;
     children?: DataGridMenuItem[];
 }
@@ -1055,34 +1478,6 @@ declare class TabulatorTable implements OnChanges, AfterViewInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabulatorTable, "acp-tabulator-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "dataTree": { "alias": "dataTree"; "required": false; "isSignal": true; }; "dataTreeChildField": { "alias": "dataTreeChildField"; "required": false; "isSignal": true; }; "dataTreeStartExpanded": { "alias": "dataTreeStartExpanded"; "required": false; "isSignal": true; }; "dataTreeSelectPropagate": { "alias": "dataTreeSelectPropagate"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "reactiveData": { "alias": "reactiveData"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "selectableRows": { "alias": "selectableRows"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; "rowFormatter": { "alias": "rowFormatter"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "rowDeleted": "rowDeleted"; "cellEdited": "cellEdited"; "rowClick": "rowClick"; "rowSelected": "rowSelected"; "tableReady": "tableReady"; }, never, never, true, never>;
 }
 
-/**
- * A theme toggle button component that allows users to switch between
- * light and dark modes. Follows WAI-ARIA best practices for toggle buttons.
- */
-declare class ThemeToggle {
-    private readonly themeSwitcher;
-    /** Icon to display when in dark mode (clicking will switch to light) */
-    readonly lightModeIcon: _angular_core.InputSignal<string>;
-    /** Icon to display when in light mode (clicking will switch to dark) */
-    readonly darkModeIcon: _angular_core.InputSignal<string>;
-    /** Accessible label for when in dark mode */
-    readonly lightModeLabel: _angular_core.InputSignal<string>;
-    /** Accessible label for when in light mode */
-    readonly darkModeLabel: _angular_core.InputSignal<string>;
-    /** Test ID for automated testing */
-    readonly testId: _angular_core.InputSignal<string>;
-    /** Current dark mode state as a signal */
-    protected readonly isDarkMode: _angular_core.Signal<boolean>;
-    /** Computed icon based on current theme */
-    protected readonly currentIcon: _angular_core.Signal<string>;
-    /** Computed accessible label based on current theme */
-    protected readonly currentLabel: _angular_core.Signal<string>;
-    /** Toggle between dark and light mode */
-    toggleDarkMode(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeToggle, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeToggle, "acp-theme-toggle", never, { "lightModeIcon": { "alias": "lightModeIcon"; "required": false; "isSignal": true; }; "darkModeIcon": { "alias": "darkModeIcon"; "required": false; "isSignal": true; }; "lightModeLabel": { "alias": "lightModeLabel"; "required": false; "isSignal": true; }; "darkModeLabel": { "alias": "darkModeLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 declare class AcpGridSelectableCell {
     ctrlKeyPressed: boolean;
     shiftKeyPressed: boolean;
@@ -3016,6 +3411,100 @@ declare class AcpCheckboxGroup implements AfterViewInit, OnDestroy, ControlValue
     static ngAcceptInputType_disabled: unknown;
 }
 
+/**
+ * Card appearance variants
+ */
+type AcpCardAppearance = 'default' | 'outlined' | 'elevated' | 'filled' | 'interactive' | 'compact';
+/**
+ * Card elevation levels (Material Design)
+ */
+type AcpCardElevation = 0 | 1 | 2 | 3 | 4 | 5;
+/**
+ * Card padding options
+ */
+type AcpCardPadding = 'none' | 'small' | 'medium' | 'large';
+/**
+ * Card background color variants (Material Design)
+ */
+type AcpCardBackgroundColor = 'primary' | 'primary-container' | 'secondary' | 'secondary-container' | 'error' | 'error-container' | 'surface' | 'surface-variant' | 'surface-container-highest' | 'surface-container-high' | 'surface-container' | 'surface-container-low' | 'surface-container-lowest' | 'inverse-surface' | 'disabled-bg';
+/**
+ * Card image aspect ratio
+ */
+type AcpCardImageRatio = '1:1' | '4:3' | '16:9' | '21:9' | '3:2' | '3:4';
+/**
+ * Card configuration interface
+ */
+interface AcpCardConfig {
+    appearance?: AcpCardAppearance;
+    elevation?: AcpCardElevation;
+    rounded?: boolean | number;
+    hover?: boolean;
+    clickable?: boolean;
+    outlined?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    padding?: AcpCardPadding;
+    imageRatio?: AcpCardImageRatio;
+    fullHeight?: boolean;
+    fullWidth?: boolean;
+}
+/**
+ * Card badge configuration
+ */
+interface AcpCardBadge {
+    content: string | number;
+    color?: 'primary' | 'secondary' | 'accent' | 'error' | 'success' | 'warning' | 'info';
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+}
+/**
+ * Pass Through options for card sections
+ * Allows customization of classes, styles, and attributes for each section
+ */
+interface AcpCardPassThroughSection {
+    class?: string | string[] | Record<string, boolean>;
+    style?: Record<string, string>;
+    [key: string]: any;
+}
+interface AcpCardPassThroughOptions {
+    root?: AcpCardPassThroughSection | undefined;
+    header?: AcpCardPassThroughSection | undefined;
+    media?: AcpCardPassThroughSection | undefined;
+    avatar?: AcpCardPassThroughSection | undefined;
+    title?: AcpCardPassThroughSection | undefined;
+    subtitle?: AcpCardPassThroughSection | undefined;
+    content?: AcpCardPassThroughSection | undefined;
+    actions?: AcpCardPassThroughSection | undefined;
+    footer?: AcpCardPassThroughSection | undefined;
+}
+
+declare class AcpCard {
+    readonly appearance: _angular_core.InputSignal<AcpCardAppearance>;
+    readonly elevation: _angular_core.InputSignal<AcpCardElevation>;
+    readonly rounded: _angular_core.InputSignal<number | boolean>;
+    readonly hover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly outlined: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly padding: _angular_core.InputSignal<AcpCardPadding>;
+    readonly imageRatio: _angular_core.InputSignal<AcpCardImageRatio>;
+    readonly fullHeight: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly backgroundColor: _angular_core.InputSignal<AcpCardBackgroundColor | undefined>;
+    readonly passThrough: _angular_core.InputSignal<AcpCardPassThroughOptions>;
+    headerTemplate: TemplateRef<any>;
+    mediaTemplate: TemplateRef<any>;
+    avatarTemplate: TemplateRef<any>;
+    titleTemplate: TemplateRef<any>;
+    subtitleTemplate: TemplateRef<any>;
+    actionsTemplate: TemplateRef<any>;
+    footerTemplate: TemplateRef<any>;
+    get role(): string;
+    get tabindex(): string | null;
+    get ariaDisabled(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpCard, "acp-card", never, { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "imageRatio": { "alias": "imageRatio"; "required": false; "isSignal": true; }; "fullHeight": { "alias": "fullHeight"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "passThrough": { "alias": "passThrough"; "required": false; "isSignal": true; }; }, {}, ["headerTemplate", "mediaTemplate", "avatarTemplate", "titleTemplate", "subtitleTemplate", "actionsTemplate", "footerTemplate"], ["*"], true, never>;
+}
+
 type AcpKpiCardColor = 'primary' | 'secondary' | 'success' | 'success-light' | 'warning' | 'warning-light' | 'error' | 'error-light' | 'info' | 'info-light' | 'neutral' | 'white' | 'custom';
 type AcpKpiCardVariant = 'default' | 'elevated' | 'outlined' | 'filled' | 'tonal';
 type AcpKpiCardSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -3118,6 +3607,1075 @@ declare const KPI_CARD_TOKENS: {
     TREND_NONE: string;
 };
 
+declare class Branding {
+    readonly logo: _angular_core.InputSignal<string | null>;
+    readonly name: _angular_core.InputSignal<string | null>;
+    readonly showName: _angular_core.InputSignal<boolean>;
+    readonly link: _angular_core.InputSignal<string>;
+    readonly brandingClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Branding, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Branding, "acp-branding", never, { "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "showName": { "alias": "showName"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; }, { "brandingClick": "brandingClick"; }, never, never, true, never>;
+}
+
+/**
+ * AcpHeader Component
+ *
+ * Enterprise-grade header component following compound components pattern.
+ * This is a layout-only component that provides structure for header regions.
+ *
+ * @example
+ * ```html
+ * <acp-header [elevated]="true" [sticky]="true">
+ *   <acp-header-start>
+ *     <button mat-icon-button>menu</button>
+ *   </acp-header-start>
+ *   <acp-header-branding [logo]="logo" [name]="name" />
+ *   <acp-header-center>
+ *     <span>Center content</span>
+ *   </acp-header-center>
+ *   <acp-header-end>
+ *     <acp-header-actions [actions]="actions" />
+ *     <acp-user-menu [user]="user" />
+ *   </acp-header-end>
+ * </acp-header>
+ * ```
+ */
+declare class AcpHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeader, "acp-header", never, {}, {}, never, ["acp-header-start", "acp-header-branding", "acp-header-center", "acp-header-end"], true, never>;
+}
+
+/**
+ * AcpHeaderStart Component
+ *
+ * Left region of the header. Typically contains navigation toggle,
+ * back button, or other primary actions.
+ *
+ * @example
+ * ```html
+ * <acp-header-start>
+ *   <button mat-icon-button (click)="toggleSidenav()">
+ *     <mat-icon>menu</mat-icon>
+ *   </button>
+ * </acp-header-start>
+ * ```
+ */
+declare class AcpHeaderStart {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderStart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderStart, "acp-header-start", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * AcpHeaderBranding Component
+ *
+ * Branding region of the header. Renders logo and/or app name.
+ *
+ * @example
+ * ```html
+ * <acp-header-branding
+ *   [logo]="logo"
+ *   [name]="appName"
+ *   [showName]="true"
+ *   [link]="'/'"
+ *   (selected)="onBrandingClick()"
+ * />
+ * ```
+ */
+declare class AcpHeaderBranding {
+    /**
+     * URL or path to the logo image.
+     */
+    readonly logo: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Brand name to display.
+     */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to show the brand name.
+     * @default true
+     */
+    readonly showName: _angular_core.InputSignal<boolean>;
+    /**
+     * URL to navigate to when branding is clicked.
+     * @default '/'
+     */
+    readonly link: _angular_core.InputSignal<string>;
+    /**
+     * Event emitted when branding is selected.
+     */
+    readonly selected: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderBranding, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderBranding, "acp-header-branding", never, { "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "showName": { "alias": "showName"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; }, { "selected": "selected"; }, never, never, true, never>;
+}
+
+/**
+ * AcpHeaderCenter Component
+ *
+ * Center region of the header. Typically contains breadcrumb,
+ * workspace selector, or page title.
+ *
+ * @example
+ * ```html
+ * <acp-header-center>
+ *   <acp-header-breadcrumb [items]="breadcrumbs" />
+ * </acp-header-center>
+ * ```
+ */
+declare class AcpHeaderCenter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderCenter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderCenter, "acp-header-center", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * AcpHeaderEnd Component
+ *
+ * Right region of the header. Typically contains search, notifications,
+ * user menu, theme switcher, and other secondary actions.
+ *
+ * @example
+ * ```html
+ * <acp-header-end>
+ *   <acp-header-search (search)="onSearch($event)" />
+ *   <acp-header-actions [actions]="actions" />
+ *   <acp-header-user-menu [user]="user" />
+ * </acp-header-end>
+ * ```
+ */
+declare class AcpHeaderEnd {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderEnd, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderEnd, "acp-header-end", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * AcpHeader Component Types
+ *
+ * Type definitions for the AcpHeader component following SOLID principles
+ * and Clean Architecture for enterprise-grade component libraries.
+ */
+/**
+ * Main configuration object for the AcpHeader component.
+ * All configuration is centralized in this single interface to follow
+ * Interface Segregation Principle and keep the API small and scalable.
+ */
+interface AcpHeaderConfig {
+    /**
+     * Array of actions to display in the header.
+     * Actions are rendered in their specified position (left or right).
+     */
+    actions?: AcpHeaderAction[];
+    /**
+     * Branding configuration for the header.
+     * If not provided, no branding is displayed.
+     */
+    branding?: AcpHeaderBrandingConfig;
+    /**
+     * User menu configuration.
+     * If not provided, no user menu is displayed.
+     */
+    userMenu?: AcpHeaderUserMenuConfig;
+    /**
+     * Whether to show elevation/shadow on the header.
+     * @default false
+     */
+    elevation?: boolean;
+    /**
+     * Whether the header should stick to the top of the viewport.
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * Theme variant for the header.
+     * @default 'auto'
+     */
+    theme?: 'light' | 'dark' | 'auto';
+}
+/**
+ * Represents an action button in the header.
+ * Actions can be placed in the left or right region of the header.
+ */
+interface AcpHeaderAction {
+    /**
+     * Unique identifier for the action.
+     * Used in event emissions to identify which action was clicked.
+     */
+    id: string;
+    /**
+     * Material Design icon name to display.
+     * If not provided, the label is used instead.
+     */
+    icon?: string;
+    /**
+     * Text label for the action.
+     * Used when icon is not provided or for accessibility.
+     */
+    label?: string;
+    /**
+     * Tooltip text to display on hover.
+     */
+    tooltip?: string;
+    /**
+     * Position where the action should be rendered.
+     * @default 'right'
+     */
+    position?: 'left' | 'right';
+    /**
+     * Whether the action is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the action is visible.
+     * @default true
+     */
+    visible?: boolean;
+    /**
+     * Optional badge to display on the action button.
+     * Can be a number (for notification count) or a string.
+     */
+    badge?: number | string;
+    click?: ($event?: MouseEvent, action?: AcpHeaderAction) => void;
+}
+/**
+ * Configuration for the branding section of the header.
+ */
+interface AcpHeaderBrandingConfig {
+    /**
+     * URL or path to the logo image.
+     */
+    logo?: string;
+    /**
+     * Brand name to display.
+     */
+    name?: string;
+    /**
+     * Whether to show the brand name.
+     * @default true
+     */
+    showName?: boolean;
+    /**
+     * URL to navigate to when branding is clicked.
+     * @default '/'
+     */
+    link?: string;
+}
+/**
+ * Configuration for the user menu section of the header.
+ */
+interface AcpHeaderUserMenuConfig {
+    /**
+     * URL or path to the user avatar image.
+     */
+    avatar?: string;
+    /**
+     * User's display name.
+     */
+    name?: string;
+    /**
+     * User's email address.
+     */
+    email?: string;
+    /**
+     * Menu items to display in the user menu dropdown.
+     */
+    items?: AcpHeaderUserMenuItem[];
+}
+/**
+ * Represents a single item in the user menu.
+ */
+interface AcpHeaderUserMenuItem {
+    /**
+     * Unique identifier for the menu item.
+     */
+    id: string;
+    /**
+     * Display label for the menu item.
+     */
+    label: string;
+    /**
+     * Material Design icon name to display.
+     */
+    icon?: string;
+    /**
+     * Whether the menu item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to display a divider below this item.
+     * @default false
+     */
+    divider?: boolean;
+    /**
+     * Callback function to execute when the item is clicked.
+     * If provided, the item click event is not emitted.
+     */
+    action?: () => void;
+}
+/**
+ * Event payload emitted when a header action is clicked.
+ */
+interface AcpHeaderActionEvent {
+    /**
+     * The ID of the action that was clicked.
+     */
+    actionId: string;
+    /**
+     * The event name associated with the action.
+     */
+    event: string;
+    /**
+     * Optional data associated with the action.
+     */
+    data?: any;
+}
+/**
+ * Event payload emitted when a user menu item is clicked.
+ */
+interface AcpHeaderUserMenuItemEvent {
+    /**
+     * The ID of the menu item that was clicked.
+     */
+    itemId: string;
+    /**
+     * The menu item that was clicked.
+     */
+    item: AcpHeaderUserMenuItem;
+}
+
+/**
+ * AcpHeaderActions Component
+ *
+ * Helper component for rendering action buttons.
+ *
+ * @example
+ * ```html
+ * <acp-header-actions
+ *   [actions]="actions"
+ *   (action)="onAction($event)"
+ * />
+ * ```
+ */
+declare class AcpHeaderActions {
+    /**
+     * Array of actions to display. Can be a signal or a plain array.
+     */
+    readonly actions: _angular_core.InputSignal<AcpHeaderAction[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderActions, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderActions, "acp-header-actions", never, { "actions": { "alias": "actions"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Notification item interface
+ */
+interface AcpNotificationItem {
+    id: string;
+    title: string;
+    message?: string;
+    timestamp?: Date;
+    read?: boolean;
+    icon?: string;
+}
+/**
+ * AcpHeaderNotifications Component
+ *
+ * Notification center for the header with badge and dropdown menu.
+ *
+ * @example
+ * ```html
+ * <acp-header-notifications
+ *   [notifications]="notifications"
+ *   [unreadCount]="unreadCount"
+ *   (notificationClick)="onNotificationClick($event)"
+ * />
+ * ```
+ */
+declare class AcpHeaderNotifications {
+    /**
+     * Array of notification items.
+     */
+    readonly notifications: _angular_core.InputSignal<AcpNotificationItem[]>;
+    /**
+     * Number of unread notifications.
+     */
+    readonly unreadCount: _angular_core.InputSignal<number>;
+    /**
+     * Event emitted when a notification is clicked.
+     */
+    readonly notificationClick: _angular_core.OutputEmitterRef<AcpNotificationItem>;
+    handleNotificationClick(notification: AcpNotificationItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderNotifications, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderNotifications, "acp-header-notifications", never, { "notifications": { "alias": "notifications"; "required": false; "isSignal": true; }; "unreadCount": { "alias": "unreadCount"; "required": false; "isSignal": true; }; }, { "notificationClick": "notificationClick"; }, never, never, true, never>;
+}
+
+/**
+ * Workspace item interface
+ */
+interface AcpWorkspaceItem {
+    id: string;
+    name: string;
+    icon?: string;
+    active?: boolean;
+}
+/**
+ * AcpHeaderWorkspace Component
+ *
+ * Workspace selector for the header.
+ *
+ * @example
+ * ```html
+ * <acp-header-workspace
+ *   [workspaces]="workspaces"
+ *   [currentWorkspace]="currentWorkspace"
+ *   (workspaceChange)="onWorkspaceChange($event)"
+ * />
+ * ```
+ */
+declare class AcpHeaderWorkspace {
+    /**
+     * Array of available workspaces.
+     */
+    readonly workspaces: _angular_core.InputSignal<AcpWorkspaceItem[]>;
+    /**
+     * Currently selected workspace.
+     */
+    readonly currentWorkspace: _angular_core.InputSignal<AcpWorkspaceItem | undefined>;
+    /**
+     * Event emitted when workspace is changed.
+     */
+    readonly workspaceChange: _angular_core.OutputEmitterRef<AcpWorkspaceItem>;
+    handleWorkspaceChange(workspace: AcpWorkspaceItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderWorkspace, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderWorkspace, "acp-header-workspace", never, { "workspaces": { "alias": "workspaces"; "required": false; "isSignal": true; }; "currentWorkspace": { "alias": "currentWorkspace"; "required": false; "isSignal": true; }; }, { "workspaceChange": "workspaceChange"; }, never, never, true, never>;
+}
+
+/**
+ * Language item interface
+ */
+interface AcpLanguageItem {
+    code: string;
+    name: string;
+    flag?: string;
+    active?: boolean;
+}
+/**
+ * AcpHeaderLanguage Component
+ *
+ * Language selector for the header.
+ *
+ * @example
+ * ```html
+ * <acp-header-language
+ *   [languages]="languages"
+ *   [currentLanguage]="currentLanguage"
+ *   (languageChange)="onLanguageChange($event)"
+ * />
+ * ```
+ */
+declare class AcpHeaderLanguage {
+    /**
+     * Array of available languages.
+     */
+    readonly languages: _angular_core.InputSignal<AcpLanguageItem[]>;
+    /**
+     * Currently selected language.
+     */
+    readonly currentLanguage: _angular_core.InputSignal<AcpLanguageItem | undefined>;
+    /**
+     * Event emitted when language is changed.
+     */
+    readonly languageChange: _angular_core.OutputEmitterRef<AcpLanguageItem>;
+    handleLanguageChange(language: AcpLanguageItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderLanguage, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderLanguage, "acp-header-language", never, { "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "currentLanguage": { "alias": "currentLanguage"; "required": false; "isSignal": true; }; }, { "languageChange": "languageChange"; }, never, never, true, never>;
+}
+
+/**
+ * Theme variant
+ */
+type AcpThemeVariant = 'light' | 'dark' | 'auto';
+/**
+ * AcpHeaderTheme Component
+ *
+ * Theme switcher for the header.
+ *
+ * @example
+ * ```html
+ * <acp-header-theme
+ *   [currentTheme]="currentTheme"
+ *   (themeChange)="onThemeChange($event)"
+ * />
+ * ```
+ */
+declare class AcpHeaderTheme {
+    /**
+     * Currently selected theme.
+     */
+    readonly currentTheme: _angular_core.InputSignal<AcpThemeVariant>;
+    /**
+     * Event emitted when theme is changed.
+     */
+    readonly themeChange: _angular_core.OutputEmitterRef<AcpThemeVariant>;
+    private readonly themeCycle;
+    getThemeIcon: _angular_core.Signal<"light_mode" | "dark_mode" | "contrast">;
+    toggleTheme(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpHeaderTheme, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpHeaderTheme, "acp-header-theme", never, { "currentTheme": { "alias": "currentTheme"; "required": false; "isSignal": true; }; }, { "themeChange": "themeChange"; }, never, never, true, never>;
+}
+
+/**
+ * A theme toggle button component that allows users to switch between
+ * light and dark modes. Follows WAI-ARIA best practices for toggle buttons.
+ */
+declare class ThemeToggle {
+    private readonly themeSwitcher;
+    /** Icon to display when in dark mode (clicking will switch to light) */
+    readonly lightModeIcon: _angular_core.InputSignal<string>;
+    /** Icon to display when in light mode (clicking will switch to dark) */
+    readonly darkModeIcon: _angular_core.InputSignal<string>;
+    /** Accessible label for when in dark mode */
+    readonly lightModeLabel: _angular_core.InputSignal<string>;
+    /** Accessible label for when in light mode */
+    readonly darkModeLabel: _angular_core.InputSignal<string>;
+    /** Test ID for automated testing */
+    readonly testId: _angular_core.InputSignal<string>;
+    /** Current dark mode state as a signal */
+    protected readonly isDarkMode: _angular_core.Signal<boolean>;
+    /** Computed icon based on current theme */
+    protected readonly currentIcon: _angular_core.Signal<string>;
+    /** Computed accessible label based on current theme */
+    protected readonly currentLabel: _angular_core.Signal<string>;
+    /** Toggle between dark and light mode */
+    toggleDarkMode(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThemeToggle, "acp-theme-toggle", never, { "lightModeIcon": { "alias": "lightModeIcon"; "required": false; "isSignal": true; }; "darkModeIcon": { "alias": "darkModeIcon"; "required": false; "isSignal": true; }; "lightModeLabel": { "alias": "lightModeLabel"; "required": false; "isSignal": true; }; "darkModeLabel": { "alias": "darkModeLabel"; "required": false; "isSignal": true; }; "testId": { "alias": "testId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Represents a single item in the user menu.
+ */
+interface UserMenuItem {
+    /**
+     * Unique identifier for the menu item.
+     */
+    id: string;
+    /**
+     * Display label for the menu item.
+     */
+    label: string;
+    /**
+     * Material Design icon name.
+     */
+    icon: string;
+    /**
+     * Optional badge number (e.g., notification count).
+     */
+    badge?: number;
+    /**
+     * Optional router link for navigation.
+     */
+    routerLink?: string;
+    /**
+     * Whether this item represents a dangerous action (e.g., logout).
+     * Affects styling (red color).
+     */
+    danger?: boolean;
+    /**
+     * Optional click handler for custom actions.
+     */
+    click?: (event: MouseEvent, item: UserMenuItem) => void;
+}
+/**
+ * User profile information displayed in the menu header.
+ */
+interface UserProfile {
+    /**
+     * User's full name.
+     */
+    name: string;
+    /**
+     * User's email address.
+     */
+    email: string;
+    /**
+     * URL to user's avatar image.
+     */
+    avatar: string;
+    /**
+     * User's plan/subscription tier (e.g., 'Pro', 'Free').
+     */
+    plan?: string;
+}
+/**
+ * Event emitted when a menu item is selected.
+ */
+interface UserMenuSelectedEvent {
+    /**
+     * The selected menu item.
+     */
+    item: UserMenuItem;
+}
+
+declare class UserMenu {
+    /**
+     * User profile information to display in the menu header.
+     */
+    readonly user: _angular_core.InputSignal<UserProfile>;
+    /**
+     * Menu items to display.
+     */
+    readonly items: _angular_core.InputSignal<UserMenuItem[]>;
+    imageUrl: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UserMenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UserMenu, "acp-user-menu", never, { "user": { "alias": "user"; "required": true; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class UserPanel {
+    readonly avatar: _angular_core.InputSignal<string | null>;
+    readonly name: _angular_core.InputSignal<string>;
+    readonly email: _angular_core.InputSignal<string>;
+    readonly profileLink: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UserPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UserPanel, "acp-user-panel", never, { "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "profileLink": { "alias": "profileLink"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface MenuTag {
+    color: string;
+    value: string;
+}
+interface MenuPermissions {
+    only?: string | string[];
+    except?: string | string[];
+}
+interface MenuItem {
+    route: string;
+    name: string;
+    type: 'link' | 'sub' | 'extLink' | 'extTabLink';
+    icon?: string;
+    label?: MenuTag;
+    badge?: MenuTag;
+    children?: MenuItem[];
+    permissions?: MenuPermissions;
+}
+
+declare class NavAccordionItemDirective implements OnInit, OnDestroy {
+    private readonly nav;
+    readonly route: _angular_core.InputSignal<string>;
+    expanded: _angular_core.WritableSignal<boolean>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    toggle(): void;
+    setExpanded(value: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavAccordionItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NavAccordionItemDirective, "[acpNavAccordionItem]", ["acpNavAccordionItem"], { "route": { "alias": "route"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class NavAccordionDirective {
+    private readonly router;
+    private navItems;
+    constructor();
+    addItem(item: NavAccordionItemDirective): void;
+    removeItem(item: NavAccordionItemDirective): void;
+    closeOtherItems(openedItem: NavAccordionItemDirective): void;
+    checkOpenedItems(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavAccordionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NavAccordionDirective, "[acpNavAccordion]", ["acpNavAccordion"], {}, {}, never, never, true, never>;
+}
+
+declare class NavAccordionToggleDirective {
+    private readonly navItem;
+    onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NavAccordionToggleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NavAccordionToggleDirective, "[acpNavAccordionToggle]", ["acpNavAccordionToggle"], {}, {}, never, never, true, never>;
+}
+
+declare class SidemenuComponent {
+    readonly menuItems: _angular_core.InputSignal<MenuItem[]>;
+    buildRoute(routeArr: string[]): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidemenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidemenuComponent, "acp-sidemenu", never, { "menuItems": { "alias": "menuItems"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * AcpSidebar Component
+ *
+ * Enterprise-grade sidebar component following compound components pattern.
+ * This is a layout-only component that provides structure for sidebar regions.
+ *
+ * @example
+ * ```html
+ * <acp-sidebar [collapsed]="collapsed" [mode]="mode">
+ *   <acp-sidebar-header>
+ *     <acp-sidebar-branding>
+ *       <acp-sidebar-branding-content [logo]="logo" [name]="name" />
+ *     </acp-sidebar-branding>
+ *     <button mat-icon-button (click)="toggle()">menu</button>
+ *   </acp-sidebar-header>
+ *
+ *   <acp-sidebar-user>
+ *     <acp-sidebar-user-content [avatar]="avatar" [name]="name" [email]="email" />
+ *   </acp-sidebar-user>
+ *
+ *   <acp-sidebar-content>
+ *     <acp-sidemenu [menuItems]="menuItems" />
+ *   </acp-sidebar-content>
+ * </acp-sidebar>
+ * ```
+ */
+declare class AcpSidebar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpSidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpSidebar, "acp-sidebar", never, {}, {}, never, ["acp-sidebar-header", "acp-sidebar-user", "acp-sidebar-content"], true, never>;
+}
+
+/**
+ * AcpSidebarHeader Component
+ *
+ * Top region of the sidebar. Typically contains branding, toggle button,
+ * and close button for mobile.
+ *
+ * @example
+ * ```html
+ * <acp-sidebar-header>
+ *   <acp-sidebar-branding>
+ *     <acp-sidebar-branding-content [logo]="logo" [name]="name" />
+ *   </acp-sidebar-branding>
+ *   <button mat-icon-button (click)="toggle()">menu</button>
+ * </acp-sidebar-header>
+ * ```
+ */
+declare class AcpSidebarHeader {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpSidebarHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpSidebarHeader, "acp-sidebar-header", never, {}, {}, never, ["[start]", "[end]"], true, never>;
+}
+
+declare class AcpSidebarBranding {
+    readonly showName: _angular_core.InputSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpSidebarBranding, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpSidebarBranding, "acp-sidebar-branding", never, { "showName": { "alias": "showName"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AcpSidebarUserPanel {
+    /**
+     * User avatar URL.
+     * @default ''
+     */
+    readonly avatar: _angular_core.InputSignal<string>;
+    /**
+     * User name.
+     * @default ''
+     */
+    readonly name: _angular_core.InputSignal<string>;
+    /**
+     * User email.
+     * @default ''
+     */
+    readonly email: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpSidebarUserPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpSidebarUserPanel, "acp-sidebar-user-panel", never, { "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * AcpSidebarContent Component
+ *
+ * Main content region of the sidebar. Typically contains the sidemenu
+ * with navigation items.
+ *
+ * @example
+ * ```html
+ * <acp-sidebar-content>
+ *   <acp-sidemenu [menuItems]="menuItems" />
+ * </acp-sidebar-content>
+ * ```
+ */
+declare class AcpSidebarContent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpSidebarContent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpSidebarContent, "acp-sidebar-content", never, {}, {}, never, ["[user-panel]", "[sidemenu]"], true, never>;
+}
+
+declare class AcpSidebarToggle {
+    readonly showToggle: _angular_core.InputSignal<boolean>;
+    readonly toggleChecked: _angular_core.InputSignal<boolean>;
+    readonly toggleCollapsed: _angular_core.OutputEmitterRef<void>;
+    readonly closeSidenav: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpSidebarToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpSidebarToggle, "acp-sidebar-toggle", never, { "showToggle": { "alias": "showToggle"; "required": false; "isSignal": true; }; "toggleChecked": { "alias": "toggleChecked"; "required": false; "isSignal": true; }; }, { "toggleCollapsed": "toggleCollapsed"; "closeSidenav": "closeSidenav"; }, never, never, true, never>;
+}
+
+/**
+ * `acpShellHeader` — replaces the entire header region.
+ *
+ * @example
+ * ```html
+ * <acp-shell-layout>
+ *   <ng-template acpShellHeader>
+ *     <app-custom-header />
+ *   </ng-template>
+ * </acp-shell-layout>
+ * ```
+ */
+declare class AcpShellSlotHeader {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpShellSlotHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AcpShellSlotHeader, "ng-template[acpShellHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `acpShellSidebar` — replaces the entire sidebar region.
+ *
+ * @example
+ * ```html
+ * <acp-shell-layout>
+ *   <ng-template acpShellSidebar>
+ *     <app-custom-sidebar />
+ *   </ng-template>
+ * </acp-shell-layout>
+ * ```
+ */
+declare class AcpShellSlotSidebar {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpShellSlotSidebar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AcpShellSlotSidebar, "ng-template[acpShellSidebar]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `acpShellSidebarFooter` — projects content at the bottom of the sidebar
+ * without replacing the whole sidebar (e.g. version badge, help link).
+ *
+ * @example
+ * ```html
+ * <acp-shell-layout>
+ *   <ng-template acpShellSidebarFooter>
+ *     <app-version-badge />
+ *   </ng-template>
+ * </acp-shell-layout>
+ * ```
+ */
+declare class AcpShellSlotSidebarFooter {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpShellSlotSidebarFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AcpShellSlotSidebarFooter, "ng-template[acpShellSidebarFooter]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `acpShellToolbar` — projects extra content into the header toolbar
+ * alongside the default actions (e.g. breadcrumb, search bar).
+ *
+ * @example
+ * ```html
+ * <acp-shell-layout>
+ *   <ng-template acpShellToolbar>
+ *     <app-breadcrumb />
+ *   </ng-template>
+ * </acp-shell-layout>
+ * ```
+ */
+declare class AcpShellSlotToolbar {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpShellSlotToolbar, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AcpShellSlotToolbar, "ng-template[acpShellToolbar]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * `acpShellTopmenu` — projects horizontal top navigation into the page content.
+ *
+ * @example
+ * ```html
+ * <acp-shell-layout>
+ *   <ng-template acpShellTopmenu>
+ *     <app-topmenu />
+ *   </ng-template>
+ * </acp-shell-layout>
+ * ```
+ */
+declare class AcpShellSlotTopmenu {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpShellSlotTopmenu, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AcpShellSlotTopmenu, "ng-template[acpShellTopmenu]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Navigation position of the sidenav.
+ * - `side`: sidebar always visible alongside content
+ * - `top`:  navigation rendered in a top menu bar instead
+ */
+type AcpNavPos = 'side' | 'top';
+/**
+ * Position of the header relative to the sidenav container.
+ * - `above`: header spans full width above the sidenav container
+ * - `fixed`: header is sticky inside the content area
+ * - `below`: header scrolls with content
+ */
+type AcpHeaderPos = 'above' | 'fixed' | 'below' | 'static';
+/**
+ * Layout direction (RTL/LTR support).
+ */
+type AcpDir = 'ltr' | 'rtl';
+
+/**
+ * AcpShellLayout
+ *
+ * Pure structural shell — provides the layout skeleton (header region,
+ * sidenav, content area) with named ng-content slots so the host app
+ * can project any component into any region without modifying the shell.
+ *
+ * ## Slot directives
+ * - `acpShellHeader`        — replaces the entire header bar
+ * - `acpShellSidebar`       — replaces the entire sidebar body
+ * - `acpShellSidebarFooter` — appended at the bottom of the sidebar
+ * - `acpShellToolbar`       — injected inside the header center region
+ *
+ * ## Default content slot
+ * Plain children (e.g. `<router-outlet />`) are projected into the
+ * main page-content area.
+ *
+ * @example
+ * ```html
+ * <acp-shell-layout
+ *   [navPos]="options().navPos"
+ *   [headerPos]="options().headerPos"
+ *   [sidenavOpened]="options().sidenavOpened"
+ *   [sidenavCollapsed]="options().sidenavCollapsed"
+ *   [isMobile]="isMobile()"
+ *   [dir]="options().dir"
+ *   (sidenavOpenedChange)="onSidenavOpenedChange($event)"
+ * >
+ *   <!-- header slot -->
+ *   <ng-template acpShellHeader>
+ *     <app-header (toggleSidenav)="layout.toggleSidenav()" />
+ *   </ng-template>
+ *
+ *   <!-- sidebar slot -->
+ *   <ng-template acpShellSidebar>
+ *     <app-sidebar />
+ *   </ng-template>
+ *
+ *   <!-- optional: footer inside sidebar -->
+ *   <ng-template acpShellSidebarFooter>
+ *     <app-version-badge />
+ *   </ng-template>
+ *
+ *   <!-- page content -->
+ *   <router-outlet />
+ * </acp-shell-layout>
+ * ```
+ */
+declare class AcpShellLayout {
+    /** Reference to the primary MatSidenav — exposed so the app can toggle it. */
+    readonly sidenav: _angular_core.Signal<MatSidenav>;
+    /** Reference to the MatSidenavContent — exposed for scroll control. */
+    readonly content: _angular_core.Signal<MatSidenavContent>;
+    /** Custom header projected by the app. Falls back to empty when absent. */
+    readonly headerSlot: _angular_core.Signal<AcpShellSlotHeader | undefined>;
+    /** Custom sidebar body projected by the app. Falls back to empty when absent. */
+    readonly sidebarSlot: _angular_core.Signal<AcpShellSlotSidebar | undefined>;
+    /** Optional footer appended inside the sidebar. */
+    readonly sidebarFooterSlot: _angular_core.Signal<AcpShellSlotSidebarFooter | undefined>;
+    /** Optional toolbar content injected into the header center. */
+    readonly toolbarSlot: _angular_core.Signal<AcpShellSlotToolbar | undefined>;
+    /** Optional top navigation projected above the main page content. */
+    readonly topmenuSlot: _angular_core.Signal<AcpShellSlotTopmenu | undefined>;
+    /** Optional secondary sidenav (e.g. notifications panel, position end). */
+    /** Navigation position. @default 'side' */
+    readonly navPos: _angular_core.InputSignal<AcpNavPos>;
+    /** Header position relative to the sidenav. @default 'fixed' */
+    readonly headerPos: _angular_core.InputSignal<AcpHeaderPos>;
+    /** Whether the sidenav is open. @default true */
+    readonly sidenavOpened: _angular_core.InputSignal<boolean>;
+    /** Whether the sidenav is in collapsed/narrow mode. @default false */
+    readonly sidenavCollapsed: _angular_core.InputSignal<boolean>;
+    /** Whether the viewport is in mobile mode (switches sidenav to "over"). @default false */
+    readonly isMobile: _angular_core.InputSignal<boolean>;
+    /** Layout direction for RTL support. @default 'ltr' */
+    readonly dir: _angular_core.InputSignal<AcpDir>;
+    /** Emitted when the sidenav opened/closed state changes internally. */
+    readonly sidenavOpenedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** 'over' on mobile so the sidebar floats above content. */
+    readonly sidenavMode: _angular_core.Signal<"side" | "over">;
+    /**
+     * Whether to render the header-above zone.
+     * True when `headerPos === 'above'` — spans full width outside the sidenav container.
+     */
+    readonly showHeaderAbove: _angular_core.Signal<boolean>;
+    /**
+     * Whether to render the header inside the content area.
+     * True for 'fixed' and 'below' positions.
+     */
+    readonly showHeaderInContent: _angular_core.Signal<boolean>;
+    /** CSS modifier classes bound to the root container element. */
+    readonly containerClasses: _angular_core.Signal<{
+        'acontplus-sidenav-collapsed': boolean;
+        'acontplus-navbar-side': boolean;
+        'acontplus-navbar-top': boolean;
+        'acontplus-header-above': boolean;
+        'acontplus-header-fixed': boolean;
+    }>;
+    /** Toggle the primary sidenav. Callable from parent via template ref. */
+    toggleSidenav(): void;
+    /** Close the primary sidenav. */
+    closeSidenav(): void;
+    /** Scroll the content area back to the top. */
+    scrollToTop(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpShellLayout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpShellLayout, "acp-shell-layout", never, { "navPos": { "alias": "navPos"; "required": false; "isSignal": true; }; "headerPos": { "alias": "headerPos"; "required": false; "isSignal": true; }; "sidenavOpened": { "alias": "sidenavOpened"; "required": false; "isSignal": true; }; "sidenavCollapsed": { "alias": "sidenavCollapsed"; "required": false; "isSignal": true; }; "isMobile": { "alias": "isMobile"; "required": false; "isSignal": true; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; }, { "sidenavOpenedChange": "sidenavOpenedChange"; }, ["headerSlot", "sidebarSlot", "sidebarFooterSlot", "toolbarSlot", "topmenuSlot"], never, true, never>;
+}
+
+interface AcpTopmenuTag {
+    color: string;
+    value: string;
+}
+interface AcpTopmenuPermissions {
+    only?: string | string[];
+    except?: string | string[];
+}
+interface AcpTopmenuChildItem {
+    route: string;
+    name: string;
+    type: 'link' | 'sub' | 'extLink' | 'extTabLink';
+    children?: AcpTopmenuChildItem[];
+    permissions?: AcpTopmenuPermissions;
+    active?: WritableSignal<boolean>;
+}
+interface AcpTopmenuItem {
+    route: string;
+    name: string;
+    type: 'link' | 'sub' | 'extLink' | 'extTabLink';
+    icon: string;
+    label?: AcpTopmenuTag;
+    badge?: AcpTopmenuTag;
+    children?: AcpTopmenuChildItem[];
+    permissions?: AcpTopmenuPermissions;
+    active?: WritableSignal<boolean>;
+}
+
+declare class AcpTopmenu {
+    private readonly router;
+    private readonly destroyRef;
+    readonly items: _angular_core.InputSignal<AcpTopmenuItem[]>;
+    readonly buildRoute: _angular_core.InputSignal<(routeArr: string[]) => string>;
+    readonly routeChange: _angular_core.OutputEmitterRef<{
+        rla: RouterLinkActive;
+        item: AcpTopmenuItem | AcpTopmenuChildItem;
+    }>;
+    constructor();
+    onRouteChange(rla: RouterLinkActive, menuItem: AcpTopmenuItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpTopmenu, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpTopmenu, "acp-topmenu", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "buildRoute": { "alias": "buildRoute"; "required": false; "isSignal": true; }; }, { "routeChange": "routeChange"; }, never, never, true, never>;
+}
+
+declare class AcpTopmenuPanel {
+    private readonly router;
+    private readonly destroyRef;
+    readonly menuPanel: _angular_core.Signal<MatMenu>;
+    readonly items: _angular_core.InputSignal<AcpTopmenuChildItem[]>;
+    readonly parentRoute: _angular_core.InputSignal<string[]>;
+    readonly level: _angular_core.InputSignal<number>;
+    readonly buildRoute: _angular_core.InputSignal<(routeArr: string[]) => string>;
+    readonly routeChange: _angular_core.OutputEmitterRef<{
+        rla: RouterLinkActive;
+        item: AcpTopmenuChildItem;
+    }>;
+    constructor();
+    onRouterLinkClick(rla: RouterLinkActive): void;
+    onRouteChange(rla: RouterLinkActive, menuItem: AcpTopmenuChildItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpTopmenuPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpTopmenuPanel, "acp-topmenu-panel", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "parentRoute": { "alias": "parentRoute"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "buildRoute": { "alias": "buildRoute"; "required": false; "isSignal": true; }; }, { "routeChange": "routeChange"; }, never, never, true, never>;
+}
+
 declare class ToUpperCase implements ControlValueAccessor {
     private readonly el;
     private readonly renderer;
@@ -3197,5 +4755,5 @@ declare class StatusDisplayPipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<StatusDisplayPipe, "statusDisplay", true>;
 }
 
-export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCheckboxBase, AcpCheckboxGroup, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AdvancedDialogService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TOKENS, KPI_CARD_TREND_CONFIGS, KeyboardNavigationService, OverlayService, Pagination, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, formatValue };
-export type { AcpAlertType, AcpBadgeColor, AcpBadgeShape, AcpBadgeSize, AcpBadgeTrend, AcpBadgeTrendConfig, AcpBadgeVariant, AcpCheckboxGroupOption, AcpKpiCardColor, AcpKpiCardLayout, AcpKpiCardSize, AcpKpiCardTrend, AcpKpiCardTrendConfig, AcpKpiCardVariant, AcpPopoverDefaultOptions, AcpPopoverPanel, AcpPopoverPosition, AcpPopoverPositionEnd, AcpPopoverPositionStart, AcpPopoverTriggerEvent, AcpSelectedDateEvent, AutoFocusTarget, DataGridButtonType, DataGridCellTemplate, DataGridColumn, DataGridColumnButton, DataGridColumnButtonBadge, DataGridColumnButtonPop, DataGridColumnButtonTooltip, DataGridColumnPinOption, DataGridColumnPinValue, DataGridColumnTag, DataGridColumnTagValue, DataGridColumnType, DataGridColumnTypeParameter, DataGridDefaultOptions, DataGridMenuItem, DataGridRowClassFormatter, DataGridRowSelectionFormatter, DataGridSortProp, DateRangePickerOptions, DateRangeValue, DialogSize, DialogType, DialogWrapperConfig, DrawerPosition, FocusableElement, IAcpSelectDateOption, IconRegistryConfig, MatCustomDialogConfig, PaginationOptions, PopoverCloseReason, TabulatorColumn, TabulatorConfig, TabulatorEventHandlers, TabulatorTheme };
+export { ACP_ACTIVE_DATE_DEBOUNCE, ACP_BADGE_COLORS, ACP_BADGE_SHAPES, ACP_BADGE_SIZES, ACP_BADGE_VARIANTS, ACP_DATE_OPTION_TYPE, ACP_DEFAULT_DATE_OPTIONS, ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AcpAlert, AcpBadge, AcpButton, AcpCard, AcpCheckboxBase, AcpCheckboxGroup, AcpContextMenu, AcpContextMenuDirective, AcpContextMenuPanel, AcpContextMenuService, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpHeader, AcpHeaderActions, AcpHeaderBranding, AcpHeaderCenter, AcpHeaderEnd, AcpHeaderLanguage, AcpHeaderNotifications, AcpHeaderStart, AcpHeaderTheme, AcpHeaderWorkspace, AcpKpiCard, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AcpShellLayout, AcpShellSlotHeader, AcpShellSlotSidebar, AcpShellSlotSidebarFooter, AcpShellSlotToolbar, AcpShellSlotTopmenu, AcpSidebar, AcpSidebarBranding, AcpSidebarContent, AcpSidebarHeader, AcpSidebarToggle, AcpSidebarUserPanel, AcpTopmenu, AcpTopmenuPanel, AdvancedDialogService, Branding, Button, CONTEXT_MENU_DATA, CONTEXT_MENU_ITEMS, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KPI_CARD_TOKENS, KPI_CARD_TREND_CONFIGS, KeyboardNavigationService, NavAccordionDirective, NavAccordionItemDirective, NavAccordionToggleDirective, OverlayService, Pagination, SidemenuComponent, Spinner, StatusDisplayPipe, SvgIcon, TREND_CONFIGS, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, UserMenu, UserPanel, _AcpPopoverContentBase, formatValue };
+export type { AcpAlertType, AcpBadgeColor, AcpBadgeShape, AcpBadgeSize, AcpBadgeTrend, AcpBadgeTrendConfig, AcpBadgeVariant, AcpCardAppearance, AcpCardBackgroundColor, AcpCardBadge, AcpCardConfig, AcpCardElevation, AcpCardImageRatio, AcpCardPadding, AcpCardPassThroughOptions, AcpCardPassThroughSection, AcpCheckboxGroupOption, AcpContextMenuItem, AcpContextMenuItemContext, AcpContextMenuOpenConfig, AcpContextMenuPosition, AcpContextMenuRef, AcpContextMenuTriggerConfig, AcpDir, AcpHeaderAction, AcpHeaderActionEvent, AcpHeaderBrandingConfig, AcpHeaderConfig, AcpHeaderPos, AcpHeaderUserMenuConfig, AcpHeaderUserMenuItem, AcpHeaderUserMenuItemEvent, AcpKpiCardColor, AcpKpiCardLayout, AcpKpiCardSize, AcpKpiCardTrend, AcpKpiCardTrendConfig, AcpKpiCardVariant, AcpLanguageItem, AcpNavPos, AcpNotificationItem, AcpPopoverDefaultOptions, AcpPopoverPanel, AcpPopoverPosition, AcpPopoverPositionEnd, AcpPopoverPositionStart, AcpPopoverTriggerEvent, AcpSelectedDateEvent, AcpThemeVariant, AcpTopmenuChildItem, AcpTopmenuItem, AcpTopmenuPermissions, AcpTopmenuTag, AcpWorkspaceItem, AutoFocusTarget, DataGridButtonType, DataGridCellTemplate, DataGridColumn, DataGridColumnButton, DataGridColumnButtonBadge, DataGridColumnButtonPop, DataGridColumnButtonTooltip, DataGridColumnPinOption, DataGridColumnPinValue, DataGridColumnTag, DataGridColumnTagValue, DataGridColumnType, DataGridColumnTypeParameter, DataGridDefaultOptions, DataGridMenuItem, DataGridRowClassFormatter, DataGridRowSelectionFormatter, DataGridSortProp, DateRangePickerOptions, DateRangeValue, DialogSize, DialogType, DialogWrapperConfig, DrawerPosition, FocusableElement, IAcpSelectDateOption, IconRegistryConfig, MatCustomDialogConfig, MenuItem, MenuPermissions, MenuTag, PaginationOptions, PopoverCloseReason, TabulatorColumn, TabulatorConfig, TabulatorEventHandlers, TabulatorTheme, UserMenuItem, UserMenuSelectedEvent, UserProfile };