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

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
@@ -681,6 +698,7 @@ class KlesDynamicFormComponent {
         this.submit = new EventEmitter();
         this._onLoaded = new EventEmitter();
         this.direction = 'column';
+        this.wrap = true;
         this.orientationClass = 'dynamic-form-column';
     }
     ngOnInit() {
@@ -834,8 +852,8 @@ class KlesDynamicFormComponent {
         return uiGroup;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFormComponent, deps: [{ token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesDynamicFormComponent, isStandalone: true, selector: "app-kles-dynamic-form", inputs: { context: "context", fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction", formClass: "formClass" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
-        <form class="{{ orientationClass }}" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesDynamicFormComponent, isStandalone: true, selector: "app-kles-dynamic-form", inputs: { context: "context", fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction", wrap: "wrap", formClass: "formClass" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
+        <form class="{{ orientationClass }}" [class.dynamic-form-nowrap]="direction === 'row' && wrap === false" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
             @for (field of fields; track field.name) {
                 @if (field.visible !== false) {
                     <ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields" [context]="context"> </ng-container>
@@ -845,12 +863,12 @@ class KlesDynamicFormComponent {
                 <mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
             }
         </form>
-    `, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
+    `, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'klesDynamicForm', selector: 'app-kles-dynamic-form', standalone: true, template: `
-        <form class="{{ orientationClass }}" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
+        <form class="{{ orientationClass }}" [class.dynamic-form-nowrap]="direction === 'row' && wrap === false" [ngClass]="formClass" [formGroup]="form" (submit)="onSubmit($event)">
             @for (field of fields; track field.name) {
                 @if (field.visible !== false) {
                     <ng-container klesDynamicField [field]="field" [group]="form" [ui]="ui" [siblingFields]="fields" [context]="context"> </ng-container>
@@ -860,7 +878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 <mat-error matErrorForm [form]="form" [validations]="validators" [asyncValidations]="asyncValidators"></mat-error>
             }
         </form>
-    `, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, FormsModule, ReactiveFormsModule, MatError], styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"] }]
+    `, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }], imports: [CommonModule, MatErrorFormDirective, KlesDynamicFieldDirective, FormsModule, ReactiveFormsModule, MatError], styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ".dynamic-form-row.dynamic-form-nowrap{flex-wrap:nowrap}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-grid{display:grid}\n", ".dynamic-form-inline-grid{display:inline-grid}\n"] }]
         }], ctorParameters: () => [{ type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { context: [{
                 type: Input
             }], fields: [{
@@ -875,6 +893,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 type: Output
             }], direction: [{
                 type: Input
+            }], wrap: [{
+                type: Input
             }], formClass: [{
                 type: Input
             }] } });
@@ -2828,7 +2848,7 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
         this.orientationClass = 'group-container';
     }
     get className() {
-        return this.orientationClass;
+        return this.orientationClass === 'group-container-row' && this.field.wrap === false ? `${this.orientationClass} group-container-nowrap` : this.orientationClass;
     }
     ngOnInit() {
         this.subGroup = this.group.controls[this.field.name];
@@ -2874,7 +2894,7 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
                 }
             </ng-container>
         </ng-container>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row.group-container-nowrap{flex-wrap:nowrap}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
 };
 KlesFormGroupComponent = __decorate([
     FieldMapper({ type: EnumType.group, factory: (field) => new KlesFormGroup(field).create(), ui: (field) => new KlesFormUiGroup(field).create() })
@@ -2897,7 +2917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 }
             </ng-container>
         </ng-container>
-    `, standalone: true, imports: [KlesDynamicFieldDirective, MatTooltip, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"] }]
+    `, standalone: true, imports: [KlesDynamicFieldDirective, MatTooltip, ReactiveFormsModule], styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit;justify-content:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column;justify-content:inherit}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:inherit}\n", ":host.group-container-row.group-container-nowrap{flex-wrap:nowrap}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"] }]
         }], propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']