RED-5080 - New help mode links: User account and Settings

src/lib/empty-states/empty-state.module.ts

@@ -3,8 +3,9 @@ import { CommonModule } from '@angular/common';
 import { IqserIconsModule } from '../icons';
 import { EmptyStateComponent } from './empty-state/empty-state.component';
 import { IqserButtonsModule } from '../buttons';
+import { IqserHelpModeModule } from '../help-mode';
 
-const modules = [IqserIconsModule, IqserButtonsModule];
+const modules = [IqserIconsModule, IqserButtonsModule, IqserHelpModeModule];
 const components = [EmptyStateComponent];
 
 @NgModule({

src/lib/empty-states/empty-state/empty-state.component.html

@@ -17,5 +17,6 @@
         [icon]="buttonIcon"
         [label]="buttonLabel"
         [type]="iconButtonTypes.primary"
+        [iqserHelpMode]="helpModeKey"
     ></iqser-icon-button>
 </div>

src/lib/empty-states/empty-state/empty-state.component.ts

@@ -17,6 +17,7 @@ export class EmptyStateComponent implements OnInit {
     @Input() buttonLabel?: string;
     @Input() horizontalPadding = 100;
     @Input() verticalPadding = 120;
+    @Input() helpModeKey?: string;
     @Output() readonly action = new EventEmitter();
 
     ngOnInit(): void {

src/lib/listing/table-header/table-header.component.html

@@ -1,14 +1,16 @@
 <div [class.selection-enabled]="selectionEnabled" class="header-item">
-    <iqser-round-checkbox
-        (click)="listingService.selectAll()"
-        *ngIf="selectionEnabled"
-        [active]="listingService.areAllSelected$ | async"
-        [indeterminate]="listingService.notAllSelected$ | async"
-    ></iqser-round-checkbox>
+    <div [iqserHelpMode]="helpModeKey" class="header-title">
+        <iqser-round-checkbox
+            (click)="listingService.selectAll()"
+            *ngIf="selectionEnabled"
+            [active]="listingService.areAllSelected$ | async"
+            [indeterminate]="listingService.notAllSelected$ | async"
+        ></iqser-round-checkbox>
 
-    <span class="all-caps-label" [iqserHelpMode]="helpModeKey">
-        {{ tableHeaderLabel | translate: { length: totalSize || (listingService.displayedLength$ | async) } }}
-    </span>
+        <span class="all-caps-label">
+            {{ tableHeaderLabel | translate: { length: totalSize || (listingService.displayedLength$ | async) } }}
+        </span>
+    </div>
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 

src/lib/listing/table-header/table-header.component.scss

@@ -17,6 +17,12 @@
     box-sizing: border-box;
     padding: 0 24px;
 
+    .header-title {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
     &.selection-enabled {
         padding: 0 24px 0 10px;
     }