added separate component for help mode button and updated help mode component to be used also for modals

src/assets/styles/common-dialogs.scss

@@ -34,8 +34,12 @@
 
         display: flex;
 
-        > * {
+        > *:not(iqser-help-button) {
             margin-right: 16px;
         }
     }
+
+    .dialog-actions iqser-help-button{
+        margin-left: auto;
+    }
 }

src/assets/styles/common-help-mode.scss

@@ -1,5 +1,5 @@
 .help-mode {
-    z-index: 10;
+    z-index: 3000;
     position: absolute;
     transition: all 0.25s;
 }

src/lib/buttons/buttons.module.ts

@@ -7,9 +7,10 @@ import { ChevronButtonComponent } from './chevron-button/chevron-button.componen
 import { CircleButtonComponent } from './circle-button/circle-button.component';
 import { IconButtonComponent } from './icon-button/icon-button.component';
 import { IqserIconsModule } from '../icons';
+import { HelpButtonComponent } from './help-button/help-button.component';
 
 const matModules = [MatButtonModule, MatTooltipModule];
-const components = [ChevronButtonComponent, CircleButtonComponent, IconButtonComponent];
+const components = [ChevronButtonComponent, CircleButtonComponent, IconButtonComponent, HelpButtonComponent];
 
 @NgModule({
     declarations: [...components],

src/lib/buttons/help-button/help-button.component.html

@@ -0,0 +1,14 @@
+<iqser-icon-button
+    *ngIf="dialogButton"
+    (action)="helpModeService.activateHelpMode()"
+    icon="iqser:help-outline"
+    type="help"
+    [label]="'help-mode.button-text' | translate"
+></iqser-icon-button>
+<iqser-circle-button
+    *ngIf="!dialogButton"
+    (action)="helpModeService.activateHelpMode()"
+    icon="iqser:help-outline"
+    type="help"
+    [tooltip]="'help-mode.button-text' | translate"
+></iqser-circle-button>

src/lib/buttons/help-button/help-button.component.scss

@@ -0,0 +1,7 @@
+.help-button {
+    transition: 0.2s;
+
+    &:hover {
+        background-color: var(--iqser-helpmode-primary);
+    }
+}

src/lib/buttons/help-button/help-button.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { HelpModeService } from '@iqser/common-ui';
+
+@Component({
+    selector: 'iqser-help-button',
+    templateUrl: './help-button.component.html',
+    styleUrls: ['./help-button.component.scss'],
+})
+export class HelpButtonComponent {
+    @Input() dialogButton = true;
+
+    constructor(readonly helpModeService: HelpModeService) {}
+}

src/lib/buttons/icon-button/icon-button.component.html

@@ -4,6 +4,7 @@
     [class.overlay]="showDot"
     [class.primary]="type === iconButtonTypes.primary"
     [class.show-bg]="type === iconButtonTypes.dark"
+    [class.help]="type === iconButtonTypes.help"
     [disabled]="disabled"
     mat-button
     type="button"

src/lib/buttons/types/icon-button.type.ts

@@ -2,6 +2,7 @@ export const IconButtonTypes = {
     default: 'default',
     dark: 'dark',
     primary: 'primary',
+    help: 'help',
 } as const;
 
 export type IconButtonType = keyof typeof IconButtonTypes;

src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss

@@ -1,16 +1,16 @@
-section {
-    background: #ecedf0;
-    display: flex;
-    justify-content: center;
-}
+ section {
+        background: #ecedf0;
+        display: flex;
+        justify-content: center;
 
-.content {
-    width: 440px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding-top: 20px;
-    padding-bottom: 30px;
-    line-height: 18px;
-}
+        .content {
+            width: 440px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            padding-top: 20px;
+            padding-bottom: 30px;
+            line-height: 18px;
+        }
+ }

src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.ts

@@ -1,8 +1,24 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 
 @Component({
     templateUrl: './help-mode-dialog.component.html',
     styleUrls: ['./help-mode-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HelpModeDialogComponent {}
+export class HelpModeDialogComponent implements OnInit, OnDestroy {
+
+    ngOnInit(): void {
+        this._setCdkOverlayContainerZindex('5000');
+    }
+
+    ngOnDestroy(): void {
+        this._setCdkOverlayContainerZindex('800');
+    }
+
+    private _setCdkOverlayContainerZindex(zIndex: string): void {
+        const cdkOverlayContainer = document.querySelector<HTMLElement>('.cdk-overlay-container');
+        if (cdkOverlayContainer) {
+            cdkOverlayContainer.style.zIndex = zIndex;
+        }
+    }
+}

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

@@ -11,7 +11,7 @@ const SCROLL_BUTTONS_IDS = ['scroll-up', 'scroll-down'];
 
 export const ScrollableParentViews = {
     VIRTUAL_SCROLL: 'VIRTUAL_SCROLL',
-    ANNOTATIONS_LIST: 'ANNOTATIONS_LIST'
+    ANNOTATIONS_LIST: 'ANNOTATIONS_LIST',
 } as const;
 
 export type ScrollableParentView = keyof typeof ScrollableParentViews;
@@ -102,7 +102,7 @@ export class HelpModeService {
     }
 
     updateHelperElements() {
-        Object.values(this._helperElements).forEach(({element, helperElement, scrollableParentView }) => {
+        Object.values(this._helperElements).forEach(({ element, helperElement, scrollableParentView }) => {
             this._updateHelperElement(element, helperElement, scrollableParentView);
         });
     }
@@ -138,11 +138,11 @@ export class HelpModeService {
                     const elementRect = element.getBoundingClientRect();
                     const scrollRect = scroll.getBoundingClientRect();
 
-                    if(elementRect.top + elementRect.height > scrollRect.top
+                    if (elementRect.top + elementRect.height > scrollRect.top
                         && elementRect.left + elementRect.width > scrollRect.left
                         && elementRect.bottom - elementRect.height < scrollRect.bottom
                         && elementRect.right - elementRect.width < scrollRect.right) {
-                        return false
+                        return false;
                     }
                 }
             }
@@ -160,16 +160,16 @@ export class HelpModeService {
                 width:${dimensions.width}px;
                 height:${dimensions.height}px;
             `;
-            helperElement.classList.add('help-mode')
+            helperElement.classList.add('help-mode');
         } else {
-            helperElement.classList.remove('help-mode')
+            helperElement.classList.remove('help-mode');
         }
 
     }
 
     private _enableHelperElements() {
         Object.values(this._helperElements).forEach(({ element, helperElement, scrollableParentView }) => {
-            document.body.appendChild(helperElement)
+            document.body.appendChild(helperElement);
             this._updateHelperElement(element, helperElement, scrollableParentView);
         });
     }

src/lib/help-mode/help-mode/help-mode.component.html

@@ -1,6 +1,6 @@
 <div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive$ | async">
     <div class="bottom">
-        <p class="heading">{{ 'help-mode.text' | translate }}</p>
+        <p class="heading">{{ 'help-mode.bottom-text' | translate }}</p>
         <a *ngIf="(helpModeService.helpModeDialogIsOpened$ | async) === false" (click)="helpModeService.openHelpModeDialog()">
             {{ 'help-mode.instructions' | translate }}
         </a>

src/lib/help-mode/help-mode/help-mode.component.scss

@@ -42,7 +42,7 @@
     border-right: 8px solid var(--iqser-helpmode-primary);
     border-top: 8px solid var(--iqser-helpmode-primary);
     border-bottom: 60px solid var(--iqser-helpmode-primary);
-    z-index: 5;
+    z-index: 2000;
     position: absolute;
     display: flex;
     justify-content: center;