@trudb/tru-common-lib 0.2.473 → 0.2.476

package/fesm2022/trudb-tru-common-lib.mjs

@@ -8600,6 +8600,8 @@ class TruDataGrid {
     rowFocuedOnMousedown = null;
     copiedRowData = [];
     scrollOffsetCleanup = null;
+    detailResizeCleanup = null;
+    pendingResizeFrameId = null;
     constructor(dataContext, componentLookup, searchResultViewManager, appEnvironment, searchViewEventHandler, uiNotification, connectionHub, windowEventHandler, dataGridClipboard, util, app, cdr, hostElement, desktopViewEventNotifier, tabGroupEventNotifier) {
         this.dataContext = dataContext;
         this.componentLookup = componentLookup;
@@ -9206,6 +9208,7 @@ class TruDataGrid {
         if (this.config?.view && this.desktopViewEventNotifier) {
             this.subs.push(this.desktopViewEventNotifier.onActiveStateChanged().pipe(skip(1)).subscribe(() => this.resizeGrid()));
         }
+        this.setupDetailResizeObservers();
     }
     ngOnChanges(changes) {
         this.runSearch();
@@ -9213,6 +9216,7 @@ class TruDataGrid {
     }
     ngOnDestroy() {
         this.teardownScrollObservers();
+        this.teardownDetailResizeObservers();
         this.subs.forEach(s => s.unsubscribe());
     }
     //this only applies to grids inside detail views and tab containers.
@@ -9282,6 +9286,71 @@ class TruDataGrid {
             this.scrollOffsetCleanup = null;
         }
     };
+    scheduleResizeGrid = () => {
+        if (this.pendingResizeFrameId !== null)
+            return;
+        this.pendingResizeFrameId = window.requestAnimationFrame(() => {
+            this.pendingResizeFrameId = null;
+            this.resizeGrid();
+        });
+    };
+    setupDetailResizeObservers = () => {
+        this.teardownDetailResizeObservers();
+        const gridType = this.gridType;
+        if (gridType === TruDataGridTypes.Search)
+            return;
+        const hostEl = this.hostElement.nativeElement;
+        if (!hostEl || !hostEl.isConnected)
+            return;
+        const detailContent = hostEl.closest('.detail-content');
+        if (!detailContent)
+            return;
+        // Make sure we re-measure when the grid is scrolled into view (common when the initial window height is short).
+        const onScroll = () => this.scheduleResizeGrid();
+        let intersectionObserver = null;
+        if (typeof IntersectionObserver !== 'undefined') {
+            intersectionObserver = new IntersectionObserver((entries) => {
+                if (entries.some(e => e.isIntersecting)) {
+                    this.scheduleResizeGrid();
+                }
+            }, { root: detailContent, threshold: 0 });
+            intersectionObserver.observe(hostEl);
+        }
+        else {
+            detailContent.addEventListener('scroll', onScroll, { passive: true });
+        }
+        let resizeObserver = null;
+        if (typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(() => this.scheduleResizeGrid());
+            resizeObserver.observe(detailContent);
+        }
+        this.detailResizeCleanup = () => {
+            if (intersectionObserver) {
+                intersectionObserver.disconnect();
+                intersectionObserver = null;
+            }
+            else {
+                detailContent.removeEventListener('scroll', onScroll);
+            }
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+                resizeObserver = null;
+            }
+            if (this.pendingResizeFrameId !== null) {
+                window.cancelAnimationFrame(this.pendingResizeFrameId);
+                this.pendingResizeFrameId = null;
+            }
+            this.detailResizeCleanup = null;
+        };
+        // Kick an initial measurement once layout settles.
+        this.scheduleResizeGrid();
+    };
+    teardownDetailResizeObservers = () => {
+        if (this.detailResizeCleanup) {
+            this.detailResizeCleanup();
+            this.detailResizeCleanup = null;
+        }
+    };
     //Adjusts grid height to fill available detail space, honoring fill/min/max rows.
     //this doesn't affect search grids.
     resizeGrid = () => {
@@ -9300,12 +9369,6 @@ class TruDataGrid {
         const firstGridTop = siblingGrids.length ? siblingGrids[0].getBoundingClientRect().top : hostEl.getBoundingClientRect().top;
         const detailRect = detailContent.getBoundingClientRect();
         const availableTotal = detailContent.clientHeight - (firstGridTop - detailRect.top) - 10; // small bottom padding
-        if (availableTotal <= 0)
-            return;
-        const perGridOverhead = 45; // toolbar + statusbar overhead (v6 does something similar i am just porting here)
-        const distributedHeight = siblingGrids.length > 1
-            ? (availableTotal - (siblingGrids.length - 1) * perGridOverhead) / siblingGrids.length
-            : availableTotal;
         const rowHeight = this.gridOptions?.rowHeight ?? 22;
         const headerHeight = 25;
         const minRows = this.config.minimumRows ?? 0;
@@ -9318,6 +9381,20 @@ class TruDataGrid {
         const contentMinPx = Math.max((minRows * rowHeight) + headerHeight, overlayMinPx);
         const minPx = contentMinPx + gridChromePx;
         const maxPx = typeof maxRows === 'number' ? ((maxRows * rowHeight) + headerHeight + gridChromePx) : undefined;
+        // When the initial window height is short, the grid can start below the visible portion of the detail container.
+        // In that case, we still need a minimum height so the parent can scroll to reveal the grid.
+        if (availableTotal <= 0) {
+            hostEl.style.height = `${minPx}px`;
+            const apiAny = this.api;
+            if (apiAny?.doLayout) {
+                apiAny.doLayout();
+            }
+            return;
+        }
+        const perGridOverhead = 45; // toolbar + statusbar overhead (v6 does something similar i am just porting here)
+        const distributedHeight = siblingGrids.length > 1
+            ? (availableTotal - (siblingGrids.length - 1) * perGridOverhead) / siblingGrids.length
+            : availableTotal;
         let targetHeight = distributedHeight;
         if (!this.config.fill) {
             if (maxPx !== undefined && maxPx < targetHeight)
@@ -11917,17 +11994,19 @@ class TruTabGroup {
         const list = new QueryList();
         list.reset([matTabsFromQueryList]);
         this.tabGroup._tabs = list;
+        // Ensure the initially-selected tab is marked active so consumers (e.g. detail grids) can load/size correctly.
+        // MatTabGroup won't emit selectedTabChange on initial render.
+        setTimeout(() => {
+            const selectedIndex = typeof this.tabGroup.selectedIndex === 'number' ? this.tabGroup.selectedIndex : 0;
+            this.setActiveTabByIndex(selectedIndex);
+        }, 0);
     }
     onChange(event) {
-        const selectedTabLabel = event.tab.textLabel;
-        this.tabs.forEach((tab) => {
-            if (selectedTabLabel === tab.label) {
-                tab.notifyListeners(true);
-            }
-            else {
-                tab.notifyListeners(false);
-            }
-        });
+        this.setActiveTabByIndex(event.index);
+    }
+    setActiveTabByIndex(selectedIndex) {
+        const allTabs = this.tabs?.toArray?.() ?? [];
+        allTabs.forEach((tab, index) => tab.notifyListeners(index === selectedIndex));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TruTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: TruTabGroup, isStandalone: true, selector: "tru-tab-group", queries: [{ propertyName: "tabs", predicate: TruTab }], viewQueries: [{ propertyName: "tabGroup", first: true, predicate: MatTabGroup, descendants: true }], ngImport: i0, template: "<mat-tab-group #tabGroup\r\n               (selectedTabChange)=\"onChange($event)\"\r\n               animationDuration=\"0ms\">\r\n  <ng-content #outlet></ng-content>\r\n</mat-tab-group>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }], encapsulation: i0.ViewEncapsulation.None });