@klippa/ngx-enhancy-forms 14.17.6 → 14.17.8

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;overflow:hidden;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;overflow:hidden;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]
@@ -2314,10 +2349,10 @@ class RadioComponent extends ValueAccessorBase {
     }
 }
 RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: RadioComponent, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6;color:#888da8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
+            args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW}\">\n\t<ng-container *ngFor=\"let option of options\">\n\t\t<button class=\"optionContainer\"\n\t\t\t[ngClass]=\"{classic: variant === 'classic', button: variant === 'button', isSelected: innerValue === option.id}\"\n\t\t\t(click)=\"setInnerValueAndNotify(option.id)\"\n\t\t>\n\t\t\t<div class=\"radioAndName\">\n\t\t\t\t<div class=\"selectedRadioBtnContainer\" *ngIf=\"variant === 'classic'\">\n\t\t\t\t\t<div class=\"selected\" *ngIf=\"innerValue === option.id\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"nameAndDescription\">\n\t\t\t\t\t<div>{{option.name}}</div>\n\t\t\t\t\t<div class=\"description\" *ngIf=\"option.description\">{{option.description}}</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</button>\n\t</ng-container>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #e6ecf5;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#27bb5f}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;transition:all .3s ease-in-out;color:#27bb5f;border:1px solid #27bb5f;background-color:#fff}.optionContainer.button.isSelected{background:#27bb5f;color:#fff}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6;color:#888da8}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], orientation: [{