@acontplus/ng-components 2.0.1 → 2.1.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@acontplus/ng-components",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "Comprehensive Angular Material UI component library featuring dynamic Tabulator tables, theme toggle with dark mode, dialog wrappers, autocomplete components, cards, buttons, icons, input chips, spinners, directives, pipes, and SCSS styling utilities.",
   "peerDependencies": {
     "@acontplus/ui-kit": "^1.0.2",
-    "@angular/cdk": "^21.0.5",
-    "@angular/common": "^21.0.6",
-    "@angular/core": "^21.0.6",
-    "@angular/material": "^21.0.5",
+    "@angular/cdk": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/material": "^21.0.0",
     "tabulator-tables": "^6.3.1"
   },
   "sideEffects": true,

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { Type, AfterViewInit, OnDestroy, ViewContainerRef, ElementRef, OnInit, TemplateRef, AfterContentInit, OnChanges, SimpleChanges, InjectionToken, QueryList, TrackByFunction, KeyValueChangeRecord, PipeTransform } from '@angular/core';
+import { Type, AfterViewInit, OnDestroy, ViewContainerRef, ElementRef, OnInit, TemplateRef, OnChanges, SimpleChanges, InjectionToken, QueryList, TrackByFunction, KeyValueChangeRecord, PipeTransform } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { FormControl, ControlValueAccessor } from '@angular/forms';
@@ -7,34 +7,26 @@ import { SelectOption, IconDefinition, ButtonVariant, ButtonType, MaterialButton
 import { SafeHtml } from '@angular/platform-browser';
 import { MatChipInputEvent, MatChipEditedEvent } from '@angular/material/chips';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
-import * as _angular_material_paginator from '@angular/material/paginator';
-import { PageEvent, MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource, MatHeaderRowDef, MatRowDef, MatFooterRowDef, MatColumnDef, MatTable } from '@angular/material/table';
-import { SelectionModel } from '@angular/cdk/collections';
 import { Tabulator } from 'tabulator-tables';
 import * as rxjs from 'rxjs';
-import { Observable } 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 { 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 { MatFormFieldControl } from '@angular/material/form-field';
+import { DatexOptions, DatexTheme } from 'datex-ui';
+export { BOOTSTRAP_THEME, DEFAULT_THEME, Datex, DatexCallback, DatexLocale, DatexOptions, DatexTheme, MATERIAL_THEME, SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME } from 'datex-ui';
 import { ComponentType } from '@angular/cdk/portal';
 
 /**
  * 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
  * header, content, and action areas.
- *
- * @example
- * <acp-dynamic-card
- *   [cardTitle]="'Card Title'"
- *   [cardSubtitle]="'Card Subtitle'"
- *   [isHeaderVisible]="true"
- *   [areActionsVisible]="true"
- *   (primaryButtonClicked)="onPrimaryAction()">
- *   Card content goes here
- * </acp-dynamic-card>
  */
 declare class DynamicCard {
     /**
@@ -174,15 +166,6 @@ interface MatCustomDialogConfig<T = unknown> {
  *
  * @interface DialogWrapperConfig
  * @template T The type of data to pass to the content component
- *
- * @example
- * const config: DialogWrapperConfig = {
- *   component: YourDialogContentComponent,
- *   title: 'Dialog Title',
- *   icon: 'info',
- *   data: { message: 'This is some data passed to the dialog content component' },
- *   hideHeader: false
- * };
  */
 interface DialogWrapperConfig<T = unknown> {
     /**
@@ -454,15 +437,6 @@ declare class AutocompleteWrapperService {
  * including a draggable header and the ability to dynamically create components inside the dialog.
  *
  * This component is typically used with the AdvancedDialogService's openInWrapper method.
- *
- * @example
- * // In your service or component:
- * this.dialogService.openInWrapper({
- *   component: YourDialogContentComponent,
- *   title: 'Dialog Title',
- *   icon: 'info',
- *   data: { message: 'This is some data passed to the dialog content component' }
- * });
  */
 declare class DialogWrapper implements AfterViewInit, OnDestroy {
     dialogRef: MatDialogRef<DialogWrapper, any>;
@@ -749,169 +723,6 @@ declare class Spinner {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Spinner, "acp-spinner", never, {}, {}, never, never, true, never>;
 }
 
-interface DateRangeConfig<T = any> {
-    startDate: FieldDefinition<T>;
-    endDate: FieldDefinition<T>;
-}
-declare type ControlType = 'textbox' | 'ktextbox' | 'combobox' | 'textboxNum' | 'dropdown' | 'dropdownlist' | 'multiselect' | 'autocomplete' | 'checkbox' | 'radiobutton' | 'inquiryInDialog' | 'timepicker' | 'datepicker' | 'daterange' | 'textarea' | 'slideToggle' | 'slider' | 'switch' | 'buttonToggleGroup';
-declare type FieldType = 'number' | 'string' | 'boolean' | 'date' | 'month' | 'email' | 'password' | 'tel' | 'hidden' | 'image' | 'url' | 'week' | 'search' | 'reset' | 'template' | 'custom' | 'expand';
-declare type ColumnType = 'text' | 'component' | 'html' | 'template';
-declare class FieldDefinition<T = any> {
-    value?: T;
-    valueLabel?: string;
-    defaultValue?: T;
-    defaultValueLabel?: string;
-    key: string;
-    label: string;
-    dateRangeConfig?: DateRangeConfig<T>;
-    isDefaultSearchField?: boolean;
-    required?: boolean;
-    disabled?: boolean;
-    order?: number;
-    icon?: string;
-    controlType?: ControlType;
-    type?: FieldType;
-    editor?: 'numeric' | 'boolean' | '';
-    options?: {
-        label: string;
-        value: T;
-    }[];
-    valueOptions?: string[];
-    valuePrimitive?: boolean;
-    textField?: string;
-    valueField?: string;
-    errorMessage?: string;
-    width?: string;
-    valueChangeCallback?: (value: T) => void;
-    columnType?: ColumnType;
-    body?: any;
-    constructor(options?: Partial<FieldDefinition<T>>);
-}
-
-interface TableContext<T = any> {
-    $implicit: T;
-    index?: number;
-}
-declare class ColumnDefinition<T = any> extends FieldDefinition<T> {
-    index?: number;
-    format?: any;
-    hasFooter?: boolean;
-    hideInOverlay?: boolean;
-    optionsAttribut?: string;
-    templateOutlet?: TemplateRef<TableContext<T>>;
-    constructor(options?: Partial<ColumnDefinition<T>>);
-}
-
-interface OptionSearchConfig {
-    displayedColumns?: string[];
-    displayColumnDefs?: ColumnDefinition[];
-    close?: boolean;
-}
-
-declare class TableCellIndex {
-    row: number;
-    column: number;
-    constructor(row: number, column: number);
-}
-
-interface TableRow {
-    rowStyle?: {
-        backgroundColor?: string;
-        color?: string;
-        [key: string]: any;
-    };
-    disableSelection?: boolean;
-    [key: string]: any;
-}
-
-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 hidePageSize Whether to hide the page size selector
-     * @param showPageSizeOptions Whether to show page size options
-     * @param showFirstLastButtons Whether to show first/last buttons
-     * @param disabled Whether the paginator is disabled
-     */
-    constructor(pageIndex?: number, // MatPaginator starts at 0
-    pageSize?: number, totalRecords?: number, pageSizeOptions?: number[], hidePageSize?: boolean, showPageSizeOptions?: boolean, showFirstLastButtons?: boolean, disabled?: boolean);
-    /**
-     * 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 DynamicTable<T extends TableRow> implements AfterContentInit, OnChanges, OnInit, OnDestroy {
-    private componentRefs;
-    private embeddedViews;
-    private cdr;
-    readonly showExpand: _angular_core.InputSignal<boolean>;
-    readonly showFooter: _angular_core.InputSignal<boolean>;
-    readonly locale: _angular_core.InputSignal<string>;
-    readonly highlightRowIndex: _angular_core.InputSignal<number>;
-    visibleColumns: string[];
-    columnDefinitions: ColumnDefinition<T>[];
-    readonly showSelectBox: _angular_core.InputSignal<boolean>;
-    readonly multipleSelection: _angular_core.InputSignal<boolean>;
-    readonly tableData: _angular_core.InputSignal<T[]>;
-    readonly rowTemplate: _angular_core.InputSignal<TemplateRef<TableContext<T>> | null>;
-    expandedDetail: TemplateRef<TableContext<T>> | null;
-    readonly enablePagination: _angular_core.InputSignal<boolean>;
-    paginationConfig: Pagination | null;
-    readonly isLoadingData: _angular_core.InputSignal<boolean>;
-    readonly rowSelected: _angular_core.OutputEmitterRef<T[]>;
-    readonly copyRow: _angular_core.OutputEmitterRef<T>;
-    readonly showExpanded: _angular_core.OutputEmitterRef<T>;
-    readonly hideExpanded: _angular_core.OutputEmitterRef<T>;
-    readonly pageEvent: _angular_core.OutputEmitterRef<PageEvent>;
-    isNormalRow: (_: number, row: T) => boolean;
-    isExpandedRow: (_: number, row: T) => boolean;
-    dataSource: MatTableDataSource<T, _angular_material_paginator.MatPaginator>;
-    selection: SelectionModel<T>;
-    expandedElement: T | null;
-    columnsToDisplayWithExpand: string[];
-    readonly headerRowDefs: _angular_core.Signal<readonly MatHeaderRowDef[]>;
-    readonly rowDefs: _angular_core.Signal<readonly MatRowDef<unknown>[]>;
-    readonly footerRowDefs: _angular_core.Signal<readonly MatFooterRowDef[]>;
-    readonly columnDefs: _angular_core.Signal<readonly MatColumnDef[]>;
-    readonly table: _angular_core.Signal<MatTable<any>>;
-    readonly rows: _angular_core.Signal<readonly ViewContainerRef[]>;
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
-    private updateTableData;
-    private updateColumnsToDisplay;
-    private initializeSelection;
-    private registerTableContent;
-    private initializeTable;
-    private cleanupDynamicComponents;
-    isAllSelected(): boolean;
-    masterToggle(): void;
-    checkboxLabel(row?: T): string;
-    selectRow(row: T): void;
-    onExpand(event: Event, element: T): void;
-    getRowStyle(element: T): Record<string, string>;
-    handlePageEvent(e: PageEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicTable<any>, "acp-dynamic-table", never, { "showExpand": { "alias": "showExpand"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "highlightRowIndex": { "alias": "highlightRowIndex"; "required": false; "isSignal": true; }; "visibleColumns": { "alias": "visibleColumns"; "required": false; }; "columnDefinitions": { "alias": "columnDefinitions"; "required": false; }; "showSelectBox": { "alias": "showSelectBox"; "required": false; "isSignal": true; }; "multipleSelection": { "alias": "multipleSelection"; "required": false; "isSignal": true; }; "tableData": { "alias": "tableData"; "required": false; "isSignal": true; }; "rowTemplate": { "alias": "rowTemplate"; "required": false; "isSignal": true; }; "expandedDetail": { "alias": "expandedDetail"; "required": false; }; "enablePagination": { "alias": "enablePagination"; "required": false; "isSignal": true; }; "paginationConfig": { "alias": "paginationConfig"; "required": false; }; "isLoadingData": { "alias": "isLoadingData"; "required": false; "isSignal": true; }; }, { "rowSelected": "rowSelected"; "copyRow": "copyRow"; "showExpanded": "showExpanded"; "hideExpanded": "hideExpanded"; "pageEvent": "pageEvent"; }, ["headerRowDefs", "rowDefs", "footerRowDefs", "columnDefs", "rows"], never, true, never>;
-}
-
 interface TabulatorColumn {
     title: string;
     field: string;
@@ -1210,13 +1021,64 @@ 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 themeService;
-    darkMode$: Observable<boolean>;
-    constructor();
+    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, {}, {}, never, never, true, 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 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 hidePageSize Whether to hide the page size selector
+     * @param showPageSizeOptions Whether to show page size options
+     * @param showFirstLastButtons Whether to show first/last buttons
+     * @param disabled Whether the paginator is disabled
+     */
+    constructor(pageIndex?: number, // MatPaginator starts at 0
+    pageSize?: number, totalRecords?: number, pageSizeOptions?: number[], hidePageSize?: boolean, showPageSizeOptions?: boolean, showFirstLastButtons?: boolean, disabled?: boolean);
+    /**
+     * 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 {
@@ -1377,6 +1239,7 @@ declare class DataGrid<T = any> implements AfterViewInit, OnDestroy, OnChanges {
     infiniteScrollDisabled: _angular_core.InputSignal<boolean>;
     keyboardNavigation: _angular_core.InputSignal<boolean>;
     focusedRowIndex: _angular_core.Signal<number>;
+    highlightedRowIndex: _angular_core.InputSignal<number>;
     sortOnFront: _angular_core.InputSignal<boolean>;
     sortActive: _angular_core.InputSignal<string>;
     sortDirection: _angular_core.InputSignal<SortDirection>;
@@ -1461,7 +1324,99 @@ declare class DataGrid<T = any> implements AfterViewInit, OnDestroy, OnChanges {
     isColumnHide(item: DataGridColumn): boolean;
     getIndex(index: number | undefined, dataIndex: number): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGrid<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataGrid<any>, "acp-data-grid", ["dataGrid"], { "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showColumnMenuButton": { "alias": "showColumnMenuButton"; "required": false; "isSignal": true; }; "toolbarTitle": { "alias": "toolbarTitle"; "required": false; "isSignal": true; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyValuePlaceholder": { "alias": "emptyValuePlaceholder"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "headerExtraTemplate": { "alias": "headerExtraTemplate"; "required": false; "isSignal": true; }; "noResultTemplate": { "alias": "noResultTemplate"; "required": false; "isSignal": true; }; "paginationTemplate": { "alias": "paginationTemplate"; "required": false; "isSignal": true; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "headerCellTemplate": { "alias": "headerCellTemplate"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expansionTemplate": { "alias": "expansionTemplate"; "required": false; "isSignal": true; }; "closeOthersOnExpand": { "alias": "closeOthersOnExpand"; "required": false; "isSignal": true; }; "pageOnFront": { "alias": "pageOnFront"; "required": false; "isSignal": true; }; "showPaginator": { "alias": "showPaginator"; "required": false; "isSignal": true; }; "pageDisabled": { "alias": "pageDisabled"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; "isSignal": true; }; "infiniteScroll": { "alias": "infiniteScroll"; "required": false; "isSignal": true; }; "infiniteScrollThreshold": { "alias": "infiniteScrollThreshold"; "required": false; "isSignal": true; }; "infiniteScrollDisabled": { "alias": "infiniteScrollDisabled"; "required": false; "isSignal": true; }; "keyboardNavigation": { "alias": "keyboardNavigation"; "required": false; "isSignal": true; }; "sortOnFront": { "alias": "sortOnFront"; "required": false; "isSignal": true; }; "sortActive": { "alias": "sortActive"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortDisableClear": { "alias": "sortDisableClear"; "required": false; "isSignal": true; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; "isSignal": true; }; "sortStart": { "alias": "sortStart"; "required": false; "isSignal": true; }; "rowHover": { "alias": "rowHover"; "required": false; "isSignal": true; }; "rowStriped": { "alias": "rowStriped"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "multiSelectable": { "alias": "multiSelectable"; "required": false; "isSignal": true; }; "multiSelectionWithClick": { "alias": "multiSelectionWithClick"; "required": false; "isSignal": true; }; "hideRowSelectionCheckbox": { "alias": "hideRowSelectionCheckbox"; "required": false; "isSignal": true; }; "disableRowClickSelection": { "alias": "disableRowClickSelection"; "required": false; "isSignal": true; }; "rowClassFormatter": { "alias": "rowClassFormatter"; "required": false; "isSignal": true; }; "rowSelected": { "alias": "rowSelected"; "required": false; "isSignal": true; }; "rowSelectionFormatter": { "alias": "rowSelectionFormatter"; "required": false; "isSignal": true; }; "cellSelectable": { "alias": "cellSelectable"; "required": false; "isSignal": true; }; "useContentRowTemplate": { "alias": "useContentRowTemplate"; "required": false; "isSignal": true; }; "useContentHeaderRowTemplate": { "alias": "useContentHeaderRowTemplate"; "required": false; "isSignal": true; }; "useContentFooterRowTemplate": { "alias": "useContentFooterRowTemplate"; "required": false; "isSignal": true; }; "showSummary": { "alias": "showSummary"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; }, { "page": "page"; "sortChange": "sortChange"; "rowClick": "rowClick"; "rowSelectedChange": "rowSelectedChange"; "selectionChange": "selectionChange"; "cellClick": "cellClick"; "cellSelectedChange": "cellSelectedChange"; "expansionChange": "expansionChange"; "rowContextMenu": "rowContextMenu"; "infiniteScrollLoad": "infiniteScrollLoad"; "focusedRowChange": "focusedRowChange"; }, ["rowDefs", "headerRowDefs", "footerRowDefs"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataGrid<any>, "acp-data-grid", ["dataGrid"], { "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showColumnMenuButton": { "alias": "showColumnMenuButton"; "required": false; "isSignal": true; }; "toolbarTitle": { "alias": "toolbarTitle"; "required": false; "isSignal": true; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyValuePlaceholder": { "alias": "emptyValuePlaceholder"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "headerExtraTemplate": { "alias": "headerExtraTemplate"; "required": false; "isSignal": true; }; "noResultTemplate": { "alias": "noResultTemplate"; "required": false; "isSignal": true; }; "paginationTemplate": { "alias": "paginationTemplate"; "required": false; "isSignal": true; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "headerCellTemplate": { "alias": "headerCellTemplate"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expansionTemplate": { "alias": "expansionTemplate"; "required": false; "isSignal": true; }; "closeOthersOnExpand": { "alias": "closeOthersOnExpand"; "required": false; "isSignal": true; }; "pageOnFront": { "alias": "pageOnFront"; "required": false; "isSignal": true; }; "showPaginator": { "alias": "showPaginator"; "required": false; "isSignal": true; }; "pageDisabled": { "alias": "pageDisabled"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; "isSignal": true; }; "infiniteScroll": { "alias": "infiniteScroll"; "required": false; "isSignal": true; }; "infiniteScrollThreshold": { "alias": "infiniteScrollThreshold"; "required": false; "isSignal": true; }; "infiniteScrollDisabled": { "alias": "infiniteScrollDisabled"; "required": false; "isSignal": true; }; "keyboardNavigation": { "alias": "keyboardNavigation"; "required": false; "isSignal": true; }; "highlightedRowIndex": { "alias": "highlightedRowIndex"; "required": false; "isSignal": true; }; "sortOnFront": { "alias": "sortOnFront"; "required": false; "isSignal": true; }; "sortActive": { "alias": "sortActive"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortDisableClear": { "alias": "sortDisableClear"; "required": false; "isSignal": true; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; "isSignal": true; }; "sortStart": { "alias": "sortStart"; "required": false; "isSignal": true; }; "rowHover": { "alias": "rowHover"; "required": false; "isSignal": true; }; "rowStriped": { "alias": "rowStriped"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "multiSelectable": { "alias": "multiSelectable"; "required": false; "isSignal": true; }; "multiSelectionWithClick": { "alias": "multiSelectionWithClick"; "required": false; "isSignal": true; }; "hideRowSelectionCheckbox": { "alias": "hideRowSelectionCheckbox"; "required": false; "isSignal": true; }; "disableRowClickSelection": { "alias": "disableRowClickSelection"; "required": false; "isSignal": true; }; "rowClassFormatter": { "alias": "rowClassFormatter"; "required": false; "isSignal": true; }; "rowSelected": { "alias": "rowSelected"; "required": false; "isSignal": true; }; "rowSelectionFormatter": { "alias": "rowSelectionFormatter"; "required": false; "isSignal": true; }; "cellSelectable": { "alias": "cellSelectable"; "required": false; "isSignal": true; }; "useContentRowTemplate": { "alias": "useContentRowTemplate"; "required": false; "isSignal": true; }; "useContentHeaderRowTemplate": { "alias": "useContentHeaderRowTemplate"; "required": false; "isSignal": true; }; "useContentFooterRowTemplate": { "alias": "useContentFooterRowTemplate"; "required": false; "isSignal": true; }; "showSummary": { "alias": "showSummary"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; }, { "page": "page"; "sortChange": "sortChange"; "rowClick": "rowClick"; "rowSelectedChange": "rowSelectedChange"; "selectionChange": "selectionChange"; "cellClick": "cellClick"; "cellSelectedChange": "cellSelectedChange"; "expansionChange": "expansionChange"; "rowContextMenu": "rowContextMenu"; "infiniteScrollLoad": "infiniteScrollLoad"; "focusedRowChange": "focusedRowChange"; }, ["rowDefs", "headerRowDefs", "footerRowDefs"], never, true, never>;
+}
+
+interface DateRangePickerOptions extends DatexOptions {
+    presetTheme?: 'default' | 'bootstrap' | 'material' | 'custom';
+}
+interface DateRangeValue {
+    startDate: Date;
+    endDate: Date;
+}
+declare class DateRangePicker implements OnInit, OnChanges, OnDestroy, ControlValueAccessor, MatFormFieldControl<DateRangeValue | Date> {
+    static nextId: number;
+    dateInput: ElementRef<HTMLInputElement>;
+    readonly stateChanges: Subject<void>;
+    readonly id: string;
+    readonly controlType = "acp-date-range-picker";
+    readonly autofilled = false;
+    private _focused;
+    private _required;
+    private _value;
+    get focused(): boolean;
+    get empty(): boolean;
+    get shouldLabelFloat(): boolean;
+    get required(): boolean;
+    get value(): DateRangeValue | Date | null;
+    set value(val: DateRangeValue | Date | null);
+    private readonly _errorState;
+    get errorState(): boolean;
+    get userAriaDescribedBy(): string | undefined;
+    get placeholder(): string;
+    get disabled(): boolean;
+    ngControl: any;
+    options: _angular_core.InputSignal<DateRangePickerOptions>;
+    placeholderText: _angular_core.InputSignal<string>;
+    isDisabled: _angular_core.InputSignal<boolean>;
+    inputReadonly: _angular_core.InputSignal<boolean>;
+    label: _angular_core.InputSignal<string | undefined>;
+    hint: _angular_core.InputSignal<string | undefined>;
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    appearance: _angular_core.InputSignal<"fill" | "outline">;
+    calendarIcon: _angular_core.InputSignal<string>;
+    showCalendarButton: _angular_core.InputSignal<boolean>;
+    showCheckbox: _angular_core.InputSignal<boolean>;
+    checkboxChecked: _angular_core.InputSignal<boolean>;
+    checkboxReadonly: _angular_core.InputSignal<boolean>;
+    checkboxAriaLabel: _angular_core.InputSignal<string>;
+    checkboxPosition: _angular_core.InputSignal<"prefix" | "suffix">;
+    dateRangeSelected: _angular_core.OutputEmitterRef<{
+        startDate: Date;
+        endDate: Date;
+        label?: string;
+    }>;
+    pickerShow: _angular_core.OutputEmitterRef<void>;
+    pickerHide: _angular_core.OutputEmitterRef<void>;
+    pickerApply: _angular_core.OutputEmitterRef<void>;
+    pickerCancel: _angular_core.OutputEmitterRef<void>;
+    checkboxChange: _angular_core.OutputEmitterRef<boolean>;
+    private picker?;
+    private isInitialized;
+    private onChange;
+    private onTouched;
+    constructor();
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    setDescribedByIds(_ids: string[]): void;
+    onContainerClick(_event: MouseEvent): void;
+    focus(): void;
+    blur(): void;
+    private initializePicker;
+    private updateOptions;
+    private reinitializePicker;
+    private buildDatexOptions;
+    private getTheme;
+    private setupEventListeners;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    getStartDate(): Date | null;
+    getEndDate(): Date | null;
+    setStartDate(date: Date): void;
+    setEndDate(date: Date): void;
+    updateTheme(theme: DatexTheme): void;
+    updateRanges(ranges: Record<string, [Date, Date]>): void;
+    updateConfiguration(): void;
+    forceReinitialize(): void;
+    onCheckboxToggle(event: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DateRangePicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DateRangePicker, "acp-date-range-picker", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholderText": { "alias": "placeholderText"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "inputReadonly": { "alias": "inputReadonly"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "calendarIcon": { "alias": "calendarIcon"; "required": false; "isSignal": true; }; "showCalendarButton": { "alias": "showCalendarButton"; "required": false; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; "isSignal": true; }; "checkboxChecked": { "alias": "checkboxChecked"; "required": false; "isSignal": true; }; "checkboxReadonly": { "alias": "checkboxReadonly"; "required": false; "isSignal": true; }; "checkboxAriaLabel": { "alias": "checkboxAriaLabel"; "required": false; "isSignal": true; }; "checkboxPosition": { "alias": "checkboxPosition"; "required": false; "isSignal": true; }; }, { "dateRangeSelected": "dateRangeSelected"; "pickerShow": "pickerShow"; "pickerHide": "pickerHide"; "pickerApply": "pickerApply"; "pickerCancel": "pickerCancel"; "checkboxChange": "checkboxChange"; }, never, never, true, never>;
 }
 
 declare class ToUpperCase implements ControlValueAccessor {
@@ -1507,5 +1462,5 @@ declare class StatusDisplayPipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<StatusDisplayPipe, "statusDisplay", true>;
 }
 
-export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, ColumnDefinition, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DialogWrapper, DynamicCard, DynamicSelect, DynamicTable, FieldDefinition, GetTotalPipe, IconRegistryService, InputChip, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TableCellIndex, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
-export type { AutocompleteWrapperActions, AutocompleteWrapperConfig, AutocompleteWrapperEventHandler, AutocompleteWrapperEvents, AutocompleteWrapperFilters, AutocompleteWrapperItem, AutocompleteWrapperItemProperty, AutocompleteWrapperPaginationInfo, AutocompleteWrapperSearchField, AutocompleteWrapperSearchFunction, AutocompleteWrapperSearchMode, AutocompleteWrapperSearchResult, AutocompleteWrapperState, AutocompleteWrapperStockOption, ColumnType, ControlType, DataGridButtonType, DataGridCellTemplate, DataGridColumn, DataGridColumnButton, DataGridColumnButtonBadge, DataGridColumnButtonPop, DataGridColumnButtonTooltip, DataGridColumnPinOption, DataGridColumnPinValue, DataGridColumnTag, DataGridColumnTagValue, DataGridColumnType, DataGridColumnTypeParameter, DataGridDefaultOptions, DataGridMenuItem, DataGridRowClassFormatter, DataGridRowSelectionFormatter, DataGridSortProp, DateRangeConfig, DialogSize, DialogWrapperConfig, FieldType, IconRegistryConfig, MatCustomDialogConfig, OptionSearchConfig, ReusableAutocompleteWrapperComponent, TableContext, TableRow, TabulatorColumn, TabulatorConfig, TabulatorEventHandlers, TabulatorTheme };
+export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
+export type { 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, DialogWrapperConfig, IconRegistryConfig, MatCustomDialogConfig, ReusableAutocompleteWrapperComponent, TabulatorColumn, TabulatorConfig, TabulatorEventHandlers, TabulatorTheme };