@one-paragon/angular-utilities 2.3.17 → 2.4.1

package/fesm2022/one-paragon-angular-utilities.mjs

@@ -2869,8 +2869,8 @@ class TableStore extends ComponentStore {
         this.$footerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseFooter);
         this.$headerCollapsed = this.selectSignal(state => state.persistedTableSettings.collapseHeader);
         this.$groupBy = this.selectSignal(state => state.groupBy);
-        this.$groupByKeys = this.selectSignal(this.$groupBy, this.$metaDataArray, (gb, mds) => gb.map(gbk => gbk.key).filter(bg => mds.some(md => md.key === bg)), {
-            equal: (prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)
+        this.$groupByData = this.selectSignal(this.$groupBy, this.$metaDataArray, (gb, mds) => gb.filter(bg => mds.some(md => md.key === bg.key)), {
+            equal: (prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i].key === k.key)
         });
         this.groupByKeys$ = this.select(state => state.groupBy.map(gbk => gbk.key))
             .pipe(distinctUntilChanged((prev, curr) => prev.length === curr.length && curr.every((k, i) => prev[i] === k)));
@@ -2887,6 +2887,7 @@ class TableStore extends ComponentStore {
         this.$getIsExpanded = (columnKey, groupUniqueName) => {
             return this.selectSignal(state => !!state.groupBy.filter(g => g.key === columnKey && g.expandedHeaders.includes(groupUniqueName)).length);
         };
+        this.$sortedGroupsUpdates = this.selectSignal(state => state.groupBy, { equal: (a, b) => sortsAreSame(a.map(g => ({ active: g.key, direction: g.sort })), b.map(g => ({ active: g.key, direction: g.sort }))) });
         this.$currentPage = this.selectSignal(state => state.currentPage);
         this.$pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
         this.$showAll = this.selectSignal(s => s.userDefined?.showAll ?? s.showAll);
@@ -3111,7 +3112,7 @@ class TableStore extends ComponentStore {
         });
         this.addGroupByKey = this.updater((state, metaDataKey) => ({
             ...state,
-            groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [] }]
+            groupBy: [...state.groupBy, { key: metaDataKey, expandedHeaders: [], sort: '' }]
         }));
         this.removeGroupByKey = this.updater((state, groupByKey) => ({
             ...state,
@@ -3135,15 +3136,47 @@ class TableStore extends ComponentStore {
         });
         this.collapseAll = this.updater((state) => ({
             ...state,
-            groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [] }))
+            groupBy: state.groupBy.map(gb => ({ key: gb.key, expandedHeaders: [], sort: gb.sort }))
         }));
         this.collapseAllOfKey = this.updater((state, data) => ({
             ...state,
             groupBy: state.groupBy.map(gb => ({
                 key: gb.key,
-                expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders
+                expandedHeaders: data.keys.includes(gb.key) ? [] : gb.expandedHeaders,
+                sort: gb.sort,
             }))
         }));
+        this.updateGroupBySort = this.updater((state, data) => {
+            const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === data.key, gb => {
+                gb.sort = data.sort;
+            });
+            return ({ ...state, groupBy: newGroupedData });
+        });
+        this.getGroupBySortDirection = (key) => computed(() => {
+            const groupBy = this.state().groupBy.find(gb => gb.key === key);
+            return groupBy ? groupBy.sort : '';
+        });
+        this.cycleGroupBySortDirection = this.updater((state, key) => {
+            const currentGroupBy = state.groupBy.find(gb => gb.key === key);
+            if (!currentGroupBy)
+                return state;
+            let nextSort;
+            switch (currentGroupBy.sort) {
+                case '':
+                    nextSort = 'asc';
+                    break;
+                case 'asc':
+                    nextSort = 'desc';
+                    break;
+                case 'desc':
+                    nextSort = '';
+                    break;
+            }
+            const newGroupedData = replaceInArrayWithClone(state.groupBy, gb => gb.key === key, gb => {
+                gb.sort = nextSort;
+            });
+            return ({ ...state, groupBy: newGroupedData });
+        });
         this.setLinkMaps = this.updater((state, maps) => {
             return ({ ...state, linkMaps: maps });
         });
@@ -3950,7 +3983,7 @@ class InitializationComponent {
         this.$defaultWithIcon = viewChild.required('defaultWithIcon');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "$linkTemplate", first: true, predicate: ["link"], descendants: true, isSignal: true }, { propertyName: "$routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, isSignal: true }, { propertyName: "$linkWithIconTemplate", first: true, predicate: ["linkWithIcon"], descendants: true, isSignal: true }, { propertyName: "$routerLinkWithIconTemplate", first: true, predicate: ["routerLinkWithIcon"], descendants: true, isSignal: true }, { propertyName: "$imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, isSignal: true }, { propertyName: "$arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, isSignal: true }, { propertyName: "$arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, isSignal: true }, { propertyName: "$defaultTemplate", first: true, predicate: ["default"], descendants: true, isSignal: true }, { propertyName: "$defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n      <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-router-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n      <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n    </tb-router-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n\r\n</ng-template>\r\n\r\n<ng-template #linkWithIcon  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\"  [link]=\"$any(link)\">\r\n      <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #routerLinkWithIcon  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\"  [link]=\"$any(link)\">\r\n      <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img height=\"75px\" width=\"75px\" [src]=\"value\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n  <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n  <mat-icon [styler]=\"styles\" [element]=\"element\">{{value}}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["element", "additional", "link"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element", "link"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "pipe", type: FunctionPipe, name: "func" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "$linkTemplate", first: true, predicate: ["link"], descendants: true, isSignal: true }, { propertyName: "$routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, isSignal: true }, { propertyName: "$linkWithIconTemplate", first: true, predicate: ["linkWithIcon"], descendants: true, isSignal: true }, { propertyName: "$routerLinkWithIconTemplate", first: true, predicate: ["routerLinkWithIcon"], descendants: true, isSignal: true }, { propertyName: "$imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, isSignal: true }, { propertyName: "$arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, isSignal: true }, { propertyName: "$arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, isSignal: true }, { propertyName: "$defaultTemplate", first: true, predicate: ["default"], descendants: true, isSignal: true }, { propertyName: "$defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n      <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-router-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n      <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n    </tb-router-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n\r\n</ng-template>\r\n\r\n<ng-template #linkWithIcon  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\"  [link]=\"$any(link)\">\r\n      <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #routerLinkWithIcon  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\"  [link]=\"$any(link)\">\r\n      <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img height=\"75px\" width=\"75px\" [src]=\"value\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n  <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n  <mat-icon [styler]=\"styles\" [element]=\"element\">{{value}}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["element", "additional", "link"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element", "link"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: InitializationComponent, decorators: [{
             type: Component,
@@ -3958,7 +3991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
                         RouterLinkColumnComponent, ArrayNewLineColumnComponent,
                         StylerDirective, FunctionPipe
-                    ], template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n      <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-router-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n      <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n    </tb-router-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n\r\n</ng-template>\r\n\r\n<ng-template #linkWithIcon  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\"  [link]=\"$any(link)\">\r\n      <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #routerLinkWithIcon  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\"  [link]=\"$any(link)\">\r\n      <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img height=\"75px\" width=\"75px\" [src]=\"value\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n  <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n  <mat-icon [styler]=\"styles\" [element]=\"element\">{{value}}</mat-icon>\r\n</ng-template>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #link  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n      <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #routerLink  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-router-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n      <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n    </tb-router-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n\r\n</ng-template>\r\n\r\n<ng-template #linkWithIcon  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\"  [link]=\"$any(link)\">\r\n      <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #routerLinkWithIcon  let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  @let link = additional.link | func : element;\r\n  @if(link)\r\n  {\r\n    <tb-link-column [element]=\"element\" [additional]=\"additional\"  [link]=\"$any(link)\">\r\n      <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n    </tb-link-column>\r\n  }\r\n  @else\r\n  {\r\n    <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #imageUrl  let-value='value'>\r\n  <span>\r\n    <img height=\"75px\" width=\"75px\" [src]=\"value\" />\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  <tb-new-line-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n  <tb-comma-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n  <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon  let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n  <mat-icon [styler]=\"styles\" [element]=\"element\">{{value}}</mat-icon>\r\n</ng-template>\r\n" }]
         }] });
 
 class TableTemplateService {
@@ -4309,14 +4342,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
         }], ctorParameters: () => [] });
 
 const supportsGroupBy = typeof Object.groupBy === 'function';
-function getGroupedData(data, groupByKeys, metaData) {
-    return tbGroupBy(data, groupByKeys, 1, metaData);
-}
-let tbGroupBy = (data, groupByKeys, level = 1, metaData, parentGroupName) => {
-    const currentKey = groupByKeys[0];
-    const groupedDataArr = groupData(currentKey, data, level, metaData, parentGroupName);
-    const remainingGroupByKeys = groupByKeys.slice(1);
-    const hasChildrenGroups = !!remainingGroupByKeys.length;
+function getGroupedData(data, groupByDatas, metaData) {
+    return tbGroupBy(data, groupByDatas, 1, metaData);
+}
+let tbGroupBy = (data, groupByDatas, level = 1, metaData, parentGroupName) => {
+    const currentGroupData = groupByDatas[0];
+    const groupedDataArr = groupData(currentGroupData, data, level, metaData, parentGroupName);
+    const remainingGroupByDatas = groupByDatas.slice(1);
+    const hasChildrenGroups = !!remainingGroupByDatas.length;
     if (hasChildrenGroups) {
         //group the children by iterating over each group and grouping it by the next keys
         const groupOfGroups = groupedDataArr.map((group) => {
@@ -4325,13 +4358,13 @@ let tbGroupBy = (data, groupByKeys, level = 1, metaData, parentGroupName) => {
                 groupName: group.groupName,
                 groupHeaderDisplay: group.groupHeaderDisplay,
                 uniqueName: group.uniqueName,
-                key: currentKey,
+                key: currentGroupData.key,
                 hasTheData: false,
                 isGroupHeader: true,
                 padding: group.padding,
                 level: group.level,
                 length: group.length,
-                groups: tbGroupBy(children, remainingGroupByKeys, level + 1, metaData, group.groupName),
+                groups: tbGroupBy(children, remainingGroupByDatas, level + 1, metaData, group.groupName),
                 [initIndexSymbol]: group[initIndexSymbol],
                 custom: false
             };
@@ -4341,13 +4374,14 @@ let tbGroupBy = (data, groupByKeys, level = 1, metaData, parentGroupName) => {
     }
     return groupedDataArr;
 };
-function groupData(groupByKey, groupData, level = 1, metaData, parentGroupName) {
+function groupData(groupByData, groupData, level = 1, metaData, parentGroupName) {
+    const groupByKey = groupByData.key;
     const meta = metaData[groupByKey];
     const metaGroupGroupBy = meta && (meta.groupByLogic?.groupBy === 'use map' ? meta.map : meta.groupByLogic?.groupBy);
     const getter = metaGroupGroupBy || getFactory(groupByKey);
     const groupedDataDict = supportsGroupBy ? Object.groupBy(groupData, d => getter(d) ?? null) : groupBy(groupData, groupByKey);
-    const groupedDataArr = Object.entries(groupedDataDict).map(([name, groupData]) => {
-        const uniqueName = parentGroupName ? `${parentGroupName}-${name}` : `${name}`;
+    let groupedDataArr = Object.entries(groupedDataDict).map(([name, groupData], index) => {
+        const uniqueName = parentGroupName ? `${parentGroupName}-${name}` : name;
         return {
             isGroupHeader: true,
             groupHeaderDisplay: name,
@@ -4360,25 +4394,51 @@ function groupData(groupByKey, groupData, level = 1, metaData, parentGroupName)
             uniqueName,
             level,
             custom: false,
-            [initIndexSymbol]: uniqueName,
+            [initIndexSymbol]: index,
         };
     });
+    if (groupByData.sort) {
+        groupedDataArr = sortGroups(groupByData, groupedDataArr);
+    }
     return groupedDataArr;
 }
 function setCustomGroupBy(customGroupBy) {
     tbGroupBy = customGroupBy;
 }
-function updateGroupByState(groupedData, { data, groups, expanded }, firstRun, metaData) {
+function updateGroupByState(groupedData, { data, groups, expanded, sorts }, firstRun, metaData) {
     if (firstRun
-        || dataUpdated(data, groups, expanded)
-        || groupsUpdated(groups, expanded)) {
+        || dataUpdated(data, groups, expanded, sorts)
+        || groupsUpdated(groups, expanded, sorts)) {
         groupedData = groups.value.length ? getGroupedData(data.value, groups.value, metaData) : data.value;
     }
+    else {
+        let curr = [...sorts.value];
+        groupedData = sort(groupedData);
+        function sort(groups) {
+            const sortData = sorts.value?.find(gs => gs.key === groups[0]?.key);
+            if (sortData?.sort) {
+                groups = sortGroups(sortData, groups);
+            }
+            else {
+                groups = groups.toSorted((a, b) => a[initIndexSymbol] - b[initIndexSymbol]);
+            }
+            curr = curr.filter(c => c.key !== sortData?.key);
+            if (!groups[0]?.hasTheData) {
+                groups.forEach((g, i) => groups[i].groups = sort(g.groups));
+            }
+            return groups;
+        }
+    }
     const newDisplayData = expanded.value.length === 0
         ? groupedData
         : groupedData.map(group => mapGroupHeader(group, expanded.value.flatMap(g => g.expandedHeaders))).flat();
     return ({ displayData: newDisplayData, groupedData });
 }
+function sortGroups(sortData, groups) {
+    const direction = sortData.sort;
+    const multiplier = direction === 'asc' ? 1 : -1;
+    return groups.toSorted((a, b) => a.length === b.length ? 0 : (a.length > b.length ? 1 : -1) * multiplier);
+}
 function mapGroupHeader(obj, expandedHeaders) {
     const showChildren = expandedHeaders === true || expandedHeaders.includes(obj.uniqueName);
     const children = !showChildren ? [] :
@@ -4386,11 +4446,11 @@ function mapGroupHeader(obj, expandedHeaders) {
             : obj.groups.map(a => mapGroupHeader(a, expandedHeaders));
     return [obj, ...children].flat();
 }
-function dataUpdated(data, groups, expandedGroups) {
-    return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp;
+function dataUpdated(data, groups, expandedGroups, sorts) {
+    return data.timestamp > groups.timestamp && data.timestamp > expandedGroups.timestamp && data.timestamp > sorts.timestamp;
 }
-function groupsUpdated(groups, expandedGroups) {
-    return groups.timestamp >= expandedGroups.timestamp;
+function groupsUpdated(groups, expandedGroups, sorts) {
+    return groups.timestamp >= expandedGroups.timestamp && groups.timestamp >= sorts.timestamp;
 }
 const initialGroupByState = { displayData: [], groupedData: [] };
 const getAllGroupHeaderNames = (data) => {
@@ -4448,8 +4508,8 @@ class GenericTableComponent {
         this.$trackByFunction = computed(() => {
             const trackBy = this.$trackBy();
             if (!trackBy)
-                return (index, item) => item[initIndexSymbol];
-            return ((index, item) => item[trackBy]);
+                return (index, item) => isGroupHeader(item) ? `${item.level}-${item[initIndexSymbol]}` : item[initIndexSymbol];
+            return ((index, item) => isGroupHeader(item) ? `${item.level}-${item[initIndexSymbol]}` : item[trackBy]);
         });
         this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer));
         this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell));
@@ -4569,7 +4629,7 @@ class GenericTableComponent {
         });
         this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator');
         this.$selectableData = computed(() => {
-            const isGrouped = !!this.state.$groupByKeys().length;
+            const isGrouped = !!this.state.$groupByData().length;
             this.state.$expandGroups();
             if (this.$paginated()) {
                 const previousPageRecords = this.state.$currentPage() * this.state.$pageSize();
@@ -4773,14 +4833,14 @@ class GenericTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  #table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  class=\"table-drag-list\"\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\"\r\n                    [matTooltip]=\"$selectAllMessage()\"\r\n                    (change)=\"$event ? masterToggle() : null\" />\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        [checked]=\"selection.isSelected(row)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n            (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n          @if (!expanded())\r\n          {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          }\r\n          @else\r\n          {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n    (click)=\"rowClicked(row, $event)\"\r\n  />\r\n\r\n  <!-- group row -->\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n           style=\"background-color: unset;\"\r\n           [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\" [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n  [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \" [style.height]=\"$footerHeight()\"\r\n  [style.min-height]=\"$footerHeight()\"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayDataLength: { classPropertyName: "$displayDataLength", publicName: "displayDataLength", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n  #table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  class=\"table-drag-list\"\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\"\r\n                    [matTooltip]=\"$selectAllMessage()\"\r\n                    (change)=\"$event ? masterToggle() : null\" />\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        [checked]=\"selection.isSelected(row)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n            (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n          @if (!expanded())\r\n          {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          }\r\n          @else\r\n          {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n    (click)=\"rowClicked(row, $event)\"\r\n  />\r\n\r\n  <!-- group row -->\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n           style=\"background-color: unset;\"\r\n           [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n  [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \" [style.height]=\"$footerHeight()\"\r\n  [style.min-height]=\"$footerHeight()\"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GenericTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
                         MatTooltipModule, FunctionPipe, StylerDirective, ConditionalClassesDirective
-                    ], template: "<mat-table\r\n  #table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  class=\"table-drag-list\"\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\"\r\n                    [matTooltip]=\"$selectAllMessage()\"\r\n                    (change)=\"$event ? masterToggle() : null\" />\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        [checked]=\"selection.isSelected(row)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n            (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n          @if (!expanded())\r\n          {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          }\r\n          @else\r\n          {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n    (click)=\"rowClicked(row, $event)\"\r\n  />\r\n\r\n  <!-- group row -->\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n           style=\"background-color: unset;\"\r\n           [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\" [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n  [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \" [style.height]=\"$footerHeight()\"\r\n  [style.min-height]=\"$footerHeight()\"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"] }]
+                    ], template: "<mat-table\r\n  #table\r\n  cdkDropList\r\n  cdkDropListLockAxis='x'\r\n  cdkDropListOrientation=\"horizontal\"\r\n  class=\"table-drag-list\"\r\n  [dataSource]=\"$dataSource()\"\r\n  [trackBy]=\"$trackByFunction()\"\r\n  [style]=\"$tableWidth()\"\r\n  (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n  <!-- select column -->\r\n  <ng-container matColumnDef=\"select\">\r\n    @let selection = $selection();\r\n    <mat-header-cell *matHeaderCellDef  class=\"select-column\">\r\n      <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n                    [indeterminate]=\"$masterToggleIndeterminate()\"\r\n                    [matTooltip]=\"$selectAllMessage()\"\r\n                    (change)=\"$event ? masterToggle() : null\" />\r\n    </mat-header-cell>\r\n\r\n    <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n      <mat-checkbox\r\n        [checked]=\"selection.isSelected(row)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (change)=\"$event ? selection.toggle(row) : null\"/>\r\n    </mat-cell>\r\n\r\n    <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n      {{ selection.selected.length }}\r\n    </mat-footer-cell>\r\n  </ng-container>\r\n\r\n\r\n  <!-- index column -->\r\n  <ng-container matColumnDef=\"index\">\r\n    <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n      {{ 1 + i + $offsetIndex() }}\r\n    </mat-cell>\r\n    <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n  </ng-container>\r\n\r\n  <!-- Grouping -->\r\n  <ng-container matColumnDef=\"groupHeader\">\r\n    <mat-cell *matCellDef=\"let row\">\r\n      @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n      <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n        @if($hasSelectColumn())\r\n        {\r\n          @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n          <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n            [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n            [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n            (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n        }\r\n        <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n          @if (!expanded())\r\n          {\r\n            <mat-icon>chevron_right</mat-icon>\r\n          }\r\n          @else\r\n          {\r\n            <mat-icon>expand_more</mat-icon>\r\n          }\r\n        </button>\r\n        {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n      </div>\r\n      <div style=\"flex-grow: 1\">\r\n        <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n      </div>\r\n    </mat-cell>\r\n  </ng-container>\r\n\r\n  <mat-row\r\n    *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n    [style.height]=\"$rowHeight()\"\r\n    [style.min-height]=\"$rowHeight()\"\r\n    [styler]=\"$rowStyles()\"\r\n    [element]=\"row\"\r\n    [conditionalClasses]=\"$rowClasses()\"\r\n    (click)=\"rowClicked(row, $event)\"\r\n  />\r\n\r\n  <!-- group row -->\r\n  <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n           style=\"background-color: unset;\"\r\n           [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n           [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n  [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: $stickyFooter() \" [style.height]=\"$footerHeight()\"\r\n  [style.min-height]=\"$footerHeight()\"\r\n  [style.bottom.px]=\"$stickyFooter() ? ($offset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}\n"] }]
         }] });
 
 function downloadData(data, filename, mimeType) {
@@ -5551,20 +5611,21 @@ class GroupByListComponent {
         this.tableStore = inject(TableStore);
         this.$groups = computed(() => {
             const dict = this.tableStore.$metaData();
-            return this.tableStore.$groupByKeys().map(gbk => ({
-                key: gbk,
-                name: dict[gbk].displayName || gbk
+            return this.tableStore.$groupByData().map(gbk => ({
+                key: gbk.key,
+                name: dict[gbk.key].displayName || gbk.key,
+                sort: this.tableStore.getGroupBySortDirection(gbk.key)(),
             }));
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n  @for (groupBy of $groups(); track groupBy.key)\r\n  {\r\n    @if($index > 0)\r\n    {\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupBy.key)\">\r\n      {{groupBy.name | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n  @for (groupBy of $groups(); track groupBy.key)\r\n  {\r\n    @if($index > 0)\r\n    {\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupBy.key)\">\r\n      <span class=\"chip-c\">\r\n        {{groupBy.name | spaceCase}}\r\n        <mat-icon stop-propagation class=\"sort-icon\" (click)=\"tableStore.cycleGroupBySortDirection(groupBy.key)\">\r\n          @if (groupBy.sort === 'asc'){ arrow_upward }\r\n          @else if (groupBy.sort === 'desc') { arrow_downward } \r\n          @else { swap_vert }\r\n        </mat-icon>\r\n      </span>\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}.chip-c{display:flex;align-items:center}.sort-icon{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: GroupByListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatChipsModule, MatIconModule, SpaceCasePipe
-                    ], template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n  @for (groupBy of $groups(); track groupBy.key)\r\n  {\r\n    @if($index > 0)\r\n    {\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupBy.key)\">\r\n      {{groupBy.name | spaceCase}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}\n"] }]
+                        MatChipsModule, MatIconModule, SpaceCasePipe, StopPropagationDirective
+                    ], template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n  @for (groupBy of $groups(); track groupBy.key)\r\n  {\r\n    @if($index > 0)\r\n    {\r\n      <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n    }\r\n    <mat-chip (removed)=\"tableStore.removeGroupByKey(groupBy.key)\">\r\n      <span class=\"chip-c\">\r\n        {{groupBy.name | spaceCase}}\r\n        <mat-icon stop-propagation class=\"sort-icon\" (click)=\"tableStore.cycleGroupBySortDirection(groupBy.key)\">\r\n          @if (groupBy.sort === 'asc'){ arrow_upward }\r\n          @else if (groupBy.sort === 'desc') { arrow_downward } \r\n          @else { swap_vert }\r\n        </mat-icon>\r\n      </span>\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n  }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}.chip-c{display:flex;align-items:center}.sort-icon{cursor:pointer}\n"] }]
         }] });
 
 class ProfilesMenuComponent {
@@ -5608,13 +5669,13 @@ class ProfilesMenuComponent {
         this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: true, transformFunction: null }, $isMatMenuChild: { classPropertyName: "$isMatMenuChild", publicName: "isMatMenuChild", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!$isMatMenuChild())\r\n{\r\n  <button #trigger=\"matMenuTrigger\" color=\"primary\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Profiles'\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n  </button>\r\n}\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item mat-stroked-button [matTooltip]=\"'Save Profile'\" (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button color=\"primary\" class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox #m class=\"display-none\" [checked]=\"true\" />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div mat-menu-item stop-propagation [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span class=\"arrow\" [class]=\"`${(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open')} all-profile-arrow`\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key)\r\n    {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button class=\"menu-item first-in-line\" mat-stroked-button [matTooltip]=\"'Select Profile'\" (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button color=\"warn\" class=\"last-in-line\" stop-propagation mat-icon-button [matTooltip]=\"'Delete Profile'\" (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input #addedKey=\"matInput\" matInput [name]=\"'key'\" />\r\n      </div>\r\n      <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox #m2 class=\"display-none\" [ngModel]=\"!$defaultProfile()\" />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" mat-raised-button [matTooltip]=\"'Create New Profile'\" [disabled]=\"!addedKey.value\" (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:var(tb-current-profile, blue)}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: true, transformFunction: null }, $isMatMenuChild: { classPropertyName: "$isMatMenuChild", publicName: "isMatMenuChild", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!$isMatMenuChild())\r\n{\r\n  <button #trigger=\"matMenuTrigger\" color=\"primary\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Profiles'\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n  </button>\r\n}\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item mat-stroked-button [matTooltip]=\"'Save Profile'\" (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button color=\"primary\" class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox #m class=\"display-none\" [checked]=\"true\" />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div mat-menu-item stop-propagation [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span class=\"arrow\" [class]=\"`${(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open')} all-profile-arrow`\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key)\r\n    {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button class=\"menu-item first-in-line\" mat-stroked-button [matTooltip]=\"'Select Profile'\" (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button color=\"warn\" class=\"last-in-line\" stop-propagation mat-icon-button [matTooltip]=\"'Delete Profile'\" (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input #addedKey=\"matInput\" matInput [name]=\"'key'\" />\r\n      </div>\r\n      <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox #m2 class=\"display-none\" [ngModel]=\"!$defaultProfile()\" />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" mat-raised-button [matTooltip]=\"'Create New Profile'\" [disabled]=\"!addedKey.value\" (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:var(tb-current-profile, blue)}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tb-profiles-menu', imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
                         MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
-                    ], template: "@if(!$isMatMenuChild())\r\n{\r\n  <button #trigger=\"matMenuTrigger\" color=\"primary\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Profiles'\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n  </button>\r\n}\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item mat-stroked-button [matTooltip]=\"'Save Profile'\" (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button color=\"primary\" class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox #m class=\"display-none\" [checked]=\"true\" />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div mat-menu-item stop-propagation [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span class=\"arrow\" [class]=\"`${(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open')} all-profile-arrow`\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key)\r\n    {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button class=\"menu-item first-in-line\" mat-stroked-button [matTooltip]=\"'Select Profile'\" (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button color=\"warn\" class=\"last-in-line\" stop-propagation mat-icon-button [matTooltip]=\"'Delete Profile'\" (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input #addedKey=\"matInput\" matInput [name]=\"'key'\" />\r\n      </div>\r\n      <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox #m2 class=\"display-none\" [ngModel]=\"!$defaultProfile()\" />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" mat-raised-button [matTooltip]=\"'Create New Profile'\" [disabled]=\"!addedKey.value\" (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:var(tb-current-profile, blue)}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if(!$isMatMenuChild())\r\n{\r\n  <button #trigger=\"matMenuTrigger\" color=\"primary\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Profiles'\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n  </button>\r\n}\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n  @if(!!$currentProfile())\r\n  {\r\n    <div mat-menu-item mat-stroked-button [matTooltip]=\"'Save Profile'\" (click)=\"saveState($currentProfile()!)\">\r\n      <mat-icon color=\"primary\">save</mat-icon>\r\n      <span>{{$currentProfile()}}</span>\r\n    </div>\r\n  }\r\n  @else\r\n  {\r\n    <div class=\"profile-line\">\r\n      <button color=\"primary\" class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n        <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n        <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n      </button>\r\n      <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox #m class=\"display-none\" [checked]=\"true\" />\r\n    </div>\r\n  }\r\n  @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n  <div mat-menu-item stop-propagation [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n    <div class=\"all-profiles\">\r\n      <span>All Profiles</span>\r\n      <span class=\"arrow\" [class]=\"`${(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open')} all-profile-arrow`\"></span>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n    @for (key of $keys() ; track key)\r\n    {\r\n      <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n        <button class=\"menu-item first-in-line\" mat-stroked-button [matTooltip]=\"'Select Profile'\" (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n          <span>{{key}}</span>\r\n        </button>\r\n        @if(key !== $defaultProfile())\r\n        {\r\n          <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"setDefault(key)\">\r\n            <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n          </button>\r\n        }\r\n        @else\r\n        {\r\n          <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"unsetDefault()\">\r\n            <mat-icon style=\"color: green;\">star</mat-icon>\r\n          </button>\r\n        }\r\n        <button color=\"warn\" class=\"last-in-line\" stop-propagation mat-icon-button [matTooltip]=\"'Delete Profile'\" (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n          <mat-icon color='warn'>delete_forever</mat-icon>\r\n        </button>\r\n      </div>\r\n    }\r\n    <hr class=\"divider\"/>\r\n  </div>\r\n  <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n  <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n    <div class=\"profile-line\" stop-propagation>\r\n      <div class=\"new-name-input\">\r\n        <i class=\"input-hint\">Enter New Name</i>\r\n        <input #addedKey=\"matInput\" matInput [name]=\"'key'\" />\r\n      </div>\r\n      <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m2.toggle()\" >\r\n        <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n      </button>\r\n      <mat-checkbox #m2 class=\"display-none\" [ngModel]=\"!$defaultProfile()\" />\r\n    </div>\r\n    <button class=\"add-button\" color=\"primary\" mat-raised-button [matTooltip]=\"'Create New Profile'\" [disabled]=\"!addedKey.value\" (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\">\r\n      Add\r\n    </button>\r\n  </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:var(tb-current-profile, blue)}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"] }]
         }] });
 
 class SortMenuComponentStore extends ComponentStore {
@@ -5741,7 +5802,7 @@ class ResetMenuComponent {
                 return true;
             return !sortsAreSame(preSorts, sorts);
         });
-        this.$groupBySet = computed(() => this.state.$groupByKeys().length);
+        this.$groupBySet = computed(() => this.state.$groupByData().length);
         this.$hiddenSet = computed(() => this.state.$hiddenKeys().length);
         this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length);
         this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length);
@@ -5825,11 +5886,11 @@ class TableHeaderMenuComponent {
             this.state.setUserDefinedHeaderHeight(+element.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableHeaderMenuComponent, isStandalone: true, selector: "lib-table-header-menu", viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n  <button #d=\"matMenuItem\" mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n    <mat-icon color=\"primary\">autorenew</mat-icon>\r\n    <span>Reset</span>\r\n  </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n  <button mat-menu-item (click)=\"exportToCsv()\">\r\n    <mat-icon color=\"primary\">file_download</mat-icon>\r\n    <span>Export Table</span>\r\n  </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n  <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n    <span>Profiles</span>\r\n  </button>\r\n  <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n  <div class=\"height-input-wrapper\">\r\n    <span>Row Height</span>\r\n    <input #i class=\"input\" stop-propagation type=\"number\" \r\n      placeholder=\"Set Size\"\r\n      [value]=\"$rowHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n  </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Header Height</span>\r\n      <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n      placeholder=\"Set Size\"\r\n      [value]=\"$headerHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n    </div>\r\n  </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: ResetMenuComponent, selector: "lib-reset-menu", outputs: ["onStateReset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableHeaderMenuComponent, isStandalone: true, selector: "lib-table-header-menu", viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n  <button #d=\"matMenuItem\" mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n    <mat-icon color=\"primary\">autorenew</mat-icon>\r\n    <span>Reset</span>\r\n  </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n  <button mat-menu-item (click)=\"exportToCsv()\">\r\n    <mat-icon color=\"primary\">file_download</mat-icon>\r\n    <span>Export Table</span>\r\n  </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n  <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n    <span>Profiles</span>\r\n  </button>\r\n  <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n  <div class=\"height-input-wrapper\">\r\n    <span>Row Height</span>\r\n    <input #i class=\"input\" stop-propagation type=\"number\" \r\n      placeholder=\"Set Size\"\r\n      [value]=\"$rowHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n  </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Header Height</span>\r\n      <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n      placeholder=\"Set Size\"\r\n      [value]=\"$headerHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n    </div>\r\n  </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: ResetMenuComponent, selector: "lib-reset-menu", outputs: ["onStateReset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableHeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-header-menu', imports: [MatMenuModule, MatIcon, ProfilesMenuComponent, ResetMenuComponent, MatTooltip, StopPropagationDirective], template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n  <button #d=\"matMenuItem\" mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n    <mat-icon color=\"primary\">autorenew</mat-icon>\r\n    <span>Reset</span>\r\n  </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n  <button mat-menu-item (click)=\"exportToCsv()\">\r\n    <mat-icon color=\"primary\">file_download</mat-icon>\r\n    <span>Export Table</span>\r\n  </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n  <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n    <span>Profiles</span>\r\n  </button>\r\n  <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n  <div class=\"height-input-wrapper\">\r\n    <span>Row Height</span>\r\n    <input #i class=\"input\" stop-propagation type=\"number\" \r\n      placeholder=\"Set Size\"\r\n      [value]=\"$rowHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n  </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Header Height</span>\r\n      <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n      placeholder=\"Set Size\"\r\n      [value]=\"$headerHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n    </div>\r\n  </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"] }]
+            args: [{ selector: 'lib-table-header-menu', imports: [MatMenuModule, MatIcon, ProfilesMenuComponent, ResetMenuComponent, MatTooltip, StopPropagationDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n  <button #d=\"matMenuItem\" mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n    <mat-icon color=\"primary\">autorenew</mat-icon>\r\n    <span>Reset</span>\r\n  </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n  <button mat-menu-item (click)=\"exportToCsv()\">\r\n    <mat-icon color=\"primary\">file_download</mat-icon>\r\n    <span>Export Table</span>\r\n  </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n  <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n    <mat-icon color=\"primary\">people</mat-icon>\r\n    <span>Profiles</span>\r\n  </button>\r\n  <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n  <div class=\"height-input-wrapper\">\r\n    <span>Row Height</span>\r\n    <input #i class=\"input\" stop-propagation type=\"number\" \r\n      placeholder=\"Set Size\"\r\n      [value]=\"$rowHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n  </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n  <div mat-menu-item>\r\n    <div class=\"height-input-wrapper\">\r\n      <span>Header Height</span>\r\n      <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n      placeholder=\"Set Size\"\r\n      [value]=\"$headerHeightNum()\"\r\n      [min]=\"10\"\r\n      [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n    </div>\r\n  </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"] }]
         }] });
 
 class TableVirtualScrollStrategy {
@@ -6430,18 +6491,21 @@ class TableContainerComponent {
                 return ({ value: filteredData, timestamp: Date.now() });
             }
         });
-        this.$timestampedGroups = computed(() => ({ value: this.state.$groupByKeys(), timestamp: Date.now() }));
+        this.$timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }));
         this.$timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }));
+        this.$timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }));
         this.$dataAndGroupsTimestamped = computed(() => {
             const data = this.$sortedAndFilteredData();
             const groups = this.$timestampedGroups();
             const expanded = this.$timestampedExpanded();
+            const sorts = this.$timestampedGroupSortUpdated();
             if (!data)
                 return undefined;
             return ({
                 data,
                 groups,
-                expanded
+                expanded,
+                sorts,
             });
         });
         this.$filteredSortedAndGrouped = linkedSignal({
@@ -6479,7 +6543,7 @@ class TableContainerComponent {
     #setUpAllValuesFilters;
     static { this.headerId = 'tb-header-wrapper'; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n  @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByData().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n  @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayDataLength", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableContainerComponent, decorators: [{
             type: Component,
@@ -6489,7 +6553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
                         MultiSortDirective, GroupByListComponent, FilterChipsComponent, GenFilterDisplayerComponent, GenColDisplayerComponent,
                         SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
                         MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer,
-                    ], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByKeys().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n  @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
+                    ], template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n  <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n    <div class=\"title\">\r\n      @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n      {\r\n        <ng-content select=\".tb-header-title\"/>\r\n        @if (tableSettings.title)\r\n        {\r\n          @switch (tableSettings.title.level)\r\n          {\r\n            @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n            @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n            @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n            @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n            @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n            @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n    @if(state.$groupByData().length)\r\n    {\r\n      <group-by-list />\r\n    }\r\n    <div class=\"flx-row-end\">\r\n      <lib-filter-list />\r\n      @if (!tableSettings.hideHeader)\r\n      {\r\n        @if (!$collapsedHeader())\r\n        {\r\n          <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n          <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n            <mat-icon>more_vert</mat-icon>\r\n          </button>\r\n          <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n            <lib-table-header-menu #l/>\r\n          </mat-menu>\r\n\r\n        }\r\n        @else\r\n        {\r\n          <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n          <mat-menu #mainMenu='matMenu'>\r\n            <div class=\"collapsed-head-row\">\r\n              <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n            </div>\r\n            <lib-table-header-menu />\r\n          </mat-menu>\r\n        }\r\n        <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n          (click)=\"state.toggleCollapseHeader()\">\r\n          {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n        </mat-icon>\r\n      }\r\n\r\n    </div>\r\n  </div>\r\n\r\n  @if($useVirtual())\r\n  {\r\n    <tb-virtual-scroll-container class=\"scrollable\">\r\n      <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n        [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='selection$.emit($event)' />\r\n    </tb-virtual-scroll-container>\r\n  }\r\n  @else\r\n  {\r\n    <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayDataLength]=\"$displayDataLength()\"\r\n      [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\"  (selection)='selection$.emit($event)' />\r\n  }\r\n  @if(tableSettings.usePaginator)\r\n  {\r\n    <div class=\"paginator\">\r\n      <tb-paginator #tbPaginator />\r\n\r\n      <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n        (click)=\"state.toggleCollapseFooter()\">\r\n        {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n      </mat-icon>\r\n    </div>\r\n  }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n  @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n  @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n  @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n  @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"] }]
         }] });
 function isFunction(a) {
     return typeof a === 'function';
@@ -6725,11 +6789,11 @@ class ActionStateSpinnerComponent {
         this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress)\r\n{\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress)\r\n{\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-action-state-spinner', imports: [AsyncPipe, MatProgressSpinnerModule], template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress)\r\n{\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: 'lib-action-state-spinner', imports: [AsyncPipe, MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress)\r\n{\r\n  <div id=\"blocker\">\r\n    <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n  </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { status$: [{
                 type: Input
             }] } });