@klippa/ngx-enhancy-forms 18.23.8 → 18.24.0

package/fesm2022/klippa-ngx-enhancy-forms.mjs

@@ -3,7 +3,7 @@ import { Directive, Input, EventEmitter, Component, SkipSelf, Optional, Output,
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { UntypedFormArray, UntypedFormGroup, FormControl, UntypedFormControl, FormArray, FormGroup, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup, FormControl, UntypedFormControl, FormGroup, FormArray, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { isString } from 'lodash-es';
 import { isArray } from 'lodash';
 import * as i4 from '@ng-select/ng-select';
@@ -173,6 +173,7 @@ class FormComponent {
         this.activeControls = [];
     }
     ngOnInit() {
+        this.topLevelFormControl = this.formGroup ?? this.formArray;
         if (isValueSet(this.patchValueInterceptor)) {
             this.addSupportForPatchValueInterceptor();
         }
@@ -184,13 +185,13 @@ class FormComponent {
                     throw new Error(`cannot index FormArray with ${typeof injectAt}`);
                 }
                 if (injectInto.at(injectAt)?.disabled) {
-                    this.formGroup.disable();
+                    this.topLevelFormControl.disable();
                 }
                 const valueBeforeInject = injectInto.at(injectAt)?.value;
                 if (isValueSet(valueBeforeInject)) {
-                    this.formGroup.patchValue(valueBeforeInject);
+                    this.topLevelFormControl.patchValue(valueBeforeInject);
                 }
-                injectInto.setControl(injectAt, this.formGroup);
+                injectInto.setControl(injectAt, this.topLevelFormControl);
                 this.onInjected.emit(valueBeforeInject);
             }
             else if (injectInto instanceof UntypedFormGroup) {
@@ -198,13 +199,13 @@ class FormComponent {
                     throw new Error(`cannot index FormGroup with ${typeof injectAt}`);
                 }
                 if (injectInto.get(injectAt)?.disabled) {
-                    this.formGroup.disable();
+                    this.topLevelFormControl.disable();
                 }
                 const valueBeforeInject = injectInto.get(injectAt)?.value;
                 if (isValueSet(valueBeforeInject)) {
-                    this.formGroup.patchValue(valueBeforeInject);
+                    this.topLevelFormControl.patchValue(valueBeforeInject);
                 }
-                injectInto.setControl(injectAt, this.formGroup);
+                injectInto.setControl(injectAt, this.topLevelFormControl);
                 this.onInjected.emit(valueBeforeInject);
             }
         }
@@ -225,7 +226,7 @@ class FormComponent {
             const injectInto = this.subFormPlaceholder.injectInto;
             const injectAt = this.subFormPlaceholder.at;
             if (injectInto instanceof UntypedFormArray) {
-                const idx = injectInto.controls.findIndex(e => e === this.formGroup);
+                const idx = injectInto.controls.findIndex(e => e === this.topLevelFormControl);
                 injectInto.setControl(idx, new FormControl());
             }
             else if (injectInto instanceof UntypedFormGroup) {
@@ -275,15 +276,15 @@ class FormComponent {
         };
     }
     addSupportForPatchValueInterceptor() {
-        const fn = this.formGroup.patchValue;
+        const fn = this.topLevelFormControl.patchValue;
         const newFn = (value, options) => {
             this.patchValueInterceptor(value).then((val) => {
                 setTimeout(() => {
-                    fn.call(this.formGroup, val, options);
+                    fn.call(this.topLevelFormControl, val, options);
                 });
             });
         };
-        this.formGroup.patchValue = newFn;
+        this.topLevelFormControl.patchValue = newFn;
     }
     registerControl(formControl, formElement) {
         this.activeControls.push({ formControl, formElement });
@@ -334,7 +335,12 @@ class FormComponent {
     }
     getAllFormControls() {
         const result = [];
-        this.addFormGroupControls(this.formGroup, result);
+        if (this.topLevelFormControl instanceof FormGroup) {
+            this.addFormGroupControls(this.topLevelFormControl, result);
+        }
+        else if (this.topLevelFormControl instanceof FormArray) {
+            this.addFormArrayControls(this.topLevelFormControl, result);
+        }
         return result;
     }
     addFormControl(control, result) {
@@ -352,36 +358,39 @@ class FormComponent {
         return this.warnings.get(control);
     }
     trySubmit() {
-        this.formGroup.markAllAsTouched();
+        this.topLevelFormControl.markAllAsTouched();
         const allControls = this.getAllFormControls();
         const originalDisabledStates = allControls.map(e => {
             return { control: e, disabled: e.disabled };
         });
         allControls.forEach(e => this.disableInactiveFormControl(e));
         allControls.forEach(e => e.updateValueAndValidity());
-        const formGroupValue = this.formGroup.value;
-        const renderedAndEnabledValues = this.getRenderedFieldValuesFormGroup(this.formGroup, true);
-        const renderedButDisabledValues = this.getRenderedFieldValuesFormGroup(this.formGroup, false);
-        return new Promise((resolve, reject) => {
-            if (this.formGroup.pending) {
-                const sub = this.formGroup.statusChanges.subscribe((res) => {
-                    if (res !== 'PENDING') {
-                        sub.unsubscribe();
-                        this.handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue)
-                            .then(resolve)
-                            .catch(reject);
-                    }
-                });
-            }
-            else {
-                this.handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue)
-                    .then(resolve)
-                    .catch(reject);
-            }
-        });
+        const formGroupValue = this.topLevelFormControl.value;
+        if (this.topLevelFormControl instanceof FormGroup) {
+            const renderedAndEnabledValues = this.getRenderedFieldValuesFormGroup(this.topLevelFormControl, true);
+            const renderedButDisabledValues = this.getRenderedFieldValuesFormGroup(this.topLevelFormControl, false);
+            return new Promise((resolve, reject) => {
+                if (this.topLevelFormControl.pending) {
+                    const sub = this.topLevelFormControl.statusChanges.subscribe((res) => {
+                        if (res !== 'PENDING') {
+                            sub.unsubscribe();
+                            this.handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue)
+                                .then(resolve)
+                                .catch(reject);
+                        }
+                    });
+                }
+                else {
+                    this.handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue)
+                        .then(resolve)
+                        .catch(reject);
+                }
+            });
+        }
+        throw new Error('Submitting a FormArray as topLevel not supported (yet). Wrap it in a FormGroup.');
     }
     handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue) {
-        if (this.formGroup.invalid) {
+        if (this.topLevelFormControl.invalid) {
             this.activeControls.find((e) => e.formControl.invalid)?.formElement?.scrollTo();
             this.setDisabledStatesForAllControls(originalDisabledStates);
             return Promise.reject(invalidFieldsSymbol);
@@ -436,7 +445,7 @@ class FormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormComponent, deps: [{ token: FormComponent, optional: true, skipSelf: true }, { token: SubFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FormComponent, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", warnings: "warnings", errors: "errors", patchValueInterceptor: "patchValueInterceptor", allowSubmitOn: "allowSubmitOn" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FormComponent, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", formArray: "formArray", warnings: "warnings", errors: "errors", patchValueInterceptor: "patchValueInterceptor", allowSubmitOn: "allowSubmitOn" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -455,6 +464,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], formArray: [{
+                type: Input
             }], warnings: [{
                 type: Input
             }], errors: [{
@@ -2578,6 +2589,9 @@ class WithTooltipDirective {
                     this.div.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
                     this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem))`;
                 }
+                if (this.tooltipMinWidth > 0) {
+                    this.div.style.minWidth = `${this.tooltipMinWidth}px`;
+                }
                 this.div.style.maxWidth = `${this.tooltipMaxWidth}px`;
                 this.div.style.whiteSpace = 'break-spaces';
                 this.div.style.border = `1px solid ${colors[this.klpWithTooltip].withAlpha}`;
@@ -2676,7 +2690,7 @@ class WithTooltipDirective {
         this.viewRefForTemplate.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText", tooltipTemplate: "tooltipTemplate", tooltipMaxWidth: "tooltipMaxWidth", position: "position" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText", tooltipTemplate: "tooltipTemplate", tooltipMinWidth: "tooltipMinWidth", tooltipMaxWidth: "tooltipMaxWidth", position: "position" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: WithTooltipDirective, decorators: [{
             type: Directive,
@@ -2689,6 +2703,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }], tooltipTemplate: [{
                 type: Input
+            }], tooltipMinWidth: [{
+                type: Input
             }], tooltipMaxWidth: [{
                 type: Input
             }], position: [{