RED-3800: make inputs standalone

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

@@ -13,6 +13,7 @@ import {
     CommonUiModule,
     EmptyStateComponent,
     HiddenActionDirective,
+    InputWithActionComponent,
     IqserHelpModeModule,
     IqserLoadingModule,
     IqserPermissionsModule,
@@ -22,6 +23,7 @@ import {
     LanguageService,
     LogoComponent,
     MAX_RETRIES_ON_SERVER_ERROR,
+    RoundCheckboxComponent,
     SERVER_ERROR_SKIP_PATHS,
     ServerErrorInterceptor,
     SkeletonComponent,
@@ -163,6 +165,8 @@ export const appModuleFactory = (config: AppConfig) => {
             LogoComponent,
             HiddenActionDirective,
             StopPropagationDirective,
+            InputWithActionComponent,
+            RoundCheckboxComponent,
         ],
         providers: [
             {

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

@@ -44,16 +44,19 @@ import { KmsSignatureConfigurationComponent } from './dialogs/configure-digital-
 import {
     ChevronButtonComponent,
     CircleButtonComponent,
+    DetailsRadioComponent,
+    EditableInputComponent,
     EmptyStateComponent,
+    HasScrollbarDirective,
     HumanizePipe,
     IconButtonComponent,
+    InputWithActionComponent,
     IqserHelpModeModule,
-    IqserInputsModule,
     IqserListingModule,
     IqserPermissionsModule,
-    IqserScrollbarModule,
     IqserUploadFileModule,
     IqserUsersModule,
+    RoundCheckboxComponent,
 } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 import { AuditInfoDialogComponent } from './dialogs/audit-info-dialog/audit-info-dialog.component';
@@ -115,8 +118,6 @@ const components = [
         TranslateModule,
         HumanizePipe,
         IqserListingModule,
-        IqserScrollbarModule,
-        IqserInputsModule,
         IqserUploadFileModule,
         IqserHelpModeModule,
         IqserPermissionsModule,
@@ -127,6 +128,11 @@ const components = [
         CircleButtonComponent,
         ChevronButtonComponent,
         EmptyStateComponent,
+        HasScrollbarDirective,
+        RoundCheckboxComponent,
+        InputWithActionComponent,
+        EditableInputComponent,
+        DetailsRadioComponent,
     ],
 })
 export class AdminModule {}

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

@@ -7,8 +7,8 @@ import { DossierTemplatesListingScreenComponent } from './dossier-templates-list
 import {
     CircleButtonComponent,
     IconButtonComponent,
+    InputWithActionComponent,
     IqserHelpModeModule,
-    IqserInputsModule,
     IqserListingModule,
     IqserPermissionsModule,
     IqserUsersModule,
@@ -26,13 +26,13 @@ const routes = [{ path: '', component: DossierTemplatesListingScreenComponent }]
         SharedModule,
         IqserUsersModule,
         TranslateModule,
-        IqserInputsModule,
         IqserListingModule,
         IqserHelpModeModule,
         IqserPermissionsModule,
         DossierTemplateActionsComponent,
         CircleButtonComponent,
         IconButtonComponent,
+        InputWithActionComponent,
     ],
 })
 export class DossierTemplatesListingModule {}

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 { IconButtonComponent, IqserHelpModeModule, IqserPermissionsModule, IqserScrollbarModule } from '@iqser/common-ui';
+import { HasScrollbarDirective, IconButtonComponent, IqserHelpModeModule, IqserPermissionsModule } from '@iqser/common-ui';
 
 const routes: Routes = [
     { path: '', redirectTo: 'info', pathMatch: 'full' },
@@ -41,10 +41,10 @@ const routes: Routes = [
         SharedModule,
         MonacoEditorModule,
         TranslateModule,
-        IqserScrollbarModule,
         IqserHelpModeModule,
         IqserPermissionsModule,
         IconButtonComponent,
+        HasScrollbarDirective,
     ],
 })
 export class EntitiesModule {}

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 { IqserHelpModeModule, IqserScrollbarModule, IqserUsersModule } from '@iqser/common-ui';
+import { HasScrollbarDirective, IqserHelpModeModule, IqserUsersModule } from '@iqser/common-ui';
 import { TranslateModule } from '@ngx-translate/core';
 
 const routes = [{ path: '', component: DossierTemplateInfoScreenComponent }];
@@ -16,8 +16,8 @@ const routes = [{ path: '', component: DossierTemplateInfoScreenComponent }];
         SharedModule,
         IqserUsersModule,
         TranslateModule,
-        IqserScrollbarModule,
         IqserHelpModeModule,
+        HasScrollbarDirective,
     ],
 })
 export class DossierTemplateInfoModule {}

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

@@ -7,7 +7,7 @@ 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 { CircleButtonComponent, IconButtonComponent, IqserListingModule, IqserScrollbarModule } from '@iqser/common-ui';
+import { CircleButtonComponent, HasScrollbarDirective, IconButtonComponent, IqserListingModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: JustificationsScreenComponent }];
 
@@ -21,7 +21,7 @@ const routes = [{ path: '', component: JustificationsScreenComponent }];
         IqserListingModule,
         IconButtonComponent,
         CircleButtonComponent,
-        IqserScrollbarModule,
+        HasScrollbarDirective,
     ],
     providers: [JustificationsDialogService],
 })

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

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { ReportsScreenComponent } from './reports-screen/reports-screen.component';
 import { TranslateModule } from '@ngx-translate/core';
-import { CircleButtonComponent, IqserHelpModeModule, IqserPermissionsModule, IqserScrollbarModule } from '@iqser/common-ui';
+import { CircleButtonComponent, HasScrollbarDirective, IqserHelpModeModule, IqserPermissionsModule } from '@iqser/common-ui';
 
 const routes = [{ path: '', component: ReportsScreenComponent }];
 
@@ -13,10 +13,10 @@ const routes = [{ path: '', component: ReportsScreenComponent }];
         RouterModule.forChild(routes),
         CommonModule,
         TranslateModule,
-        IqserScrollbarModule,
         IqserHelpModeModule,
         IqserPermissionsModule,
         CircleButtonComponent,
+        HasScrollbarDirective,
     ],
 })
 export class ReportsModule {}

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

@@ -6,12 +6,12 @@ import { WatermarksListingScreenComponent } from './watermarks-listing/watermark
 import {
     CircleButtonComponent,
     CompositeRouteGuard,
+    HasScrollbarDirective,
     IconButtonComponent,
     IqserAuthGuard,
     IqserHelpModeModule,
     IqserListingModule,
     IqserPermissionsModule,
-    IqserScrollbarModule,
     IqserUsersModule,
 } from '@iqser/common-ui';
 import { RedRoleGuard } from '@users/red-role.guard';
@@ -60,7 +60,6 @@ const routes = [
         IqserUsersModule,
         TranslateModule,
         IqserListingModule,
-        IqserScrollbarModule,
         IqserHelpModeModule,
         IqserPermissionsModule,
         MatIconModule,
@@ -70,6 +69,7 @@ const routes = [
         ColorPickerModule,
         MatLegacySlideToggleModule,
         CircleButtonComponent,
+        HasScrollbarDirective,
     ],
 })
 export class WatermarkModule {}

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

@@ -3,12 +3,12 @@ import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
 import {
     CircleButtonComponent,
+    DynamicInputComponent,
+    HasScrollbarDirective,
     IqserHelpModeModule,
-    IqserInputsModule,
     IqserListingModule,
     IqserLoadingModule,
     IqserPermissionsModule,
-    IqserScrollbarModule,
     IqserUsersModule,
     StatusBarComponent,
     StopPropagationDirective,
@@ -60,13 +60,13 @@ const routes: Routes = [
         IqserUsersModule,
         IqserListingModule,
         IqserLoadingModule,
-        IqserScrollbarModule,
         IqserPermissionsModule,
-        IqserInputsModule,
         SharedModule,
         CircleButtonComponent,
         StatusBarComponent,
         StopPropagationDirective,
+        HasScrollbarDirective,
+        DynamicInputComponent,
     ],
 })
 export class DossierOverviewModule {}

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

@@ -2,10 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {
     CompositeRouteGuard,
+    HasScrollbarDirective,
     IqserHelpModeModule,
     IqserListingModule,
     IqserPermissionsModule,
-    IqserScrollbarModule,
     IqserUsersModule,
     StatusBarComponent,
 } from '@iqser/common-ui';
@@ -50,9 +50,9 @@ const routes: Routes = [
         IqserHelpModeModule,
         IqserUsersModule,
         IqserListingModule,
-        IqserScrollbarModule,
         IqserPermissionsModule,
         StatusBarComponent,
+        HasScrollbarDirective,
     ],
 })
 export class DossiersListingModule {}

apps/red-ui/src/app/modules/file-preview/dialogs/document-info-dialog/document-info-dialog.component.html

@@ -5,29 +5,28 @@
         <div class="dialog-content">
             <div *ngFor="let attr of attributes" class="iqser-input-group w-300">
                 <iqser-dynamic-input
+                    [classList]="'w-300'"
                     [formControlName]="attr.id"
                     [id]="attr.label.replace(' ', '-').toLowerCase() + '-input'"
                     [label]="attr.label"
                     [type]="attr.type"
-                    [classList]="'w-300'"
+                ></iqser-dynamic-input>
-                >
-                </iqser-dynamic-input>
             </div>
         </div>
         <div class="dialog-actions">
             <iqser-icon-button
-                buttonId="save-document-info-btn"
                 [disabled]="disabled"
                 [label]="'document-info.save' | translate"
                 [submit]="true"
                 [type]="iconButtonTypes.primary"
+                buttonId="save-document-info-btn"
             ></iqser-icon-button>
         </div>
     </form>
 
     <iqser-circle-button
-        buttonId="close-document-info-modal-btn"
         (action)="close()"
+        buttonId="close-document-info-modal-btn"
         class="dialog-close"
         icon="iqser:close"
     ></iqser-circle-button>

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

@@ -3,16 +3,20 @@ import { CommonModule } from '@angular/common';
 import {
     CapitalizePipe,
     CircleButtonComponent,
+    DetailsRadioComponent,
+    DynamicInputComponent,
+    EditableInputComponent,
     EmptyStateComponent,
+    HasScrollbarDirective,
     IconButtonComponent,
+    InputWithActionComponent,
     IqserFiltersModule,
     IqserHelpModeModule,
-    IqserInputsModule,
     IqserPermissionsModule,
-    IqserScrollbarModule,
     IqserUploadFileModule,
     IqserUsersModule,
     PreventDefaultDirective,
+    RoundCheckboxComponent,
     StatusBarComponent,
     StopPropagationDirective,
 } from '@iqser/common-ui';
@@ -115,10 +119,8 @@ const components = [
         IqserHelpModeModule,
         IqserUsersModule,
         CapitalizePipe,
-        IqserInputsModule,
         IqserUploadFileModule,
         IqserFiltersModule,
-        IqserScrollbarModule,
         IqserPermissionsModule,
         SharedModule,
         CircleButtonComponent,
@@ -128,6 +130,12 @@ const components = [
         StatusBarComponent,
         StopPropagationDirective,
         PreventDefaultDirective,
+        HasScrollbarDirective,
+        EditableInputComponent,
+        DetailsRadioComponent,
+        DynamicInputComponent,
+        InputWithActionComponent,
+        RoundCheckboxComponent,
     ],
     providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, SuggestionsService],
 })

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

@@ -12,13 +12,12 @@
 
         <iqser-dynamic-input
             *ngFor="let attr of customAttributes"
+            [classList]="'w-full'"
             [formControlName]="attr.id"
             [id]="attr.id"
             [label]="attr.label"
             [type]="attr.type"
-            [classList]="'w-full'"
+        ></iqser-dynamic-input>
-        >
-        </iqser-dynamic-input>
     </div>
 
     <div class="separator"></div>

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

@@ -14,13 +14,15 @@ import { FileAssignService } from './services/file-assign.service';
 import { DictionaryDetailsDialogComponent } from './dialogs/edit-dossier-dialog/dictionary/dictionary-details-dialog/dictionary-details-dialog.component';
 import {
     CircleButtonComponent,
+    DynamicInputComponent,
     EmptyStateComponent,
+    HasScrollbarDirective,
     IconButtonComponent,
+    InputWithActionComponent,
     IqserHelpModeModule,
-    IqserInputsModule,
     IqserPermissionsModule,
-    IqserScrollbarModule,
     IqserUsersModule,
+    RoundCheckboxComponent,
     SideNavComponent,
     SmallChipComponent,
     StatusBarComponent,
@@ -53,8 +55,6 @@ const services = [FileAssignService];
         IqserHelpModeModule,
         IqserUsersModule,
         TranslateModule,
-        IqserInputsModule,
-        IqserScrollbarModule,
         IqserPermissionsModule,
         IconButtonComponent,
         CircleButtonComponent,
@@ -63,6 +63,10 @@ const services = [FileAssignService];
         StatusBarComponent,
         SideNavComponent,
         StopPropagationDirective,
+        HasScrollbarDirective,
+        RoundCheckboxComponent,
+        InputWithActionComponent,
+        DynamicInputComponent,
     ],
 })
 export class SharedDossiersModule {}

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

@@ -10,10 +10,10 @@ import { AnnotationIconComponent } from './components/annotation-icon/annotation
 import { DonutChartComponent } from './components/donut-chart/donut-chart.component';
 import {
     CircleButtonComponent,
+    HasScrollbarDirective,
     IconButtonComponent,
     IqserHelpModeModule,
     IqserPermissionsModule,
-    IqserScrollbarModule,
     IqserUsersModule,
     SmallChipComponent,
     StopPropagationDirective,
@@ -90,13 +90,13 @@ const deleteThisWhenAllComponentsAreStandalone = [DonutChartComponent];
         RouterModule,
         IqserHelpModeModule,
         IqserUsersModule,
-        IqserScrollbarModule,
         IqserPermissionsModule,
         ...deleteThisWhenAllComponentsAreStandalone,
         CircleButtonComponent,
         IconButtonComponent,
         SmallChipComponent,
         StopPropagationDirective,
+        HasScrollbarDirective,
     ],
     exports: [...modules, ...components, ...utils, ...deleteThisWhenAllComponentsAreStandalone],
     providers: [

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

@@ -11,10 +11,18 @@ 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 { CircleButtonComponent, IconButtonComponent, IqserInputsModule } from '@iqser/common-ui';
+import { CircleButtonComponent, DetailsRadioComponent, IconButtonComponent } from '@iqser/common-ui';
 
 @NgModule({
-    imports: [CommonModule, SharedModule, OverlayModule, TranslateModule, IqserInputsModule, CircleButtonComponent, IconButtonComponent],
+    imports: [
+        CommonModule,
+        SharedModule,
+        OverlayModule,
+        TranslateModule,
+        CircleButtonComponent,
+        IconButtonComponent,
+        DetailsRadioComponent,
+    ],
     declarations: [FileDropComponent, UploadStatusOverlayComponent, OverwriteFilesDialogComponent],
     providers: [UploadDownloadDialogService, FileUploadService, FileDownloadService, StatusOverlayService, FileDropOverlayService],
     exports: [FileDropComponent, UploadStatusOverlayComponent],

libs/common-ui

@@ -1 +1 @@
-Subproject commit a2e40583e3b3f731cee202bd621545994a87ff7f
+Subproject commit c9c2f3e0f978eb819e0890d49da503d4d878484b