@acorex/platform 20.0.20 → 20.0.22

package/fesm2022/acorex-platform-layout-builder.mjs

@@ -694,6 +694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         }] });
 
 class AXPWidgetRendererDirective {
+    //#endregion
     constructor() {
         this.parentNode = input();
         this.index = input();
@@ -703,6 +704,7 @@ class AXPWidgetRendererDirective {
         this.options = this._options.asReadonly();
         this.onOptionsChanged = output();
         this.onValueChanged = output();
+        //#region ----   Properties   ----
         this.mergedOptions = signal({});
         this.injector = inject(Injector);
         this.builderService = inject(AXPLayoutBuilderService);
@@ -715,9 +717,15 @@ class AXPWidgetRendererDirective {
         this.viewContainerRef = inject(ViewContainerRef);
         this.isLoading = signal(false);
         this.expressionEvaluators = new Map();
+        this.renderTimeoutId = null;
+        this.hasInitialRender = false;
         this.onContextChanged = new Subject();
         effect(async () => {
             const changed = this.contextService.changeEvent();
+            // Don't trigger re-render during initial setup
+            if (!this.hasInitialRender) {
+                return;
+            }
             if ((await this.updateOptionsBasedOnContext()) > 0) {
                 this.applyOptions();
             }
@@ -743,13 +751,21 @@ class AXPWidgetRendererDirective {
         }
     }
     rerenderComponent() {
-        this.isLoading.set(false);
-        // Call loadComponent to create and render the component
-        setTimeout(async () => {
+        // Clear any pending render operation
+        if (this.renderTimeoutId) {
+            clearTimeout(this.renderTimeoutId);
+            this.renderTimeoutId = null;
+        }
+        // Don't reset loading state here to prevent race conditions
+        this.renderTimeoutId = setTimeout(async () => {
             await this.loadComponent();
+            this.renderTimeoutId = null;
         });
     }
     ngOnDestroy() {
+        if (this.renderTimeoutId) {
+            clearTimeout(this.renderTimeoutId);
+        }
         if (this.componentRef) {
             this.componentRef.destroy();
         }
@@ -759,68 +775,76 @@ class AXPWidgetRendererDirective {
             return;
         }
         this.isLoading.set(true);
-        // Destroy the existing component if it exists
-        if (this.componentRef) {
-            this.componentRef.destroy();
+        try {
+            // Destroy the existing component if it exists
+            if (this.componentRef) {
+                this.componentRef.destroy();
+            }
+            this.viewContainerRef.clear();
+            //
+            const widget = this.widgetRegistery.resolve(this.node().type);
+            //
+            const props = [...(widget?.properties ?? []), ...(widget?.components[this.mode()]?.properties ?? [])]
+                ?.filter((c) => c.schema.defaultValue != null)
+                .map((c) => ({ [c.name]: cloneDeep(c.schema.defaultValue) }))
+                .reduce((acc, curr) => {
+                return { ...acc, ...curr };
+            }, {});
+            //
+            this.mergedOptions.set(merge(props, widget?.options, this.node().options) || {});
+            this.preprocessAndInitialOptions(cloneDeep(this.node().options));
+            await this.updateOptionsBasedOnContext();
+            //
+            this._options.update((val) => ({ ...val, ...this.mergedOptions() }));
+            //
+            const tokenValue = {
+                node: this.node(),
+                options: this.mergedOptions(),
+                config: widget,
+            };
+            const token = Injector.create({
+                parent: this.injector,
+                providers: [
+                    {
+                        provide: AXP_WIDGET_TOKEN,
+                        useValue: tokenValue,
+                    },
+                ],
+            });
+            //
+            const loadingRef = this.viewContainerRef.createComponent(AXPWidgetPlaceholderComponent);
+            //
+            const com = await widget?.components[this.mode()]?.component();
+            if (!com) {
+                console.error(`${this.node().type} widget component not found with mode: ${this.mode()}`);
+                return;
+            }
+            this.componentRef = this.viewContainerRef.createComponent(com, { injector: token });
+            this.instance = this.componentRef.instance;
+            this.instance.setStatus(AXPWidgetStatus.Rendering);
+            this.instance.parent = this.parentNode();
+            this.instance.index = this.index();
+            this.instance.mode = this.mode();
+            this.instance.setStatus(AXPWidgetStatus.Rendered);
+            this.instance?.onOptionsChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+                this.onOptionsChanged.emit({ sender: this, widget: c.sender });
+            });
+            this.instance?.onValueChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
+                this.onValueChanged.emit({ sender: this, widget: c.sender });
+            });
+            await this.updateValueBasedOnFormula();
+            await this.assignTriggers();
+            //
+            loadingRef.destroy();
+            // Mark that initial render is complete
+            this.hasInitialRender = true;
         }
-        this.viewContainerRef.clear();
-        //
-        const widget = this.widgetRegistery.resolve(this.node().type);
-        //
-        const props = [...(widget?.properties ?? []), ...(widget?.components[this.mode()]?.properties ?? [])]
-            ?.filter((c) => c.schema.defaultValue != null)
-            .map((c) => ({ [c.name]: cloneDeep(c.schema.defaultValue) }))
-            .reduce((acc, curr) => {
-            return { ...acc, ...curr };
-        }, {});
-        //
-        this.mergedOptions.set(merge(props, widget?.options, this.node().options) || {});
-        this.preprocessAndInitialOptions(cloneDeep(this.node().options));
-        await this.updateOptionsBasedOnContext();
-        //
-        this._options.update((val) => ({ ...val, ...this.mergedOptions() }));
-        //
-        const tokenValue = {
-            node: this.node(),
-            options: this.mergedOptions(),
-            config: widget,
-        };
-        const token = Injector.create({
-            parent: this.injector,
-            providers: [
-                {
-                    provide: AXP_WIDGET_TOKEN,
-                    useValue: tokenValue,
-                },
-            ],
-        });
-        //
-        const loadingRef = this.viewContainerRef.createComponent(AXPWidgetPlaceholderComponent);
-        //
-        const com = await widget?.components[this.mode()]?.component();
-        if (!com) {
-            console.error(`${this.node().type} widget component not found with mode: ${this.mode()}`);
-            return;
+        catch (error) {
+            console.error('Error loading component:', error);
+        }
+        finally {
+            this.isLoading.set(false);
         }
-        this.componentRef = this.viewContainerRef.createComponent(com, { injector: token });
-        this.instance = this.componentRef.instance;
-        this.instance.setStatus(AXPWidgetStatus.Rendering);
-        this.instance.parent = this.parentNode();
-        this.instance.index = this.index();
-        this.instance.mode = this.mode();
-        this.instance.setStatus(AXPWidgetStatus.Rendered);
-        this.instance?.onOptionsChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
-            this.onOptionsChanged.emit({ sender: this, widget: c.sender });
-        });
-        this.instance?.onValueChanged?.pipe(this.unsubscriber.takeUntilDestroy).subscribe((c) => {
-            this.onValueChanged.emit({ sender: this, widget: c.sender });
-        });
-        await this.updateValueBasedOnFormula();
-        await this.assignTriggers();
-        //
-        loadingRef.destroy();
-        this.isLoading.set(false);
-        //
     }
     applyOptions() {
         if (!this.instance)