@klippa/ngx-enhancy-forms 14.16.2 → 14.16.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, EventEmitter, Component, SkipSelf, Optional, Output, InjectionToken, Inject, ViewChild, Host, HostBinding, TemplateRef, ContentChild, inject, NgModule } from '@angular/core';
+import { Directive, Input, EventEmitter, Component, SkipSelf, Optional, Output, InjectionToken, Inject, ViewChild, ContentChild, Host, HostBinding, TemplateRef, inject, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -89,6 +89,15 @@ function isArrayOf(arr, kind) {
     return arr.reduce((acc, val) => acc && val instanceof kind, true);
 }
 
+function runNextRenderCycle(fn) {
+    setTimeout(fn);
+}
+function awaitableForNextCycle() {
+    return new Promise((resolve) => {
+        setTimeout(resolve);
+    });
+}
+
 function mergeArray(arrA, arrB) {
     const arr = new Array(Math.max(arrA.length, arrB.length));
     for (let i = 0; i < arr.length; i++) {
@@ -150,6 +159,7 @@ class FormComponent {
         this.readOnly = false;
         this.showErrorMessages = true;
         this.errorMessageLocation = 'belowCaption';
+        this.warnings = new Map();
         this.onInjected = new EventEmitter();
         // we keep track of what form controls are actually rendered. Only those count when looking at form validation
         this.activeControls = [];
@@ -286,6 +296,9 @@ class FormComponent {
     getFormElementByFormControl(control) {
         return this.activeControls.find((e) => e.formControl === control)?.formElement;
     }
+    getWarningToShow(control) {
+        return this.warnings.get(control);
+    }
     trySubmit() {
         this.formGroup.markAllAsTouched();
         const allControls = this.getAllFormControls();
@@ -372,7 +385,7 @@ class FormComponent {
     }
 }
 FormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormComponent, deps: [{ token: FormComponent, optional: true, skipSelf: true }, { token: SubFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormComponent, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", patchValueInterceptor: "patchValueInterceptor" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+FormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormComponent, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", warnings: "warnings", patchValueInterceptor: "patchValueInterceptor" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'klp-form', template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"] }]
@@ -390,89 +403,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], formGroup: [{
                 type: Input
+            }], warnings: [{
+                type: Input
             }], patchValueInterceptor: [{
                 type: Input
             }], onInjected: [{
                 type: Output
             }] } });
 
-const triangleSize = '12px';
-class WithTooltipDirective {
-    constructor(el) {
-        this.klpWithTooltip = true;
-        el.nativeElement.addEventListener('mouseenter', () => {
-            if (!this.klpWithTooltip) {
-                return;
-            }
-            if (getComputedStyle(el.nativeElement).position === 'static') {
-                el.nativeElement.style.position = 'relative';
-            }
-            this.div = document.createElement('div');
-            this.div.style.zIndex = '2';
-            this.div.style.color = '#ff8000';
-            this.div.style.position = 'fixed';
-            this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
-            this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
-            this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
-            this.div.style.maxWidth = '200px';
-            this.div.style.whiteSpace = 'break-spaces';
-            this.div.style.backgroundColor = 'white';
-            this.div.style.border = '1px solid rgba(255, 128, 0, 0.1254901961)';
-            this.div.style.boxShadow = `2px 3px 10px 0px rgba(255, 128, 0, 0.1254901961)`;
-            this.div.style.padding = '0.3rem 0.5rem';
-            this.div.style.boxSizing = 'border-box';
-            this.div.style.borderRadius = '3px';
-            this.div.textContent = el.nativeElement.innerText;
-            el.nativeElement.prepend(this.div);
-            this.triangle = document.createElement('div');
-            this.triangle.style.zIndex = '1';
-            this.triangle.style.position = 'fixed';
-            this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
-            this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
-            this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
-            this.triangle.style.width = '0';
-            this.triangle.style.height = '0';
-            this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
-            this.triangle.style.borderRight = `${triangleSize} solid transparent`;
-            this.triangle.style.borderTop = `${triangleSize} solid rgba(255, 128, 0, 0.1254901961)`;
-            el.nativeElement.prepend(this.triangle);
-            this.triangleWhite = document.createElement('div');
-            this.triangleWhite.style.zIndex = '3';
-            this.triangleWhite.style.position = 'fixed';
-            this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
-            this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
-            this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
-            this.triangleWhite.style.width = '0';
-            this.triangleWhite.style.height = '0';
-            this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
-            this.triangleWhite.style.borderRight = `${triangleSize} solid transparent`;
-            this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
-            el.nativeElement.prepend(this.triangleWhite);
-        });
-        el.nativeElement.addEventListener('mouseout', () => {
-            try {
-                el.nativeElement.removeChild(this.div);
-            }
-            catch (ex) { }
-            try {
-                el.nativeElement.removeChild(this.triangle);
-            }
-            catch (ex) { }
-            try {
-                el.nativeElement.removeChild(this.triangleWhite);
+class WarningIconComponent {
+    constructor() {
+        this.variant = 'line';
+    }
+}
+WarningIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WarningIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+WarningIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: WarningIconComponent, selector: "klp-form-warning-icon", inputs: { variant: "variant" }, ngImport: i0, template: "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"variant === 'line'\">\n\t<path d=\"M9.99976 7.49995V10.8333M9.99976 14.1666H10.0081M8.84585 3.24305L1.99178 15.0819C1.61161 15.7386 1.42153 16.0669 1.44962 16.3364C1.47412 16.5714 1.59727 16.785 1.7884 16.924C2.00753 17.0833 2.38691 17.0833 3.14569 17.0833H16.8538C17.6126 17.0833 17.992 17.0833 18.2111 16.924C18.4022 16.785 18.5254 16.5714 18.5499 16.3364C18.578 16.0669 18.3879 15.7386 18.0077 15.0819L11.1537 3.24305C10.7749 2.58875 10.5854 2.26159 10.3383 2.15172C10.1228 2.05587 9.87672 2.05587 9.66117 2.15172C9.41407 2.26159 9.22466 2.58875 8.84585 3.24305Z\" stroke=\"#ff8000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"variant === 'fill'\">\n\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.6771 1.39035C10.246 1.19866 9.75387 1.19866 9.32277 1.39035C8.98983 1.53839 8.77355 1.79916 8.62305 2.01164C8.47508 2.22055 8.31666 2.49423 8.14243 2.79523L1.25313 14.6949C1.07821 14.997 0.919248 15.2715 0.811464 15.5045C0.701923 15.7413 0.583086 16.0596 0.62096 16.4229C0.669969 16.8929 0.916253 17.3201 1.29852 17.598C1.59393 17.8128 1.92892 17.8695 2.18872 17.8933C2.44435 17.9167 2.76156 17.9167 3.11063 17.9167H16.8892C17.2383 17.9167 17.5555 17.9167 17.8111 17.8933C18.0709 17.8695 18.4059 17.8128 18.7014 17.598C19.0836 17.3201 19.3299 16.8929 19.3789 16.4229C19.4168 16.0596 19.2979 15.7413 19.1884 15.5045C19.0806 15.2715 18.9217 14.997 18.7468 14.695L11.8574 2.7952C11.6832 2.49422 11.5248 2.22053 11.3768 2.01164C11.2263 1.79916 11.01 1.53839 10.6771 1.39035ZM10.8333 7.50004C10.8333 7.0398 10.4602 6.66671 9.99996 6.66671C9.53972 6.66671 9.16663 7.0398 9.16663 7.50004V10.8334C9.16663 11.2936 9.53972 11.6667 9.99996 11.6667C10.4602 11.6667 10.8333 11.2936 10.8333 10.8334V7.50004ZM9.99996 13.3334C9.53972 13.3334 9.16663 13.7065 9.16663 14.1667C9.16663 14.6269 9.53972 15 9.99996 15H10.0083C10.4685 15 10.8416 14.6269 10.8416 14.1667C10.8416 13.7065 10.4685 13.3334 10.0083 13.3334H9.99996Z\" fill=\"#ff8000\"/>\n</svg>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WarningIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'klp-form-warning-icon', template: "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"variant === 'line'\">\n\t<path d=\"M9.99976 7.49995V10.8333M9.99976 14.1666H10.0081M8.84585 3.24305L1.99178 15.0819C1.61161 15.7386 1.42153 16.0669 1.44962 16.3364C1.47412 16.5714 1.59727 16.785 1.7884 16.924C2.00753 17.0833 2.38691 17.0833 3.14569 17.0833H16.8538C17.6126 17.0833 17.992 17.0833 18.2111 16.924C18.4022 16.785 18.5254 16.5714 18.5499 16.3364C18.578 16.0669 18.3879 15.7386 18.0077 15.0819L11.1537 3.24305C10.7749 2.58875 10.5854 2.26159 10.3383 2.15172C10.1228 2.05587 9.87672 2.05587 9.66117 2.15172C9.41407 2.26159 9.22466 2.58875 8.84585 3.24305Z\" stroke=\"#ff8000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" *ngIf=\"variant === 'fill'\">\n\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.6771 1.39035C10.246 1.19866 9.75387 1.19866 9.32277 1.39035C8.98983 1.53839 8.77355 1.79916 8.62305 2.01164C8.47508 2.22055 8.31666 2.49423 8.14243 2.79523L1.25313 14.6949C1.07821 14.997 0.919248 15.2715 0.811464 15.5045C0.701923 15.7413 0.583086 16.0596 0.62096 16.4229C0.669969 16.8929 0.916253 17.3201 1.29852 17.598C1.59393 17.8128 1.92892 17.8695 2.18872 17.8933C2.44435 17.9167 2.76156 17.9167 3.11063 17.9167H16.8892C17.2383 17.9167 17.5555 17.9167 17.8111 17.8933C18.0709 17.8695 18.4059 17.8128 18.7014 17.598C19.0836 17.3201 19.3299 16.8929 19.3789 16.4229C19.4168 16.0596 19.2979 15.7413 19.1884 15.5045C19.0806 15.2715 18.9217 14.997 18.7468 14.695L11.8574 2.7952C11.6832 2.49422 11.5248 2.22053 11.3768 2.01164C11.2263 1.79916 11.01 1.53839 10.6771 1.39035ZM10.8333 7.50004C10.8333 7.0398 10.4602 6.66671 9.99996 6.66671C9.53972 6.66671 9.16663 7.0398 9.16663 7.50004V10.8334C9.16663 11.2936 9.53972 11.6667 9.99996 11.6667C10.4602 11.6667 10.8333 11.2936 10.8333 10.8334V7.50004ZM9.99996 13.3334C9.53972 13.3334 9.16663 13.7065 9.16663 14.1667C9.16663 14.6269 9.53972 15 9.99996 15H10.0083C10.4685 15 10.8416 14.6269 10.8416 14.1667C10.8416 13.7065 10.4685 13.3334 10.0083 13.3334H9.99996Z\" fill=\"#ff8000\"/>\n</svg>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }] } });
+
+class ElementIsTruncatedCbComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.elementIsTruncatedCb = (isTruncated) => { };
+    }
+    ngAfterViewInit() {
+        if (!isValueSet(this.elementIsTruncatedCb)) {
+            console.log('nope');
+            return;
+        }
+        console.log('yes');
+        this.elementRef.nativeElement.addEventListener('DOMCharacterDataModified', (event) => {
+            if (isValueSet(event.target.wholeText)) {
+                this.checkForTruncation();
             }
-            catch (ex) { }
-        });
+        }, false);
+        this.checkForTruncation();
+    }
+    ngOnDestroy() {
+        console.log('destroyed');
+    }
+    async checkForTruncation() {
+        await awaitableForNextCycle();
+        const isTruncated = this.isTruncated(this.elementRef.nativeElement);
+        if (isValueSet(isTruncated)) {
+            this.elementIsTruncatedCb(isTruncated);
+        }
+    }
+    isTruncated(element) {
+        if (!(element.scrollWidth > 0)) {
+            return;
+        }
+        const thisElementIsTruncated = element.scrollWidth > element.clientWidth;
+        if (!thisElementIsTruncated) {
+            return Array.from(element.children).some((child) => this.isTruncated(child));
+        }
+        return thisElementIsTruncated;
     }
 }
-WithTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-WithTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, decorators: [{
+ElementIsTruncatedCbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ElementIsTruncatedCbComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ElementIsTruncatedCbComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: { elementIsTruncatedCb: "elementIsTruncatedCb" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: ElementIsTruncatedCbComponent, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[klpWithTooltip]'
+                    selector: '[elementIsTruncatedCb]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { klpWithTooltip: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { elementIsTruncatedCb: [{
                 type: Input
             }] } });
 
@@ -499,6 +498,17 @@ class FormElementComponent {
         this.errorMessageAsTooltip = false;
         this.errorMessages = DEFAULT_ERROR_MESSAGES;
         this.customErrorHandlers = [];
+        this.popupState = 'onHover';
+        this.setErrorMessageIsTruncated = (isTruncated) => {
+            this.errorFullyVisible = !isTruncated;
+        };
+    }
+    async ngAfterViewInit() {
+        await awaitableForNextCycle();
+        this.fieldInput?.setTailTpl(this.tailTpl);
+        this.fieldInput?.onTouch.asObservable().subscribe((e) => {
+            this.determinePopupState();
+        });
     }
     shouldShowErrorMessages() {
         return this.parent?.showErrorMessages !== false;
@@ -512,6 +522,20 @@ class FormElementComponent {
         this.attachedControl = formControl;
         this.parent.registerControl(formControl, this);
         this.input = input;
+        this.attachedControl.statusChanges.subscribe((e) => {
+            this.determinePopupState();
+        });
+        this.determinePopupState();
+    }
+    determinePopupState() {
+        if (stringIsSetAndFilled(this.getErrorToShow())) {
+            this.popupState = 'onHover';
+            return;
+        }
+        if (stringIsSetAndFilled(this.getWarningToShow())) {
+            this.popupState = 'lockedOpen';
+            return;
+        }
     }
     unregisterControl(formControl) {
         this.attachedControl = null;
@@ -529,11 +553,18 @@ class FormElementComponent {
     registerCaption(templateRef) {
         this.captionRef = templateRef;
     }
+    getWarningToShow() {
+        return this.parent?.getWarningToShow(this.attachedControl);
+    }
     getErrorToShow() {
-        if (this.attachedControl?.touched === true && this.attachedControl?.errors) {
-            return Object.keys(this.attachedControl?.errors)[0];
+        const firstError = Object.keys(this.attachedControl?.errors ?? {})[0];
+        if (this.attachedControl?.touched !== true) {
+            return null;
         }
-        return null;
+        if (!this.attachedControl?.errors) {
+            return null;
+        }
+        return firstError;
     }
     getCustomErrorHandler(error) {
         return this.customErrorHandlers.find((e) => e.error === error);
@@ -569,12 +600,59 @@ class FormElementComponent {
     getErrorLocation() {
         return this.parent?.errorMessageLocation ?? 'belowCaption';
     }
+    shouldShowErrorTooltipOpened() {
+        return this.popupState === 'lockedOpen';
+    }
+    hasHoverableErrorTooltip() {
+        if (!this.hasRightOfCaptionError() && !this.errorMessageAsTooltip) {
+            return false;
+        }
+        if (this.popupState !== 'onHover') {
+            return false;
+        }
+        if (stringIsSetAndFilled(this.getErrorToShow())) {
+            return !this.errorFullyVisible;
+        }
+        if (stringIsSetAndFilled(this.getWarningToShow())) {
+            return true;
+        }
+        return false;
+    }
+    hasRightOfCaptionError() {
+        if (this.errorMessageAsTooltip) {
+            return false;
+        }
+        if (this.direction !== 'vertical' || this.getErrorLocation() !== 'rightOfCaption') {
+            return false;
+        }
+        return true;
+    }
+    shouldShowWarningPopup() {
+        return stringIsSetAndFilled(this.getWarningToShow());
+    }
+    closePopup() {
+        this.popupState = 'onHover';
+    }
+    togglePopup() {
+        if (!this.hasRightOfCaptionError()) {
+            return;
+        }
+        if (this.errorFullyVisible) {
+            return;
+        }
+        if (this.popupState === 'lockedOpen') {
+            this.popupState = 'onHover';
+        }
+        else {
+            this.popupState = 'lockedOpen';
+        }
+    }
 }
 FormElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormElementComponent, deps: [{ token: FormComponent, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FormElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormElementComponent, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip" }, viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }], ngImport: i0, template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\" [klpWithTooltip]=\"!errorMessageAsTooltip && getErrorLocation() === 'rightOfCaption'\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t\t'd30-70': spaceDistribution === '30-70',\n\t\t\t'd34-66': spaceDistribution === '34-66',\n\t\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\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\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;padding-right:1.25rem;color:#515365}.caption.percentageSpacing{flex:40}.caption.percentageSpacing.d30-70{flex:30}.caption.percentageSpacing.d34-66{flex:34}.caption.fixedInputWidth{flex:1 1 0px;overflow:hidden}.caption.hasErrors{color:#ff8000}.caption.hasErrors.withErrorRightOfCaption .rightOfCaptionError{display:block}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;font-weight:400;overflow:hidden;flex:1 1 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipTriangle{z-index:1;position:absolute;display:none;right:0;transform:translate(-50%,calc(-100% + .1rem));width:0px;height:0px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid rgba(255,128,0,.125)}.inputContainer .errorTooltipTriangleWhite{z-index:3;position:absolute;display:none;right:0;transform:translate(-50%,calc(-100% + .1rem - 2px));width:0px;height:0px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid white}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:0;display:none;z-index:2;color:#515365;transform:translateY(-100%);max-width:20rem;white-space:break-spaces;background-color:#fff;border:1px solid rgba(255,128,0,.125);box-shadow:#ff800020 2px 3px 10px;padding:.3rem .5rem;box-sizing:border-box;border-radius:3px}.inputContainer .errorTooltip .errorContainer{margin-left:initial}.inputContainer:hover .errorTooltip,.inputContainer:hover .errorTooltipTriangle,.inputContainer:hover .errorTooltipTriangleWhite{display:block}.inputContainer.percentageSpacing{flex:60}.inputContainer.percentageSpacing.d30-70{flex:70}.inputContainer.percentageSpacing.d34-66{flex:66}.inputContainer.fixedInputWidth{flex:0 0 auto}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:calc(40% + 1.25rem)}.errorContainer.hasCaption.d30-70{margin-left:calc(30% + 1.25rem)}.errorContainer.hasCaption.d34-66{margin-left:calc(34% + 1.25rem)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: ["klpWithTooltip"] }] });
+FormElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: FormElementComponent, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip" }, 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\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<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">{{getWarningToShow()}}</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.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;overflow:hidden}.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,.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{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;word-wrap:break-word;position:absolute;top:-.6rem;right:-.625rem;background:white;transform:translateY(-100%);width:12rem;white-space:break-spaces;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.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:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:block}.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: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\" [klpWithTooltip]=\"!errorMessageAsTooltip && getErrorLocation() === 'rightOfCaption'\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-container *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{hasCaption: caption || captionRef, vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t\t'd30-70': spaceDistribution === '30-70',\n\t\t\t'd34-66': spaceDistribution === '34-66',\n\t\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\">\n\t\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'rightOfCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t</div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\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\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t</div>\n\t\t</ng-container>\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;min-height:42px}.componentContainer:not(.hasCaption){display:block}.componentContainer:not(.hasCaption) .inputContainer{margin-top:0}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;padding-right:1.25rem;color:#515365}.caption.percentageSpacing{flex:40}.caption.percentageSpacing.d30-70{flex:30}.caption.percentageSpacing.d34-66{flex:34}.caption.fixedInputWidth{flex:1 1 0px;overflow:hidden}.caption.hasErrors{color:#ff8000}.caption.hasErrors.withErrorRightOfCaption .rightOfCaptionError{display:block}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;font-weight:400;overflow:hidden;flex:1 1 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipTriangle{z-index:1;position:absolute;display:none;right:0;transform:translate(-50%,calc(-100% + .1rem));width:0px;height:0px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid rgba(255,128,0,.125)}.inputContainer .errorTooltipTriangleWhite{z-index:3;position:absolute;display:none;right:0;transform:translate(-50%,calc(-100% + .1rem - 2px));width:0px;height:0px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid white}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:0;display:none;z-index:2;color:#515365;transform:translateY(-100%);max-width:20rem;white-space:break-spaces;background-color:#fff;border:1px solid rgba(255,128,0,.125);box-shadow:#ff800020 2px 3px 10px;padding:.3rem .5rem;box-sizing:border-box;border-radius:3px}.inputContainer .errorTooltip .errorContainer{margin-left:initial}.inputContainer:hover .errorTooltip,.inputContainer:hover .errorTooltipTriangle,.inputContainer:hover .errorTooltipTriangleWhite{display:block}.inputContainer.percentageSpacing{flex:60}.inputContainer.percentageSpacing.d30-70{flex:70}.inputContainer.percentageSpacing.d34-66{flex:66}.inputContainer.fixedInputWidth{flex:0 0 auto}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:calc(40% + 1.25rem)}.errorContainer.hasCaption.d30-70{margin-left:calc(30% + 1.25rem)}.errorContainer.hasCaption.d34-66{margin-left:calc(34% + 1.25rem)}\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\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<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">{{getWarningToShow()}}</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.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;overflow:hidden}.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,.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{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;word-wrap:break-word;position:absolute;top:-.6rem;right:-.625rem;background:white;transform:translateY(-100%);width:12rem;white-space:break-spaces;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.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:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:block}.errorContainer{color:#ff8000}\n"] }]
         }], ctorParameters: function () { return [{ type: FormComponent, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -597,6 +675,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
             }], internalComponentRef: [{
                 type: ViewChild,
                 args: ['internalComponentRef']
+            }], tailTpl: [{
+                type: ViewChild,
+                args: ['tailTpl']
+            }], captionDummyForSpaceCalculation: [{
+                type: ViewChild,
+                args: ['captionDummyForSpaceCalculation']
+            }], fieldInput: [{
+                type: ContentChild,
+                args: [NG_VALUE_ACCESSOR]
             }] } });
 
 /**
@@ -629,6 +716,12 @@ class ValueAccessorBase {
                 throw new Error('the focus() method is not implemented in this element!');
             }
         };
+        this.setTailTpl = (tpl) => {
+            this.tailTpl = tpl;
+        };
+        this.getTailTpl = () => {
+            return this.tailTpl;
+        };
     }
     ngOnInit() {
         if (this.formControl) {
@@ -661,6 +754,7 @@ class ValueAccessorBase {
     }
     touch() {
         this.touched.forEach((f) => f());
+        this.onTouch.emit();
     }
     writeValue(value) {
         this.innerValue = value;
@@ -886,15 +980,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }] } });
 
-function runNextRenderCycle(fn) {
-    setTimeout(fn);
-}
-function awaitableForNextCycle() {
-    return new Promise((resolve) => {
-        setTimeout(resolve);
-    });
-}
-
 const SELECT_TRANSLATIONS = new InjectionToken('klp.form.select.translations');
 class KlpSelectOptionTemplateDirective {
 }
@@ -1295,10 +1380,10 @@ class TextInputComponent extends ValueAccessorBase {
     }
 }
 TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
+            args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], type: [{
@@ -2206,6 +2291,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }] } });
 
+const triangleSize = '12px';
+class WithTooltipDirective {
+    constructor(el) {
+        this.klpWithTooltip = true;
+        el.nativeElement.addEventListener('mouseenter', () => {
+            if (!this.klpWithTooltip) {
+                return;
+            }
+            if (getComputedStyle(el.nativeElement).position === 'static') {
+                el.nativeElement.style.position = 'relative';
+            }
+            this.div = document.createElement('div');
+            this.div.style.zIndex = '2';
+            this.div.style.color = '#ff8000';
+            this.div.style.position = 'fixed';
+            this.div.style.left = `${el.nativeElement.getBoundingClientRect().x}px`;
+            this.div.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+            this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(-100% - 0.3rem))`;
+            this.div.style.maxWidth = '200px';
+            this.div.style.whiteSpace = 'break-spaces';
+            this.div.style.backgroundColor = 'white';
+            this.div.style.border = '1px solid rgba(255, 128, 0, 0.1254901961)';
+            this.div.style.boxShadow = `2px 3px 10px 0px rgba(255, 128, 0, 0.1254901961)`;
+            this.div.style.padding = '0.3rem 0.5rem';
+            this.div.style.boxSizing = 'border-box';
+            this.div.style.borderRadius = '3px';
+            this.div.textContent = el.nativeElement.innerText;
+            el.nativeElement.prepend(this.div);
+            this.triangle = document.createElement('div');
+            this.triangle.style.zIndex = '1';
+            this.triangle.style.position = 'fixed';
+            this.triangle.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
+            this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+            this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
+            this.triangle.style.width = '0';
+            this.triangle.style.height = '0';
+            this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
+            this.triangle.style.borderRight = `${triangleSize} solid transparent`;
+            this.triangle.style.borderTop = `${triangleSize} solid rgba(255, 128, 0, 0.1254901961)`;
+            el.nativeElement.prepend(this.triangle);
+            this.triangleWhite = document.createElement('div');
+            this.triangleWhite.style.zIndex = '3';
+            this.triangleWhite.style.position = 'fixed';
+            this.triangleWhite.style.left = `calc(${el.nativeElement.getBoundingClientRect().x + el.nativeElement.getBoundingClientRect().width}px - 2rem)`;
+            this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+            this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
+            this.triangleWhite.style.width = '0';
+            this.triangleWhite.style.height = '0';
+            this.triangleWhite.style.borderLeft = `${triangleSize} solid transparent`;
+            this.triangleWhite.style.borderRight = `${triangleSize} solid transparent`;
+            this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
+            el.nativeElement.prepend(this.triangleWhite);
+        });
+        el.nativeElement.addEventListener('mouseout', () => {
+            try {
+                el.nativeElement.removeChild(this.div);
+            }
+            catch (ex) { }
+            try {
+                el.nativeElement.removeChild(this.triangle);
+            }
+            catch (ex) { }
+            try {
+                el.nativeElement.removeChild(this.triangleWhite);
+            }
+            catch (ex) { }
+        });
+    }
+}
+WithTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+WithTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.8", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: WithTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[klpWithTooltip]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { klpWithTooltip: [{
+                type: Input
+            }] } });
+
 class NgxEnhancyFormsModule {
 }
 NgxEnhancyFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2235,7 +2400,9 @@ NgxEnhancyFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         SubFormDirective,
         HourMinuteInputComponent,
         RadioComponent,
-        WithTooltipDirective], imports: [CommonModule,
+        WithTooltipDirective,
+        WarningIconComponent,
+        ElementIsTruncatedCbComponent], imports: [CommonModule,
         FormsModule,
         NgSelectModule,
         SortablejsModule,
@@ -2265,7 +2432,8 @@ NgxEnhancyFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         SubFormDirective,
         HourMinuteInputComponent,
         RadioComponent,
-        WithTooltipDirective] });
+        WithTooltipDirective,
+        ElementIsTruncatedCbComponent] });
 NgxEnhancyFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: NgxEnhancyFormsModule, imports: [CommonModule,
         FormsModule,
         NgSelectModule,
@@ -2309,6 +2477,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         HourMinuteInputComponent,
                         RadioComponent,
                         WithTooltipDirective,
+                        WarningIconComponent,
+                        ElementIsTruncatedCbComponent,
                     ],
                     exports: [
                         ValueAccessorBase,
@@ -2338,6 +2508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                         HourMinuteInputComponent,
                         RadioComponent,
                         WithTooltipDirective,
+                        ElementIsTruncatedCbComponent,
                     ]
                 }]
         }] });
@@ -2350,5 +2521,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, DefaultErrorHandler, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, FormValidationError, HourMinuteInputComponent, KLP_DATE_FORMATS, KLP_FORM_ERROR_HANDLER, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, Orientation, PasswordFieldComponent, RadioComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, WithTooltipDirective, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
+export { ButtonComponent, CheckboxComponent, DATE_PICKER_LOCALE, DATE_PICKER_TRANSLATIONS, DATE_TIME_PICKER_TRANSLATIONS, DEFAULT_ERROR_MESSAGES, DatePickerComponent, DateTimePickerComponent, DefaultErrorHandler, ElementIsTruncatedCbComponent, EmailInputComponent, FORM_ERROR_MESSAGES, FileInputComponent, FormCaptionComponent, FormComponent, FormElementComponent, FormErrorComponent, FormSubmitButtonComponent, FormValidationError, HourMinuteInputComponent, KLP_DATE_FORMATS, KLP_FORM_ERROR_HANDLER, KlpSelectOptionTemplateDirective, LoadingIndicatorComponent, MultipleValueAccessorBase, NgxEnhancyFormsModule, NumberInputComponent, Orientation, PasswordFieldComponent, RadioComponent, SELECT_TRANSLATIONS, SelectComponent, SelectFooterComponent, SortableGroupedItemsComponent, SortableItemsComponent, SubFormDirective, TextInputComponent, ToggleComponent, ValueAccessorBase, WithTooltipDirective, dateValidator, invalidDateKey, invalidFieldsSymbol, matDateFormatsFactory };
 //# sourceMappingURL=klippa-ngx-enhancy-forms.mjs.map