RED-4718: import common-ui only once in app module

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

@@ -3,14 +3,16 @@ import { APP_INITIALIZER, ErrorHandler, NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { BaseScreenComponent } from '@components/base-screen/base-screen.component';
-import { MissingTranslationHandler, TranslateCompiler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MissingTranslationHandler } from '@ngx-translate/core';
 import {
     BASE_HREF,
     CachingModule,
     CommonUiModule,
     IqserHelpModeModule,
+    IqserLoadingModule,
+    IqserTranslateModule,
     IqserUsersModule,
     LanguageService,
     MAX_RETRIES_ON_SERVER_ERROR,
@@ -32,11 +34,9 @@ import { ACTIVE_DOSSIERS_SERVICE, ARCHIVED_DOSSIERS_SERVICE } from './tokens';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { GlobalErrorHandler } from '@utils/global-error-handler.service';
 import { REDMissingTranslationHandler } from '@utils/missing-translations-handler';
-import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
 import { configurationInitializer } from '@utils/configuration.initializer';
 import { ConfigService } from '@services/config.service';
 import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight-search.component';
-import { PruningTranslationLoader } from '@utils/pruning-translation-loader';
 import { DatePipe } from '@shared/pipes/date.pipe';
 import * as links from '../assets/help-mode/links.json';
 import { KeycloakService } from 'keycloak-angular';
@@ -58,10 +58,6 @@ import { TenantIdInterceptor } from '@utils/tenant-id-interceptor';
 import { UI_CACHES } from '@utils/constants';
 import { RedRoleGuard } from '@users/red-role.guard';
 
-export function httpLoaderFactory(httpClient: HttpClient, configService: ConfigService): PruningTranslationLoader {
-    return new PruningTranslationLoader(httpClient, '/assets/i18n/', `.json?version=${configService.values.FRONTEND_APP_VERSION}`);
-}
-
 const screens = [BaseScreenComponent, DownloadsListScreenComponent];
 
 const components = [AppComponent, AuthErrorComponent, NotificationsComponent, SpotlightSearchComponent, BreadcrumbsComponent, ...screens];
@@ -74,7 +70,6 @@ export const appModuleFactory = (config: AppConfig) => {
             BrowserAnimationsModule,
             SharedModule,
             FileUploadDownloadModule,
-            HttpClientModule,
             AppRoutingModule,
             MonacoEditorModule,
             CommonUiModule.forRoot({
@@ -96,17 +91,8 @@ export const appModuleFactory = (config: AppConfig) => {
                 preventDuplicates: true,
                 resetTimeoutOnDuplicate: true,
             }),
-            TranslateModule.forRoot({
+            IqserTranslateModule.forRoot(),
-                loader: {
+            IqserLoadingModule.forRoot(),
-                    provide: TranslateLoader,
-                    useFactory: httpLoaderFactory,
-                    deps: [HttpClient, ConfigService],
-                },
-                compiler: {
-                    provide: TranslateCompiler,
-                    useClass: TranslateMessageFormatCompiler,
-                },
-            }),
             ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
             LoggerModule.forRoot(undefined, {
                 ruleProvider: {

apps/red-ui/src/app/modules/account/account-side-nav/account-side-nav.component.html

@@ -1,7 +1,12 @@
 <iqser-side-nav [title]="'account-settings' | translate">
     <ng-container *ngFor="let item of items">
-        <div *ngIf="!item.hideIf"
+        <div
-             [routerLinkActiveOptions]="{ exact: false }" [routerLink]="'../' + item.screen" class="item" routerLinkActive="active">
+            *ngIf="!item.hideIf"
+            [routerLinkActiveOptions]="{ exact: false }"
+            [routerLink]="'../' + item.screen"
+            class="item"
+            routerLinkActive="active"
+        >
             {{ item.label | translate }}
         </div>
     </ng-container>

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

@@ -5,10 +5,12 @@ import { AccountRoutingModule } from './account-routing.module';
 import { AccountSideNavComponent } from './account-side-nav/account-side-nav.component';
 import { BaseAccountScreenComponent } from './base-account-screen/base-account-screen-component';
 import { NotificationPreferencesService } from './services/notification-preferences.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserSharedModule } from '@iqser/common-ui';
 
 @NgModule({
     declarations: [AccountSideNavComponent, BaseAccountScreenComponent],
-    imports: [CommonModule, SharedModule, AccountRoutingModule],
+    imports: [CommonModule, SharedModule, AccountRoutingModule, TranslateModule, IqserSharedModule],
     providers: [NotificationPreferencesService],
 })
 export class AccountModule {}

apps/red-ui/src/app/modules/account/screens/notifications/notifications-screen/notifications-screen.component.html

@@ -8,7 +8,7 @@
             </div>
 
             <div *ngIf="isCategoryActive(category)" class="options-content">
-                <div class="statement" translate="notifications-screen.options-title"></div>
+                <div [translate]="'notifications-screen.options-title'" class="statement"></div>
 
                 <div *ngFor="let key of notificationGroupsKeys; let i = index" class="group">
                     <div [translate]="translations[key]" class="group-title"></div>

apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts

@@ -4,11 +4,12 @@ import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
 import { NotificationsScreenComponent } from './notifications-screen/notifications-screen.component';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: NotificationsScreenComponent, canDeactivate: [PendingChangesGuard] }];
 
 @NgModule({
     declarations: [NotificationsScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule],
 })
 export class NotificationsModule {}

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile-screen/user-profile-screen.component.html

@@ -2,22 +2,22 @@
     <div class="dialog-content">
         <div class="dialog-content-left">
             <div class="iqser-input-group required">
-                <label translate="user-profile-screen.form.email"></label>
+                <label [translate]="'user-profile-screen.form.email'"></label>
                 <input formControlName="email" name="email" type="email" />
             </div>
 
             <div class="iqser-input-group">
-                <label translate="user-profile-screen.form.first-name"></label>
+                <label [translate]="'user-profile-screen.form.first-name'"></label>
                 <input formControlName="firstName" name="firstName" type="text" />
             </div>
 
             <div class="iqser-input-group">
-                <label translate="user-profile-screen.form.last-name"></label>
+                <label [translate]="'user-profile-screen.form.last-name'"></label>
                 <input formControlName="lastName" name="lastName" type="text" />
             </div>
 
             <div *ngIf="userPreferences.areDevFeaturesEnabled" class="iqser-input-group">
-                <label translate="top-bar.navigation-items.my-account.children.language.label"></label>
+                <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">
                         {{ translations[language] | translate }}

apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts

@@ -4,11 +4,12 @@ import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
 import { UserProfileScreenComponent } from './user-profile-screen/user-profile-screen.component';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: UserProfileScreenComponent, canDeactivate: [PendingChangesGuard] }];
 
 @NgModule({
     declarations: [UserProfileScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule],
 })
 export class UserProfileModule {}

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

@@ -45,7 +45,18 @@ import { SystemPreferencesFormComponent } from './screens/general-config/system-
 import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component';
 import { PkcsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component';
 import { KmsSignatureConfigurationComponent } from './dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component';
-import { IqserUsersModule } from '@iqser/common-ui';
+import {
+    HumanizePipe,
+    IqserButtonsModule,
+    IqserEmptyStatesModule,
+    IqserInputsModule,
+    IqserListingModule,
+    IqserScrollbarModule,
+    IqserSharedModule,
+    IqserUploadFileModule,
+    IqserUsersModule,
+} from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 
 const dialogs = [
     AddEditCloneDossierTemplateDialogComponent,
@@ -98,6 +109,22 @@ const components = [
 @NgModule({
     declarations: [...components],
     providers: [AdminDialogService, AuditService, DigitalSignatureService, RulesService, SmtpConfigService],
-    imports: [CommonModule, SharedModule, AdminRoutingModule, SharedAdminModule, A11yModule, IqserUsersModule],
+    imports: [
+        CommonModule,
+        SharedModule,
+        AdminRoutingModule,
+        SharedAdminModule,
+        A11yModule,
+        IqserUsersModule,
+        TranslateModule,
+        HumanizePipe,
+        IqserButtonsModule,
+        IqserListingModule,
+        IqserScrollbarModule,
+        IqserInputsModule,
+        IqserUploadFileModule,
+        IqserEmptyStatesModule,
+        IqserSharedModule,
+    ],
 })
 export class AdminModule {}

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

@@ -5,11 +5,12 @@
         icon="iqser:expand"
         tooltipPosition="before"
     ></iqser-circle-button>
-    <div class="all-caps-label" translate="user-stats.title"></div>
+    <div [translate]="'user-stats.title'" class="all-caps-label"></div>
 </div>
 
 <div class="header-wrapper mt-8">
-    <div class="heading-xl flex-1" translate="user-stats.title"></div>
+    <div [translate]="'user-stats.title'" class="heading-xl flex-1"></div>
+
     <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.collapse' | translate"

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html

@@ -11,7 +11,7 @@
     <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
-                <label translate="add-edit-dossier-attribute.form.label"></label>
+                <label [translate]="'add-edit-dossier-attribute.form.label'"></label>
                 <input
                     [placeholder]="'add-edit-dossier-attribute.form.label-placeholder' | translate"
                     formControlName="label"
@@ -21,12 +21,12 @@
             </div>
 
             <div *ngIf="!!dossierAttribute" class="iqser-input-group required w-300">
-                <label translate="add-edit-dossier-attribute.form.placeholder"></label>
+                <label [translate]="'add-edit-dossier-attribute.form.placeholder'"></label>
                 <input formControlName="placeholder" name="placeholder" type="text" />
             </div>
 
             <div class="iqser-input-group w-300">
-                <label translate="add-edit-dossier-attribute.form.type"></label>
+                <label [translate]="'add-edit-dossier-attribute.form.type'"></label>
                 <mat-select formControlName="type">
                     <mat-option *ngFor="let type of typeOptions" [value]="type">
                         {{ translations[type] | translate }}

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-state-dialog/add-edit-dossier-state-dialog.component.html

@@ -11,7 +11,7 @@
     <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300 mb-14">
-                <label translate="add-edit-dossier-state.form.name"></label>
+                <label [translate]="'add-edit-dossier-state.form.name'"></label>
                 <input
                     [placeholder]="'add-edit-dossier-state.form.name-placeholder' | translate"
                     formControlName="name"
@@ -22,12 +22,12 @@
 
             <div class="flex">
                 <div class="iqser-input-group required w-75">
-                    <label translate="add-edit-dossier-state.form.rank"></label>
+                    <label [translate]="'add-edit-dossier-state.form.rank'"></label>
                     <input formControlName="rank" name="rank" type="number" />
                 </div>
 
                 <div class="iqser-input-group required">
-                    <label translate="add-edit-dossier-state.form.color"></label>
+                    <label [translate]="'add-edit-dossier-state.form.color'"></label>
                     <input
                         [placeholder]="'add-edit-dossier-state.form.color-placeholder' | translate"
                         class="hex-color-input"

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-clone-dossier-template-dialog.component.html

@@ -11,7 +11,7 @@
     <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
-                <label translate="add-edit-clone-dossier-template.form.name"></label>
+                <label [translate]="'add-edit-clone-dossier-template.form.name'"></label>
                 <input
                     [placeholder]="'add-edit-clone-dossier-template.form.name-placeholder' | translate"
                     formControlName="name"
@@ -21,7 +21,7 @@
             </div>
 
             <div class="iqser-input-group w-400">
-                <label translate="add-edit-clone-dossier-template.form.description"></label>
+                <label [translate]="'add-edit-clone-dossier-template.form.description'"></label>
                 <textarea
                     [placeholder]="'add-edit-clone-dossier-template.form.description-placeholder' | translate"
                     formControlName="description"
@@ -46,9 +46,9 @@
                     <div class="iqser-input-group datepicker-wrapper">
                         <ng-container *ngIf="hasValidFrom">
                             <input
+                                (dateChange)="applyValidityIntervalConstraints()"
                                 [matDatepicker]="fromPicker"
                                 formControlName="validFrom"
-                                (dateChange)="applyValidityIntervalConstraints()"
                                 placeholder="dd/mm/yy"
                             />
                             <mat-datepicker-toggle [for]="fromPicker" matSuffix>
@@ -61,9 +61,9 @@
                     <div class="iqser-input-group datepicker-wrapper">
                         <ng-container *ngIf="hasValidTo">
                             <input
+                                (dateChange)="applyValidityIntervalConstraints()"
                                 [matDatepicker]="toPicker"
                                 formControlName="validTo"
-                                (dateChange)="applyValidityIntervalConstraints()"
                                 placeholder="dd/mm/yy"
                             />
                             <mat-datepicker-toggle [for]="toPicker" matSuffix>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html

@@ -11,7 +11,7 @@
     <form [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
-                <label translate="add-edit-file-attribute.form.name"></label>
+                <label [translate]="'add-edit-file-attribute.form.name'"></label>
                 <input
                     [placeholder]="'add-edit-file-attribute.form.name-placeholder' | translate"
                     formControlName="label"
@@ -21,7 +21,7 @@
             </div>
 
             <div class="iqser-input-group w-300">
-                <label translate="add-edit-file-attribute.form.column-header"></label>
+                <label [translate]="'add-edit-file-attribute.form.column-header'"></label>
                 <input
                     [placeholder]="'add-edit-file-attribute.form.column-header-placeholder' | translate"
                     formControlName="csvColumnHeader"
@@ -31,7 +31,7 @@
             </div>
 
             <div class="iqser-input-group w-300 required">
-                <label translate="add-edit-file-attribute.form.type"></label>
+                <label [translate]="'add-edit-file-attribute.form.type'"></label>
                 <mat-select formControlName="type">
                     <mat-option *ngFor="let type of typeOptions" [value]="type">
                         {{ translations[type] | translate }}

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/reset-password/reset-password.component.html

@@ -3,7 +3,7 @@
 <form (submit)="save()" [formGroup]="form">
     <div class="dialog-content">
         <div class="iqser-input-group required w-300">
-            <label translate="reset-password-dialog.form.password"></label>
+            <label [translate]="'reset-password-dialog.form.password'"></label>
             <input formControlName="temporaryPassword" name="temporaryPassword" type="password" />
         </div>
     </div>
@@ -13,6 +13,6 @@
             {{ 'reset-password-dialog.actions.save' | translate }}
         </button>
 
-        <div (click)="toggleResetPassword.emit()" class="all-caps-label cancel" translate="reset-password-dialog.actions.cancel"></div>
+        <div (click)="toggleResetPassword.emit()" [translate]="'reset-password-dialog.actions.cancel'" class="all-caps-label cancel"></div>
     </div>
 </form>

apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html

@@ -9,22 +9,22 @@
 <form (submit)="save()" [formGroup]="form">
     <div class="dialog-content">
         <div class="iqser-input-group required w-300">
-            <label translate="add-edit-user.form.first-name"></label>
+            <label [translate]="'add-edit-user.form.first-name'"></label>
             <input formControlName="firstName" name="firstName" type="text" />
         </div>
 
         <div class="iqser-input-group required w-300">
-            <label translate="add-edit-user.form.last-name"></label>
+            <label [translate]="'add-edit-user.form.last-name'"></label>
             <input formControlName="lastName" name="lastName" type="text" />
         </div>
 
         <div class="iqser-input-group required w-300">
-            <label translate="add-edit-user.form.email"></label>
+            <label [translate]="'add-edit-user.form.email'"></label>
             <input formControlName="email" name="email" type="email" />
         </div>
 
         <div class="iqser-input-group">
-            <label translate="add-edit-user.form.role"></label>
+            <label [translate]="'add-edit-user.form.role'"></label>
             <div class="roles-wrapper">
                 <mat-checkbox
                     (change)="setRolesRequirements($event.checked, role)"
@@ -40,8 +40,8 @@
         <div
             (click)="toggleResetPassword.emit()"
             *ngIf="!!user"
+            [translate]="'add-edit-user.form.reset-password'"
             class="mt-24 fit-content link-action"
-            translate="add-edit-user.form.reset-password"
         ></div>
     </div>
 
@@ -58,6 +58,6 @@
             icon="iqser:trash"
         ></iqser-icon-button>
 
-        <div (click)="cancel.emit()" class="all-caps-label cancel" translate="add-edit-user.actions.cancel"></div>
+        <div (click)="cancel.emit()" [translate]="'add-edit-user.actions.cancel'" class="all-caps-label cancel"></div>
     </div>
 </form>

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/configure-certificate-dialog.component.html

@@ -1,11 +1,11 @@
 <section class="dialog">
     <div
-        class="dialog-header heading-l"
         [translate]="!isInConfiguration ? translations.title.beforeConfiguration : translations.title[selectedOption]"
+        class="dialog-header heading-l"
     ></div>
 
     <div class="dialog-content">
-        <form [formGroup]="form" *ngIf="!isInConfiguration">
+        <form *ngIf="!isInConfiguration" [formGroup]="form">
             <iqser-details-radio [options]="options" formControlName="option"></iqser-details-radio>
         </form>
         <ng-container *ngIf="isInConfiguration">
@@ -25,13 +25,17 @@
             <button (click)="toggleIsInConfiguration()" color="primary" mat-flat-button>
                 {{ 'digital-signature-dialog.actions.continue' | translate }}
             </button>
-            <div translate="digital-signature-dialog.actions.cancel" class="all-caps-label cancel" mat-dialog-close></div>
+            <div [translate]="'digital-signature-dialog.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
         </ng-container>
         <ng-container *ngIf="isInConfiguration">
             <button (click)="save()" [disabled]="disabled" color="primary" mat-flat-button>
                 {{ 'digital-signature-dialog.actions.save' | translate }}
             </button>
-            <div translate="digital-signature-dialog.actions.back" class="all-caps-label cancel" (click)="toggleIsInConfiguration()"></div>
+            <div
+                (click)="toggleIsInConfiguration()"
+                [translate]="'digital-signature-dialog.actions.back'"
+                class="all-caps-label cancel"
+            ></div>
         </ng-container>
     </div>
 

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/kms-signature-configuration/kms-signature-configuration.component.html

@@ -1,37 +1,38 @@
-<iqser-upload-file [class.w-300]="!!file" accept=".pem" [file]="file" [readonly]="!!file" (fileChanged)="addRemoveCertificate($event)">
+<iqser-upload-file (fileChanged)="addRemoveCertificate($event)" [class.w-300]="!!file" [file]="file" [readonly]="!!file" accept=".pem">
 </iqser-upload-file>
+
 <form [formGroup]="form">
     <div class="flex">
         <div class="flex fields-container">
             <div class="iqser-input-group required w-300">
-                <label translate="digital-signature-dialog.forms.kms.certificate-name"></label>
+                <label [translate]="'digital-signature-dialog.forms.kms.certificate-name'"></label>
                 <input formControlName="certificateName" type="text" />
             </div>
             <div class="iqser-input-group required w-300">
-                <label translate="digital-signature-dialog.forms.kms.kms-service-endpoint"></label>
+                <label [translate]="'digital-signature-dialog.forms.kms.kms-service-endpoint'"></label>
                 <input formControlName="kmsServiceEndpoint" type="text" />
             </div>
             <div class="iqser-input-group required w-300">
-                <label translate="digital-signature-dialog.forms.kms.kms-region"></label>
+                <label [translate]="'digital-signature-dialog.forms.kms.kms-region'"></label>
                 <input formControlName="kmsRegion" type="text" />
             </div>
             <div class="iqser-input-group required w-300">
-                <label translate="digital-signature-dialog.forms.kms.kms-id"></label>
+                <label [translate]="'digital-signature-dialog.forms.kms.kms-id'"></label>
                 <input formControlName="kmsKeyId" type="text" />
             </div>
             <div class="iqser-input-group required w-300">
-                <label translate="digital-signature-dialog.forms.kms.kms-access-key"></label>
+                <label [translate]="'digital-signature-dialog.forms.kms.kms-access-key'"></label>
                 <input formControlName="kmsAccessKey" type="text" />
             </div>
-            <div class="iqser-input-group required w-300" *ngIf="!digitalSignature">
+            <div *ngIf="!digitalSignature" class="iqser-input-group required w-300">
-                <label translate="digital-signature-dialog.forms.kms.kms-secret-key"></label>
+                <label [translate]="'digital-signature-dialog.forms.kms.kms-secret-key'"></label>
                 <input formControlName="kmsSecretKey" type="text" />
             </div>
         </div>
 
-        <div class="flex fields-container" *ngIf="!digitalSignature">
+        <div *ngIf="!digitalSignature" class="flex fields-container">
             <div class="iqser-input-group required w-400 certificate">
-                <label translate="digital-signature-dialog.forms.kms.certificate-content"></label>
+                <label [translate]="'digital-signature-dialog.forms.kms.certificate-content'"></label>
                 <textarea formControlName="certificate" type="text"></textarea>
             </div>
         </div>

apps/red-ui/src/app/modules/admin/dialogs/configure-digital-signature-dialog/form/pkcs-signature-configuration/pkcs-signature-configuration.component.html

@@ -1,31 +1,31 @@
 <iqser-upload-file
+    (fileChanged)="addRemoveCertificate($event)"
     [class.w-400]="!!file"
-    accept=".p12"
     [file]="file"
     [readonly]="!!file"
-    (fileChanged)="addRemoveCertificate($event)"
+    accept=".p12"
 ></iqser-upload-file>
 <form [formGroup]="form">
     <div class="flex">
         <div class="flex fields-container">
             <div class="iqser-input-group required w-300">
-                <label translate="digital-signature-dialog.forms.pkcs.certificate-name"></label>
+                <label [translate]="'digital-signature-dialog.forms.pkcs.certificate-name'"></label>
                 <input formControlName="certificateName" type="text" />
             </div>
-            <div class="iqser-input-group required w-300" *ngIf="!digitalSignature">
+            <div *ngIf="!digitalSignature" class="iqser-input-group required w-300">
-                <label translate="digital-signature-dialog.forms.pkcs.password-key"></label>
+                <label [translate]="'digital-signature-dialog.forms.pkcs.password-key'"></label>
                 <input formControlName="password" type="password" />
             </div>
             <div class="iqser-input-group w-300">
-                <label translate="digital-signature-dialog.forms.pkcs.contact-information"></label>
+                <label [translate]="'digital-signature-dialog.forms.pkcs.contact-information'"></label>
                 <input formControlName="contactInfo" type="text" />
             </div>
             <div class="iqser-input-group w-300">
-                <label translate="digital-signature-dialog.forms.pkcs.location"></label>
+                <label [translate]="'digital-signature-dialog.forms.pkcs.location'"></label>
                 <input formControlName="location" type="text" />
             </div>
             <div class="iqser-input-group w-450">
-                <label translate="digital-signature-dialog.forms.pkcs.reason"></label>
+                <label [translate]="'digital-signature-dialog.forms.pkcs.reason'"></label>
                 <textarea formControlName="reason" rows="4" type="text"></textarea>
             </div>
         </div>

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

@@ -1,5 +1,5 @@
 <section class="dialog">
-    <div class="dialog-header heading-l" translate="file-attributes-configurations.title"></div>
+    <div [translate]="'file-attributes-configurations.title'" class="dialog-header heading-l"></div>
 
     <form [formGroup]="form">
         <div class="dialog-content">
@@ -10,7 +10,7 @@
             </div>
             <ng-container *ngIf="form.get('supportCsvMapping').value">
                 <div class="iqser-input-group required w-250">
-                    <label translate="file-attributes-configurations.form.key-column"></label>
+                    <label [translate]="'file-attributes-configurations.form.key-column'"></label>
                     <input
                         [placeholder]="'file-attributes-configurations.form.key-column' | translate"
                         formControlName="keyColumn"
@@ -20,7 +20,7 @@
                 </div>
 
                 <div class="iqser-input-group required w-110">
-                    <label translate="file-attributes-configurations.form.delimiter"></label>
+                    <label [translate]="'file-attributes-configurations.form.delimiter'"></label>
                     <input
                         [placeholder]="'file-attributes-configurations.form.delimiter' | translate"
                         formControlName="delimiter"
@@ -30,7 +30,7 @@
                 </div>
 
                 <div class="iqser-input-group w-150 required">
-                    <label translate="file-attributes-configurations.form.encoding-type"></label>
+                    <label [translate]="'file-attributes-configurations.form.encoding-type'"></label>
                     <mat-select formControlName="encodingType">
                         <mat-option *ngFor="let type of encodingTypeOptions" [value]="type">
                             {{ translations[type] | translate }}
@@ -45,7 +45,7 @@
                 {{ 'file-attributes-configurations.save' | translate }}
             </button>
 
-            <div (click)="close()" class="all-caps-label cancel" translate="file-attributes-configurations.cancel"></div>
+            <div (click)="close()" [translate]="'file-attributes-configurations.cancel'" class="all-caps-label cancel"></div>
         </div>
     </form>
 

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

@@ -36,13 +36,13 @@
         <mat-menu #readOnlyMenu="matMenu" class="padding-bottom-8">
             <button
                 (click)="setAttributeForSelection('readonly', true)"
+                [translate]="'file-attributes-csv-import.table-header.actions.enable-read-only'"
                 mat-menu-item
-                translate="file-attributes-csv-import.table-header.actions.enable-read-only"
             ></button>
             <button
                 (click)="setAttributeForSelection('readonly', false)"
+                [translate]="'file-attributes-csv-import.table-header.actions.disable-read-only'"
                 mat-menu-item
-                translate="file-attributes-csv-import.table-header.actions.disable-read-only"
             ></button>
         </mat-menu>
 

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

@@ -1,10 +1,10 @@
 <section class="dialog">
-    <div class="dialog-header heading-l" translate="file-attributes-csv-import.title"></div>
+    <div [translate]="'file-attributes-csv-import.title'" class="dialog-header heading-l"></div>
 
     <div class="dialog-content">
         <div class="sub-header">
             <div class="left">
-                <div class="info"><span translate="file-attributes-csv-import.file"> </span> {{ data.csv.name }}</div>
+                <div class="info"><span [translate]="'file-attributes-csv-import.file'"> </span> {{ data.csv.name }}</div>
                 <div class="large-label">
                     {{ 'file-attributes-csv-import.total-rows' | translate: { rows: parseResult?.data?.length } }}
                 </div>
@@ -79,13 +79,13 @@
                         <div class="quick-activation">
                             <span
                                 (click)="activateAll()"
+                                [translate]="'file-attributes-csv-import.quick-activation.all'"
                                 class="all-caps-label primary pointer"
-                                translate="file-attributes-csv-import.quick-activation.all"
                             ></span>
                             <span
                                 (click)="deactivateAll()"
+                                [translate]="'file-attributes-csv-import.quick-activation.none'"
                                 class="all-caps-label primary pointer"
-                                translate="file-attributes-csv-import.quick-activation.none"
                             ></span>
                         </div>
                     </div>

apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html

@@ -4,7 +4,7 @@
     <form (submit)="save()" [formGroup]="form">
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
-                <label translate="smtp-auth-config.form.username"></label>
+                <label [translate]="'smtp-auth-config.form.username'"></label>
                 <input
                     [placeholder]="'smtp-auth-config.form.username-placeholder' | translate"
                     formControlName="user"
@@ -14,7 +14,7 @@
             </div>
 
             <div class="iqser-input-group required w-300">
-                <label translate="smtp-auth-config.form.password"></label>
+                <label [translate]="'smtp-auth-config.form.password'"></label>
                 <input formControlName="password" name="password" type="password" />
             </div>
         </div>
@@ -23,9 +23,9 @@
             <button [disabled]="form.invalid" color="primary" mat-flat-button type="submit">
                 {{ 'smtp-auth-config.actions.save' | translate }}
             </button>
-            <div class="all-caps-label cancel" mat-dialog-close translate="smtp-auth-config.actions.cancel"></div>
+            <div [translate]="'smtp-auth-config.actions.cancel'" class="all-caps-label cancel" mat-dialog-close></div>
         </div>
     </form>
 
-    <iqser-circle-button class="dialog-close" icon="iqser:close" (action)="close()"></iqser-circle-button>
+    <iqser-circle-button (action)="close()" class="dialog-close" icon="iqser:close"></iqser-circle-button>
 </section>

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

@@ -9,20 +9,20 @@
     [bulkActions]="bulkActions"
     [headerTemplate]="headerTemplate"
     [itemSize]="80"
+    [noDataIcon]="'red:template'"
     [noDataText]="'dossier-templates-listing.no-data.title' | translate"
     [noMatchText]="'dossier-templates-listing.no-match.title' | translate"
     [selectionEnabled]="true"
     [tableColumnConfigs]="tableColumnConfigs"
-    noDataIcon="red:template"
 ></iqser-table>
 
 <ng-template #bulkActions>
     <iqser-circle-button
         (action)="openBulkDeleteTemplatesDialog($event)"
         *ngIf="currentUser.isAdmin && (listingService.areSomeSelected$ | async)"
+        [icon]="'iqser:trash'"
         [tooltip]="'dossier-templates-listing.bulk.delete' | translate"
         [type]="circleButtonTypes.dark"
-        icon="iqser:trash"
     ></iqser-circle-button>
 </ng-template>
 
@@ -36,9 +36,9 @@
         <iqser-icon-button
             (action)="openAddDossierTemplateDialog()"
             *ngIf="currentUser.isAdmin && userPreferenceService.areDevFeaturesEnabled"
+            [icon]="'iqser:plus'"
             [label]="'dossier-templates-listing.add-new' | translate"
             [type]="iconButtonTypes.primary"
-            icon="iqser:plus"
         ></iqser-icon-button>
     </div>
 </ng-template>

apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts

@@ -5,12 +5,23 @@ import { SharedModule } from '@shared/shared.module';
 import { TableItemComponent } from './table-item/table-item.component';
 import { DossierTemplatesListingScreenComponent } from './dossier-templates-listing-screen/dossier-templates-listing-screen.component';
 import { SharedAdminModule } from '../../shared/shared-admin.module';
-import { IqserUsersModule } from '@iqser/common-ui';
+import { IqserButtonsModule, IqserInputsModule, IqserListingModule, IqserUsersModule } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }];
 
 @NgModule({
     declarations: [TableItemComponent, DossierTemplatesListingScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedAdminModule, IqserUsersModule],
+    imports: [
+        RouterModule.forChild(routes),
+        CommonModule,
+        SharedModule,
+        SharedAdminModule,
+        IqserUsersModule,
+        TranslateModule,
+        IqserInputsModule,
+        IqserButtonsModule,
+        IqserListingModule,
+    ],
 })
 export class DossierTemplatesListingModule {}

apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts

@@ -7,6 +7,7 @@ import { PendingChangesGuard } from '@guards/can-deactivate.guard';
 import { EntityInfoComponent } from './screens/entity-info/entity-info.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { SharedAdminModule } from '../../shared/shared-admin.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes: Routes = [
     { path: '', redirectTo: 'info', pathMatch: 'full' },
@@ -34,6 +35,6 @@ const routes: Routes = [
 
 @NgModule({
     declarations: [DictionaryScreenComponent, EntityInfoComponent],
-    imports: [RouterModule.forChild(routes), SharedAdminModule, CommonModule, SharedModule, MonacoEditorModule],
+    imports: [RouterModule.forChild(routes), SharedAdminModule, CommonModule, SharedModule, MonacoEditorModule, TranslateModule],
 })
 export class EntitiesModule {}

apps/red-ui/src/app/modules/admin/screens/entities/screens/entity-info/entity-info.component.html

@@ -22,7 +22,7 @@
                 {{ 'entity.info.actions.save' | translate }}
             </button>
 
-            <div (click)="revert()" class="all-caps-label cancel" translate="entity.info.actions.revert"></div>
+            <div (click)="revert()" [translate]="'entity.info.actions.revert'" class="all-caps-label cancel"></div>
         </div>
     </div>
 </div>

apps/red-ui/src/app/modules/admin/screens/general-config/smtp-form/smtp-form.component.html

@@ -6,7 +6,7 @@
     <div class="dialog-content">
         <div class="dialog-content-left">
             <div class="iqser-input-group required">
-                <label translate="general-config-screen.form.host"></label>
+                <label [translate]="'general-config-screen.form.host'"></label>
                 <input
                     formControlName="host"
                     name="host"
@@ -16,12 +16,12 @@
             </div>
 
             <div class="iqser-input-group w-100">
-                <label translate="general-config-screen.form.port"></label>
+                <label [translate]="'general-config-screen.form.port'"></label>
                 <input formControlName="port" name="port" type="number" />
             </div>
 
             <div class="iqser-input-group required">
-                <label translate="general-config-screen.form.from"></label>
+                <label [translate]="'general-config-screen.form.from'"></label>
                 <input
                     formControlName="from"
                     name="from"
@@ -31,7 +31,7 @@
             </div>
 
             <div class="iqser-input-group">
-                <label translate="general-config-screen.form.from-display-name"></label>
+                <label [translate]="'general-config-screen.form.from-display-name'"></label>
                 <input
                     formControlName="fromDisplayName"
                     name="fromDisplayName"
@@ -42,7 +42,7 @@
             </div>
 
             <div class="iqser-input-group">
-                <label translate="general-config-screen.form.reply-to"></label>
+                <label [translate]="'general-config-screen.form.reply-to'"></label>
                 <input
                     formControlName="replyTo"
                     name="replyTo"
@@ -52,7 +52,7 @@
             </div>
 
             <div class="iqser-input-group">
-                <label translate="general-config-screen.form.reply-to-display-name"></label>
+                <label [translate]="'general-config-screen.form.reply-to-display-name'"></label>
                 <input
                     formControlName="replyToDisplayName"
                     name="replyToDisplayName"
@@ -62,38 +62,38 @@
             </div>
 
             <div class="iqser-input-group">
-                <label translate="general-config-screen.form.envelope-from"></label>
+                <label [translate]="'general-config-screen.form.envelope-from'"></label>
                 <input
                     formControlName="envelopeFrom"
                     name="envelopeFrom"
                     placeholder="{{ 'general-config-screen.form.envelope-from-placeholder' | translate }}"
                     type="text"
                 />
-                <span class="hint" translate="general-config-screen.form.envelope-from-hint"></span>
+                <span [translate]="'general-config-screen.form.envelope-from-hint'" class="hint"></span>
             </div>
         </div>
         <div>
             <div class="iqser-input-group">
-                <label translate="general-config-screen.form.ssl"></label>
+                <label [translate]="'general-config-screen.form.ssl'"></label>
                 <mat-slide-toggle color="primary" formControlName="ssl"></mat-slide-toggle>
             </div>
             <div class="iqser-input-group">
-                <label translate="general-config-screen.form.starttls"></label>
+                <label [translate]="'general-config-screen.form.starttls'"></label>
                 <mat-slide-toggle color="primary" formControlName="starttls"></mat-slide-toggle>
             </div>
             <div class="iqser-input-group">
-                <label translate="general-config-screen.form.auth"></label>
+                <label [translate]="'general-config-screen.form.auth'"></label>
                 <mat-slide-toggle
+                    (change)="onToggleAuthentication($event.checked)"
                     color="primary"
                     formControlName="auth"
-                    (change)="onToggleAuthentication($event.checked)"
                 ></mat-slide-toggle>
             </div>
             <div
                 (click)="openAuthConfigDialog(true)"
                 *ngIf="form.get('auth').value"
+                [translate]="'general-config-screen.form.change-credentials'"
                 class="link-action"
-                translate="general-config-screen.form.change-credentials"
             ></div>
         </div>
     </div>

apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts

@@ -3,12 +3,21 @@ import { CommonModule } from '@angular/common';
 import { DossierTemplateInfoScreenComponent } from './info-screen/dossier-template-info-screen.component';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
-import { IqserUsersModule } from '@iqser/common-ui';
+import { IqserButtonsModule, IqserScrollbarModule, IqserUsersModule } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: DossierTemplateInfoScreenComponent }];
 
 @NgModule({
     declarations: [DossierTemplateInfoScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, IqserUsersModule],
+    imports: [
+        RouterModule.forChild(routes),
+        CommonModule,
+        SharedModule,
+        IqserUsersModule,
+        TranslateModule,
+        IqserButtonsModule,
+        IqserScrollbarModule,
+    ],
 })
 export class DossierTemplateInfoModule {}

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

@@ -2,7 +2,7 @@
     <ng-container *ngIf="dossierTemplateStats$ | async as stats">
         <div class="heading-xl">{{ dossierTemplate.name }}</div>
 
-        <div class="all-caps-label mt-24 mb-8" translate="dossier-template-info-screen.created-by"></div>
+        <div [translate]="'dossier-template-info-screen.created-by'" class="all-caps-label mt-24 mb-8"></div>
 
         <iqser-initials-avatar [user]="dossierTemplate.createdBy || 'system'" [withName]="true" size="large"></iqser-initials-avatar>
 
@@ -43,7 +43,7 @@
             </div>
         </div>
 
-        <div class="heading mt-40" translate="dossier-template-info-screen.description">
+        <div [translate]="'dossier-template-info-screen.description'" class="heading mt-40">
             <iqser-circle-button
                 (action)="openEditDossierTemplateDialog($event, dossierTemplate)"
                 *ngIf="permissionsService.isAdmin()"

apps/red-ui/src/app/modules/admin/screens/justifications/justifications.module.ts

@@ -6,12 +6,14 @@ import { SharedModule } from '@shared/shared.module';
 import { TableItemComponent } from './table-item/table-item.component';
 import { JustificationsDialogService } from './justifications-dialog.service';
 import { AddEditJustificationDialogComponent } from './add-edit-justification-dialog/add-edit-justification-dialog.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserButtonsModule, IqserListingModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: JustificationsScreenComponent }];
 
 @NgModule({
     declarations: [JustificationsScreenComponent, TableItemComponent, AddEditJustificationDialogComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IqserButtonsModule, IqserListingModule],
     providers: [JustificationsDialogService],
 })
 export class JustificationsModule {}

apps/red-ui/src/app/modules/admin/screens/permissions/permissions.module.ts

@@ -4,13 +4,14 @@ import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
 import { PermissionsScreenComponent } from './permissions-screen/permissions-screen.component';
 import { ConfigService } from './config.service';
-import { CommonUiModule } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserListingModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: PermissionsScreenComponent }];
 
 @NgModule({
     declarations: [PermissionsScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, CommonUiModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IqserListingModule],
     providers: [ConfigService],
 })
 export class PermissionsModule {}

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

@@ -1,12 +1,12 @@
 <div class="content-container" iqserHasScrollbar>
-    <div class="heading-xl" translate="reports-screen.title"></div>
+    <div [translate]="'reports-screen.title'" class="heading-xl"></div>
 
-    <div class="description" translate="reports-screen.setup"></div>
+    <div [translate]="'reports-screen.setup'" class="description"></div>
-    <div class="description" translate="reports-screen.description"></div>
+    <div [translate]="'reports-screen.description'" class="description"></div>
 
     <div *ngIf="placeholders$ | async as placeholders" class="placeholders">
-        <div class="all-caps-label" translate="reports-screen.table-header.placeholders"></div>
+        <div [translate]="'reports-screen.table-header.placeholders'" class="all-caps-label"></div>
-        <div class="all-caps-label" translate="reports-screen.table-header.description"></div>
+        <div [translate]="'reports-screen.table-header.description'" class="all-caps-label"></div>
         <ng-container *ngFor="let placeholder of placeholders">
             <div class="placeholder">{{ placeholder.placeholder }}</div>
             <div
@@ -19,7 +19,8 @@
 
 <div *ngIf="availableTemplates$ | async as availableTemplates" class="right-container" iqserHasScrollbar>
     <div class="header">
-        <div class="heading" translate="reports-screen.report-documents"></div>
+        <div [translate]="'reports-screen.report-documents'" class="heading"></div>
+
         <iqser-circle-button
             (action)="fileInput.click()"
             *ngIf="permissionsService.isAdmin()"
@@ -31,8 +32,8 @@
     <div
         (click)="fileInput.click()"
         *ngIf="permissionsService.isAdmin() && !availableTemplates?.length"
+        [translate]="'reports-screen.upload-document'"
         class="template upload-button"
-        translate="reports-screen.upload-document"
     ></div>
 
     <div *ngFor="let template of availableTemplates" class="template">
@@ -42,6 +43,7 @@
 
         <div class="actions">
             <iqser-circle-button (action)="download(template)" [iconSize]="12" [size]="18" icon="iqser:download"></iqser-circle-button>
+
             <iqser-circle-button
                 (action)="deleteTemplate(template)"
                 *ngIf="permissionsService.isAdmin()"

apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts

@@ -3,11 +3,13 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
 import { ReportsScreenComponent } from './reports-screen/reports-screen.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserButtonsModule, IqserScrollbarModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: ReportsScreenComponent }];
 
 @NgModule({
     declarations: [ReportsScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IqserButtonsModule, IqserScrollbarModule],
 })
 export class ReportsModule {}

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

@@ -7,5 +7,6 @@
         [type]="iconButtonTypes.primary"
         icon="iqser:check"
     ></iqser-icon-button>
-    <div (click)="revert()" class="all-caps-label cancel" translate="rules-screen.revert-changes"></div>
+
+    <div (click)="revert()" [translate]="'rules-screen.revert-changes'" class="all-caps-label cancel"></div>
 </div>

apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts

@@ -5,11 +5,13 @@ import { SharedModule } from '@shared/shared.module';
 import { RulesScreenComponent } from './rules-screen/rules-screen.component';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { PendingChangesGuard } from '@guards/can-deactivate.guard';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserButtonsModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: RulesScreenComponent, canDeactivate: [PendingChangesGuard] }];
 
 @NgModule({
     declarations: [RulesScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, MonacoEditorModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, MonacoEditorModule, TranslateModule, IqserButtonsModule],
 })
 export class RulesModule {}

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

@@ -8,19 +8,19 @@
             [type]="iconButtonTypes.primary"
             icon="iqser:check"
         ></iqser-icon-button>
-        <div (click)="revert()" class="all-caps-label cancel" translate="watermark-screen.action.revert"></div>
+        <div (click)="revert()" [translate]="'watermark-screen.action.revert'" class="all-caps-label cancel"></div>
     </div>
 </div>
 
 <div *ngIf="watermark$ | async" class="right-container" iqserHasScrollbar>
     <form (keyup)="configChanged()" [formGroup]="form">
         <div class="iqser-input-group required w-300">
-            <label translate="watermark-screen.form.name-label"></label>
+            <label [translate]="'watermark-screen.form.name-label'"></label>
             <input [placeholder]="'watermark-screen.form.name-placeholder' | translate" formControlName="name" type="text" />
         </div>
 
         <div class="iqser-input-group required w-300">
-            <label translate="watermark-screen.form.text-label"></label>
+            <label [translate]="'watermark-screen.form.text-label'"></label>
             <textarea
                 [placeholder]="'watermark-screen.form.text-placeholder' | translate"
                 class="w-full"
@@ -33,7 +33,7 @@
         </div>
 
         <div class="iqser-input-group">
-            <label class="all-caps-label mb-8" translate="watermark-screen.form.orientation"></label>
+            <label [translate]="'watermark-screen.form.orientation'" class="all-caps-label mb-8"></label>
             <div class="square-options">
                 <div
                     (click)="setValue('orientation', option)"
@@ -48,17 +48,17 @@
         </div>
 
         <div class="iqser-input-group">
-            <label class="all-caps-label" translate="watermark-screen.form.font-size"></label>
+            <label [translate]="'watermark-screen.form.font-size'" class="all-caps-label"></label>
             <mat-slider (change)="configChanged()" color="primary" formControlName="fontSize" max="50" min="5"></mat-slider>
         </div>
 
         <div class="iqser-input-group">
-            <label class="all-caps-label" translate="watermark-screen.form.opacity"></label>
+            <label [translate]="'watermark-screen.form.opacity'" class="all-caps-label"></label>
             <mat-slider (change)="configChanged()" color="primary" formControlName="opacity" min="1"></mat-slider>
         </div>
 
         <div class="iqser-input-group w-150">
-            <label class="all-caps-label mb-5" translate="watermark-screen.form.color"></label>
+            <label [translate]="'watermark-screen.form.color'" class="all-caps-label mb-5"></label>
             <input
                 [placeholder]="'watermark-screen.form.color-placeholder' | translate"
                 class="hex-color-input"
@@ -85,7 +85,7 @@
         </div>
 
         <div class="iqser-input-group">
-            <label class="all-caps-label mb-8" translate="watermark-screen.form.font-type"></label>
+            <label [translate]="'watermark-screen.form.font-type'" class="all-caps-label mb-8"></label>
             <div class="square-options">
                 <div
                     (click)="setValue('fontType', option.value)"

apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts

@@ -4,10 +4,11 @@ import { RouterModule } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
 import { WatermarkScreenComponent } from './watermark-screen/watermark-screen.component';
 import { WatermarksListingScreenComponent } from './watermarks-listing/watermarks-listing-screen.component';
-import { CompositeRouteGuard, IqserAuthGuard, IqserUsersModule } from '@iqser/common-ui';
+import { CompositeRouteGuard, IqserAuthGuard, IqserButtonsModule, IqserListingModule, IqserUsersModule } from '@iqser/common-ui';
 import { RedRoleGuard } from '@users/red-role.guard';
 import { WATERMARK_ID } from '@red/domain';
 import { WatermarkExistsGuard } from '@guards/watermark-exists.guard';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [
     {
@@ -38,6 +39,14 @@ const routes = [
 
 @NgModule({
     declarations: [WatermarkScreenComponent, WatermarksListingScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, IqserUsersModule],
+    imports: [
+        RouterModule.forChild(routes),
+        CommonModule,
+        SharedModule,
+        IqserUsersModule,
+        TranslateModule,
+        IqserButtonsModule,
+        IqserListingModule,
+    ],
 })
 export class WatermarkModule {}

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

@@ -3,6 +3,8 @@ import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
 import { DossierTemplateActionsComponent } from './components/dossier-template-actions/dossier-template-actions.component';
 import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserButtonsModule } from '@iqser/common-ui';
 
 const components = [DossierTemplateActionsComponent];
 
@@ -11,6 +13,6 @@ const modules = [CommonModule, SharedModule];
 @NgModule({
     declarations: [...components],
     exports: [...components, ...modules],
-    imports: [...modules, RouterModule],
+    imports: [...modules, RouterModule, TranslateModule, IqserButtonsModule],
 })
 export class SharedAdminModule {}

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

@@ -6,14 +6,24 @@ import { TableItemComponent } from './components/table-item/table-item.component
 import { SharedModule } from '@shared/shared.module';
 import { ConfigService } from './services/config.service';
 import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
-import { IqserHelpModeModule, IqserUsersModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserListingModule, IqserUsersModule } from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 
 const components = [TableItemComponent];
 const screens = [ArchivedDossiersScreenComponent];
 
 @NgModule({
     declarations: [...components, ...screens],
-    imports: [CommonModule, ArchiveRoutingModule, SharedModule, SharedDossiersModule, IqserHelpModeModule, IqserUsersModule],
+    imports: [
+        CommonModule,
+        ArchiveRoutingModule,
+        SharedModule,
+        SharedDossiersModule,
+        IqserHelpModeModule,
+        IqserUsersModule,
+        TranslateModule,
+        IqserListingModule,
+    ],
     providers: [ConfigService],
 })
 export class ArchiveModule {}

apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html

@@ -67,6 +67,7 @@
                 {{ 'dashboard.empty-template.description' | translate }}
             </div>
         </div>
+
         <iqser-icon-button
             (action)="newDossier()"
             *ngIf="permissionsService.canCreateDossier(dossierTemplate)"

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

@@ -6,6 +6,8 @@ import { SharedModule } from '../shared/shared.module';
 import { TemplateStatsComponent } from './components/template-stats/template-stats.component';
 import { BreadcrumbTypes } from '@red/domain';
 import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserButtonsModule } from '@iqser/common-ui';
 
 const routes = [
     {
@@ -19,6 +21,6 @@ const routes = [
 
 @NgModule({
     declarations: [DashboardScreenComponent, TemplateStatsComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, SharedDossiersModule, TranslateModule, IqserButtonsModule],
 })
 export class DashboardModule {}

apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts

@@ -2,7 +2,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
-import { IqserHelpModeModule, IqserIconsModule, IqserUsersModule } from '@iqser/common-ui';
+import {
+    IqserButtonsModule,
+    IqserHelpModeModule,
+    IqserIconsModule,
+    IqserListingModule,
+    IqserLoadingModule,
+    IqserSharedModule,
+    IqserUsersModule,
+} from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { DossierOverviewScreenComponent } from './screen/dossier-overview-screen.component';
 import { DossierOverviewBulkActionsComponent } from './components/bulk-actions/dossier-overview-bulk-actions.component';
@@ -47,6 +55,10 @@ const routes: Routes = [
         TranslateModule,
         IqserHelpModeModule,
         IqserUsersModule,
+        IqserListingModule,
+        IqserButtonsModule,
+        IqserLoadingModule,
+        IqserSharedModule,
     ],
 })
 export class DossierOverviewModule {}

apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts

@@ -1,6 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IqserHelpModeModule, IqserIconsModule, IqserUsersModule } from '@iqser/common-ui';
+import {
+    IqserButtonsModule,
+    IqserHelpModeModule,
+    IqserIconsModule,
+    IqserListingModule,
+    IqserScrollbarModule,
+    IqserSharedModule,
+    IqserUsersModule,
+} from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { DossiersListingScreenComponent } from './screen/dossiers-listing-screen.component';
 import { RouterModule, Routes } from '@angular/router';
@@ -41,6 +49,10 @@ const routes: Routes = [
         TranslateModule,
         IqserHelpModeModule,
         IqserUsersModule,
+        IqserButtonsModule,
+        IqserListingModule,
+        IqserScrollbarModule,
+        IqserSharedModule,
     ],
 })
 export class DossiersListingModule {}

apps/red-ui/src/app/modules/file-preview/file-preview.module.ts

@@ -1,6 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { IqserHelpModeModule, IqserIconsModule, IqserUsersModule } from '@iqser/common-ui';
+import {
+    CapitalizePipe,
+    IqserButtonsModule,
+    IqserEmptyStatesModule,
+    IqserFiltersModule,
+    IqserHelpModeModule,
+    IqserIconsModule,
+    IqserInputsModule,
+    IqserSharedModule,
+    IqserUploadFileModule,
+    IqserUsersModule,
+} from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule, Routes } from '@angular/router';
 import { SharedModule } from '@shared/shared.module';
@@ -95,6 +106,13 @@ const components = [
         OverlayModule,
         IqserHelpModeModule,
         IqserUsersModule,
+        CapitalizePipe,
+        IqserButtonsModule,
+        IqserInputsModule,
+        IqserSharedModule,
+        IqserUploadFileModule,
+        IqserEmptyStatesModule,
+        IqserFiltersModule,
     ],
     providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard],
 })

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

@@ -2,13 +2,22 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SearchScreenComponent } from './search-screen/search-screen.component';
 import { RouterModule } from '@angular/router';
-import { CommonUiModule, IqserUsersModule } from '@iqser/common-ui';
+import { IqserListingModule, IqserSharedModule, IqserUsersModule } from '@iqser/common-ui';
 import { SharedModule } from '@shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: SearchScreenComponent }];
 
 @NgModule({
     declarations: [SearchScreenComponent],
-    imports: [CommonModule, RouterModule.forChild(routes), CommonUiModule, SharedModule, IqserUsersModule],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        SharedModule,
+        IqserUsersModule,
+        TranslateModule,
+        IqserListingModule,
+        IqserSharedModule,
+    ],
 })
 export class SearchModule {}

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html

@@ -36,7 +36,9 @@
             </ng-container>
         </div>
     </div>
+
     <div class="separator"></div>
+
     <div class="image-attributes-container">
         <div *ngIf="imageAttributes.length" class="heading">
             {{ 'edit-dossier-dialog.attributes.image-attributes' | translate }}
@@ -79,6 +81,7 @@
                     type="file"
                 />
             </div>
+
             <div *ngIf="currentAttrValue(attr) && !disabled">
                 <iqser-circle-button
                     (action)="deleteAttr(attr)"
@@ -86,6 +89,7 @@
                     [type]="circleButtonTypes.dark"
                     icon="iqser:trash"
                 ></iqser-circle-button>
+
                 <iqser-circle-button
                     (action)="fileInputClick(attr)"
                     [tooltip]="'edit-dossier-dialog.attributes.upload-image' | translate"

apps/red-ui/src/app/modules/shared-dossiers/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html

@@ -46,7 +46,7 @@
                 <mat-select [placeholder]="statusPlaceholder" formControlName="dossierStatusId">
                     <mat-option *ngFor="let stateId of states" [value]="stateId">
                         <div [matTooltip]="getStateName(stateId)" class="flex-align-items-center" matTooltipPosition="after">
-                            <redaction-small-chip *ngIf="!!stateId" [color]="getStateColor(stateId)"></redaction-small-chip>
+                            <iqser-small-chip *ngIf="!!stateId" [color]="getStateColor(stateId)"></iqser-small-chip>
                             <div class="clamp-1">{{ getStateName(stateId) }}</div>
                         </div>
                     </mat-option>

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

@@ -13,7 +13,16 @@ import { EditDossierTeamComponent } from './dialogs/edit-dossier-dialog/edit-dos
 import { DateColumnComponent } from './components/date-column/date-column.component';
 import { FileAssignService } from './services/file-assign.service';
 import { DictionaryDetailsDialogComponent } from './dialogs/edit-dossier-dialog/dictionary/dictionary-details-dialog/dictionary-details-dialog.component';
-import { IqserHelpModeModule, IqserUsersModule } from '@iqser/common-ui';
+import {
+    IqserButtonsModule,
+    IqserEmptyStatesModule,
+    IqserHelpModeModule,
+    IqserInputsModule,
+    IqserScrollbarModule,
+    IqserSharedModule,
+    IqserUsersModule,
+} from '@iqser/common-ui';
+import { TranslateModule } from '@ngx-translate/core';
 
 const components = [
     FileActionsComponent,
@@ -32,6 +41,17 @@ const services = [DossiersDialogService, FileAssignService];
     declarations: [...components, ...dialogs],
     exports: [...components, ...dialogs],
     providers: [...services],
-    imports: [CommonModule, SharedModule, IqserHelpModeModule, IqserUsersModule],
+    imports: [
+        CommonModule,
+        SharedModule,
+        IqserHelpModeModule,
+        IqserUsersModule,
+        TranslateModule,
+        IqserButtonsModule,
+        IqserEmptyStatesModule,
+        IqserSharedModule,
+        IqserInputsModule,
+        IqserScrollbarModule,
+    ],
 })
 export class SharedDossiersModule {}

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

@@ -2,5 +2,6 @@
     <div class="dossier-state-text clamp-1">
         {{ (dossierState$ | async)?.name || ('dossier-state.placeholder' | translate) }}
     </div>
-    <redaction-small-chip [color]="(dossierState$ | async)?.color || '#E2E4E9'"></redaction-small-chip>
+
+    <iqser-small-chip [color]="(dossierState$ | async)?.color ?? '#E2E4E9'"></iqser-small-chip>
 </div>

apps/red-ui/src/app/modules/shared/dialogs/add-dossier-dialog/add-dossier-dialog.component.html

@@ -1,10 +1,10 @@
 <section class="dialog">
     <form (submit)="save()" [formGroup]="form">
-        <div class="dialog-header heading-l" translate="add-dossier-dialog.header-new"></div>
+        <div [translate]="'add-dossier-dialog.header-new'" class="dialog-header heading-l"></div>
 
         <div class="dialog-content">
             <div class="iqser-input-group required w-300">
-                <label translate="add-dossier-dialog.form.name.label"></label>
+                <label [translate]="'add-dossier-dialog.form.name.label'"></label>
                 <input
                     [placeholder]="'add-dossier-dialog.form.name.placeholder' | translate"
                     formControlName="dossierName"
@@ -36,7 +36,7 @@
             </div>
 
             <div class="iqser-input-group w-400">
-                <label translate="add-dossier-dialog.form.description.label"></label>
+                <label [translate]="'add-dossier-dialog.form.description.label'"></label>
                 <textarea
                     [placeholder]="'add-dossier-dialog.form.description.placeholder' | translate"
                     formControlName="description"

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

@@ -8,7 +8,7 @@ import { IconsModule } from '../icons/icons.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AnnotationIconComponent } from './components/annotation-icon/annotation-icon.component';
 import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
-import { CommonUiModule, IqserHelpModeModule, IqserUsersModule } from '@iqser/common-ui';
+import { IqserButtonsModule, IqserHelpModeModule, IqserSharedModule, IqserUsersModule } from '@iqser/common-ui';
 import { SelectComponent } from './components/select/select.component';
 import { NavigateLastDossiersScreenDirective } from './directives/navigate-last-dossiers-screen.directive';
 import { DictionaryManagerComponent } from './components/dictionary-manager/dictionary-manager.component';
@@ -70,15 +70,16 @@ const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, Rea
     declarations: [...components, ...utils, EditorComponent],
     imports: [
         CommonModule,
-        CommonUiModule,
         ...modules,
         MonacoEditorModule,
         TranslateModule,
         RouterModule,
         IqserHelpModeModule,
         IqserUsersModule,
+        IqserButtonsModule,
+        IqserSharedModule,
     ],
-    exports: [...modules, CommonUiModule, ...components, ...utils],
+    exports: [...modules, ...components, ...utils],
     providers: [
         ...services,
         {

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

@@ -2,16 +2,25 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { TrashScreenComponent } from './trash-screen/trash-screen.component';
-import { CommonUiModule, IqserUsersModule } from '@iqser/common-ui';
+import { IqserButtonsModule, IqserListingModule, IqserUsersModule } from '@iqser/common-ui';
 import { TrashTableItemComponent } from './trash-screen/trash-table-item/trash-table-item.component';
 import { SharedModule } from '@shared/shared.module';
 import { TrashDialogService } from './services/trash-dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: TrashScreenComponent }];
 
 @NgModule({
     declarations: [TrashScreenComponent, TrashTableItemComponent],
-    imports: [CommonModule, RouterModule.forChild(routes), CommonUiModule, SharedModule, IqserUsersModule],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        SharedModule,
+        IqserUsersModule,
+        TranslateModule,
+        IqserListingModule,
+        IqserButtonsModule,
+    ],
     providers: [TrashDialogService],
 })
 export class TrashModule {}

apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html

@@ -1,7 +1,7 @@
 <section class="dialog">
     <div
-        class="dialog-header heading-l"
         [translate]="filename ? 'overwrite-files-dialog.file-title' : 'overwrite-files-dialog.archive-title'"
+        class="dialog-header heading-l"
     ></div>
 
     <div class="dialog-content">
@@ -21,28 +21,31 @@
 
     <div class="dialog-actions">
         <iqser-icon-button
-            *ngIf="!filename"
             (action)="selectOption()"
+            *ngIf="!filename"
             [disabled]="rememberChoice"
             [label]="'overwrite-files-dialog.options.proceed' | translate"
             [type]="iconButtonTypes.primary"
         ></iqser-icon-button>
+
         <ng-container *ngIf="filename">
             <iqser-icon-button
-                *ngIf="filename"
                 (action)="selectOption()"
+                *ngIf="filename"
                 [disabled]="rememberChoice"
                 [label]="'overwrite-files-dialog.options.current-files' | translate"
                 [type]="iconButtonTypes.primary"
             ></iqser-icon-button>
+
             <iqser-icon-button
-                *ngIf="filename"
                 (action)="selectOption(true)"
+                *ngIf="filename"
+                [boldText]="true"
                 [label]="'overwrite-files-dialog.options.all-files' | translate"
                 [type]="iconButtonTypes.dark"
-                [boldText]="true"
             ></iqser-icon-button>
         </ng-container>
-        <div (click)="cancel()" class="all-caps-label cancel" translate="overwrite-files-dialog.options.cancel"></div>
+
+        <div (click)="cancel()" [translate]="'overwrite-files-dialog.options.cancel'" class="all-caps-label cancel"></div>
     </div>
 </section>

apps/red-ui/src/app/modules/upload-download/file-upload-download.module.ts

@@ -10,9 +10,11 @@ import { FileDownloadService } from './services/file-download.service';
 import { StatusOverlayService } from './services/status-overlay.service';
 import { FileDropOverlayService } from './services/file-drop-overlay.service';
 import { UploadDownloadDialogService } from './services/upload-download-dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { IqserButtonsModule, IqserInputsModule } from '@iqser/common-ui';
 
 @NgModule({
-    imports: [CommonModule, SharedModule, OverlayModule],
+    imports: [CommonModule, SharedModule, OverlayModule, TranslateModule, IqserButtonsModule, IqserInputsModule],
     declarations: [FileDropComponent, UploadStatusOverlayComponent, OverwriteFilesDialogComponent],
     providers: [UploadDownloadDialogService, FileUploadService, FileDownloadService, StatusOverlayService, FileDropOverlayService],
     exports: [FileDropComponent, UploadStatusOverlayComponent],

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

@@ -3,14 +3,18 @@
         <div class="title flex-1">
             {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
         </div>
+
         <iqser-circle-button [icon]="'iqser:status-' + (collapsed ? 'expand' : 'collapse')" id="expand-upload-status"></iqser-circle-button>
+
         <iqser-circle-button (action)="closeDialog()" icon="iqser:close" id="close-upload-status"></iqser-circle-button>
     </div>
+
     <div [hidden]="collapsed" class="upload-download-list">
         <div *ngFor="let dossierId of uploadService.activeDossierKeys">
             <div class="dossier-name-wrapper all-caps-label">
                 <span>{{ uploadService.groupedFiles[dossierId][0].dossierName }}</span>
             </div>
+
             <div *ngFor="let model of uploadService.groupedFiles[dossierId]" [class.error]="model.error" class="upload-download-list-item">
                 <div>
                     <div class="upload-download-line">
@@ -22,8 +26,10 @@
                         >
                             {{ model.file?.name }}
                         </div>
+
                         <div *ngIf="!model.error" class="progress">{{ model.progress }}%</div>
                     </div>
+
                     <div *ngIf="model.error" class="error-message">
                         {{ model.error?.message }}
                     </div>
@@ -47,6 +53,7 @@
                         icon="iqser:refresh"
                         tooltipPosition="before"
                     ></iqser-circle-button>
+
                     <iqser-circle-button
                         (action)="cancelItem(model)"
                         [tooltip]="'upload-status.dialog.actions.cancel' | translate"

libs/common-ui

@@ -1 +1 @@
-Subproject commit fc3269cc0c86ce3c26c9c0266e4429f393214d37
+Subproject commit 9280ea8e525c2f4e2ee6e5b5b81900d02c8fc662