From 7edde2a01f9318758a558261dc3140f01c2daf62 Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Thu, 1 Aug 2024 14:41:40 +0300
Subject: [PATCH] RED-9731: fixed help button position on resize.

---
 .../help-button/help-button.component.ts      | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/lib/help-mode/help-button/help-button.component.ts b/src/lib/help-mode/help-button/help-button.component.ts
index 9db9a60..35298bd 100644
--- a/src/lib/help-mode/help-button/help-button.component.ts
+++ b/src/lib/help-mode/help-button/help-button.component.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
-import { Component, effect, ElementRef, Input, OnDestroy, OnInit, viewChild } from '@angular/core';
+import { Component, effect, ElementRef, HostListener, Input, OnDestroy, OnInit, viewChild } from '@angular/core';
 import { MatIcon } from '@angular/material/icon';
 import { HelpModeService } from '../help-mode.service';
 import { MatTooltip } from '@angular/material/tooltip';
@@ -26,9 +26,9 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
         effect(() => {
             if (this.helpModeService.isHelpModeActive()) {
                 this.#helpModeHasBeenActivated = true;
-                this.#applyActiveButtonStyles();
+                setTimeout(() => this.#applyActiveButtonStyles(), 300);
             } else if (this.#helpModeHasBeenActivated) {
-                this.#applyInactiveButtonStyles();
+                setTimeout(() => this.#applyInactiveButtonStyles(), 300);
             }
         });
     }
@@ -42,6 +42,15 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
         return `help-mode-button${this.dialogButton ? '-dialog' : ''}`;
     }
 
+    get currentComponentRect() {
+        return this._elementRef.nativeElement.getBoundingClientRect();
+    }
+
+    @HostListener('window:resize', ['$event'])
+    onResize() {
+        if (this.helpModeService.isHelpModeActive()) this.#applyActiveButtonStyles();
+    }
+
     ngOnInit() {
         if (this.dialogButton) {
             const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
@@ -53,8 +62,11 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
         if (this.dialogButton) {
             const defaultButton = document.getElementById('help-mode-button') as HTMLElement;
             defaultButton.style.removeProperty('z-index');
+
             if (!this.helpModeService.isHelpModeActive()) {
-                document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.removeChild(this.helpModeButton().nativeElement);
+                const helpButtonElement = document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0];
+                if (helpButtonElement.contains(this.helpModeButton().nativeElement))
+                    helpButtonElement?.removeChild(this.helpModeButton().nativeElement);
             }
         }
     }
@@ -68,23 +80,17 @@ export class HelpButtonComponent implements OnInit, OnDestroy {
     }
 
     #applyActiveButtonStyles() {
-        const currentComponent = this._elementRef.nativeElement;
-        const currentComponentRect = currentComponent.getBoundingClientRect();
-        setTimeout(() => {
-            this.helpModeButton().nativeElement.style.setProperty('position', 'absolute');
-            this.helpModeButton().nativeElement.style.setProperty('top', `${currentComponentRect.top}px`);
-            this.helpModeButton().nativeElement.style.setProperty('left', `${currentComponentRect.left}px`);
-            document.body.appendChild(this.helpModeButton().nativeElement);
-        }, 500);
+        this.helpModeButton().nativeElement.style.setProperty('position', 'absolute');
+        this.helpModeButton().nativeElement.style.setProperty('top', `${this.currentComponentRect.top}px`);
+        this.helpModeButton().nativeElement.style.setProperty('left', `${this.currentComponentRect.left}px`);
+        document.body.appendChild(this.helpModeButton().nativeElement);
     }
 
     #applyInactiveButtonStyles() {
-        setTimeout(() => {
-            this.helpModeButton().nativeElement.style.setProperty('position', 'relative');
-            this.helpModeButton().nativeElement.style.setProperty('top', 'unset');
-            this.helpModeButton().nativeElement.style.setProperty('left', 'unset');
-            document.body.removeChild(this.helpModeButton().nativeElement);
-            document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.appendChild(this.helpModeButton().nativeElement);
-        }, 500);
+        this.helpModeButton().nativeElement.style.setProperty('position', 'relative');
+        this.helpModeButton().nativeElement.style.setProperty('top', 'unset');
+        this.helpModeButton().nativeElement.style.setProperty('left', 'unset');
+        document.body.removeChild(this.helpModeButton().nativeElement);
+        document.querySelectorAll('iqser-help-button')[this.dialogButton ? 1 : 0]?.appendChild(this.helpModeButton().nativeElement);
     }
 }