@klippa/ngx-enhancy-forms 14.7.17 → 14.9.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));
@@ -421,11 +424,11 @@ class WithTooltipDirective {
         });
         el.nativeElement.addEventListener('mouseout', () => {
             try {
-                el.nativeElement.removeChild(this.div);
+                // el.nativeElement.removeChild(this.div);
             }
             catch (ex) { }
             try {
-                el.nativeElement.removeChild(this.triangle);
+                // el.nativeElement.removeChild(this.triangle);
             }
             catch (ex) { }
         });
@@ -462,6 +465,7 @@ class FormElementComponent {
         this.captionSpacing = 'percentages';
         this.spaceDistribution = '40-60';
         this.swapInputAndCaption = false;
+        this.errorMessageAsTooltip = false;
         this.errorMessages = DEFAULT_ERROR_MESSAGES;
         this.customErrorHandlers = [];
     }
@@ -533,10 +537,10 @@ class FormElementComponent {
     }
 }
 FormElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormElementComponent, deps: [{ token: FormComponent, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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'}\" [klpWithTooltip]=\"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'\" [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'\" [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.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{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"] }, { kind: "directive", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: ["klpWithTooltip"] }] });
+FormElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", 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=\"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:.8rem solid transparent;border-right:.8rem solid transparent;border-top:.8rem solid rgba(255,128,0,.125)}.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{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: "14.2.8", 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'}\" [klpWithTooltip]=\"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'\" [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'\" [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.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{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=\"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:.8rem solid transparent;border-right:.8rem solid transparent;border-top:.8rem solid rgba(255,128,0,.125)}.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{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: [{
@@ -554,6 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], swapInputAndCaption: [{
                 type: Input
+            }], errorMessageAsTooltip: [{
+                type: Input
             }], internalComponentRef: [{
                 type: ViewChild,
                 args: ['internalComponentRef']
@@ -1260,71 +1266,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 +2220,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