@energycap/components 0.39.31 → 0.39.32-ECAP-26866-table-multi-sort-improvements.20241022-1702

package/fesm2020/energycap-components.mjs

@@ -7082,7 +7082,7 @@ class TableComponent {
         if (this.sortable && changes.sort && changes.sort.currentValue && !changes.sort.firstChange) {
             const newValue = changes.sort.currentValue;
             if (!this.currentSort || !isEqual(newValue, this.currentSort)) {
-                this.onSort(newValue.field, newValue.direction);
+                this.onSort(newValue);
             }
         }
     }
@@ -7131,7 +7131,14 @@ class TableComponent {
                         if (th.classList.contains('is-resizable') && event.target && event.target.classList.contains('handle')) {
                             return;
                         }
-                        this.onSort(field);
+                        let direction;
+                        if (th.classList.contains('is-sorted-desc')) {
+                            direction = 'asc';
+                        }
+                        else {
+                            direction = 'desc';
+                        }
+                        this.onSort({ field, direction });
                     });
                     // Store unlisten function to remove listener when component is destroyed
                     this.unlisteners.push(unlisten);
@@ -7143,7 +7150,7 @@ class TableComponent {
         });
         // Set the initial sort
         if (this.sort) {
-            this.onSort(this.sort.field, this.sort.direction);
+            this.onSort(this.sort);
         }
     }
     /**
@@ -7152,32 +7159,29 @@ class TableComponent {
      * Emit the current field and direction of the sorted column
      * @param field
      */
-    onSort(field, direction) {
-        const th = this.sortableCols[field];
-        if (!th) {
-            return;
-        }
-        if (this.currentSort && this.currentSort.field !== field) {
-            this.renderer.removeClass(this.sortableCols[this.currentSort.field], `is-sorted-${this.currentSort.direction}`);
-        }
-        if (th.classList.contains('is-sorted-desc')) {
-            this.renderer.removeClass(th, 'is-sorted-desc');
-            if (!direction) {
-                direction = 'asc';
-            }
+    onSort(sort) {
+        this.clearSort();
+        if (Array.isArray(sort)) {
+            sort.forEach(s => this.applySort(s));
         }
         else {
-            if (th.classList.contains('is-sorted-asc')) {
-                this.renderer.removeClass(th, 'is-sorted-asc');
-            }
-            if (!direction) {
-                direction = 'desc';
-            }
+            this.applySort(sort);
+        }
+        this.currentSort = cloneDeep(sort);
+        this.sortChange.emit(this.currentSort);
+    }
+    clearSort() {
+        Object.values(this.sortableCols).forEach(th => {
+            this.renderer.removeClass(th, `is-sorted-asc`);
+            this.renderer.removeClass(th, `is-sorted-desc`);
+        });
+    }
+    applySort(sort) {
+        const th = this.sortableCols[sort.field];
+        if (!th) {
+            return;
         }
-        this.renderer.addClass(th, `is-sorted-${direction}`);
-        const sortEvent = { field: field, direction: direction };
-        this.currentSort = sortEvent;
-        this.sortChange.emit(sortEvent);
+        this.renderer.addClass(th, `is-sorted-${sort.direction}`);
     }
     initSelectable() {
         this.selectionContext.rowCheckboxes.valueChanges.pipe(takeUntil(this.destroyed)).subscribe((value) => {