@dmlibs/dm-cmps 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmlibs/dm-cmps",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0"

package/types/dmlibs-dm-cmps.d.ts

@@ -5,6 +5,7 @@ import { FormControl } from '@angular/forms';
 import { MatOptionSelectionChange } from '@angular/material/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { TooltipPosition } from '@angular/material/tooltip';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
@@ -734,7 +735,7 @@ interface DmCellContext<T extends object> {
     row: T;
     column: DmTableColumn<T>;
 }
-type DmTableColumnType = 'date' | 'component' | 'tel' | 'mail' | 'link' | 'whatsapp' | 'customHtml' | 'actions' | 'input';
+type DmTableColumnType = 'date' | 'component' | 'tel' | 'mail' | 'link' | 'whatsapp' | 'customHtml' | 'actions' | 'slideToggle' | 'input';
 type DmTableInputColumnType = 'text' | 'number' | 'select' | 'checkbox';
 interface DmTableInputCellSelectOption {
     label: string;
@@ -808,6 +809,8 @@ interface DmTableColumnBase<T extends object> {
     });
     headerMenuItems?: DmTableColumnHeaderMenuItem<T>[];
     headerMenuTooltip?: string;
+    slideToggleTooltip?: string | ((row: T) => string);
+    onSlideToggleChange?: (row: T, change: MatSlideToggleChange) => void;
 }
 type DmTableIndexColumn<T extends object> = {
     type: '$index' | 'actions';
@@ -977,12 +980,11 @@ interface DmTableStyle {
         };
     };
     scrollbar?: {
-        track?: {
-            [key: string]: any;
-        };
-        thumb?: {
-            [key: string]: any;
-        };
+        width?: string;
+        color?: string;
+        hoverColor?: string;
+        backgroundColor?: string;
+        borderRadius?: string;
     };
 }
 interface DmTableClasses {
@@ -1014,11 +1016,222 @@ interface DmTableClasses {
         button?: DmTableNgClass;
     };
 }
+interface DmTableInterface<T extends object> {
+    /**
+     * Table id - An unique identifier for the table, used to store the table state in the localStorage.
+     * @default undefined
+     */
+    tableId: InputSignal<string | undefined>;
+    /**
+     * Table data source - An array of objects that will be displayed in the table.
+     */
+    dataSource: InputSignal<T[]>;
+    /**
+     * Table columns - An array of objects that define the columns of the table.
+     */
+    columns: InputSignal<DmTableColumn<T>[]>;
+    /**
+     * No data message - The message to display when the table is empty.
+     * @default 'אין נתונים להצגה'
+     */
+    noDataMessage: InputSignal<string>;
+    /**
+     * Enable search - Whether to enable search functionality.
+     * @default false
+     */
+    enableSearch: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Search placeholder - The placeholder text to display in the search input.
+     * @default 'חיפוש...'
+     */
+    searchPlaceholder: InputSignal<string>;
+    /**
+     * Clear search tooltip - The tooltip text to display when hovering over the clear search button.
+     * @default 'נקה חיפוש'
+     */
+    clearSearchTooltip: InputSignal<string>;
+    /**
+     * Search input appearance - The appearance of the search input.
+     * @default 'fill'
+     */
+    searchInputAppearance: InputSignal<'fill' | 'outline'>;
+    /**
+     * Filter predicate - A function that defines how to filter the table data.
+     * when undefined, the default filter predicate will be used.
+     * @default null
+     */
+    filterPredicate: InputSignal<((row: T, filterText: string) => boolean) | null>;
+    /**
+     * Action buttons - An array of objects that define the action buttons of the table.
+     * - will be displayed on the left side above the table.
+     * @default []
+     */
+    actionButtons: InputSignal<DmTableActionButton<T>[]>;
+    /**
+     * Enable pagination - Whether to enable pagination functionality.
+     * @default false
+     */
+    enablePagination: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Auto pagination above rows count - The number of rows above which pagination will be enabled automatically.
+     * @default 100
+     */
+    autoPaginationAboveRowsCount: InputSignalWithTransform<number, unknown>;
+    /**
+     * Paginator settings - An object that defines the paginator settings of the table.
+     * @default null
+     */
+    paginatorSettings: InputSignal<DmTablePaginatorSettings>;
+    /**
+     * Enable loading progressbar - whether to enable loading progressbar.
+     * @default true
+     */
+    enableLoadingProgressbar: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enable columns drag and drop - whether to enable columns drag and drop, to change columns order.
+     * @default false
+     */
+    enableColumnsDragAndDrop: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enable columns drag handle - if true, a drag handle will be displayed on the left side of the column header.
+     * @default false
+     */
+    enableColumnsDragHandle: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Enable total row - whether to enable total row.
+     * @default false
+     */
+    enableTotalRow: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Table style - An object that defines the style of the table.
+     * ```
+     * @default {
+    tableWrapper: {
+      'max-height': '800px',
+  
+      width: 'calc(100% - 10px)',
+      display: 'block',
+      'overflow-x': 'auto',
+      padding: '0 5px',
+    },
+    table: {
+      root: {
+        width: '100%',
+        'border-collapse': 'collapse',
+        'border-spacing': 0,
+        'box-shadow': '0px 5px 5px -3px #003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f',
+        padding: 0,
+        'font-size': '1rem',
+        'border-radius': '8px',
+        'page-break-inside': 'auto',
+      },
+      thead: {
+        root: {
+          'background-color': '#f5f5f5',
+        },
+        th: {
+          padding: '20px 15px',
+          'text-align': 'start',
+          'max-width': 'none',
+        },
+      },
+      tbody: {
+        hovered_row_style: {
+          tr: {
+            'background-color': '#f5f5f5',
+          },
+        },
+        even_row_style: {
+          tr: {
+            'background-color': '#ffffff',
+          },
+        },
+        odd_row_style: {
+          tr: {
+            'background-color': '#fafafa',
+          },
+        },
+        tr: {
+          'border-bottom': '1px solid #e0e0e0',
+          'page-break-inside': 'avoid',
+        },
+        td: {
+          padding: '7px 15px',
+          'text-align': 'start',
+          'max-width': 'none',
+          'text-overflow': 'ellipsis',
+          overflow: 'hidden',
+          'white-space': 'nowrap',
+        },
+        input: {
+          background: 'white',
+          border: '1px solid',
+          'border-radius': '3px',
+        },
+      },
+      tfoot: {
+        root: {
+          'background-color': '#f5f5f5',
+        },
+        td: {
+          padding: '20px 15px',
+          'text-align': 'start',
+          'max-width': 'none',
+        },
+      },
+    },
+    paginator: {
+      root: {
+        'background-color': '#f5f5f5',
+      },
+      p: {
+        'margin-bottom': '0',
+      },
+    },
+    total_row_style: {},
+    scrollbar: {},
+  };
+  ```
+     */
+    tableStyle: InputSignal<DmTableStyle>;
+    /**
+     * Table classes - An object that defines the classes of the table.
+     * @default undefined
+     */
+    tableClasses: InputSignal<DmTableClasses | undefined>;
+    /**
+     * Row style function - A function that defines the style of the rows of the table.
+     * @default null
+     */
+    rowStyleFn: InputSignal<((row: T) => {
+        [key: string]: any;
+    }) | null>;
+    /**
+     * Edit columns visibility - whether to enable edit columns visibility.
+     * @default false
+     */
+    editColumnsVisibility: InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Edit columns visibility button - The button to display when edit columns visibility is enabled.
+     * @default null
+     */
+    editColumnsVisibilityButton: InputSignal<DmTableActionButton<T>>;
+    /**
+     * Edit columns visibility select all label - The label to display when select all is enabled.
+     * @default 'הצג את כל העמודות'
+     */
+    editColumnsVisibilitySelectAllLabel: InputSignal<string>;
+    /**
+     * Get modified rows - A function that returns the modified rows of the table.
+     * @returns {T[]} The modified rows of the table.
+     */
+    getModifiedRows: () => T[];
+}
 
-declare class DmTable<T extends object> {
+declare class DmTable<T extends object> implements DmTableInterface<T> {
     protected shiftKeyPressed: _angular_core.WritableSignal<boolean>;
-    onShiftKeyDown(event: Event): void;
-    onShiftKeyUp(event: Event): void;
+    protected onShiftKeyDown(event: Event): void;
+    protected onShiftKeyUp(event: Event): void;
     protected DEFAULT_PAGINATOR_SETTINGS: DmTablePaginatorSettings;
     protected DEFAULT_TABLE_STYLE: DmTableStyle;
     tableId: _angular_core.InputSignal<string | undefined>;
@@ -1037,7 +1250,7 @@ declare class DmTable<T extends object> {
     enablePagination: _angular_core.InputSignalWithTransform<boolean, unknown>;
     autoPaginationAboveRowsCount: _angular_core.InputSignalWithTransform<number, unknown>;
     paginatorSettings: _angular_core.InputSignal<any>;
-    enableLoadingOverlay: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    enableLoadingProgressbar: _angular_core.InputSignalWithTransform<boolean, unknown>;
     enableColumnsDragAndDrop: _angular_core.InputSignalWithTransform<boolean, unknown>;
     enableColumnsDragHandle: _angular_core.InputSignalWithTransform<boolean, unknown>;
     enableTotalRow: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -1051,6 +1264,7 @@ declare class DmTable<T extends object> {
     editColumnsVisibilitySelectAllLabel: _angular_core.InputSignal<string>;
     protected columnsSortState: _angular_core.WritableSignal<DmCmpsDataSourceSort[]>;
     protected mergedTableStyle: _angular_core.Signal<DmTableStyle>;
+    private saveScrollbarStyle;
     protected hoveredRowIndex: _angular_core.WritableSignal<number | null>;
     protected datasource: _angular_core.WritableSignal<DmCmpsDataSource<T>>;
     protected readonly runtimeColumns: _angular_core.Signal<DmTableRuntimeColumn<T>[]>;
@@ -1073,6 +1287,7 @@ declare class DmTable<T extends object> {
     private reconcileColumns;
     private setFilterPredicate;
     protected createCellContext: (row: T, column: DmTableRuntimeColumn<T>) => DmCellContext<T>;
+    protected resetRowCache(row: T): void;
     protected resolveCellValue<T extends object>(row: T, column: DmTableRuntimeColumn<T>): any;
     protected applySearchFilter(event: Event): void;
     protected resetSearch(): void;
@@ -1114,8 +1329,10 @@ declare class DmTable<T extends object> {
     protected inputCellSelectOptionChangeHandler(row: T, column: DmTableRuntimeColumn<T>, option: DmTableInputCellSelectOption, event: MatOptionSelectionChange): void;
     protected inputCellChangeHandler(row: T, column: DmTableRuntimeColumn<T>, event: Event): void;
     protected inputCellCheckboxChangeHandler(row: T, column: DmTableRuntimeColumn<T>, event: MatCheckboxChange): void;
+    protected getSlideToggleTooltip(row: T, column: DmTableRuntimeColumn<T>): string;
+    protected onSlideToggleChange(row: T, column: DmTableRuntimeColumn<T>, change: MatSlideToggleChange): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DmTable<any>, never>;
-    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>;
+    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; }; "enableLoadingProgressbar": { "alias": "enableLoadingProgressbar"; "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>;
 }
 
 export { DmCmpsDataSource, DmColorPicker, DmMatSelect, DmSpinner, DmSpinnerService, DmTable };