@klippa/ngx-enhancy-forms 16.7.7 → 16.9.3

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

@@ -1,10 +1,11 @@
 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';
 import { UntypedFormArray, UntypedFormGroup, UntypedFormControl, FormControl, FormArray, FormGroup, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { isString, isArray } from 'lodash-es';
+import { isString } from 'lodash-es';
+import { isArray } from 'lodash';
 import * as i4 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i2$1 from '@dustfoundation/ngx-sortablejs';
@@ -84,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));
@@ -150,6 +154,9 @@ class FormComponent {
         this.activeControls = [];
     }
     ngOnInit() {
+        if (isValueSet(this.patchValueInterceptor)) {
+            this.addSupportForPatchValueInterceptor();
+        }
         if (isValueSet(this.parent) && isValueSet(this.subFormPlaceholder)) {
             const injectInto = this.subFormPlaceholder.injectInto;
             const injectAt = this.subFormPlaceholder.at;
@@ -180,9 +187,6 @@ class FormComponent {
                 injectInto.setControl(injectAt, this.formGroup);
             }
         }
-        if (isValueSet(this.patchValueInterceptor)) {
-            this.addSupportForPatchValueInterceptor();
-        }
     }
     ngOnChanges(simpleChanges) {
         if (simpleChanges.readOnly?.currentValue === true) {
@@ -281,6 +285,25 @@ class FormComponent {
         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);
+            }
+        });
+    }
+    handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue) {
         if (this.formGroup.invalid) {
             this.activeControls.find((e) => !e.formControl.valid)?.formElement?.scrollTo();
             this.setDisabledStatesForAllControls(originalDisabledStates);
@@ -359,6 +382,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }] } });
 
+const triangleSize = '12px';
+class WithTooltipDirective {
+    constructor(el) {
+        this.klpWithTooltip = true;
+        el.nativeElement.addEventListener('mouseenter', () => {
+            if (!this.klpWithTooltip) {
+                return;
+            }
+            if (getComputedStyle(el.nativeElement).position === 'static') {
+                el.nativeElement.style.position = 'relative';
+            }
+            this.div = document.createElement('div');
+            this.div.style.zIndex = '2';
+            this.div.style.color = '#ff8000';
+            this.div.style.position = 'fixed';
+            this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
+            this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+            this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
+            this.div.style.maxWidth = '200px';
+            this.div.style.whiteSpace = 'break-spaces';
+            this.div.style.backgroundColor = 'white';
+            this.div.style.border = '1px solid rgba(255, 128, 0, 0.1254901961)';
+            this.div.style.boxShadow = `2px 3px 10px 0px rgba(255, 128, 0, 0.1254901961)`;
+            this.div.style.padding = '0.3rem 0.5rem';
+            this.div.style.boxSizing = 'border-box';
+            this.div.style.borderRadius = '3px';
+            this.div.textContent = el.nativeElement.innerText;
+            el.nativeElement.prepend(this.div);
+            this.triangle = document.createElement('div');
+            this.triangle.style.zIndex = '1';
+            this.triangle.style.position = 'fixed';
+            this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
+            this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+            this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
+            this.triangle.style.width = '0';
+            this.triangle.style.height = '0';
+            this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
+            this.triangle.style.borderRight = `${triangleSize} solid transparent`;
+            this.triangle.style.borderTop = `${triangleSize} solid rgba(255, 128, 0, 0.1254901961)`;
+            el.nativeElement.prepend(this.triangle);
+            this.triangleWhite = document.createElement('div');
+            this.triangleWhite.style.zIndex = '3';
+            this.triangleWhite.style.position = 'fixed';
+            this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
+            this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+            this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
+            this.triangleWhite.style.width = '0';
+            this.triangleWhite.style.height = '0';
+            this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
+            this.triangleWhite.style.borderRight = `${triangleSize} solid transparent`;
+            this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
+            el.nativeElement.prepend(this.triangleWhite);
+        });
+        el.nativeElement.addEventListener('mouseout', () => {
+            try {
+                el.nativeElement.removeChild(this.div);
+            }
+            catch (ex) { }
+            try {
+                el.nativeElement.removeChild(this.triangle);
+            }
+            catch (ex) { }
+            try {
+                el.nativeElement.removeChild(this.triangleWhite);
+            }
+            catch (ex) { }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: WithTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[klpWithTooltip]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { klpWithTooltip: [{
+                type: Input
+            }] } });
+
 const FORM_ERROR_MESSAGES = new InjectionToken('form.error.messages');
 const DEFAULT_ERROR_MESSAGES = {
     min: 'Use a number larger than %min%',
@@ -379,6 +482,7 @@ class FormElementComponent {
         this.captionSpacing = 'percentages';
         this.spaceDistribution = '40-60';
         this.swapInputAndCaption = false;
+        this.errorMessageAsTooltip = false;
         this.errorMessages = DEFAULT_ERROR_MESSAGES;
         this.customErrorHandlers = [];
     }
@@ -449,11 +553,11 @@ class FormElementComponent {
         return this.parent?.errorMessageLocation ?? 'belowCaption';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FormElementComponent, deps: [{ token: FormComponent, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FormElementComponent, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption" }, viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }], ngImport: i0, template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t\t'd30-70': spaceDistribution === '30-70',\n\t\t\t'd34-66': spaceDistribution === '34-66',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{\n\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66'\n\t}\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;padding-right:1.25rem;color:#515365}.caption.percentageSpacing{flex:40}.caption.percentageSpacing.d30-70{flex:30}.caption.percentageSpacing.d34-66{flex:34}.caption.hasErrors{color:#ff8000}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:2.5rem}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden}.caption.withErrorRightOfCaption .rightOfCaptionError *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:60}.inputContainer.percentageSpacing.d30-70{flex:70}.inputContainer.percentageSpacing.d34-66{flex:66}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}.errorContainer.hasCaption.d34-66{margin-left:34%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FormElementComponent, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip" }, viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }], ngImport: i0, template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\" [klpWithTooltip]=\"!errorMessageAsTooltip && getErrorLocation() === 'rightOfCaption'\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t\t'd30-70': spaceDistribution === '30-70',\n\t\t\t'd34-66': spaceDistribution === '34-66',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{\n\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66'\n\t}\">\n\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;padding-right:1.25rem;color:#515365}.caption.percentageSpacing{flex:40}.caption.percentageSpacing.d30-70{flex:30}.caption.percentageSpacing.d34-66{flex:34}.caption.hasErrors{color:#ff8000}.caption.hasErrors.withErrorRightOfCaption .rightOfCaptionError{display:block}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;font-weight:400;overflow:hidden;flex:1 1 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipTriangle{z-index:1;position:absolute;display:none;right:0;transform:translate(-50%,calc(-100% + .1rem));width:0px;height:0px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid rgba(255,128,0,.125)}.inputContainer .errorTooltipTriangleWhite{z-index:3;position:absolute;display:none;right:0;transform:translate(-50%,calc(-100% + .1rem - 2px));width:0px;height:0px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid white}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:0;display:none;z-index:2;color:#515365;transform:translateY(-100%);max-width:20rem;white-space:break-spaces;background-color:#fff;border:1px solid rgba(255,128,0,.125);box-shadow:#ff800020 2px 3px 10px;padding:.3rem .5rem;box-sizing:border-box;border-radius:3px}.inputContainer .errorTooltip .errorContainer{margin-left:initial}.inputContainer:hover .errorTooltip,.inputContainer:hover .errorTooltipTriangle,.inputContainer:hover .errorTooltipTriangleWhite{display:block}.inputContainer.percentageSpacing{flex:60}.inputContainer.percentageSpacing.d30-70{flex:70}.inputContainer.percentageSpacing.d34-66{flex:66}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}.errorContainer.hasCaption.d34-66{margin-left:34%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: ["klpWithTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FormElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-element', template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t\t'd30-70': spaceDistribution === '30-70',\n\t\t\t'd34-66': spaceDistribution === '34-66',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{\n\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66'\n\t}\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;padding-right:1.25rem;color:#515365}.caption.percentageSpacing{flex:40}.caption.percentageSpacing.d30-70{flex:30}.caption.percentageSpacing.d34-66{flex:34}.caption.hasErrors{color:#ff8000}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:2.5rem}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden}.caption.withErrorRightOfCaption .rightOfCaptionError *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:60}.inputContainer.percentageSpacing.d30-70{flex:70}.inputContainer.percentageSpacing.d34-66{flex:66}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}.errorContainer.hasCaption.d34-66{margin-left:34%}\n"] }]
+            args: [{ selector: 'klp-form-element', template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\" [klpWithTooltip]=\"!errorMessageAsTooltip && getErrorLocation() === 'rightOfCaption'\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t\t'd30-70': spaceDistribution === '30-70',\n\t\t\t'd34-66': spaceDistribution === '34-66',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{\n\t\tpercentageSpacing: captionSpacing === 'percentages',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66'\n\t}\">\n\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;padding-right:1.25rem;color:#515365}.caption.percentageSpacing{flex:40}.caption.percentageSpacing.d30-70{flex:30}.caption.percentageSpacing.d34-66{flex:34}.caption.hasErrors{color:#ff8000}.caption.hasErrors.withErrorRightOfCaption .rightOfCaptionError{display:block}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;font-weight:400;overflow:hidden;flex:1 1 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipTriangle{z-index:1;position:absolute;display:none;right:0;transform:translate(-50%,calc(-100% + .1rem));width:0px;height:0px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid rgba(255,128,0,.125)}.inputContainer .errorTooltipTriangleWhite{z-index:3;position:absolute;display:none;right:0;transform:translate(-50%,calc(-100% + .1rem - 2px));width:0px;height:0px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid white}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:0;display:none;z-index:2;color:#515365;transform:translateY(-100%);max-width:20rem;white-space:break-spaces;background-color:#fff;border:1px solid rgba(255,128,0,.125);box-shadow:#ff800020 2px 3px 10px;padding:.3rem .5rem;box-sizing:border-box;border-radius:3px}.inputContainer .errorTooltip .errorContainer{margin-left:initial}.inputContainer:hover .errorTooltip,.inputContainer:hover .errorTooltipTriangle,.inputContainer:hover .errorTooltipTriangleWhite{display:block}.inputContainer.percentageSpacing{flex:60}.inputContainer.percentageSpacing.d30-70{flex:70}.inputContainer.percentageSpacing.d34-66{flex:66}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}.errorContainer.hasCaption.d34-66{margin-left:34%}\n"] }]
         }], ctorParameters: function () { return [{ type: FormComponent, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -471,6 +575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }], swapInputAndCaption: [{
                 type: Input
+            }], errorMessageAsTooltip: [{
+                type: Input
             }], internalComponentRef: [{
                 type: ViewChild,
                 args: ['internalComponentRef']
@@ -496,6 +602,7 @@ class ValueAccessorBase {
         // we support both providing just the formControlName and the full formControl
         this.formControlName = null;
         this.formControl = null;
+        this.inErrorState = false;
         this.onTouch = new EventEmitter();
         this.focus = () => {
             if (isValueSet(this.nativeInputRef?.nativeElement)) {
@@ -525,6 +632,9 @@ class ValueAccessorBase {
         }
     }
     isInErrorState() {
+        if (this.inErrorState) {
+            return true;
+        }
         return this.attachedFormControl && this.attachedFormControl.status === 'INVALID' && this.attachedFormControl.touched;
     }
     ngOnDestroy() {
@@ -585,7 +695,7 @@ class ValueAccessorBase {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ValueAccessorBase, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ValueAccessorBase, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl" }, outputs: { onTouch: "onTouch" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ValueAccessorBase, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl", inErrorState: "inErrorState" }, outputs: { onTouch: "onTouch" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ValueAccessorBase, decorators: [{
             type: Component,
@@ -609,6 +719,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }], formControl: [{
                 type: Input
+            }], inErrorState: [{
+                type: Input
             }], onTouch: [{
                 type: Output
             }], nativeInputRef: [{
@@ -1152,7 +1264,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
 class FormErrorComponent {
     constructor(parent) {
         this.parent = parent;
-        this.showErrorValueAsMessage = false;
         this.showError = false;
     }
     ngOnInit() {
@@ -1172,89 +1283,93 @@ class FormErrorComponent {
         return this.parent.getAttachedControl().errors[this.error];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FormErrorComponent, deps: [{ token: FormElementComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FormErrorComponent, selector: "klp-form-error", inputs: { error: "error", showErrorValueAsMessage: "showErrorValueAsMessage" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template #contentRef>\n\t<ng-content *ngIf=\"!showErrorValueAsMessage\"></ng-content>\n\t<div *ngIf=\"showErrorValueAsMessage\">{{getErrorValueMessage()}}</div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FormErrorComponent, selector: "klp-form-error", inputs: { error: "error" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template #contentRef>\n\t<ng-content *ngIf=\"error !== 'async'\"></ng-content>\n\t<div *ngIf=\"error === 'async'\">{{getErrorValueMessage()}}</div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FormErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-error', template: "<ng-template #contentRef>\n\t<ng-content *ngIf=\"!showErrorValueAsMessage\"></ng-content>\n\t<div *ngIf=\"showErrorValueAsMessage\">{{getErrorValueMessage()}}</div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'klp-form-error', template: "<ng-template #contentRef>\n\t<ng-content *ngIf=\"error !== 'async'\"></ng-content>\n\t<div *ngIf=\"error === 'async'\">{{getErrorValueMessage()}}</div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: FormElementComponent, decorators: [{
                     type: Host
                 }, {
                     type: Optional
                 }] }]; }, propDecorators: { error: [{
                 type: Input
-            }], showErrorValueAsMessage: [{
-                type: Input
             }], contentRef: [{
                 type: ViewChild,
                 args: ['contentRef']
             }] } });
 
-class FormSubmitButtonComponent {
-    get _() {
-        return this.fullWidth;
+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;
     }
-    constructor(parentForm) {
-        this.parentForm = parentForm;
+    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() {
+        this.parentForm = inject(FormComponent, { 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();
+        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();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FormSubmitButtonComponent, deps: [{ token: FormComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FormSubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", 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: "16.0.1", 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 {
@@ -2021,7 +2136,8 @@ class NgxEnhancyFormsModule {
             FormComponent,
             SubFormDirective,
             HourMinuteInputComponent,
-            RadioComponent], imports: [CommonModule,
+            RadioComponent,
+            WithTooltipDirective], imports: [CommonModule,
             FormsModule,
             NgSelectModule,
             SortablejsModule,
@@ -2050,7 +2166,8 @@ class NgxEnhancyFormsModule {
             FormComponent,
             SubFormDirective,
             HourMinuteInputComponent,
-            RadioComponent] }); }
+            RadioComponent,
+            WithTooltipDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: NgxEnhancyFormsModule, imports: [CommonModule,
             FormsModule,
             NgSelectModule,
@@ -2094,6 +2211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                         SubFormDirective,
                         HourMinuteInputComponent,
                         RadioComponent,
+                        WithTooltipDirective,
                     ],
                     exports: [
                         ValueAccessorBase,
@@ -2122,6 +2240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                         SubFormDirective,
                         HourMinuteInputComponent,
                         RadioComponent,
+                        WithTooltipDirective,
                     ],
                 }]
         }] });
@@ -2134,5 +2253,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", 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, 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