@klippa/ngx-enhancy-forms 14.19.4 → 14.20.1

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, EventEmitter, Component, SkipSelf, Optional, Output, InjectionToken, Inject, ViewChild, ContentChild, Host, HostBinding, TemplateRef, inject, NgModule } from '@angular/core';
+import { Directive, Input, EventEmitter, Component, SkipSelf, Optional, Output, InjectionToken, TemplateRef, Inject, ViewChild, ContentChild, Host, HostBinding, inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -446,6 +446,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Output
             }] } });
 
+class OnRenderDirective {
+    ngAfterViewInit() {
+        runNextRenderCycle(() => this.onRenderFn());
+    }
+}
+OnRenderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: OnRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+OnRenderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: OnRenderDirective, selector: "[onRenderFn]", inputs: { onRenderFn: "onRenderFn" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: OnRenderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[onRenderFn]'
+                }]
+        }], propDecorators: { onRenderFn: [{
+                type: Input
+            }] } });
+
 class WarningIconComponent {
     constructor() {
         this.variant = 'line';
@@ -574,7 +590,7 @@ class FormElementComponent {
             this.popupState = 'onHover';
             return;
         }
-        if (stringIsSetAndFilled(this.getWarningToShow())) {
+        if (isValueSet(this.getWarningToShow())) {
             this.popupState = 'lockedOpen';
             return;
         }
@@ -599,6 +615,15 @@ class FormElementComponent {
     getWarningToShow() {
         return this.parent?.getWarningToShow(this.attachedControl);
     }
+    getWarningToShowAsTemplateRef() {
+        if (this.parent?.getWarningToShow(this.attachedControl) instanceof TemplateRef) {
+            return this.parent?.getWarningToShow(this.attachedControl);
+        }
+        throw new Error('Warning is not a TemplateRef');
+    }
+    getWarningToShowIsTemplateRef() {
+        return this.getWarningToShow() instanceof TemplateRef;
+    }
     getErrorToShow() {
         const firstError = Object.keys(this.attachedControl?.errors ?? {})[0];
         if (this.attachedControl?.touched !== true) {
@@ -656,7 +681,7 @@ class FormElementComponent {
         if (stringIsSetAndFilled(this.getErrorToShow())) {
             return !this.errorFullyVisible;
         }
-        if (stringIsSetAndFilled(this.getWarningToShow())) {
+        if (isValueSet(this.getWarningToShow())) {
             return true;
         }
         return false;
@@ -671,7 +696,7 @@ class FormElementComponent {
         return true;
     }
     shouldShowWarningPopup() {
-        return stringIsSetAndFilled(this.getWarningToShow());
+        return isValueSet(this.getWarningToShow());
     }
     closePopup() {
         this.popupState = 'onHover';
@@ -692,10 +717,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 }, { token: i0.ElementRef }], 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", verticalAlignment: "verticalAlignment", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip" }, queries: [{ propertyName: "fieldInput", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true }], viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }, { propertyName: "tailTpl", first: true, predicate: ["tailTpl"], descendants: true }, { propertyName: "captionDummyForSpaceCalculation", first: true, predicate: ["captionDummyForSpaceCalculation"], descendants: true }, { propertyName: "absoluteAnchor", first: true, predicate: ["absoluteAnchor"], descendants: true }, { propertyName: "fixedAnchor", first: true, predicate: ["fixedAnchor"], descendants: true }, { propertyName: "fixedWrapper", first: true, predicate: ["fixedWrapper"], descendants: true }], ngImport: i0, template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth'\n\t}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" (mouseenter)=\"setErrorTooltipOffset()\">\n\t\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\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\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', 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-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">{{getWarningToShow()}}</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer{flex:0 0 auto}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.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;max-width:40%;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:white;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\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: "component", type: WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] });
+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", verticalAlignment: "verticalAlignment", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip" }, queries: [{ propertyName: "fieldInput", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true }], viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }, { propertyName: "tailTpl", first: true, predicate: ["tailTpl"], descendants: true }, { propertyName: "captionDummyForSpaceCalculation", first: true, predicate: ["captionDummyForSpaceCalculation"], descendants: true }, { propertyName: "absoluteAnchor", first: true, predicate: ["absoluteAnchor"], descendants: true }, { propertyName: "fixedAnchor", first: true, predicate: ["fixedAnchor"], descendants: true }, { propertyName: "fixedWrapper", first: true, predicate: ["fixedWrapper"], descendants: true }], ngImport: i0, template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth'\n\t}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" (mouseenter)=\"setErrorTooltipOffset()\">\n\t\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\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\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', 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-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer{flex:0 0 auto}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.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;max-width:40%;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:white;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\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: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }, { kind: "component", type: WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-element', template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth'\n\t}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" (mouseenter)=\"setErrorTooltipOffset()\">\n\t\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\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\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', 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-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">{{getWarningToShow()}}</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer{flex:0 0 auto}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.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;max-width:40%;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:white;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"] }]
+            args: [{ selector: 'klp-form-element', template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth'\n\t}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" (mouseenter)=\"setErrorTooltipOffset()\">\n\t\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\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\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', 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-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer{flex:0 0 auto}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.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;max-width:40%;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:white;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"] }]
         }], ctorParameters: function () { return [{ type: FormComponent, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -2490,6 +2515,7 @@ NgxEnhancyFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         HourMinuteInputComponent,
         RadioComponent,
         WithTooltipDirective,
+        OnRenderDirective,
         WarningIconComponent,
         ElementIsTruncatedCbComponent], imports: [CommonModule,
         FormsModule,
@@ -2522,6 +2548,7 @@ NgxEnhancyFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         HourMinuteInputComponent,
         RadioComponent,
         WithTooltipDirective,
+        OnRenderDirective,
         ElementIsTruncatedCbComponent] });
 NgxEnhancyFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, imports: [CommonModule,
         FormsModule,
@@ -2566,6 +2593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         HourMinuteInputComponent,
                         RadioComponent,
                         WithTooltipDirective,
+                        OnRenderDirective,
                         WarningIconComponent,
                         ElementIsTruncatedCbComponent,
                     ],
@@ -2597,6 +2625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         HourMinuteInputComponent,
                         RadioComponent,
                         WithTooltipDirective,
+                        OnRenderDirective,
                         ElementIsTruncatedCbComponent,
                     ]
                 }]
@@ -2610,5 +2639,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, DefaultErrorHandler, ElementIsTruncatedCbComponent, 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 };
+export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, DefaultErrorHandler, ElementIsTruncatedCbComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, FormValidationError, HourMinuteInputComponent, KLP_DATE_FORMATS, KLP_FORM_ERROR_HANDLER, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, OnRenderDirective, 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