@klippa/ngx-enhancy-forms 14.17.7 → 14.17.9

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

@@ -98,6 +98,21 @@ function awaitableForNextCycle() {
     });
 }
 
+function getAllLimitingContainers(element) {
+    const result = [];
+    let current = element;
+    while (current.parentElement) {
+        if (isLimitingContainer(current.parentElement)) {
+            result.push(current.parentElement);
+        }
+        current = current.parentElement;
+    }
+    return result;
+}
+function isLimitingContainer(element) {
+    return element.scrollHeight > element.clientHeight;
+}
+
 function mergeArray(arrA, arrB) {
     const arr = new Array(Math.max(arrA.length, arrB.length));
     for (let i = 0; i < arr.length; i++) {
@@ -503,9 +518,10 @@ const DEFAULT_ERROR_MESSAGES = {
     date: 'Enter a valid date',
 };
 class FormElementComponent {
-    constructor(parent, customMessages) {
+    constructor(parent, customMessages, elRef) {
         this.parent = parent;
         this.customMessages = customMessages;
+        this.elRef = elRef;
         this.direction = 'horizontal';
         this.captionSpacing = 'percentages';
         this.verticalAlignment = 'center';
@@ -518,6 +534,15 @@ class FormElementComponent {
         this.setErrorMessageIsTruncated = (isTruncated) => {
             this.errorFullyVisible = !isTruncated;
         };
+        this.setErrorTooltipOffset = () => {
+            if (this.popupState !== 'lockedOpen' && this.popupState !== 'onHover') {
+                return;
+            }
+            const popupOffsetY = this.absoluteAnchor?.nativeElement.getBoundingClientRect().top - this.fixedAnchor?.nativeElement.getBoundingClientRect().top;
+            if (this.fixedWrapper?.nativeElement) {
+                this.fixedWrapper.nativeElement.style.transform = `translateY(${popupOffsetY}px)`;
+            }
+        };
     }
     async ngAfterViewInit() {
         await awaitableForNextCycle();
@@ -525,6 +550,7 @@ class FormElementComponent {
         this.fieldInput?.onTouch.asObservable().subscribe((e) => {
             this.determinePopupState();
         });
+        [...getAllLimitingContainers(this.elRef.nativeElement), window].forEach(e => e.addEventListener('scroll', this.setErrorTooltipOffset));
     }
     shouldShowErrorMessages() {
         return this.parent?.showErrorMessages !== false;
@@ -665,11 +691,11 @@ 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", 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 }], 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\">\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\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">{{getWarningToShow()}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\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}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.horizontal .captionInputAndError{gap:1rem}.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.d40-60 .errorAboveInputContainer .spacer{flex:40 1 0px}.componentContainer.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.d40-60 .caption{flex:40 1 0px}.componentContainer.d40-60 .inputContainer{flex:60 1 0px}.componentContainer.d34-66 .errorAboveInputContainer .spacer{flex:34 1 0px}.componentContainer.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.d34-66 .caption{flex:34 1 0px}.componentContainer.d34-66 .inputContainer{flex:66 1 0px}.componentContainer.d30-70 .errorAboveInputContainer .spacer{flex:30 1 0px}.componentContainer.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.d30-70 .caption{flex:30 1 0px}.componentContainer.d30-70 .inputContainer{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;gap:1rem}.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{flex:40 1 0px}.caption.percentageSpacing.d30-70{flex:30 1 0px}.caption.percentageSpacing.d34-66{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 .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:-.625rem;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.ɵ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}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.horizontal .captionInputAndError{gap:1rem}.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.d40-60 .errorAboveInputContainer .spacer{flex:40 1 0px}.componentContainer.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.d40-60 .caption{flex:40 1 0px}.componentContainer.d40-60 .inputContainer{flex:60 1 0px}.componentContainer.d34-66 .errorAboveInputContainer .spacer{flex:34 1 0px}.componentContainer.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.d34-66 .caption{flex:34 1 0px}.componentContainer.d34-66 .inputContainer{flex:66 1 0px}.componentContainer.d30-70 .errorAboveInputContainer .spacer{flex:30 1 0px}.componentContainer.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.d30-70 .caption{flex:30 1 0px}.componentContainer.d30-70 .inputContainer{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;gap:1rem}.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{flex:40 1 0px}.caption.percentageSpacing.d30-70{flex:30 1 0px}.caption.percentageSpacing.d34-66{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"] }] });
 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\">\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\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">{{getWarningToShow()}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\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}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.horizontal .captionInputAndError{gap:1rem}.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.d40-60 .errorAboveInputContainer .spacer{flex:40 1 0px}.componentContainer.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.d40-60 .caption{flex:40 1 0px}.componentContainer.d40-60 .inputContainer{flex:60 1 0px}.componentContainer.d34-66 .errorAboveInputContainer .spacer{flex:34 1 0px}.componentContainer.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.d34-66 .caption{flex:34 1 0px}.componentContainer.d34-66 .inputContainer{flex:66 1 0px}.componentContainer.d30-70 .errorAboveInputContainer .spacer{flex:30 1 0px}.componentContainer.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.d30-70 .caption{flex:30 1 0px}.componentContainer.d30-70 .inputContainer{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;gap:1rem}.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{flex:40 1 0px}.caption.percentageSpacing.d30-70{flex:30 1 0px}.caption.percentageSpacing.d34-66{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 .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:-.625rem;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></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}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.horizontal .captionInputAndError{gap:1rem}.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.d40-60 .errorAboveInputContainer .spacer{flex:40 1 0px}.componentContainer.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.d40-60 .caption{flex:40 1 0px}.componentContainer.d40-60 .inputContainer{flex:60 1 0px}.componentContainer.d34-66 .errorAboveInputContainer .spacer{flex:34 1 0px}.componentContainer.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.d34-66 .caption{flex:34 1 0px}.componentContainer.d34-66 .inputContainer{flex:66 1 0px}.componentContainer.d30-70 .errorAboveInputContainer .spacer{flex:30 1 0px}.componentContainer.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.d30-70 .caption{flex:30 1 0px}.componentContainer.d30-70 .inputContainer{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;gap:1rem}.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{flex:40 1 0px}.caption.percentageSpacing.d30-70{flex:30 1 0px}.caption.percentageSpacing.d34-66{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: [{
@@ -677,7 +703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                     args: [FORM_ERROR_MESSAGES]
                 }, {
                     type: Optional
-                }] }]; }, propDecorators: { caption: [{
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { caption: [{
                 type: Input
             }], direction: [{
                 type: Input
@@ -700,6 +726,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
             }], captionDummyForSpaceCalculation: [{
                 type: ViewChild,
                 args: ['captionDummyForSpaceCalculation']
+            }], absoluteAnchor: [{
+                type: ViewChild,
+                args: ['absoluteAnchor']
+            }], fixedAnchor: [{
+                type: ViewChild,
+                args: ['fixedAnchor']
+            }], fixedWrapper: [{
+                type: ViewChild,
+                args: ['fixedWrapper']
             }], fieldInput: [{
                 type: ContentChild,
                 args: [NG_VALUE_ACCESSOR]