@3kles/kles-material-dynamicforms 21.7.5 → 21.7.6

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -344,16 +344,16 @@ function isDestroyable(value) {
 }
 
 class KlesDynamicFieldDirective {
-    constructor(container, injector) {
+    constructor(container, injector, applicationRef) {
         this.container = container;
         this.injector = injector;
+        this.applicationRef = applicationRef;
         this.context = null;
         this.subComponents = [];
+        this.subComponentViews = new Map();
     }
     ngOnDestroy() {
-        if (this.componentRef) {
-            this.componentRef.destroy();
-        }
+        this.destroyComponents();
     }
     ngOnInit() {
         this.buildComponent();
@@ -384,11 +384,7 @@ class KlesDynamicFieldDirective {
         }
     }
     buildComponent() {
-        if (this.componentRef) {
-            this.subComponents.forEach((c) => c.destroy());
-            this.subComponents = [];
-            this.componentRef.destroy();
-        }
+        this.destroyComponents();
         const options = {
             providers: [
                 ...(this.field.providers || []),
@@ -481,6 +477,14 @@ class KlesDynamicFieldDirective {
     createSubComponent(componentType, options) {
         const injector = Injector.create(options);
         const component = this.container.createComponent(componentType, { injector });
+        // The host element is projected into the field component. Keeping its view
+        // in this container would make Angular's logical DOM differ from the real DOM.
+        const viewIndex = this.container.indexOf(component.hostView);
+        const detachedView = viewIndex !== -1 ? this.container.detach(viewIndex) : null;
+        if (detachedView) {
+            this.applicationRef.attachView(detachedView);
+            this.subComponentViews.set(component, detachedView);
+        }
         component.onDestroy(() => {
             if (isDestroyable(injector)) {
                 injector.destroy();
@@ -488,7 +492,20 @@ class KlesDynamicFieldDirective {
         });
         return component;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    destroyComponents() {
+        this.componentRef?.destroy();
+        this.componentRef = undefined;
+        this.subComponents.forEach((component) => {
+            const view = this.subComponentViews.get(component);
+            if (view) {
+                this.applicationRef.detachView(view);
+            }
+            component.destroy();
+        });
+        this.subComponents = [];
+        this.subComponentViews.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.20", type: KlesDynamicFieldDirective, isStandalone: true, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", ui: "ui", siblingFields: "siblingFields", context: "context" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFieldDirective, decorators: [{
@@ -497,7 +514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                     selector: '[klesDynamicField]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { field: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Injector }, { type: i0.ApplicationRef }], propDecorators: { field: [{
                 type: Input
             }], group: [{
                 type: Input