@klippa/ngx-enhancy-forms 14.7.16 → 14.8.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, SkipSelf, Optional, InjectionToken, Inject, ViewChild, EventEmitter, Host, Output, HostBinding, TemplateRef, ContentChild, NgModule } from '@angular/core';
+import { Directive, Input, Component, SkipSelf, Optional, InjectionToken, Inject, ViewChild, EventEmitter, Host, Output, HostBinding, TemplateRef, ContentChild, inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -85,6 +85,9 @@ function splitArrayByCondition(value, condition) {
         return acc;
     }, [[]]);
 }
+function isArrayOf(arr, kind) {
+    return arr.reduce((acc, val) => acc && val instanceof kind, true);
+}
 
 function mergeArray(arrA, arrB) {
     const arr = new Array(Math.max(arrA.length, arrB.length));
@@ -409,7 +412,7 @@ class WithTooltipDirective {
             this.triangle = document.createElement('div');
             this.triangle.style.zIndex = '1';
             this.triangle.style.position = 'fixed';
-            this.triangle.style.left = `${el.nativeElement.getBoundingClientRect().x + (el.nativeElement.getBoundingClientRect().width / 2)}px`;
+            this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 3rem)`;
             this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
             this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
             this.triangle.style.width = '0';
@@ -1260,71 +1263,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 args: ['contentRef']
             }] } });
 
+class FormValidationError extends Error {
+    constructor(path, message) {
+        super(message);
+        this.name = 'FormValidationError';
+        this.path = path;
+    }
+}
+const KLP_FORM_ERROR_HANDLER = new InjectionToken('KLP_FORM_ERROR_HANDLER');
+const DefaultErrorHandler = (error) => {
+    if (Array.isArray(error) && isArrayOf(error, FormValidationError)) {
+        // If the error is an array of FormValidationErrors, then pass it along.
+        return error;
+    }
+    else if (error instanceof FormValidationError) {
+        // If the error is a FormValidationError, then wrap it and pass it on.
+        return [error];
+    }
+    throw error;
+};
+
 class FormSubmitButtonComponent {
-    constructor(parentForm) {
-        this.parentForm = parentForm;
+    constructor() {
+        this.parentForm = inject(FormComponent, { host: true, optional: true });
+        this.handleError = inject(KLP_FORM_ERROR_HANDLER, { optional: true }) ?? DefaultErrorHandler;
         this.isLoading = false;
         this.fullWidth = false;
         this.variant = 'greenFilled';
         this.before = () => Promise.resolve();
         this.after = () => Promise.resolve();
-    }
-    get _() {
-        return this.fullWidth;
+        this.setValidationError = (e) => {
+            this.parentForm.formGroup.get(e.path)?.setErrors({ message: { value: e.message } });
+        };
     }
     async submitForm() {
+        await this.before().catch(() => null);
         try {
-            await this.before();
+            const [renderedAndEnabledValues, renderedValues] = await this.parentForm.trySubmit();
+            this.isLoading = true;
+            await this.submitCallback(renderedAndEnabledValues, renderedValues)
+                .finally(() => this.isLoading = false);
         }
         catch (e) {
-            return;
-        }
-        this.parentForm
-            .trySubmit()
-            .then(([renderedAndEnabledValues, renderedValues]) => {
-            this.isLoading = true;
-            const submitCallbackResult = this.submitCallback(renderedAndEnabledValues, renderedValues);
-            if (isNullOrUndefined(submitCallbackResult)) {
-                throw new Error('No promise is returned in your submit function.');
-            }
-            return submitCallbackResult.then(() => (this.isLoading = false)).catch((e) => {
-                this.isLoading = false;
-                throw e;
-            });
-        })
-            .catch((e) => {
             if (e === invalidFieldsSymbol) {
                 return; // swallow the error, the framework will scroll to the field that needs attention
             }
-            throw e;
-        });
+            this.handleError(e).forEach(this.setValidationError);
+            return;
+        }
         await this.after();
     }
 }
-FormSubmitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormSubmitButtonComponent, deps: [{ token: FormComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormSubmitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormSubmitButtonComponent, selector: "klp-form-submit-button", inputs: { isLoading: "isLoading", fullWidth: "fullWidth", variant: "variant", before: "before", after: "after", submitCallback: "submitCallback" }, host: { properties: { "class._fullWidth": "this._" } }, ngImport: i0, template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
+FormSubmitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormSubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FormSubmitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormSubmitButtonComponent, selector: "klp-form-submit-button", inputs: { isLoading: "isLoading", fullWidth: "fullWidth", variant: "variant", submitCallback: "submitCallback", before: "before", after: "after" }, host: { properties: { "class._fullWidth": "this.fullWidth" } }, ngImport: i0, template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormSubmitButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'klp-form-submit-button', template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\ttype=\"submit\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: FormComponent, decorators: [{
-                    type: Host
-                }, {
-                    type: Optional
-                }] }]; }, propDecorators: { isLoading: [{
+        }], propDecorators: { isLoading: [{
                 type: Input
             }], fullWidth: [{
                 type: Input
+            }, {
+                type: HostBinding,
+                args: ['class._fullWidth']
             }], variant: [{
                 type: Input
+            }], submitCallback: [{
+                type: Input
             }], before: [{
                 type: Input
             }], after: [{
                 type: Input
-            }], submitCallback: [{
-                type: Input
-            }], _: [{
-                type: HostBinding,
-                args: ['class._fullWidth']
             }] } });
 
 class MultipleValueAccessorBase extends ValueAccessorBase {
@@ -2208,5 +2217,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, HourMinuteInputComponent, KLP_DATE_FORMATS, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, Orientation, PasswordFieldComponent, RadioComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, WithTooltipDirective, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
+export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, DefaultErrorHandler, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, FormValidationError, HourMinuteInputComponent, KLP_DATE_FORMATS, KLP_FORM_ERROR_HANDLER, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, Orientation, PasswordFieldComponent, RadioComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, WithTooltipDirective, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
 //# sourceMappingURL=klippa-ngx-enhancy-forms.mjs.map