@acontplus/ng-components 2.3.0 → 2.4.0

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { EventEmitter, Type, AfterViewInit, OnDestroy, Signal, ViewContainerRef, ElementRef, OnInit, TemplateRef, OnChanges, SimpleChanges, NgZone, InjectionToken, QueryList, TrackByFunction, KeyValueChangeRecord, OutputEmitterRef, WritableSignal, ComponentRef, AfterContentInit, PipeTransform } 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 { MatDialogRef } from '@angular/material/dialog';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { FormControl, ControlValueAccessor, FormGroup } from '@angular/forms';
@@ -8,16 +8,16 @@ import { SafeHtml } from '@angular/platform-browser';
 import { MatChipInputEvent, MatChipEditedEvent } from '@angular/material/chips';
 import { LiveAnnouncer, FocusOrigin } from '@angular/cdk/a11y';
 import { Tabulator } from 'tabulator-tables';
-import * as rxjs from 'rxjs';
-import { Observable, Subject } from 'rxjs';
 import { MatTable, MatRowDef, MatHeaderRowDef, MatFooterRowDef, MatTableDataSource } from '@angular/material/table';
-import { PageEvent, MatPaginator } from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { SortDirection, MatSort, Sort } from '@angular/material/sort';
 import { SelectionModel } from '@angular/cdk/collections';
 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';
@@ -27,6 +27,7 @@ import { Direction } from '@angular/cdk/bidi';
 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';
 
 type AcpAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';
 declare class AcpAlert {
@@ -46,6 +47,70 @@ declare class AcpAlert {
     static ngAcceptInputType_dismissible: unknown;
 }
 
+type AcpBadgeColor = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'custom';
+type AcpBadgeVariant = 'filled' | 'outlined' | 'soft' | 'tonal' | 'text';
+type AcpBadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+type AcpBadgeShape = 'rounded' | 'pill' | 'square';
+type AcpBadgeTrend = 'up' | 'down' | 'neutral' | 'none';
+interface AcpBadgeTrendConfig {
+    value: string;
+    icon: string;
+    color: AcpBadgeColor;
+}
+
+declare class AcpBadge {
+    label: _angular_core.InputSignal<string | undefined>;
+    value: _angular_core.InputSignal<string | undefined>;
+    variant: _angular_core.InputSignal<AcpBadgeVariant>;
+    color: _angular_core.InputSignal<AcpBadgeColor>;
+    size: _angular_core.InputSignal<AcpBadgeSize>;
+    shape: _angular_core.InputSignal<AcpBadgeShape>;
+    icon: _angular_core.InputSignal<string | undefined>;
+    trailingIcon: _angular_core.InputSignal<string | undefined>;
+    svgIcon: _angular_core.InputSignal<string | undefined>;
+    trailingSvgIcon: _angular_core.InputSignal<string | undefined>;
+    trend: _angular_core.InputSignal<AcpBadgeTrend>;
+    clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    highlighted: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    removable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    routerLink: _angular_core.InputSignal<string | any[] | null>;
+    href: _angular_core.InputSignal<string | null>;
+    ariaLabelOverride: _angular_core.InputSignal<string | null>;
+    clicked: _angular_core.OutputEmitterRef<void>;
+    removed: _angular_core.OutputEmitterRef<void>;
+    iconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    trailingIconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    private isTrending;
+    private trendConfig;
+    effectiveColor: _angular_core.Signal<AcpBadgeColor>;
+    effectiveIcon: _angular_core.Signal<string | undefined>;
+    effectiveSvgIcon: _angular_core.Signal<string | undefined>;
+    effectiveTrailingIcon: _angular_core.Signal<string | undefined>;
+    effectiveTrailingSvgIcon: _angular_core.Signal<string | undefined>;
+    effectiveValue: _angular_core.Signal<string | undefined>;
+    isLink: _angular_core.Signal<boolean>;
+    isInteractive: _angular_core.Signal<boolean>;
+    isDisabled: _angular_core.Signal<boolean>;
+    isHighlighted: _angular_core.Signal<boolean>;
+    chipClasses: _angular_core.Signal<string>;
+    hostClasses: _angular_core.Signal<string>;
+    ariaLabel: _angular_core.Signal<string | null>;
+    onChipClick(event: MouseEvent): void;
+    onRemove(_event: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpBadge, "acp-badge", ["acpBadge"], { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "svgIcon": { "alias": "svgIcon"; "required": false; "isSignal": true; }; "trailingSvgIcon": { "alias": "trailingSvgIcon"; "required": false; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "highlighted": { "alias": "highlighted"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "ariaLabelOverride": { "alias": "ariaLabelOverride"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "removed": "removed"; }, ["iconTemplate", "trailingIconTemplate"], never, true, never>;
+}
+
+declare const ACP_BADGE_COLORS: AcpBadgeColor[];
+declare const ACP_BADGE_VARIANTS: AcpBadgeVariant[];
+declare const ACP_BADGE_SIZES: AcpBadgeSize[];
+declare const ACP_BADGE_SHAPES: AcpBadgeShape[];
+
+declare const TREND_CONFIGS: Record<AcpBadgeTrend, AcpBadgeTrendConfig>;
+
 /**
  * A versatile card component that wraps Angular Material's mat-card with additional functionality
  * and customization options. This component provides a consistent card layout with configurable
@@ -367,180 +432,6 @@ declare class ThemeSwitcher {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeSwitcher>;
 }
 
-interface AutocompleteWrapperItem {
-    id?: string | number;
-    name?: string;
-    value?: string;
-    description?: string;
-    [key: string]: any;
-}
-interface AutocompleteWrapperSearchResult {
-    items: AutocompleteWrapperItem[];
-    totalCount: number;
-    hasMore?: boolean;
-}
-type AutocompleteWrapperSearchFunction = (query: string, filters: AutocompleteWrapperFilters, page?: number, pageSize?: number) => Observable<AutocompleteWrapperSearchResult>;
-interface AutocompleteWrapperConfig {
-    placeholder?: string;
-    label?: string;
-    clearInput?: boolean;
-    disabled?: boolean;
-    debounceTime?: number;
-    minSearchLength?: number;
-    maxHistoryItems?: number;
-    itemsPerPage?: number;
-    enableStockFilter?: boolean;
-    stockProperty?: string;
-    enablePagination?: boolean;
-    enableFilters?: boolean;
-    enableFooterActions?: boolean;
-    searchFields?: AutocompleteWrapperSearchField[];
-    stockOptions?: AutocompleteWrapperStockOption[];
-    overlayWidth?: string | number;
-    overlayMaxHeight?: string | number;
-    searchFunction?: AutocompleteWrapperSearchFunction;
-    searchMode?: 'local' | 'remote' | 'hybrid';
-    localData?: AutocompleteWrapperItem[];
-    noResultsText?: string;
-    sectionTitle?: string;
-}
-interface AutocompleteWrapperSearchField {
-    value: string;
-    label: string;
-    property: string;
-}
-interface AutocompleteWrapperStockOption {
-    value: string;
-    label: string;
-}
-interface AutocompleteWrapperFilters {
-    searchBy: string;
-    stockFilter: string;
-}
-interface AutocompleteWrapperEvents {
-    itemSelected: AutocompleteWrapperItem;
-    searchChanged: string;
-    pageChanged: number;
-    filterChanged: AutocompleteWrapperFilters;
-    advancedSearchClicked: void;
-    allResultsClicked: string;
-    createNewClicked: string;
-    historyCleared: void;
-    historyItemRemoved: {
-        item: AutocompleteWrapperItem;
-        index: number;
-    };
-}
-interface AutocompleteWrapperPaginationInfo {
-    currentPage: number;
-    totalPages: number;
-    totalItems: number;
-    itemsPerPage: number;
-    startItem: number;
-    endItem: number;
-    hasNextPage: boolean;
-    hasPreviousPage: boolean;
-}
-interface AutocompleteWrapperState {
-    query: string;
-    isLoading: boolean;
-    overlayOpen: boolean;
-    selectedIndex: number;
-    pagination: AutocompleteWrapperPaginationInfo;
-    hasResults: boolean;
-    isHistoryVisible: boolean;
-    historyCount: number;
-    filters: AutocompleteWrapperFilters;
-}
-interface AutocompleteWrapperActions {
-    onInput(event: Event): void;
-    showOverlay(): void;
-    hideOverlay(): void;
-    clearSearch(): void;
-    onKeyDown(event: KeyboardEvent): void;
-    selectItem(item: AutocompleteWrapperItem): void;
-    getItemDisplayText(item: AutocompleteWrapperItem): string;
-    clearHistory(): void;
-    removeHistoryItem(index: number, event: Event): void;
-    goToFirstPage(): void;
-    goToPreviousPage(): void;
-    goToNextPage(): void;
-    goToLastPage(): void;
-    goToPage(event: Event): void;
-    onFilterChange(): void;
-    onCreateNew(event: Event): void;
-    onAdvancedSearch(): void;
-    onShowAllResults(): void;
-    overlayOpen(): boolean;
-    isLoading(): boolean;
-    isHistoryVisible(): boolean;
-    historyList(): AutocompleteWrapperItem[];
-    selectedIndex(): number;
-    currentPageItems(): AutocompleteWrapperItem[];
-    totalItems(): number;
-    totalPages(): number;
-    currentPage(): number;
-    totalCount(): number;
-    startItem(): number;
-    endItem(): number;
-    sectionTitle(): string;
-    noResultsText(): string;
-    isNoResults(): boolean;
-    overlayWidth(): string | number;
-    overlayMaxHeight(): string | number;
-}
-declare const AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG: AutocompleteWrapperConfig;
-declare const AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG: AutocompleteWrapperConfig;
-declare const AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG: AutocompleteWrapperConfig;
-declare const AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG: AutocompleteWrapperConfig;
-declare const AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG: AutocompleteWrapperConfig;
-declare const AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG: AutocompleteWrapperConfig;
-declare function createAutocompleteWrapperConfig(overrides: Partial<AutocompleteWrapperConfig>): AutocompleteWrapperConfig;
-interface ReusableAutocompleteWrapperComponent extends AutocompleteWrapperActions {
-    config: AutocompleteWrapperConfig;
-    filters: AutocompleteWrapperFilters;
-    query: string;
-}
-type AutocompleteWrapperSearchMode = 'local' | 'remote' | 'hybrid';
-type AutocompleteWrapperItemProperty = keyof AutocompleteWrapperItem;
-type AutocompleteWrapperEventHandler<T = any> = (event: T) => void;
-
-declare class AutocompleteWrapperService {
-    private readonly historySubject;
-    history$: Observable<AutocompleteWrapperItem[]>;
-    constructor();
-    searchLocal(items: AutocompleteWrapperItem[], query: string, filters: AutocompleteWrapperFilters, config: AutocompleteWrapperConfig): Observable<AutocompleteWrapperSearchResult>;
-    filterItems(items: AutocompleteWrapperItem[], query: string, filters: AutocompleteWrapperFilters, config?: AutocompleteWrapperConfig): AutocompleteWrapperItem[];
-    searchAsync(items: AutocompleteWrapperItem[], query: string, filters: AutocompleteWrapperFilters, config?: AutocompleteWrapperConfig): Observable<AutocompleteWrapperItem[]>;
-    private getSearchValue;
-    addToHistory(item: AutocompleteWrapperItem, maxItems?: number): void;
-    removeFromHistory(index: number): void;
-    clearHistory(): void;
-    getHistory(): AutocompleteWrapperItem[];
-    private loadHistoryFromStorage;
-    private saveHistoryToStorage;
-    paginateItems<T>(items: T[], page: number, itemsPerPage: number): T[];
-    getTotalPages(totalItems: number, itemsPerPage: number): number;
-    isValidPage(page: number, totalPages: number): boolean;
-    highlightText(text: string, query: string): string;
-    getItemDisplayText(item: AutocompleteWrapperItem, displayField?: string): string;
-    mergeConfig(userConfig: Partial<AutocompleteWrapperConfig>): AutocompleteWrapperConfig;
-    createGenericSearchFunction(config: {
-        search: (params: any) => Observable<any>;
-        queryParam?: string;
-        searchByParam?: string;
-        pageParam?: string;
-        pageSizeParam?: string;
-        responseMapper?: (response: any) => AutocompleteWrapperSearchResult;
-    }): AutocompleteWrapperSearchFunction;
-    createMockData(): AutocompleteWrapperItem[];
-    searchProducts(query: string, filters?: Partial<AutocompleteWrapperFilters>): Observable<AutocompleteWrapperSearchResult>;
-    createProductSearchConfig(): AutocompleteWrapperConfig;
-    createCustomerSearchConfig(): AutocompleteWrapperConfig;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AutocompleteWrapperService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AutocompleteWrapperService>;
-}
-
 /**
  * A wrapper component for Angular Material dialogs that provides a consistent look and feel,
  * including a draggable header and the ability to dynamically create components inside the dialog.
@@ -850,7 +741,7 @@ declare abstract class BaseButton {
     sizeClass: _angular_core.Signal<string>;
     squareClass: _angular_core.Signal<"" | "acp-square">;
     isDisabled: _angular_core.Signal<boolean>;
-    pointerEvents: _angular_core.Signal<"auto" | "none">;
+    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>;
 }
@@ -1192,128 +1083,6 @@ declare class ThemeToggle {
     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>;
 }
 
-interface PaginationOptions {
-    hidePageSize?: boolean;
-    showPageSizeOptions?: boolean;
-    showFirstLastButtons?: boolean;
-    disabled?: boolean;
-}
-declare class Pagination {
-    totalRecords: number;
-    pageSize: number;
-    pageIndex: number;
-    pageSizeOptions: number[];
-    hidePageSize: boolean;
-    showPageSizeOptions: boolean;
-    showFirstLastButtons: boolean;
-    disabled: boolean;
-    /**
-     * @param pageIndex Current page index (0-based for MatPaginator compatibility)
-     * @param pageSize Number of records per page
-     * @param totalRecords Total number of records
-     * @param pageSizeOptions Available page size options
-     * @param options Display and behavior options
-     */
-    constructor(pageIndex?: number, // MatPaginator starts at 0
-    pageSize?: number, totalRecords?: number, pageSizeOptions?: number[], options?: PaginationOptions);
-    /**
-     * Calculates the total number of pages.
-     */
-    getTotalPages(): number;
-    /**
-     * Handles page event similar to Angular Material example.
-     * @param event MatPaginator PageEvent
-     */
-    handlePageEvent(event: PageEvent): void;
-}
-
-declare class ReusableAutocompleteComponent implements OnInit, OnDestroy {
-    private static inputIdCounter;
-    readonly inputId: string;
-    readonly dataSource: _angular_core.InputSignal<AutocompleteWrapperItem[]>;
-    config: AutocompleteWrapperConfig;
-    readonly itemTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
-    readonly searchFunction: _angular_core.InputSignal<AutocompleteWrapperSearchFunction | undefined>;
-    readonly notFoundTemplate: _angular_core.InputSignal<TemplateRef<any> | undefined>;
-    overlayWidth: _angular_core.InputSignal<string>;
-    overlayMaxHeight: _angular_core.InputSignal<string>;
-    itemSelected: _angular_core.OutputEmitterRef<AutocompleteWrapperItem>;
-    searchChanged: _angular_core.OutputEmitterRef<string>;
-    searchRequested: _angular_core.OutputEmitterRef<{
-        query: string;
-        filters: AutocompleteWrapperFilters;
-        page: number;
-    }>;
-    pageChanged: _angular_core.OutputEmitterRef<number>;
-    filterChanged: _angular_core.OutputEmitterRef<AutocompleteWrapperFilters>;
-    advancedSearchClicked: _angular_core.OutputEmitterRef<void>;
-    allResultsClicked: _angular_core.OutputEmitterRef<string>;
-    createClicked: _angular_core.OutputEmitterRef<string>;
-    readonly searchInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
-    readonly historyListElement: _angular_core.Signal<ElementRef<HTMLUListElement> | undefined>;
-    readonly resultsListElement: _angular_core.Signal<ElementRef<HTMLUListElement> | undefined>;
-    query: string;
-    isLoading: _angular_core.WritableSignal<boolean>;
-    overlayOpen: _angular_core.WritableSignal<boolean>;
-    selectedIndex: _angular_core.WritableSignal<number>;
-    currentPage: _angular_core.WritableSignal<number>;
-    filteredItems: _angular_core.WritableSignal<AutocompleteWrapperItem[]>;
-    historyList: _angular_core.WritableSignal<AutocompleteWrapperItem[]>;
-    totalCount: _angular_core.WritableSignal<number>;
-    filters: AutocompleteWrapperFilters;
-    isHistoryVisible: _angular_core.Signal<boolean>;
-    totalItems: _angular_core.Signal<number>;
-    totalPages: _angular_core.Signal<number>;
-    currentPageItems: _angular_core.Signal<AutocompleteWrapperItem[]>;
-    startItem: _angular_core.Signal<number>;
-    endItem: _angular_core.Signal<number>;
-    sectionTitle: _angular_core.Signal<string>;
-    isNoResults: _angular_core.Signal<boolean>;
-    private readonly destroy$;
-    private readonly searchSubject;
-    private autocompleteService;
-    ngOnInit(): void;
-    ngOnDestroy(): void;
-    private mergeDefaultConfig;
-    private setupSearch;
-    private performSearch;
-    private loadHistory;
-    private searchSubjectNext;
-    onInput(event: Event): void;
-    onKeyDown(event: KeyboardEvent): void;
-    private handleArrowDown;
-    private handleArrowUp;
-    private handleEnter;
-    private handleEscape;
-    private handlePageDown;
-    private handlePageUp;
-    onFilterChange(): void;
-    updateSearchResults(result: AutocompleteWrapperSearchResult): void;
-    showOverlay(): void;
-    hideOverlay(): void;
-    isType(item: any): item is string;
-    selectItem(item: AutocompleteWrapperItem): void;
-    clearSearch(): void;
-    removeHistoryItem(index: number, event: Event): void;
-    clearHistory(): void;
-    goToPage(event: Event): void;
-    goToFirstPage(): void;
-    goToPreviousPage(): void;
-    goToNextPage(): void;
-    goToLastPage(): void;
-    onCreateNew(_$event: MouseEvent): void;
-    onAdvancedSearch(): void;
-    onShowAllResults(): void;
-    getItemDisplayText(item: AutocompleteWrapperItem): string;
-    noResultsText(): string;
-    private scrollToSelected;
-    getState(): AutocompleteWrapperState;
-    setQuery(query: string): void;
-    focus(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReusableAutocompleteComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReusableAutocompleteComponent, "acp-autocomplete-wrapper", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "searchFunction": { "alias": "searchFunction"; "required": false; "isSignal": true; }; "notFoundTemplate": { "alias": "notFoundTemplate"; "required": false; "isSignal": true; }; "overlayWidth": { "alias": "overlayWidth"; "required": false; "isSignal": true; }; "overlayMaxHeight": { "alias": "overlayMaxHeight"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; "searchChanged": "searchChanged"; "searchRequested": "searchRequested"; "pageChanged": "pageChanged"; "filterChanged": "filterChanged"; "advancedSearchClicked": "advancedSearchClicked"; "allResultsClicked": "allResultsClicked"; "createClicked": "createClicked"; }, never, never, true, never>;
-}
-
 declare class AcpGridSelectableCell {
     ctrlKeyPressed: boolean;
     shiftKeyPressed: boolean;
@@ -1549,7 +1318,7 @@ declare class DataGrid implements AfterViewInit, OnChanges {
     /** Whether to hide the page size selection UI from the user. */
     hidePageSize: boolean;
     /** Event emitted when the paginator changes the page size or page index. */
-    page: EventEmitter<PageEvent>;
+    page: _angular_core.OutputEmitterRef<PageEvent>;
     /** The template for the pagination. */
     paginationTemplate: TemplateRef<any>;
     /** Whether to sort the data on front end. */
@@ -1571,22 +1340,22 @@ declare class DataGrid implements AfterViewInit, OnChanges {
      */
     sortStart: 'asc' | 'desc';
     /** Event emitted when the user changes either the active sort or sort direction. */
-    sortChange: EventEmitter<Sort>;
+    sortChange: _angular_core.OutputEmitterRef<Sort>;
     /** Whether to use the row hover style. */
     rowHover: boolean;
     /** Whether to use the row striped style. */
     rowStriped: boolean;
     /** Event emitted when the user clicks the row. */
-    rowClick: EventEmitter<any>;
+    rowClick: _angular_core.OutputEmitterRef<any>;
     /** Event emitted when the user attempts to open a context menu. */
-    rowContextMenu: EventEmitter<any>;
+    rowContextMenu: _angular_core.OutputEmitterRef<any>;
     expansionRowStates: any[];
     /** Whether the row is expandable. */
     expandable: boolean;
     /** The template for the expandable row. */
     expansionTemplate: TemplateRef<any>;
     /** Event emitted when the user toggles the expandable row. */
-    expansionChange: EventEmitter<any>;
+    expansionChange: _angular_core.OutputEmitterRef<any>;
     closeOthersOnExpand: _angular_core.InputSignal<boolean>;
     rowSelection: SelectionModel<any>;
     /** Whether to support multiple row/cell selection. */
@@ -1606,21 +1375,21 @@ declare class DataGrid implements AfterViewInit, OnChanges {
     /** The selected row items. */
     rowSelected: any[];
     /** Event emitted when the row is selected. */
-    rowSelectedChange: EventEmitter<any[]>;
-    checkboxKeyDown: EventEmitter<KeyboardEvent>;
-    checkboxKeyUp: EventEmitter<KeyboardEvent>;
-    checkboxKeyPress: EventEmitter<KeyboardEvent>;
-    rowKeyDown: EventEmitter<{
+    rowSelectedChange: _angular_core.OutputEmitterRef<any[]>;
+    checkboxKeyDown: _angular_core.OutputEmitterRef<KeyboardEvent>;
+    checkboxKeyUp: _angular_core.OutputEmitterRef<KeyboardEvent>;
+    checkboxKeyPress: _angular_core.OutputEmitterRef<KeyboardEvent>;
+    rowKeyDown: _angular_core.OutputEmitterRef<{
         event: KeyboardEvent;
         row: Record<string, any>;
         index: number;
     }>;
-    rowKeyUp: EventEmitter<{
+    rowKeyUp: _angular_core.OutputEmitterRef<{
         event: KeyboardEvent;
         row: Record<string, any>;
         index: number;
     }>;
-    rowKeyPress: EventEmitter<{
+    rowKeyPress: _angular_core.OutputEmitterRef<{
         event: KeyboardEvent;
         row: Record<string, any>;
         index: number;
@@ -1629,7 +1398,7 @@ declare class DataGrid implements AfterViewInit, OnChanges {
     /** Whether the cell is selectable. */
     cellSelectable: boolean;
     /** Event emitted when the cell is selected. */
-    cellSelectedChange: EventEmitter<any[]>;
+    cellSelectedChange: _angular_core.OutputEmitterRef<any[]>;
     private _selectedCell?;
     /** Whether to show the toolbar. */
     showToolbar: boolean;
@@ -1646,7 +1415,7 @@ declare class DataGrid implements AfterViewInit, OnChanges {
     /** Whether the column is pinnable. */
     columnPinnable: boolean;
     /** Event emitted when the column is hided or is sorted. */
-    columnChange: EventEmitter<DataGridColumn<any>[]>;
+    columnChange: _angular_core.OutputEmitterRef<DataGridColumn<any>[]>;
     /** The options for the column pin list. */
     columnPinOptions: DataGridColumnPinOption[];
     /** Whether to show the column menu button. */
@@ -3247,6 +3016,108 @@ declare class AcpCheckboxGroup implements AfterViewInit, OnDestroy, ControlValue
     static ngAcceptInputType_disabled: unknown;
 }
 
+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';
+type AcpKpiCardTrend = 'up' | 'down' | 'neutral' | 'none';
+interface AcpKpiCardTrendConfig {
+    icon: string;
+    color: AcpKpiCardColor;
+    ariaLabel: string;
+}
+interface AcpKpiCardLayout {
+    title: boolean;
+    subtitle: boolean;
+    value: boolean;
+    description: boolean;
+    trend: boolean;
+    percentage: boolean;
+    icon: boolean;
+    avatar: boolean;
+    actions: boolean;
+    footer: boolean;
+    progress: boolean;
+}
+
+declare class AcpKpiCard {
+    title: _angular_core.InputSignal<string | undefined>;
+    subtitle: _angular_core.InputSignal<string | undefined>;
+    value: _angular_core.InputSignal<string | number | undefined>;
+    description: _angular_core.InputSignal<string | undefined>;
+    footer: _angular_core.InputSignal<string | undefined>;
+    variant: _angular_core.InputSignal<AcpKpiCardVariant>;
+    color: _angular_core.InputSignal<AcpKpiCardColor>;
+    size: _angular_core.InputSignal<AcpKpiCardSize>;
+    icon: _angular_core.InputSignal<string | undefined>;
+    svgIcon: _angular_core.InputSignal<string | undefined>;
+    avatar: _angular_core.InputSignal<string | undefined>;
+    avatarInitials: _angular_core.InputSignal<string | undefined>;
+    trend: _angular_core.InputSignal<AcpKpiCardTrend>;
+    percentage: _angular_core.InputSignal<string | number | undefined>;
+    percentageFormat: _angular_core.InputSignal<"number" | "percent">;
+    progress: _angular_core.InputSignal<number | undefined>;
+    progressColor: _angular_core.InputSignal<AcpKpiCardColor>;
+    loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    routerLink: _angular_core.InputSignal<string | any[] | null>;
+    href: _angular_core.InputSignal<string | null>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    tooltip: _angular_core.InputSignal<string | undefined>;
+    clicked: _angular_core.OutputEmitterRef<void>;
+    actionClicked: _angular_core.OutputEmitterRef<string>;
+    isHovered: _angular_core.WritableSignal<boolean>;
+    iconTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    avatarTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    footerTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    actionsTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
+    isTrending: _angular_core.Signal<boolean>;
+    trendConfig: _angular_core.Signal<_acontplus_ng_components.AcpKpiCardTrendConfig>;
+    effectiveIcon: _angular_core.Signal<string | undefined>;
+    trendColor: _angular_core.Signal<AcpKpiCardColor>;
+    hasHeader: _angular_core.Signal<boolean>;
+    hasFooter: _angular_core.Signal<boolean>;
+    hasActions: _angular_core.Signal<boolean>;
+    hostClasses: _angular_core.Signal<string>;
+    onCardClick(): void;
+    onActionClick(action: string, event: Event): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AcpKpiCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AcpKpiCard, "acp-kpi-card", ["acpKpiCard"], { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "footer": { "alias": "footer"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "svgIcon": { "alias": "svgIcon"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "trend": { "alias": "trend"; "required": false; "isSignal": true; }; "percentage": { "alias": "percentage"; "required": false; "isSignal": true; }; "percentageFormat": { "alias": "percentageFormat"; "required": false; "isSignal": true; }; "progress": { "alias": "progress"; "required": false; "isSignal": true; }; "progressColor": { "alias": "progressColor"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "actionClicked": "actionClicked"; }, ["iconTemplate", "avatarTemplate", "footerTemplate", "actionsTemplate"], never, true, never>;
+}
+
+declare const KPI_CARD_TREND_CONFIGS: Record<AcpKpiCardTrend, AcpKpiCardTrendConfig>;
+declare function formatValue(value: number | string, format?: string): string;
+
+declare const KPI_CARD_TOKENS: {
+    SIZE_SM: string;
+    SIZE_MD: string;
+    SIZE_LG: string;
+    VARIANT_DEFAULT: string;
+    VARIANT_ELEVATED: string;
+    VARIANT_OUTLINED: string;
+    VARIANT_FILLED: string;
+    VARIANT_TONAL: string;
+    COLOR_PRIMARY: string;
+    COLOR_SECONDARY: string;
+    COLOR_SUCCESS: string;
+    COLOR_SUCCESS_LIGHT: string;
+    COLOR_WARNING: string;
+    COLOR_WARNING_LIGHT: string;
+    COLOR_ERROR: string;
+    COLOR_ERROR_LIGHT: string;
+    COLOR_INFO: string;
+    COLOR_INFO_LIGHT: string;
+    COLOR_NEUTRAL: string;
+    COLOR_CUSTOM: string;
+    TREND_UP: string;
+    TREND_DOWN: string;
+    TREND_NEUTRAL: string;
+    TREND_NONE: string;
+};
+
 declare class ToUpperCase implements ControlValueAccessor {
     private readonly el;
     private readonly renderer;
@@ -3260,6 +3131,41 @@ declare class ToUpperCase implements ControlValueAccessor {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToUpperCase, "[acpToUpperCase]", never, {}, {}, never, never, true, never>;
 }
 
+interface PaginationOptions {
+    hidePageSize?: boolean;
+    showPageSizeOptions?: boolean;
+    showFirstLastButtons?: boolean;
+    disabled?: boolean;
+}
+declare class Pagination {
+    totalRecords: number;
+    pageSize: number;
+    pageIndex: number;
+    pageSizeOptions: number[];
+    hidePageSize: boolean;
+    showPageSizeOptions: boolean;
+    showFirstLastButtons: boolean;
+    disabled: boolean;
+    /**
+     * @param pageIndex Current page index (0-based for MatPaginator compatibility)
+     * @param pageSize Number of records per page
+     * @param totalRecords Total number of records
+     * @param pageSizeOptions Available page size options
+     * @param options Display and behavior options
+     */
+    constructor(pageIndex?: number, // MatPaginator starts at 0
+    pageSize?: number, totalRecords?: number, pageSizeOptions?: number[], options?: PaginationOptions);
+    /**
+     * Calculates the total number of pages.
+     */
+    getTotalPages(): number;
+    /**
+     * Handles page event similar to Angular Material example.
+     * @param event MatPaginator PageEvent
+     */
+    handlePageEvent(event: PageEvent): void;
+}
+
 declare class GetTotalPipe implements PipeTransform {
     transform(colName: string, dataSource: any[]): any;
     /**
@@ -3291,5 +3197,5 @@ declare class StatusDisplayPipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<StatusDisplayPipe, "statusDisplay", true>;
 }
 
-export { ACP_ACTIVE_DATE_DEBOUNCE, 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, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpAlert, AcpButton, AcpCheckboxBase, AcpCheckboxGroup, AcpDateRangeInput, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AcpSelectDateOption, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DialogZIndexService, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig };
-export type { AcpAlertType, AcpCheckboxGroupOption, AcpPopoverDefaultOptions, AcpPopoverPanel, AcpPopoverPosition, AcpPopoverPositionEnd, AcpPopoverPositionStart, AcpPopoverTriggerEvent, AcpSelectedDateEvent, AutoFocusTarget, AutocompleteWrapperActions, AutocompleteWrapperConfig, AutocompleteWrapperEventHandler, AutocompleteWrapperEvents, AutocompleteWrapperFilters, AutocompleteWrapperItem, AutocompleteWrapperItemProperty, AutocompleteWrapperPaginationInfo, AutocompleteWrapperSearchField, AutocompleteWrapperSearchFunction, AutocompleteWrapperSearchMode, AutocompleteWrapperSearchResult, AutocompleteWrapperState, AutocompleteWrapperStockOption, 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, ReusableAutocompleteWrapperComponent, 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, 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 };