From 3bebc49d9693693e8db6c22216d1c7083ac4a158 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 19 Aug 2021 17:27:10 +0300
Subject: [PATCH 01/11] move popup filter to common lib

---
 .../file-workload.component.html              |   4 +-
 .../dossier-listing-screen.component.ts       |   7 +-
 .../dossier-overview-screen.component.ts      |   2 +-
 .../file-preview-screen.component.ts          |   2 +-
 .../popup-filter/popup-filter.component.html  | 109 ------------------
 .../popup-filter/popup-filter.component.scss  |  41 -------
 .../popup-filter/popup-filter.component.ts    | 102 ----------------
 .../page-header/page-header.component.html    |   2 +-
 .../src/app/modules/shared/shared.module.ts   |   2 -
 .../popup-filter => }/utils/filter-utils.ts   |   0
 apps/red-ui/src/assets/styles/_variables.scss |   1 +
 libs/common-ui                                |   2 +-
 12 files changed, 8 insertions(+), 266 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts
 rename apps/red-ui/src/app/{modules/shared/components/filters/popup-filter => }/utils/filter-utils.ts (100%)

diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
index c52caa0e3..6f929ff40 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
@@ -9,11 +9,11 @@
             class="all-caps-label primary pointer"
             translate="file-preview.tabs.annotations.select"
         ></div>
-        <redaction-popup-filter
+        <iqser-popup-filter
             [actionsTemplate]="annotationFilterActionTemplate"
             [primaryFiltersSlug]="'primaryFilters'"
             [secondaryFiltersSlug]="'secondaryFilters'"
-        ></redaction-popup-filter>
+        ></iqser-popup-filter>
     </div>
 </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
index 68718440f..fcd588b0d 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts
@@ -20,12 +20,7 @@ import { DefaultListingServices, ListingComponent, NestedFilter, TableColumnConf
 import { workloadTranslations } from '../../translations/workload-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
-import {
-    annotationFilterChecker,
-    dossierMemberChecker,
-    dossierStatusChecker,
-    dossierTemplateChecker
-} from '@shared/components/filters/popup-filter/utils/filter-utils';
+import { annotationFilterChecker, dossierMemberChecker, dossierStatusChecker, dossierTemplateChecker } from '@utils/filter-utils';
 import { PermissionsService } from '@services/permissions.service';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index 5e91c0cd1..74e03def6 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -38,7 +38,7 @@ import { UserPreferenceService } from '@services/user-preference.service';
 import { workloadTranslations } from '../../translations/workload-translations';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { annotationFilterChecker } from '@shared/components/filters/popup-filter/utils/filter-utils';
+import { annotationFilterChecker } from '@utils/filter-utils';
 import { PermissionsService } from '@services/permissions.service';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { FileAttributeConfig } from '@redaction/red-ui-http';
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index 630093728..1e9e14b39 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
@@ -34,7 +34,7 @@ import { LoadingService } from '@services/loading.service';
 import { clearStamps, stampPDFPage } from '@utils/page-stamper';
 import { TranslateService } from '@ngx-translate/core';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
-import { handleFilterDelta } from '@shared/components/filters/popup-filter/utils/filter-utils';
+import { handleFilterDelta } from '@utils/filter-utils';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html
deleted file mode 100644
index 335429b53..000000000
--- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<ng-container *ngIf="primaryFilterGroup$ | async as primaryGroup">
-    <iqser-icon-button
-        *ngIf="primaryGroup.icon"
-        [icon]="primaryGroup.icon"
-        [label]="primaryGroup.label || ('filter-menu.label' | translate)"
-        [matMenuTriggerFor]="filterMenu"
-        [showDot]="hasActiveFilters$ | async"
-        [attr.aria-expanded]="expanded$ | async"
-    ></iqser-icon-button>
-
-    <iqser-chevron-button
-        *ngIf="!primaryGroup.icon"
-        [label]="primaryGroup.label || ('filter-menu.label' | translate)"
-        [matMenuTriggerFor]="filterMenu"
-        [showDot]="hasActiveFilters$ | async"
-        [attr.aria-expanded]="expanded$ | async"
-    ></iqser-chevron-button>
-
-    <mat-menu
-        #filterMenu="matMenu"
-        (close)="expanded.next(false)"
-        [class]="(secondaryFilterGroup$ | async)?.filters.length > 0 ? 'padding-bottom-0' : ''"
-        xPosition="before"
-    >
-        <ng-template matMenuContent>
-            <div class="filter-menu-header">
-                <div class="all-caps-label" translate="filter-menu.filter-types"></div>
-                <div class="actions">
-                    <div
-                        (click)="activatePrimaryFilters(); $event.stopPropagation()"
-                        class="all-caps-label primary pointer"
-                        translate="actions.all"
-                    ></div>
-                    <div
-                        (click)="deactivateFilters(); $event.stopPropagation()"
-                        class="all-caps-label primary pointer"
-                        translate="actions.none"
-                    ></div>
-                </div>
-            </div>
-
-            <div class="filter-content">
-                <ng-container
-                    *ngFor="let filter of primaryGroup.filters"
-                    [ngTemplateOutletContext]="{
-                        filter: filter,
-                        atLeastOneIsExpandable: atLeastOneFilterIsExpandable$ | async
-                    }"
-                    [ngTemplateOutlet]="defaultFilterTemplate"
-                ></ng-container>
-            </div>
-
-            <div *ngIf="secondaryFilterGroup$ | async as secondaryGroup" class="filter-options">
-                <div class="filter-menu-options">
-                    <div class="all-caps-label" translate="filter-menu.filter-options"></div>
-                </div>
-
-                <div *ngFor="let filter of secondaryGroup.filters">
-                    <ng-container
-                        [ngTemplateOutletContext]="{
-                            filter: filter,
-                            atLeastOneIsExpandable: atLeastOneSecondaryFilterIsExpandable$ | async
-                        }"
-                        [ngTemplateOutlet]="defaultFilterTemplate"
-                    ></ng-container>
-                </div>
-            </div>
-        </ng-template>
-    </mat-menu>
-
-    <ng-template #defaultFilterLabelTemplate let-filter="filter">
-        {{ filter?.label }}
-    </ng-template>
-
-    <ng-template #defaultFilterTemplate let-atLeastOneIsExpandable="atLeastOneIsExpandable" let-filter="filter">
-        <div (click)="toggleFilterExpanded($event, filter)" class="mat-menu-item flex">
-            <div *ngIf="filter.children?.length > 0" class="arrow-wrapper">
-                <mat-icon *ngIf="filter.expanded" color="accent" svgIcon="iqser:arrow-down"></mat-icon>
-                <mat-icon *ngIf="!filter.expanded" color="accent" svgIcon="red:arrow-right"></mat-icon>
-            </div>
-            <div *ngIf="atLeastOneIsExpandable && filter.children?.length === 0" class="arrow-wrapper spacer">&nbsp;</div>
-            <mat-checkbox
-                (click)="filterCheckboxClicked($event, filter)"
-                [checked]="filter.checked"
-                [indeterminate]="filter.indeterminate"
-                class="filter-menu-checkbox"
-            >
-                <ng-container
-                    [ngTemplateOutletContext]="{ filter: filter }"
-                    [ngTemplateOutlet]="primaryGroup.filterTemplate ?? defaultFilterLabelTemplate"
-                ></ng-container>
-            </mat-checkbox>
-            <ng-container [ngTemplateOutletContext]="{ filter: filter }" [ngTemplateOutlet]="actionsTemplate"></ng-container>
-        </div>
-
-        <div *ngIf="filter.children?.length && filter.expanded">
-            <div (click)="$event.stopPropagation()" *ngFor="let child of filter.children" class="padding-left mat-menu-item">
-                <mat-checkbox (click)="filterCheckboxClicked($event, child, filter)" [checked]="child.checked">
-                    <ng-container
-                        [ngTemplateOutletContext]="{ filter: child }"
-                        [ngTemplateOutlet]="primaryGroup.filterTemplate ?? defaultFilterLabelTemplate"
-                    ></ng-container>
-                </mat-checkbox>
-
-                <ng-container [ngTemplateOutletContext]="{ filter: child }" [ngTemplateOutlet]="actionsTemplate"></ng-container>
-            </div>
-        </div>
-    </ng-template>
-</ng-container>
diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss
deleted file mode 100644
index f5bd6e27e..000000000
--- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../../../../../../assets/styles/variables';
-
-.filter-menu-options,
-.filter-menu-header {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px 16px 16px 16px;
-    width: 350px;
-
-    .actions {
-        display: flex;
-
-        > *:not(:last-child) {
-            margin-right: 8px;
-        }
-    }
-}
-
-.filter-content {
-    max-height: 570px;
-    overflow: auto;
-}
-
-.filter-menu-options {
-    margin-top: 8px;
-    padding: 16px 16px 3px;
-}
-
-.filter-options {
-    background-color: $grey-2;
-    padding-bottom: 8px;
-}
-
-::ng-deep .filter-menu-checkbox {
-    width: 100%;
-
-    label {
-        width: 100%;
-        height: 100%;
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts b/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts
deleted file mode 100644
index c40c56257..000000000
--- a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/popup-filter.component.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit, TemplateRef } from '@angular/core';
-import { FilterGroup, FilterService, handleCheckedValue, NestedFilter } from '@iqser/common-ui';
-import { MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { delay, distinctUntilChanged, map, shareReplay } from 'rxjs/operators';
-
-@Component({
-    selector: 'redaction-popup-filter',
-    templateUrl: './popup-filter.component.html',
-    styleUrls: ['./popup-filter.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [
-        {
-            provide: MAT_CHECKBOX_DEFAULT_OPTIONS,
-            useValue: {
-                clickAction: 'noop',
-                color: 'primary'
-            }
-        }
-    ]
-})
-export class PopupFilterComponent implements OnInit {
-    @Input() actionsTemplate: TemplateRef<unknown>;
-    @Input() primaryFiltersSlug: string;
-    @Input() secondaryFiltersSlug: string;
-
-    atLeastOneFilterIsExpandable$?: Observable<boolean>;
-    atLeastOneSecondaryFilterIsExpandable$?: Observable<boolean>;
-    hasActiveFilters$?: Observable<boolean>;
-    readonly expanded = new BehaviorSubject<boolean>(null);
-    readonly expanded$ = this.expanded.asObservable().pipe(delay(200));
-
-    primaryFilterGroup$?: Observable<FilterGroup>;
-    secondaryFilterGroup$?: Observable<FilterGroup>;
-
-    constructor(readonly filterService: FilterService) {}
-
-    ngOnInit(): void {
-        this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug);
-        this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug);
-        this.hasActiveFilters$ = combineLatest([this.primaryFilterGroup$, this.secondaryFilterGroup$]).pipe(
-            map(([primary, secondary]) => [...primary.filters, ...(secondary?.filters || [])]),
-            map(filters => filters.some(f => f.checked || f.indeterminate)),
-            distinctUntilChanged()
-        );
-        this.atLeastOneFilterIsExpandable$ = this.primaryFilterGroup$.pipe(
-            map(group => group.filters.some(f => this.isExpandable(f))),
-            distinctUntilChanged(),
-            shareReplay()
-        );
-        this.atLeastOneSecondaryFilterIsExpandable$ = this.secondaryFilterGroup$.pipe(
-            map(group => group?.filters.some(f => this.isExpandable(f))),
-            distinctUntilChanged(),
-            shareReplay()
-        );
-    }
-
-    filterCheckboxClicked($event: MouseEvent, nestedFilter: NestedFilter, parent?: NestedFilter): void {
-        $event.stopPropagation();
-
-        nestedFilter.checked = !nestedFilter.checked;
-
-        if (parent) {
-            handleCheckedValue(parent);
-        } else {
-            if (nestedFilter.indeterminate) nestedFilter.checked = false;
-            nestedFilter.indeterminate = false;
-            nestedFilter.children?.forEach(f => (f.checked = nestedFilter.checked));
-        }
-
-        this.filterService.refresh();
-    }
-
-    activatePrimaryFilters(): void {
-        this._setFilters(this.primaryFiltersSlug, true);
-    }
-
-    deactivateFilters(): void {
-        this._setFilters(this.primaryFiltersSlug);
-        if (this.secondaryFiltersSlug) this._setFilters(this.secondaryFiltersSlug);
-    }
-
-    toggleFilterExpanded($event: MouseEvent, nestedFilter: NestedFilter): void {
-        $event.stopPropagation();
-        nestedFilter.expanded = !nestedFilter.expanded;
-        this.filterService.refresh();
-    }
-
-    isExpandable(nestedFilter: NestedFilter): boolean {
-        return nestedFilter?.children?.length > 0;
-    }
-
-    private _setFilters(filterGroup: string, checked = false) {
-        const filters = this.filterService.getGroup(filterGroup).filters;
-        filters.forEach(f => {
-            f.checked = checked;
-            f.indeterminate = false;
-            f.children?.forEach(ff => (ff.checked = checked));
-        });
-        this.filterService.refresh();
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index 4f620c312..486a71672 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -7,7 +7,7 @@
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
 
         <ng-container *ngFor="let config of filters; trackBy: trackByLabel">
-            <redaction-popup-filter *ngIf="!config.hide" [primaryFiltersSlug]="config.slug"></redaction-popup-filter>
+            <iqser-popup-filter *ngIf="!config.hide" [primaryFiltersSlug]="config.slug"></iqser-popup-filter>
         </ng-container>
 
         <ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index 46abe1990..4513ac018 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -24,7 +24,6 @@ import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-
 import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component';
 import { SideNavComponent } from '@shared/components/side-nav/side-nav.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
-import { PopupFilterComponent } from '@shared/components/filters/popup-filter/popup-filter.component';
 import { AssignUserDropdownComponent } from './components/assign-user-dropdown/assign-user-dropdown.component';
 import { InputWithActionComponent } from '@shared/components/input-with-action/input-with-action.component';
 import { PageHeaderComponent } from './components/page-header/page-header.component';
@@ -42,7 +41,6 @@ const components = [
     SimpleDoughnutChartComponent,
     DictionaryAnnotationIconComponent,
     HiddenActionComponent,
-    PopupFilterComponent,
     ConfirmationDialogComponent,
     EmptyStateComponent,
     SelectComponent,
diff --git a/apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts b/apps/red-ui/src/app/utils/filter-utils.ts
similarity index 100%
rename from apps/red-ui/src/app/modules/shared/components/filters/popup-filter/utils/filter-utils.ts
rename to apps/red-ui/src/app/utils/filter-utils.ts
diff --git a/apps/red-ui/src/assets/styles/_variables.scss b/apps/red-ui/src/assets/styles/_variables.scss
index be6a0f8ce..9aeb20b26 100644
--- a/apps/red-ui/src/assets/styles/_variables.scss
+++ b/apps/red-ui/src/assets/styles/_variables.scss
@@ -36,6 +36,7 @@ $dark: $black;
 
 $btn-bg-hover: $grey-4;
 $btn-bg: $grey-6;
+$filter-bg: $grey-2;
 $quick-filter-border: $grey-5;
 
 $separator: rgba(226, 228, 233, 0.9);
diff --git a/libs/common-ui b/libs/common-ui
index d31b702c2..c20bac823 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit d31b702c22ac1a9e925db673ef83f56c7137071b
+Subproject commit c20bac823277e659c1c9797bdd034a9f5b2fc539

From 56aea20a878c7f6e19b95e996ef906d3c3055423 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Fri, 20 Aug 2021 00:06:10 +0300
Subject: [PATCH 02/11] move toaster service

---
 .../app/components/toast/toast.component.ts   |  2 +-
 .../add-edit-dictionary-dialog.component.ts   |  2 +-
 ...edit-dossier-attribute-dialog.component.ts |  2 +-
 .../edit-color-dialog.component.ts            |  2 +-
 ...-attributes-csv-import-dialog.component.ts |  2 +-
 .../digital-signature-screen.component.ts     |  2 +-
 .../general-config-screen.component.ts        |  2 +-
 .../reports/reports-screen.component.ts       |  2 +-
 .../screens/rules/rules-screen.component.ts   |  2 +-
 .../watermark/watermark-screen.component.ts   |  2 +-
 .../dossier-details.component.ts              |  2 +-
 .../page-exclusion.component.ts               | 20 ++---
 .../team-members-manager.component.ts         |  2 +-
 ...sign-reviewer-approver-dialog.component.ts |  2 +-
 .../edit-dossier-dialog.component.ts          |  2 +-
 .../edit-dossier-general-info.component.ts    |  4 +-
 .../force-redaction-dialog.component.ts       |  2 +-
 .../manual-annotation-dialog.component.ts     |  2 +-
 .../dossier-overview-screen.component.ts      | 15 +---
 .../file-preview-screen.component.ts          |  2 +-
 .../services/manual-annotation.service.ts     |  2 +-
 .../file-download-btn.component.ts            |  2 +-
 .../services/dictionary-save.service.ts       |  2 +-
 .../services/file-upload.service.ts           |  2 +-
 .../src/app/services/error-message.service.ts | 18 ----
 .../src/app/services/toaster.service.ts       | 82 -------------------
 .../red-ui/src/app/state/app-state.service.ts |  2 +-
 27 files changed, 36 insertions(+), 147 deletions(-)
 delete mode 100644 apps/red-ui/src/app/services/error-message.service.ts
 delete mode 100644 apps/red-ui/src/app/services/toaster.service.ts

diff --git a/apps/red-ui/src/app/components/toast/toast.component.ts b/apps/red-ui/src/app/components/toast/toast.component.ts
index e61e2b967..ade7b422e 100644
--- a/apps/red-ui/src/app/components/toast/toast.component.ts
+++ b/apps/red-ui/src/app/components/toast/toast.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { Toast, ToastPackage, ToastrService } from 'ngx-toastr';
-import { ToasterOptions } from '@services/toaster.service';
+import { ToasterOptions } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './toast.component.html',
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
index e0ad040e5..2184356a8 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts
@@ -3,7 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DictionaryControllerService, TypeValue } from '@redaction/red-ui-http';
 import { Observable } from 'rxjs';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { TypeValueWrapper } from '@models/file/type-value.wrapper';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
index 508c5a280..5563bd8a2 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.ts
@@ -4,7 +4,7 @@ import { DossierAttributeConfig, FileAttributeConfig } from '@redaction/red-ui-h
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { LoadingService } from '@services/loading.service';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
 import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts
index c67a8dd1c..6846684b7 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.ts
@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Colors, DictionaryControllerService } from '@redaction/red-ui-http';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { DefaultColorType } from '@models/default-color-key.model';
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 73479ab63..57cd81b44 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -5,7 +5,7 @@ import * as Papa from 'papaparse';
 import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
index c161cd8a4..f986861cf 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { DigitalSignature, DigitalSignatureControllerService } from '@redaction/red-ui-http';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { lastIndexOfEnd } from '@utils/functions';
 import { AutoUnsubscribe, IconButtonTypes } from '@iqser/common-ui';
 import { LoadingService } from '@services/loading.service';
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
index 942bcb2e6..81d6d9218 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.ts
@@ -9,7 +9,7 @@ import {
 } from '@redaction/red-ui-http';
 import { AppConfigService } from '@app-config/app-config.service';
 import { AutoUnsubscribe, IconButtonTypes } from '@iqser/common-ui';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { LoadingService } from '@services/loading.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts
index 7f50f8688..4d5c05610 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts
@@ -10,7 +10,7 @@ import {
     placeholdersDescriptionsTranslations
 } from '../../translations/placeholders-descriptions-translations';
 import { removeBraces } from '@utils/functions';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ConfirmationDialogInput } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component';
 import { AdminDialogService } from '../../services/admin-dialog.service';
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
index 0b89b29d4..0316c83cc 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.ts
@@ -1,7 +1,7 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
 import { RulesControllerService } from '@redaction/red-ui-http';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { saveAs } from 'file-saver';
 import { ComponentHasChanges } from '@guards/can-deactivate.guard';
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts
index cf2bada3b..36a020d0a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.ts
@@ -7,7 +7,7 @@ import { HttpClient } from '@angular/common/http';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Debounce, IconButtonTypes } from '@iqser/common-ui';
 import { WatermarkControllerService, WatermarkModelRes } from '@redaction/red-ui-http';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { ActivatedRoute } from '@angular/router';
 import { BASE_HREF } from '../../../../tokens';
 import { stampPDFPage } from '@utils/page-stamper';
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts
index 02da71057..5b8d6a7c1 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts
@@ -5,7 +5,7 @@ import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/si
 import { TranslateChartService } from '@services/translate-chart.service';
 import { StatusSorter } from '@utils/sorters/status-sorter';
 import { UserService, UserWrapper } from '@services/user.service';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { FilterService } from '@iqser/common-ui';
 import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
index 2e3756ed0..c564e2b4c 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
@@ -1,11 +1,11 @@
-import {Component, EventEmitter, Input, OnChanges, Output} from '@angular/core';
-import {PermissionsService} from '@services/permissions.service';
-import {FormBuilder, FormGroup} from '@angular/forms';
-import {PageRange, ReanalysisControllerService} from '@redaction/red-ui-http';
-import {Toaster} from '@services/toaster.service';
-import {LoadingService} from '@services/loading.service';
-import {marker as _} from '@biesbjerg/ngx-translate-extract-marker';
-import {FileStatusWrapper} from '../../../../models/file/file-status.wrapper';
+import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { PermissionsService } from '@services/permissions.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { PageRange, ReanalysisControllerService } from '@redaction/red-ui-http';
+import { Toaster } from '@iqser/common-ui';
+import { LoadingService } from '@services/loading.service';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 
 @Component({
     selector: 'redaction-page-exclusion',
@@ -35,13 +35,13 @@ export class PageExclusionComponent implements OnChanges {
         const excludedPages = (this.fileStatus?.excludedPages || []).sort((p1, p2) => p1 - p2);
         this.excludedPagesRanges = excludedPages.reduce((ranges, page) => {
             if (!ranges.length) {
-                return [{startPage: page, endPage: page}];
+                return [{ startPage: page, endPage: page }];
             }
 
             if (page === ranges[ranges.length - 1].endPage + 1) {
                 ranges[ranges.length - 1].endPage = page;
             } else {
-                ranges.push({startPage: page, endPage: page});
+                ranges.push({ startPage: page, endPage: page });
             }
             return ranges;
         }, []);
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
index bf5f37939..2c6e89a78 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Dossier } from '@redaction/red-ui-http';
 import { AppStateService } from '@state/app-state.service';
 import { UserService } from '@services/user.service';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
index 55ba06aff..f41c987d4 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.ts
@@ -3,7 +3,7 @@ import { StatusControllerService } from '@redaction/red-ui-http';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AppStateService } from '@state/app-state.service';
 import { UserService } from '@services/user.service';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
index 4d77b2a95..1291080b7 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.ts
@@ -4,7 +4,7 @@ import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { EditDossierGeneralInfoComponent } from './general-info/edit-dossier-general-info.component';
 import { EditDossierDownloadPackageComponent } from './download-package/edit-dossier-download-package.component';
 import { EditDossierSectionInterface } from './edit-dossier-section.interface';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { EditDossierDictionaryComponent } from './dictionary/edit-dossier-dictionary.component';
 import { EditDossierTeamMembersComponent } from './team-members/edit-dossier-team-members.component';
 import { EditDossierAttributesComponent } from './attributes/edit-dossier-attributes.component';
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
index 20b811360..0864fe2e5 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.ts
@@ -3,14 +3,14 @@ import { DossierTemplateModel } from '@redaction/red-ui-http';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '../../../../../state/app-state.service';
 import * as moment from 'moment';
-import { DossierWrapper } from '../../../../../state/model/dossier.wrapper';
+import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
 import { PermissionsService } from '@services/permissions.service';
 import { Router } from '@angular/router';
 import { MatDialogRef } from '@angular/material/dialog';
 import { EditDossierDialogComponent } from '../edit-dossier-dialog.component';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { IconButtonTypes } from '@iqser/common-ui';
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts
index d5f1293c4..f89f44a36 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.ts
@@ -3,7 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '@state/app-state.service';
 import { MatDialogRef } from '@angular/material/dialog';
 import { ForceRedactionRequest, LegalBasisMappingControllerService } from '@redaction/red-ui-http';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { UserService } from '@services/user.service';
 import { ManualAnnotationService } from '../../services/manual-annotation.service';
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
index 6e0d912b6..476092dcc 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
@@ -3,7 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { AppStateService } from '@state/app-state.service';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AddRedactionRequest, LegalBasisMappingControllerService } from '@redaction/red-ui-http';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { UserService } from '@services/user.service';
 import { ManualRedactionEntryWrapper } from '@models/file/manual-redaction-entry.wrapper';
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index 74e03def6..8395c9f32 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -1,16 +1,5 @@
-import {
-    ChangeDetectorRef,
-    Component,
-    ElementRef,
-    HostListener,
-    Injector,
-    OnDestroy,
-    OnInit,
-    Renderer2,
-    TemplateRef,
-    ViewChild
-} from '@angular/core';
-import { Toaster } from '@services/toaster.service';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Toaster } from '@iqser/common-ui';
 import { AppStateService } from '@state/app-state.service';
 import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
 import { FileUploadModel } from '@upload-download/model/file-upload.model';
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index 1e9e14b39..aa71543f6 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
@@ -12,7 +12,7 @@ import { AnnotationData, FileDataModel } from '@models/file/file-data.model';
 import { FileActionService } from '../../services/file-action.service';
 import { AnnotationDrawService } from '../../services/annotation-draw.service';
 import { AnnotationProcessingService } from '../../services/annotation-processing.service';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import { PermissionsService } from '@services/permissions.service';
 import { timer } from 'rxjs';
diff --git a/apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts b/apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts
index 8a9462653..db88b7afa 100644
--- a/apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts
+++ b/apps/red-ui/src/app/modules/dossier/services/manual-annotation.service.ts
@@ -7,7 +7,7 @@ import {
     ManualRedactionControllerService
 } from '@redaction/red-ui-http';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { tap } from 'rxjs/operators';
 import { UserService } from '@services/user.service';
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
index d45738b4f..7cf584f88 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
@@ -3,7 +3,7 @@ import { PermissionsService } from '@services/permissions.service';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import { FileDownloadService } from '@upload-download/services/file-download.service';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { AutoUnsubscribe, CircleButtonType, CircleButtonTypes } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
diff --git a/apps/red-ui/src/app/modules/shared/services/dictionary-save.service.ts b/apps/red-ui/src/app/modules/shared/services/dictionary-save.service.ts
index 87523196d..7b32010e9 100644
--- a/apps/red-ui/src/app/modules/shared/services/dictionary-save.service.ts
+++ b/apps/red-ui/src/app/modules/shared/services/dictionary-save.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable, throwError } from 'rxjs';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { DictionaryControllerService } from '@redaction/red-ui-http';
 import { tap } from 'rxjs/operators';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
diff --git a/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts b/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
index 58aa957b6..c4caebff1 100644
--- a/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
+++ b/apps/red-ui/src/app/modules/upload-download/services/file-upload.service.ts
@@ -9,7 +9,7 @@ import { UploadDownloadDialogService } from './upload-download-dialog.service';
 import { toNumber } from '@utils/functions';
 import { UploadControllerService } from '@redaction/red-ui-http';
 import { isCsv } from '@utils/file-drop-utils';
-import { ErrorMessageService } from '@services/error-message.service';
+import { ErrorMessageService } from '@iqser/common-ui';
 
 export interface ActiveUpload {
     subscription: Subscription;
diff --git a/apps/red-ui/src/app/services/error-message.service.ts b/apps/red-ui/src/app/services/error-message.service.ts
deleted file mode 100644
index 68fd90874..000000000
--- a/apps/red-ui/src/app/services/error-message.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { HttpErrorResponse } from '@angular/common/http';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class ErrorMessageService {
-    constructor(private readonly _translateService: TranslateService) {}
-
-    _parseErrorResponse(err: HttpErrorResponse): string {
-        return err?.error?.message?.includes('message') ? ` ${err.error.message.match('"message":"(.*?)\\"')[1]}` : '';
-    }
-
-    getMessage(error: HttpErrorResponse, defaultMessage: string): string {
-        return this._translateService.instant(defaultMessage) + this._parseErrorResponse(error);
-    }
-}
diff --git a/apps/red-ui/src/app/services/toaster.service.ts b/apps/red-ui/src/app/services/toaster.service.ts
deleted file mode 100644
index d7c4095bd..000000000
--- a/apps/red-ui/src/app/services/toaster.service.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActiveToast, ToastrService } from 'ngx-toastr';
-import { IndividualConfig } from 'ngx-toastr/toastr/toastr-config';
-import { NavigationStart, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { HttpErrorResponse } from '@angular/common/http';
-import { ErrorMessageService } from '@services/error-message.service';
-import { filter } from 'rxjs/operators';
-
-const enum NotificationType {
-    SUCCESS = 'SUCCESS',
-    WARNING = 'WARNING',
-    INFO = 'INFO'
-}
-
-export interface ToasterOptions extends IndividualConfig {
-    readonly title?: string;
-    /**
-     * These params are used as interpolateParams for translate service
-     */
-    readonly params?: object;
-    readonly actions?: { readonly title?: string; readonly action: () => void }[];
-}
-
-export interface ErrorToasterOptions extends ToasterOptions {
-    /**
-     * Pass an http error that will be processed by error message service and shown in toast
-     */
-    readonly error?: HttpErrorResponse;
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class Toaster {
-    constructor(
-        private readonly _toastr: ToastrService,
-        private readonly _router: Router,
-        private readonly _translateService: TranslateService,
-        private readonly _errorMessageService: ErrorMessageService
-    ) {
-        _router.events.pipe(filter(event => event instanceof NavigationStart)).subscribe(() => {
-            _toastr.clear();
-        });
-    }
-
-    error(message: string, options?: Partial<ErrorToasterOptions>) {
-        if (options?.error) message = this._errorMessageService.getMessage(options.error, message);
-        else message = this._translateService.instant(message, options?.params);
-
-        return this._toastr.error(message, options?.title, options);
-    }
-
-    info(message: string, options?: Partial<ToasterOptions>) {
-        return this._showToastNotification(message, NotificationType.INFO, options);
-    }
-
-    success(message: string, options?: Partial<ToasterOptions>) {
-        return this._showToastNotification(message, NotificationType.SUCCESS, options);
-    }
-
-    warning(message: string, options?: Partial<ToasterOptions>) {
-        return this._showToastNotification(message, NotificationType.WARNING, options);
-    }
-
-    private _showToastNotification(
-        message: string,
-        notificationType = NotificationType.INFO,
-        options?: Partial<ToasterOptions>
-    ): ActiveToast<unknown> {
-        message = this._translateService.instant(message, options?.params);
-
-        switch (notificationType) {
-            case NotificationType.SUCCESS:
-                return this._toastr.success(message, options?.title, options);
-            case NotificationType.WARNING:
-                return this._toastr.warning(message, options?.title, options);
-            case NotificationType.INFO:
-                return this._toastr.info(message, options?.title, options);
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts
index 08f4047e4..73145c855 100644
--- a/apps/red-ui/src/app/state/app-state.service.ts
+++ b/apps/red-ui/src/app/state/app-state.service.ts
@@ -9,7 +9,7 @@ import {
     ReanalysisControllerService,
     StatusControllerService
 } from '@redaction/red-ui-http';
-import { Toaster } from '@services/toaster.service';
+import { Toaster } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { Event, NavigationEnd, ResolveStart, Router } from '@angular/router';
 import { UserService } from '@services/user.service';

From 5bbe8ce80b38267b71bb25aa0c58b2ee53fa1bae Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Sat, 21 Aug 2021 00:42:58 +0300
Subject: [PATCH 03/11] refactor input with action

---
 ...ttributes-csv-import-dialog.component.html |  3 +-
 .../dictionary-listing-screen.component.html  |  3 +-
 ...r-attributes-listing-screen.component.html |  3 +-
 ...er-templates-listing-screen.component.html |  3 +-
 ...e-attributes-listing-screen.component.html |  3 +-
 .../user-listing-screen.component.html        |  3 +-
 .../comments/comments.component.html          |  4 +-
 .../components/comments/comments.component.ts | 45 +++++++---------
 .../file-workload/file-workload.component.ts  |  7 ++-
 .../page-exclusion.component.html             |  4 +-
 .../page-exclusion.component.ts               | 52 ++++++++-----------
 .../team-members-manager.component.html       |  4 +-
 .../team-members-manager.component.ts         | 19 +++----
 .../search-screen/search-screen.component.ts  |  5 +-
 .../annotation-icon.component.ts              |  2 -
 .../input-with-action.component.html          | 51 ++++++++----------
 .../input-with-action.component.ts            | 32 ++++++------
 .../page-header/page-header.component.html    |  3 +-
 apps/red-ui/src/app/services/user.service.ts  |  8 +--
 19 files changed, 103 insertions(+), 151 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 142aee418..9187425af 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -90,9 +90,8 @@
                 </div>
                 <div *ngIf="isSearchOpen" class="search-input-container">
                     <redaction-input-with-action
-                        [form]="searchService.searchForm"
+                        [(value)]="searchService.searchValue"
                         [placeholder]="'file-attributes-csv-import.search.placeholder' | translate"
-                        type="search"
                         width="full"
                     ></redaction-input-with-action>
                 </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 8443f12e3..05df1370f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -126,9 +126,8 @@
 
     <div class="attributes-actions-container">
         <redaction-input-with-action
-            [form]="searchService.searchForm"
+            [(value)]="searchService.searchValue"
             [placeholder]="'dictionary-listing.search' | translate"
-            type="search"
         ></redaction-input-with-action>
         <div class="actions">
             <iqser-icon-button
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index bb37051a7..6bdffa07a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -97,9 +97,8 @@
 
     <div class="attributes-actions-container">
         <redaction-input-with-action
-            [form]="searchService.searchForm"
+            [(value)]="searchService.searchValue"
             [placeholder]="'dossier-attributes-listing.search' | translate"
-            type="search"
         ></redaction-input-with-action>
 
         <iqser-icon-button
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index 782bdf851..2ab910de3 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -16,9 +16,8 @@
                 >
                     <div class="actions flex-1">
                         <redaction-input-with-action
-                            [form]="searchService.searchForm"
+                            [(value)]="searchService.searchValue"
                             [placeholder]="'dossier-templates-listing.search' | translate"
-                            type="search"
                         ></redaction-input-with-action>
 
                         <iqser-icon-button
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 7f708f4a9..9bceee5ed 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -107,9 +107,8 @@
 
     <div class="attributes-actions-container">
         <redaction-input-with-action
-            [form]="searchService.searchForm"
+            [(value)]="searchService.searchValue"
             [placeholder]="'file-attributes-listing.search' | translate"
-            type="search"
         ></redaction-input-with-action>
 
         <input #fileInput (change)="importCSV($event.target['files'])" accept=".csv" class="csv-input" type="file" />
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 83537ffec..61ecdb6a4 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -9,9 +9,8 @@
 
             <div class="actions">
                 <redaction-input-with-action
-                    [form]="searchService.searchForm"
+                    [(value)]="searchService.searchValue"
                     [placeholder]="'user-listing.search' | translate"
-                    type="search"
                 ></redaction-input-with-action>
                 <iqser-icon-button
                     (action)="openAddEditUserDialog($event)"
diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
index 2746e1b0e..d06af3143 100644
--- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
@@ -19,13 +19,11 @@
 </div>
 
 <redaction-input-with-action
-    (action)="addComment()"
+    (action)="addComment($event)"
     *ngIf="permissionsService.canAddComment()"
-    [form]="commentForm"
     [placeholder]="'comments.add-comment' | translate"
     autocomplete="off"
     icon="red:collapse"
-    type="action"
     width="full"
 ></redaction-input-with-action>
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts
index 006223e29..6b49b7fea 100644
--- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.ts
@@ -1,11 +1,8 @@
-import { ChangeDetectorRef, Component, HostBinding, Input } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { Component, HostBinding, Input } from '@angular/core';
 import { Comment } from '@redaction/red-ui-http';
 import { ManualAnnotationService } from '../../services/manual-annotation.service';
 import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { UserService } from '@services/user.service';
-import { AppStateService } from '@state/app-state.service';
-import { TranslateService } from '@ngx-translate/core';
 import { PermissionsService } from '@services/permissions.service';
 
 @Component({
@@ -15,49 +12,43 @@ import { PermissionsService } from '@services/permissions.service';
 })
 export class CommentsComponent {
     @Input() annotation: AnnotationWrapper;
-    commentForm: FormGroup;
     @HostBinding('class.hidden') private _hidden = true;
 
     constructor(
-        readonly translateService: TranslateService,
         readonly permissionsService: PermissionsService,
-        private readonly _changeDetectorRef: ChangeDetectorRef,
-        private readonly _appStateService: AppStateService,
-        private readonly _formBuilder: FormBuilder,
         private readonly _userService: UserService,
         private readonly _manualAnnotationService: ManualAnnotationService
-    ) {
-        this.commentForm = this._formBuilder.group({
-            value: ['']
-        });
-    }
+    ) {}
 
-    addComment(): void {
-        const value = this.commentForm.value.value;
-        if (value) {
-            this._manualAnnotationService.addComment(value, this.annotation.id).subscribe(commentResponse => {
+    addComment(value: string): void {
+        if (!value) return;
+        this._manualAnnotationService
+            .addComment(value, this.annotation.id)
+            .toPromise()
+            .then(commentResponse => {
                 this.annotation.comments.push({
                     text: value,
                     id: commentResponse.commentId,
                     user: this._userService.currentUser.id
                 });
             });
-            this.commentForm.reset();
-        }
     }
 
-    toggleExpandComments($event?: MouseEvent) {
+    toggleExpandComments($event?: MouseEvent): void {
         $event?.stopPropagation();
         this._hidden = !this._hidden;
     }
 
     deleteComment(comment: Comment): void {
-        this._manualAnnotationService.deleteComment(comment.id, this.annotation.id).subscribe(() => {
-            this.annotation.comments.splice(this.annotation.comments.indexOf(comment), 1);
-            if (!this.annotation.comments.length) {
-                this._hidden = true;
-            }
-        });
+        this._manualAnnotationService
+            .deleteComment(comment.id, this.annotation.id)
+            .toPromise()
+            .then(() => {
+                this.annotation.comments.splice(this.annotation.comments.indexOf(comment), 1);
+                if (!this.annotation.comments.length) {
+                    this._hidden = true;
+                }
+            });
     }
 
     getOwnerName(comment: Comment): string {
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
index 18aef5bbd..ed99585ad 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
@@ -26,6 +26,10 @@ import { map } from 'rxjs/operators';
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 
+interface Target extends EventTarget {
+    localName: string;
+}
+
 @Component({
     selector: 'redaction-file-workload',
     templateUrl: './file-workload.component.html',
@@ -155,6 +159,7 @@ export class FileWorkloadComponent {
     }
 
     annotationClicked(annotation: AnnotationWrapper, $event: MouseEvent): void {
+        if (($event.target as Target).localName === 'input') return;
         this.pagesPanelActive = false;
         this.logAnnotation(annotation);
         if (this.isSelected(annotation)) {
@@ -175,7 +180,7 @@ export class FileWorkloadComponent {
         if (
             !ALL_HOTKEY_ARRAY.includes($event.key) ||
             this.dialogRef?.getState() === MatDialogState.OPEN ||
-            ($event.target as any).localName === 'input'
+            ($event.target as Target).localName === 'input'
         ) {
             return;
         }
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
index 3d0bc5b17..1194b3321 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
@@ -1,12 +1,10 @@
 <div *ngIf="permissionsService.canExcludePages()" class="exclude-pages-input-container">
     <redaction-input-with-action
-        (action)="excludePagesRange()"
-        [form]="excludePagesForm"
+        (action)="excludePagesRange($event)"
         [hint]="'file-preview.tabs.exclude-pages.hint' | translate"
         [placeholder]="'file-preview.tabs.exclude-pages.input-placeholder' | translate"
         autocomplete="off"
         icon="red:check"
-        type="action"
         width="full"
     ></redaction-input-with-action>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
index c564e2b4c..5e5b9e1ed 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
@@ -1,11 +1,11 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
-import { FormBuilder, FormGroup } from '@angular/forms';
 import { PageRange, ReanalysisControllerService } from '@redaction/red-ui-http';
 import { Toaster } from '@iqser/common-ui';
 import { LoadingService } from '@services/loading.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
+import { InputWithActionComponent } from '@shared/components/input-with-action/input-with-action.component';
 
 @Component({
     selector: 'redaction-page-exclusion',
@@ -14,24 +14,19 @@ import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 })
 export class PageExclusionComponent implements OnChanges {
     @Input() fileStatus: FileStatusWrapper;
-    @Output() actionPerformed = new EventEmitter<string>();
+    @Output() readonly actionPerformed = new EventEmitter<string>();
 
-    excludePagesForm: FormGroup;
     excludedPagesRanges: PageRange[] = [];
+    @ViewChild(InputWithActionComponent) private readonly _inputComponent: InputWithActionComponent;
 
     constructor(
         readonly permissionsService: PermissionsService,
-        private readonly _formBuilder: FormBuilder,
         private readonly _reanalysisControllerService: ReanalysisControllerService,
         private readonly _toaster: Toaster,
         private readonly _loadingService: LoadingService
-    ) {
-        this.excludePagesForm = this._formBuilder.group({
-            value: ['']
-        });
-    }
+    ) {}
 
-    ngOnChanges() {
+    ngOnChanges(): void {
         const excludedPages = (this.fileStatus?.excludedPages || []).sort((p1, p2) => p1 - p2);
         this.excludedPagesRanges = excludedPages.reduce((ranges, page) => {
             if (!ranges.length) {
@@ -47,24 +42,21 @@ export class PageExclusionComponent implements OnChanges {
         }, []);
     }
 
-    async excludePagesRange() {
+    async excludePagesRange(value: string): Promise<void> {
         this._loadingService.start();
         try {
-            const pageRanges = this.excludePagesForm
-                .get('value')
-                .value.split(',')
-                .map(range => {
-                    const splitted = range.split('-');
-                    const startPage = parseInt(splitted[0], 10);
-                    const endPage = splitted.length > 1 ? parseInt(splitted[1], 10) : startPage;
-                    if (!startPage || !endPage) {
-                        throw new Error();
-                    }
-                    return {
-                        startPage,
-                        endPage
-                    };
-                });
+            const pageRanges = value.split(',').map(range => {
+                const splitted = range.split('-');
+                const startPage = parseInt(splitted[0], 10);
+                const endPage = splitted.length > 1 ? parseInt(splitted[1], 10) : startPage;
+                if (!startPage || !endPage) {
+                    throw new Error();
+                }
+                return {
+                    startPage,
+                    endPage
+                };
+            });
             await this._reanalysisControllerService
                 .excludePages(
                     {
@@ -74,7 +66,7 @@ export class PageExclusionComponent implements OnChanges {
                     this.fileStatus.fileId
                 )
                 .toPromise();
-            this.excludePagesForm.reset();
+            this._inputComponent.reset();
             this.actionPerformed.emit('exclude-pages');
         } catch (e) {
             this._toaster.error(_('file-preview.tabs.exclude-pages.error'));
@@ -82,7 +74,7 @@ export class PageExclusionComponent implements OnChanges {
         }
     }
 
-    async includePagesRange(range: PageRange) {
+    async includePagesRange(range: PageRange): Promise<void> {
         this._loadingService.start();
         await this._reanalysisControllerService
             .includePages(
@@ -93,7 +85,7 @@ export class PageExclusionComponent implements OnChanges {
                 this.fileStatus.fileId
             )
             .toPromise();
-        this.excludePagesForm.reset();
+        this._inputComponent.reset();
         this.actionPerformed.emit('exclude-pages');
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
index 8e0bd8f9e..9e573d614 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
@@ -36,11 +36,11 @@
     <pre *ngIf="selectedReviewersList.length === 0" [innerHTML]="'assign-dossier-owner.dialog.no-reviewers' | translate" class="info"></pre>
 
     <redaction-input-with-action
-        [form]="searchForm"
+        [(value)]="searchQuery"
+        (valueChange)="setMembersSelectOptions()"
         [placeholder]="'assign-dossier-owner.dialog.search' | translate"
         [width]="560"
         class="search-container"
-        type="search"
     ></redaction-input-with-action>
 
     <div class="members-list">
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
index 2c6e89a78..d71cf0bdd 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.ts
@@ -13,12 +13,12 @@ import { DossierWrapper } from '@state/model/dossier.wrapper';
 })
 export class TeamMembersManagerComponent implements OnInit {
     teamForm: FormGroup;
-    searchForm: FormGroup;
+    searchQuery = '';
 
     @Input() dossierWrapper: DossierWrapper;
 
-    @Output() save = new EventEmitter<Dossier>();
-    ownersSelectOptions: string[] = this.userService.managerUsers.map(m => m.id);
+    @Output() readonly save = new EventEmitter<Dossier>();
+    readonly ownersSelectOptions = this.userService.managerUsers.map(m => m.id);
     selectedReviewersList: string[] = [];
     membersSelectOptions: string[] = [];
     changed = false;
@@ -137,10 +137,9 @@ export class TeamMembersManagerComponent implements OnInit {
         this.selectedReviewersList = this.selectedMembersList.filter(m => this.selectedApproversList.indexOf(m) === -1);
     }
 
-    private _setMembersSelectOptions() {
-        const searchQuery = this.searchForm.get('query').value;
+    setMembersSelectOptions(): void {
         this.membersSelectOptions = this.userService.eligibleUsers
-            .filter(user => this.userService.getNameForId(user.id).toLowerCase().includes(searchQuery.toLowerCase()))
+            .filter(user => this.userService.getNameForId(user.id).toLowerCase().includes(this.searchQuery.toLowerCase()))
             .filter(user => this.selectedOwnerId !== user.id)
             .map(user => user.id);
     }
@@ -151,9 +150,6 @@ export class TeamMembersManagerComponent implements OnInit {
             approvers: [[...this.dossierWrapper?.approverIds]],
             members: [[...this.dossierWrapper?.memberIds]]
         });
-        this.searchForm = this._formBuilder.group({
-            query: ['']
-        });
         this.teamForm.get('owner').valueChanges.subscribe(owner => {
             if (!this.isApprover(owner)) {
                 this.toggleApprover(owner);
@@ -161,15 +157,12 @@ export class TeamMembersManagerComponent implements OnInit {
             // If it is an approver, it is already a member, no need to check
             this._updateLists();
         });
-        this.searchForm.get('query').valueChanges.subscribe(() => {
-            this._setMembersSelectOptions();
-        });
         this._updateLists();
     }
 
     private _updateLists() {
         this._setSelectedReviewersList();
-        this._setMembersSelectOptions();
+        this.setMembersSelectOptions();
         this._updateChanged();
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
index b0c4a2b50..1651d0392 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
@@ -85,10 +85,7 @@ export class SearchScreenComponent extends ListingComponent<ListItem> implements
             )
             .subscribe(mappedValue => this._updateValues(mappedValue));
 
-        this.addSubscription = this.searchService.searchForm
-            .get('query')
-            .valueChanges.pipe(debounceTime(300))
-            .subscribe(value => this.updateNavigation(value));
+        this.addSubscription = this.searchService.valueChanges$.pipe(debounceTime(300)).subscribe(value => this.updateNavigation(value));
 
         this.addSubscription = this.filterService.filterGroups$.pipe(skip(1)).subscribe(group => {
             const dossierIds = group[0].filters.filter(v => v.checked).map(v => v.key);
diff --git a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts
index b66f0a1be..f35c4566e 100644
--- a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts
@@ -14,8 +14,6 @@ export class AnnotationIconComponent implements OnChanges {
 
     @ViewChild('icon', { static: true }) icon: ElementRef;
 
-    constructor() {}
-
     get isHint() {
         return this.type === 'circle' || this.dictType?.type === 'hint';
     }
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
index 55f148d32..f05829b60 100644
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
@@ -1,34 +1,25 @@
-<form [autocomplete]="autocomplete" [formGroup]="form">
-    <div [style.max-width]="computedWidth" [style.width]="computedWidth" class="red-input-group">
-        <input
-            [formControlName]="formControlName"
-            [name]="formControlName"
-            [placeholder]="placeholder"
-            class="with-icon mt-0"
-            type="text"
-        />
+<div [style.max-width]="computedWidth" [style.width]="computedWidth" class="red-input-group">
+    <input
+        [(ngModel)]="value"
+        (ngModelChange)="valueChange.emit($event)"
+        [autocomplete]="autocomplete"
+        [placeholder]="placeholder"
+        class="with-icon mt-0"
+        type="text"
+    />
 
-        <span *ngIf="hint" class="hint">{{ hint }}</span>
+    <span *ngIf="hint" class="hint">{{ hint }}</span>
 
-        <!--        Search-->
-        <mat-icon *ngIf="type === 'search' && !hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
+    <mat-icon *ngIf="isSearch && !hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
 
-        <iqser-circle-button
-            (action)="clearContent()"
-            *ngIf="type === 'search' && hasContent"
-            [disabled]="form.invalid"
-            [size]="25"
-            icon="red:close"
-        ></iqser-circle-button>
+    <iqser-circle-button (action)="reset()" *ngIf="isSearch && hasContent" [size]="25" icon="red:close"></iqser-circle-button>
 
-        <!--        Submit-->
-        <iqser-circle-button
-            (action)="executeAction($event)"
-            *ngIf="type === 'action'"
-            [disabled]="!hasContent"
-            [icon]="icon"
-            [isSubmit]="true"
-            [size]="25"
-        ></iqser-circle-button>
-    </div>
-</form>
+    <iqser-circle-button
+        (action)="executeAction($event)"
+        *ngIf="!isSearch"
+        [disabled]="!hasContent"
+        [icon]="icon"
+        [isSubmit]="true"
+        [size]="25"
+    ></iqser-circle-button>
+</div>
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts
index cc00278b3..1193c4310 100644
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormGroup } from '@angular/forms';
 
 @Component({
     selector: 'redaction-input-with-action',
@@ -7,35 +6,36 @@ import { FormGroup } from '@angular/forms';
     styleUrls: ['./input-with-action.component.scss']
 })
 export class InputWithActionComponent {
-    @Input() form: FormGroup;
     @Input() placeholder: string;
     @Input() hint: string;
     @Input() width: number | 'full' = 250;
-    @Input() type: 'search' | 'action';
     @Input() icon: string;
     @Input() autocomplete: 'on' | 'off' = 'on';
-    @Output() action = new EventEmitter<any>();
+    @Input() value = '';
+    @Output() readonly action = new EventEmitter<string>();
+    @Output() readonly valueChange = new EventEmitter<string>();
 
-    get formControlName(): 'query' | 'value' {
-        return this.type === 'search' ? 'query' : 'value';
+    get hasContent(): boolean {
+        return !!this.value.length;
     }
 
-    get hasContent() {
-        return !!this.form.get(this.formControlName).value?.length;
-    }
-
-    get computedWidth() {
+    get computedWidth(): string {
         return this.width === 'full' ? '100%' : `${this.width}px`;
     }
 
-    clearContent() {
-        this.form.patchValue({ query: '' }, { emitEvent: true });
+    reset(): void {
+        this.value = '';
     }
 
-    executeAction($event?: MouseEvent) {
-        $event?.stopPropagation();
+    get isSearch(): boolean {
+        return this.action.observers.length === 0;
+    }
+
+    executeAction($event: MouseEvent): void {
+        $event.stopPropagation();
+
         if (this.hasContent) {
-            this.action.emit();
+            this.action.emit(this.value);
         }
     }
 }
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index 486a71672..b041f0f17 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -53,11 +53,10 @@
 
 <ng-template #searchBar>
     <redaction-input-with-action
+        [(value)]="searchService.searchValue"
         *ngIf="searchPlaceholder && searchService"
-        [form]="searchService.searchForm"
         [placeholder]="searchPlaceholder"
         [width]="searchWidth"
         [class.mr-8]="searchPosition === searchPositions.beforeFilters"
-        type="search"
     ></redaction-input-with-action>
 </ng-template>
diff --git a/apps/red-ui/src/app/services/user.service.ts b/apps/red-ui/src/app/services/user.service.ts
index 8ab66e8c5..875d228e7 100644
--- a/apps/red-ui/src/app/services/user.service.ts
+++ b/apps/red-ui/src/app/services/user.service.ts
@@ -16,7 +16,7 @@ export interface ProfileModel {
 }
 
 export class UserWrapper {
-    constructor(private readonly _user: KeycloakProfile | User, public roles: string[], public id: string) {}
+    constructor(private readonly _user: KeycloakProfile | User, public roles: string[], readonly id: string) {}
 
     email = this._user.email;
     username = this._user.username || this.email;
@@ -106,11 +106,7 @@ export class UserService {
 
     getNameForId(userId: string): string | undefined {
         const user = this.getUserById(userId);
-        return user ? this.getName(user) : undefined;
-    }
-
-    getName({ firstName, lastName, username }: UserWrapper) {
-        return firstName && lastName ? `${firstName} ${lastName}` : username;
+        return user ? user.name : undefined;
     }
 
     isManager(user: UserWrapper = this._currentUser): boolean {

From 7bd1e2a8e81660f03f006c69e9898959023fd82d Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Sat, 21 Aug 2021 15:29:20 +0300
Subject: [PATCH 04/11] move input with action to common lib, update icons
 namespace

---
 .../base-screen/base-screen.component.html    |   2 +-
 .../help-mode-dialog.component.html           |   2 +-
 .../help-mode/help-mode.component.html        |   6 +-
 .../spotlight-search.component.html           |   4 +-
 .../app/components/toast/toast.component.html |   2 +-
 .../user-profile-screen.component.html        |   8 +-
 .../dossier-template-actions.component.html   |   2 +-
 .../add-edit-dictionary-dialog.component.html |  20 +-
 .../add-edit-dictionary-dialog.component.scss |   2 +-
 ...it-dossier-attribute-dialog.component.html |   8 +-
 ...dit-dossier-template-dialog.component.html |  10 +-
 ...dit-dossier-template-dialog.component.scss |   2 +-
 ...-edit-file-attribute-dialog.component.html |  12 +-
 .../add-edit-user-dialog.component.html       |   2 +-
 .../reset-password.component.html             |   2 +-
 .../user-details/user-details.component.html  |   8 +-
 ...elete-file-attribute-dialog.component.html |   4 +-
 ...confirm-delete-users-dialog.component.html |   4 +-
 .../edit-color-dialog.component.html          |   4 +-
 .../edit-color-dialog.component.scss          |   2 +-
 .../active-fields-listing.component.html      |   2 +-
 ...ttributes-csv-import-dialog.component.html |  16 +-
 ...ttributes-csv-import-dialog.component.scss |   2 +-
 .../smtp-auth-dialog.component.html           |   6 +-
 .../screens/audit/audit-screen.component.html |  10 +-
 .../screens/audit/audit-screen.component.scss |   2 +-
 .../default-colors-screen.component.html      |   4 +-
 .../dictionary-listing-screen.component.html  |   8 +-
 .../dictionary-overview-screen.component.html |   4 +-
 .../digital-signature-screen.component.html   |  12 +-
 ...r-attributes-listing-screen.component.html |   8 +-
 ...er-templates-listing-screen.component.html |   4 +-
 ...e-attributes-listing-screen.component.html |   8 +-
 .../general-config-screen.component.html      |  24 +-
 .../reports/reports-screen.component.html     |   2 +-
 .../screens/rules/rules-screen.component.html |   4 +-
 .../user-listing-screen.component.html        |   8 +-
 .../user-listing-screen.component.scss        |   2 +-
 .../watermark/watermark-screen.component.html |  16 +-
 .../annotation-actions.component.html         |   8 +-
 .../comments/comments.component.html          |   4 +-
 .../comments/comments.component.scss          |   2 +-
 .../document-info.component.html              |   4 +-
 .../dossier-details.component.html            |   2 +-
 .../dossier-listing-actions.component.html    |   2 +-
 .../file-actions/file-actions.component.html  |   2 +-
 .../file-workload.component.html              |   8 +-
 .../file-workload.component.scss              |   2 +-
 .../page-exclusion.component.html             |   6 +-
 .../page-exclusion.component.ts               |   3 +-
 .../team-members-manager.component.html       |   8 +-
 .../team-members/team-members.component.html  |   2 +-
 .../add-dossier-dialog.component.html         |  10 +-
 ...gn-reviewer-approver-dialog.component.html |   4 +-
 .../change-legal-basis-dialog.component.html  |   8 +-
 .../document-info-dialog.component.html       |   4 +-
 .../edit-dossier-attributes.component.html    |   4 +-
 .../edit-dossier-dialog.component.html        |   2 +-
 .../edit-dossier-general-info.component.html  |   8 +-
 .../force-redaction-dialog.component.html     |   8 +-
 .../manual-annotation-dialog.component.html   |  14 +-
 .../recategorize-image-dialog.component.html  |   6 +-
 .../remove-annotations-dialog.component.html  |   4 +-
 .../dossier-overview-screen.component.ts      |  13 +-
 .../file-preview-screen.component.html        |   4 +-
 .../search-screen.component.html              |   2 +-
 .../src/app/modules/icons/icons.module.ts     |   4 -
 .../assign-user-dropdown.component.html       |   6 +-
 .../assign-user-dropdown.component.scss       |   2 +-
 .../dictionary-manager.component.html         |  12 +-
 .../dictionary-manager.component.scss         |   4 +-
 .../input-with-action.component.html          |  25 --
 .../input-with-action.component.scss          |  14 -
 .../input-with-action.component.ts            |  41 ---
 .../page-header/page-header.component.html    |   6 +-
 .../confirmation-dialog.component.html        |   4 +-
 .../src/app/modules/shared/shared.module.ts   |   2 -
 .../upload-status-overlay.component.html      |   4 +-
 .../src/assets/icons/general/search.svg       |   9 -
 apps/red-ui/src/assets/styles/red-input.scss  | 267 ------------------
 apps/red-ui/src/assets/styles/red-mixins.scss |  29 +-
 .../src/assets/styles/red-page-layout.scss    |   6 +-
 apps/red-ui/src/assets/styles/red-theme.scss  |   1 -
 83 files changed, 224 insertions(+), 604 deletions(-)
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
 delete mode 100644 apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts
 delete mode 100644 apps/red-ui/src/assets/icons/general/search.svg
 delete mode 100644 apps/red-ui/src/assets/styles/red-input.scss

diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index bbe17b2b4..6e70aca63 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -70,7 +70,7 @@
                 <iqser-circle-button
                     (action)="openSpotlightSearch()"
                     *ngIf="(isSearchScreen$ | async) === false"
-                    [icon]="'red:search'"
+                    [icon]="'iqser:search'"
                     [tooltip]="'search.header-label' | translate"
                     tooltipPosition="below"
                     redactionHelpMode="search"
diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html
index 58470ee76..42884bbd3 100644
--- a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html
+++ b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html
@@ -4,5 +4,5 @@
         <img src="assets/illustrations/illustration.gif" alt="" width="335" />
         <p class="pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
     </div>
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.html b/apps/red-ui/src/app/components/help-mode/help-mode.component.html
index cc3de9335..2e86423f1 100644
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.html
+++ b/apps/red-ui/src/app/components/help-mode/help-mode.component.html
@@ -10,7 +10,11 @@
         </a>
         <div class="close">
             (esc)
-            <iqser-circle-button class="dialog-close" icon="red:close" (click)="helpModeService.deactivateHelpMode()"></iqser-circle-button>
+            <iqser-circle-button
+                class="dialog-close"
+                icon="iqser:close"
+                (click)="helpModeService.deactivateHelpMode()"
+            ></iqser-circle-button>
         </div>
     </div>
 </div>
diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
index 7eeab5d8c..91c6c3bb3 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
@@ -3,9 +3,9 @@
         <input id="query" type="text" formControlName="query" autocomplete="off" class="spotlight-row" [placeholder]="data.placeholder" />
 
         <ng-container *ngIf="showActions$ | async as showActions">
-            <mat-icon class="mr-34" *ngIf="!showActions" [svgIcon]="'red:search'"></mat-icon>
+            <mat-icon class="mr-34" *ngIf="!showActions" [svgIcon]="'iqser:search'"></mat-icon>
 
-            <iqser-circle-button *ngIf="showActions" class="mr-24" (action)="dialogRef.close()" icon="red:close"></iqser-circle-button>
+            <iqser-circle-button *ngIf="showActions" class="mr-24" (action)="dialogRef.close()" icon="iqser:close"></iqser-circle-button>
         </ng-container>
     </div>
 
diff --git a/apps/red-ui/src/app/components/toast/toast.component.html b/apps/red-ui/src/app/components/toast/toast.component.html
index cfffe69b4..3006bdf3c 100644
--- a/apps/red-ui/src/app/components/toast/toast.component.html
+++ b/apps/red-ui/src/app/components/toast/toast.component.html
@@ -15,6 +15,6 @@
 </div>
 <div class="text-right">
     <a (click)="remove()" *ngIf="options.closeButton" class="toast-close-button">
-        <mat-icon svgIcon="red:close"></mat-icon>
+        <mat-icon svgIcon="iqser:close"></mat-icon>
     </a>
 </div>
diff --git a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
index 779d9a35d..a2b00defe 100644
--- a/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
+++ b/apps/red-ui/src/app/components/user-profile/user-profile-screen.component.html
@@ -8,21 +8,21 @@
             <form (submit)="save()" [formGroup]="formGroup">
                 <div class="dialog-content">
                     <div class="dialog-content-left">
-                        <div class="red-input-group required">
+                        <div class="iqser-input-group required">
                             <label translate="user-profile.form.email"></label>
                             <input formControlName="email" name="email" type="email" />
                         </div>
 
-                        <div class="red-input-group">
+                        <div class="iqser-input-group">
                             <label translate="user-profile.form.first-name"></label>
                             <input formControlName="firstName" name="firstName" type="text" />
                         </div>
 
-                        <div class="red-input-group">
+                        <div class="iqser-input-group">
                             <label translate="user-profile.form.last-name"></label>
                             <input formControlName="lastName" name="lastName" type="text" />
                         </div>
-                        <div class="red-input-group">
+                        <div class="iqser-input-group">
                             <label translate="top-bar.navigation-items.my-account.children.language.label"></label>
                             <mat-select formControlName="language">
                                 <mat-option *ngFor="let language of languages" [value]="language">
diff --git a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
index 18ad21167..02ce08a65 100644
--- a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
@@ -11,7 +11,7 @@
         (action)="openEditDossierTemplateDialog($event)"
         *ngIf="currentUser.isAdmin"
         [tooltip]="'dossier-templates-listing.action.edit' | translate"
-        icon="red:edit"
+        icon="iqser:edit"
         [type]="circleButtonTypes.dark"
     ></iqser-circle-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
index d8f2bb043..be329fdb1 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
@@ -5,18 +5,18 @@
 
     <form (submit)="saveDictionary()" [formGroup]="dictionaryForm">
         <div class="dialog-content">
-            <div class="red-input-group mb-14">
+            <div class="iqser-input-group mb-14">
                 <label translate="add-edit-dictionary.form.technical-name"></label>
                 <div class="technical-name">{{ dictionary?.type || technicalName || '-' }}</div>
             </div>
 
-            <div *ngIf="!!dictionary" class="red-input-group mb-14">
+            <div *ngIf="!!dictionary" class="iqser-input-group mb-14">
                 <label translate="add-edit-dictionary.form.name"></label>
                 {{ dictionary.label }}
             </div>
 
             <div class="first-row">
-                <div *ngIf="!dictionary" class="red-input-group required">
+                <div *ngIf="!dictionary" class="iqser-input-group required">
                     <label translate="add-edit-dictionary.form.name"></label>
                     <input
                         [placeholder]="'add-edit-dictionary.form.name-placeholder' | translate"
@@ -27,7 +27,7 @@
                     <span class="hint" translate="add-edit-dictionary.form.name-hint"></span>
                 </div>
 
-                <div class="red-input-group required w-75">
+                <div class="iqser-input-group required w-75">
                     <label translate="add-edit-dictionary.form.rank"></label>
                     <input
                         [placeholder]="'add-edit-dictionary.form.rank-placeholder' | translate"
@@ -37,7 +37,7 @@
                     />
                 </div>
 
-                <div class="red-input-group required">
+                <div class="iqser-input-group required">
                     <label translate="add-edit-dictionary.form.color"></label>
                     <input
                         [placeholder]="'add-edit-dictionary.form.color-placeholder' | translate"
@@ -58,7 +58,7 @@
                 </div>
             </div>
 
-            <div class="red-input-group w-450">
+            <div class="iqser-input-group w-450">
                 <label translate="add-edit-dictionary.form.description"></label>
                 <textarea
                     [placeholder]="'add-edit-dictionary.form.description-placeholder' | translate"
@@ -70,7 +70,7 @@
                 ></textarea>
             </div>
 
-            <div class="red-input-group slider-row">
+            <div class="iqser-input-group slider-row">
                 <mat-button-toggle-group appearance="legacy" formControlName="hint" name="hint">
                     <mat-button-toggle [value]="false">
                         {{ 'add-edit-dictionary.form.redaction' | translate }}
@@ -81,13 +81,13 @@
                 </mat-button-toggle-group>
             </div>
 
-            <div class="red-input-group">
+            <div class="iqser-input-group">
                 <mat-checkbox color="primary" formControlName="caseSensitive" name="caseSensitive">
                     {{ 'add-edit-dictionary.form.case-sensitive' | translate }}
                 </mat-checkbox>
             </div>
 
-            <div class="red-input-group">
+            <div class="iqser-input-group">
                 <mat-checkbox color="primary" formControlName="addToDictionaryAction" name="addToDictionaryAction">
                     {{ 'add-edit-dictionary.form.add-to-dictionary-action' | translate }}
                 </mat-checkbox>
@@ -101,5 +101,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
index b1dd35aef..57077da4b 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
@@ -7,7 +7,7 @@
         margin-right: 16px;
     }
 
-    .red-input-group {
+    .iqser-input-group {
         margin-top: 0;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
index 5c2678992..cfd34b1a0 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
@@ -10,7 +10,7 @@
 
     <form (submit)="saveFileAttribute()" [formGroup]="dossierAttributeForm">
         <div class="dialog-content">
-            <div class="red-input-group required w-300">
+            <div class="iqser-input-group required w-300">
                 <label translate="add-edit-dossier-attribute.form.label"></label>
                 <input
                     [placeholder]="'add-edit-dossier-attribute.form.label-placeholder' | translate"
@@ -20,12 +20,12 @@
                 />
             </div>
 
-            <div *ngIf="!!dossierAttribute" class="red-input-group required w-300">
+            <div *ngIf="!!dossierAttribute" class="iqser-input-group required w-300">
                 <label translate="add-edit-dossier-attribute.form.placeholder"></label>
                 <input formControlName="placeholder" name="placeholder" type="text" />
             </div>
 
-            <div class="red-input-group w-300">
+            <div class="iqser-input-group w-300">
                 <label translate="add-edit-dossier-attribute.form.type"></label>
                 <mat-select formControlName="type">
                     <mat-option *ngFor="let type of typeOptions" [value]="type">
@@ -41,5 +41,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
index 7b9674c1f..17ac0a2f8 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
@@ -10,7 +10,7 @@
 
     <form (submit)="saveDossierTemplate()" [formGroup]="dossierTemplateForm">
         <div class="dialog-content">
-            <div class="red-input-group required w-300">
+            <div class="iqser-input-group required w-300">
                 <label translate="add-edit-dossier-template.form.name"></label>
                 <input
                     [placeholder]="'add-edit-dossier-template.form.name-placeholder' | translate"
@@ -20,7 +20,7 @@
                 />
             </div>
 
-            <div class="red-input-group w-400">
+            <div class="iqser-input-group w-400">
                 <label translate="add-edit-dossier-template.form.description"></label>
                 <textarea
                     [placeholder]="'add-edit-dossier-template.form.description-placeholder' | translate"
@@ -48,7 +48,7 @@
                 </div>
 
                 <div>
-                    <div class="red-input-group datepicker-wrapper">
+                    <div class="iqser-input-group datepicker-wrapper">
                         <ng-container *ngIf="hasValidFrom">
                             <input [matDatepicker]="fromPicker" formControlName="validFrom" placeholder="dd/mm/yy" />
                             <mat-datepicker-toggle [for]="fromPicker" matSuffix>
@@ -58,7 +58,7 @@
                         </ng-container>
                     </div>
 
-                    <div class="red-input-group datepicker-wrapper">
+                    <div class="iqser-input-group datepicker-wrapper">
                         <ng-container *ngIf="hasValidTo">
                             <input [matDatepicker]="toPicker" formControlName="validTo" placeholder="dd/mm/yy" />
                             <mat-datepicker-toggle [for]="toPicker" matSuffix>
@@ -110,7 +110,7 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
 
 <ng-template #reportTemplateOptionTemplate let-option="option">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.scss
index b5fcaf6e8..397fc2fb3 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.scss
@@ -15,7 +15,7 @@
             min-height: 42px;
         }
 
-        .red-input-group {
+        .iqser-input-group {
             min-height: 42px;
             justify-content: center;
         }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
index 38076491c..25292811a 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
@@ -10,7 +10,7 @@
 
     <form (submit)="saveFileAttribute()" [formGroup]="fileAttributeForm">
         <div class="dialog-content">
-            <div class="red-input-group required w-300">
+            <div class="iqser-input-group required w-300">
                 <label translate="add-edit-file-attribute.form.name"></label>
                 <input
                     [placeholder]="'add-edit-file-attribute.form.name-placeholder' | translate"
@@ -20,7 +20,7 @@
                 />
             </div>
 
-            <div class="red-input-group required w-300">
+            <div class="iqser-input-group required w-300">
                 <label translate="add-edit-file-attribute.form.column-header"></label>
                 <input
                     [placeholder]="'add-edit-file-attribute.form.column-header-placeholder' | translate"
@@ -30,7 +30,7 @@
                 />
             </div>
 
-            <div class="red-input-group w-300 required">
+            <div class="iqser-input-group w-300 required">
                 <label translate="add-edit-file-attribute.form.type"></label>
                 <mat-select formControlName="type">
                     <mat-option *ngFor="let type of typeOptions" [value]="type">
@@ -40,13 +40,13 @@
             </div>
 
             <div class="options-wrapper">
-                <div class="red-input-group">
+                <div class="iqser-input-group">
                     <mat-slide-toggle color="primary" formControlName="readonly">{{
                         'add-edit-file-attribute.form.read-only' | translate
                     }}</mat-slide-toggle>
                 </div>
 
-                <div class="red-input-group mt-0">
+                <div class="iqser-input-group mt-0">
                     <mat-checkbox color="primary" formControlName="primaryAttribute" name="primaryAttribute">
                         {{ 'add-edit-file-attribute.form.primary' | translate }}
                     </mat-checkbox>
@@ -72,5 +72,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
index fe02bd8db..1f17a0d25 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
@@ -13,5 +13,5 @@
         [user]="user"
     ></redaction-reset-password>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.html
index 18392a3fd..1cfcc107f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.html
@@ -2,7 +2,7 @@
 
 <form (submit)="save()" [formGroup]="passwordForm">
     <div class="dialog-content">
-        <div class="red-input-group required w-300">
+        <div class="iqser-input-group required w-300">
             <label translate="reset-password-dialog.form.password"></label>
             <input formControlName="temporaryPassword" name="temporaryPassword" type="password" />
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
index d7bb85d6b..9f5acbafc 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
@@ -8,22 +8,22 @@
 
 <form (submit)="save()" [formGroup]="userForm">
     <div class="dialog-content">
-        <div class="red-input-group required w-300">
+        <div class="iqser-input-group required w-300">
             <label translate="add-edit-user.form.first-name"></label>
             <input formControlName="firstName" name="firstName" type="text" />
         </div>
 
-        <div class="red-input-group required w-300">
+        <div class="iqser-input-group required w-300">
             <label translate="add-edit-user.form.last-name"></label>
             <input formControlName="lastName" name="lastName" type="text" />
         </div>
 
-        <div class="red-input-group required w-300">
+        <div class="iqser-input-group required w-300">
             <label translate="add-edit-user.form.email"></label>
             <input formControlName="email" name="email" type="email" />
         </div>
 
-        <div class="red-input-group">
+        <div class="iqser-input-group">
             <label translate="add-edit-user.form.role"></label>
             <div class="roles-wrapper">
                 <mat-checkbox *ngFor="let role of ROLES" [formControlName]="role" color="primary">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
index f690a3eb1..d90c5f201 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
@@ -13,7 +13,7 @@
     <div *ngIf="showToast" class="inline-dialog-toast toast-error">
         <div translate="confirm-delete-file-attribute.toast-error"></div>
         <a (click)="showToast = false" class="toast-close-button">
-            <mat-icon svgIcon="red:close"></mat-icon>
+            <mat-icon svgIcon="iqser:close"></mat-icon>
         </a>
     </div>
 
@@ -41,5 +41,5 @@
             class="all-caps-label cancel"
         ></div>
     </div>
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
index 2344dc113..401771a9c 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
@@ -4,7 +4,7 @@
     <div *ngIf="showToast" class="inline-dialog-toast toast-error">
         <div translate="confirm-delete-users.toast-error"></div>
         <a (click)="showToast = false" class="toast-close-button">
-            <mat-icon svgIcon="red:close"></mat-icon>
+            <mat-icon svgIcon="iqser:close"></mat-icon>
         </a>
     </div>
 
@@ -39,5 +39,5 @@
             class="all-caps-label cancel"
         ></div>
     </div>
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
index 57dea97ff..db9d58b7f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
@@ -3,7 +3,7 @@
 
     <form (submit)="saveColors()" [formGroup]="colorForm">
         <div class="dialog-content">
-            <div class="red-input-group required">
+            <div class="iqser-input-group required">
                 <label translate="edit-color-dialog.form.color"></label>
                 <input
                     [placeholder]="'edit-color-dialog.form.color-placeholder' | translate"
@@ -34,5 +34,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.scss
index 06e7fa1ed..a18477ff8 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.scss
@@ -1,3 +1,3 @@
-.red-input-group {
+.iqser-input-group {
     width: fit-content;
 }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index f9eb9bda6..6da51b99b 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -36,7 +36,7 @@
         </div>
 
         <div>
-            <div class="red-input-group">
+            <div class="iqser-input-group">
                 <mat-form-field class="no-label">
                     <mat-select [(ngModel)]="field.type">
                         <mat-option *ngFor="let type of typeOptions" [value]="type">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 9187425af..1fbc14715 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -11,7 +11,7 @@
             </div>
             <div class="right">
                 <form (submit)="changedParseConfig && readFile()" [formGroup]="baseConfigForm">
-                    <div class="red-input-group required w-250">
+                    <div class="iqser-input-group required w-250">
                         <mat-form-field floatLabel="always">
                             <mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
                             <input
@@ -29,7 +29,7 @@
                         </mat-form-field>
                     </div>
 
-                    <div class="red-input-group required w-110">
+                    <div class="iqser-input-group required w-110">
                         <label translate="file-attributes-csv-import.delimiter"></label>
                         <input
                             [placeholder]="'file-attributes-csv-import.delimiter-placeholder' | translate"
@@ -39,7 +39,7 @@
                         />
                     </div>
 
-                    <div class="red-input-group required w-160">
+                    <div class="iqser-input-group required w-160">
                         <label translate="file-attributes-csv-import.encoding"></label>
                         <input
                             [placeholder]="'file-attributes-csv-import.encoding-placeholder' | translate"
@@ -52,7 +52,7 @@
                         (action)="readFile()"
                         *ngIf="changedParseConfig"
                         [tooltip]="'file-attributes-csv-import.parse-csv' | translate"
-                        icon="red:check"
+                        icon="iqser:check"
                     ></iqser-circle-button>
                 </form>
             </div>
@@ -72,7 +72,7 @@
                         <iqser-circle-button
                             (click)="isSearchOpen = !isSearchOpen"
                             [attr.aria-expanded]="isSearchOpen"
-                            icon="red:search"
+                            icon="iqser:search"
                         ></iqser-circle-button>
                         <div class="quick-activation">
                             <span
@@ -89,11 +89,11 @@
                     </div>
                 </div>
                 <div *ngIf="isSearchOpen" class="search-input-container">
-                    <redaction-input-with-action
+                    <iqser-input-with-action
                         [(value)]="searchService.searchValue"
                         [placeholder]="'file-attributes-csv-import.search.placeholder' | translate"
                         width="full"
-                    ></redaction-input-with-action>
+                    ></iqser-input-with-action>
                 </div>
                 <div [class.search-open]="isSearchOpen" class="csv-header-pill-content">
                     <div
@@ -161,5 +161,5 @@
         </div>
     </div>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index e98a5567c..e764e0db1 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -33,7 +33,7 @@
         align-items: flex-end;
         padding-left: 16px;
 
-        .red-input-group {
+        .iqser-input-group {
             margin: 0 8px;
         }
 
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
index cc8b9ed6e..c7313bc5c 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
@@ -3,7 +3,7 @@
 
     <form (submit)="save()" [formGroup]="authForm">
         <div class="dialog-content">
-            <div class="red-input-group required w-300">
+            <div class="iqser-input-group required w-300">
                 <label translate="smtp-auth-config.form.username"></label>
                 <input
                     [placeholder]="'smtp-auth-config.form.username-placeholder' | translate"
@@ -13,7 +13,7 @@
                 />
             </div>
 
-            <div class="red-input-group required w-300">
+            <div class="iqser-input-group required w-300">
                 <label translate="smtp-auth-config.form.password"></label>
                 <input formControlName="password" name="password" type="password" />
             </div>
@@ -27,5 +27,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index 1bff06812..60cadffa8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -12,7 +12,7 @@
                     *ngIf="currentUser.isUser"
                     [tooltip]="'common.close' | translate"
                     class="ml-6"
-                    icon="red:close"
+                    icon="iqser:close"
                     redactionNavigateLastDossiersScreen
                     tooltipPosition="below"
                 ></iqser-circle-button>
@@ -31,7 +31,7 @@
                         ></redaction-pagination>
                         <div class="separator">·</div>
                         <form [formGroup]="filterForm">
-                            <div class="red-input-group w-150 mr-20">
+                            <div class="iqser-input-group w-150 mr-20">
                                 <mat-form-field class="no-label">
                                     <mat-select formControlName="category">
                                         <mat-option *ngFor="let category of categories" [value]="category">
@@ -40,7 +40,7 @@
                                     </mat-select>
                                 </mat-form-field>
                             </div>
-                            <div class="red-input-group w-150">
+                            <div class="iqser-input-group w-150">
                                 <mat-form-field class="no-label">
                                     <mat-select formControlName="userId">
                                         <mat-select-trigger>
@@ -65,7 +65,7 @@
                                 </mat-form-field>
                             </div>
                             <div class="separator">·</div>
-                            <div class="red-input-group datepicker-wrapper mr-20">
+                            <div class="iqser-input-group datepicker-wrapper mr-20">
                                 <input [matDatepicker]="fromPicker" formControlName="from" placeholder="dd/mm/yy" />
                                 <mat-datepicker-toggle [for]="fromPicker" matSuffix>
                                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
@@ -75,7 +75,7 @@
 
                             <div class="mr-20" translate="audit-screen.to"></div>
 
-                            <div class="red-input-group datepicker-wrapper">
+                            <div class="iqser-input-group datepicker-wrapper">
                                 <input [matDatepicker]="toPicker" formControlName="to" placeholder="dd/mm/yy" />
                                 <mat-datepicker-toggle [for]="toPicker" matSuffix>
                                     <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss
index ed783d9a8..7d1dd7e64 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss
@@ -8,7 +8,7 @@
         display: flex;
         align-items: center;
 
-        .red-input-group {
+        .iqser-input-group {
             margin-top: 0 !important;
         }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
index a300250d9..3a1c8dced 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
@@ -42,7 +42,7 @@
                                 (action)="openEditColorDialog($event, color)"
                                 *ngIf="currentUser.isAdmin"
                                 [tooltip]="'default-colors-screen.action.edit' | translate"
-                                icon="red:edit"
+                                icon="iqser:edit"
                                 [type]="circleButtonTypes.dark"
                             ></iqser-circle-button>
                         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index 05df1370f..18a0b5f1b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
@@ -91,7 +91,7 @@
                             <iqser-circle-button
                                 (action)="openAddEditDictionaryDialog($event, dict)"
                                 [tooltip]="'dictionary-listing.action.edit' | translate"
-                                icon="red:edit"
+                                icon="iqser:edit"
                                 [type]="circleButtonTypes.dark"
                             ></iqser-circle-button>
                         </div>
@@ -125,10 +125,10 @@
     ></iqser-circle-button>
 
     <div class="attributes-actions-container">
-        <redaction-input-with-action
+        <iqser-input-with-action
             [(value)]="searchService.searchValue"
             [placeholder]="'dictionary-listing.search' | translate"
-        ></redaction-input-with-action>
+        ></iqser-input-with-action>
         <div class="actions">
             <iqser-icon-button
                 (action)="openAddEditDictionaryDialog()"
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
index 897e65b7a..cb4d76dfa 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
@@ -17,7 +17,7 @@
                 *ngIf="currentUser.isAdmin"
                 [tooltip]="'dictionary-overview.action.edit' | translate"
                 [type]="circleButtonTypes.dark"
-                icon="red:edit"
+                icon="iqser:edit"
                 tooltipPosition="below"
             ></iqser-circle-button>
 
@@ -42,7 +42,7 @@
                 [routerLink]="['..']"
                 [tooltip]="'common.close' | translate"
                 class="ml-6"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index 25309661d..25a1233a9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -20,7 +20,7 @@
                             buttonIcon="red:upload"
                         ></redaction-empty-state>
 
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group required w-300">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group required w-300">
                             <label translate="digital-signature-screen.certificate-name.label"></label>
                             <input
                                 [placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
@@ -32,7 +32,7 @@
                         <div
                             *ngIf="!digitalSignatureExists"
                             [class.hidden]="!hasDigitalSignatureSet"
-                            class="red-input-group required w-300"
+                            class="iqser-input-group required w-300"
                         >
                             <label translate="digital-signature-screen.password.label"></label>
                             <input
@@ -42,7 +42,7 @@
                             />
                         </div>
 
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group w-300">
                             <label translate="digital-signature-screen.reason.label"></label>
                             <input
                                 [placeholder]="'digital-signature-screen.reason.placeholder' | translate"
@@ -51,7 +51,7 @@
                             />
                         </div>
 
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group w-300">
                             <label translate="digital-signature-screen.location.label"></label>
                             <input
                                 [placeholder]="'digital-signature-screen.location.placeholder' | translate"
@@ -60,7 +60,7 @@
                             />
                         </div>
 
-                        <div [class.hidden]="!hasDigitalSignatureSet" class="red-input-group w-300">
+                        <div [class.hidden]="!hasDigitalSignatureSet" class="iqser-input-group w-300">
                             <label translate="digital-signature-screen.contact-info.label"></label>
                             <input
                                 [placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
@@ -74,7 +74,7 @@
                                 (action)="saveDigitalSignature()"
                                 [disabled]="digitalSignatureForm.invalid"
                                 [label]="'digital-signature-screen.action.save' | translate"
-                                icon="red:check"
+                                icon="iqser:check"
                                 [type]="iconButtonTypes.primary"
                             ></iqser-icon-button>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index 6bdffa07a..fef0715c2 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
@@ -67,7 +67,7 @@
                             <iqser-circle-button
                                 (action)="openAddEditAttributeDialog($event, attribute)"
                                 [tooltip]="'dossier-attributes-listing.action.edit' | translate"
-                                icon="red:edit"
+                                icon="iqser:edit"
                                 [type]="circleButtonTypes.dark"
                             ></iqser-circle-button>
 
@@ -96,10 +96,10 @@
     ></iqser-circle-button>
 
     <div class="attributes-actions-container">
-        <redaction-input-with-action
+        <iqser-input-with-action
             [(value)]="searchService.searchValue"
             [placeholder]="'dossier-attributes-listing.search' | translate"
-        ></redaction-input-with-action>
+        ></iqser-input-with-action>
 
         <iqser-icon-button
             (action)="openAddEditAttributeDialog($event)"
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index 2ab910de3..95f53ce83 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -15,10 +15,10 @@
                     [tableHeaderLabel]="tableHeaderLabel"
                 >
                     <div class="actions flex-1">
-                        <redaction-input-with-action
+                        <iqser-input-with-action
                             [(value)]="searchService.searchValue"
                             [placeholder]="'dossier-templates-listing.search' | translate"
-                        ></redaction-input-with-action>
+                        ></iqser-input-with-action>
 
                         <iqser-icon-button
                             (action)="openAddDossierTemplateDialog()"
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 9bceee5ed..081fa4e27 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
@@ -76,7 +76,7 @@
                             <iqser-circle-button
                                 (action)="openAddEditAttributeDialog($event, attribute)"
                                 [tooltip]="'file-attributes-listing.action.edit' | translate"
-                                icon="red:edit"
+                                icon="iqser:edit"
                                 [type]="circleButtonTypes.dark"
                             ></iqser-circle-button>
                             <iqser-circle-button
@@ -106,10 +106,10 @@
     ></iqser-circle-button>
 
     <div class="attributes-actions-container">
-        <redaction-input-with-action
+        <iqser-input-with-action
             [(value)]="searchService.searchValue"
             [placeholder]="'file-attributes-listing.search' | translate"
-        ></redaction-input-with-action>
+        ></iqser-input-with-action>
 
         <input #fileInput (change)="importCSV($event.target['files'])" accept=".csv" class="csv-input" type="file" />
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
index 176a84521..069c6b61f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
@@ -11,7 +11,7 @@
                 <iqser-circle-button
                     *ngIf="currentUser.isUser"
                     class="ml-6"
-                    icon="red:close"
+                    icon="iqser:close"
                     redactionNavigateLastDossiersScreen
                     tooltip="common.close"
                     tooltipPosition="below"
@@ -29,7 +29,7 @@
                     <form (submit)="saveGeneralConfig()" [formGroup]="configForm">
                         <div class="dialog-content">
                             <div class="dialog-content-left">
-                                <div class="red-input-group">
+                                <div class="iqser-input-group">
                                     <label translate="general-config-screen.app-name.label"></label>
                                     <input
                                         formControlName="auxiliaryName"
@@ -66,7 +66,7 @@
                     <form (submit)="save()" [formGroup]="smtpForm">
                         <div class="dialog-content">
                             <div class="dialog-content-left">
-                                <div class="red-input-group required">
+                                <div class="iqser-input-group required">
                                     <label translate="general-config-screen.form.host"></label>
                                     <input
                                         formControlName="host"
@@ -76,12 +76,12 @@
                                     />
                                 </div>
 
-                                <div class="red-input-group w-100">
+                                <div class="iqser-input-group w-100">
                                     <label translate="general-config-screen.form.port"></label>
                                     <input formControlName="port" name="port" type="number" />
                                 </div>
 
-                                <div class="red-input-group required">
+                                <div class="iqser-input-group required">
                                     <label translate="general-config-screen.form.from"></label>
                                     <input
                                         formControlName="from"
@@ -91,7 +91,7 @@
                                     />
                                 </div>
 
-                                <div class="red-input-group">
+                                <div class="iqser-input-group">
                                     <label translate="general-config-screen.form.from-display-name"></label>
                                     <input
                                         formControlName="fromDisplayName"
@@ -102,7 +102,7 @@
                                     <span class="hint" translate="general-config-screen.form.from-display-name-hint"></span>
                                 </div>
 
-                                <div class="red-input-group">
+                                <div class="iqser-input-group">
                                     <label translate="general-config-screen.form.reply-to"></label>
                                     <input
                                         formControlName="replyTo"
@@ -112,7 +112,7 @@
                                     />
                                 </div>
 
-                                <div class="red-input-group">
+                                <div class="iqser-input-group">
                                     <label translate="general-config-screen.form.reply-to-display-name"></label>
                                     <input
                                         formControlName="replyToDisplayName"
@@ -122,7 +122,7 @@
                                     />
                                 </div>
 
-                                <div class="red-input-group">
+                                <div class="iqser-input-group">
                                     <label translate="general-config-screen.form.envelope-from"></label>
                                     <input
                                         formControlName="envelopeFrom"
@@ -134,15 +134,15 @@
                                 </div>
                             </div>
                             <div>
-                                <div class="red-input-group">
+                                <div class="iqser-input-group">
                                     <label translate="general-config-screen.form.ssl"></label>
                                     <mat-slide-toggle color="primary" formControlName="ssl"></mat-slide-toggle>
                                 </div>
-                                <div class="red-input-group">
+                                <div class="iqser-input-group">
                                     <label translate="general-config-screen.form.starttls"></label>
                                     <mat-slide-toggle color="primary" formControlName="starttls"></mat-slide-toggle>
                                 </div>
-                                <div class="red-input-group">
+                                <div class="iqser-input-group">
                                     <label translate="general-config-screen.form.auth"></label>
                                     <mat-slide-toggle color="primary" formControlName="auth"></mat-slide-toggle>
                                 </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
index 2d056dd63..a4c317c84 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
index 45a989ca9..8a048ec50 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
@@ -26,7 +26,7 @@
             <iqser-icon-button
                 (action)="save()"
                 [label]="'rules-screen.save-changes' | translate"
-                icon="red:check"
+                icon="iqser:check"
                 [type]="iconButtonTypes.primary"
             ></iqser-icon-button>
             <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 61ecdb6a4..155d19494 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -8,10 +8,10 @@
             <div class="breadcrumb" translate="user-management"></div>
 
             <div class="actions">
-                <redaction-input-with-action
+                <iqser-input-with-action
                     [(value)]="searchService.searchValue"
                     [placeholder]="'user-listing.search' | translate"
-                ></redaction-input-with-action>
+                ></iqser-input-with-action>
                 <iqser-icon-button
                     (action)="openAddEditUserDialog($event)"
                     *ngIf="currentUser.isUserAdmin"
@@ -23,7 +23,7 @@
                     *ngIf="currentUser.isUser"
                     [tooltip]="'common.close' | translate"
                     class="ml-6"
-                    icon="red:close"
+                    icon="iqser:close"
                     redactionNavigateLastDossiersScreen
                     tooltipPosition="below"
                 ></iqser-circle-button>
@@ -66,7 +66,7 @@
                                 <iqser-circle-button
                                     (action)="openAddEditUserDialog($event, user)"
                                     [tooltip]="'user-listing.action.edit' | translate"
-                                    icon="red:edit"
+                                    icon="iqser:edit"
                                     [type]="circleButtonTypes.dark"
                                 ></iqser-circle-button>
                                 <iqser-circle-button
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
index 40aa50b5f..004790301 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
@@ -50,7 +50,7 @@
 .page-header .actions {
     justify-content: flex-end;
 
-    redaction-input-with-action:not(:last-child) {
+    iqser-input-with-action:not(:last-child) {
         margin-right: 16px;
     }
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
index 4b3044479..cd8b6cf54 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
@@ -8,7 +8,7 @@
             <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
@@ -26,7 +26,7 @@
                     (action)="save()"
                     [disabled]="configForm.invalid"
                     [label]="'watermark-screen.action.save' | translate"
-                    icon="red:check"
+                    icon="iqser:check"
                     [type]="iconButtonTypes.primary"
                 ></iqser-icon-button>
                 <div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
@@ -36,7 +36,7 @@
         <div class="right-container" redactionHasScrollbar>
             <div class="heading-xl" translate="watermark-screen.title"></div>
             <form (keyup)="configChanged()" [formGroup]="configForm">
-                <div class="red-input-group w-300">
+                <div class="iqser-input-group w-300">
                     <textarea
                         (mousemove)="triggerChanges()"
                         [placeholder]="'watermark-screen.form.text-placeholder' | translate"
@@ -49,7 +49,7 @@
                     ></textarea>
                 </div>
 
-                <div class="red-input-group">
+                <div class="iqser-input-group">
                     <label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
                     <div class="square-options">
                         <div
@@ -64,17 +64,17 @@
                     </div>
                 </div>
 
-                <div class="red-input-group">
+                <div class="iqser-input-group">
                     <label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
                     <mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
                 </div>
 
-                <div class="red-input-group">
+                <div class="iqser-input-group">
                     <label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
                     <mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
                 </div>
 
-                <div class="red-input-group w-150">
+                <div class="iqser-input-group w-150">
                     <label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
                     <input
                         [placeholder]="'add-edit-dictionary.form.color-placeholder' | translate"
@@ -101,7 +101,7 @@
                     </div>
                 </div>
 
-                <div class="red-input-group">
+                <div class="iqser-input-group">
                     <label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
                     <div class="square-options">
                         <div
diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
index 068652f74..a50b10497 100644
--- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
@@ -5,7 +5,7 @@
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.edit-reason.label' | translate"
         [type]="buttonType"
-        icon="red:edit"
+        icon="iqser:edit"
     ></iqser-circle-button>
 
     <iqser-circle-button
@@ -14,7 +14,7 @@
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.accept-recommendation.label' | translate"
         [type]="buttonType"
-        icon="red:check"
+        icon="iqser:check"
     ></iqser-circle-button>
 
     <iqser-circle-button
@@ -23,7 +23,7 @@
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.accept-suggestion.label' | translate"
         [type]="buttonType"
-        icon="red:check"
+        icon="iqser:check"
     ></iqser-circle-button>
 
     <iqser-circle-button
@@ -41,7 +41,7 @@
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.reject-suggestion' | translate"
         [type]="buttonType"
-        icon="red:close"
+        icon="iqser:close"
     ></iqser-circle-button>
 
     <iqser-circle-button
diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
index d06af3143..f41430b73 100644
--- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
@@ -18,13 +18,13 @@
     <div>{{ comment.text }}</div>
 </div>
 
-<redaction-input-with-action
+<iqser-input-with-action
     (action)="addComment($event)"
     *ngIf="permissionsService.canAddComment()"
     [placeholder]="'comments.add-comment' | translate"
     autocomplete="off"
     icon="red:collapse"
     width="full"
-></redaction-input-with-action>
+></iqser-input-with-action>
 
 <div (click)="toggleExpandComments($event)" class="all-caps-label pointer hide-comments" translate="comments.hide-comments"></div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss
index 4529f63a5..422830c95 100644
--- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.scss
@@ -34,7 +34,7 @@
         }
     }
 
-    redaction-input-with-action {
+    iqser-input-with-action {
         margin: 5px 0 10px 0;
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
index c47f87c2a..5e0e2b8e8 100644
--- a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
@@ -3,13 +3,13 @@
         <iqser-circle-button
             (action)="edit()"
             [tooltip]="'file-preview.tabs.document-info.edit' | translate"
-            icon="red:edit"
+            icon="iqser:edit"
             tooltipPosition="before"
         ></iqser-circle-button>
         <iqser-circle-button
             (action)="closeDocumentInfoView.emit()"
             [tooltip]="'file-preview.tabs.document-info.close' | translate"
-            icon="red:close"
+            icon="iqser:close"
             tooltipPosition="before"
         ></iqser-circle-button>
     </div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
index 103c64766..53e587bae 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
@@ -22,7 +22,7 @@
                     *ngIf="currentUser.isManager"
                     [tooltip]="'dossier-details.edit-owner' | translate"
                     class="ml-14"
-                    icon="red:edit"
+                    icon="iqser:edit"
                     tooltipPosition="below"
                 ></iqser-circle-button>
             </ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
index f0d4832c2..e48919796 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
@@ -4,7 +4,7 @@
         (action)="openEditDossierDialog($event, dossier)"
         *ngIf="currentUser.isManager"
         [tooltip]="'dossier-listing.edit.action' | translate"
-        icon="red:edit"
+        icon="iqser:edit"
         [type]="circleButtonTypes.dark"
     ></iqser-circle-button>
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
index 084cdbdb8..4e7fbf038 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
@@ -138,7 +138,7 @@
         ></iqser-circle-button>
 
         <!-- exclude from redaction -->
-        <div class="red-input-group">
+        <div class="iqser-input-group">
             <mat-slide-toggle
                 (change)="toggleAnalysis()"
                 (click)="$event.stopPropagation()"
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
index 6f929ff40..e6b143bf6 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
@@ -22,7 +22,7 @@
         <iqser-circle-button
             (action)="actionPerformed.emit('view-exclude-pages')"
             [tooltip]="'file-preview.tabs.exclude-pages.close' | translate"
-            icon="red:close"
+            icon="iqser:close"
             tooltipPosition="before"
         ></iqser-circle-button>
     </div>
@@ -59,7 +59,11 @@
                 tooltipPosition="above"
             ></redaction-annotation-actions>
         </div>
-        <iqser-circle-button (action)="multiSelectActive = false" icon="red:close" [type]="circleButtonTypes.primary"></iqser-circle-button>
+        <iqser-circle-button
+            (action)="multiSelectActive = false"
+            icon="iqser:close"
+            [type]="circleButtonTypes.primary"
+        ></iqser-circle-button>
     </div>
 
     <div [class.lower-height]="multiSelectActive || isReadOnly" class="annotations-wrapper">
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
index 85ecf735e..c4e28e2a7 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.scss
@@ -124,7 +124,7 @@
         }
 
         .pages {
-            @include no-scroll-bar();
+            @include no-scroll-bar;
             overflow: auto;
             flex: 1;
         }
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
index 1194b3321..9c9971824 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
@@ -1,12 +1,12 @@
 <div *ngIf="permissionsService.canExcludePages()" class="exclude-pages-input-container">
-    <redaction-input-with-action
+    <iqser-input-with-action
         (action)="excludePagesRange($event)"
         [hint]="'file-preview.tabs.exclude-pages.hint' | translate"
         [placeholder]="'file-preview.tabs.exclude-pages.input-placeholder' | translate"
         autocomplete="off"
-        icon="red:check"
+        icon="iqser:check"
         width="full"
-    ></redaction-input-with-action>
+    ></iqser-input-with-action>
 </div>
 
 <div *ngIf="excludedPagesRanges.length" class="all-caps-label-container">
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
index 5e5b9e1ed..b738da092 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.ts
@@ -1,11 +1,10 @@
 import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
 import { PageRange, ReanalysisControllerService } from '@redaction/red-ui-http';
-import { Toaster } from '@iqser/common-ui';
+import { InputWithActionComponent, Toaster } from '@iqser/common-ui';
 import { LoadingService } from '@services/loading.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
-import { InputWithActionComponent } from '@shared/components/input-with-action/input-with-action.component';
 
 @Component({
     selector: 'redaction-page-exclusion',
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
index 9e573d614..6885e0382 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html
@@ -1,5 +1,5 @@
 <form (submit)="saveMembers()" [formGroup]="teamForm">
-    <div class="red-input-group w-300">
+    <div class="iqser-input-group w-300">
         <mat-form-field floatLabel="always">
             <mat-label>{{ 'assign-dossier-owner.dialog.single-user' | translate }}</mat-label>
             <mat-select formControlName="owner">
@@ -35,13 +35,13 @@
 
     <pre *ngIf="selectedReviewersList.length === 0" [innerHTML]="'assign-dossier-owner.dialog.no-reviewers' | translate" class="info"></pre>
 
-    <redaction-input-with-action
+    <iqser-input-with-action
         [(value)]="searchQuery"
         (valueChange)="setMembersSelectOptions()"
         [placeholder]="'assign-dossier-owner.dialog.search' | translate"
         [width]="560"
         class="search-container"
-    ></redaction-input-with-action>
+    ></iqser-input-with-action>
 
     <div class="members-list">
         <div
@@ -55,7 +55,7 @@
                     <iqser-round-checkbox [active]="isApprover(userId)" class="mr-8"></iqser-round-checkbox>
                     <span translate="assign-dossier-owner.dialog.make-approver"></span>
                 </div>
-                <mat-icon *ngIf="!isOwner(userId)" svgIcon="red:check"></mat-icon>
+                <mat-icon *ngIf="!isOwner(userId)" svgIcon="iqser:check"></mat-icon>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
index 2e2ca7728..07e3d5f33 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
@@ -8,7 +8,7 @@
     >
         <redaction-initials-avatar [userId]="userId" color="gray" size="large"></redaction-initials-avatar>
         <div *ngIf="canRemoveMember(userId)" class="remove">
-            <mat-icon svgIcon="red:close"></mat-icon>
+            <mat-icon svgIcon="iqser:close"></mat-icon>
         </div>
     </div>
     <div *ngIf="overflowCount && !expandedTeam" [class.large-spacing]="largeSpacing" class="member pointer">
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
index 316c1a4f5..c9f5d68e6 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
@@ -3,7 +3,7 @@
         <div class="dialog-header heading-l" translate="add-dossier-dialog.header-new"></div>
 
         <div class="dialog-content">
-            <div class="red-input-group required w-300">
+            <div class="iqser-input-group required w-300">
                 <label translate="add-dossier-dialog.form.name.label"></label>
                 <input
                     [placeholder]="'add-dossier-dialog.form.name.placeholder' | translate"
@@ -13,7 +13,7 @@
                 />
             </div>
 
-            <div class="red-input-group required w-400">
+            <div class="iqser-input-group required w-400">
                 <mat-form-field floatLabel="always">
                     <mat-label>{{ 'add-dossier-dialog.form.template' | translate }}</mat-label>
                     <mat-select (valueChange)="dossierTemplateChanged($event)" formControlName="dossierTemplateId" style="width: 100%">
@@ -29,7 +29,7 @@
                 </mat-form-field>
             </div>
 
-            <div class="red-input-group w-400">
+            <div class="iqser-input-group w-400">
                 <label translate="add-dossier-dialog.form.description.label"></label>
                 <textarea
                     [placeholder]="'add-dossier-dialog.form.description.placeholder' | translate"
@@ -50,7 +50,7 @@
                     {{ 'add-dossier-dialog.form.due-date' | translate }}
                 </mat-checkbox>
 
-                <div *ngIf="hasDueDate" class="red-input-group datepicker-wrapper">
+                <div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
                     <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
                     <mat-datepicker-toggle [for]="picker" matSuffix>
                         <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
@@ -92,7 +92,7 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
 
 <ng-template #reportTemplateOptionTemplate let-option="option">
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
index 1b1f9fab3..ad948d812 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
@@ -9,7 +9,7 @@
 
     <form (submit)="saveUsers()" [formGroup]="usersForm">
         <div class="dialog-content">
-            <div class="red-input-group w-300 required">
+            <div class="iqser-input-group w-300 required">
                 <mat-form-field floatLabel="always">
                     <mat-label>{{ 'assign-owner.dialog.label' | translate: { type: data.mode } }}</mat-label>
                     <mat-select formControlName="singleUser">
@@ -30,5 +30,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
index 1bdee0e53..3d585594f 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
@@ -3,7 +3,7 @@
         <div class="dialog-header heading-l" translate="change-legal-basis-dialog.header"></div>
 
         <div class="dialog-content">
-            <div class="red-input-group required w-400">
+            <div class="iqser-input-group required w-400">
                 <label translate="change-legal-basis-dialog.content.reason"></label>
                 <mat-select
                     [placeholder]="'change-legal-basis-dialog.content.reason-placeholder' | translate"
@@ -16,12 +16,12 @@
                 </mat-select>
             </div>
 
-            <div class="red-input-group w-400">
+            <div class="iqser-input-group w-400">
                 <label translate="change-legal-basis-dialog.content.legalBasis"></label>
                 <input [value]="legalBasisForm.get('reason').value?.legalBasis" disabled type="text" />
             </div>
 
-            <div [class.required]="!isDocumentAdmin" class="red-input-group w-300">
+            <div [class.required]="!isDocumentAdmin" class="iqser-input-group w-300">
                 <label translate="change-legal-basis-dialog.content.comment"></label>
                 <textarea formControlName="comment" name="comment" redactionHasScrollbar rows="4" type="text"></textarea>
             </div>
@@ -35,5 +35,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
index 14770bf97..e913530f5 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
@@ -3,7 +3,7 @@
 
     <form (submit)="saveDocumentInfo()" [formGroup]="documentInfoForm">
         <div class="dialog-content">
-            <div *ngFor="let attr of attributes" class="red-input-group w-300">
+            <div *ngFor="let attr of attributes" class="iqser-input-group w-300">
                 <label>{{ attr.label }}</label>
                 <input [formControlName]="attr.id" [name]="attr.id" type="text" />
             </div>
@@ -15,5 +15,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
index 72fe36b08..f8adc89e5 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
@@ -10,7 +10,7 @@
             icon="red:attribute"
         ></redaction-empty-state>
 
-        <div *ngFor="let attr of customAttributes" [class.datepicker-wrapper]="isDate(attr)" class="red-input-group">
+        <div *ngFor="let attr of customAttributes" [class.datepicker-wrapper]="isDate(attr)" class="iqser-input-group">
             <label>{{ attr.label }}</label>
             <input
                 *ngIf="isNumber(attr) || isText(attr)"
@@ -43,7 +43,7 @@
         <div
             *ngFor="let attr of imageAttributes"
             [class.displayed-preview]="currentAttrValue(attr)"
-            class="red-input-group image-attribute"
+            class="iqser-input-group image-attribute"
         >
             <div>
                 <img *ngIf="currentAttrValue(attr)" [alt]="attr.label" [src]="currentAttrValue(attr)" />
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
index d759c29a4..5a70a20a8 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
@@ -71,5 +71,5 @@
         </div>
     </div>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index 49c7a04aa..446f3db4a 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -1,5 +1,5 @@
 <form (submit)="save()" [formGroup]="dossierForm">
-    <div class="red-input-group required w-300">
+    <div class="iqser-input-group required w-300">
         <label translate="edit-dossier-dialog.general-info.form.name.label"></label>
         <input
             [placeholder]="'edit-dossier-dialog.general-info.form.name.placeholder' | translate"
@@ -9,7 +9,7 @@
         />
     </div>
 
-    <div class="red-input-group required w-400">
+    <div class="iqser-input-group required w-400">
         <mat-form-field floatLabel="always">
             <mat-label>{{ 'edit-dossier-dialog.general-info.form.template' | translate }}</mat-label>
             <mat-select formControlName="dossierTemplateId" style="width: 100%">
@@ -25,7 +25,7 @@
         </mat-form-field>
     </div>
 
-    <div class="red-input-group w-400">
+    <div class="iqser-input-group w-400">
         <label translate="edit-dossier-dialog.general-info.form.description.label"></label>
         <textarea
             [placeholder]="'edit-dossier-dialog.general-info.form.description.placeholder' | translate"
@@ -46,7 +46,7 @@
             {{ 'edit-dossier-dialog.general-info.form.due-date' | translate }}
         </mat-checkbox>
 
-        <div *ngIf="hasDueDate" class="red-input-group datepicker-wrapper">
+        <div *ngIf="hasDueDate" class="iqser-input-group datepicker-wrapper">
             <input [matDatepicker]="picker" formControlName="dueDate" placeholder="dd/mm/yy" />
             <mat-datepicker-toggle [for]="picker" matSuffix>
                 <mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
index a441dc986..ecd205571 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
@@ -3,7 +3,7 @@
         <div class="dialog-header heading-l" translate="manual-annotation.dialog.header.force"></div>
 
         <div class="dialog-content">
-            <div class="red-input-group required w-400">
+            <div class="iqser-input-group required w-400">
                 <label translate="manual-annotation.dialog.content.reason"></label>
                 <mat-select
                     [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
@@ -16,12 +16,12 @@
                 </mat-select>
             </div>
 
-            <div class="red-input-group w-400">
+            <div class="iqser-input-group w-400">
                 <label translate="manual-annotation.dialog.content.legalBasis"></label>
                 <input [value]="redactionForm.get('reason').value?.legalBasis" disabled type="text" />
             </div>
 
-            <div [class.required]="!isDocumentAdmin" class="red-input-group w-300">
+            <div [class.required]="!isDocumentAdmin" class="iqser-input-group w-300">
                 <label translate="manual-annotation.dialog.content.comment"></label>
                 <textarea formControlName="comment" name="comment" redactionHasScrollbar rows="4" type="text"></textarea>
             </div>
@@ -34,5 +34,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 292862fd9..88256bdff 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -4,19 +4,19 @@
 
         <div class="dialog-content">
             <ng-container *ngIf="manualRedactionEntryWrapper.annotationType === 'TEXT'">
-                <div class="red-input-group">
+                <div class="iqser-input-group">
                     <label translate="manual-annotation.dialog.content.text"></label>
                 </div>
                 {{ format(manualRedactionEntryWrapper.manualRedactionEntry.value) }}
             </ng-container>
 
             <ng-container *ngIf="manualRedactionEntryWrapper.annotationType === 'RECTANGLE'">
-                <div class="red-input-group">
+                <div class="iqser-input-group">
                     <label translate="manual-annotation.dialog.content.rectangle"></label>
                 </div>
             </ng-container>
 
-            <div *ngIf="!isDictionaryRequest" class="red-input-group required w-400">
+            <div *ngIf="!isDictionaryRequest" class="iqser-input-group required w-400">
                 <label translate="manual-annotation.dialog.content.reason"></label>
                 <mat-select
                     [placeholder]="'manual-annotation.dialog.content.reason-placeholder' | translate"
@@ -34,17 +34,17 @@
                 </mat-select>
             </div>
 
-            <div *ngIf="!isDictionaryRequest" class="red-input-group w-400">
+            <div *ngIf="!isDictionaryRequest" class="iqser-input-group w-400">
                 <label translate="manual-annotation.dialog.content.legalBasis"></label>
                 <input [value]="redactionForm.get('reason').value?.legalBasis" disabled type="text" />
             </div>
 
-            <div [class.required]="!isDocumentAdmin" class="red-input-group w-300">
+            <div [class.required]="!isDocumentAdmin" class="iqser-input-group w-300">
                 <label translate="manual-annotation.dialog.content.comment"></label>
                 <textarea formControlName="comment" name="comment" redactionHasScrollbar rows="4" type="text"></textarea>
             </div>
 
-            <div *ngIf="isDictionaryRequest && !isFalsePositiveRequest" class="red-input-group required w-300">
+            <div *ngIf="isDictionaryRequest && !isFalsePositiveRequest" class="iqser-input-group required w-300">
                 <label translate="manual-annotation.dialog.content.dictionary"></label>
 
                 <mat-select formControlName="dictionary">
@@ -70,5 +70,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
index cf7ad05f8..6894e0b13 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
@@ -3,7 +3,7 @@
         <div class="dialog-header heading-l" translate="recategorize-image-dialog.header"></div>
 
         <div class="dialog-content">
-            <div class="red-input-group required w-400">
+            <div class="iqser-input-group required w-400">
                 <label translate="recategorize-image-dialog.content.type"></label>
                 <mat-select
                     [placeholder]="'recategorize-image-dialog.content.type-placeholder' | translate"
@@ -16,7 +16,7 @@
                 </mat-select>
             </div>
 
-            <div [class.required]="!isDocumentAdmin" class="red-input-group w-300">
+            <div [class.required]="!isDocumentAdmin" class="iqser-input-group w-300">
                 <label translate="recategorize-image-dialog.content.comment"></label>
                 <textarea formControlName="comment" name="comment" redactionHasScrollbar rows="4" type="text"></textarea>
             </div>
@@ -30,5 +30,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
index 8c6ccf153..e7c7ccbdb 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
@@ -39,7 +39,7 @@
                 </li>
             </ul>
 
-            <div [class.required]="!permissionsService.isApprover()" class="red-input-group w-300">
+            <div [class.required]="!permissionsService.isApprover()" class="iqser-input-group w-300">
                 <label translate="manual-annotation.dialog.content.comment"></label>
                 <textarea formControlName="comment" name="comment" redactionHasScrollbar rows="4" type="text"></textarea>
             </div>
@@ -55,5 +55,5 @@
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index 8395c9f32..c75d8864b 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -1,5 +1,13 @@
 import { ChangeDetectorRef, Component, ElementRef, HostListener, Injector, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { Toaster } from '@iqser/common-ui';
+import {
+    CircleButtonTypes,
+    DefaultListingServices,
+    keyChecker,
+    ListingComponent,
+    NestedFilter,
+    TableColumnConfig,
+    Toaster
+} from '@iqser/common-ui';
 import { AppStateService } from '@state/app-state.service';
 import { FileDropOverlayService } from '@upload-download/services/file-drop-overlay.service';
 import { FileUploadModel } from '@upload-download/model/file-upload.model';
@@ -19,7 +27,6 @@ import { DossiersDialogService } from '../../services/dossiers-dialog.service';
 import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
 import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
 import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
-import { CircleButtonTypes, DefaultListingServices, keyChecker, ListingComponent, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
 import { LoadingService } from '@services/loading.service';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
 import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
@@ -47,7 +54,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
         {
             label: this._translateService.instant('dossier-overview.header-actions.edit'),
             action: $event => this.openEditDossierDialog($event),
-            icon: 'red:edit',
+            icon: 'iqser:edit',
             hide: !this.currentUser.isManager
         }
     ];
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
index af0569a66..461d623bb 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
@@ -67,7 +67,7 @@
                     (action)="editingReviewer = true"
                     *ngIf="permissionsService.canAssignUser() && currentReviewer"
                     [tooltip]="assignTooltip"
-                    icon="red:edit"
+                    icon="iqser:edit"
                     tooltipPosition="below"
                 ></iqser-circle-button>
 
@@ -119,7 +119,7 @@
                 [routerLink]="['/main/dossiers/' + appStateService.activeDossierId]"
                 [tooltip]="'common.close' | translate"
                 class="ml-8"
-                icon="red:close"
+                icon="iqser:close"
                 tooltipPosition="below"
             ></iqser-circle-button>
         </div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
index ba1fc56ce..e461f463c 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
@@ -14,7 +14,7 @@
 
             <redaction-empty-state
                 *ngIf="searchResult.length === 0"
-                [icon]="'red:search'"
+                [icon]="'iqser:search'"
                 [text]="'search-screen.no-data' | translate"
             ></redaction-empty-state>
 
diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts
index 3f353c20d..7b20094a0 100644
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@@ -22,8 +22,6 @@ export class IconsModule {
             'attribute',
             'calendar',
             'case-sensitive',
-            'check',
-            'close',
             'collapse',
             'color-picker',
             'comment',
@@ -32,7 +30,6 @@ export class IconsModule {
             'document',
             'double-chevron-right',
             'download',
-            'edit',
             'entries',
             'enter',
             'error',
@@ -69,7 +66,6 @@ export class IconsModule {
             'refresh',
             'remove-from-dict',
             'report',
-            'search',
             'secret',
             'status',
             'status-collapse',
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
index 2ed035b3b..78afc5948 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
@@ -1,5 +1,5 @@
 <div class="flex-align-items-center space-between">
-    <div class="red-input-group w-250">
+    <div class="iqser-input-group w-250">
         <mat-select [(ngModel)]="value">
             <mat-select-trigger>
                 <ng-container *ngTemplateOutlet="avatar; context: getContext(value)"></ng-container>
@@ -14,14 +14,14 @@
         (action)="save.emit(value)"
         [tooltip]="'assign-user.save' | translate"
         class="pl-1"
-        icon="red:check"
+        icon="iqser:check"
         tooltipPosition="below"
     ></iqser-circle-button>
 
     <iqser-circle-button
         (action)="value = oldUser; cancel.emit()"
         [tooltip]="'assign-user.cancel' | translate"
-        icon="red:close"
+        icon="iqser:close"
         tooltipPosition="below"
     ></iqser-circle-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
index a96757204..6a6a23bb7 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
@@ -2,7 +2,7 @@
     justify-content: space-between;
 }
 
-.red-input-group mat-select {
+.iqser-input-group mat-select {
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
index 6584addea..f5c16d073 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
@@ -1,6 +1,6 @@
 <div class="content-container">
     <div class="actions-bar">
-        <div class="red-input-group w-250 mr-32">
+        <div class="iqser-input-group w-250 mr-32">
             <input
                 #inputElement
                 (keyup)="searchChanged(searchText)"
@@ -12,7 +12,7 @@
 
             <div class="input-icons">
                 <div *ngIf="searchText.length === 0" class="no-input">
-                    <mat-icon svgIcon="red:search"></mat-icon>
+                    <mat-icon svgIcon="iqser:search"></mat-icon>
                 </div>
                 <div *ngIf="searchText.length > 0" class="with-input">
                     <div class="search-match-text">
@@ -20,17 +20,17 @@
                     </div>
                     <mat-icon (click)="previousSearchMatch()" class="pointer" svgIcon="red:arrow-up"></mat-icon>
                     <mat-icon (click)="nextSearchMatch()" class="pointer" svgIcon="iqser:arrow-down"></mat-icon>
-                    <mat-icon (click)="searchChanged(''); inputElement.focus()" class="pointer" svgIcon="red:close"></mat-icon>
+                    <mat-icon (click)="searchChanged(''); inputElement.focus()" class="pointer" svgIcon="iqser:close"></mat-icon>
                 </div>
             </div>
         </div>
         <div class="compare">
-            <div class="red-input-group mr-16">
+            <div class="iqser-input-group mr-16">
                 <mat-checkbox [(ngModel)]="compare" color="primary">
                     {{ 'dictionary-overview.compare.compare' | translate }}
                 </mat-checkbox>
             </div>
-            <div class="red-input-group w-200 mt-0">
+            <div class="iqser-input-group w-200 mt-0">
                 <mat-select [(ngModel)]="dossier" [disabled]="!compare">
                     <mat-option [value]="selectDossier">{{ selectDossier.dossierName | translate }}</mat-option>
                     <mat-option *ngFor="let dossier of dossiers" [value]="dossier">
@@ -68,7 +68,7 @@
             (action)="saveDictionary.emit(currentEntries)"
             [label]="'dictionary-overview.save-changes' | translate"
             [type]="iconButtonTypes.primary"
-            icon="red:check"
+            icon="iqser:check"
         ></iqser-icon-button>
         <div (click)="revert()" class="all-caps-label cancel" translate="dictionary-overview.revert-changes"></div>
     </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
index 92f0772dc..f9469e4d1 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.scss
@@ -14,7 +14,7 @@ form {
     align-items: center;
     height: 100%;
 
-    .red-input-group {
+    .iqser-input-group {
         margin-top: 0;
     }
 }
@@ -66,7 +66,7 @@ ngx-monaco-editor {
             max-width: 450px;
         }
 
-        .red-input-group {
+        .iqser-input-group {
             input {
                 padding-right: 32px;
 
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
deleted file mode 100644
index f05829b60..000000000
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div [style.max-width]="computedWidth" [style.width]="computedWidth" class="red-input-group">
-    <input
-        [(ngModel)]="value"
-        (ngModelChange)="valueChange.emit($event)"
-        [autocomplete]="autocomplete"
-        [placeholder]="placeholder"
-        class="with-icon mt-0"
-        type="text"
-    />
-
-    <span *ngIf="hint" class="hint">{{ hint }}</span>
-
-    <mat-icon *ngIf="isSearch && !hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
-
-    <iqser-circle-button (action)="reset()" *ngIf="isSearch && hasContent" [size]="25" icon="red:close"></iqser-circle-button>
-
-    <iqser-circle-button
-        (action)="executeAction($event)"
-        *ngIf="!isSearch"
-        [disabled]="!hasContent"
-        [icon]="icon"
-        [isSubmit]="true"
-        [size]="25"
-    ></iqser-circle-button>
-</div>
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
deleted file mode 100644
index f2c22fd06..000000000
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:host {
-    display: block;
-}
-
-mat-icon.disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-}
-
-iqser-circle-button {
-    position: absolute;
-    top: 4px;
-    right: 5px;
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts
deleted file mode 100644
index 1193c4310..000000000
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-
-@Component({
-    selector: 'redaction-input-with-action',
-    templateUrl: './input-with-action.component.html',
-    styleUrls: ['./input-with-action.component.scss']
-})
-export class InputWithActionComponent {
-    @Input() placeholder: string;
-    @Input() hint: string;
-    @Input() width: number | 'full' = 250;
-    @Input() icon: string;
-    @Input() autocomplete: 'on' | 'off' = 'on';
-    @Input() value = '';
-    @Output() readonly action = new EventEmitter<string>();
-    @Output() readonly valueChange = new EventEmitter<string>();
-
-    get hasContent(): boolean {
-        return !!this.value.length;
-    }
-
-    get computedWidth(): string {
-        return this.width === 'full' ? '100%' : `${this.width}px`;
-    }
-
-    reset(): void {
-        this.value = '';
-    }
-
-    get isSearch(): boolean {
-        return this.action.observers.length === 0;
-    }
-
-    executeAction($event: MouseEvent): void {
-        $event.stopPropagation();
-
-        if (this.hasContent) {
-            this.action.emit(this.value);
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index b041f0f17..fba997504 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -44,7 +44,7 @@
             *ngIf="showCloseButton"
             [class.ml-6]="actionConfigs"
             [tooltip]="'common.close' | translate"
-            icon="red:close"
+            icon="iqser:close"
             redactionNavigateLastDossiersScreen
             tooltipPosition="below"
         ></iqser-circle-button>
@@ -52,11 +52,11 @@
 </div>
 
 <ng-template #searchBar>
-    <redaction-input-with-action
+    <iqser-input-with-action
         [(value)]="searchService.searchValue"
         *ngIf="searchPlaceholder && searchService"
         [placeholder]="searchPlaceholder"
         [width]="searchWidth"
         [class.mr-8]="searchPosition === searchPositions.beforeFilters"
-    ></redaction-input-with-action>
+    ></iqser-input-with-action>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
index d1bc2137c..c9bc3dfc1 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
@@ -7,7 +7,7 @@
         <p [class.heading]="isDeleteAction" [innerHTML]="config.question" class="mt-0 mb-8"></p>
         <p *ngIf="config.details" [innerHTML]="config.details" class="mt-0"></p>
 
-        <div *ngIf="config.requireInput" class="red-input-group required w-300 mt-24">
+        <div *ngIf="config.requireInput" class="iqser-input-group required w-300 mt-24">
             <label>{{ inputLabel }}</label>
             <input [(ngModel)]="inputValue" />
         </div>
@@ -33,5 +33,5 @@
         </div>
     </div>
 
-    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
+    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index 4513ac018..8a2b0a555 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -25,7 +25,6 @@ import { DictionaryManagerComponent } from './components/dictionary-manager/dict
 import { SideNavComponent } from '@shared/components/side-nav/side-nav.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { AssignUserDropdownComponent } from './components/assign-user-dropdown/assign-user-dropdown.component';
-import { InputWithActionComponent } from '@shared/components/input-with-action/input-with-action.component';
 import { PageHeaderComponent } from './components/page-header/page-header.component';
 import { DatePipe } from '@shared/pipes/date.pipe';
 import { HelpModeDirective } from '@shared/directives/help-mode.directive';
@@ -36,7 +35,6 @@ const components = [
     FullPageLoadingIndicatorComponent,
     InitialsAvatarComponent,
     PaginationComponent,
-    InputWithActionComponent,
     AnnotationIconComponent,
     SimpleDoughnutChartComponent,
     DictionaryAnnotationIconComponent,
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
index a101afe0c..9c1d467ee 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
@@ -4,7 +4,7 @@
             {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
         </div>
         <iqser-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></iqser-circle-button>
-        <iqser-circle-button (action)="closeDialog()" icon="red:close"></iqser-circle-button>
+        <iqser-circle-button (action)="closeDialog()" icon="iqser:close"></iqser-circle-button>
     </div>
     <div [hidden]="collapsed" class="upload-download-list">
         <div *ngFor="let dossierId of uploadService.activeDossierKeys">
@@ -50,7 +50,7 @@
                     <iqser-circle-button
                         (action)="cancelItem(model)"
                         [tooltip]="'upload-status.dialog.actions.cancel' | translate"
-                        icon="red:close"
+                        icon="iqser:close"
                         tooltipPosition="before"
                         [type]="circleButtonTypes.dark"
                     ></iqser-circle-button>
diff --git a/apps/red-ui/src/assets/icons/general/search.svg b/apps/red-ui/src/assets/icons/general/search.svg
deleted file mode 100644
index 8609f0d87..000000000
--- a/apps/red-ui/src/assets/icons/general/search.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="100px" version="1.1" viewBox="0 0 100 100" width="100px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="search" stroke="none" stroke-width="1">
-        <path
-            d="M95.5,74.5 L76.5,55.5 C78.5,50.5 79.5,45.5 79.5,40 C79.5,18 61.5,0 39.5,0 C18,0 0,18 0,40 C0,62 18,80 40,80 C45.5,80 51,79 55.5,77 L74.5,96 C77.5,99 81.5,100.5 85,100.5 C89,100.5 92.5,99 95.5,96 C101.5,90 101.5,80 95.5,74.5 Z M10,40 C10,23.5 23.5,10 40,10 C56.5,10 70,23.5 70,40 C70,56.5 56.5,70 40,70 C23.5,70 10,56.5 10,40 Z M88.5,88.5 C86.5,90.5 83.5,90.5 81.5,88.5 L64.5,71.5 C67,69.5 69.5,67 71.5,64.5 L88.5,81.5 C90.5,83.5 90.5,86.5 88.5,88.5 Z"
-            fill="currentColor" fill-rule="nonzero" id="Shape"></path>
-    </g>
-</svg>
diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss
deleted file mode 100644
index d619e8eca..000000000
--- a/apps/red-ui/src/assets/styles/red-input.scss
+++ /dev/null
@@ -1,267 +0,0 @@
-@import 'variables';
-@import 'red-mixins';
-
-form .red-input-group:not(first-of-type) {
-    margin-top: 14px;
-}
-
-.red-input-group {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    height: fit-content;
-
-    .hint {
-        margin-top: 5px;
-        font-size: 11px;
-        line-height: 14px;
-        opacity: 0.7;
-    }
-
-    .input-icon {
-        position: absolute;
-        right: 1px;
-        bottom: 1px;
-        background: $grey-5;
-        height: 34px;
-        width: 34px;
-        border-left: 1px solid $grey-5;
-        border-top-right-radius: 7px;
-        border-bottom-right-radius: 7px;
-        cursor: pointer;
-        transition: background-color 0.25s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &:hover {
-            background: $grey-6;
-        }
-
-        mat-icon {
-            width: 14px;
-            height: 14px;
-            color: $accent;
-        }
-
-        &.disabled {
-            cursor: default;
-        }
-    }
-
-    .mat-form-field-underline {
-        display: none;
-    }
-
-    .mat-form-field-wrapper,
-    .mat-form-field-infix {
-        padding-bottom: 0;
-    }
-
-    .mat-form-field-label {
-        opacity: 0.7 !important;
-        color: $accent !important;
-        transform: translateY(-1.34em) !important;
-    }
-
-    &:first-child {
-        margin-top: 0;
-    }
-
-    .icon-right {
-        width: 14px;
-        height: 14px;
-        position: absolute;
-        top: 10px;
-        right: 10px;
-    }
-
-    .slider-row {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-    }
-
-    .mat-button-toggle-checked {
-        background: $primary;
-        transition: background-color 0.25s ease;
-        color: $white;
-    }
-
-    input,
-    textarea,
-    mat-select {
-        box-sizing: border-box;
-        padding-left: 11px;
-        padding-right: 11px;
-        border: 1px solid $grey-5;
-        font-family: Inter, sans-serif;
-        font-size: 13px;
-        background-color: #ffffff;
-        border-radius: 8px;
-        outline: none;
-        margin-top: 3px;
-        min-height: 36px;
-
-        &.with-icon {
-            padding-right: 34px;
-        }
-
-        &:focus:not(:disabled):not(.mat-select-disabled) {
-            border-color: $accent;
-        }
-
-        &::placeholder {
-            color: $accent;
-            opacity: 0.7;
-        }
-
-        &.ng-invalid.ng-touched {
-            border-color: rgba($primary, 0.3);
-
-            &:focus {
-                border-color: $primary;
-            }
-        }
-
-        &:disabled,
-        &.mat-select-disabled {
-            background-color: $grey-2;
-            color: rgba($accent, 0.3);
-        }
-    }
-
-    textarea {
-        line-height: 18px;
-    }
-
-    .hex-color-input {
-        width: 150px;
-        max-width: 150px;
-    }
-
-    mat-select {
-        .mat-select-trigger {
-            height: 32px;
-        }
-
-        .mat-select-value {
-            vertical-align: middle;
-        }
-    }
-
-    textarea {
-        resize: vertical;
-        padding-top: 7px;
-        padding-bottom: 7px;
-        @include scroll-bar;
-
-        &.has-scrollbar {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-    }
-
-    label:not(.mat-slide-toggle-label) {
-        opacity: 0.7;
-        font-size: 11px;
-        letter-spacing: 0;
-        line-height: 14px;
-        margin-bottom: 2px;
-        color: $accent;
-
-        &.mat-checkbox-layout {
-            opacity: 1;
-            margin-bottom: 0;
-        }
-    }
-
-    &.required label:after {
-        content: ' *';
-        color: $primary;
-    }
-
-    &.datepicker-wrapper {
-        position: relative;
-        display: flex;
-        margin-top: 0;
-        width: 120px;
-
-        .mat-datepicker-input {
-            margin-top: 0;
-            width: 120px;
-        }
-
-        .mat-datepicker-toggle {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            color: $accent;
-
-            &.mat-datepicker-toggle-active {
-                color: $primary;
-            }
-
-            .mat-icon-button {
-                width: 34px;
-                height: 34px;
-                line-height: 34px;
-            }
-
-            mat-icon {
-                width: 14px;
-                height: 17px;
-            }
-        }
-    }
-
-    &.w-75 {
-        width: 75px;
-        max-width: 75px;
-    }
-
-    &.w-110 {
-        width: 110px;
-        max-width: 110px;
-    }
-
-    &.w-150 {
-        max-width: 150px;
-        width: 150px;
-    }
-
-    &.w-160 {
-        width: 160px;
-        max-width: 160px;
-    }
-
-    &.w-200 {
-        width: 200px;
-        max-width: 200px;
-    }
-
-    &.w-250 {
-        width: 250px;
-        max-width: 250px;
-    }
-
-    &.w-300 {
-        width: 300px;
-        max-width: 300px;
-    }
-
-    &.w-400 {
-        width: 400px;
-        max-width: 400px;
-    }
-
-    &.w-450 {
-        width: 450px;
-        max-width: 450px;
-    }
-
-    &.w-full {
-        width: 100%;
-        max-width: 100%;
-    }
-}
diff --git a/apps/red-ui/src/assets/styles/red-mixins.scss b/apps/red-ui/src/assets/styles/red-mixins.scss
index 7236bd77b..0d8216a2a 100644
--- a/apps/red-ui/src/assets/styles/red-mixins.scss
+++ b/apps/red-ui/src/assets/styles/red-mixins.scss
@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'libs/common-ui/src/assets/styles/mixins';
 
 @mixin line-clamp($lines) {
     display: -webkit-box;
@@ -13,34 +14,6 @@
     }
 }
 
-@mixin no-scroll-bar {
-    scrollbar-width: none; /* Firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    &::-webkit-scrollbar {
-        width: 0;
-        background: transparent; /* Chrome/Safari/Webkit */
-    }
-}
-
-@mixin scroll-bar {
-    scrollbar-color: $grey-5 $grey-2;
-    scrollbar-width: thin;
-
-    &::-webkit-scrollbar {
-        width: 11px;
-    }
-
-    /* Track */
-    &::-webkit-scrollbar-track {
-        background: $grey-2;
-    }
-
-    /* Handle */
-    &::-webkit-scrollbar-thumb {
-        background: $grey-5;
-    }
-}
-
 @mixin inset-shadow {
     box-shadow: inset 0 4px 3px -2px $grey-4;
 }
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index 30aa9b684..c4db504ff 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -51,7 +51,7 @@ section.settings {
         form {
             margin-left: 6px;
 
-            .red-input-group {
+            .iqser-input-group {
                 width: 250px;
             }
         }
@@ -216,10 +216,6 @@ section.settings {
     flex: 2;
 }
 
-.mt-0 {
-    margin-top: 0 !important;
-}
-
 .mt-5 {
     margin-top: 5px;
 }
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index 41738c02c..e50df826b 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -4,7 +4,6 @@
 @import 'red-page-layout';
 @import 'red-text-styles';
 @import 'red-dialog';
-@import 'red-input';
 @import 'red-select';
 @import 'red-autocomplete';
 @import 'red-list';

From f947e9ea46c46eb328009da60caa6bfc1474c753 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Sun, 22 Aug 2021 17:15:21 +0300
Subject: [PATCH 05/11] use action for close button instead of a directive

---
 .../downloads-list-screen.component.html             |  5 ++++-
 .../downloads-list-screen.component.ts               | 10 ++++++----
 apps/red-ui/src/app/i18n/language.service.ts         |  2 +-
 .../digital-signature-screen.component.html          |  6 +++++-
 .../digital-signature-screen.component.ts            |  5 +++--
 .../dossier-templates-listing-screen.component.html  |  6 +++++-
 .../dossier-templates-listing-screen.component.ts    |  4 +++-
 .../license-information-screen.component.html        |  1 +
 .../license-information-screen.component.ts          |  6 ++++--
 .../admin/screens/trash/trash-screen.component.html  |  6 +++++-
 .../admin/screens/trash/trash-screen.component.ts    |  2 ++
 .../dossier-overview-screen.component.html           |  1 +
 .../dossier-overview-screen.component.ts             |  8 +++++---
 .../search-screen/search-screen.component.html       |  1 +
 .../screens/search-screen/search-screen.component.ts | 12 +++++++-----
 .../page-header/page-header.component.html           |  2 +-
 .../components/page-header/page-header.component.ts  |  3 ++-
 .../modules/shared/directives/help-mode.directive.ts |  2 +-
 .../src/app/services/router-history.service.ts       |  2 +-
 19 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index d628bf93b..abc5a0ec2 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -1,5 +1,8 @@
 <section>
-    <redaction-page-header [showCloseButton]="true"></redaction-page-header>
+    <redaction-page-header
+        (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
+        [showCloseButton]="true"
+    ></redaction-page-header>
 
     <div class="red-content-inner">
         <div class="content-container">
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
index 764603479..591829755 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
@@ -6,6 +6,7 @@ import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColum
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { LoadingService } from '@services/loading.service';
 import { timer } from 'rxjs';
+import { RouterHistoryService } from '@services/router-history.service';
 
 @Component({
     selector: 'redaction-downloads-list-screen',
@@ -18,7 +19,7 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
     protected readonly _primaryKey = 'storageId';
     readonly circleButtonTypes = CircleButtonTypes;
     readonly tableHeaderLabel = _('downloads-list.table-header.title');
-    readonly tableColumnConfigs: TableColumnConfig<DownloadStatusWrapper>[] = [
+    readonly tableColumnConfigs: readonly TableColumnConfig<DownloadStatusWrapper>[] = [
         { label: _('downloads-list.table-col-names.name') },
         { label: _('downloads-list.table-col-names.size') },
         { label: _('downloads-list.table-col-names.date') },
@@ -26,10 +27,11 @@ export class DownloadsListScreenComponent extends ListingComponent<DownloadStatu
     ];
 
     constructor(
-        readonly fileDownloadService: FileDownloadService,
-        private readonly _downloadControllerService: DownloadControllerService,
+        protected readonly _injector: Injector,
         private readonly _loadingService: LoadingService,
-        protected readonly _injector: Injector
+        readonly fileDownloadService: FileDownloadService,
+        readonly routerHistoryService: RouterHistoryService,
+        private readonly _downloadControllerService: DownloadControllerService
     ) {
         super(_injector);
     }
diff --git a/apps/red-ui/src/app/i18n/language.service.ts b/apps/red-ui/src/app/i18n/language.service.ts
index 398bb84e5..0f75ec887 100644
--- a/apps/red-ui/src/app/i18n/language.service.ts
+++ b/apps/red-ui/src/app/i18n/language.service.ts
@@ -27,7 +27,7 @@ export class LanguageService {
         }
         document.documentElement.lang = defaultLang;
         this._translateService.setDefaultLang(defaultLang);
-        this._translateService.use(defaultLang).subscribe(() => {});
+        this._translateService.use(defaultLang).toPromise().then();
     }
 
     async changeLanguage(language: string) {
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
index 25a1233a9..97eefcf76 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
@@ -4,7 +4,11 @@
     <redaction-admin-side-nav type="settings"></redaction-admin-side-nav>
 
     <div>
-        <redaction-page-header [pageLabel]="'digital-signature' | translate" [showCloseButton]="currentUser.isUser"></redaction-page-header>
+        <redaction-page-header
+            (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
+            [pageLabel]="'digital-signature' | translate"
+            [showCloseButton]="currentUser.isUser"
+        ></redaction-page-header>
 
         <div class="red-content-inner">
             <div class="content-container">
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
index f986861cf..12a8138dd 100644
--- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.ts
@@ -1,12 +1,12 @@
 import { Component, OnDestroy } from '@angular/core';
 import { DigitalSignature, DigitalSignatureControllerService } from '@redaction/red-ui-http';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Toaster } from '@iqser/common-ui';
+import { AutoUnsubscribe, IconButtonTypes, Toaster } from '@iqser/common-ui';
 import { lastIndexOfEnd } from '@utils/functions';
-import { AutoUnsubscribe, IconButtonTypes } from '@iqser/common-ui';
 import { LoadingService } from '@services/loading.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
+import { RouterHistoryService } from '@services/router-history.service';
 
 @Component({
     selector: 'redaction-digital-signature-screen',
@@ -27,6 +27,7 @@ export class DigitalSignatureScreenComponent extends AutoUnsubscribe implements
         private readonly _formBuilder: FormBuilder,
         private readonly _userService: UserService,
         private readonly _loadingService: LoadingService,
+        readonly routerHistoryService: RouterHistoryService,
         private readonly _digitalSignatureControllerService: DigitalSignatureControllerService
     ) {
         super();
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index 95f53ce83..64d1f2f61 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -4,7 +4,11 @@
     <redaction-admin-side-nav type="settings"></redaction-admin-side-nav>
 
     <div>
-        <redaction-page-header [pageLabel]="'dossier-templates' | translate" [showCloseButton]="currentUser.isUser"></redaction-page-header>
+        <redaction-page-header
+            (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
+            [pageLabel]="'dossier-templates' | translate"
+            [showCloseButton]="currentUser.isUser"
+        ></redaction-page-header>
 
         <div class="red-content-inner">
             <div class="content-container">
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
index abda7f33e..27cb7e8f7 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
@@ -8,6 +8,7 @@ import { DossierTemplateControllerService } from '@redaction/red-ui-http';
 import { CircleButtonTypes, DefaultListingServices, IconButtonTypes, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
 import { UserService } from '@services/user.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { RouterHistoryService } from '@services/router-history.service';
 
 @Component({
     templateUrl: './dossier-templates-listing-screen.component.html',
@@ -21,7 +22,7 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
     readonly tableHeaderLabel = _('dossier-templates-listing.table-header.title');
-    tableColumnConfigs: TableColumnConfig<DossierTemplateModelWrapper>[] = [
+    readonly tableColumnConfigs: readonly TableColumnConfig<DossierTemplateModelWrapper>[] = [
         {
             label: _('dossier-templates-listing.table-col-names.name'),
             sortByKey: 'name'
@@ -43,6 +44,7 @@ export class DossierTemplatesListingScreenComponent extends ListingComponent<Dos
         private readonly _loadingService: LoadingService,
         private readonly _appStateService: AppStateService,
         private readonly _dialogService: AdminDialogService,
+        readonly routerHistoryService: RouterHistoryService,
         readonly userPreferenceService: UserPreferenceService,
         private readonly _dossierTemplateControllerService: DossierTemplateControllerService
     ) {
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
index 727db13cb..16898dc57 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
@@ -5,6 +5,7 @@
 
     <div>
         <redaction-page-header
+            (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
             [buttonConfigs]="buttonConfigs"
             [pageLabel]="'license-information' | translate"
             [showCloseButton]="currentUser.isUser"
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts
index 45338abba..ef8907f6c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts
@@ -8,6 +8,7 @@ import { ButtonConfig } from '@shared/components/page-header/models/button-confi
 import { IconButtonTypes } from '@iqser/common-ui';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
+import { RouterHistoryService } from '@services/router-history.service';
 
 @Component({
     selector: 'redaction-license-information-screen',
@@ -16,10 +17,10 @@ import { UserService } from '@services/user.service';
 })
 export class LicenseInformationScreenComponent implements OnInit {
     readonly currentUser = this._userService.currentUser;
-    readonly buttonConfigs: ButtonConfig[] = [
+    readonly buttonConfigs: readonly ButtonConfig[] = [
         {
             label: _('license-info-screen.email-report'),
-            action: () => this.sendMail(),
+            action: (): void => this.sendMail(),
             type: IconButtonTypes.primary
         }
     ];
@@ -48,6 +49,7 @@ export class LicenseInformationScreenComponent implements OnInit {
         private readonly _userService: UserService,
         readonly appConfigService: AppConfigService,
         private readonly _loadingService: LoadingService,
+        readonly routerHistoryService: RouterHistoryService,
         private readonly _translateService: TranslateService,
         private readonly _licenseReportController: LicenseReportControllerService
     ) {
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
index 18d927115..3e9eabd9b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
@@ -1,7 +1,11 @@
 <section>
     <div class="overlay-shadow"></div>
 
-    <redaction-page-header [pageLabel]="'trash.label' | translate" [showCloseButton]="true"></redaction-page-header>
+    <redaction-page-header
+        (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
+        [pageLabel]="'trash.label' | translate"
+        [showCloseButton]="true"
+    ></redaction-page-header>
 
     <div class="red-content-inner">
         <div class="content-container">
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
index 9b5a836fa..c1bf02a6d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
@@ -11,6 +11,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';
 import { getLeftDateTime } from '@utils/functions';
+import { RouterHistoryService } from '@services/router-history.service';
 
 interface DossierListItem extends Dossier {
     readonly canRestore: boolean;
@@ -53,6 +54,7 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
         protected readonly _injector: Injector,
         private readonly _loadingService: LoadingService,
         private readonly _dossiersService: DossiersService,
+        readonly routerHistoryService: RouterHistoryService,
         private readonly _appConfigService: AppConfigService,
         private readonly _adminDialogService: AdminDialogService
     ) {
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
index b0103f5c6..037b89791 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@@ -1,5 +1,6 @@
 <section *ngIf="!!currentDossier">
     <redaction-page-header
+        (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [actionConfigs]="actionConfigs"
         [fileAttributeConfigs]="fileAttributeConfigs"
         [searchPlaceholder]="'dossier-overview.search' | translate"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index c75d8864b..83003b5fe 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -37,6 +37,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { annotationFilterChecker } from '@utils/filter-utils';
 import { PermissionsService } from '@services/permissions.service';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { RouterHistoryService } from '@services/router-history.service';
 import { FileAttributeConfig } from '@redaction/red-ui-http';
 
 @Component({
@@ -53,7 +54,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     readonly actionConfigs: readonly ActionConfig[] = [
         {
             label: this._translateService.instant('dossier-overview.header-actions.edit'),
-            action: $event => this.openEditDossierDialog($event),
+            action: ($event): void => this.openEditDossierDialog($event),
             icon: 'iqser:edit',
             hide: !this.currentUser.isManager
         }
@@ -97,7 +98,7 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     private readonly _dossierDetailsComponent: DossierDetailsComponent;
     private _lastScrolledIndex: number;
     @ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
-    private readonly _needsWorkTemplate: TemplateRef<any>;
+    private readonly _needsWorkTemplate: TemplateRef<unknown>;
     @ViewChild('fileInput') private readonly _fileInput: ElementRef;
     @ViewChild(CdkVirtualScrollViewport)
     private readonly _scrollViewport: CdkVirtualScrollViewport;
@@ -105,10 +106,11 @@ export class DossierOverviewScreenComponent extends ListingComponent<FileStatusW
     constructor(
         private readonly _toaster: Toaster,
         protected readonly _injector: Injector,
-        readonly permissionsService: PermissionsService,
         private readonly _userService: UserService,
+        readonly permissionsService: PermissionsService,
         private readonly _loadingService: LoadingService,
         private readonly _appStateService: AppStateService,
+        readonly routerHistoryService: RouterHistoryService,
         private readonly _appConfigService: AppConfigService,
         private readonly _translateService: TranslateService,
         private readonly _dialogService: DossiersDialogService,
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
index e461f463c..a21433a07 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html
@@ -1,5 +1,6 @@
 <section *ngIf="searchResults$ | async as searchResult">
     <redaction-page-header
+        (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [searchPlaceholder]="'search.placeholder' | translate"
         [searchWidth]="600"
         [showCloseButton]="true"
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
index 1651d0392..efe7d6c3f 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
@@ -12,6 +12,7 @@ import { fileStatusTranslations } from '../../translations/file-status-translati
 import { SearchPositions } from '@shared/components/page-header/models/search-positions.type';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { TranslateService } from '@ngx-translate/core';
+import { RouterHistoryService } from '@services/router-history.service';
 
 interface ListItem {
     readonly dossierId: string;
@@ -57,13 +58,14 @@ export class SearchScreenComponent extends ListingComponent<ListItem> implements
     );
 
     constructor(
+        private readonly _router: Router,
         protected readonly _injector: Injector,
-        private readonly _searchControllerService: SearchControllerService,
         private readonly _activatedRoute: ActivatedRoute,
-        private readonly _appStateService: AppStateService,
         private readonly _loadingService: LoadingService,
+        private readonly _appStateService: AppStateService,
+        readonly routerHistoryService: RouterHistoryService,
         private readonly _translateService: TranslateService,
-        private readonly _router: Router
+        private readonly _searchControllerService: SearchControllerService
     ) {
         super(_injector);
 
@@ -93,11 +95,11 @@ export class SearchScreenComponent extends ListingComponent<ListItem> implements
         });
     }
 
-    setInitialConfig() {
+    setInitialConfig(): void {
         return;
     }
 
-    updateNavigation(query: string, mustContain?: string) {
+    updateNavigation(query: string, mustContain?: string): void {
         const newQuery = query?.replace(mustContain, `"${mustContain}"`);
         const queryParams = newQuery && newQuery !== '' ? { query: newQuery } : {};
         this._router.navigate([], { queryParams }).then();
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index fba997504..bb815c653 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -41,11 +41,11 @@
         <ng-content></ng-content>
 
         <iqser-circle-button
+            (action)="closeAction.emit()"
             *ngIf="showCloseButton"
             [class.ml-6]="actionConfigs"
             [tooltip]="'common.close' | translate"
             icon="iqser:close"
-            redactionNavigateLastDossiersScreen
             tooltipPosition="below"
         ></iqser-circle-button>
     </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
index 866c188df..04d3725a8 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, Optional } from '@angular/core';
+import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
 import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
 import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
 import { FilterService, SearchService } from '@iqser/common-ui';
@@ -23,6 +23,7 @@ export class PageHeaderComponent<T> {
     @Input() searchPlaceholder: string;
     @Input() searchWidth: number | 'full';
     @Input() searchPosition: SearchPosition = SearchPositions.afterFilters;
+    @Output() readonly closeAction = new EventEmitter();
 
     readonly filters$ = this.filterService?.filterGroups$.pipe(map(all => all.filter(f => f.icon)));
     readonly showResetFilters$ = this._showResetFilters$;
diff --git a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
index dfc6d0f9f..710433355 100644
--- a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
+++ b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
@@ -31,7 +31,7 @@ export class HelpModeDirective implements OnInit {
         this._helpModeService.addElement(this.elementName, element, helperElement);
     }
 
-    @HostListener('click') onClick() {
+    @HostListener('click') onClick(): void {
         if (this._helpModeService.isHelpModeActive) {
             const currentLocale = this._languageService.currentLanguage;
             window.open(links[this.elementName][currentLocale]);
diff --git a/apps/red-ui/src/app/services/router-history.service.ts b/apps/red-ui/src/app/services/router-history.service.ts
index c0ee27d62..023a64176 100644
--- a/apps/red-ui/src/app/services/router-history.service.ts
+++ b/apps/red-ui/src/app/services/router-history.service.ts
@@ -16,7 +16,7 @@ export class RouterHistoryService {
         });
     }
 
-    navigateToLastDossiersScreen() {
+    navigateToLastDossiersScreen(): void {
         if (this._router.url === this._lastDossiersScreen) {
             this._router.navigate(['/main/dossiers']);
         } else {

From c4c3fad6a5d7d97d2a9395e79235fa414f6097ea Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Sun, 22 Aug 2021 19:04:48 +0300
Subject: [PATCH 06/11] move help mode to common lib

---
 .editorconfig                                 |  2 +-
 apps/red-ui/src/app/app.module.ts             | 10 ++-
 .../base-screen/base-screen.component.html    |  6 +-
 .../base-screen/base-screen.component.ts      |  2 +-
 .../help-mode-dialog.component.html           |  8 --
 .../help-mode-dialog.component.scss           | 18 -----
 .../help-mode-dialog.component.ts             | 10 ---
 .../help-mode/help-mode.component.html        | 20 -----
 .../help-mode/help-mode.component.scss        | 72 -----------------
 .../help-mode/help-mode.component.ts          | 30 -------
 .../file-workload/file-workload.component.ts  | 10 +--
 .../page-header/page-header.component.html    |  4 +-
 .../shared/directives/help-mode.directive.ts  | 40 ----------
 .../shared/services/help-mode.service.ts      | 78 -------------------
 .../src/app/modules/shared/shared.module.ts   |  3 +-
 apps/red-ui/src/assets/styles/red-dialog.scss | 40 ----------
 .../src/assets/styles/red-text-styles.scss    | 12 ---
 apps/red-ui/src/assets/styles/red-theme.scss  |  1 -
 18 files changed, 17 insertions(+), 349 deletions(-)
 delete mode 100644 apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html
 delete mode 100644 apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss
 delete mode 100644 apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts
 delete mode 100644 apps/red-ui/src/app/components/help-mode/help-mode.component.html
 delete mode 100644 apps/red-ui/src/app/components/help-mode/help-mode.component.scss
 delete mode 100644 apps/red-ui/src/app/components/help-mode/help-mode.component.ts
 delete mode 100644 apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
 delete mode 100644 apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
 delete mode 100644 apps/red-ui/src/assets/styles/red-dialog.scss

diff --git a/.editorconfig b/.editorconfig
index 92c6e7b4b..7ac0fdd9b 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,7 +8,7 @@ indent_size = 4
 insert_final_newline = true
 trim_trailing_whitespace = true
 ij_html_quote_style = double
-max_line_length = 100
+max_line_length = 140
 
 [*.md]
 max_line_length = off
diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 80efd31cc..fef2bec0e 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -34,9 +34,9 @@ import { configurationInitializer } from '@app-config/configuration.initializer'
 import { AppConfigService } from '@app-config/app-config.service';
 import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight-search.component';
 import { PruningTranslationLoader } from '@utils/pruning-translation-loader';
-import { HelpModeComponent } from '@components/help-mode/help-mode.component';
-import { HelpModeDialogComponent } from '@components/help-mode-dialog/help-mode-dialog.component';
 import { DatePipe } from '@shared/pipes/date.pipe';
+import * as links from '../assets/help-mode/links.json';
+import { HELP_DOCS } from '@iqser/common-ui';
 
 export function httpLoaderFactory(httpClient: HttpClient) {
     return new PruningTranslationLoader(httpClient, '/assets/i18n/', '.json');
@@ -61,8 +61,6 @@ const components = [
     ToastComponent,
     NotificationsComponent,
     SpotlightSearchComponent,
-    HelpModeComponent,
-    HelpModeDialogComponent,
     ...screens
 ];
 
@@ -136,6 +134,10 @@ const components = [
             provide: MissingTranslationHandler,
             useClass: REDMissingTranslationHandler
         },
+        {
+            provide: HELP_DOCS,
+            useValue: links
+        },
         DatePipe
     ],
     bootstrap: [AppComponent]
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index 6e70aca63..c1a5ff6a5 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -73,16 +73,16 @@
                     [icon]="'iqser:search'"
                     [tooltip]="'search.header-label' | translate"
                     tooltipPosition="below"
-                    redactionHelpMode="search"
+                    iqserHelpMode="search"
                 ></iqser-circle-button>
 
-                <redaction-notifications redactionHelpMode="notifications"></redaction-notifications>
+                <redaction-notifications iqserHelpMode="notifications"></redaction-notifications>
             </div>
             <redaction-user-button
                 [matMenuTriggerFor]="userMenu"
                 [showDot]="fileDownloadService.hasPendingDownloads"
                 [userId]="currentUser.id"
-                redactionHelpMode="user-menu"
+                iqserHelpMode="user-menu"
             ></redaction-user-button>
 
             <mat-menu #userMenu="matMenu" xPosition="before">
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts
index ae02a576b..1142c2e7c 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts
@@ -12,7 +12,7 @@ import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-se
 import { SpotlightSearchDialogData } from '@components/spotlight-search/spotlight-search-dialog-data';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { distinctUntilChanged, filter, map, startWith } from 'rxjs/operators';
-import { HelpModeService } from '@shared/services/help-mode.service';
+import { HelpModeService } from '@iqser/common-ui';
 
 interface MenuItem {
     readonly name: string;
diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html
deleted file mode 100644
index 42884bbd3..000000000
--- a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<section class="dialog">
-    <div class="content">
-        <p class="heading-l pre" [innerHTML]="'help-mode.welcome-to-help-mode' | translate"></p>
-        <img src="assets/illustrations/illustration.gif" alt="" width="335" />
-        <p class="pre" [innerHTML]="'help-mode.clicking-anywhere-on' | translate"></p>
-    </div>
-    <iqser-circle-button class="dialog-close" icon="iqser:close" mat-dialog-close></iqser-circle-button>
-</section>
diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss
deleted file mode 100644
index 3a3a69d4e..000000000
--- a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@import '../../../assets/styles/variables';
-
-section {
-    background: $grey-11;
-    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;
-}
diff --git a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts b/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts
deleted file mode 100644
index f1aa6da46..000000000
--- a/apps/red-ui/src/app/components/help-mode-dialog/help-mode-dialog.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    selector: 'redaction-help-mode-dialog',
-    templateUrl: './help-mode-dialog.component.html',
-    styleUrls: ['./help-mode-dialog.component.scss']
-})
-export class HelpModeDialogComponent {
-    constructor() {}
-}
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.html b/apps/red-ui/src/app/components/help-mode/help-mode.component.html
deleted file mode 100644
index 2e86423f1..000000000
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<div class="help-button" *ngIf="!helpModeService.isHelpModeActive" (click)="helpModeService.activateHelpMode()">
-    <mat-icon svgIcon="red:help-outline"></mat-icon>
-    <div class="text">{{ 'help-mode.button-text' | translate }}</div>
-</div>
-<div class="help-mode-border" *ngIf="helpModeService.isHelpModeActive">
-    <div class="bottom">
-        <p class="heading">{{ 'help-mode.text' | translate }}</p>
-        <a class="instructions" *ngIf="!helpModeService.helpModeDialogIsOpened" (click)="helpModeService.openHelpModeDialog()">
-            {{ 'help-mode.instructions' | translate }}
-        </a>
-        <div class="close">
-            (esc)
-            <iqser-circle-button
-                class="dialog-close"
-                icon="iqser:close"
-                (click)="helpModeService.deactivateHelpMode()"
-            ></iqser-circle-button>
-        </div>
-    </div>
-</div>
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.scss b/apps/red-ui/src/app/components/help-mode/help-mode.component.scss
deleted file mode 100644
index 6b4d04a32..000000000
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-@import '../../../assets/styles/variables';
-
-.help-button {
-    width: 44px;
-    height: 40px;
-    position: absolute;
-    bottom: 20px;
-    right: 0;
-    z-index: 1;
-    background: $green-2;
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
-    box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.25s;
-}
-
-.help-button:hover {
-    cursor: pointer;
-    width: fit-content;
-    padding-left: 10px;
-    padding-right: 10px;
-
-    .text {
-        display: block;
-    }
-
-    mat-icon {
-        padding-right: 8px;
-    }
-}
-
-.text {
-    display: none;
-}
-
-.help-mode-border {
-    box-sizing: border-box;
-    height: 100%;
-    width: 100%;
-    border-left: 8px solid $green-2;
-    border-right: 8px solid $green-2;
-    border-top: 8px solid $green-2;
-    border-bottom: 60px solid $green-2;
-    z-index: 10;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-
-    .bottom {
-        position: fixed;
-        height: 60px;
-        width: 95%;
-        bottom: 0;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        pointer-events: visiblePainted;
-
-        a {
-            color: black;
-            text-decoration: underline;
-        }
-
-        .close {
-            display: flex;
-            align-items: center;
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/components/help-mode/help-mode.component.ts b/apps/red-ui/src/app/components/help-mode/help-mode.component.ts
deleted file mode 100644
index c50754e22..000000000
--- a/apps/red-ui/src/app/components/help-mode/help-mode.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component, HostListener } from '@angular/core';
-import { HelpModeService } from '@shared/services/help-mode.service';
-
-@Component({
-    selector: 'redaction-help-mode',
-    templateUrl: './help-mode.component.html',
-    styleUrls: ['./help-mode.component.scss']
-})
-export class HelpModeComponent {
-    constructor(readonly helpModeService: HelpModeService) {}
-
-    @HostListener('document:keydown.escape') onEscKeydownHandler() {
-        if (!this.helpModeService.helpModeDialogIsOpened) {
-            this.helpModeService.deactivateHelpMode();
-        }
-    }
-
-    @HostListener('document:keydown.h', ['$event']) onHKeydownHandler(event) {
-        const node = event?.target?.nodeName?.toLocaleLowerCase();
-        if (!this.helpModeService.isHelpModeActive && node !== 'input' && node !== 'textarea') {
-            this.helpModeService.activateHelpMode();
-        }
-    }
-
-    @HostListener('click') onClick() {
-        if (this.helpModeService.isHelpModeActive) {
-            this.helpModeService.highlightHelperElements();
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
index ed99585ad..a996ce166 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
@@ -15,7 +15,7 @@ import { AnnotationWrapper } from '@models/file/annotation.wrapper';
 import { AnnotationProcessingService } from '../../services/annotation-processing.service';
 import { MatDialogRef, MatDialogState } from '@angular/material/dialog';
 import scrollIntoView from 'scroll-into-view-if-needed';
-import { CircleButtonTypes, Debounce, FilterService, IconButtonTypes, NestedFilter } from '@iqser/common-ui';
+import { CircleButtonTypes, Debounce, FilterService, IconButtonTypes, IqserEventTarget, NestedFilter } from '@iqser/common-ui';
 import { FileDataModel } from '@models/file/file-data.model';
 import { CommentsComponent } from '../comments/comments.component';
 import { PermissionsService } from '@services/permissions.service';
@@ -26,10 +26,6 @@ import { map } from 'rxjs/operators';
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 
-interface Target extends EventTarget {
-    localName: string;
-}
-
 @Component({
     selector: 'redaction-file-workload',
     templateUrl: './file-workload.component.html',
@@ -159,7 +155,7 @@ export class FileWorkloadComponent {
     }
 
     annotationClicked(annotation: AnnotationWrapper, $event: MouseEvent): void {
-        if (($event.target as Target).localName === 'input') return;
+        if (($event.target as IqserEventTarget).localName === 'input') return;
         this.pagesPanelActive = false;
         this.logAnnotation(annotation);
         if (this.isSelected(annotation)) {
@@ -180,7 +176,7 @@ export class FileWorkloadComponent {
         if (
             !ALL_HOTKEY_ARRAY.includes($event.key) ||
             this.dialogRef?.getState() === MatDialogState.OPEN ||
-            ($event.target as Target).localName === 'input'
+            ($event.target as IqserEventTarget).localName === 'input'
         ) {
             return;
         }
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index bb815c653..cb2a0faa6 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -1,7 +1,7 @@
 <div class="page-header">
     <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
 
-    <div *ngIf="filters$ | async as filters" class="filters" redactionHelpMode="filters">
+    <div *ngIf="filters$ | async as filters" class="filters" iqserHelpMode="filters">
         <div *ngIf="filters.length && searchPosition !== searchPositions.beforeFilters" translate="filters.filter-by"></div>
 
         <ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
@@ -23,7 +23,7 @@
                 [icon]="config.icon"
                 [label]="config.label | translate"
                 [type]="config.type"
-                redactionHelpMode="new-dossier"
+                iqserHelpMode="new-dossier"
             ></iqser-icon-button>
         </ng-container>
 
diff --git a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts b/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
deleted file mode 100644
index 710433355..000000000
--- a/apps/red-ui/src/app/modules/shared/directives/help-mode.directive.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core';
-import { HelpModeService } from '@shared/services/help-mode.service';
-import * as links from '../../../../assets/help-mode/links.json';
-import { LanguageService } from '@i18n/language.service';
-
-@Directive({
-    selector: '[redactionHelpMode]',
-    exportAs: 'redactionHelpMode'
-})
-export class HelpModeDirective implements OnInit {
-    @Input('redactionHelpMode') elementName: string;
-
-    constructor(
-        private readonly _elementRef: ElementRef,
-        private readonly _renderer: Renderer2,
-        private readonly _helpModeService: HelpModeService,
-        private readonly _languageService: LanguageService
-    ) {}
-
-    ngOnInit(): void {
-        this._createHelperElement();
-    }
-
-    private _createHelperElement() {
-        const element = this._elementRef.nativeElement;
-
-        const helperElement = this._renderer.createElement('div');
-        this._renderer.addClass(helperElement, 'help-mode-on-mouse-over');
-        this._renderer.addClass(helperElement, `help-mode-on-mouse-over-${this.elementName}`);
-
-        this._helpModeService.addElement(this.elementName, element, helperElement);
-    }
-
-    @HostListener('click') onClick(): void {
-        if (this._helpModeService.isHelpModeActive) {
-            const currentLocale = this._languageService.currentLanguage;
-            window.open(links[this.elementName][currentLocale]);
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts b/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
deleted file mode 100644
index ead68d7c8..000000000
--- a/apps/red-ui/src/app/modules/shared/services/help-mode.service.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';
-import { HelpModeDialogComponent } from '@components/help-mode-dialog/help-mode-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
-
-interface Helper {
-    readonly element: HTMLElement;
-    readonly helperElement: HTMLElement;
-}
-
-interface HelpElement {
-    [key: string]: Helper;
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class HelpModeService {
-    isHelpModeActive = false;
-    helpModeDialogIsOpened = false;
-
-    private _elements: HelpElement = {};
-
-    private readonly _renderer: Renderer2;
-
-    constructor(private readonly _dialog: MatDialog, private readonly _rendererFactory: RendererFactory2) {
-        this._renderer = this._rendererFactory.createRenderer(null, null);
-    }
-
-    openHelpModeDialog() {
-        this.helpModeDialogIsOpened = true;
-
-        const ref = this._dialog.open(HelpModeDialogComponent, {
-            width: '600px'
-        });
-
-        ref.afterClosed().subscribe(() => {
-            this.helpModeDialogIsOpened = false;
-        });
-    }
-
-    activateHelpMode() {
-        this.isHelpModeActive = true;
-        this.openHelpModeDialog();
-        this._enableHelperElements();
-    }
-
-    deactivateHelpMode() {
-        this.isHelpModeActive = false;
-        this._disableHelperElements();
-    }
-
-    highlightHelperElements() {
-        for (const { helperElement } of Object.values(this._elements)) {
-            this._renderer.addClass(helperElement, 'highlight');
-            setTimeout(() => {
-                this._renderer.removeClass(helperElement, 'highlight');
-            }, 500);
-        }
-    }
-
-    addElement(elementName: string, element: HTMLElement, helperElement: HTMLElement) {
-        this._elements[elementName] = { element, helperElement };
-    }
-
-    private _enableHelperElements() {
-        for (const { element, helperElement } of Object.values(this._elements)) {
-            this._renderer.setStyle(element, 'position', 'relative');
-            this._renderer.appendChild(element, helperElement);
-        }
-    }
-
-    private _disableHelperElements() {
-        for (const { element, helperElement } of Object.values(this._elements)) {
-            this._renderer.removeStyle(element, 'position');
-            this._renderer.removeChild(element, helperElement);
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index 8a2b0a555..5a0ee014a 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -27,7 +27,6 @@ import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { AssignUserDropdownComponent } from './components/assign-user-dropdown/assign-user-dropdown.component';
 import { PageHeaderComponent } from './components/page-header/page-header.component';
 import { DatePipe } from '@shared/pipes/date.pipe';
-import { HelpModeDirective } from '@shared/directives/help-mode.directive';
 
 const buttons = [FileDownloadBtnComponent, UserButtonComponent];
 
@@ -50,7 +49,7 @@ const components = [
     ...buttons
 ];
 
-const utils = [DatePipe, HasScrollbarDirective, NavigateLastDossiersScreenDirective, HelpModeDirective];
+const utils = [DatePipe, HasScrollbarDirective, NavigateLastDossiersScreenDirective];
 
 const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, CommonUiModule];
 
diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss
deleted file mode 100644
index 2b1824205..000000000
--- a/apps/red-ui/src/assets/styles/red-dialog.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import 'variables';
-
-.mat-dialog-container {
-    color: $accent;
-    padding: 0 !important;
-    border-radius: 8px !important;
-}
-
-.dialog {
-    position: relative;
-    min-height: 80px;
-
-    .dialog-close {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-    }
-
-    .dialog-header {
-        padding: 32px 60px 0 32px;
-    }
-
-    .dialog-content {
-        padding: 24px 32px 40px;
-    }
-
-    .dialog-actions {
-        height: 81px;
-        box-sizing: border-box;
-        border-top: 1px solid $separator;
-        padding: 0 32px;
-        align-items: center;
-
-        display: flex;
-
-        > * {
-            margin-right: 16px;
-        }
-    }
-}
diff --git a/apps/red-ui/src/assets/styles/red-text-styles.scss b/apps/red-ui/src/assets/styles/red-text-styles.scss
index 554f5a160..44c49a3c2 100644
--- a/apps/red-ui/src/assets/styles/red-text-styles.scss
+++ b/apps/red-ui/src/assets/styles/red-text-styles.scss
@@ -29,18 +29,6 @@ pre {
     line-height: 29px;
 }
 
-.heading-l {
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 24px;
-}
-
-.heading {
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 600;
-}
-
 .info {
     font-size: 13px;
     line-height: 18px;
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index e50df826b..73ba42b37 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -3,7 +3,6 @@
 @import 'red-material-theme';
 @import 'red-page-layout';
 @import 'red-text-styles';
-@import 'red-dialog';
 @import 'red-select';
 @import 'red-autocomplete';
 @import 'red-list';

From 02ff2d345d5b12f9993d0870b4cac8c6d41ec5cb Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Mon, 23 Aug 2021 13:11:35 +0300
Subject: [PATCH 07/11] update help mode

---
 .../base-screen/base-screen.component.html           |  2 +-
 apps/red-ui/src/app/modules/icons/icons.module.ts    |  1 -
 .../red-ui/src/assets/icons/general/help-outline.svg | 12 ------------
 3 files changed, 1 insertion(+), 14 deletions(-)
 delete mode 100644 apps/red-ui/src/assets/icons/general/help-outline.svg

diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index c1a5ff6a5..440e53047 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -1,4 +1,4 @@
-<redaction-help-mode *ngIf="userPreferenceService.areDevFeaturesEnabled"></redaction-help-mode>
+<iqser-help-mode *ngIf="userPreferenceService.areDevFeaturesEnabled"></iqser-help-mode>
 
 <div class="red-top-bar">
     <div class="top-bar-row">
diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts
index 7b20094a0..d7edbd2af 100644
--- a/apps/red-ui/src/app/modules/icons/icons.module.ts
+++ b/apps/red-ui/src/app/modules/icons/icons.module.ts
@@ -38,7 +38,6 @@ export class IconsModule {
             'expand',
             'folder',
             'fullscreen',
-            'help-outline',
             'html-file',
             'info',
             'lightning',
diff --git a/apps/red-ui/src/assets/icons/general/help-outline.svg b/apps/red-ui/src/assets/icons/general/help-outline.svg
deleted file mode 100644
index 2fd05c35b..000000000
--- a/apps/red-ui/src/assets/icons/general/help-outline.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Help-Mode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="01.-Help-button" transform="translate(-1408.000000, -645.000000)" fill="#283241" fill-rule="nonzero">
-            <g id="help-button" transform="translate(1294.000000, 635.000000)">
-                <g id="help" transform="translate(114.000000, 10.000000)">
-                    <path d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

From dd642a69db4426e8a1708cb2cb262f50c55dcb72 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Mon, 23 Aug 2021 18:16:47 +0300
Subject: [PATCH 08/11] update common ui

---
 apps/red-ui/src/app/app.module.ts | 3 ++-
 libs/common-ui                    | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index fef2bec0e..6d9101e6b 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -36,7 +36,7 @@ import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight
 import { PruningTranslationLoader } from '@utils/pruning-translation-loader';
 import { DatePipe } from '@shared/pipes/date.pipe';
 import * as links from '../assets/help-mode/links.json';
-import { HELP_DOCS } from '@iqser/common-ui';
+import { HELP_DOCS, IqserHelpModeModule } from '@iqser/common-ui';
 
 export function httpLoaderFactory(httpClient: HttpClient) {
     return new PruningTranslationLoader(httpClient, '/assets/i18n/', '.json');
@@ -76,6 +76,7 @@ const components = [
         ApiModule,
         AppRoutingModule,
         MonacoEditorModule,
+        IqserHelpModeModule,
         ToastrModule.forRoot({
             closeButton: true,
             enableHtml: true,
diff --git a/libs/common-ui b/libs/common-ui
index c20bac823..7d14fc27f 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit c20bac823277e659c1c9797bdd034a9f5b2fc539
+Subproject commit 7d14fc27fba7cca319f0552ade4ffe0d8cd08866

From 0b33fad656730f1418afa5d6640e3d6cb3890838 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 23 Aug 2021 18:08:54 +0200
Subject: [PATCH 09/11] No notifications message & some other improvements

---
 .../notifications.component.html              | 11 +++-
 .../notifications.component.scss              |  1 +
 .../notifications/notifications.component.ts  | 66 ++++---------------
 .../src/app/models/notification-types.ts      | 15 +++++
 .../empty-state/empty-state.component.html    |  2 +-
 .../notifications-translations.ts             | 16 +++++
 apps/red-ui/src/assets/i18n/de.json           |  6 +-
 apps/red-ui/src/assets/i18n/en.json           | 43 ++++++------
 apps/red-ui/src/assets/styles/red-menu.scss   |  2 +
 apps/red-ui/src/assets/styles/red-select.scss | 21 +++---
 10 files changed, 92 insertions(+), 91 deletions(-)
 create mode 100644 apps/red-ui/src/app/models/notification-types.ts
 create mode 100644 apps/red-ui/src/app/translations/notifications-translations.ts

diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index bd15772d8..fb790d059 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -1,10 +1,17 @@
 <iqser-circle-button [matMenuTriggerFor]="overlay" [showDot]="hasUnreadNotifications" icon="red:notification"></iqser-circle-button>
 <mat-menu #overlay="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before">
+    <redaction-empty-state
+        *ngIf="!groupedNotifications.length"
+        [horizontalPadding]="40"
+        [text]="'notifications.no-data' | translate"
+        [verticalPadding]="0"
+    ></redaction-empty-state>
+
     <div *ngFor="let group of groupedNotifications">
         <div class="all-caps-label">{{ group.dateString }}</div>
         <div
-            *ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"
             (click)="markRead(notification, $event)"
+            *ngFor="let notification of group.notifications | sortBy: 'desc':'creationDate'"
             [class.unread]="!notification.readDate"
             class="notification"
             mat-menu-item
@@ -16,7 +23,7 @@
             </div>
             <div
                 (click)="markRead(notification, $event, !notification.readDate)"
-                [matTooltip]="(notification.readDate ? 'notifications.mark-unread' : 'notifications.mark-read') | translate"
+                [matTooltip]="'notifications.mark-as' | translate: { type: notification.readDate ? 'unread' : 'read' }"
                 class="dot"
                 matTooltipPosition="before"
             ></div>
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.scss b/apps/red-ui/src/app/components/notifications/notifications.component.scss
index 9b9bf34d1..22cac0d80 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.scss
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.scss
@@ -9,6 +9,7 @@
 
     .notifications-menu {
         min-width: 400px !important;
+        max-width: 413px !important;
         padding: 0 8px 16px;
         margin-right: 8px;
         max-height: calc(100vh - 200px);
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.ts b/apps/red-ui/src/app/components/notifications/notifications.component.ts
index b790e6380..0b8d4b06e 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.ts
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.ts
@@ -1,25 +1,13 @@
 import { Component } from '@angular/core';
 import * as moment from 'moment';
 import { TranslateService } from '@ngx-translate/core';
-import { NotificationControllerService, Notification, NotificationResponse } from '@redaction/red-ui-http';
+import { Notification, NotificationControllerService, NotificationResponse } from '@redaction/red-ui-http';
 import { DatePipe } from '@shared/pipes/date.pipe';
 import { AppStateService } from '@state/app-state.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
-
-enum NotificationType {
-    ASSIGN_REVIEWER = 'ASSIGN_REVIEWER',
-    ASSIGN_APPROVER = 'ASSIGN_APPROVER',
-    UNASSIGNED_FROM_FILE = 'UNASSIGNED_FROM_FILE',
-    DOCUMENT_APPROVED = 'DOCUMENT_APPROVED',
-    DOSSIER_OWNER_SET = 'DOSSIER_OWNER_SET',
-    DOSSIER_OWNER_REMOVED = 'DOSSIER_OWNER_REMOVED',
-    USER_BECOMES_DOSSIER_MEMBER = 'USER_BECOMES_DOSSIER_MEMBER',
-    USER_REMOVED_AS_DOSSIER_MEMBER = 'USER_REMOVED_AS_DOSSIER_MEMBER',
-    USER_PROMOTED_TO_APPROVER = 'USER_PROMOTED_TO_APPROVER',
-    USER_DEGRADED_TO_REVIEWER = 'USER_DEGRADED_TO_REVIEWER',
-    DOSSIER_OWNER_DELETED = 'DOSSIER_OWNER_DELETED'
-}
+import { NotificationType, NotificationTypeEnum } from '@models/notification-types';
+import { notificationsTranslations } from '../../translations/notifications-translations';
 
 @Component({
     selector: 'redaction-notifications',
@@ -53,37 +41,22 @@ export class NotificationsComponent {
     }
 
     getNotificationMessage(notification: Notification) {
-        switch (notification.notificationType) {
-            case NotificationType.ASSIGN_REVIEWER:
-                return this._translate(notification, _('notification.assign-reviewer'));
-            case NotificationType.ASSIGN_APPROVER:
-                return this._translate(notification, _('notification.assign-approver'));
-            case NotificationType.DOCUMENT_APPROVED:
-                return this._translate(notification, _('notification.document-approved'));
-            case NotificationType.UNASSIGNED_FROM_FILE:
-                return this._translate(notification, _('notification.unassigned-from-file'));
-            case NotificationType.DOSSIER_OWNER_SET:
-                return this._translate(notification, _('notification.dossier-owner-set'));
-            case NotificationType.DOSSIER_OWNER_REMOVED:
-                return this._translate(notification, _('notification.dossier-owner-removed'));
-            case NotificationType.DOSSIER_OWNER_DELETED:
-                return this._translate(notification, _('notification.dossier-owner-deleted'));
-            case NotificationType.USER_BECOMES_DOSSIER_MEMBER:
-                return this._translate(notification, _('notification.user-becomes-dossier-member'));
-            case NotificationType.USER_REMOVED_AS_DOSSIER_MEMBER:
-                return this._translate(notification, _('notification.user-removed-as-dossier-member'));
-            case NotificationType.USER_PROMOTED_TO_APPROVER:
-                return this._translate(notification, _('notification.user-promoted-to-approver'));
-            case NotificationType.USER_DEGRADED_TO_REVIEWER:
-                return this._translate(notification, _('notification.user-denoted-to-reviewer'));
+        return this._translate(notification, notificationsTranslations[notification.notificationType]);
+    }
 
-            default:
-                return '';
+    async markRead(notification: Notification, $event, isRead: boolean = true) {
+        $event.stopPropagation();
+        const ids = [notification.notificationId];
+        await this._notificationControllerService.toggleNotificationRead(ids, isRead).toPromise();
+        if (isRead) {
+            notification.readDate = moment().format('YYYY-MM-DDTHH:mm:ss Z');
+        } else {
+            notification.readDate = null;
         }
     }
 
     private _isSupportedType(notification: Notification) {
-        return Object.values(<any>NotificationType).includes(notification.notificationType);
+        return Object.values(NotificationTypeEnum).includes(<NotificationType>notification.notificationType);
     }
 
     private _getDossierHref(dossierId: string) {
@@ -120,17 +93,6 @@ export class NotificationsComponent {
         this.groupedNotifications = this.groupedNotifications.reverse();
     }
 
-    async markRead(notification: Notification, $event, isRead: boolean = true) {
-        $event.stopPropagation();
-        const ids = [notification.notificationId];
-        await this._notificationControllerService.toggleNotificationRead(ids, isRead).toPromise();
-        if (isRead) {
-            notification.readDate = moment().format('YYYY-MM-DDTHH:mm:ss Z');
-        } else {
-            notification.readDate = null;
-        }
-    }
-
     private _getDossierName(dossierId: string | undefined) {
         const dossier = this._appStateService.getDossierById(dossierId);
         return dossier?.dossierName || this._translateService.instant(_('dossier'));
diff --git a/apps/red-ui/src/app/models/notification-types.ts b/apps/red-ui/src/app/models/notification-types.ts
new file mode 100644
index 000000000..87f258972
--- /dev/null
+++ b/apps/red-ui/src/app/models/notification-types.ts
@@ -0,0 +1,15 @@
+export enum NotificationTypeEnum {
+    ASSIGN_REVIEWER = 'ASSIGN_REVIEWER',
+    ASSIGN_APPROVER = 'ASSIGN_APPROVER',
+    UNASSIGNED_FROM_FILE = 'UNASSIGNED_FROM_FILE',
+    DOCUMENT_APPROVED = 'DOCUMENT_APPROVED',
+    DOSSIER_OWNER_SET = 'DOSSIER_OWNER_SET',
+    DOSSIER_OWNER_REMOVED = 'DOSSIER_OWNER_REMOVED',
+    USER_BECOMES_DOSSIER_MEMBER = 'USER_BECOMES_DOSSIER_MEMBER',
+    USER_REMOVED_AS_DOSSIER_MEMBER = 'USER_REMOVED_AS_DOSSIER_MEMBER',
+    USER_PROMOTED_TO_APPROVER = 'USER_PROMOTED_TO_APPROVER',
+    USER_DEGRADED_TO_REVIEWER = 'USER_DEGRADED_TO_REVIEWER',
+    DOSSIER_OWNER_DELETED = 'DOSSIER_OWNER_DELETED'
+}
+
+export type NotificationType = NotificationTypeEnum;
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
index 37b31da41..cc9bca594 100644
--- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.html
@@ -6,7 +6,7 @@
     }"
     class="empty-state"
 >
-    <mat-icon [svgIcon]="icon"></mat-icon>
+    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
     <div class="ng-content-wrapper heading-l">
         <ng-content></ng-content>
     </div>
diff --git a/apps/red-ui/src/app/translations/notifications-translations.ts b/apps/red-ui/src/app/translations/notifications-translations.ts
new file mode 100644
index 000000000..a78779bb6
--- /dev/null
+++ b/apps/red-ui/src/app/translations/notifications-translations.ts
@@ -0,0 +1,16 @@
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { NotificationType, NotificationTypeEnum } from '@models/notification-types';
+
+export const notificationsTranslations: { [key in NotificationType]: string } = {
+    [NotificationTypeEnum.ASSIGN_APPROVER]: _('notification.assign-approver'),
+    [NotificationTypeEnum.ASSIGN_REVIEWER]: _('notification.assign-reviewer'),
+    [NotificationTypeEnum.DOCUMENT_APPROVED]: _('notification.document-approved'),
+    [NotificationTypeEnum.DOSSIER_OWNER_DELETED]: _('notification.dossier-owner-deleted'),
+    [NotificationTypeEnum.DOSSIER_OWNER_REMOVED]: _('notification.dossier-owner-removed'),
+    [NotificationTypeEnum.DOSSIER_OWNER_SET]: _('notification.dossier-owner-set'),
+    [NotificationTypeEnum.UNASSIGNED_FROM_FILE]: _('notification.unassigned-from-file'),
+    [NotificationTypeEnum.USER_BECOMES_DOSSIER_MEMBER]: _('notification.user-becomes-dossier-member'),
+    [NotificationTypeEnum.USER_DEGRADED_TO_REVIEWER]: _('notification.user-demoted-to-reviewer'),
+    [NotificationTypeEnum.USER_PROMOTED_TO_APPROVER]: _('notification.user-promoted-to-approver'),
+    [NotificationTypeEnum.USER_REMOVED_AS_DOSSIER_MEMBER]: _('notification.user-removed-as-dossier-member')
+} as const;
diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json
index 0028d47d0..6bc4c7da7 100644
--- a/apps/red-ui/src/assets/i18n/de.json
+++ b/apps/red-ui/src/assets/i18n/de.json
@@ -1097,11 +1097,7 @@
     }
   },
   "notifications": {
-    "mark-read": "als gelesen markieren",
-    "mark-unread": "als ungelesen markieren",
-    "today": "Heute",
-    "tomorrow": "Morgen",
-    "yesterday": "Gestern"
+    "mark-as": "als {type, select, read{gelesen} unread{ungelesen} other{}} markieren"
   },
   "overwrite-files-dialog": {
     "options": {
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index 6be48809b..318b5c45b 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -339,9 +339,6 @@
       "title": "Confirm Action"
     }
   },
-  "unknown": "Unknown",
-  "dossier": "Dossier",
-  "file": "File",
   "configurations": "Configurations",
   "confirm-delete-file-attribute": {
     "cancel": "Keep {type, select, single{Attribute} bulk{Attributes} other{}}",
@@ -362,13 +359,6 @@
     "warning": "Warning: this cannot be undone!"
   },
   "confirmation-dialog": {
-    "upload-report-template": {
-      "question": "Please choose if <b>{fileName}</b> is a single or multi-file report template",
-      "title": "Report Template Upload",
-      "deny-text": "Cancel Upload",
-      "confirmation-text": "Upload as single-file report",
-      "alternate-confirmation-text": "Upload as multi-file report"
-    },
     "assign-file-to-me": {
       "question": "This document is currently reviewed by someone else. Do you want to become the reviewer and assign yourself to this document?",
       "title": "Re-assign reviewer"
@@ -393,6 +383,13 @@
       "deny-text": "Keep {filesCount, plural, one{Document} other{Documents}}",
       "question": "Are you sure you want to delete {filesCount, plural, one{this document} other{these documents}}?",
       "title": "Delete {filesCount, plural, one{{fileName}} other{Selected Documents}}"
+    },
+    "upload-report-template": {
+      "alternate-confirmation-text": "Upload as multi-file report",
+      "confirmation-text": "Upload as single-file report",
+      "deny-text": "Cancel Upload",
+      "question": "Please choose if <b>{fileName}</b> is a single or multi-file report template",
+      "title": "Report Template Upload"
     }
   },
   "content": "Reason",
@@ -523,6 +520,7 @@
     "save": "Save Document Info",
     "title": "Introduce File Attributes"
   },
+  "dossier": "Dossier",
   "dossier-attribute-types": {
     "date": "Date",
     "image": "Image",
@@ -849,6 +847,7 @@
     "unsaved-changes": "You have unsaved changes. Save or revert before changing the tab."
   },
   "exact-date": "{day} {month} {year} at {hour}:{minute}",
+  "file": "File",
   "file-attribute-types": {
     "date": "Date",
     "number": "Number",
@@ -1041,11 +1040,11 @@
   "filters": {
     "assigned-people": "Assignee(s)",
     "dossier-templates": "Dossier Templates",
+    "empty": "Empty",
     "filter-by": "Filter:",
     "needs-work": "Workload",
     "people": "Dossier Member(s)",
-    "status": "Status",
-    "empty": "Empty"
+    "status": "Status"
   },
   "general-config-screen": {
     "actions": {
@@ -1186,22 +1185,19 @@
   "notification": {
     "assign-approver": "You have been assigned as approver for <b><a href=\"{fileHref}\" target=\"_blank\">{fileName}</a></b> in the <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a><b>!",
     "assign-reviewer": "You have been assigned as reviewer for <b><a href=\"{fileHref}\" target=\"_blank\">{fileName}</a></b> in the <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a><b>!",
-    "unassigned-from-file": "You have been unassigned from <b><a href=\"{fileHref}\" target=\"_blank\">{fileName}</a></b> in the <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a><b>!",
     "document-approved": " <b><a href=\"{fileHref}\" target=\"_blank\">{fileName}</a></b> has been approved!",
-    "dossier-owner-set": " <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b> owner changed to <b>{user}</b>!",
-    "dossier-owner-removed": "<b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b> owner removed!",
     "dossier-owner-deleted": "<b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b> owner removed!",
+    "dossier-owner-removed": "<b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b> owner removed!",
+    "dossier-owner-set": " <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b> owner changed to <b>{user}</b>!",
+    "unassigned-from-file": "You have been unassigned from <b><a href=\"{fileHref}\" target=\"_blank\">{fileName}</a></b> in the <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a><b>!",
     "user-becomes-dossier-member": "<b>{user}</b> joined dossier: <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b>!",
-    "user-removed-as-dossier-member": "<b>{user}</b> removed as a member of: <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b> !",
+    "user-demoted-to-reviewer": "<b>{user}</b> demoted to reviewer in dossier: <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b>!",
     "user-promoted-to-approver": "<b>{user}</b> promoted to approver in dossier: <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b>!",
-    "user-denoted-to-reviewer": "<b>{user}</b> denoted to reviewer in dossier: <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b>!"
+    "user-removed-as-dossier-member": "<b>{user}</b> removed as a member of: <b><a href=\"{dossierHref}\" target=\"_blank\">{dossierName}</a></b> !"
   },
   "notifications": {
-    "mark-read": "Mark as read",
-    "mark-unread": "Mark as unread",
-    "today": "Today",
-    "tomorrow": "Tomorrow",
-    "yesterday": "Yesterday"
+    "mark-as": "Mark as {type, select, read{read} unread{unread} other{}}",
+    "no-data": "You have no notifications."
   },
   "overwrite-files-dialog": {
     "options": {
@@ -1260,7 +1256,6 @@
   },
   "reports": "Reports",
   "reports-screen": {
-    "multi-file-report": "(Multi-file)",
     "description": "A short text explaining how to create report documents. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
     "descriptions": {
       "dossier-attributes": "This placeholder gets replaced with the value of the dossier attribute <code>{attribute}</code>.",
@@ -1290,6 +1285,7 @@
     "document-setup-description": "A short text explaining what placeholders are and how to use them in your report template. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.",
     "document-setup-heading": "Document Setup",
     "invalid-upload": "Invalid format selected for Upload! Supported formats are XLSX and DOCX",
+    "multi-file-report": "(Multi-file)",
     "report-documents": "Report Documents",
     "table-header": {
       "description": "Description",
@@ -1416,6 +1412,7 @@
     }
   },
   "type": "Type",
+  "unknown": "Unknown",
   "upload-status": {
     "dialog": {
       "actions": {
diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss
index 65b94e05f..567c4b3b8 100644
--- a/apps/red-ui/src/assets/styles/red-menu.scss
+++ b/apps/red-ui/src/assets/styles/red-menu.scss
@@ -1,4 +1,5 @@
 @import 'variables';
+@import 'red-mixins';
 
 .mat-menu-panel {
     border-radius: 8px !important;
@@ -6,6 +7,7 @@
     max-width: none !important;
     min-width: 180px !important;
     margin-top: 10px;
+    @include scroll-bar;
 
     .mat-menu-content:not(:empty) {
         padding-top: 8px;
diff --git a/apps/red-ui/src/assets/styles/red-select.scss b/apps/red-ui/src/assets/styles/red-select.scss
index 1a9c3b0ac..2efdd6510 100644
--- a/apps/red-ui/src/assets/styles/red-select.scss
+++ b/apps/red-ui/src/assets/styles/red-select.scss
@@ -1,14 +1,19 @@
 @import 'variables';
+@import 'red-mixins';
 
-.mat-select-panel .mat-option {
-    &:hover:not(.mat-option-disabled),
-    &:focus:not(.mat-option-disabled) {
-        background-color: $grey-6;
-    }
+.mat-select-panel {
+    @include scroll-bar;
 
-    &.mat-selected:not(.mat-option-multiple) {
-        background-color: rgba($primary, 0.2);
-        color: $accent;
+    .mat-option {
+        &:hover:not(.mat-option-disabled),
+        &:focus:not(.mat-option-disabled) {
+            background-color: $grey-6;
+        }
+
+        &.mat-selected:not(.mat-option-multiple) {
+            background-color: rgba($primary, 0.2);
+            color: $accent;
+        }
     }
 }
 

From 4869feae654a5d2f64dacda8edc74fb98a776cc5 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Tue, 24 Aug 2021 13:25:40 +0300
Subject: [PATCH 10/11] listable

---
 .../src/app/models/file/dossier-template-model.wrapper.ts  | 7 ++++++-
 apps/red-ui/src/app/models/file/file-status.wrapper.ts     | 7 ++++++-
 .../modules/admin/screens/trash/trash-screen.component.ts  | 7 ++++---
 .../screens/user-listing/user-listing-screen.component.ts  | 2 +-
 .../edit-dossier-deleted-documents.component.ts            | 7 ++++---
 .../screens/search-screen/search-screen.component.ts       | 5 +++--
 .../upload-download/model/download-status.wrapper.ts       | 7 ++++++-
 apps/red-ui/src/app/services/user.service.ts               | 5 +++--
 apps/red-ui/src/app/state/model/dossier.wrapper.ts         | 7 ++++++-
 libs/common-ui                                             | 2 +-
 libs/red-ui-http/src/lib/model/dossierAttributeConfig.ts   | 2 +-
 libs/red-ui-http/src/lib/model/fileAttributeConfig.ts      | 2 +-
 12 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/apps/red-ui/src/app/models/file/dossier-template-model.wrapper.ts b/apps/red-ui/src/app/models/file/dossier-template-model.wrapper.ts
index d1889902f..4feac23f7 100644
--- a/apps/red-ui/src/app/models/file/dossier-template-model.wrapper.ts
+++ b/apps/red-ui/src/app/models/file/dossier-template-model.wrapper.ts
@@ -1,11 +1,16 @@
 import { DossierTemplateModel } from '@redaction/red-ui-http';
+import { Listable } from '@iqser/common-ui';
 
-export class DossierTemplateModelWrapper {
+export class DossierTemplateModelWrapper implements Listable {
     dictionariesCount = 0;
     totalDictionaryEntries = 0;
 
     constructor(public dossierTemplateModel: DossierTemplateModel) {}
 
+    get id() {
+        return this.dossierTemplateModel.dossierTemplateId;
+    }
+
     get createdBy() {
         return this.dossierTemplateModel.createdBy;
     }
diff --git a/apps/red-ui/src/app/models/file/file-status.wrapper.ts b/apps/red-ui/src/app/models/file/file-status.wrapper.ts
index 7fa0c93e6..aeb911d41 100644
--- a/apps/red-ui/src/app/models/file/file-status.wrapper.ts
+++ b/apps/red-ui/src/app/models/file/file-status.wrapper.ts
@@ -1,3 +1,4 @@
+import { Listable } from '@iqser/common-ui';
 import { FileAttributesConfig, FileStatus } from '@redaction/red-ui-http';
 import { StatusSorter } from '@utils/sorters/status-sorter';
 
@@ -9,7 +10,7 @@ const processingStatuses = [
     FileStatus.StatusEnum.PROCESSING
 ] as const;
 
-export class FileStatusWrapper implements FileStatus {
+export class FileStatusWrapper implements FileStatus, Listable {
     readonly added = this.fileStatus.added;
     readonly allManualRedactionsApplied = this.fileStatus.allManualRedactionsApplied;
     readonly analysisDuration = this.fileStatus.analysisDuration;
@@ -82,6 +83,10 @@ export class FileStatusWrapper implements FileStatus {
     readonly isWorkable = !this.isProcessing && this.canBeOpened;
     readonly canBeOCRed = !this.excluded && !this.lastOCRTime && ['UNASSIGNED', 'UNDER_REVIEW', 'UNDER_APPROVAL'].includes(this.status);
 
+    get id() {
+        return this.fileId;
+    }
+
     private get _pages() {
         if (this.fileStatus.status === 'ERROR') {
             return -1;
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
index c1bf02a6d..25ce1d529 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
@@ -3,7 +3,7 @@ import { Dossier } from '@redaction/red-ui-http';
 import { LoadingService } from '@services/loading.service';
 import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
 import * as moment from 'moment';
-import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
+import { CircleButtonTypes, DefaultListingServices, Listable, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
 import { DossiersService } from '../../../dossier/services/dossiers.service';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { ConfirmationDialogInput, TitleColors } from '@shared/dialogs/confirmation-dialog/confirmation-dialog.component';
@@ -13,7 +13,7 @@ import { distinctUntilChanged, map } from 'rxjs/operators';
 import { getLeftDateTime } from '@utils/functions';
 import { RouterHistoryService } from '@services/router-history.service';
 
-interface DossierListItem extends Dossier {
+interface DossierListItem extends Dossier, Listable {
     readonly canRestore: boolean;
     readonly restoreDate: string;
 }
@@ -62,7 +62,7 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
     }
 
     private get _canRestoreSelected$(): Observable<boolean> {
-        return this.entitiesService.selected$.pipe(
+        return this.entitiesService.selectedEntities$.pipe(
             map(entities => entities.length && !entities.find(dossier => !dossier.canRestore)),
             distinctUntilChanged()
         );
@@ -118,6 +118,7 @@ export class TrashScreenComponent extends ListingComponent<DossierListItem> impl
     private _toListItem(dossier: Dossier): DossierListItem {
         const restoreDate = this._getRestoreDate(dossier.softDeletedTime);
         return {
+            id: dossier.dossierId,
             ...dossier,
             restoreDate,
             canRestore: this._canRestoreDossier(restoreDate)
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
index 783f2c31c..917b2e67d 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
@@ -50,7 +50,7 @@ export class UserListingScreenComponent extends ListingComponent<UserWrapper> im
     }
 
     private get _canDeleteSelected$(): Observable<boolean> {
-        const entities$ = this.entitiesService.selected$;
+        const entities$ = this.entitiesService.selectedEntities$;
         return entities$.pipe(map(all => !all.find(u => u.id === this.currentUser.id)));
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
index 8794c15a5..1eb051288 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/deleted-documents/edit-dossier-deleted-documents.component.ts
@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Injector, Input, OnInit, Output } from '@angular/core';
 import { EditDossierSectionInterface } from '../edit-dossier-section.interface';
 import { DossierWrapper } from '@state/model/dossier.wrapper';
-import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
+import { CircleButtonTypes, DefaultListingServices, Listable, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
 import { FileManagementControllerService, FileStatus, StatusControllerService } from '@redaction/red-ui-http';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { LoadingService } from '@services/loading.service';
@@ -14,7 +14,7 @@ import { ConfirmationDialogInput, TitleColors } from '@shared/dialogs/confirmati
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
 import { AppStateService } from '@state/app-state.service';
 
-interface FileListItem extends FileStatus {
+interface FileListItem extends FileStatus, Listable {
     readonly canRestore: boolean;
     readonly restoreDate: string;
 }
@@ -56,7 +56,7 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
     }
 
     private get _canRestoreSelected$(): Observable<boolean> {
-        return this.entitiesService.selected$.pipe(
+        return this.entitiesService.selectedEntities$.pipe(
             map(entities => entities.length && !entities.find(file => !file.canRestore)),
             distinctUntilChanged()
         );
@@ -123,6 +123,7 @@ export class EditDossierDeletedDocumentsComponent extends ListingComponent<FileL
     private _toListItem(file: FileStatus): FileListItem {
         const restoreDate = this._getRestoreDate(file.softDeleted);
         return {
+            id: file.fileId,
             ...file,
             restoreDate,
             canRestore: this._canRestoreFile(restoreDate)
diff --git a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
index efe7d6c3f..4c4489ce4 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts
@@ -1,5 +1,5 @@
 import { Component, Injector, OnDestroy } from '@angular/core';
-import { DefaultListingServices, keyChecker, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
+import { DefaultListingServices, keyChecker, Listable, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
 import { MatchedDocument, SearchControllerService, SearchResult } from '@redaction/red-ui-http';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { debounceTime, map, skip, switchMap, tap } from 'rxjs/operators';
@@ -14,7 +14,7 @@ import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { TranslateService } from '@ngx-translate/core';
 import { RouterHistoryService } from '@services/router-history.service';
 
-interface ListItem {
+interface ListItem extends Listable {
     readonly dossierId: string;
     readonly filename: string;
     readonly unmatched: string[] | null;
@@ -144,6 +144,7 @@ export class SearchScreenComponent extends ListingComponent<ListItem> implements
         if (!fileWrapper) return undefined;
 
         return {
+            id: fileId,
             dossierId,
             unmatched: unmatchedTerms || null,
             highlights,
diff --git a/apps/red-ui/src/app/modules/upload-download/model/download-status.wrapper.ts b/apps/red-ui/src/app/modules/upload-download/model/download-status.wrapper.ts
index 9d1742de0..8c3c0f914 100644
--- a/apps/red-ui/src/app/modules/upload-download/model/download-status.wrapper.ts
+++ b/apps/red-ui/src/app/modules/upload-download/model/download-status.wrapper.ts
@@ -1,10 +1,15 @@
 import { DownloadDetails, DownloadStatus } from '@redaction/red-ui-http';
+import { Listable } from '@iqser/common-ui';
 
-export class DownloadStatusWrapper {
+export class DownloadStatusWrapper implements Listable {
     inProgress: boolean;
 
     constructor(private _downloadStatus: DownloadStatus) {}
 
+    get id() {
+        return this._downloadStatus.storageId;
+    }
+
     get size() {
         const i = this._downloadStatus.fileSize === 0 ? 0 : Math.floor(Math.log(this._downloadStatus.fileSize) / Math.log(1024));
         return (this._downloadStatus.fileSize / Math.pow(1024, i)).toFixed(2) + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
diff --git a/apps/red-ui/src/app/services/user.service.ts b/apps/red-ui/src/app/services/user.service.ts
index 875d228e7..88d30aa6e 100644
--- a/apps/red-ui/src/app/services/user.service.ts
+++ b/apps/red-ui/src/app/services/user.service.ts
@@ -6,6 +6,7 @@ import { User, UserControllerService } from '@redaction/red-ui-http';
 import { wipeCaches } from '@redaction/red-cache';
 import { BASE_HREF } from '../tokens';
 import { Subject } from 'rxjs';
+import { Listable } from '@iqser/common-ui';
 
 export interface ProfileModel {
     username?: string;
@@ -15,8 +16,8 @@ export interface ProfileModel {
     language: string;
 }
 
-export class UserWrapper {
-    constructor(private readonly _user: KeycloakProfile | User, public roles: string[], readonly id: string) {}
+export class UserWrapper implements Listable {
+    constructor(private readonly _user: KeycloakProfile | User, public roles: string[], public id: string) {}
 
     email = this._user.email;
     username = this._user.username || this.email;
diff --git a/apps/red-ui/src/app/state/model/dossier.wrapper.ts b/apps/red-ui/src/app/state/model/dossier.wrapper.ts
index 55b92a9ea..b7cf48f4d 100644
--- a/apps/red-ui/src/app/state/model/dossier.wrapper.ts
+++ b/apps/red-ui/src/app/state/model/dossier.wrapper.ts
@@ -1,8 +1,9 @@
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import * as moment from 'moment';
 import { Dictionary, Dossier } from '@redaction/red-ui-http';
+import { Listable } from '@iqser/common-ui';
 
-export class DossierWrapper implements Dossier {
+export class DossierWrapper implements Dossier, Listable {
     readonly approverIds = this._dossier.approverIds;
     readonly date = this._dossier.date;
     readonly description = this._dossier.description;
@@ -42,6 +43,10 @@ export class DossierWrapper implements Dossier {
         this._recomputeFileStatus();
     }
 
+    get id() {
+        return this.dossierId;
+    }
+
     get files() {
         return this._files;
     }
diff --git a/libs/common-ui b/libs/common-ui
index 7d14fc27f..844e26577 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit 7d14fc27fba7cca319f0552ade4ffe0d8cd08866
+Subproject commit 844e2657774200f14f79ed5c75e06f2c6c554bb4
diff --git a/libs/red-ui-http/src/lib/model/dossierAttributeConfig.ts b/libs/red-ui-http/src/lib/model/dossierAttributeConfig.ts
index db5a38b26..16f90a718 100644
--- a/libs/red-ui-http/src/lib/model/dossierAttributeConfig.ts
+++ b/libs/red-ui-http/src/lib/model/dossierAttributeConfig.ts
@@ -11,8 +11,8 @@
  */
 
 export interface DossierAttributeConfig {
+    id: string;
     editable?: boolean;
-    id?: string;
     label?: string;
     placeholder?: string;
     type?: DossierAttributeConfig.TypeEnum;
diff --git a/libs/red-ui-http/src/lib/model/fileAttributeConfig.ts b/libs/red-ui-http/src/lib/model/fileAttributeConfig.ts
index ead5a338d..09e05543a 100644
--- a/libs/red-ui-http/src/lib/model/fileAttributeConfig.ts
+++ b/libs/red-ui-http/src/lib/model/fileAttributeConfig.ts
@@ -11,9 +11,9 @@
  */
 
 export interface FileAttributeConfig {
+    id: string;
     csvColumnHeader?: string;
     editable?: boolean;
-    id?: string;
     label?: string;
     placeholder?: string;
     primaryAttribute?: boolean;

From 11f157b3b15bdb082680e7d4f5770a5ebbde4110 Mon Sep 17 00:00:00 2001
From: Timo Bejan <timo.bejan.ext@iqser.com>
Date: Tue, 24 Aug 2021 13:33:42 +0300
Subject: [PATCH 11/11] Listable by ID instead of reference

---
 .../src/app/models/file/type-value.wrapper.ts |  7 ++++-
 ...-attributes-csv-import-dialog.component.ts | 28 +++++++++----------
 .../default-colors-screen.component.ts        |  5 ++--
 apps/red-ui/src/assets/config/config.json     |  4 +--
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/apps/red-ui/src/app/models/file/type-value.wrapper.ts b/apps/red-ui/src/app/models/file/type-value.wrapper.ts
index 0e9636b88..e1e593c0c 100644
--- a/apps/red-ui/src/app/models/file/type-value.wrapper.ts
+++ b/apps/red-ui/src/app/models/file/type-value.wrapper.ts
@@ -1,10 +1,15 @@
+import { Listable } from '@iqser/common-ui';
 import { TypeValue } from '@redaction/red-ui-http';
 
-export class TypeValueWrapper {
+export class TypeValueWrapper implements Listable {
     entries: string[] = [];
 
     constructor(public typeValue: TypeValue, public label?: string, public virtual?: boolean) {}
 
+    get id() {
+        return this.typeValue.type;
+    }
+
     get addToDictionaryAction() {
         return this.typeValue.addToDictionaryAction;
     }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index 57cd81b44..3f1762d14 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -1,16 +1,15 @@
-import { Component, Inject, Injector } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {Component, Inject, Injector} from '@angular/core';
+import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from '@angular/forms';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import * as Papa from 'papaparse';
-import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
-import { Observable } from 'rxjs';
-import { map, startWith } from 'rxjs/operators';
-import { Toaster } from '@iqser/common-ui';
-import { DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import {FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService} from '@redaction/red-ui-http';
+import {Observable} from 'rxjs';
+import {map, startWith} from 'rxjs/operators';
+import {DefaultListingServices, Listable, ListingComponent, TableColumnConfig, Toaster} from '@iqser/common-ui';
+import {marker as _} from '@biesbjerg/ngx-translate-extract-marker';
 
-export interface Field {
-    id?: string;
+export interface Field extends Listable {
+    id: string;
     csvColumn: string;
     name: string;
     type: FileAttributeConfig.TypeEnum;
@@ -76,7 +75,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<Fie
                 header: true,
                 delimiter: this.baseConfigForm.get('delimiter').value
             });
-            this.baseConfigForm.patchValue({ delimiter: this.parseResult.meta.delimiter });
+            this.baseConfigForm.patchValue({delimiter: this.parseResult.meta.delimiter});
 
             // Filter duplicate columns
             if (this.parseResult?.data?.length) {
@@ -189,7 +188,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<Fie
 
         try {
             await this._fileAttributesControllerService.setFileAttributesConfig(fileAttributes, this.data.dossierTemplateId).toPromise();
-            this._toaster.success(_('file-attributes-csv-import.save.success'), { params: { count: this.activeFields.length } });
+            this._toaster.success(_('file-attributes-csv-import.save.success'), {params: {count: this.activeFields.length}});
         } catch (e) {
             this._toaster.error(_('file-attributes-csv-import.save.error'));
         }
@@ -217,7 +216,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<Fie
             if ((this.parseResult?.meta?.fields || []).indexOf(control.value) !== -1) {
                 return null; /* valid option selected */
             }
-            return { invalidAutocompleteString: { value: control.value } };
+            return {invalidAutocompleteString: {value: control.value}};
         };
     }
 
@@ -225,6 +224,7 @@ export class FileAttributesCsvImportDialogComponent extends ListingComponent<Fie
         const sample = this.getSample(csvColumn);
         const isNumber = sample && !isNaN(sample);
         return {
+            id: btoa(csvColumn),
             csvColumn,
             name: csvColumn,
             type: isNumber ? FileAttributeConfig.TypeEnum.NUMBER : FileAttributeConfig.TypeEnum.TEXT,
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
index aff0306a4..9230eabac 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
@@ -4,13 +4,13 @@ import { Colors, DictionaryControllerService } from '@redaction/red-ui-http';
 import { ActivatedRoute } from '@angular/router';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { LoadingService } from '@services/loading.service';
-import { CircleButtonTypes, DefaultListingServices, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
+import { CircleButtonTypes, DefaultListingServices, Listable, ListingComponent, TableColumnConfig } from '@iqser/common-ui';
 import { DefaultColorType } from '@models/default-color-key.model';
 import { defaultColorsTranslations } from '../../translations/default-colors-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
 
-interface ListItem {
+interface ListItem extends Listable {
     readonly key: string;
     readonly value: string;
 }
@@ -72,6 +72,7 @@ export class DefaultColorsScreenComponent extends ListingComponent<ListItem> imp
         const data = await this._dictionaryControllerService.getColors(this._appStateService.activeDossierTemplateId).toPromise();
         this._colorsObj = data;
         const entities = Object.keys(data).map(key => ({
+            id: key,
             key,
             value: data[key]
         }));
diff --git a/apps/red-ui/src/assets/config/config.json b/apps/red-ui/src/assets/config/config.json
index 4b001a0b1..7131c849a 100644
--- a/apps/red-ui/src/assets/config/config.json
+++ b/apps/red-ui/src/assets/config/config.json
@@ -1,6 +1,6 @@
 {
-  "OAUTH_URL": "https://red-staging.iqser.cloud/auth/realms/redaction",
-  "API_URL": "https://red-staging.iqser.cloud/redaction-gateway-v1",
+  "OAUTH_URL": "https://dom1.iqser.cloud/auth/realms/redaction",
+  "API_URL": "https://dom1.iqser.cloud/redaction-gateway-v1",
   "OAUTH_CLIENT_ID": "redaction",
   "BACKEND_APP_VERSION": "4.4.40",
   "FRONTEND_APP_VERSION": "1.1",