@mozaic-ds/angular 2.0.32 → 2.0.33

package/fesm2022/mozaic-ds-angular.mjs

@@ -7,7 +7,7 @@ import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/fo
 import { WarningCircle32, Uploading32, CheckCircle32, CrossCircleFilled20, Refresh32, Refresh20, Eye20, Upload24, Cross24, ChevronLeft24, ChevronRight24, ChevronLeft20, ChevronRight20, CrossCircleFilled24, More24, Less24, InfoCircle32, CrossCircle32, Cross20, CrossCircle24, ImageAlt32, ChevronDown24, CheckCircleFilled32, WarningCircleFilled32, CrossCircleFilled32, InfoCircleFilled32, SidebarExpand24, ChevronDown20, InfoCircleFilled24, WarningCircleFilled24, CheckCircleFilled24, ArrowBottomRight24, ArrowTopRight24, StarHalf32, StarFilled32, Star32, StarHalf24, StarFilled24, Star24, StarHalf20, StarFilled20, Star20, Check20, Check24, ArrowBack24, ArrowNext24, HelpCircle24, Menu24, Notification24, Search24, PauseCircle24, PlayCircle24, ChevronUp20, Settings20, Drag20, ListAdd20, ViewGridX420, Filter20, FullscreenEnter20, FullscreenExit20, Download20, CheckCircle24 } from '@mozaic-ds/icons-angular';
 import { Overlay, OverlayConfig, OverlayPositionBuilder, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
-import { Subject, take } from 'rxjs';
+import { Subject, take, tap, of, firstValueFrom } from 'rxjs';
 import parsePhoneNumberFromString, { getCountries, getExampleNumber, isValidPhoneNumber, getCountryCallingCode } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
 import * as i1$1 from '@angular/cdk/scrolling';
@@ -11392,6 +11392,7 @@ class TreeStateService {
     expandedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
     loadingIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadingIds" }] : /* istanbul ignore next */ []));
     internalNodes = signal([], ...(ngDevMode ? [{ debugName: "internalNodes" }] : /* istanbul ignore next */ []));
+    loadChildrenFn = signal(null, ...(ngDevMode ? [{ debugName: "loadChildrenFn" }] : /* istanbul ignore next */ []));
     flatVisibleNodes = computed(() => {
         const result = [];
         this._flatten(this.internalNodes(), result, 0, null);
@@ -11427,6 +11428,21 @@ class TreeStateService {
             return next;
         });
     }
+    expandAndLoad(node) {
+        const wasExpanded = this.expandedIds().has(node.id);
+        this.toggleExpanded(node.id);
+        if (!wasExpanded) {
+            const loadFn = this.loadChildrenFn();
+            if (loadFn && node.children === undefined) {
+                this.addLoading(node.id);
+                return loadFn(node).pipe(take(1), tap((children) => {
+                    this.patchChildren(node.id, children);
+                    this.removeLoading(node.id);
+                }), tap(() => void 0));
+            }
+        }
+        return of(undefined);
+    }
     addLoading(id) {
         this.loadingIds.update((s) => new Set([...s, id]));
     }
@@ -11451,6 +11467,21 @@ class TreeStateService {
             return n;
         });
     }
+    findNode(nodeId) {
+        return this._findNodeRecursive(this.internalNodes(), nodeId);
+    }
+    _findNodeRecursive(nodes, id) {
+        for (const node of nodes) {
+            if (node.id === id)
+                return node;
+            if (node.children) {
+                const found = this._findNodeRecursive(node.children, id);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
     findParentId(nodeId) {
         const flat = this.flatVisibleNodes();
         const entry = flat.find((f) => f.node.id === nodeId);
@@ -11614,7 +11645,7 @@ class TreeKeyboardService {
                     break;
                 const isExpanded = this.state.expandedIds().has(current.node.id);
                 if (this._hasChildren(current.node) && !isExpanded && !current.node.disabled) {
-                    this.state.toggleExpanded(current.node.id);
+                    this.state.expandAndLoad(current.node).subscribe();
                 }
                 else if (isExpanded) {
                     const firstChild = flat[currentIndex + 1];
@@ -11642,7 +11673,7 @@ class TreeKeyboardService {
                 if (!current)
                     break;
                 if (this._hasChildren(current.node) && !current.node.disabled) {
-                    this.state.toggleExpanded(current.node.id);
+                    this.state.expandAndLoad(current.node).subscribe();
                 }
                 break;
             }
@@ -11690,7 +11721,7 @@ class TreeKeyboardService {
         const siblings = flat.filter((f) => f.depth === current.depth && f.parentId === current.parentId);
         for (const sibling of siblings) {
             if (this._hasChildren(sibling.node) && !this.state.expandedIds().has(sibling.node.id)) {
-                this.state.toggleExpanded(sibling.node.id);
+                this.state.expandAndLoad(sibling.node).subscribe();
             }
         }
     }
@@ -11760,24 +11791,8 @@ class MozTreeNodeComponent {
         }
     }
     onToggleExpand() {
-        const node = this.node();
-        if (this.isExpanded()) {
-            this.stateService.toggleExpanded(node.id);
-            this.expandChange.emit(node.id);
-            return;
-        }
-        this.stateService.toggleExpanded(node.id);
-        this.expandChange.emit(node.id);
-        const loadFn = this.loadChildren();
-        if (loadFn && node.children === undefined) {
-            this.stateService.addLoading(node.id);
-            loadFn(node)
-                .pipe(take(1))
-                .subscribe((children) => {
-                this.stateService.patchChildren(node.id, children);
-                this.stateService.removeLoading(node.id);
-            });
-        }
+        this.stateService.expandAndLoad(this.node()).subscribe();
+        this.expandChange.emit(this.node().id);
     }
     onCheckboxChange(event) {
         if (this.isDisabled())
@@ -11889,6 +11904,9 @@ class MozTreeComponent {
         effect(() => {
             this.selectionService.setRootNodes(this.nodes());
         });
+        effect(() => {
+            this.stateService.loadChildrenFn.set(this.loadChildren());
+        });
     }
     onTreeKeydown(event) {
         this.keyboardService.handleKeydown(event);
@@ -11902,6 +11920,41 @@ class MozTreeComponent {
     onSelectionChange(ids) {
         this.selectionChange.emit(ids);
     }
+    async expandPath(path) {
+        const loadFn = this.stateService.loadChildrenFn();
+        for (let i = 0; i < path.length - 1; i++) {
+            const nodeId = path[i];
+            const node = this.stateService.findNode(nodeId);
+            if (!node)
+                break;
+            // Expand first so the children area is visible
+            if (!this.stateService.expandedIds().has(nodeId)) {
+                this.stateService.toggleExpanded(nodeId);
+                this.expandedIdsChange.emit(new Set(this.stateService.expandedIds()));
+                // Yield to let Angular render the expansion
+                await new Promise((resolve) => setTimeout(resolve));
+            }
+            // Load children if needed
+            if (loadFn && node.children === undefined) {
+                this.stateService.addLoading(nodeId);
+                this.expandedIdsChange.emit(new Set(this.stateService.expandedIds()));
+                // Yield to let Angular render the loader
+                await new Promise((resolve) => setTimeout(resolve));
+                const children = await firstValueFrom(loadFn(node).pipe(take(1)));
+                this.stateService.patchChildren(nodeId, children);
+                this.stateService.removeLoading(nodeId);
+                // Yield to let Angular render the new children
+                await new Promise((resolve) => setTimeout(resolve));
+            }
+        }
+        this.expandedIdsChange.emit(new Set(this.stateService.expandedIds()));
+    }
+    scrollToNode(nodeId) {
+        setTimeout(() => {
+            const el = document.querySelector(`[data-tree-node-id="${nodeId}"]`);
+            el?.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        });
+    }
     expandAll() {
         const flat = this.stateService.flatVisibleNodes();
         const allIds = new Set(flat.map((f) => f.node.id));