cats-data-grid 2.0.69 → 2.0.72

package/index.d.ts

@@ -117,6 +117,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     activeGroupsEvent: EventEmitter<any[]>;
     dynamicGroupingFiltering: boolean;
     isRowsEditable: boolean;
+    showSkeleton: boolean;
     atLeastOneColumnChecked: boolean;
     draggedRowData: any;
     firstCol: any;
@@ -137,6 +138,10 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     centerArea: any;
     groupingDisabled: boolean;
     draggableColumn: any;
+    skeletonRowsLength: number;
+    skeletonColsLength: number;
+    skeletonRows: any;
+    skeletonCols: any;
     constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -501,7 +506,7 @@ declare class CatsDataGridComponent implements OnChanges, OnInit {
     onCellEditSave(): void;
     setFieldValue(row: any, field: string, value: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CatsDataGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": false; }; "colDefs": { "alias": "colDefs"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "rowId": { "alias": "rowId"; "required": false; }; "bigRows": { "alias": "bigRows"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupByRequired": { "alias": "groupByRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "groupByField": { "alias": "groupByField"; "required": false; }; "appliedFilters": { "alias": "appliedFilters"; "required": false; }; "rowGripFieldName": { "alias": "rowGripFieldName"; "required": false; }; "pageNumber": { "alias": "pageNumber"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; "isRowsEditable": { "alias": "isRowsEditable"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "onHideSettings": "onHideSettings"; "onCellEdit": "onCellEdit"; "onColCongifgChange": "onColCongifgChange"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; "onRowClicked": "onRowClicked"; "onCellClicked": "onCellClicked"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CatsDataGridComponent, "cats-data-grid", never, { "tableOptions": { "alias": "tableOptions"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "rowData": { "alias": "rowData"; "required": true; }; "colDefs": { "alias": "colDefs"; "required": true; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "selectedRowEmpty": { "alias": "selectedRowEmpty"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "rowId": { "alias": "rowId"; "required": false; }; "bigRows": { "alias": "bigRows"; "required": false; }; "height": { "alias": "height"; "required": false; }; "groupByRequired": { "alias": "groupByRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "groupByField": { "alias": "groupByField"; "required": false; }; "appliedFilters": { "alias": "appliedFilters"; "required": false; }; "rowGripFieldName": { "alias": "rowGripFieldName"; "required": false; }; "pageNumber": { "alias": "pageNumber"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "dynamicGroupingFiltering": { "alias": "dynamicGroupingFiltering"; "required": false; }; "isRowsEditable": { "alias": "isRowsEditable"; "required": false; }; "showSkeleton": { "alias": "showSkeleton"; "required": false; }; "skeletonRowsLength": { "alias": "skeletonRowsLength"; "required": false; }; "skeletonColsLength": { "alias": "skeletonColsLength"; "required": false; }; }, { "onPaginationChange": "onPaginationChange"; "onCheckboxSelection": "onCheckboxSelection"; "onScrollEmitter": "onScrollEmitter"; "filter": "filter"; "onHideSettings": "onHideSettings"; "onCellEdit": "onCellEdit"; "onColCongifgChange": "onColCongifgChange"; "appliedFiltersEvent": "appliedFiltersEvent"; "activeGroupsEvent": "activeGroupsEvent"; "onRowClicked": "onRowClicked"; "onCellClicked": "onCellClicked"; }, never, never, true, never>;
 }
 
 declare class CommonRendererComponent {
@@ -747,6 +752,7 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
     rowOptionsResolver: (node: T, level: number, path: T[]) => CatsTreeRowOptions;
     nodeIconResolver: (node: T, level: number, path: T[], expanded: boolean) => string | null;
     linkResolver: (node: T, level: number, path: T[]) => string | null;
+    showSkeleton: boolean;
     nodeToggle: EventEmitter<CatsTreeExpandEvent<T>>;
     selectionChange: EventEmitter<CatsTreeSelectionChangeEvent<T>>;
     linkClick: EventEmitter<CatsTreeLinkClickEvent<T>>;
@@ -786,6 +792,10 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
     atLeastOneColumnChecked: boolean;
     selectedRow: T[];
     originalColumns: CatsTreeTableColumn[];
+    skeletonRowsLength: number;
+    skeletonColsLength: number;
+    skeletonRows: any;
+    skeletonCols: any;
     private removeMouseMove;
     private removeMouseUp;
     private rafId;
@@ -805,6 +815,7 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
     private fallbackKey;
     private fallbackSeq;
     private resolvedTreeColumnField?;
+    activeColumns: CatsTreeTableColumn[];
     constructor(renderer: Renderer2, zone: NgZone, cd: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -833,13 +844,10 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
      * Apply sorting to the row data
      */
     private applySort;
-    /**
-     * Apply all active filters
-     */
-    applyAllFilters(): void;
+    applyAllFilters(col?: any): void;
+    private filterTreeByColumn;
+    private matchesSingleColumn;
     private expandAllParentsAfterFilter;
-    private filterTree;
-    private matchesAllFilters;
     /**
      * Evaluate text filter condition
      */
@@ -1099,7 +1107,7 @@ declare class CommonTreeTableComponent<T = any> implements OnChanges, DoCheck, A
      */
     toggleSelectAll(col: any, event: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CommonTreeTableComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CommonTreeTableComponent<any>, "cats-tree-table", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "tableOptions": { "alias": "tableOptions"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "labelField": { "alias": "labelField"; "required": false; }; "childrenField": { "alias": "childrenField"; "required": false; }; "treeColumnField": { "alias": "treeColumnField"; "required": false; }; "indentPx": { "alias": "indentPx"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "expandIcon": { "alias": "expandIcon"; "required": false; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; }; "iconBasePath": { "alias": "iconBasePath"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showNodeIcon": { "alias": "showNodeIcon"; "required": false; }; "noDataText": { "alias": "noDataText"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "emitExpandAlways": { "alias": "emitExpandAlways"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "rowOptionsResolver": { "alias": "rowOptionsResolver"; "required": false; }; "nodeIconResolver": { "alias": "nodeIconResolver"; "required": false; }; "linkResolver": { "alias": "linkResolver"; "required": false; }; }, { "nodeToggle": "nodeToggle"; "selectionChange": "selectionChange"; "linkClick": "linkClick"; "linkDoubleClick": "linkDoubleClick"; "onHideSettings": "onHideSettings"; "onPaginationChange": "onPaginationChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommonTreeTableComponent<any>, "cats-tree-table", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "tableOptions": { "alias": "tableOptions"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "labelField": { "alias": "labelField"; "required": false; }; "childrenField": { "alias": "childrenField"; "required": false; }; "treeColumnField": { "alias": "treeColumnField"; "required": false; }; "indentPx": { "alias": "indentPx"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "expandIcon": { "alias": "expandIcon"; "required": false; }; "collapseIcon": { "alias": "collapseIcon"; "required": false; }; "iconBasePath": { "alias": "iconBasePath"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "showNodeIcon": { "alias": "showNodeIcon"; "required": false; }; "noDataText": { "alias": "noDataText"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "emitExpandAlways": { "alias": "emitExpandAlways"; "required": false; }; "sortingRequired": { "alias": "sortingRequired"; "required": false; }; "filterRequired": { "alias": "filterRequired"; "required": false; }; "threeDotsMenuRequired": { "alias": "threeDotsMenuRequired"; "required": false; }; "settingsRequired": { "alias": "settingsRequired"; "required": false; }; "settingsClicked": { "alias": "settingsClicked"; "required": false; }; "checkBoxSelection": { "alias": "checkBoxSelection"; "required": false; }; "checkboxSelectionType": { "alias": "checkboxSelectionType"; "required": false; }; "paginationRequired": { "alias": "paginationRequired"; "required": false; }; "pageSizeList": { "alias": "pageSizeList"; "required": false; }; "totalRecords": { "alias": "totalRecords"; "required": false; }; "resetPage": { "alias": "resetPage"; "required": false; }; "isExpandable": { "alias": "isExpandable"; "required": false; }; "rowOptionsResolver": { "alias": "rowOptionsResolver"; "required": false; }; "nodeIconResolver": { "alias": "nodeIconResolver"; "required": false; }; "linkResolver": { "alias": "linkResolver"; "required": false; }; "showSkeleton": { "alias": "showSkeleton"; "required": false; }; "skeletonRowsLength": { "alias": "skeletonRowsLength"; "required": false; }; "skeletonColsLength": { "alias": "skeletonColsLength"; "required": false; }; }, { "nodeToggle": "nodeToggle"; "selectionChange": "selectionChange"; "linkClick": "linkClick"; "linkDoubleClick": "linkDoubleClick"; "onHideSettings": "onHideSettings"; "onPaginationChange": "onPaginationChange"; }, never, never, true, never>;
 }
 
 type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'adaptive';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cats-data-grid",
-  "version": "2.0.69",
+  "version": "2.0.72",
   "peerDependencies": {
     "@angular/core": ">=18 <22",
     "@angular/common": ">=18 <22"

package/styles/_index.scss

@@ -1,3 +1,3 @@
-@forward "sass-utils";
-@forward "component";
-@forward "base";
+@forward "sass-utils";
+@forward "component";
+@forward "base";

package/styles/base/_fonts.scss

@@ -1,74 +1,74 @@
-// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
-
-@use "../sass-utils" as *;
-
-:root {
-  --fs-6: 6px;
-  --fs-12: 12px;
-  --fs-14: 14px;
-  --fs-16: 16px;
-  --fs-18: 18px;
-  --fs-20: 20px;
-  --fs-24: 24px;
-  --fs-28: 28px;
-  --fs-30: 30px;
-  --fs-32: 32px;
-  --fs-42: 42px;
-  --fs-48: 48px;
-  --img-w: 28px;
-  --scale: 1;
-}
-
-@include width-range($tablet, $mediumDesktop) {
-  :root {
-    --scale: 1.5;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
-
-@include width-range($largeDesktop, $extraLargeDesktop) {
-  :root {
-    --scale: 1.33;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
-
-@include width-range($xxlargeDesktop, $ultraWideDesktop) {
-  :root {
-    --scale: 1.25;
-    --fs-6: calc(6px / var(--scale));
-    --fs-12: calc(12px / var(--scale));
-    --fs-14: calc(14px / var(--scale));
-    --fs-16: calc(16px / var(--scale));
-    --fs-18: calc(18px / var(--scale));
-    --fs-20: calc(20px / var(--scale));
-    --fs-24: calc(24px / var(--scale));
-    --fs-28: calc(28px / var(--scale));
-    --fs-30: calc(30px / var(--scale));
-    --fs-32: calc(32px / var(--scale));
-    --fs-42: calc(42px / var(--scale));
-    --fs-48: calc(48px / var(--scale));
-  }
-}
+// @use url("https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap");
+
+@use "../sass-utils" as *;
+
+:root {
+  --fs-6: 6px;
+  --fs-12: 12px;
+  --fs-14: 14px;
+  --fs-16: 16px;
+  --fs-18: 18px;
+  --fs-20: 20px;
+  --fs-24: 24px;
+  --fs-28: 28px;
+  --fs-30: 30px;
+  --fs-32: 32px;
+  --fs-42: 42px;
+  --fs-48: 48px;
+  --img-w: 28px;
+  --scale: 1;
+}
+
+@include width-range($tablet, $mediumDesktop) {
+  :root {
+    --scale: 1.5;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}
+
+@include width-range($largeDesktop, $extraLargeDesktop) {
+  :root {
+    --scale: 1.33;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}
+
+@include width-range($xxlargeDesktop, $ultraWideDesktop) {
+  :root {
+    --scale: 1.25;
+    --fs-6: calc(6px / var(--scale));
+    --fs-12: calc(12px / var(--scale));
+    --fs-14: calc(14px / var(--scale));
+    --fs-16: calc(16px / var(--scale));
+    --fs-18: calc(18px / var(--scale));
+    --fs-20: calc(20px / var(--scale));
+    --fs-24: calc(24px / var(--scale));
+    --fs-28: calc(28px / var(--scale));
+    --fs-30: calc(30px / var(--scale));
+    --fs-32: calc(32px / var(--scale));
+    --fs-42: calc(42px / var(--scale));
+    --fs-48: calc(48px / var(--scale));
+  }
+}

package/styles/base/_index.scss

@@ -1,2 +1,2 @@
-@forward "./reset";
+@forward "./reset";
 @forward "./fonts";

package/styles/base/_reset.scss

@@ -1,60 +1,60 @@
-// Box Sizing
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  // font-family: "Open Sans", sans-serif;
-}
-
-body {
-  font-size: 100%;
-}
-
-// Font-inflation
-html {
-  -moz-text-size-adjust: none;
-  -webkit-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-  text-size-adjust: none;
-}
-
-// Remove default margin and padding
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-ul,
-ol,
-p {
-  margin: 0;
-  padding: 0;
-  text-wrap: pretty;
-}
-
-// Remove list styles on ul, ol elements
-ul[role="list"],
-ol[role="list"] {
-  list-style: none;
-}
-
-ul {
-  list-style: none;
-}
-
-// images
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-input,
-select,
-textarea {
-  outline: none;
-  box-shadow: none;
-}
+// Box Sizing
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  // font-family: "Open Sans", sans-serif;
+}
+
+body {
+  font-size: 100%;
+}
+
+// Font-inflation
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+// Remove default margin and padding
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+p {
+  margin: 0;
+  padding: 0;
+  text-wrap: pretty;
+}
+
+// Remove list styles on ul, ol elements
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+ul {
+  list-style: none;
+}
+
+// images
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+select,
+textarea {
+  outline: none;
+  box-shadow: none;
+}