@dmlibs/dm-cmps 0.0.3 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/dmlibs-dm-cmps.mjs +1569 -59
  2. package/fesm2022/dmlibs-dm-cmps.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/dmlibs-dm-cmps.d.ts +548 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dmlibs/dm-cmps",
3
- "version": "0.0.3",
3
+ "version": "0.1.0",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^21.0.0",
6
6
  "@angular/core": "^21.0.0"
package/types/dmlibs-dm-cmps.d.ts CHANGED
@@ -1,11 +1,15 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { InputSignal, InputSignalWithTransform, ModelSignal, OutputEmitterRef, OnDestroy } from '@angular/core';
2
+ import { Signal, InputSignal, InputSignalWithTransform, ModelSignal, OutputEmitterRef, OnDestroy, Renderer2, Type, TemplateRef } from '@angular/core';
3
3
  import { MatSelectChange } from '@angular/material/select';
4
4
  import { FormControl } from '@angular/forms';
5
5
  import { MatOptionSelectionChange } from '@angular/material/core';
6
6
  import { MatCheckboxChange } from '@angular/material/checkbox';
7
+ import { TooltipPosition } from '@angular/material/tooltip';
8
+ import { MatMenuTrigger } from '@angular/material/menu';
9
+ import { CdkDragDrop } from '@angular/cdk/drag-drop';
7
10
 
8
11
  interface DmCmpsDataSourceSort {
12
+ id?: string;
9
13
  direction: 'asc' | 'desc';
10
14
  field: string;
11
15
  sortFn?: (a: any, b: any) => number;
@@ -15,6 +19,7 @@ declare class DmCmpsDataSource<T> implements DmCmpsDataSourceConfig<T> {
15
19
  private filteredData;
16
20
  private _resultData;
17
21
  result: _angular_core.WritableSignal<T[]>;
22
+ resultVersion: _angular_core.WritableSignal<number>;
18
23
  private paginationEnabled;
19
24
  private currentPageIndex;
20
25
  private pageSize;
@@ -23,7 +28,8 @@ declare class DmCmpsDataSource<T> implements DmCmpsDataSourceConfig<T> {
23
28
  private searchTerm;
24
29
  private speratedSearch;
25
30
  private filterPredicate;
26
- private filterByObject;
31
+ isLoading: _angular_core.WritableSignal<boolean>;
32
+ private objectToFilterBy;
27
33
  private fieldsToSearchIn;
28
34
  private sortMap;
29
35
  private sortFn;
@@ -40,6 +46,7 @@ declare class DmCmpsDataSource<T> implements DmCmpsDataSourceConfig<T> {
40
46
  setAutoPaginationAboveItemsCount(count: number): void;
41
47
  applyPagination(pageSize?: number): void;
42
48
  setPageSize(pageSize: number): void;
49
+ getPageSize(): number;
43
50
  disablePagination(): void;
44
51
  nextPage(): number;
45
52
  previousPage(): number;
@@ -47,8 +54,14 @@ declare class DmCmpsDataSource<T> implements DmCmpsDataSourceConfig<T> {
47
54
  lastPage(): number;
48
55
  getCurrentPageIndex(): number;
49
56
  getTotalPagesCount(): number;
57
+ getFirstItemIndexInPage(): number;
58
+ getLastItemIndexInPage(): number;
59
+ getTotalResultElementsCount(): number;
60
+ isPaginationEnabled(): boolean;
50
61
  setSearchDebounceTime(milliseconds: number): void;
51
62
  setDatasource(newData: T[]): void;
63
+ getDatasource(): T[];
64
+ getResultData(): T[];
52
65
  private updateResultSignal;
53
66
  search(filterTerm: string): void;
54
67
  private applySearch;
@@ -59,6 +72,7 @@ declare class DmCmpsDataSource<T> implements DmCmpsDataSourceConfig<T> {
59
72
  sortByFields(sortMap: DmCmpsDataSourceSort[]): void;
60
73
  resetSorting(): void;
61
74
  setFilterByObjectFields(filterObj: Partial<T> | null): void;
75
+ getObjectToFilterBy(): Partial<T> | null;
62
76
  private applyObjectFilter;
63
77
  applySperatedSearch(enabled: boolean): void;
64
78
  setPropertiesToSkipInSearch(...props: string[]): void;
@@ -68,6 +82,10 @@ interface DmCmpsDataSourceConfig<T = any> {
68
82
  * Disconnects the data source and performs any necessary cleanup.
69
83
  */
70
84
  disconnect: () => void;
85
+ /**
86
+ * A Signal that emits the loading state of the data source.
87
+ */
88
+ isLoading: Signal<boolean>;
71
89
  /**
72
90
  * Sets auto pagination threshold.
73
91
  * When the number of items exceeds the given count, pagination will be enabled automatically.
@@ -89,6 +107,11 @@ interface DmCmpsDataSourceConfig<T = any> {
89
107
  * @param pageSize Number of items per page, must be at least 5
90
108
  */
91
109
  setPageSize: (pageSize: number) => void;
110
+ /**
111
+ * Gets the page size.
112
+ * @returns page size
113
+ */
114
+ getPageSize: () => number;
92
115
  /**
93
116
  * Disables pagination.
94
117
  */
@@ -123,6 +146,26 @@ interface DmCmpsDataSourceConfig<T = any> {
123
146
  * @returns Total pages count
124
147
  */
125
148
  getTotalPagesCount: () => number;
149
+ /**
150
+ * Gets the index of the first item in the current page.
151
+ * @returns Index of the first item in the current page
152
+ */
153
+ getFirstItemIndexInPage: () => number;
154
+ /**
155
+ * Gets the index of the last item in the current page.
156
+ * @returns Index of the last item in the current page
157
+ */
158
+ getLastItemIndexInPage: () => number;
159
+ /**
160
+ * Gets the total number of elements after filtering, without pagination applied.
161
+ * @returns Total number of result elements
162
+ */
163
+ getTotalResultElementsCount: () => number;
164
+ /**
165
+ * Checks if pagination is enabled.
166
+ * @returns true if pagination is enabled, false otherwise
167
+ */
168
+ isPaginationEnabled: () => boolean;
126
169
  /**
127
170
  * Sets the debounce time for search input.
128
171
  * @param milliseconds Debounce time in milliseconds
@@ -134,6 +177,16 @@ interface DmCmpsDataSourceConfig<T = any> {
134
177
  * @param newData New data array
135
178
  */
136
179
  setDatasource: (newData: T[]) => void;
180
+ /**
181
+ * Gets the current data source array.
182
+ * @returns Current data array
183
+ */
184
+ getDatasource: () => T[];
185
+ /**
186
+ * Get the result data after filtering, sorting, without pagination applied.
187
+ * @returns Result data array
188
+ */
189
+ getResultData: () => T[];
137
190
  /**
138
191
  * Performs a search with the given filter term.
139
192
  * @param filterTerm The term to filter the data
@@ -176,6 +229,11 @@ interface DmCmpsDataSourceConfig<T = any> {
176
229
  * @default null (no filtering)
177
230
  */
178
231
  setFilterByObjectFields: (filterObj: Partial<T> | null) => void;
232
+ /**
233
+ * Gets the object used for filtering by fields.
234
+ * @returns Partial object used for filtering or null if no filtering is applied
235
+ */
236
+ getObjectToFilterBy: () => Partial<T> | null;
179
237
  /**
180
238
  * Enables or disables separated search.
181
239
  * When enabled, the search term is split by spaces and each term is searched separately.
@@ -574,5 +632,491 @@ declare class DmMatSelect<T = any> implements DmMatSelectConfig<T>, OnDestroy {
574
632
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<DmMatSelect<any>, "dm-mat-select", never, { "formFieldClass": { "alias": "formFieldClass"; "required": false; "isSignal": true; }; "wrapperClass": { "alias": "wrapperClass"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "selectAllEnabled": { "alias": "selectAllEnabled"; "required": false; "isSignal": true; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "optionValueKey": { "alias": "optionValueKey"; "required": false; "isSignal": true; }; "optionLabelKey": { "alias": "optionLabelKey"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "emptyOption": { "alias": "emptyOption"; "required": false; "isSignal": true; }; "emptyOptionLabel": { "alias": "emptyOptionLabel"; "required": false; "isSignal": true; }; "emptyOptionValue": { "alias": "emptyOptionValue"; "required": false; "isSignal": true; }; "optionNameFormat": { "alias": "optionNameFormat"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "formControl": { "alias": "formControl"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "searchSectionBackgroundColor": { "alias": "searchSectionBackgroundColor"; "required": false; "isSignal": true; }; "sortBySelectedOnTop": { "alias": "sortBySelectedOnTop"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "noDataLabel": { "alias": "noDataLabel"; "required": false; "isSignal": true; }; "clearSearchAfterSelect": { "alias": "clearSearchAfterSelect"; "required": false; "isSignal": true; }; "clearSearchButtonTooltip": { "alias": "clearSearchButtonTooltip"; "required": false; "isSignal": true; }; "focusSearchInputOnPanelOpen": { "alias": "focusSearchInputOnPanelOpen"; "required": false; "isSignal": true; }; "filterPredicate": { "alias": "filterPredicate"; "required": false; "isSignal": true; }; "propertiesToSkipInSearch": { "alias": "propertiesToSkipInSearch"; "required": false; "isSignal": true; }; "filterText": { "alias": "filterText"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "selectionChange": "selectionChange"; "filterText": "filterTextChange"; }, never, ["[dm-mat-select-suffix]"], true, never>;
575
633
  }
576
634
 
577
- export { DmCmpsDataSource, DmMatSelect };
578
- export type { DmCmpsDataSourceSort };
635
+ interface DmCmpsColor {
636
+ color: string;
637
+ tooltip?: string;
638
+ }
639
+ declare class DmColorPicker {
640
+ colors: _angular_core.InputSignal<DmCmpsColor[]>;
641
+ formControl: _angular_core.InputSignal<FormControl<any> | null>;
642
+ private internalFormControl;
643
+ protected control: _angular_core.Signal<FormControl<any>>;
644
+ width: _angular_core.InputSignal<number>;
645
+ height: _angular_core.InputSignal<number>;
646
+ borderRadius: _angular_core.InputSignal<string | number>;
647
+ protected radius: _angular_core.Signal<string | number>;
648
+ selectedColor: _angular_core.WritableSignal<string>;
649
+ tooltip: _angular_core.InputSignal<string>;
650
+ tooltipPosition: _angular_core.InputSignal<TooltipPosition>;
651
+ customColor: _angular_core.InputSignalWithTransform<boolean, unknown>;
652
+ opacitySlider: _angular_core.InputSignalWithTransform<boolean, unknown>;
653
+ opacitySliderLabel: _angular_core.InputSignal<string>;
654
+ customColorTooltip: _angular_core.InputSignal<string>;
655
+ wrapperClass: _angular_core.InputSignal<string>;
656
+ wrapperStyle: _angular_core.InputSignal<string>;
657
+ onColorChange: _angular_core.OutputEmitterRef<string>;
658
+ value: _angular_core.ModelSignal<string>;
659
+ constructor();
660
+ runEffects(): void;
661
+ ngOnInit(): void;
662
+ onColorSelected(color: string): void;
663
+ _onColorChange(event: any): void;
664
+ formatLabel(value: number): string;
665
+ getOpacity(): number;
666
+ setOpacity(value: string): void;
667
+ onOpacityValueChange(event: Event): void;
668
+ opacityChangeHandler(value: string): void;
669
+ onOpacityChange(opacity: Event): void;
670
+ updateSelectedColor(): void;
671
+ writeValue(value: any): void;
672
+ registerOnChange(fn: any): void;
673
+ registerOnTouched(fn: any): void;
674
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmColorPicker, never>;
675
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<DmColorPicker, "dm-color-picker", never, { "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "formControl": { "alias": "formControl"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "customColor": { "alias": "customColor"; "required": false; "isSignal": true; }; "opacitySlider": { "alias": "opacitySlider"; "required": false; "isSignal": true; }; "opacitySliderLabel": { "alias": "opacitySliderLabel"; "required": false; "isSignal": true; }; "customColorTooltip": { "alias": "customColorTooltip"; "required": false; "isSignal": true; }; "wrapperClass": { "alias": "wrapperClass"; "required": false; "isSignal": true; }; "wrapperStyle": { "alias": "wrapperStyle"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "onColorChange": "onColorChange"; "value": "valueChange"; }, never, never, true, never>;
676
+ }
677
+
678
+ declare class DmSpinnerService {
679
+ visibility$: _angular_core.WritableSignal<boolean>;
680
+ spinnerToShow$: _angular_core.WritableSignal<string>;
681
+ spinnerTasks$: _angular_core.WritableSignal<Set<string>>;
682
+ spinnerText: _angular_core.WritableSignal<string>;
683
+ constructor();
684
+ showSpinner(spinnerId?: string): void;
685
+ startLoading(taskName: string, spinnerId?: string): void;
686
+ stopLoading(taskName: string): void;
687
+ hideSpinner(): void;
688
+ setSpinnerText(text: string): void;
689
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmSpinnerService, never>;
690
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<DmSpinnerService>;
691
+ }
692
+
693
+ declare class DmSpinner {
694
+ protected _spinnerService: DmSpinnerService;
695
+ private renderer;
696
+ protected readonly styleVariables: {
697
+ [key: string]: {
698
+ field: string;
699
+ defaultValue?: string;
700
+ };
701
+ };
702
+ color: _angular_core.InputSignal<string>;
703
+ type: _angular_core.InputSignal<"rounded" | "flower" | "gif">;
704
+ gifSrc: _angular_core.InputSignal<string>;
705
+ size: _angular_core.InputSignal<number>;
706
+ shapeSize: _angular_core.InputSignal<number>;
707
+ speed: _angular_core.InputSignal<number>;
708
+ borderThikness: _angular_core.InputSignal<number>;
709
+ position: _angular_core.InputSignal<"absolute" | "relative" | "fixed">;
710
+ backgroundColor: _angular_core.InputSignal<string>;
711
+ text: _angular_core.InputSignal<string>;
712
+ textColor: _angular_core.InputSignal<string>;
713
+ fontSize: _angular_core.InputSignal<number>;
714
+ textPosition: _angular_core.InputSignal<"center" | "bottom">;
715
+ colors: _angular_core.InputSignal<string[]>;
716
+ backgroundBlur: _angular_core.InputSignalWithTransform<number, unknown>;
717
+ textPositionYOffset: _angular_core.InputSignalWithTransform<number, unknown>;
718
+ private _backgroundBlur;
719
+ name: _angular_core.InputSignal<string>;
720
+ protected spinnerText: _angular_core.WritableSignal<string>;
721
+ constructor(_spinnerService: DmSpinnerService, renderer: Renderer2);
722
+ runEffects(): void;
723
+ ngOnInit(): void;
724
+ ngOnDestroy(): void;
725
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmSpinner, never>;
726
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<DmSpinner, "dm-spinner", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "gifSrc": { "alias": "gifSrc"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shapeSize": { "alias": "shapeSize"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "borderThikness": { "alias": "borderThikness"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "fontSize": { "alias": "fontSize"; "required": false; "isSignal": true; }; "textPosition": { "alias": "textPosition"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "backgroundBlur": { "alias": "backgroundBlur"; "required": false; "isSignal": true; }; "textPositionYOffset": { "alias": "textPositionYOffset"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
727
+ }
728
+
729
+ type DmTableNgClass = string | string[] | Set<string> | {
730
+ [key: string]: any;
731
+ };
732
+ interface DmCellContext<T extends object> {
733
+ $implicit: T;
734
+ row: T;
735
+ column: DmTableColumn<T>;
736
+ }
737
+ type DmTableColumnType = 'date' | 'component' | 'tel' | 'mail' | 'link' | 'whatsapp' | 'customHtml' | 'actions' | 'input';
738
+ type DmTableInputColumnType = 'text' | 'number' | 'select' | 'checkbox';
739
+ interface DmTableInputCellSelectOption {
740
+ label: string;
741
+ value: any;
742
+ }
743
+ interface DmTableColumnState {
744
+ id: string;
745
+ visible: boolean;
746
+ order: number;
747
+ }
748
+ interface DmTableColumnBase<T extends object> {
749
+ id?: string;
750
+ field: keyof T;
751
+ valueGetter?: (row: T) => any;
752
+ dateFormat?: string;
753
+ component?: Type<any>;
754
+ valueSetter?: (row: T, payload: any) => void;
755
+ customHtml?: string;
756
+ customCellTemplate?: TemplateRef<any>;
757
+ actionsButtons?: DmTableRowActionButton<T>[];
758
+ sortable?: boolean;
759
+ sortFn?: (a: T, b: T) => number;
760
+ visible?: boolean;
761
+ cellStyle?: {
762
+ [key: string]: any;
763
+ } | ((row: T) => {
764
+ [key: string]: any;
765
+ });
766
+ headerStyle?: {
767
+ [key: string]: any;
768
+ } | ((datasource: DmCmpsDataSource<T>) => {
769
+ [key: string]: any;
770
+ });
771
+ cellContentStyle?: {
772
+ [key: string]: any;
773
+ } | ((row: T) => {
774
+ [key: string]: any;
775
+ });
776
+ headerContentStyle?: {
777
+ [key: string]: any;
778
+ } | ((datasource: DmCmpsDataSource<T>) => {
779
+ [key: string]: any;
780
+ });
781
+ totalCellStyle?: {
782
+ [key: string]: any;
783
+ } | ((datasource: DmCmpsDataSource<T>) => {
784
+ [key: string]: any;
785
+ });
786
+ onCellClick?: (row: T, event: Event) => void;
787
+ onCellDoubleClick?: (row: T, event: Event) => void;
788
+ onCellContentClick?: (row: T, event: Event) => void;
789
+ onCellContentDoubleClick?: (row: T, event: Event) => void;
790
+ cellContextMenu?: (row: T, event: Event) => void;
791
+ cellContentContextMenu?: (row: T, event: Event) => void;
792
+ onHeaderClick?: (datasource: DmCmpsDataSource<T>, event: Event) => void;
793
+ onHeaderDoubleClick?: (datasource: DmCmpsDataSource<T>, event: Event) => void;
794
+ onHeaderContentClick?: (datasource: DmCmpsDataSource<T>, event: Event) => void;
795
+ onHeaderContentDoubleClick?: (datasource: DmCmpsDataSource<T>, event: Event) => void;
796
+ headerContextMenu?: (datasource: DmCmpsDataSource<T>, event: Event) => void;
797
+ headerContentContextMenu?: (datasource: DmCmpsDataSource<T>, event: Event) => void;
798
+ totalRowValueType?: 'string' | 'html';
799
+ totalRowValueGetter?: (datasource: DmCmpsDataSource<T>) => any;
800
+ inputType?: DmTableInputColumnType;
801
+ inputValidator?: (row: T, value: any) => boolean;
802
+ onInputValidatorFailed?: (row: T, value: any) => void;
803
+ selectOptions?: DmTableInputCellSelectOption[];
804
+ inputStyle?: {
805
+ [key: string]: any;
806
+ } | ((row: T) => {
807
+ [key: string]: any;
808
+ });
809
+ headerMenuItems?: DmTableColumnHeaderMenuItem<T>[];
810
+ headerMenuTooltip?: string;
811
+ }
812
+ type DmTableIndexColumn<T extends object> = {
813
+ type: '$index' | 'actions';
814
+ header: string;
815
+ } & Omit<DmTableColumnBase<T>, 'field'> & {
816
+ field?: keyof T;
817
+ };
818
+ type DmTableDataColumn<T extends object> = {
819
+ type?: DmTableColumnType;
820
+ header: string;
821
+ } & DmTableColumnBase<T>;
822
+ type DmTableColumn<T extends object> = DmTableIndexColumn<T> | DmTableDataColumn<T>;
823
+ type DmTableRuntimeColumn<T extends object> = Omit<DmTableColumn<T>, 'id'> & {
824
+ id: string;
825
+ __cache?: WeakMap<T, any>;
826
+ };
827
+ interface DmTableColumnHeaderMenuItem<T extends object> {
828
+ label: string;
829
+ icon?: string;
830
+ onClick?: (datasource: DmCmpsDataSource<T>, event: Event, closeParentMenus: () => void) => void;
831
+ color?: string;
832
+ backgroundColor?: string;
833
+ helpText?: string;
834
+ showIf?: (datasource: DmCmpsDataSource<T>) => boolean;
835
+ children?: DmTableColumnHeaderMenuItem<T>[];
836
+ }
837
+ type DmTableRowActionButton<T extends object> = {
838
+ label: string;
839
+ buttonType?: 'filled' | 'outlined' | 'tonal' | 'elevated' | 'text';
840
+ icon?: string;
841
+ tooltip?: string;
842
+ backgroundColor?: string;
843
+ color?: string;
844
+ onClick?: (row: T, event: Event, closeParentMenus: () => void) => void;
845
+ children?: DmTableRowActionButton<T>[];
846
+ showIf?: (columns: DmTableColumn<T>[], datasource: DmCmpsDataSource<T>) => boolean;
847
+ } | {
848
+ buttonType?: 'icon';
849
+ icon?: string;
850
+ tooltip?: string;
851
+ backgroundColor?: string;
852
+ color?: string;
853
+ onClick?: (row: T, event: Event, closeParentMenus: () => void) => void;
854
+ children?: DmTableRowActionButton<T>[];
855
+ showIf?: (columns: DmTableColumn<T>[], datasource: DmCmpsDataSource<T>) => boolean;
856
+ };
857
+ type DmTableActionButton<T extends object> = {
858
+ label: string;
859
+ buttonType?: 'filled' | 'outlined' | 'tonal' | 'elevated' | 'text';
860
+ icon?: string;
861
+ tooltip?: string;
862
+ backgroundColor?: string;
863
+ color?: string;
864
+ onClick?: (columns: DmTableColumn<T>[], datasource: DmCmpsDataSource<T>, event: Event, closeParentMenus: () => void) => void;
865
+ children?: DmTableActionButton<T>[];
866
+ showIf?: (columns: DmTableColumn<T>[], datasource: DmCmpsDataSource<T>) => boolean;
867
+ } | {
868
+ buttonType?: 'icon';
869
+ icon?: string;
870
+ tooltip?: string;
871
+ backgroundColor?: string;
872
+ color?: string;
873
+ onClick?: (columns: DmTableColumn<T>[], datasource: DmCmpsDataSource<T>, event: Event, closeParentMenus: () => void) => void;
874
+ children?: DmTableActionButton<T>[];
875
+ showIf?: (columns: DmTableColumn<T>[], datasource: DmCmpsDataSource<T>) => boolean;
876
+ };
877
+ interface DmTablePaginatorSettings {
878
+ pageSize?: number;
879
+ pageSizeOptions?: number[];
880
+ showFirstAndLastPagesButtons?: boolean;
881
+ firstPageButtonLabel?: string;
882
+ lastPageButtonLabel?: string;
883
+ nextPageButtonLabel?: string;
884
+ previousPageButtonLabel?: string;
885
+ numberOfItemsPerPageLabel?: string;
886
+ }
887
+ interface DmTableStyle {
888
+ tableWrapper?: {
889
+ [key: string]: any;
890
+ };
891
+ table?: {
892
+ root?: {
893
+ [key: string]: any;
894
+ };
895
+ thead?: {
896
+ root?: {
897
+ [key: string]: any;
898
+ };
899
+ tr?: {
900
+ [key: string]: any;
901
+ };
902
+ th?: {
903
+ [key: string]: any;
904
+ };
905
+ };
906
+ tbody?: {
907
+ root?: {
908
+ [key: string]: any;
909
+ };
910
+ tr?: {
911
+ [key: string]: any;
912
+ };
913
+ td?: {
914
+ [key: string]: any;
915
+ };
916
+ even_row_style?: {
917
+ tr?: {
918
+ [key: string]: any;
919
+ };
920
+ td?: {
921
+ [key: string]: any;
922
+ };
923
+ };
924
+ odd_row_style?: {
925
+ tr?: {
926
+ [key: string]: any;
927
+ };
928
+ td?: {
929
+ [key: string]: any;
930
+ };
931
+ };
932
+ hovered_row_style?: {
933
+ tr?: {
934
+ [key: string]: any;
935
+ };
936
+ td?: {
937
+ [key: string]: any;
938
+ };
939
+ };
940
+ input?: {
941
+ [key: string]: any;
942
+ };
943
+ };
944
+ tfoot?: {
945
+ root?: {
946
+ [key: string]: any;
947
+ };
948
+ tr?: {
949
+ [key: string]: any;
950
+ };
951
+ td?: {
952
+ [key: string]: any;
953
+ };
954
+ };
955
+ };
956
+ total_row_style?: {
957
+ [key: string]: any;
958
+ };
959
+ paginator?: {
960
+ root?: {
961
+ [key: string]: any;
962
+ };
963
+ p?: {
964
+ [key: string]: any;
965
+ };
966
+ mat_form_field?: {
967
+ [key: string]: any;
968
+ };
969
+ mat_select?: {
970
+ [key: string]: any;
971
+ };
972
+ mat_option?: {
973
+ [key: string]: any;
974
+ };
975
+ button?: {
976
+ [key: string]: any;
977
+ };
978
+ };
979
+ scrollbar?: {
980
+ track?: {
981
+ [key: string]: any;
982
+ };
983
+ thumb?: {
984
+ [key: string]: any;
985
+ };
986
+ };
987
+ }
988
+ interface DmTableClasses {
989
+ tableWrapper?: DmTableNgClass;
990
+ table?: {
991
+ root?: DmTableNgClass;
992
+ thead?: {
993
+ root?: DmTableNgClass;
994
+ tr?: DmTableNgClass;
995
+ th?: DmTableNgClass;
996
+ };
997
+ tbody?: {
998
+ root?: DmTableNgClass;
999
+ tr?: DmTableNgClass;
1000
+ td?: DmTableNgClass;
1001
+ };
1002
+ tfoot?: {
1003
+ root?: DmTableNgClass;
1004
+ tr?: DmTableNgClass;
1005
+ td?: DmTableNgClass;
1006
+ };
1007
+ };
1008
+ paginator?: {
1009
+ root?: DmTableNgClass;
1010
+ p?: DmTableNgClass;
1011
+ mat_form_field?: DmTableNgClass;
1012
+ mat_select?: DmTableNgClass;
1013
+ mat_option?: DmTableNgClass;
1014
+ button?: DmTableNgClass;
1015
+ };
1016
+ }
1017
+
1018
+ declare class DmTable<T extends object> {
1019
+ protected shiftKeyPressed: _angular_core.WritableSignal<boolean>;
1020
+ onShiftKeyDown(event: Event): void;
1021
+ onShiftKeyUp(event: Event): void;
1022
+ protected DEFAULT_PAGINATOR_SETTINGS: DmTablePaginatorSettings;
1023
+ protected DEFAULT_TABLE_STYLE: DmTableStyle;
1024
+ tableId: _angular_core.InputSignal<string | undefined>;
1025
+ dataSource: _angular_core.InputSignal<T[]>;
1026
+ columns: _angular_core.InputSignal<DmTableColumn<T>[]>;
1027
+ noDataMessage: _angular_core.InputSignal<string>;
1028
+ enableSearch: _angular_core.InputSignalWithTransform<boolean, unknown>;
1029
+ searchPlaceholder: _angular_core.InputSignal<string>;
1030
+ clearSearchTooltip: _angular_core.InputSignal<string>;
1031
+ searchInputAppearance: _angular_core.InputSignal<"fill" | "outline">;
1032
+ filterPredicate: _angular_core.InputSignal<((row: T, filterText: string) => boolean) | null>;
1033
+ private _filterPredicate;
1034
+ actionButtons: _angular_core.InputSignal<DmTableActionButton<T>[]>;
1035
+ enablePrint: _angular_core.InputSignalWithTransform<boolean, unknown>;
1036
+ printButton: _angular_core.InputSignal<DmTableActionButton<T>>;
1037
+ enablePagination: _angular_core.InputSignalWithTransform<boolean, unknown>;
1038
+ autoPaginationAboveRowsCount: _angular_core.InputSignalWithTransform<number, unknown>;
1039
+ paginatorSettings: _angular_core.InputSignal<any>;
1040
+ enableLoadingOverlay: _angular_core.InputSignalWithTransform<boolean, unknown>;
1041
+ enableColumnsDragAndDrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
1042
+ enableColumnsDragHandle: _angular_core.InputSignalWithTransform<boolean, unknown>;
1043
+ enableTotalRow: _angular_core.InputSignalWithTransform<boolean, unknown>;
1044
+ tableStyle: _angular_core.InputSignal<DmTableStyle>;
1045
+ tableClasses: _angular_core.InputSignal<DmTableClasses | undefined>;
1046
+ rowStyleFn: _angular_core.InputSignal<((row: T) => {
1047
+ [key: string]: any;
1048
+ }) | null>;
1049
+ editColumnsVisibility: _angular_core.InputSignalWithTransform<boolean, unknown>;
1050
+ editColumnsVisibilityButton: _angular_core.InputSignal<DmTableActionButton<T>>;
1051
+ editColumnsVisibilitySelectAllLabel: _angular_core.InputSignal<string>;
1052
+ protected columnsSortState: _angular_core.WritableSignal<DmCmpsDataSourceSort[]>;
1053
+ protected mergedTableStyle: _angular_core.Signal<DmTableStyle>;
1054
+ protected hoveredRowIndex: _angular_core.WritableSignal<number | null>;
1055
+ protected datasource: _angular_core.WritableSignal<DmCmpsDataSource<T>>;
1056
+ protected readonly runtimeColumns: _angular_core.Signal<DmTableRuntimeColumn<T>[]>;
1057
+ protected hoveredColumnHeaderIndex: _angular_core.WritableSignal<number | null>;
1058
+ private columnStateStorage;
1059
+ protected columnState: _angular_core.WritableSignal<DmTableColumnState[] | null>;
1060
+ protected readonly visibleRuntimeColumns: _angular_core.Signal<DmTableRuntimeColumn<T>[]>;
1061
+ protected readonly visibleColumns: _angular_core.Signal<DmTableColumn<T>[]>;
1062
+ private prevColumns;
1063
+ rowIdentifierField: _angular_core.InputSignal<keyof T>;
1064
+ private modifiedRowsIds;
1065
+ protected searchTerm: _angular_core.WritableSignal<string>;
1066
+ protected readonly totalRowValues: _angular_core.Signal<Map<string, any>>;
1067
+ protected readonly totalRowStyles: _angular_core.Signal<Map<string, Record<string, any>>>;
1068
+ constructor();
1069
+ private runEffects;
1070
+ private initColumnState;
1071
+ private normalizeColumns;
1072
+ private isSameColumnDefinition;
1073
+ private reconcileColumns;
1074
+ private setFilterPredicate;
1075
+ protected createCellContext: (row: T, column: DmTableRuntimeColumn<T>) => DmCellContext<T>;
1076
+ protected resolveCellValue<T extends object>(row: T, column: DmTableRuntimeColumn<T>): any;
1077
+ protected applySearchFilter(event: Event): void;
1078
+ protected resetSearch(): void;
1079
+ printTable: () => void;
1080
+ protected onPageSizeChange(event: MatOptionSelectionChange, option: number): void;
1081
+ protected getFooterTdStyle(column: DmTableRuntimeColumn<T>): {
1082
+ [x: string]: any;
1083
+ };
1084
+ protected getHeaderThStyle(column: DmTableRuntimeColumn<T>): any;
1085
+ protected getHeaderThContentStyle(column: DmTableRuntimeColumn<T>): any;
1086
+ protected getBodyTdStyle(i: number, column: DmTableRuntimeColumn<T>, row: T): Record<string, any>;
1087
+ protected getBodyTdContentStyle(i: number, column: DmTableRuntimeColumn<T>, row: T): Record<string, any>;
1088
+ protected getBodyRowStyle(i: number, row: T): Record<string, any>;
1089
+ protected getInputStyle(column: DmTableRuntimeColumn<T>): Record<string, any>;
1090
+ protected headerClickHandler(column: DmTableRuntimeColumn<T>, event: Event): void;
1091
+ protected headerDoubleClickHandler(column: DmTableRuntimeColumn<T>, event: Event): void;
1092
+ protected headerContextMenuHandler(column: DmTableRuntimeColumn<T>, event: Event): void;
1093
+ protected headerContentClickHandler(column: DmTableRuntimeColumn<T>, event: Event): void;
1094
+ protected headerContentDoubleClickHandler(column: DmTableRuntimeColumn<T>, event: Event): void;
1095
+ protected headerContentContextMenuHandler(column: DmTableRuntimeColumn<T>, event: Event): void;
1096
+ protected cellClickHandler(row: T, column: DmTableRuntimeColumn<T>, event: Event): void;
1097
+ protected cellDoubleClickHandler(row: T, column: DmTableRuntimeColumn<T>, event: Event): void;
1098
+ protected cellContextMenuHandler(row: T, column: DmTableRuntimeColumn<T>, event: Event): void;
1099
+ protected cellContentClickHandler(row: T, column: DmTableRuntimeColumn<T>, event: Event): void;
1100
+ protected cellContentDoubleClickHandler(row: T, column: DmTableRuntimeColumn<T>, event: Event): void;
1101
+ protected cellContentContextMenuHandler(row: T, column: DmTableRuntimeColumn<T>, event: Event): void;
1102
+ protected getCloseParentMenusFn: (rootTrigger: MatMenuTrigger) => (() => void);
1103
+ protected onColumnDrop(event: CdkDragDrop<DmTableRuntimeColumn<T>[]>): void;
1104
+ protected isAllColumnsVisible(): boolean;
1105
+ protected toggleAllColumnsVisibility(event: MatCheckboxChange): void;
1106
+ protected isColumnVisible(column: DmTableRuntimeColumn<T>): boolean;
1107
+ protected toggleColumnVisibility(event: MatCheckboxChange, column: DmTableRuntimeColumn<T>): void;
1108
+ protected isColumnSorted(column: DmTableRuntimeColumn<T>): (DmCmpsDataSourceSort & {
1109
+ index: number;
1110
+ }) | null;
1111
+ protected columnHeaderSortClickHandler(column: DmTableRuntimeColumn<T>, event: Event): void;
1112
+ private markRowAsModified;
1113
+ getModifiedRows(): T[];
1114
+ protected inputCellSelectOptionChangeHandler(row: T, column: DmTableRuntimeColumn<T>, option: DmTableInputCellSelectOption, event: MatOptionSelectionChange): void;
1115
+ protected inputCellChangeHandler(row: T, column: DmTableRuntimeColumn<T>, event: Event): void;
1116
+ protected inputCellCheckboxChangeHandler(row: T, column: DmTableRuntimeColumn<T>, event: MatCheckboxChange): void;
1117
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmTable<any>, never>;
1118
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<DmTable<any>, "dm-table", never, { "tableId": { "alias": "tableId"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "noDataMessage": { "alias": "noDataMessage"; "required": false; "isSignal": true; }; "enableSearch": { "alias": "enableSearch"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "clearSearchTooltip": { "alias": "clearSearchTooltip"; "required": false; "isSignal": true; }; "searchInputAppearance": { "alias": "searchInputAppearance"; "required": false; "isSignal": true; }; "filterPredicate": { "alias": "filterPredicate"; "required": false; "isSignal": true; }; "actionButtons": { "alias": "actionButtons"; "required": false; "isSignal": true; }; "enablePrint": { "alias": "enablePrint"; "required": false; "isSignal": true; }; "printButton": { "alias": "printButton"; "required": false; "isSignal": true; }; "enablePagination": { "alias": "enablePagination"; "required": false; "isSignal": true; }; "autoPaginationAboveRowsCount": { "alias": "autoPaginationAboveRowsCount"; "required": false; "isSignal": true; }; "paginatorSettings": { "alias": "paginatorSettings"; "required": false; "isSignal": true; }; "enableLoadingOverlay": { "alias": "enableLoadingOverlay"; "required": false; "isSignal": true; }; "enableColumnsDragAndDrop": { "alias": "enableColumnsDragAndDrop"; "required": false; "isSignal": true; }; "enableColumnsDragHandle": { "alias": "enableColumnsDragHandle"; "required": false; "isSignal": true; }; "enableTotalRow": { "alias": "enableTotalRow"; "required": false; "isSignal": true; }; "tableStyle": { "alias": "tableStyle"; "required": false; "isSignal": true; }; "tableClasses": { "alias": "tableClasses"; "required": false; "isSignal": true; }; "rowStyleFn": { "alias": "rowStyleFn"; "required": false; "isSignal": true; }; "editColumnsVisibility": { "alias": "editColumnsVisibility"; "required": false; "isSignal": true; }; "editColumnsVisibilityButton": { "alias": "editColumnsVisibilityButton"; "required": false; "isSignal": true; }; "editColumnsVisibilitySelectAllLabel": { "alias": "editColumnsVisibilitySelectAllLabel"; "required": false; "isSignal": true; }; "rowIdentifierField": { "alias": "rowIdentifierField"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
1119
+ }
1120
+
1121
+ export { DmCmpsDataSource, DmColorPicker, DmMatSelect, DmSpinner, DmSpinnerService, DmTable };
1122
+ export type { DmCmpsDataSourceSort, DmTableActionButton, DmTableColumn };