Revert "Revert """

ngfire/files/src/lib/file-manager/components/add-folder-modal/add-folder-modal.component.html

@@ -1,19 +1,25 @@
-<iote-modal>
-  <div modalTitle>Add folder</div>
+<iote-modal (click)="exitModal()" class="close-modal-btn">
+  <div modalTitle>{{'ADD.FOLDER.TITLE' | transloco }}</div>
 
-  <form [formGroup]="createFolderForm" (ngSubmit)="createFolder(createFolderForm.value)">'
+  <form [formGroup]="createFolderForm" (ngSubmit)="createFolder(createFolderForm.value)">
 
-    <mat-form-field>
-      <mat-label>Name</mat-label>
+    <mat-form-field id="name-input">
+      <mat-label>{{'FORMS.FIELDS.NAME' | transloco}}</mat-label>
       <input matInput type="text" formControlName="name" name="name" />
     </mat-form-field>
 
+    <div class="errorMessage" > 
+      <mat-error *ngIf="createFolderForm.controls['name'].touched && createFolderForm.controls['name'].hasError('maxlength')">
+      {{'ADD.FOLDER.VALIDATION.MAX.ERROR' | transloco}}
+      </mat-error>
+    </div>
+
     <div footer>
       <button type="submit" [disabled]="!createFolderForm.valid"
               fxLayoutAlign="end" mat-raised-button color="accent">
-        Create
+            {{'ADD.FOLDER.CREATE' | transloco }}
       </button>
     </div>
 
   </form>
-</iote-modal>
+</iote-modal> 

ngfire/files/src/lib/file-manager/components/add-folder-modal/add-folder-modal.component.scss

@@ -0,0 +1,5 @@
+.errorMessage {
+    font-size: 13px;
+    padding-right: 45px;
+    margin-top: -10px;
+  }

ngfire/files/src/lib/file-manager/components/add-folder-modal/add-folder-modal.component.ts

@@ -1,5 +1,8 @@
 import {Component, EventEmitter, OnInit, Input, Output, Inject } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { TranslocoLoader, Translation, TRANSLOCO_LOADER } from '@ngneat/transloco';
+
+
 
 import * as _ from 'lodash';
 import { Logger } from '@iote/bricks-angular';
@@ -14,11 +17,14 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 /** Creates a bill/invoice =  a debit towards a supplier. */
 export class AddFolderModalComponent implements OnInit
 {
+
   @Output() folderNamed = new EventEmitter<string>();
+
 
   // Form Data
   createFolderForm: FormGroup;
-
+
+
   constructor(private _fb: FormBuilder,
               private _dialogRef: MatDialogRef<AddFolderModalComponent>,
               @Inject(MAT_DIALOG_DATA) private _data: any,
@@ -28,10 +34,10 @@ export class AddFolderModalComponent implements OnInit
   ngOnInit()
   {
     this.createFolderForm = this._fb.group({
-      name: ['', [Validators.required]]
+      name: ['', [Validators.required,Validators.maxLength(30)]]
     });
   }
-
+   
   // --
   // Create Bill
 
@@ -42,5 +48,7 @@ export class AddFolderModalComponent implements OnInit
       this._dialogRef.close(frm.name);
     }
   }
+
+  exitModal = () => this._dialogRef.close();
 
 }

ngfire/files/src/lib/file-manager/file-manager.module.ts

@@ -22,13 +22,15 @@ import { FileDetailsPathComponent } from './components/file-details-path/file-de
 import { FileDragUploadDirective } from './directives/file-drag-upload/file-drag-upload.directive';
 import { AddFolderModalComponent } from './components/add-folder-modal/add-folder-modal.component';
 import { ItemContextMenuComponent } from './components/item-context-menu/item-context-menu.component';
+import { MultiLangModule } from '@s4y/app/multi-lang';
+
 
 /**
  * Module that contains a file manager.
  */
 @NgModule({
   imports: [CommonModule, FlexLayoutModule, FormsModule, ReactiveFormsModule,
-            MaterialDesignModule, MaterialBricksModule, FilesModule, UIModalsModule,
+            MaterialDesignModule, MaterialBricksModule, FilesModule, UIModalsModule,MultiLangModule,
             AngularFireStorageModule, UIWorkflowModule],
 
   declarations: [FileManagerComponent, FileManagerNavComponent, FileDragUploadDirective,