@klippa/ngx-enhancy-forms 16.21.0 → 16.22.12

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

@@ -390,7 +390,7 @@ class FormComponent {
     }
     handleSubmission(originalDisabledStates, renderedAndEnabledValues, renderedButDisabledValues, formGroupValue) {
         if (this.formGroup.invalid) {
-            this.activeControls.find((e) => !e.formControl.valid)?.formElement?.scrollTo();
+            this.activeControls.find((e) => e.formControl.invalid)?.formElement?.scrollTo();
             this.setDisabledStatesForAllControls(originalDisabledStates);
             return Promise.reject(invalidFieldsSymbol);
         }
@@ -574,6 +574,7 @@ class FormElementComponent {
         this.errorMessages = DEFAULT_ERROR_MESSAGES;
         this.customErrorHandlers = [];
         this.popupState = 'onHover';
+        this.subscriptions = [];
         this.setErrorMessageIsTruncated = (isTruncated) => {
             this.errorFullyVisible = !isTruncated;
         };
@@ -590,10 +591,12 @@ class FormElementComponent {
     async ngAfterViewInit() {
         await awaitableForNextCycle();
         this.fieldInput?.setTailTpl(this.tailTpl);
-        this.fieldInput?.onTouch.asObservable().subscribe((e) => {
+        const subscription = this.fieldInput?.onTouch.asObservable().subscribe(() => {
             this.determinePopupState();
         });
-        [...getAllLimitingContainers(this.elRef.nativeElement), window].forEach(e => e.addEventListener('scroll', this.setErrorTooltipOffset));
+        if (isValueSet(subscription)) {
+            this.subscriptions.push(subscription);
+        }
     }
     shouldShowErrorMessages() {
         return this.parent?.showErrorMessages !== false;
@@ -607,21 +610,40 @@ class FormElementComponent {
         this.attachedControl = formControl;
         this.parent.registerControl(formControl, this);
         this.input = input;
-        this.attachedControl.statusChanges.subscribe((e) => {
+        const subscription = this.attachedControl.statusChanges.subscribe(() => {
             this.determinePopupState();
         });
+        this.subscriptions.push(subscription);
         this.determinePopupState();
     }
     determinePopupState() {
+        const prevState = this.popupState;
         if (stringIsSetAndFilled(this.getErrorToShow())) {
             this.popupState = 'onHover';
-            return;
         }
-        if (isValueSet(this.getWarningToShow())) {
+        else if (isValueSet(this.getWarningToShow())) {
             this.popupState = 'lockedOpen';
+        }
+        else {
+            this.popupState = 'onHover';
+        }
+        this.setUpErrorTooltipListeners(prevState, this.popupState);
+    }
+    setUpErrorTooltipListeners(prev, current) {
+        if (prev === current) {
             return;
         }
-        this.popupState = 'onHover';
+        const containers = [...getAllLimitingContainers(this.elRef.nativeElement), window];
+        if (current === 'lockedOpen') {
+            containers.forEach(e => {
+                e.addEventListener('scroll', this.setErrorTooltipOffset);
+            });
+        }
+        else {
+            containers.forEach(e => {
+                e.removeEventListener('scroll', this.setErrorTooltipOffset);
+            });
+        }
     }
     unregisterControl(formControl) {
         this.attachedControl = null;
@@ -668,10 +690,11 @@ class FormElementComponent {
         return this.getErrorToShow() === error && !this.customErrorHandlers.some((e) => e.error === error);
     }
     getScrollableParent(node) {
-        if (node == null) {
-            return null;
+        if (node === window.document.documentElement) {
+            return window.document.documentElement;
         }
-        if (node.scrollHeight > node.clientHeight) {
+        const overflowY = getComputedStyle(node).overflowY;
+        if (node.clientHeight < node.scrollHeight && (overflowY === 'auto' || overflowY === 'scroll')) {
             return node;
         }
         else {
@@ -679,9 +702,15 @@ class FormElementComponent {
         }
     }
     scrollTo() {
-        this.internalComponentRef.nativeElement.scrollIntoView(true);
-        // to give some breathing room, we scroll 100px more to the top
-        this.getScrollableParent(this.internalComponentRef.nativeElement)?.scrollBy(0, -100);
+        const parent = this.getScrollableParent(this.internalComponentRef.nativeElement);
+        const parentTop = parent === window.document.documentElement ? 0 : parent.getBoundingClientRect().top;
+        const elementTop = this.internalComponentRef.nativeElement.getBoundingClientRect().top;
+        const parentScrollTop = parent.scrollTop;
+        const answer = elementTop - parentTop + parentScrollTop;
+        parent.scrollTo({
+            top: answer - 30,
+            behavior: 'smooth'
+        });
     }
     isRequired() {
         if (isValueSet(this.input)) {
@@ -729,7 +758,9 @@ class FormElementComponent {
         return isValueSet(this.getWarningToShow());
     }
     closePopup() {
+        const prevState = this.popupState;
         this.popupState = 'onHover';
+        this.setUpErrorTooltipListeners(prevState, this.popupState);
     }
     togglePopup() {
         if (!this.errorMessageAsTooltip && !this.hasRightOfCaptionError()) {
@@ -738,12 +769,17 @@ class FormElementComponent {
         if (this.errorFullyVisible) {
             return;
         }
+        const prevState = this.popupState;
         if (this.popupState === 'lockedOpen') {
             this.popupState = 'onHover';
         }
         else {
             this.popupState = 'lockedOpen';
         }
+        this.setUpErrorTooltipListeners(prevState, this.popupState);
+    }
+    ngOnDestroy() {
+        this.subscriptions.forEach(e => e.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormElementComponent, deps: [{ token: FormComponent, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer{flex:0 0 auto}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;max-width:40%;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#666;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }, { kind: "component", type: WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] }); }
@@ -1516,18 +1552,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class TextInputComponent extends ValueAccessorBase {
     constructor() {
         super(...arguments);
+        this.isPeekingPassword = false;
         this.type = 'text';
         this.clearable = false;
         this.hasBorderLeft = true;
         this.hasBorderRight = true;
         this.onBlur = new EventEmitter();
     }
+    togglePeakPassword() {
+        this.isPeekingPassword = !this.isPeekingPassword;
+    }
+    getType() {
+        if (this.type === 'text') {
+            return 'text';
+        }
+        return this.isPeekingPassword ? 'text' : 'password';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon" }, 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]=\"getType()\"\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\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\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}.peakBtn{border:none;background:transparent;height:100%;padding:0}.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: "16.2.12", 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=\"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"] }]
+            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]=\"getType()\"\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\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\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}.peakBtn{border:none;background:transparent;height:100%;padding:0}.showErrors{border-color:#ff8000}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], type: [{
@@ -1540,18 +1586,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], hasBorderRight: [{
                 type: Input
+            }], passwordPeekIcon: [{
+                type: Input
             }], onBlur: [{
                 type: Output
             }] } });
 
 class ToggleComponent extends ValueAccessorBase {
+    constructor() {
+        super(...arguments);
+        this.transparentBackground = true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleComponent, selector: "klp-form-toggle", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToggleComponent, selector: "klp-form-toggle", inputs: { transparentBackground: "transparentBackground" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px;background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "16.2.12", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"] }]
-        }] });
+            args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #e6ecf5;border-radius:35px;background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"] }]
+        }], propDecorators: { transparentBackground: [{
+                type: Input
+            }] } });
 
 class FormCaptionComponent {
     constructor(parent) {
@@ -2441,14 +2495,20 @@ const colors = {
     black: { noAlpha: 'rgb(40, 40, 40)', withAlpha: 'rgba(40, 40, 40, 0.1254901961)' },
 };
 class WithTooltipDirective {
-    constructor(el) {
+    constructor(el, appRef) {
+        this.el = el;
+        this.appRef = appRef;
         this.klpWithTooltip = 'orange';
+        this.position = 'top';
         el.nativeElement.addEventListener('mouseenter', () => {
-            const textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
+            let textToDisplay;
+            if (!this.templateInstance) {
+                textToDisplay = this.tooltipText || el.nativeElement.innerText.trim();
+            }
             if (!stringIsSetAndFilled(this.klpWithTooltip)) {
                 return;
             }
-            if (textToDisplay.length < 1) {
+            if (!stringIsSetAndFilled(textToDisplay) && !this.tooltipTemplate) {
                 return;
             }
             if (stringIsSetAndFilled(this.tooltipText)) {
@@ -2456,6 +2516,9 @@ class WithTooltipDirective {
                     return;
                 }
             }
+            else if (this.tooltipTemplate) {
+                // no need to check here, just render the template
+            }
             else {
                 if (el.nativeElement.offsetWidth >= el.nativeElement.scrollWidth) {
                     return;
@@ -2469,8 +2532,14 @@ class WithTooltipDirective {
             this.div.style.color = `${colors[this.klpWithTooltip].noAlpha}`;
             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))`;
+            if (this.position === 'top') {
+                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))`;
+            }
+            else if (this.position === 'bottom') {
+                this.div.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
+                this.div.style.transform = `translate(calc(-100% + ${el.nativeElement.getBoundingClientRect().width}px), calc(0% + 0.3rem))`;
+            }
             this.div.style.maxWidth = '200px';
             this.div.style.whiteSpace = 'break-spaces';
             this.div.style.backgroundColor = 'white';
@@ -2479,14 +2548,32 @@ class WithTooltipDirective {
             this.div.style.padding = '0.3rem 0.5rem';
             this.div.style.boxSizing = 'border-box';
             this.div.style.borderRadius = '3px';
-            this.div.textContent = textToDisplay;
+            if (stringIsSetAndFilled(textToDisplay)) {
+                this.div.textContent = textToDisplay;
+            }
+            else if (this.templateInstance) {
+                this.div.style.maxWidth = 'none';
+                this.div.style.visibility = 'hidden';
+                this.div.appendChild(this.templateInstance);
+                setTimeout(() => {
+                    const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
+                    this.div.style.backgroundColor = color;
+                    this.div.style.visibility = 'visible';
+                });
+            }
             el.nativeElement.prepend(this.div);
             this.triangle = document.createElement('div');
             this.triangle.style.zIndex = `${zIndexStart + 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))`;
+            if (this.position === 'top') {
+                this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+                this.triangle.style.transform = `translate(-50%, calc(-100% + 0.1rem))`;
+            }
+            else if (this.position === 'bottom') {
+                this.triangle.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
+                this.triangle.style.transform = `translate(-50%, 0rem) rotate(180deg)`;
+            }
             this.triangle.style.width = '0';
             this.triangle.style.height = '0';
             this.triangle.style.borderLeft = `${triangleSize} solid transparent`;
@@ -2497,13 +2584,29 @@ class WithTooltipDirective {
             this.triangleWhite.style.zIndex = `${zIndexStart + 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))`;
+            if (this.position === 'top') {
+                this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y}px`;
+                this.triangleWhite.style.transform = `translate(-50%, calc(-100% + 0.1rem - 2px))`;
+            }
+            else if (this.position === 'bottom') {
+                this.triangleWhite.style.top = `${el.nativeElement.getBoundingClientRect().y + el.nativeElement.getBoundingClientRect().height}px`;
+                this.triangleWhite.style.transform = `translate(-50%, -2px) rotate(180deg)`;
+            }
             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`;
+            if (stringIsSetAndFilled(textToDisplay)) {
+                this.triangleWhite.style.borderTop = `${triangleSize} solid white`;
+            }
+            else if (this.templateInstance) {
+                this.div.style.visibility = 'hidden';
+                setTimeout(() => {
+                    const color = getComputedStyle(this.templateInstance).backgroundColor || getComputedStyle(this.templateInstance).background;
+                    this.triangleWhite.style.borderTop = `${triangleSize} solid ${color}`;
+                    this.div.style.visibility = 'visible';
+                });
+            }
             el.nativeElement.prepend(this.triangleWhite);
         });
         el.nativeElement.addEventListener('mouseleave', () => {
@@ -2521,18 +2624,29 @@ class WithTooltipDirective {
             catch (ex) { }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText" }, ngImport: i0 }); }
+    ngOnChanges(simpleChanges) {
+        if (simpleChanges.tooltipTemplate?.currentValue) {
+            const viewRef = this.tooltipTemplate.createEmbeddedView(null);
+            this.appRef.attachView(viewRef);
+            this.templateInstance = viewRef.rootNodes[0];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: WithTooltipDirective, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText", tooltipTemplate: "tooltipTemplate", position: "position" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WithTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[klpWithTooltip]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { klpWithTooltip: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ApplicationRef }]; }, propDecorators: { klpWithTooltip: [{
                 type: Input
             }], tooltipText: [{
                 type: Input
+            }], tooltipTemplate: [{
+                type: Input
+            }], position: [{
+                type: Input
             }] } });
 
 class NgxEnhancyFormsModule {