added helper element only if elementName property exists, updated breadcrumbs container for helpmode

src/assets/styles/common-breadcrumbs.scss

@@ -13,29 +13,32 @@
         min-width: 16px;
     }
 }
+.breadcrumbs {
+    display: flex;
+    align-items: center;
+    .breadcrumb {
+        text-decoration: none;
+        color: var(--iqser-accent);
+        font-weight: 600;
+        width: fit-content;
+        white-space: nowrap;
 
-.breadcrumb {
-    text-decoration: none;
-    color: var(--iqser-accent);
-    font-weight: 600;
-    width: fit-content;
-    white-space: nowrap;
+        &.back {
+            display: flex !important;
+            justify-content: center;
+            align-items: center;
 
-    &.back {
-        display: flex !important;
-        justify-content: center;
-        align-items: center;
+            mat-icon {
+                margin-right: 8px;
+            }
+        }
 
-        mat-icon {
-            margin-right: 8px;
+        &:last-child {
+            @include common-mixins.line-clamp(1);
+        }
+
+        &.active {
+            color: var(--iqser-primary);
         }
     }
-
-    &:last-child {
-        @include common-mixins.line-clamp(1);
-    }
-
-    &.active {
-        color: var(--iqser-primary);
-    }
 }

src/lib/help-mode/help-mode.directive.ts

@@ -20,7 +20,9 @@ export class HelpModeDirective implements OnInit {
     }
 
     ngOnInit(): void {
-        this._createHelperElement();
+        if (this.elementName) {
+            this._createHelperElement();
+        }
     }
 
     private _createHelperElement() {

src/lib/help-mode/help-mode.service.ts

@@ -121,8 +121,8 @@ export class HelpModeService {
     private _getElementDimensions(element: HTMLElement) {
         const rect = element.getBoundingClientRect();
         return {
-            y: rect.top + window.pageYOffset,
-            x: rect.left + window.pageXOffset,
+            y: rect.top,
+            x: rect.left,
             height: rect.height,
             width: rect.width,
         };