@klippa/ngx-enhancy-forms 14.22.10 → 14.22.12

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

@@ -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;
@@ -736,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()) {
@@ -745,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());
     }
 }
 FormElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: FormElementComponent, deps: [{ token: FormComponent, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });