@one-paragon/angular-utilities 2.5.4-beta.6 → 2.5.4-beta.8

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

@@ -1182,12 +1182,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
 // <div *customGroupRow="'category'; let group">
 //   Category: {{group.groupHeaderDisplay}} - {{group.length}} products
 // </div>
+//
+// <!-- Custom group row for multiple grouping keys -->
+// <div *customGroupRow="['category', 'status']; let group">
+//   Multi-key template: {{group.groupHeaderDisplay}} ({{group.length}} items)
+// </div>
 class CustomGroupRowDirective {
     constructor() {
         this.templateRef = inject(TemplateRef);
         /**
-         * Optional grouping key. If provided, this custom row will only apply when data is grouped by this key.
+         * Optional grouping key(s). If provided, this custom row will only apply when data is grouped by this key or keys.
          * If not provided (or null), this custom row will apply to all groupings.
+         * Can be a single Path<T> or an array of Path<T> values.
          */
         this.$customGroupRow = input(null, { alias: 'customGroupRow', transform: (val) => val === '' ? null : val });
         /**
@@ -1201,7 +1207,7 @@ class CustomGroupRowDirective {
         this.$priority = input(0, { alias: 'customGroupRowPriority' });
         this.$inited = signal(false);
         /**
-         * Gets the grouping key this directive applies to, or null for all groupings
+         * Gets the grouping key(s) this directive applies to, or null for all groupings
          */
         this.$groupingKey = computed(() => this.$customGroupRow());
         /**
@@ -1223,7 +1229,13 @@ class CustomGroupRowDirective {
      */
     appliesTo(groupingKey) {
         const targetKey = this.$groupingKey();
-        return targetKey === null || targetKey === groupingKey;
+        if (targetKey === null) {
+            return true; // Apply to all groupings
+        }
+        if (Array.isArray(targetKey)) {
+            return targetKey.includes(groupingKey);
+        }
+        return targetKey === groupingKey;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CustomGroupRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.3", type: CustomGroupRowDirective, isStandalone: true, selector: "[customGroupRow]", inputs: { $customGroupRow: { classPropertyName: "$customGroupRow", publicName: "customGroupRow", isSignal: true, isRequired: false, transformFunction: null }, $customGroupRowTableRef: { classPropertyName: "$customGroupRowTableRef", publicName: "customGroupRowTableRef", isSignal: true, isRequired: false, transformFunction: null }, $priority: { classPropertyName: "$priority", publicName: "customGroupRowPriority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
@@ -4652,7 +4664,7 @@ const getAllGroupHeaderNames = (data) => {
     const a = supportsGroupBy ? Object.groupBy(groups, group => group.key) : groupBy(groups, 'key');
     return Object.entries(a).map(([key, groups]) => ({
         groupKey: key,
-        uniqueNameOfHeadersToExpand: groups.map(g => g.uniqueName)
+        headers: groups.map(g => g.uniqueName)
     }));
 };
 const getAllGroupHeaderNamesByKeys = (data, keys) => {
@@ -4660,7 +4672,7 @@ const getAllGroupHeaderNamesByKeys = (data, keys) => {
     const a = supportsGroupBy ? Object.groupBy(groups, group => group.key) : groupBy(groups, 'key');
     return Object.entries(a).map(([key, groups]) => ({
         groupKey: key,
-        uniqueNameOfHeadersToExpand: groups.map(g => g.uniqueName)
+        headers: groups.map(g => g.uniqueName)
     }));
 };
 const getGroupHeaders = (data, filterFunc, arr = [], oneLevel = false) => {
@@ -5013,7 +5025,12 @@ class GenericTableComponent {
             const customGroupRows = this.state.$props().customGroupRows || [];
             // Find the best matching custom group row template
             // First, look for exact key matches, then for global templates (null key)
-            const exactMatches = customGroupRows.filter(cgr => cgr.appliesTo(groupingKey) && cgr.$groupingKey() === groupingKey);
+            const exactMatches = customGroupRows.filter(cgr => {
+                if (!cgr.appliesTo(groupingKey))
+                    return false;
+                const key = cgr.$groupingKey();
+                return key === groupingKey || (Array.isArray(key) && key.includes(groupingKey));
+            });
             const globalMatches = customGroupRows.filter(cgr => cgr.appliesTo(groupingKey) && cgr.$groupingKey() === null);
             // Sort by priority (higher priority first)
             const allMatches = [...exactMatches, ...globalMatches].sort((a, b) => b.$priority() - a.$priority());
@@ -5053,7 +5070,7 @@ class GenericTableComponent {
     setExpanded(key, groupUniqueName, isExpanded) {
         if (!isExpanded && this.state.$expandedPropForKeyIsAll(key)()) {
             const groupHeaders = getAllGroupHeaderNamesByKeys(this.$displayData(), [key]);
-            this.state.expandOfGroup(groupHeaders);
+            this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
         }
         this.state.updateExpandedGroups({ key, isExpanded, groupUniqueName });
     }
@@ -6531,7 +6548,11 @@ class TableContainerComponent {
         this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData);
         this.expandAllGroups = () => {
             const groupHeaders = getAllGroupHeaderNames(this.$displayData());
-            this.state.expandOfGroup(groupHeaders);
+            this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
+        };
+        this.expandAllOfGroup = (groupKey) => {
+            const groupHeaders = getAllGroupHeaderNamesByKeys(this.$displayData(), [groupKey]);
+            this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
         };
         this.collapseAllGroups = () => this.state.collapseAll();
         this.exportToCsv = () => this.exportToCsvService.exportToCsv(this.$data());