@acorex/components 22.1.8 → 22.2.0

package/fesm2022/acorex-components-lookup.mjs

@@ -1,4 +1,4 @@
-import { AXDataSource, AXListDataSource, NXValueComponent, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
+import { AXDataSource, retryFrames, scrollNearestIntoView, AXListDataSource, NXValueComponent, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
 import { AXButtonComponent } from '@acorex/components/button';
 import { AXChipsComponent } from '@acorex/components/chips';
 import * as i1$1 from '@acorex/components/decorators';
@@ -9,11 +9,11 @@ import { AXPlatform } from '@acorex/core/platform';
 import { AXTranslatorPipe, AXTranslationService, toTranslatedSignal } from '@acorex/core/translation';
 import { NgTemplateOutlet, AsyncPipe, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, viewChild, viewChildren, inject, NgZone, effect, untracked, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, DestroyRef, model, booleanAttribute, linkedSignal, afterRenderEffect, NgModule } from '@angular/core';
+import { input, output, signal, computed, viewChild, viewChildren, inject, NgZone, effect, untracked, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, afterRenderEffect, DestroyRef, model, booleanAttribute, linkedSignal, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@acorex/cdk/list-navigation';
 import { AXListNavigationDirective, AXListNavigationItemDirective, AXListNavigationModule } from '@acorex/cdk/list-navigation';
-import { AXHighlightTextComponent } from '@acorex/cdk/highlight';
+import { AXHighlightTextComponent } from '@acorex/components/highlight';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
@@ -215,6 +215,58 @@ function findTreeNode(nodes, valueField, key) {
     return null;
 }
 
+/**
+ * Scrolls a CDK virtual viewport so the row at `index` is visible using nearest-edge behavior.
+ * Uses offset math because the row may not be rendered in the DOM yet.
+ */
+function scrollNearestByOffset(viewport, index, itemHeight, totalCount) {
+    const viewportSize = viewport.getViewportSize();
+    const maxOffset = Math.max(0, totalCount * itemHeight - viewportSize);
+    const itemTop = index * itemHeight;
+    const itemBottom = itemTop + itemHeight;
+    const currentOffset = viewport.measureScrollOffset();
+    if (itemTop < currentOffset) {
+        viewport.scrollToOffset(itemTop);
+    }
+    else if (itemBottom > currentOffset + viewportSize) {
+        viewport.scrollToOffset(Math.min(maxOffset, itemBottom - viewportSize));
+    }
+}
+/**
+ * Scrolls a data-table body so the selected row is visible, accounting for a sticky header.
+ */
+function scrollTableToSelectedRow(host, attempts = 5) {
+    retryFrames(() => {
+        const wrapper = host.querySelector('.ax-data-table-wrapper');
+        const row = wrapper?.querySelector('tr.ax-state-selected');
+        if (!wrapper || !row) {
+            return false;
+        }
+        const thead = wrapper.querySelector('thead');
+        const topInset = thead?.offsetHeight ?? 0;
+        scrollNearestIntoView(wrapper, row, topInset);
+        return true;
+    }, attempts);
+}
+/**
+ * Scrolls a lookup tree container so the node with `selectedId` is visible.
+ * Nodes inside collapsed branches are not in the DOM and are skipped.
+ */
+function scrollTreeToSelectedNode(host, selectedId, attempts = 5) {
+    if (!selectedId) {
+        return;
+    }
+    retryFrames(() => {
+        const container = host.querySelector('.ax-lookup-tree');
+        const node = container?.querySelector(`[data-tree-node-id="${CSS.escape(selectedId)}"]`);
+        if (!container || !node) {
+            return false;
+        }
+        scrollNearestIntoView(container, node);
+        return true;
+    }, attempts);
+}
+
 /**
  * Shared `AXDataSource` + CDK virtual scroll plumbing for the list-based lookup views
  * (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`).
@@ -370,10 +422,61 @@ class AXLookupListViewBase {
                 changedSub.unsubscribe();
             });
         });
+        // Scroll the selected row into view once the virtual viewport and data are ready.
+        effect(() => {
+            const viewport = this.viewportRef();
+            const loading = this.isLoading();
+            const count = this.totalCount();
+            const values = this.selectedValues();
+            const field = this.valueField();
+            const height = this.itemHeight();
+            const source = this.dataSource();
+            if (!viewport || loading || count === 0 || values.length === 0) {
+                return;
+            }
+            untracked(() => {
+                requestAnimationFrame(() => {
+                    viewport.checkViewportSize();
+                    const index = this.#resolveSelectedIndex(source, values, field);
+                    if (index >= 0) {
+                        scrollNearestByOffset(viewport, index, height, count);
+                    }
+                });
+            });
+        });
+    }
+    #resolveSelectedIndex(source, values, valueField) {
+        const selectedValue = values[0];
+        if (selectedValue == null) {
+            return -1;
+        }
+        const items = source.cachedItems;
+        for (let index = 0; index < items.length; index++) {
+            const item = items[index];
+            if (item != null && item[valueField] == selectedValue) {
+                return index;
+            }
+        }
+        return -1;
     }
-    /** Moves keyboard focus to the first rendered list option. */
+    /** Moves keyboard focus to the selected list option, or the first option when none is selected. */
     focusFirst() {
-        this.listNavigation()?.focusOnIndex(0);
+        const nav = this.listNavigation();
+        if (!nav) {
+            return;
+        }
+        const viewport = this.viewportRef();
+        const selectedHost = viewport?.elementRef.nativeElement.querySelector('.ax-lookup-option-host.ax-state-selected');
+        if (selectedHost) {
+            const items = this.navItems();
+            const index = items.findIndex((item) => item.itemElem.nativeElement === selectedHost);
+            if (index >= 0) {
+                nav.activeIndex.set(index);
+                nav.navigateTo(items[index]);
+                return;
+            }
+        }
+        nav.focusOnIndex(0);
     }
     getValue(item) {
         return item?.[this.valueField()];
@@ -617,7 +720,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * @category Components
  */
 class AXLookupDropDownTreeComponent {
+    #host;
     constructor() {
+        this.#host = inject((ElementRef));
         /**
          * The tree datasource: an array of nodes or a lazy children callback.
          */
@@ -681,6 +786,13 @@ class AXLookupDropDownTreeComponent {
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         this.treeInstances = computed(() => [{ id: this.filterKey(), source: this.dataSource() }], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "treeInstances" }] : /* istanbul ignore next */ []));
+        afterRenderEffect(() => {
+            const selectedId = this.selectedIds()[0];
+            if (!selectedId || this.isEmpty()) {
+                return;
+            }
+            scrollTreeToSelectedNode(this.#host.nativeElement, selectedId);
+        });
     }
     /** Whether the filtered tree currently has no nodes. */
     hasNoMatches() {
@@ -727,8 +839,8 @@ class AXLookupDropDownTreeComponent {
       </div>
     }
 
-    <ng-template #defaultNodeTemplate let-ctx>
-      <span class="ax-lookup-tree-node-label">{{ ctx.node[textField()] | translate | async }}</span>
+    <ng-template #defaultNodeTemplate let-node>
+      <span class="ax-lookup-tree-node-label">{{ node?.[textField()] | translate | async }}</span>
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -769,12 +881,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       </div>
     }
 
-    <ng-template #defaultNodeTemplate let-ctx>
-      <span class="ax-lookup-tree-node-label">{{ ctx.node[textField()] | translate | async }}</span>
+    <ng-template #defaultNodeTemplate let-node>
+      <span class="ax-lookup-tree-node-label">{{ node?.[textField()] | translate | async }}</span>
     </ng-template>
   `,
                 }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**
  * Internal mini component for the `multi-column-tree` lookup mode:
@@ -784,7 +896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * @category Components
  */
 class AXLookupMultiColumnTreeComponent {
+    #host;
     constructor() {
+        this.#host = inject((ElementRef));
         /**
          * The datasource providing hierarchical rows (roots on load, children via `parentField`).
          */
@@ -891,6 +1005,12 @@ class AXLookupMultiColumnTreeComponent {
             }
             return classes.join(' ');
         };
+        afterRenderEffect(() => {
+            if (this.selectedValues().length === 0) {
+                return;
+            }
+            scrollTableToSelectedRow(this.#host.nativeElement);
+        });
     }
     /** Stable unique key for `@for` — avoids NG0955 when `field` is missing or duplicated. */
     trackColumnKey(index, column) {
@@ -1057,7 +1177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     </ng-template>
   `,
                 }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], parentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], parentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**
  * Internal mini component for the `multi-column` lookup mode:
@@ -1197,6 +1317,12 @@ class AXLookupMultiColumnComponent {
             }
             return classes.join(' ');
         };
+        afterRenderEffect(() => {
+            if (this.selectedValues().length === 0 || this.#totalCount() === 0) {
+                return;
+            }
+            scrollTableToSelectedRow(this.#host.nativeElement);
+        });
         effect((onCleanup) => {
             const source = this.dataSource();
             this.tableDataSource.config.key = source.config.key || this.valueField();
@@ -1419,7 +1545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * @category Components
  */
 class AXLookupMultiSelectTreeComponent {
+    #host;
     constructor() {
+        this.#host = inject((ElementRef));
         /**
          * The tree datasource: an array of nodes or a lazy children callback.
          */
@@ -1488,6 +1616,13 @@ class AXLookupMultiSelectTreeComponent {
         ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
         this.treeInstances = computed(() => [{ id: this.filterKey(), source: this.dataSource() }], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "treeInstances" }] : /* istanbul ignore next */ []));
+        afterRenderEffect(() => {
+            const selectedId = this.selectedIds()[0];
+            if (!selectedId || this.isEmpty()) {
+                return;
+            }
+            scrollTreeToSelectedNode(this.#host.nativeElement, selectedId);
+        });
     }
     /** Whether the filtered tree currently has no nodes. */
     hasNoMatches() {
@@ -1530,8 +1665,8 @@ class AXLookupMultiSelectTreeComponent {
       </div>
     }
 
-    <ng-template #defaultNodeTemplate let-ctx>
-      <span class="ax-lookup-tree-node-label">{{ ctx.node[textField()] | translate | async }}</span>
+    <ng-template #defaultNodeTemplate let-node>
+      <span class="ax-lookup-tree-node-label">{{ node?.[textField()] | translate | async }}</span>
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -1572,12 +1707,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       </div>
     }
 
-    <ng-template #defaultNodeTemplate let-ctx>
-      <span class="ax-lookup-tree-node-label">{{ ctx.node[textField()] | translate | async }}</span>
+    <ng-template #defaultNodeTemplate let-node>
+      <span class="ax-lookup-tree-node-label">{{ node?.[textField()] | translate | async }}</span>
     </ng-template>
   `,
                 }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 /**
  * Internal mini component for the `multi-select` lookup mode: