@one-paragon/angular-utilities 2.5.4-beta.7 → 2.6.0

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 }); }
@@ -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());