RED-3800: remove buttons module

2023-03-15 23:33:13 +02:00 · 2023-03-15 23:33:13 +02:00 · 16815cc343
commit 16815cc343
parent 08311965ab
28 changed files with 118 additions and 79 deletions
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@ -9,6 +9,7 @@ import { MissingTranslationHandler } from '@ngx-translate/core';
 import {
    BASE_HREF,
    CachingModule,
+    CircleButtonComponent,
    CommonUiModule,
    IqserHelpModeModule,
    IqserLoadingModule,
@ -153,6 +154,7 @@ export const appModuleFactory = (config: AppConfig) => {
                    } as ILoggerConfig,
                },
            }),
+            CircleButtonComponent,
        ],
        providers: [
            {
--- a/apps/red-ui/src/app/modules/account/account.module.ts
+++ b/apps/red-ui/src/app/modules/account/account.module.ts
@ -6,13 +6,20 @@ import { AccountSideNavComponent } from './account-side-nav/account-side-nav.com
 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';
-import { IqserHelpModeModule } from '@iqser/common-ui';
+import { IconButtonComponent, IqserHelpModeModule, IqserSharedModule } from '@iqser/common-ui';
 import { PreferencesComponent } from './screens/preferences/preferences.component';

@NgModule({
    declarations: [AccountSideNavComponent, BaseAccountScreenComponent, PreferencesComponent],
-    imports: [CommonModule, SharedModule, AccountRoutingModule, TranslateModule, IqserSharedModule, IqserHelpModeModule],
+    imports: [
+        CommonModule,
+        SharedModule,
+        AccountRoutingModule,
+        TranslateModule,
+        IqserSharedModule,
+        IqserHelpModeModule,
+        IconButtonComponent,
+    ],
    providers: [NotificationPreferencesService],
 })
 export class AccountModule {}
--- a/apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts
+++ b/apps/red-ui/src/app/modules/account/screens/notifications/notifications.module.ts
@ -5,11 +5,12 @@ 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';
+import { IconButtonComponent } from '@iqser/common-ui';

 const routes = [{ path: '', component: NotificationsScreenComponent, canDeactivate: [PendingChangesGuard] }];

@NgModule({
    declarations: [NotificationsScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IconButtonComponent],
 })
 export class NotificationsModule {}
--- a/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts
+++ b/apps/red-ui/src/app/modules/account/screens/user-profile/user-profile.module.ts
@ -7,12 +7,13 @@ import { PendingChangesGuard } from '@guards/can-deactivate.guard';
 import { TranslateModule } from '@ngx-translate/core';
 import { ConfirmPasswordDialogComponent } from './confirm-password-dialog/confirm-password-dialog.component';
 import { UserProfileDialogService } from './services/user-profile-dialog.service';
+import { CircleButtonComponent, IconButtonComponent } from '@iqser/common-ui';

 const routes = [{ path: '', component: UserProfileScreenComponent, canDeactivate: [PendingChangesGuard] }];

@NgModule({
    declarations: [UserProfileScreenComponent, ConfirmPasswordDialogComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule],
+    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IconButtonComponent, CircleButtonComponent],
    providers: [UserProfileDialogService],
 })
 export class UserProfileModule {}
--- a/apps/red-ui/src/app/modules/admin/admin.module.ts
+++ b/apps/red-ui/src/app/modules/admin/admin.module.ts
@ -42,8 +42,10 @@ import { ConfigureCertificateDialogComponent } from './dialogs/configure-digital
 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 {
+    ChevronButtonComponent,
+    CircleButtonComponent,
    HumanizePipe,
-    IqserButtonsModule,
+    IconButtonComponent,
    IqserEmptyStatesModule,
    IqserHelpModeModule,
    IqserInputsModule,
@ -113,7 +115,6 @@ const components = [
        IqserUsersModule,
        TranslateModule,
        HumanizePipe,
-        IqserButtonsModule,
        IqserListingModule,
        IqserScrollbarModule,
        IqserInputsModule,
@ -125,6 +126,9 @@ const components = [
        AdminSideNavComponent,
        DossierTemplateActionsComponent,
        DossierTemplateBreadcrumbsComponent,
+        IconButtonComponent,
+        CircleButtonComponent,
+        ChevronButtonComponent,
    ],
 })
 export class AdminModule {}
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-templates-listing/dossier-templates-listing.module.ts
@ -5,7 +5,8 @@ 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 {
-    IqserButtonsModule,
+    CircleButtonComponent,
+    IconButtonComponent,
    IqserHelpModeModule,
    IqserInputsModule,
    IqserListingModule,
@ -26,11 +27,12 @@ const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }]
        IqserUsersModule,
        TranslateModule,
        IqserInputsModule,
-        IqserButtonsModule,
        IqserListingModule,
        IqserHelpModeModule,
        IqserPermissionsModule,
        DossierTemplateActionsComponent,
+        CircleButtonComponent,
+        IconButtonComponent,
    ],
 })
 export class DossierTemplatesListingModule {}
--- a/apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/entities/entities.module.ts
@ -7,7 +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 { TranslateModule } from '@ngx-translate/core';
-import { IqserHelpModeModule, IqserPermissionsModule, IqserScrollbarModule } from '@iqser/common-ui';
+import { IconButtonComponent, IqserHelpModeModule, IqserPermissionsModule, IqserScrollbarModule } from '@iqser/common-ui';

 const routes: Routes = [
    { path: '', redirectTo: 'info', pathMatch: 'full' },
@ -44,6 +44,7 @@ const routes: Routes = [
        IqserScrollbarModule,
        IqserHelpModeModule,
        IqserPermissionsModule,
+        IconButtonComponent,
    ],
 })
 export class EntitiesModule {}
--- a/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/info/dossier-template-info.module.ts
@ -3,7 +3,7 @@ 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 { IqserButtonsModule, IqserHelpModeModule, IqserScrollbarModule, IqserUsersModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserScrollbarModule, IqserUsersModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';

 const routes = [{ path: '', component: DossierTemplateInfoScreenComponent }];
@ -16,7 +16,6 @@ const routes = [{ path: '', component: DossierTemplateInfoScreenComponent }];
        SharedModule,
        IqserUsersModule,
        TranslateModule,
-        IqserButtonsModule,
        IqserScrollbarModule,
        IqserHelpModeModule,
    ],
--- a/apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/justifications/add-edit-justification-dialog/add-edit-justification-dialog.component.html
@ -48,8 +48,7 @@
                [label]="'add-edit-justification.actions.save' | translate"
                [submit]="true"
                [type]="iconButtonTypes.primary"
-            >
-            </iqser-icon-button>
+            ></iqser-icon-button>

            <div (click)="close()" class="all-caps-label cancel" translate="add-edit-justification.actions.cancel"></div>
        </div>
--- a/apps/red-ui/src/app/modules/admin/screens/justifications/justifications.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/justifications/justifications.module.ts
@ -7,13 +7,22 @@ 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';
+import { CircleButtonComponent, IconButtonComponent, IqserListingModule, IqserScrollbarModule } from '@iqser/common-ui';

 const routes = [{ path: '', component: JustificationsScreenComponent }];

@NgModule({
    declarations: [JustificationsScreenComponent, TableItemComponent, AddEditJustificationDialogComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, TranslateModule, IqserButtonsModule, IqserListingModule],
+    imports: [
+        RouterModule.forChild(routes),
+        CommonModule,
+        SharedModule,
+        TranslateModule,
+        IqserListingModule,
+        IconButtonComponent,
+        CircleButtonComponent,
+        IqserScrollbarModule,
+    ],
    providers: [JustificationsDialogService],
 })
 export class JustificationsModule {}
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports.module.ts
@ -1,10 +1,9 @@
 import { NgModule } from '@angular/core';
 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, IqserHelpModeModule, IqserPermissionsModule, IqserScrollbarModule } from '@iqser/common-ui';
+import { CircleButtonComponent, IqserHelpModeModule, IqserPermissionsModule, IqserScrollbarModule } from '@iqser/common-ui';

 const routes = [{ path: '', component: ReportsScreenComponent }];

@ -13,12 +12,11 @@ const routes = [{ path: '', component: ReportsScreenComponent }];
    imports: [
        RouterModule.forChild(routes),
        CommonModule,
-        SharedModule,
        TranslateModule,
-        IqserButtonsModule,
        IqserScrollbarModule,
        IqserHelpModeModule,
        IqserPermissionsModule,
+        CircleButtonComponent,
    ],
 })
 export class ReportsModule {}
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen/rules-screen.component.ts
@ -13,7 +13,6 @@ import IModelDeltaDecoration = monaco.editor.IModelDeltaDecoration;
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;

@Component({
-    selector: 'redaction-rules-screen',
    templateUrl: './rules-screen.component.html',
    styleUrls: ['./rules-screen.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules.module.ts
@ -1,17 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-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';
+import { IconButtonComponent } from '@iqser/common-ui';
+import { FormsModule } from '@angular/forms';

 const routes = [{ path: '', component: RulesScreenComponent, canDeactivate: [PendingChangesGuard] }];

@NgModule({
    declarations: [RulesScreenComponent],
-    imports: [RouterModule.forChild(routes), CommonModule, SharedModule, MonacoEditorModule, TranslateModule, IqserButtonsModule],
+    imports: [RouterModule.forChild(routes), CommonModule, MonacoEditorModule, TranslateModule, IconButtonComponent, FormsModule],
 })
 export class RulesModule {}
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/paginator/paginator.component.html
@ -1,10 +1,12 @@
 <div class="pagination noselect">
-    <div id="portraitPage" class="page-button" (click)="changePage.emit(1)">
+    <div (click)="changePage.emit(1)" class="page-button" id="portraitPage">
        <mat-icon class="chevron-icon" svgIcon="red:nav-prev"></mat-icon>
        Portrait
    </div>
+
    <div class="separator">/</div>
-    <div id="landscapePage" class="page-button" (click)="changePage.emit(2)">
+
+    <div (click)="changePage.emit(2)" class="page-button" id="landscapePage">
        Landscape
        <mat-icon class="chevron-icon" svgIcon="red:nav-next"></mat-icon>
    </div>
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark.module.ts
@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 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 {
+    CircleButtonComponent,
    CompositeRouteGuard,
+    IconButtonComponent,
    IqserAuthGuard,
-    IqserButtonsModule,
    IqserHelpModeModule,
    IqserListingModule,
    IqserPermissionsModule,
@ -19,6 +19,11 @@ import { WATERMARK_ID } from '@red/domain';
 import { WatermarkExistsGuard } from '@guards/watermark-exists.guard';
 import { TranslateModule } from '@ngx-translate/core';
 import { PaginatorComponent } from './paginator/paginator.component';
+import { MatIconModule } from '@angular/material/icon';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatLegacySliderModule } from '@angular/material/legacy-slider';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';

 const routes = [
    {
@ -52,14 +57,19 @@ const routes = [
    imports: [
        RouterModule.forChild(routes),
        CommonModule,
-        SharedModule,
        IqserUsersModule,
        TranslateModule,
-        IqserButtonsModule,
        IqserListingModule,
        IqserScrollbarModule,
        IqserHelpModeModule,
        IqserPermissionsModule,
+        MatIconModule,
+        IconButtonComponent,
+        ReactiveFormsModule,
+        MatLegacySliderModule,
+        ColorPickerModule,
+        MatLegacySlideToggleModule,
+        CircleButtonComponent,
    ],
 })
 export class WatermarkModule {}
--- a/apps/red-ui/src/app/modules/archive/archive.module.ts
+++ b/apps/red-ui/src/app/modules/archive/archive.module.ts
@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { ArchivedDossiersScreenComponent } from './screens/archived-dossiers-screen/archived-dossiers-screen.component';
 import { ArchiveRoutingModule } from './archive-routing.module';
 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 { IqserButtonsModule, IqserHelpModeModule, IqserListingModule, IqserPermissionsModule, IqserUsersModule } from '@iqser/common-ui';
+import { IqserHelpModeModule, IqserListingModule, IqserPermissionsModule, IqserUsersModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '@shared/shared.module';
+import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';

 const components = [TableItemComponent];
 const screens = [ArchivedDossiersScreenComponent];
@ -17,14 +17,13 @@ const screens = [ArchivedDossiersScreenComponent];
    imports: [
        CommonModule,
        ArchiveRoutingModule,
-        SharedModule,
-        SharedDossiersModule,
        IqserHelpModeModule,
        IqserUsersModule,
        TranslateModule,
        IqserListingModule,
-        IqserButtonsModule,
        IqserPermissionsModule,
+        SharedModule,
+        SharedDossiersModule,
    ],
    providers: [ConfigService],
 })
--- a/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
+++ b/apps/red-ui/src/app/modules/dashboard/components/template-stats/template-stats.component.html
@ -13,7 +13,7 @@
                    <mat-icon svgIcon="red:archive"></mat-icon>
                    <span
                        [innerHTML]="
-                            'dossier-template-stats.archived-dossiers' | translate: { count: dossierTemplate.numberOfArchivedDossiers }
+                            'dossier-template-stats.archived-dossiers' | translate : { count: dossierTemplate.numberOfArchivedDossiers }
                        "
                    ></span>
                </div>
@ -21,18 +21,20 @@
                    <mat-icon svgIcon="iqser:trash"></mat-icon>
                    <span
                        [innerHTML]="
-                            'dossier-template-stats.deleted-dossiers' | translate: { count: dossierTemplate.numberOfDeletedDossiers }
+                            'dossier-template-stats.deleted-dossiers' | translate : { count: dossierTemplate.numberOfDeletedDossiers }
                        "
                    ></span>
                </div>
                <div>
                    <mat-icon svgIcon="red:user"></mat-icon>
-                    <span [innerHTML]="'dossier-template-stats.total-people' | translate: { count: dossierTemplate.numberOfPeople }"></span>
+                    <span
+                        [innerHTML]="'dossier-template-stats.total-people' | translate : { count: dossierTemplate.numberOfPeople }"
+                    ></span>
                </div>
                <div>
                    <mat-icon svgIcon="iqser:pages"></mat-icon>
                    <span
-                        [innerHTML]="'dossier-template-stats.analyzed-pages' | translate: { count: dossierTemplate.numberOfPages }"
+                        [innerHTML]="'dossier-template-stats.analyzed-pages' | translate : { count: dossierTemplate.numberOfPages }"
                    ></span>
                </div>
            </div>
@ -42,7 +44,7 @@
                [config]="translateChartService.translateDossierStates(dossierTemplate.dossiersChartConfig, dossierTemplate.id)"
                [radius]="63"
                [strokeWidth]="15"
-                [subtitles]="['dossier-template-stats.active-dossiers' | translate: { count: dossierTemplate.numberOfActiveDossiers }]"
+                [subtitles]="['dossier-template-stats.active-dossiers' | translate : { count: dossierTemplate.numberOfActiveDossiers }]"
                direction="row"
                totalType="sum"
            ></redaction-donut-chart>
--- a/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts
+++ b/apps/red-ui/src/app/modules/dashboard/dashboard.module.ts
@ -6,7 +6,7 @@ import { SharedModule } from '@shared/shared.module';
 import { TemplateStatsComponent } from './components/template-stats/template-stats.component';
 import { BreadcrumbTypes } from '@red/domain';
 import { TranslateModule } from '@ngx-translate/core';
-import { IqserButtonsModule, IqserHelpModeModule, IqserPermissionsModule } from '@iqser/common-ui';
+import { IconButtonComponent, IqserHelpModeModule, IqserPermissionsModule } from '@iqser/common-ui';

 const routes = [
    {
@ -25,9 +25,9 @@ const routes = [
        CommonModule,
        SharedModule,
        TranslateModule,
-        IqserButtonsModule,
        IqserHelpModeModule,
        IqserPermissionsModule,
+        IconButtonComponent,
    ],
 })
 export class DashboardModule {}
--- a/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
+++ b/apps/red-ui/src/app/modules/dossier-overview/components/table-item/file-attribute/file-attribute.component.html
@ -5,35 +5,36 @@
    </ng-template>

    <ng-container *ngIf="(isEditingFileAttribute$ | async) === false || isInEditMode">
-        <div class="edit-button" *ngIf="!isInEditMode; else input">
+        <div *ngIf="!isInEditMode; else input" class="edit-button">
            <iqser-circle-button
-                id="edit-attribute-button"
-                *ngIf="permissionsService.canEditFileAttributes(file, dossier)"
                (action)="editFileAttribute($event)"
-                [icon]="'iqser:edit'"
+                *ngIf="permissionsService.canEditFileAttributes(file, dossier)"
                [disabled]="!fileAttribute.editable"
+                [icon]="'iqser:edit'"
                [tooltip]="'file-attribute.actions.edit' | translate"
+                id="edit-attribute-button"
            ></iqser-circle-button>
        </div>
        <ng-template #input>
-            <div class="edit-input" (click)="$event?.stopPropagation()">
+            <div (click)="$event?.stopPropagation()" class="edit-input">
                <form (submit)="save()" [formGroup]="form">
                    <iqser-dynamic-input
+                        (closedDatepicker)="closedDatepicker = $event"
+                        (keydown.escape)="close()"
                        [formControlName]="fileAttribute.id"
                        [id]="fileAttribute.id"
                        [type]="fileAttribute.type"
-                        (keydown.escape)="close()"
-                        (closedDatepicker)="closedDatepicker = $event"
                    >
                    </iqser-dynamic-input>

                    <iqser-circle-button
-                        class="save"
-                        [icon]="'iqser:check'"
-                        [disabled]="disabled"
                        (action)="save($event)"
+                        [disabled]="disabled"
+                        [icon]="'iqser:check'"
+                        class="save"
                    ></iqser-circle-button>
-                    <iqser-circle-button [icon]="'iqser:close'" (action)="close($event)"></iqser-circle-button>
+
+                    <iqser-circle-button (action)="close($event)" [icon]="'iqser:close'"></iqser-circle-button>
                </form>
            </div>
        </ng-template>
--- a/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
+++ b/apps/red-ui/src/app/modules/dossier-overview/dossier-overview.module.ts
@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '@shared/shared.module';
 import {
-    IqserButtonsModule,
+    CircleButtonComponent,
    IqserHelpModeModule,
    IqserIconsModule,
    IqserInputsModule,
@ -26,6 +25,7 @@ import { WorkflowItemComponent } from './components/workflow-item/workflow-item.
 import { DossierOverviewScreenHeaderComponent } from './components/screen-header/dossier-overview-screen-header.component';
 import { ViewModeSelectionComponent } from './components/view-mode-selection/view-mode-selection.component';
 import { FileAttributeComponent } from './components/table-item/file-attribute/file-attribute.component';
+import { SharedModule } from '@shared/shared.module';

 const routes: Routes = [
    {
@ -54,19 +54,19 @@ const routes: Routes = [
    imports: [
        RouterModule.forChild(routes),
        CommonModule,
-        SharedModule,
        SharedDossiersModule,
        IqserIconsModule,
        TranslateModule,
        IqserHelpModeModule,
        IqserUsersModule,
        IqserListingModule,
-        IqserButtonsModule,
        IqserLoadingModule,
        IqserSharedModule,
        IqserScrollbarModule,
        IqserPermissionsModule,
        IqserInputsModule,
+        SharedModule,
+        CircleButtonComponent,
    ],
 })
 export class DossierOverviewModule {}
--- a/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts
+++ b/apps/red-ui/src/app/modules/dossiers-listing/dossiers-listing.module.ts
@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
    CompositeRouteGuard,
-    IqserButtonsModule,
    IqserHelpModeModule,
    IqserIconsModule,
    IqserListingModule,
@ -10,7 +9,6 @@ import {
    IqserScrollbarModule,
    IqserSharedModule,
    IqserUsersModule,
-    LogPipe,
 } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { DossiersListingScreenComponent } from './screen/dossiers-listing-screen.component';
@ -53,12 +51,10 @@ const routes: Routes = [
        TranslateModule,
        IqserHelpModeModule,
        IqserUsersModule,
-        IqserButtonsModule,
        IqserListingModule,
        IqserScrollbarModule,
        IqserSharedModule,
        IqserPermissionsModule,
-        LogPipe,
    ],
 })
 export class DossiersListingModule {}
--- a/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
+++ b/apps/red-ui/src/app/modules/file-preview/file-preview.module.ts
@ -2,7 +2,8 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
    CapitalizePipe,
-    IqserButtonsModule,
+    CircleButtonComponent,
+    IconButtonComponent,
    IqserEmptyStatesModule,
    IqserFiltersModule,
    IqserHelpModeModule,
@ -16,8 +17,6 @@ import {
 } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { RouterModule, Routes } from '@angular/router';
-import { SharedModule } from '@shared/shared.module';
-import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';
 import { FilePreviewScreenComponent } from './file-preview-screen.component';
 import { FileWorkloadComponent } from './components/file-workload/file-workload.component';
 import { AnnotationDetailsComponent } from './components/annotation-details/annotation-details.component';
@ -55,6 +54,8 @@ import { RssDialogComponent } from './dialogs/rss-dialog/rss-dialog.component';
 import { ReadonlyBannerComponent } from './components/readonly-banner/readonly-banner.component';
 import { SuggestionsService } from './services/suggestions.service';
 import { PagesComponent } from './components/pages/pages.component';
+import { SharedModule } from '@shared/shared.module';
+import { SharedDossiersModule } from '../shared-dossiers/shared-dossiers.module';

 const routes: Routes = [
    {
@ -108,15 +109,12 @@ const components = [
    imports: [
        RouterModule.forChild(routes),
        CommonModule,
-        SharedModule,
-        SharedDossiersModule,
        IqserIconsModule,
        TranslateModule,
        OverlayModule,
        IqserHelpModeModule,
        IqserUsersModule,
        CapitalizePipe,
-        IqserButtonsModule,
        IqserInputsModule,
        IqserSharedModule,
        IqserUploadFileModule,
@ -124,6 +122,10 @@ const components = [
        IqserFiltersModule,
        IqserScrollbarModule,
        IqserPermissionsModule,
+        SharedModule,
+        CircleButtonComponent,
+        SharedDossiersModule,
+        IconButtonComponent,
    ],
    providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, SuggestionsService],
 })
--- a/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
+++ b/apps/red-ui/src/app/modules/shared-dossiers/shared-dossiers.module.ts
@ -13,7 +13,8 @@ import { DateColumnComponent } from './components/date-column/date-column.compon
 import { FileAssignService } from './services/file-assign.service';
 import { DictionaryDetailsDialogComponent } from './dialogs/edit-dossier-dialog/dictionary/dictionary-details-dialog/dictionary-details-dialog.component';
 import {
-    IqserButtonsModule,
+    CircleButtonComponent,
+    IconButtonComponent,
    IqserEmptyStatesModule,
    IqserHelpModeModule,
    IqserInputsModule,
@ -49,12 +50,13 @@ const services = [FileAssignService];
        IqserHelpModeModule,
        IqserUsersModule,
        TranslateModule,
-        IqserButtonsModule,
        IqserEmptyStatesModule,
        IqserSharedModule,
        IqserInputsModule,
        IqserScrollbarModule,
        IqserPermissionsModule,
+        IconButtonComponent,
+        CircleButtonComponent,
    ],
 })
 export class SharedDossiersModule {}
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@ -9,7 +9,8 @@ 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 {
-    IqserButtonsModule,
+    CircleButtonComponent,
+    IconButtonComponent,
    IqserHelpModeModule,
    IqserPermissionsModule,
    IqserScrollbarModule,
@ -74,7 +75,7 @@ const utils = [DatePipe, NavigateLastDossiersScreenDirective, LongPressDirective

 const services = [SharedDialogService];

-const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, IqserButtonsModule, ReactiveFormsModule, ColorPickerModule];
+const modules = [MatConfigModule, ScrollingModule, IconsModule, FormsModule, ReactiveFormsModule, ColorPickerModule];

 const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent];

@ -92,6 +93,8 @@ const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent];
        IqserScrollbarModule,
        IqserPermissionsModule,
        ...deleteThisWhenAllComponentsAreStandalone,
+        CircleButtonComponent,
+        IconButtonComponent,
    ],
    exports: [...modules, ...components, ...utils, ...deleteThisWhenAllComponentsAreStandalone],
    providers: [
--- a/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.html
+++ b/apps/red-ui/src/app/modules/trash/trash-screen/trash-table-item/trash-table-item.component.html
@ -29,13 +29,13 @@

 <div class="cell">
    <span class="small-label">
-        {{ item.softDeletedTime | date: 'exactDate' }}
+        {{ item.softDeletedTime | date : 'exactDate' }}
    </span>
 </div>

 <div class="cell">
    <div class="small-label">
-        {{ item.restoreDate | date: 'timeFromNow' }}
+        {{ item.restoreDate | date : 'timeFromNow' }}
    </div>
    <div class="action-buttons">
        <iqser-circle-button
--- a/apps/red-ui/src/app/modules/trash/trash.module.ts
+++ b/apps/red-ui/src/app/modules/trash/trash.module.ts
@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { TrashScreenComponent } from './trash-screen/trash-screen.component';
-import { IqserButtonsModule, IqserListingModule, IqserUsersModule } from '@iqser/common-ui';
+import { CircleButtonComponent, 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';
@ -19,7 +19,7 @@ const routes = [{ path: '', component: TrashScreenComponent }];
        IqserUsersModule,
        TranslateModule,
        IqserListingModule,
-        IqserButtonsModule,
+        CircleButtonComponent,
    ],
    providers: [TrashDialogService],
 })
--- a/apps/red-ui/src/app/modules/upload-download/file-upload-download.module.ts
+++ b/apps/red-ui/src/app/modules/upload-download/file-upload-download.module.ts
@ -11,10 +11,10 @@ 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';
+import { CircleButtonComponent, IconButtonComponent, IqserInputsModule } from '@iqser/common-ui';

@NgModule({
-    imports: [CommonModule, SharedModule, OverlayModule, TranslateModule, IqserButtonsModule, IqserInputsModule],
+    imports: [CommonModule, SharedModule, OverlayModule, TranslateModule, IqserInputsModule, CircleButtonComponent, IconButtonComponent],
    declarations: [FileDropComponent, UploadStatusOverlayComponent, OverwriteFilesDialogComponent],
    providers: [UploadDownloadDialogService, FileUploadService, FileDownloadService, StatusOverlayService, FileDropOverlayService],
    exports: [FileDropComponent, UploadStatusOverlayComponent],
--- a/libs/common-ui
+++ b/libs/common-ui
@ -1 +1 @@
-Subproject commit 08d06803e023f279fe48eb3fe3c20bacf9d9e538
+Subproject commit b8f9e6a46db94569a1d1a3412b3d1d49e3133609