RED-9321: refactored help mode module.

src/lib/filtering/filters.module.ts

@@ -5,7 +5,6 @@ import { MatMenuModule } from '@angular/material/menu';
 import { TranslateModule } from '@ngx-translate/core';
 import { ChevronButtonComponent, IconButtonComponent } from '../buttons';
 import { QuickFiltersComponent } from './quick-filters/quick-filters.component';
-import { IqserHelpModeModule } from '../help-mode';
 import { SingleFilterComponent } from './single-filter/single-filter.component';
 import { MatIconModule } from '@angular/material/icon';
 import { PreventDefaultDirective, StopPropagationDirective } from '../directives';
@@ -21,7 +20,6 @@ const components = [QuickFiltersComponent, SingleFilterComponent];
         MatCheckboxModule,
         MatMenuModule,
         TranslateModule,
-        IqserHelpModeModule,
         IconButtonComponent,
         ChevronButtonComponent,
         MatIconModule,

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

@@ -1,11 +1,14 @@
 /* eslint-disable @angular-eslint/prefer-on-push-component-change-detection */
 import { AfterViewInit, Component, ElementRef, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
 import { HelpModeService } from '../index';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
     selector: 'iqser-help-button',
     templateUrl: './help-button.component.html',
     styleUrls: ['./help-button.component.scss'],
+    standalone: true,
+    imports: [MatIcon],
 })
 export class HelpButtonComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input() dialogButton = true;

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

@@ -1,6 +1,9 @@
 import { ChangeDetectionStrategy, Component, HostListener, OnDestroy, OnInit } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { CircleButtonComponent } from '../../buttons';
+import { TranslateModule } from '@ngx-translate/core';
 
 const HIGHER_CDK_OVERLAY_CONTAINER_ZINDEX = '1200';
 const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
@@ -9,6 +12,8 @@ const DEFAULT_CDK_OVERLAY_CONTAINER_ZINDEX = '800';
     templateUrl: './help-mode-dialog.component.html',
     styleUrls: ['./help-mode-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [MatCheckbox, CircleButtonComponent, TranslateModule],
 })
 export class HelpModeDialogComponent implements OnInit, OnDestroy {
     #backdropClickSubscription: Subscription;

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

@@ -1,28 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { HelpModeComponent } from './help-mode/help-mode.component';
-import { HelpButtonComponent } from './help-button/help-button.component';
-import { HelpModeKey, HelpModeService } from './help-mode.service';
-import { CircleButtonComponent } from '../buttons';
-import { HELP_MODE_KEYS } from './tokens';
-import { MatIcon } from '@angular/material/icon';
-import { MatCheckbox } from '@angular/material/checkbox';
-import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
-
-const components = [HelpModeComponent, HelpButtonComponent, HelpModeDialogComponent];
-
-// TODO: Get rid of this, make everything standalone.
-@NgModule({
-    declarations: [...components],
-    imports: [CommonModule, TranslateModule, CircleButtonComponent, MatCheckbox, MatIcon],
-    exports: [...components],
-})
-export class IqserHelpModeModule {
-    static forRoot(helpModeKeys: HelpModeKey[]): ModuleWithProviders<IqserHelpModeModule> {
-        return {
-            ngModule: IqserHelpModeModule,
-            providers: [{ provide: HELP_MODE_KEYS, useValue: helpModeKeys }, HelpModeService],
-        };
-    }
-}

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

@@ -2,13 +2,17 @@ import { ChangeDetectionStrategy, Component, HostListener } from '@angular/core'
 import { HelpModeService } from '../help-mode.service';
 import { IqserEventTarget } from '../../utils';
 import { MatDialog } from '@angular/material/dialog';
-import { CircleButtonTypes } from '../../buttons';
+import { CircleButtonComponent, CircleButtonTypes } from '../../buttons';
+import { AsyncPipe, NgIf } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'iqser-help-mode',
     templateUrl: './help-mode.component.html',
     styleUrls: ['./help-mode.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [AsyncPipe, TranslateModule, NgIf, CircleButtonComponent],
 })
 export class HelpModeComponent {
     readonly circleButtonTypes = CircleButtonTypes;

src/lib/help-mode/index.ts

@@ -1,5 +1,4 @@
 export * from './tokens';
-export * from './help-mode.module';
 export * from './help-mode.service';
 export * from './help-mode/help-mode.component';
 export * from './help-button/help-button.component';

src/lib/help-mode/utils/help-mode.provider.ts

@@ -0,0 +1,6 @@
+import { HelpModeKey, HelpModeService } from '../help-mode.service';
+import { HELP_MODE_KEYS } from '../tokens';
+
+export function provideHelpMode(helpModeKeys: HelpModeKey[]) {
+    return [{ provide: HELP_MODE_KEYS, useValue: helpModeKeys }, HelpModeService];
+}

src/lib/listing/listing.module.ts

@@ -13,7 +13,6 @@ import { RouterModule } from '@angular/router';
 import { WorkflowComponent } from './workflow/workflow.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { PageHeaderComponent } from './page-header/page-header.component';
-import { IqserHelpModeModule } from '../help-mode';
 import { TableContentComponent } from './table-content/table-content.component';
 import { TableItemComponent } from './table-content/table-item/table-item.component';
 import { ColumnHeaderComponent } from './workflow/column-header/column-header.component';
@@ -35,7 +34,7 @@ const components = [
     TableItemComponent,
     ColumnHeaderComponent,
 ];
-const modules = [DragDropModule, TranslateModule, IqserFiltersModule, ScrollingModule, RouterModule, IqserHelpModeModule];
+const modules = [DragDropModule, TranslateModule, IqserFiltersModule, ScrollingModule, RouterModule];
 
 @NgModule({
     declarations: [...components],