Updated common-ui

apps/red-ui/src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import { AuthErrorComponent } from '@components/auth-error/auth-error.component';
 import { AuthGuard } from './modules/auth/auth.guard';
-import { CompositeRouteGuard } from '@iqser/common-ui';
+import { CompositeRouteGuard, CustomRouteReuseStrategy } from '@iqser/common-ui';
 import { RedRoleGuard } from './modules/auth/red-role.guard';
 import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
 import { RouteReuseStrategy, RouterModule } from '@angular/router';
@@ -8,7 +8,6 @@ import { NgModule } from '@angular/core';
 import { DownloadsListScreenComponent } from '@components/downloads-list-screen/downloads-list-screen.component';
 import { AppStateGuard } from '@state/app-state.guard';
 import { UserProfileScreenComponent } from '@components/user-profile/user-profile-screen.component';
-import { CustomRouteReuseStrategy } from '@utils/custom-route-reuse.strategy';
 
 const routes = [
     {

apps/red-ui/src/app/components/base-screen/base-screen.component.html

@@ -24,7 +24,7 @@
 
     <div *ngIf="currentUser.isUser" class="menu flex-2 visible-lg breadcrumbs-container">
         <a *ngIf="(isDossiersView$ | async) === false" class="breadcrumb back" redactionNavigateLastDossiersScreen>
-            <mat-icon svgIcon="red:expand"></mat-icon>
+            <mat-icon svgIcon="iqser:expand"></mat-icon>
             {{ 'top-bar.navigation-items.back' | translate }}
         </a>
 
@@ -37,7 +37,7 @@
                 translate="top-bar.navigation-items.dossiers"
             ></a>
 
-            <mat-icon *ngIf="appStateService.activeDossier" svgIcon="red:arrow-right"></mat-icon>
+            <mat-icon *ngIf="appStateService.activeDossier" svgIcon="iqser:arrow-right"></mat-icon>
 
             <a
                 *ngIf="appStateService.activeDossier"
@@ -49,7 +49,7 @@
                 {{ appStateService.activeDossier.dossierName }}
             </a>
 
-            <mat-icon *ngIf="appStateService.activeFile" svgIcon="red:arrow-right"></mat-icon>
+            <mat-icon *ngIf="appStateService.activeFile" svgIcon="iqser:arrow-right"></mat-icon>
 
             <a
                 *ngIf="appStateService.activeFile"

apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html

@@ -1,8 +1,5 @@
 <section>
-    <redaction-page-header
+    <iqser-page-header (closeAction)="routerHistoryService.navigateToLastDossiersScreen()" [showCloseButton]="true"></iqser-page-header>
-        (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
-        [showCloseButton]="true"
-    ></redaction-page-header>
 
     <div class="content-inner">
         <div class="content-container">

apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html

@@ -7,7 +7,7 @@
     ></a>
 
     <ng-container *ngIf="appStateService.activeDossierTemplate">
-        <mat-icon svgIcon="red:arrow-right"></mat-icon>
+        <mat-icon svgIcon="iqser:arrow-right"></mat-icon>
         <a
             [class.active]="!appStateService.activeDictionaryType"
             [routerLink]="'/main/admin/dossier-templates/' + appStateService.activeDossierTemplateId"
@@ -18,7 +18,7 @@
     </ng-container>
 
     <ng-container *ngIf="appStateService.activeDictionary">
-        <mat-icon svgIcon="red:arrow-right"></mat-icon>
+        <mat-icon svgIcon="iqser:arrow-right"></mat-icon>
         <a
             [routerLink]="
                 '/main/admin/dossier-templates/' +

apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html

@@ -2,7 +2,7 @@
     <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.expand' | translate"
-        icon="red:expand"
+        icon="iqser:expand"
         tooltipPosition="before"
     ></iqser-circle-button>
     <div class="all-caps-label" translate="user-stats.title"></div>
@@ -13,7 +13,7 @@
     <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.collapse' | translate"
-        icon="red:collapse"
+        icon="iqser:collapse"
         tooltipPosition="before"
     ></iqser-circle-button>
 </div>

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html

@@ -128,7 +128,7 @@
                     <div [translate]="'file-attributes-csv-import.csv-column'" class="all-caps-label"></div>
                     <iqser-circle-button
                         (click)="previewExpanded = !previewExpanded"
-                        [icon]="previewExpanded ? 'red:expand' : 'red:collapse'"
+                        [icon]="previewExpanded ? 'iqser:expand' : 'iqser:collapse'"
                     ></iqser-circle-button>
                 </div>
                 <div [class.hidden]="!previewExpanded" class="csv-part-content">

apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html

@@ -71,7 +71,7 @@
                 *ngIf="currentUser.isAdmin"
                 [label]="'dictionary-listing.add-new' | translate"
                 [type]="iconButtonTypes.primary"
-                icon="red:plus"
+                icon="iqser:plus"
             ></iqser-icon-button>
         </div>
     </div>

apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html

@@ -4,11 +4,11 @@
     <redaction-admin-side-nav type="settings"></redaction-admin-side-nav>
 
     <div>
-        <redaction-page-header
+        <iqser-page-header
             (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
             [pageLabel]="'digital-signature' | translate"
             [showCloseButton]="currentUser.isUser"
-        ></redaction-page-header>
+        ></iqser-page-header>
 
         <div class="content-inner">
             <div class="content-container">

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html

@@ -59,7 +59,7 @@
             *ngIf="currentUser.isAdmin"
             [label]="'dossier-attributes-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
-            icon="red:plus"
+            icon="iqser:plus"
         ></iqser-icon-button>
     </div>
 </ng-template>

apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html

@@ -4,11 +4,11 @@
     <redaction-admin-side-nav type="settings"></redaction-admin-side-nav>
 
     <div>
-        <redaction-page-header
+        <iqser-page-header
             (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
             [pageLabel]="'dossier-templates' | translate"
             [showCloseButton]="currentUser.isUser"
-        ></redaction-page-header>
+        ></iqser-page-header>
 
         <div class="content-inner">
             <div class="content-container">
@@ -56,7 +56,7 @@
             *ngIf="currentUser.isAdmin && userPreferenceService.areDevFeaturesEnabled"
             [label]="'dossier-templates-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
-            icon="red:plus"
+            icon="iqser:plus"
         ></iqser-icon-button>
     </div>
 </ng-template>

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html

@@ -69,7 +69,7 @@
             *ngIf="currentUser.isAdmin"
             [label]="'file-attributes-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
-            icon="red:plus"
+            icon="iqser:plus"
         ></iqser-icon-button>
     </div>
 </ng-template>

apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html

@@ -4,12 +4,12 @@
     <redaction-admin-side-nav type="settings"></redaction-admin-side-nav>
 
     <div>
-        <redaction-page-header
+        <iqser-page-header
             (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
             [buttonConfigs]="buttonConfigs"
             [pageLabel]="'license-information' | translate"
             [showCloseButton]="currentUser.isUser"
-        ></redaction-page-header>
+        ></iqser-page-header>
 
         <div class="content-inner">
             <div class="content-container">

apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.ts

@@ -3,8 +3,7 @@ import { LicenseReport, LicenseReportControllerService } from '@redaction/red-ui
 import { ConfigService } from '@services/config.service';
 import * as moment from 'moment';
 import { TranslateService } from '@ngx-translate/core';
-import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
+import { ButtonConfig, IconButtonTypes, LoadingService } from '@iqser/common-ui';
-import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { UserService } from '@services/user.service';
 import { RouterHistoryService } from '@services/router-history.service';

apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html

@@ -1,11 +1,11 @@
 <section>
     <div class="overlay-shadow"></div>
 
-    <redaction-page-header
+    <iqser-page-header
         (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [pageLabel]="'trash.label' | translate"
         [showCloseButton]="true"
-    ></redaction-page-header>
+    ></iqser-page-header>
 
     <div class="content-inner">
         <div class="content-container">

apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html

@@ -17,7 +17,7 @@
                     *ngIf="currentUser.isUserAdmin"
                     [label]="'user-listing.add-new' | translate"
                     [type]="iconButtonTypes.primary"
-                    icon="red:plus"
+                    icon="iqser:plus"
                 ></iqser-icon-button>
                 <iqser-circle-button
                     *ngIf="currentUser.isUser"

apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html

@@ -25,7 +25,7 @@
     *ngIf="permissionsService.canAddComment()"
     [placeholder]="'comments.add-comment' | translate"
     autocomplete="off"
-    icon="red:collapse"
+    icon="iqser:collapse"
     width="full"
 ></iqser-input-with-action>
 

apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts

@@ -8,7 +8,7 @@ import { FileDataModel } from '@models/file/file-data.model';
 import { PermissionsService } from '@services/permissions.service';
 import { WebViewerInstance } from '@pdftron/webviewer';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -43,10 +43,10 @@ export class FileWorkloadComponent {
     @Output() readonly actionPerformed = new EventEmitter<string>();
     displayedPages: number[] = [];
     pagesPanelActive = true;
+    readonly displayedAnnotations$: Observable<Map<number, AnnotationWrapper[]>>;
     private _annotations$ = new BehaviorSubject<AnnotationWrapper[]>([]);
     @ViewChild('annotationsElement') private readonly _annotationsElement: ElementRef;
     @ViewChild('quickNavigation') private readonly _quickNavigationElement: ElementRef;
-    readonly displayedAnnotations$: Observable<Map<number, AnnotationWrapper[]>>;
 
     constructor(
         private readonly _permissionsService: PermissionsService,

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/components/dossier-details/dossier-details.component.html

@@ -83,7 +83,7 @@
 <ng-template #collapsible let-action="action" let-tooltip="tooltip">
     <iqser-circle-button
         (action)="toggleCollapse.emit()"
-        [icon]="'red:' + action"
+        [icon]="'iqser:' + action"
         [tooltip]="tooltip"
         tooltipPosition="before"
     ></iqser-circle-button>

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.html

@@ -1,8 +1,7 @@
 <section *ngIf="!!currentDossier">
-    <redaction-page-header
+    <iqser-page-header
         (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [actionConfigs]="actionConfigs"
-        [fileAttributeConfigs]="fileAttributeConfigs"
         [showCloseButton]="true"
         [viewModeSelection]="viewModeSelection"
     >
@@ -30,7 +29,7 @@
             icon="red:upload"
             tooltipPosition="below"
         ></iqser-circle-button>
-    </redaction-page-header>
+    </iqser-page-header>
 
     <div class="overlay-shadow"></div>
 

apps/red-ui/src/app/modules/dossier/screens/dossier-overview/screen/dossier-overview-screen.component.ts

@@ -23,16 +23,18 @@ import { File } from '@models/file/file';
 import { UserService } from '@services/user.service';
 import { timer } from 'rxjs';
 import { tap } from 'rxjs/operators';
-import { convertFiles, Files, handleFileDrop, OnAttach, OnDetach } from '@utils/index';
+import { convertFiles, Files, handleFileDrop } from '@utils/index';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
-import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
 import {
+    ActionConfig,
     CircleButtonTypes,
     DefaultListingServices,
     ListingComponent,
     ListingModes,
     LoadingService,
     NestedFilter,
+    OnAttach,
+    OnDetach,
     TableColumnConfig,
     TableComponent,
     Toaster,

apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/config.service.ts

@@ -1,11 +1,10 @@
 import { Injectable, TemplateRef } from '@angular/core';
-import { IFilterGroup, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
+import { ButtonConfig, IFilterGroup, keyChecker, NestedFilter, TableColumnConfig } from '@iqser/common-ui';
 import { Dossier } from '@state/model/dossier';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { UserPreferenceService } from '@services/user-preference.service';
 import { UserService } from '@services/user.service';
-import { ButtonConfig } from '@shared/components/page-header/models/button-config.model';
 import { User } from '@models/user';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 import {
@@ -78,7 +77,7 @@ export class ConfigService {
                 label: _('dossier-listing.add-new'),
                 action: addDossier,
                 hide: !this._currentUser.isManager,
-                icon: 'red:plus',
+                icon: 'iqser:plus',
                 type: 'primary'
             }
         ];

apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.html

@@ -1,5 +1,5 @@
 <section>
-    <redaction-page-header [buttonConfigs]="buttonConfigs"></redaction-page-header>
+    <iqser-page-header [buttonConfigs]="buttonConfigs"></iqser-page-header>
 
     <div class="overlay-shadow"></div>
 

apps/red-ui/src/app/modules/dossier/screens/dossiers-listing/screen/dossiers-listing-screen.component.ts

@@ -10,8 +10,8 @@ import { timer } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { Router } from '@angular/router';
 import { DossiersDialogService } from '../../../services/dossiers-dialog.service';
-import { groupBy, OnAttach, OnDetach, StatusSorter } from '@utils/index';
+import { groupBy, StatusSorter } from '@utils/index';
-import { DefaultListingServices, ListingComponent, TableComponent } from '@iqser/common-ui';
+import { DefaultListingServices, ListingComponent, OnAttach, OnDetach, TableComponent } from '@iqser/common-ui';
 import { fileStatusTranslations } from '../../../translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ConfigService } from '../config.service';

apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts

@@ -10,6 +10,8 @@ import {
     FilterService,
     INestedFilter,
     LoadingService,
+    OnAttach,
+    OnDetach,
     processFilters,
     Toaster
 } from '@iqser/common-ui';
@@ -32,7 +34,6 @@ import { download } from '@utils/file-download-utils';
 import { ViewMode } from '@models/file/view-mode';
 import { FileWorkloadComponent } from '../../components/file-workload/file-workload.component';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
-import { OnAttach, OnDetach } from '@utils/custom-route-reuse.strategy';
 import { clearStamps, stampPDFPage } from '@utils/page-stamper';
 import { TranslateService } from '@ngx-translate/core';
 import { fileStatusTranslations } from '../../translations/file-status-translations';

apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.html

@@ -1,11 +1,11 @@
 <section *ngIf="searchResults$ | async">
-    <redaction-page-header
+    <iqser-page-header
         (closeAction)="routerHistoryService.navigateToLastDossiersScreen()"
         [searchPlaceholder]="'search.placeholder' | translate"
         [searchPosition]="searchPositions.beforeFilters"
         [searchWidth]="600"
         [showCloseButton]="true"
-    ></redaction-page-header>
+    ></iqser-page-header>
 
     <div class="overlay-shadow"></div>
 

apps/red-ui/src/app/modules/dossier/screens/search-screen/search-screen.component.ts

@@ -6,6 +6,7 @@ import {
     ListingComponent,
     LoadingService,
     NestedFilter,
+    SearchPositions,
     TableColumnConfig
 } from '@iqser/common-ui';
 import { List, MatchedDocument, SearchControllerService, SearchResult } from '@redaction/red-ui-http';
@@ -15,7 +16,6 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { AppStateService } from '@state/app-state.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
-import { SearchPositions } from '@shared/components/page-header/models/search-positions.type';
 import { TranslateService } from '@ngx-translate/core';
 import { RouterHistoryService } from '@services/router-history.service';
 

apps/red-ui/src/app/modules/dossier/shared/components/file-actions/file-actions.component.html

@@ -15,7 +15,7 @@
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.open-document' | translate"
             [type]="buttonType"
-            icon="red:collapse"
+            icon="iqser:collapse"
         ></iqser-circle-button>
 
         <iqser-circle-button

apps/red-ui/src/app/modules/icons/icons.module.ts

@@ -15,14 +15,12 @@ export class IconsModule {
             'ai',
             'analyse',
             'approved',
-            'arrow-right',
             'arrow-up',
             'assign',
             'assign-me',
             'attribute',
             'calendar',
             'case-sensitive',
-            'collapse',
             'color-picker',
             'comment',
             'comment-fill',
@@ -34,7 +32,6 @@ export class IconsModule {
             'enter',
             'exclude-pages',
             'exit-fullscreen',
-            'expand',
             'folder',
             'fullscreen',
             'html-file',
@@ -53,11 +50,8 @@ export class IconsModule {
             'ocr',
             'page',
             'pages',
-            'plus',
             'preview',
             'put-back',
-            'radio-indeterminate',
-            'radio-selected',
             'read-only',
             'ready-for-approval',
             'reason',
@@ -66,8 +60,6 @@ export class IconsModule {
             'rule',
             'secret',
             'status',
-            'status-collapse',
-            'status-expand',
             'status-info',
             'template',
             'thumb-down',

apps/red-ui/src/app/modules/shared/components/buttons/user-button/user-button.component.scss

@@ -1,6 +1,9 @@
 @use 'variables';
+@use 'common-buttons';
 
 :host {
+    @extend .user-button;
+
     button {
         padding: 0 10px 0 5px;
 

apps/red-ui/src/app/modules/shared/components/page-header/models/action-config.model.ts

@@ -1,5 +0,0 @@
-import { BaseHeaderConfig } from './base-config.model';
-
-export interface ActionConfig extends BaseHeaderConfig {
-    readonly action: ($event: MouseEvent) => void;
-}

apps/red-ui/src/app/modules/shared/components/page-header/models/base-config.model.ts

@@ -1,5 +0,0 @@
-export interface BaseHeaderConfig {
-    readonly label: string;
-    readonly icon?: string;
-    readonly hide?: boolean;
-}

apps/red-ui/src/app/modules/shared/components/page-header/models/button-config.model.ts

@@ -1,6 +0,0 @@
-import { IconButtonType } from '@iqser/common-ui';
-import { ActionConfig } from '@shared/components/page-header/models/action-config.model';
-
-export interface ButtonConfig extends ActionConfig {
-    readonly type?: IconButtonType;
-}

apps/red-ui/src/app/modules/shared/components/page-header/models/search-positions.type.ts

@@ -1,6 +0,0 @@
-export const SearchPositions = {
-    beforeFilters: 'beforeFilters',
-    afterFilters: 'afterFilters'
-} as const;
-
-export type SearchPosition = keyof typeof SearchPositions;

apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html

@@ -1,64 +0,0 @@
-<div class="page-header">
-    <div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
-
-    <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>
-
-        <ng-container *ngFor="let config of filters; trackBy: trackByLabel">
-            <iqser-popup-filter *ngIf="!config.hide" [primaryFiltersSlug]="config.slug"></iqser-popup-filter>
-        </ng-container>
-
-        <ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
-
-        <div (click)="resetFilters()" *ngIf="showResetFilters$ | async" class="reset-filters" translate="reset-filters"></div>
-    </div>
-
-    <div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
-        <ng-container [ngTemplateOutlet]="viewModeSelection"></ng-container>
-
-        <ng-container *ngFor="let config of buttonConfigs; trackBy: trackByLabel">
-            <iqser-icon-button
-                (action)="config.action($event)"
-                *ngIf="!config.hide"
-                [icon]="config.icon"
-                [label]="config.label | translate"
-                [type]="config.type"
-                iqserHelpMode="new-dossier"
-            ></iqser-icon-button>
-        </ng-container>
-
-        <ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
-            <iqser-circle-button
-                (action)="config.action($event)"
-                *ngIf="!config.hide"
-                [icon]="config.icon"
-                [tooltip]="config.label"
-                tooltipPosition="below"
-            ></iqser-circle-button>
-        </ng-container>
-
-        <!-- Extra custom actions here -->
-        <ng-content></ng-content>
-
-        <iqser-circle-button
-            (action)="closeAction.emit()"
-            *ngIf="showCloseButton"
-            [class.ml-6]="actionConfigs"
-            [tooltip]="'common.close' | translate"
-            icon="iqser:close"
-            tooltipPosition="below"
-        ></iqser-circle-button>
-    </div>
-</div>
-
-<ng-template #searchBar>
-    <iqser-input-with-action
-        *ngIf="searchPlaceholder && searchService"
-        [(value)]="searchService.searchValue"
-        [class.mr-8]="searchPosition === searchPositions.beforeFilters"
-        [placeholder]="searchPlaceholder"
-        [width]="searchWidth"
-    ></iqser-input-with-action>
-</ng-template>

apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.scss

@@ -1,5 +0,0 @@
-@import '../../../../../assets/styles/variables';
-
-.ml-6 {
-    margin-left: 6px;
-}

apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.ts

@@ -1,54 +0,0 @@
-import { Component, EventEmitter, Input, Optional, Output, TemplateRef } 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, IconButtonTypes, IListable, SearchService } from '@iqser/common-ui';
-import { distinctUntilChanged, map } from 'rxjs/operators';
-import { combineLatest, Observable, of } from 'rxjs';
-import { SearchPosition, SearchPositions } from '@shared/components/page-header/models/search-positions.type';
-import { IFileAttributeConfig } from '@redaction/red-ui-http';
-
-@Component({
-    selector: 'redaction-page-header',
-    templateUrl: './page-header.component.html',
-    styleUrls: ['./page-header.component.scss']
-})
-export class PageHeaderComponent<T extends IListable> {
-    readonly searchPositions = SearchPositions;
-    readonly iconButtonTypes = IconButtonTypes;
-
-    @Input() pageLabel: string;
-    @Input() showCloseButton: boolean;
-    @Input() actionConfigs: readonly ActionConfig[];
-    @Input() buttonConfigs: readonly ButtonConfig[];
-    @Input() fileAttributeConfigs: readonly IFileAttributeConfig[];
-    @Input() viewModeSelection: TemplateRef<unknown>;
-    @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$;
-
-    constructor(@Optional() readonly filterService: FilterService, @Optional() readonly searchService: SearchService<T>) {}
-
-    get _showResetFilters$(): Observable<boolean> {
-        if (!this.filterService) {
-            return of(false);
-        }
-
-        return combineLatest([this.filterService.showResetFilters$, this.searchService.valueChanges$]).pipe(
-            map(([showResetFilters, searchValue]) => showResetFilters || !!searchValue),
-            distinctUntilChanged()
-        );
-    }
-
-    resetFilters(): void {
-        this.filterService.reset();
-        this.searchService.reset();
-    }
-
-    trackByLabel<K extends { label?: string }>(index: number, item: K): string {
-        return item.label;
-    }
-}

apps/red-ui/src/app/modules/shared/components/team-members/team-members.component.html

@@ -20,9 +20,9 @@
         [class.large-spacing]="largeSpacing"
         [size]="32"
         [tooltip]="'dossier-details.assign-members' | translate"
-        class="member"
-        icon="red:plus"
         [type]="circleButtonTypes.primary"
+        class="member"
+        icon="iqser:plus"
     ></iqser-circle-button>
 </div>
 <div (click)="toggleExpandedTeam()" *ngIf="expandedTeam" class="all-caps-label see-less pointer" translate="dossier-details.see-less"></div>

apps/red-ui/src/app/modules/shared/shared.module.ts

@@ -21,7 +21,6 @@ import { DictionaryManagerComponent } from './components/dictionary-manager/dict
 import { SideNavComponent } from './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 { PageHeaderComponent } from './components/page-header/page-header.component';
 import { DatePipe } from './pipes/date.pipe';
 import { LongPressDirective } from './directives/long-press.directive';
 import { NamePipe } from './pipes/name.pipe';
@@ -41,7 +40,6 @@ const components = [
     SideNavComponent,
     DictionaryManagerComponent,
     AssignUserDropdownComponent,
-    PageHeaderComponent,
     TypeFilterComponent,
     TeamMembersComponent,
 

apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html

@@ -3,7 +3,7 @@
         <div class="title flex-1">
             {{ '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 [icon]="'iqser:status-' + (collapsed ? 'expand' : 'collapse')"></iqser-circle-button>
         <iqser-circle-button (action)="closeDialog()" icon="iqser:close"></iqser-circle-button>
     </div>
     <div [hidden]="collapsed" class="upload-download-list">
@@ -43,16 +43,16 @@
                         (action)="uploadItem(model)"
                         *ngIf="model.error && !model.sizeError"
                         [tooltip]="'upload-status.dialog.actions.re-upload' | translate"
+                        [type]="circleButtonTypes.dark"
                         icon="iqser:refresh"
                         tooltipPosition="before"
-                        [type]="circleButtonTypes.dark"
                     ></iqser-circle-button>
                     <iqser-circle-button
                         (action)="cancelItem(model)"
                         [tooltip]="'upload-status.dialog.actions.cancel' | translate"
+                        [type]="circleButtonTypes.dark"
                         icon="iqser:close"
                         tooltipPosition="before"
-                        [type]="circleButtonTypes.dark"
                     ></iqser-circle-button>
                 </div>
             </div>

apps/red-ui/src/app/utils/custom-route-reuse.strategy.ts

@@ -1,83 +0,0 @@
-import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
-import { Debounce } from '@iqser/common-ui';
-
-export interface OnAttach {
-    ngOnAttach(previousRoute: ActivatedRouteSnapshot);
-}
-
-export interface OnDetach {
-    ngOnDetach();
-}
-
-interface RouteStorageObject {
-    handle: DetachedRouteHandle;
-    previousRoute: ActivatedRouteSnapshot;
-}
-
-export class CustomRouteReuseStrategy implements RouteReuseStrategy {
-    private _storedRoutes: { [key: string]: RouteStorageObject } = {};
-
-    private static _removeTooltips(): void {
-        while (document.getElementsByTagName('mat-tooltip-component').length > 0) {
-            document.getElementsByTagName('mat-tooltip-component')[0].remove();
-        }
-    }
-
-    shouldDetach(route: ActivatedRouteSnapshot): boolean {
-        return !!route.routeConfig.data?.reuse && !!this._getKey(route);
-    }
-
-    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
-        if (handle === null) {
-            return;
-        }
-        CustomRouteReuseStrategy._removeTooltips();
-
-        const element: any = handle;
-
-        if (element?.componentRef?.instance?.ngOnDetach) {
-            this._onDetach(element.componentRef?.instance);
-        }
-
-        this._storedRoutes[this._getKey(route)] = {
-            handle: element as DetachedRouteHandle,
-            previousRoute: route
-        };
-    }
-
-    shouldAttach(route: ActivatedRouteSnapshot): boolean {
-        return !!this._storedRoutes[this._getKey(route)];
-    }
-
-    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
-        const key = this._getKey(route);
-        const element: any = this._storedRoutes[key]?.handle;
-
-        if (element?.componentRef?.instance?.ngOnAttach) {
-            this._onAttach(element.componentRef?.instance, this._storedRoutes[key].previousRoute);
-        }
-
-        return element as DetachedRouteHandle;
-    }
-
-    shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
-        return future.routeConfig === current.routeConfig || this._getKey(future) === this._getKey(current);
-    }
-
-    private _getKey(route: ActivatedRouteSnapshot): string {
-        return route.pathFromRoot
-            .map((el: ActivatedRouteSnapshot) => (el.routeConfig ? el.routeConfig.path + JSON.stringify(el.params) : ''))
-            .filter(str => str.length > 0)
-            .join('');
-    }
-
-    @Debounce()
-    private _onAttach(instance: OnAttach, previousRoute?: ActivatedRouteSnapshot) {
-        instance.ngOnAttach(previousRoute);
-    }
-
-    @Debounce()
-    private _onDetach(instance: OnDetach) {
-        instance.ngOnDetach();
-    }
-}

apps/red-ui/src/app/utils/index.ts

@@ -4,7 +4,6 @@ export * from './sorters/super-type-sorter';
 
 export * from './api-path-interceptor';
 export * from './configuration.initializer';
-export * from './custom-route-reuse.strategy';
 export * from './date-inputs-utils';
 export * from './file-download-utils';
 export * from './file-drop-utils';

apps/red-ui/src/assets/icons/general/arrow-right.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="right_expandable" stroke="none" stroke-width="1">
-        <polygon fill="currentColor" id="Fill-1"
-                 points="7 9 10 5 4 5"
-                 transform="translate(7.000000, 7.000000) rotate(-90.000000) translate(-7.000000, -7.000000) "></polygon>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/collapse.svg

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Dossiers-&amp;-Documents" stroke="none" stroke-width="1">
-        <g id="04.-Document-Hover" transform="translate(-1400.000000, -137.000000)">
-            <rect height="980" width="1440" x="0" y="0"></rect>
-            <g fill="currentColor" fill-rule="nonzero" id="Dossier-details"
-               transform="translate(1111.000000, 127.000000)">
-                <g id="Group-6" transform="translate(279.000000, 0.000000)">
-                    <g id="status" transform="translate(10.000000, 10.000000)">
-                        <polygon id="Path"
-                                 points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/expand.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Dossiers-&amp;-Documents" stroke="none" stroke-width="1">
-        <g id="04.-Collapsed-Details" transform="translate(-1403.000000, -137.000000)">
-            <rect height="980" width="1440" x="0" y="0"></rect>
-            <rect height="1500" id="Rectangle" width="60" x="1380" y="111"></rect>
-            <g id="Group-6" transform="translate(1393.000000, 127.000000)">
-                <rect height="34" id="Rectangle" rx="17" width="34" x="0" y="0"></rect>
-                <g fill="currentColor"
-                   fill-rule="nonzero"
-                   id="status"
-                   transform="translate(17.000000, 17.000000) scale(-1, 1) translate(-17.000000, -17.000000) translate(10.000000, 10.000000)">
-                    <polygon id="Path"
-                             points="9.17 3.5 8.19 4.48 9.94 6.3 1.4 6.3 1.4 7.7 9.94 7.7 8.19 9.52 9.17 10.5 12.6 7"></polygon>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/plus.svg

@@ -1,8 +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="currentColor" fill-rule="evenodd" id="plus_white" stroke="none" stroke-width="1">
-        <polygon fill-rule="nonzero" id="Path"
-                 points="78 45 55 45 55 22 45 22 45 45 22 45 22 55 45 55 45 78 55 78 55 55 78 55"></polygon>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/radio-indeterminate.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Bulk-Actions" stroke="none" stroke-width="1">
-        <g id="01.-Bulk-Actions" transform="translate(-10.000000, -127.000000)">
-            <rect fill="none" height="980" width="1440" x="0" y="0"></rect>
-            <polygon fill="none" id="Rectangle" points="0 112 1086 112 1086 162 0 162"></polygon>
-            <g fill="currentColor" id="intermediary_selection"
-               transform="translate(10.000000, 127.000000)">
-                <path
-                    d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M14,8.9 L6,8.9 C5.44771525,8.9 5,9.34771525 5,9.9 L5,9.9 L5,10.1 C5,10.6522847 5.44771525,11.1 6,11.1 L6,11.1 L14,11.1 C14.5522847,11.1 15,10.6522847 15,10.1 L15,10.1 L15,9.9 C15,9.34771525 14.5522847,8.9 14,8.9 L14,8.9 Z"></path>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/radio-selected.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px"
-     xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd" id="Bulk-Actions" stroke="none" stroke-width="1">
-        <g id="01.-Bulk-Actions" transform="translate(-10.000000, -209.000000)">
-            <rect fill="none" height="980" width="1440" x="0" y="0"></rect>
-            <g fill="none" id="Entry" transform="translate(0.000000, 194.000000)">
-                <polygon id="Rectangle" points="0 0 1086 0 1086 50 0 50"></polygon>
-            </g>
-            <g fill="currentColor" id="Radio_selected" transform="translate(10.000000, 209.000000)">
-                <path
-                    d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M13.6545842,6.07220062 L8.50054373,11.3199291 L6.58289039,9.38262084 C6.34328715,9.14059736 5.95224003,9.14059736 5.71263679,9.38262084 L5.06605523,10.0357335 C4.82983344,10.2743414 4.82983344,10.6586767 5.06605523,10.8972846 L8.06804104,13.9295935 C8.30826653,14.1722455 8.70055256,14.1715218 8.93988111,13.9279851 L15.1747747,7.58346184 C15.4094976,7.34461174 15.4087908,6.96150162 15.1731882,6.72351919 L14.5266067,6.07040651 C14.2863095,5.82768204 13.8938806,5.82848943 13.6545842,6.07220062 Z"
-                    id="radio_selected"></path>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/status-collapse.svg

@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="15px" version="1.1" viewBox="0 0 15 15" width="15px" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path
-            d="M1028,576 L1412,576 C1416.41828,576 1420,579.581722 1420,584 L1420,873 C1420,877.418278 1416.41828,881 1412,881 L1028,881 C1023.58172,881 1020,877.418278 1020,873 L1020,584 C1020,579.581722 1023.58172,576 1028,576 Z"
-            id="path-1"></path>
-        <filter filterUnits="objectBoundingBox" height="117.7%" id="filter-3" width="113.5%"
-                x="-6.8%" y="-7.9%">
-            <feMorphology in="SourceAlpha" operator="dilate" radius="2.5"
-                          result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="3" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1"
-                            stdDeviation="6"></feGaussianBlur>
-            <feColorMatrix in="shadowBlurOuter1"
-                           type="matrix"
-                           values="0 0 0 0 0.156862745   0 0 0 0 0.196078431   0 0 0 0 0.254901961  0 0 0 0.1428069 0"></feColorMatrix>
-        </filter>
-    </defs>
-    <g fill="none" fill-rule="evenodd" id="File-Upload-&amp;-Download-Overlays" stroke="none"
-       stroke-width="1">
-        <g id="Document-Upload---Hover" transform="translate(-1360.000000, -592.000000)">
-            <rect height="900" width="1440" x="0" y="0"></rect>
-            <g id="Dossier-details" transform="translate(1111.000000, 127.000000)">
-                <g id="Group-4" transform="translate(0.000000, 145.000000)"></g>
-            </g>
-            <g id="Rectangle">
-                <use fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
-                <use fill-rule="evenodd" xlink:href="#path-1"></use>
-            </g>
-            <g id="Group-6-Copy">
-                <g id="status" transform="translate(1352.000000, 584.000000)">
-                    <g transform="translate(15.500000, 15.500000) rotate(90.000000) translate(-15.500000, -15.500000) translate(8.000000, 8.000000)">
-                        <polygon fill="currentColor" fill-rule="nonzero" id="Path"
-                                 points="9.825 3.75 8.775 4.8 10.65 6.75 1.5 6.75 1.5 8.25 10.65 8.25 8.775 10.2 9.825 11.25 13.5 7.5"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/icons/general/status-expand.svg

@@ -1,58 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg height="15px" version="1.1" viewBox="0 0 15 15" width="15px" xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <path
-            d="M8,0 L392,0 C396.418278,-8.11624501e-16 400,3.581722 400,8 L400,40 C400,44.418278 396.418278,48 392,48 L8,48 C3.581722,48 5.41083001e-16,44.418278 0,40 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z"
-            id="path-1"></path>
-        <filter filterUnits="objectBoundingBox" height="212.5%" id="filter-3" width="113.5%"
-                x="-6.8%" y="-50.0%">
-            <feMorphology in="SourceAlpha" operator="dilate" radius="2.5"
-                          result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="3" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1"
-                            stdDeviation="6"></feGaussianBlur>
-            <feColorMatrix in="shadowBlurOuter1"
-                           type="matrix"
-                           values="0 0 0 0 0.156862745   0 0 0 0 0.196078431   0 0 0 0 0.254901961  0 0 0 0.1428069 0"></feColorMatrix>
-        </filter>
-    </defs>
-    <g fill="none" fill-rule="evenodd" id="File-Upload-&amp;-Download-Overlays" stroke="none"
-       stroke-width="1">
-        <g id="Document-Upload---Collapsed" transform="translate(-1359.000000, -847.000000)">
-            <rect height="900" width="1440" x="0" y="0"></rect>
-            <g fill="currentColor" font-family="Inter-Regular, Inter" font-size="16"
-               font-weight="normal" id="Dossier-details"
-               transform="translate(1111.000000, 127.000000)">
-                <g id="Group-4" transform="translate(0.000000, 145.000000)">
-                    <g id="Group-11" transform="translate(0.000000, 566.000000)">
-                        <text id="Description">
-                            <tspan x="0" y="16">Description</tspan>
-                        </text>
-                    </g>
-                </g>
-            </g>
-            <g id="Group-10" transform="translate(1020.000000, 832.000000)">
-                <g id="Group-8">
-                    <mask id="mask-2">
-                        <use xlink:href="#path-1"></use>
-                    </mask>
-                    <g id="Rectangle">
-                        <use fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
-                        <use fill-rule="evenodd" xlink:href="#path-1"></use>
-                    </g>
-                </g>
-                <g fill="currentColor"
-                   fill-rule="nonzero"
-                   id="Group-6-Copy"
-                   transform="translate(347.000000, 23.000000) rotate(180.000000) translate(-347.000000, -23.000000) translate(332.000000, 8.000000)">
-                    <g id="status"
-                       transform="translate(15.500000, 15.500000) rotate(90.000000) translate(-15.500000, -15.500000) translate(8.000000, 8.000000)">
-                        <polygon id="Path"
-                                 points="9.825 3.75 8.775 4.8 10.65 6.75 1.5 6.75 1.5 8.25 10.65 8.25 8.775 10.2 9.825 11.25 13.5 7.5"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

apps/red-ui/src/assets/styles/red-fonts.scss

@@ -1,36 +0,0 @@
-/* inter-regular - latin */
-
-@font-face {
-    font-family: 'OpenSans Extrabold';
-    src: url('../font/OpenSans-ExtraBold.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 300;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 400;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 500;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 600;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'Inter';
-    font-weight: 700;
-    src: url('../font/Inter-VariableFont.ttf') format('truetype');
-}

apps/red-ui/src/assets/styles/red-help-mode.scss

@@ -1,30 +0,0 @@
-@use 'variables';
-
-.help-mode-on-mouse-over {
-    z-index: 100;
-    position: absolute;
-    top: -5px;
-    left: -5px;
-    width: 100%;
-    height: 100%;
-    padding-right: 5px;
-    padding-bottom: 10px;
-    transition: all 0.25s;
-}
-
-.help-highlight,
-.help-mode-on-mouse-over:hover {
-    background: rgba(92, 229, 148, 0.5);
-    box-shadow: 0 0 0 2px variables.$green-2 inset;
-    cursor: help;
-}
-
-.help-mode-on-mouse-over-filters,
-.help-mode-on-mouse-over-quick-filters,
-.help-mode-on-mouse-over-new-dossier {
-    padding-right: 10px;
-}
-
-.help-mode-on-mouse-over-notifications {
-    padding-left: 4px;
-}

apps/red-ui/src/assets/styles/red-list.scss

@@ -1,12 +0,0 @@
-@use 'variables';
-
-.mat-list-item {
-    color: variables.$accent !important;
-    font-size: 13px !important;
-    line-height: 16px !important;
-}
-
-.list-50vh {
-    overflow-y: scroll;
-    max-height: 50vh;
-}

apps/red-ui/src/assets/styles/red-loading.scss

@@ -1,23 +0,0 @@
-.loading:after {
-    content: '.';
-    animation: dots 1s steps(5, end) infinite;
-}
-
-@keyframes dots {
-    0%,
-    20% {
-        color: rgba(40, 50, 65, 0);
-        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
-    }
-    40% {
-        color: #283241;
-        text-shadow: 0.25em 0 0 rgba(40, 50, 65, 0), 0.5em 0 0 rgba(40, 50, 65, 0);
-    }
-    60% {
-        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 rgba(40, 50, 65, 0);
-    }
-    80%,
-    100% {
-        text-shadow: 0.25em 0 0 #283241, 0.5em 0 0 #283241;
-    }
-}

apps/red-ui/src/assets/styles/red-media-queries.scss

@@ -1,15 +0,0 @@
-@media only screen and (max-width: 800px) {
-    .visible-lg {
-        display: none !important;
-    }
-}
-
-.visible-lt-lg {
-    display: none !important;
-}
-
-@media only screen and (max-width: 800px) {
-    .visible-lt-lg {
-        display: flex !important;
-    }
-}

apps/red-ui/src/assets/styles/red-progress-bar.scss

@@ -1,16 +0,0 @@
-@use 'variables';
-
-.mat-progress-bar {
-    height: 6px;
-    border-radius: 3px;
-
-    .mat-progress-bar-buffer {
-        background-color: variables.$grey-4;
-    }
-
-    &.green {
-        .mat-progress-bar-fill::after {
-            background-color: variables.$green-2;
-        }
-    }
-}

apps/red-ui/src/assets/styles/red-select.scss

@@ -1,23 +0,0 @@
-@use 'variables';
-@use 'common-mixins';
-
-.mat-select-panel {
-    @include common-mixins.scroll-bar;
-
-    .mat-option {
-        &:hover:not(.mat-option-disabled),
-        &:focus:not(.mat-option-disabled) {
-            background-color: variables.$grey-6;
-        }
-
-        &.mat-selected:not(.mat-option-multiple) {
-            background-color: rgba(variables.$primary, 0.2);
-            color: variables.$accent;
-        }
-    }
-}
-
-.mat-form-field.no-label .mat-form-field-infix {
-    padding: 0 !important;
-    border-top: 0 !important;
-}

apps/red-ui/src/assets/styles/red-slider.scss

@@ -1,50 +0,0 @@
-@use 'variables';
-
-.mat-slider-horizontal {
-    width: 140px;
-    height: 32px !important;
-
-    .mat-slider-wrapper {
-        left: 0 !important;
-        top: 16px !important;
-    }
-
-    .mat-slider-track-wrapper,
-    .mat-slider-track-fill {
-        height: 6px !important;
-        border-radius: 3px;
-    }
-
-    // For disabled state
-    .mat-slider-track-fill {
-        background-color: variables.$primary;
-    }
-
-    .mat-slider-track-background {
-        height: 4px !important;
-        margin-top: 1px;
-        border-radius: 3px;
-        background-color: variables.$grey-4 !important;
-    }
-
-    .mat-slider-focus-ring {
-        display: none;
-    }
-}
-
-.mat-slider-thumb {
-    width: 16px !important;
-    height: 16px !important;
-    border-width: 0 !important;
-    background-color: variables.$primary !important;
-}
-
-.mat-slider:not(.mat-slider-disabled):not(.mat-slider-sliding) .mat-slider-thumb {
-    transform: scale(1) !important;
-}
-
-.mat-slider-horizontal.mat-slider-disabled {
-    .mat-slider-thumb {
-        transform: translateX(-3px);
-    }
-}

apps/red-ui/src/assets/styles/red-tabs.scss

@@ -1,29 +0,0 @@
-@use 'variables';
-
-.red-tab {
-    &:not(:last-child) {
-        margin-right: 2px;
-    }
-
-    height: 30px;
-    line-height: 30px;
-    padding: 0 14px;
-    border-radius: 17px;
-    transition: background-color 0.2s;
-    cursor: pointer;
-
-    &:not(.disabled):not(.active):hover {
-        background-color: variables.$grey-6;
-    }
-
-    &.active {
-        background-color: rgba(variables.$primary, 0.1);
-        font-weight: 600;
-        color: variables.$primary;
-    }
-
-    &.disabled {
-        color: rgba(variables.$accent, 0.3);
-        cursor: not-allowed;
-    }
-}

apps/red-ui/src/assets/styles/red-theme.scss

@@ -1,17 +1,4 @@
-@use 'red-fonts';
 @use '~ngx-toastr/toastr';
 @use 'red-material-theme';
-@use 'red-select';
-@use 'red-list';
-@use 'red-toggle';
-@use 'red-toggle-button';
-@use 'red-media-queries';
 @use 'red-components';
-@use 'red-toasts';
-@use 'red-tooltips';
 @use 'red-editor';
-@use 'red-slider';
-@use 'red-loading';
-@use 'red-progress-bar';
-@use 'red-tabs';
-@use 'red-help-mode';

apps/red-ui/src/assets/styles/red-toasts.scss

@@ -1,110 +0,0 @@
-@use 'variables';
-
-$toast-width: 400px;
-
-.toast-container .ngx-toastr,
-.inline-dialog-toast {
-    padding: 11px 16px;
-    border-radius: 8px;
-    background-image: none;
-    font-family: Inter, sans-serif;
-    font-size: 13px;
-    line-height: 18px;
-    width: $toast-width;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: none;
-
-    > *:not(:last-child) {
-        margin-right: 10px;
-    }
-
-    &:hover {
-        box-shadow: none;
-    }
-
-    .actions-wrapper {
-        margin-top: 24px;
-        display: flex;
-
-        > *:not(:last-child) {
-            margin-right: 24px;
-        }
-
-        a {
-            font-size: 11px;
-            font-weight: 600;
-            line-height: 14px;
-            color: variables.$accent;
-            text-transform: uppercase;
-            cursor: pointer;
-        }
-    }
-}
-
-.toast-top-right {
-    top: 128px;
-    right: calc(50% - #{$toast-width} / 2);
-}
-
-.toast-file-preview {
-    top: 160px;
-    right: 405px;
-}
-
-.toast-close-button {
-    position: initial;
-    opacity: 1;
-    text-shadow: none;
-
-    mat-icon {
-        width: 10px;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-.toast-warning,
-.toast-success {
-    .toast-message {
-        color: variables.$accent;
-    }
-
-    .toast-close-button {
-        color: variables.$accent;
-    }
-}
-
-.toast-error,
-.toast-info {
-    .toast-close-button:hover {
-        color: variables.$white;
-    }
-}
-
-.toast-success {
-    background-color: variables.$green-2;
-}
-
-.toast-error {
-    background-color: variables.$primary;
-    color: variables.$white;
-}
-
-.toast-warning {
-    background-color: variables.$yellow-2;
-    color: variables.$accent;
-}
-
-.toast-info {
-    background-color: variables.$accent;
-}
-
-.inline-dialog-toast {
-    width: calc(100% - 96px);
-    margin-left: 32px;
-    margin-top: 14px;
-}

apps/red-ui/src/assets/styles/red-toggle-button.scss

@@ -1,23 +0,0 @@
-@use 'variables';
-
-.mat-button-toggle-standalone,
-.mat-button-toggle-group {
-    box-shadow: none;
-    border-radius: 100px !important;
-    width: fit-content;
-
-    .mat-button-toggle:not(.mat-button-toggle-checked) {
-        .mat-button-toggle-button {
-            background: variables.$grey-6;
-            color: variables.$grey-7;
-        }
-    }
-}
-
-.mat-button-toggle-disabled {
-    .mat-button-toggle-button {
-        cursor: not-allowed !important;
-    }
-
-    outline: none;
-}

apps/red-ui/src/assets/styles/red-toggle.scss

@@ -1,42 +0,0 @@
-@use 'variables';
-
-.mat-slide-toggle {
-    .mat-slide-toggle-bar {
-        height: 16px !important;
-        width: 30px !important;
-        border-radius: 16px !important;
-        background-color: variables.$grey-4;
-    }
-
-    .mat-slide-toggle-thumb-container {
-        top: 2px !important;
-        left: 2px !important;
-        height: 12px !important;
-        width: 12px !important;
-    }
-
-    .mat-slide-toggle-thumb {
-        height: 12px !important;
-        width: 12px !important;
-        box-shadow: none;
-        background-color: variables.$grey-2;
-    }
-
-    .mat-ripple {
-        display: none;
-    }
-
-    &.mat-primary.mat-checked {
-        .mat-slide-toggle-bar {
-            background-color: variables.$primary;
-        }
-
-        .mat-slide-toggle-thumb {
-            background-color: variables.$white;
-        }
-
-        .mat-slide-toggle-thumb-container {
-            transform: translate3d(14px, 0, 0);
-        }
-    }
-}

apps/red-ui/src/assets/styles/red-tooltips.scss

@@ -1,62 +0,0 @@
-@use 'variables';
-
-.mat-tooltip {
-    background-color: variables.$accent;
-    border-radius: 3px !important;
-    padding: 10px;
-    margin: 12px !important;
-    font-size: 11px;
-    line-height: 14px;
-    color: variables.$white !important;
-    position: relative;
-    overflow: visible !important;
-    text-align: center;
-
-    //&:after {
-    //    content: '';
-    //    position: absolute;
-    //    left: 50%;
-    //    margin-left: -5px;
-    //    width: 0;
-    //    height: 0;
-    //    z-index: 3000;
-    //    border-left: solid 5px transparent;
-    //    border-right: solid 5px transparent;
-    //    border-top: solid 6px $accent;
-    //}
-
-    &.small {
-        max-width: 160px;
-    }
-
-    &.warn {
-        background-color: variables.$yellow-2;
-        color: variables.$accent !important;
-
-        //&:after {
-        //    border-top: solid 6px $yellow-2;
-        //}
-    }
-}
-
-//
-//.mat-tooltip[style*='transform-origin: center top']:after {
-//    top: -6px;
-//    transform: rotate(180deg);
-//}
-//
-//.mat-tooltip[style*='transform-origin: center bottom']:after {
-//    top: 100%;
-//}
-//
-//.mat-tooltip[style*='transform-origin: right center']:after {
-//    top: 50%;
-//    left: 100%;
-//    transform: rotate(-90deg) translateY(3px) translateX(3px);
-//}
-//
-//.mat-tooltip[style*='transform-origin: left center']:after {
-//    top: 50%;
-//    left: 0;
-//    transform: rotate(90deg) translateY(3px) translateX(-3px);
-//}

apps/red-ui/src/styles.scss

@@ -25,6 +25,11 @@
     $iqser-grey-4: vars.$grey-4,
     $iqser-grey-5: vars.$grey-5,
     $iqser-grey-6: vars.$grey-6,
+    $iqser-grey-7: vars.$grey-7,
+    $iqser-green-1: vars.$green-1,
+    $iqser-green-2: vars.$green-2,
+    $iqser-yellow-1: vars.$yellow-1,
+    $iqser-yellow-2: vars.$yellow-2,
     $iqser-helpmode-primary: vars.$green-2
 );
 

libs/common-ui

@@ -1 +1 @@
-Subproject commit 52b8c90bbf283d2f78dbb0c2744ef1bca771b675
+Subproject commit 5eda852e94ea98a48d8f5354b7ae7f31be94d575

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "nx build",
     "build-lint-all": "ng lint --project=red-ui-http --fix && ng lint --project=red-ui --fix && ng lint --project=common-ui --fix  && ng build --project=red-ui --configuration production --base-href /ui/",
-    "build-paligo-styles": "mkdir -p dist/paligo-styles && sass --load-path=. paligo-styles/style.scss > dist/paligo-styles/redacto-theme.css && cp -r apps/red-ui/src/assets/font dist/paligo-styles/fonts",
+    "build-paligo-styles": "mkdir -p dist/paligo-styles && sass --load-path=. paligo-styles/style.scss > dist/paligo-styles/redacto-theme.css && cp -r libs/common-ui/src/assets/font dist/paligo-styles/fonts",
     "i18n:extract": "ngx-translate-extract --input ./apps/red-ui/src ./libs/common-ui/src --output apps/red-ui/src/assets/i18n/en.json --clean --sort --format namespaced-json && prettier apps/red-ui/src/assets/i18n/*.json --write",
     "postinstall": "ngcc --properties es2015 browser module main",
     "lint": "ng lint --project=red-ui-http --fix && ng lint --project=red-ui --fix && ng lint --project=common-ui --fix",