@skyux/code-examples 13.6.1 → 13.6.2

package/fesm2022/skyux-code-examples.mjs

@@ -7,7 +7,7 @@ import { SkyKeyInfoModule, SkyStatusIndicatorModule, SkyAlertModule, SkyIllustra
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/forms';
 import { FormControl, FormBuilder, ReactiveFormsModule, FormsModule, Validators, FormGroup } from '@angular/forms';
-import { switchMap, of, Subject, takeUntil, Subscription, delay as delay$1, tap, shareReplay, map as map$1 } from 'rxjs';
+import { switchMap, of, Subject, takeUntil, Subscription, delay as delay$1, fromEvent, tap, shareReplay, map as map$1 } from 'rxjs';
 import * as i3 from '@skyux/modals';
 import { SkyModalInstance, SkyModalModule, SkyModalService, SkyConfirmService, SkyConfirmType } from '@skyux/modals';
 import * as i1$2 from '@skyux/tabs';
@@ -5708,7 +5708,7 @@ class ViewGridComponent {
         this.#dataManagerSvc.initDataView(this.#viewConfig);
         this.#dataManagerSvc
             .getDataStateUpdates(this.viewId)
-            .pipe(takeUntil$1(this.#ngUnsubscribe))
+            .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((state) => {
             this.#dataState = state;
             this.#setInitialColumnOrder();
@@ -5717,7 +5717,7 @@ class ViewGridComponent {
         });
         this.#dataManagerSvc
             .getActiveViewIdUpdates()
-            .pipe(takeUntil$1(this.#ngUnsubscribe))
+            .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((id) => {
             this.isActive = id === this.viewId;
             this.#changeDetector.markForCheck();
@@ -5757,6 +5757,18 @@ class ViewGridComponent {
     #onGridReady(event) {
         this.#gridApi = event.api;
         this.#updateData();
+        // When the grid is destroyed, unsubscribe from all grid events.
+        const gridSubscription = new Subscription();
+        gridSubscription.add(fromEvent(this.#gridApi, 'gridPreDestroyed').subscribe(() => {
+            gridSubscription.unsubscribe();
+        }));
+        // Keep the data manager sort option in sync with grid sort changes.
+        gridSubscription.add(fromEvent(this.#gridApi, 'sortChanged').subscribe((sortChanged) => {
+            const sortOption = (this.#dataManagerSvc.getCurrentDataManagerConfig().sortOptions ?? []).find((option) => (sortChanged.columns ?? []).some((col) => col.getColId() === option.propertyName));
+            const state = new SkyDataManagerState(this.#dataState);
+            state.activeSortOption = sortOption;
+            this.#dataManagerSvc.updateDataState(state, this.viewId);
+        }));
     }
     #searchItems(items) {
         let searchedItems = items;
@@ -5796,6 +5808,17 @@ class ViewGridComponent {
                 return col1Index - col2Index;
             }
         });
+        // Update the grid's initial sort based on the data state's active sort option.
+        const field = this.#dataState.activeSortOption?.propertyName;
+        const descending = this.#dataState.activeSortOption?.descending ?? false;
+        this.#columnDefs.forEach((column) => {
+            column.initialSort =
+                field && field === column.field
+                    ? descending
+                        ? 'desc'
+                        : 'asc'
+                    : undefined;
+        });
         this.isGridInitialized = true;
     }
     #updateData() {
@@ -5803,7 +5826,10 @@ class ViewGridComponent {
         if (this.#dataState.onlyShowSelected) {
             this.displayedItems = this.displayedItems.filter((item) => item.selected);
         }
-        if (this.displayedItems.length > 0) {
+        if (!this.isActive) {
+            // Do nothing if the grid is not the active view.
+        }
+        else if (this.displayedItems.length > 0) {
             this.#gridApi?.hideOverlay();
         }
         else {
@@ -5901,6 +5927,19 @@ class ViewRepeaterComponent {
         if (this.#dataState.onlyShowSelected) {
             this.displayedItems = this.displayedItems.filter((item) => item.selected);
         }
+        const sortOption = this.#dataState.activeSortOption;
+        if (sortOption?.propertyName) {
+            const field = sortOption.propertyName;
+            const descending = sortOption.descending ?? false;
+            this.displayedItems.sort((a, b) => {
+                const aValue = String(a[field]);
+                const bValue = String(b[field]);
+                if (descending) {
+                    return bValue.localeCompare(aValue);
+                }
+                return aValue.localeCompare(bValue);
+            });
+        }
         this.#dataManagerSvc.updateDataSummary({
             totalItems: this.items.length,
             itemsMatching: this.displayedItems.length,