ontimize-web-ngx-filemanager/fesm2020/ontimize-web-ngx-filemanager.mjs.map

An implementation of file management system for Ontimize Web

{"version":3,"file":"ontimize-web-ngx-filemanager.mjs","sources":["../../projects/ontimize-web-ngx-filemanager/src/lib/i18n/i18n.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/util/o-filemanager-translate.pipe.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/providers/workspace/workspace-ontimize.provider.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/providers/workspace/workspace-s3.provider.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/services/workspace.service.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/file-input/o-file-uploader-extended.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/file-input/o-file-input-extended.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/file-input/o-file-input-extended.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/components/status/download/download-progress.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/status/download/download-progress.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/components/status/upload/upload-progress.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/status/upload/upload-progress.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/services/dom.service.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/services/filemanager-state.service.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/util/filename.validator.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/table-extended/dialog/changename/change-name-dialog.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/table-extended/dialog/changename/change-name-dialog.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/table-extended/dialog/copy/copy-dialog.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/table-extended/dialog/copy/copy-dialog.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/util/file.class.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/table-extended/dialog/foldername/folder-name-dialog.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/table-extended/dialog/foldername/folder-name-dialog.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/table-extended/o-table-extended.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/table-extended/o-table-extended.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/renderers/filetype/o-table-column-renderer-filetype.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/renderers/filetype/o-table-column-renderer-filetype.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/renderers/filesize/o-table-column-renderer-filesize.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/renderers/filesize/o-table-column-renderer-filesize.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/o-filemanager-table.component.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/o-filemanager-table.component.html","../../projects/ontimize-web-ngx-filemanager/src/lib/components/filemanager-table/o-filemanager-table.module.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/components.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/adapters/filemanager-dms-response.adapter.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/services/filemanager-ontimize.service.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/adapters/filemanager-s3-response.adapter.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/services/filemanager-s3.service.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/services.ts","../../projects/ontimize-web-ngx-filemanager/src/lib/ontimize-web-ngx-filemanager.module.ts","../../projects/ontimize-web-ngx-filemanager/src/public-api.ts","../../projects/ontimize-web-ngx-filemanager/src/ontimize-web-ngx-filemanager.ts"],"sourcesContent":["export var MAP = {\n  // English\n  'en': {\n    'name': 'Name',\n    'newName': 'New name',\n    'targetFolder': 'Destination folder',\n    'size': 'Size',\n    'creationDate': 'Creation date',\n    'CONTEXT_MENU.OPEN_FOLDER': 'Open',\n    'CONTEXT_MENU.DOWNLOAD_FILE': 'Download',\n    'CONTEXT_MENU.COPY': 'Copy',\n    'CONTEXT_MENU.MOVE': 'Move',\n    'CONTEXT_MENU.CHANGE_NAME': 'Rename',\n    'MESSAGES.ERROR_DOWNLOAD': 'Failed to download file from the server.',\n    'MESSAGES.ERROR_COPY': 'Error to copy files/folders from the server.',\n    'MESSAGES.ERROR_MOVE': 'Error to move files/folders from the server.',\n    'MESSAGES.ERROR_CHANGE_FILE': 'Error to change file',\n    'BUTTONS.UPLOAD': 'Upload',\n    'BUTTONS.NEW_FOLDER': 'New folder',\n    'EXTENDED_TABLE.NEW_FOLDER_TITLE': 'New folder',\n    'CHANGE_NAME_TITLE': 'Change name',\n    'COPY_TITLE': 'Copy',\n    'MOVE_TITLE': 'Move',\n\n    'MESSAGES.UPLOADING_SINGLE_FILE': 'Uploading 1 element',\n    'MESSAGES.UPLOADING_MULTIPLE_FILE': 'Uploading elements',\n    'MESSAGES.UPLOADING_COMPLETED': 'Uploading completed',\n    'MESSAGES.UPLOADING_ERROR': 'An error has occurred',\n    'MESSAGES.UPLOADING_CANCELLED': 'Uploading cancelled',\n    'MESSAGES.CONFIRM_DISCARD_UPLOAD_TITLE': 'Are you sure you want to discard the upload?',\n    'MESSAGES.CONFIRM_DISCARD_UPLOAD_TEXT': 'Uploading is not completed',\n    'MESSAGES.PREPARE_DOWNLOAD': 'Preparing download',\n    'MESSAGES.DOWNLOADING': 'Downloading elements',\n    'MESSAGES.DOWNLOAD_COMPLETED': 'Download completed',\n    'MESSAGES.DOWNLOAD_CANCELLED': 'Download cancelled',\n    'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TITLE': 'Are you sure you want to discard the download?',\n    'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TEXT': 'Downloading is not completed',\n    'MESSAGES.COMPRESSING_FILES': 'Compressing files',\n\n    // 'VALIDATE.FILENAME.INVALID': 'The following characters are not allowed: \\\\ / : * ? \\\" < > |'\n    'VALIDATE.FILENAME.INVALID': 'The following characters are not allowed: \\^\\&\\'\\@\\{\\}\\[\\]\\,\\$\\=\\!\\-\\#\\(\\)\\.\\%\\+\\~\\_'\n  },\n\n  // Spanish\n  'es': {\n    'name': 'Nombre',\n    'newName': 'Nuevo nombre',\n    'targetFolder': 'Carpeta de destino',\n    'size': 'Tamaño',\n    'creationDate': 'Fecha de creación',\n    'CONTEXT_MENU.OPEN_FOLDER': 'Abrir',\n    'CONTEXT_MENU.DOWNLOAD_FILE': 'Descargar',\n    'CONTEXT_MENU.COPY': 'Copiar',\n    'CONTEXT_MENU.MOVE': 'Mover',\n    'CONTEXT_MENU.CHANGE_NAME': 'Cambiar nombre',\n    'MESSAGES.ERROR_DOWNLOAD': 'Error al descargar el fichero del servidor.',\n    'MESSAGES.ERROR_COPY': 'Error al copiar los ficheros/carpetas del servidor.',\n    'MESSAGES.ERROR_MOVE': 'Error al mover los ficheros/carpetas del servidor.',\n    'MESSAGES.ERROR_CHANGE_FILE': 'Error al renombrar el fichero/carpeta',\n    'BUTTONS.UPLOAD': 'Subir',\n    'BUTTONS.NEW_FOLDER': 'Crear carpeta',\n    'EXTENDED_TABLE.NEW_FOLDER_TITLE': 'Nueva carpeta',\n    'CHANGE_NAME_TITLE': 'Cambiar nombre',\n    'COPY_TITLE': 'Copiar',\n    'MOVE_TITLE': 'Mover',\n\n    'MESSAGES.UPLOADING_SINGLE_FILE': 'Subiendo 1 elemento',\n    'MESSAGES.UPLOADING_MULTIPLE_FILE': 'Subiendo elementos',\n    'MESSAGES.UPLOADING_COMPLETED': 'Subida completada',\n    'MESSAGES.UPLOADING_ERROR': 'Ha ocurrido un error',\n    'MESSAGES.UPLOADING_CANCELLED': 'Subida cancelada',\n    'MESSAGES.CONFIRM_DISCARD_UPLOAD_TITLE': '¿Está seguro de que quiere cancelar la subida?',\n    'MESSAGES.CONFIRM_DISCARD_UPLOAD_TEXT': 'La subida no se ha completado',\n    'MESSAGES.PREPARE_DOWNLOAD': 'Preparando descarga',\n    'MESSAGES.DOWNLOADING': 'Descargando elementos',\n    'MESSAGES.DOWNLOAD_COMPLETED': 'Descarga completada',\n    'MESSAGES.DOWNLOAD_CANCELLED': 'Descarga cancelada',\n    'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TITLE': '¿Está seguro de que quiere cancelar la descarga?',\n    'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TEXT': 'La descarga no se ha completado',\n    'MESSAGES.COMPRESSING_FILES': 'Comprimiendo elementos',\n\n    // 'VALIDATE.FILENAME.INVALID': 'No puede contener ninguno de los siguientes caracteres: \\\\ / : * ? \\\" < > |'\n    'VALIDATE.FILENAME.INVALID': 'No puede contener ninguno de los siguientes caracteres: \\^\\&\\'\\@\\{\\}\\[\\]\\,\\$\\=\\!\\-\\#\\(\\)\\.\\%\\+\\~\\_'\n  }\n};\n","import { Pipe, PipeTransform, Injector, NgModule, ModuleWithProviders } from '@angular/core';\nimport { OTranslateService } from 'ontimize-web-ngx';\nimport * as CORE_TRANSLATIONS from '../i18n/i18n';\n\n@Pipe({\n  name: 'oFileManagerTranslate',\n  pure: false\n})\nexport class OFileManagerTranslatePipe implements PipeTransform {\n\n  protected translateService: OTranslateService;\n\n  constructor(protected injector: Injector) {\n    this.translateService = this.injector.get(OTranslateService);\n  }\n\n  transform(text: string): string {\n    let textTranslated = undefined;\n    let bundle = CORE_TRANSLATIONS.MAP[this.translateService.getCurrentLang()];\n    if (bundle && bundle[text]) {\n      textTranslated = bundle[text];\n    } else {\n      textTranslated = this.translateService.get(text);\n    }\n    return textTranslated;\n  }\n\n}\n\n@NgModule({\n  declarations: [OFileManagerTranslatePipe],\n  imports: [],\n  exports: [OFileManagerTranslatePipe]\n})\nexport class OFileManagerTranslateModule {\n  static forRoot(): ModuleWithProviders<OFileManagerTranslateModule> {\n    return {\n      ngModule: OFileManagerTranslateModule,\n      providers: []\n    };\n  }\n}\n","import { OFormComponent } from 'ontimize-web-ngx';\nimport { WorkspaceProvider } from '../../interfaces/workspace.provider.interface';\nimport { Workspace } from '../../types/workspace.type';\n\n\n/**\n * A workspace provider implementation that retrieves the workspace object from an Ontimize form component.\n * Implements the WorkspaceProvider interface.\n */\nexport class WorkspaceOntimizeProvider implements WorkspaceProvider{\n\n  /** The key used to access the workspace object in the form data. */\n  private form: OFormComponent;\n\n  /** The Ontimize form component from which to retrieve the workspace object. */\n  private workspaceKey: string;\n\n// ------------------------------------------------------------------------------------------------------ \\\\\n\n  /**\n   * Creates an instance of WorkspaceOntimizeProvider.\n   *\n   * @param workspaceKey The key used to access the workspace object in the form data.\n   * @param form The Ontimize form component from which to retrieve the workspace object.\n   */\n  public constructor( workspaceKey: string, form: OFormComponent ){\n    this.form = form;\n    this.workspaceKey = workspaceKey;\n  }\n\n\n  /**\n   * Retrieves the workspace object from the Ontimize form component.\n   *\n   * @returns The workspace object, or undefined if not found.\n   */\n  public getWorkspace(): Workspace {\n    return this.form.formData[this.workspaceKey] ? this.form.formData[this.workspaceKey].value : undefined\n  }\n\n// ------------------------------------------------------------------------------------------------------ \\\\\n\n}\n","import { OFormComponent, Util } from 'ontimize-web-ngx';\n\nimport { WorkspaceProvider } from '../../interfaces/workspace.provider.interface';\nimport { WorkspaceS3 } from '../../interfaces/workspaceS3.interface';\n\n\n/**\n * A workspace provider implementation that uses a pre-defined workspace object.\n * Implements the WorkspaceProvider interface.\n */\nexport class WorkspaceS3Provider implements WorkspaceProvider {\n\n  /** The pre-defined workspace object. */\n  private workspaceS3: any;\n\n  /** The key used to access the workspace object in the form data. */\n  private form: OFormComponent;\n\n  /** The Ontimize form component from which to retrieve the workspace object. */\n  private workspaceKey: string;\n\n\n  // ------------------------------------------------------------------------------------------------------ \\\\\n\n  /**\n   * Creates an instance of WorkspaceS3Provider.\n   *\n   * @param workspace The pre-defined workspace object.\n   *\n   * @example workspace = { name: 'default', data: {}}\n   */\n  public constructor(workspaceKey: string, form: OFormComponent, workspaceS3?: (values: Array<{ attr, value }>) => WorkspaceS3) {\n    this.workspaceKey = workspaceKey;\n    this.form = form;\n    this.workspaceS3 = workspaceS3;\n  }\n\n\n  /**\n   * Retrieves the pre-defined workspace object.\n   *\n   * @returns The workspace object.\n   */\n  public getWorkspace(): WorkspaceS3 {\n    let workspace: WorkspaceS3 = { name: 'default', data: {} };\n    if (Util.isDefined(this.workspaceKey)) {\n      const workspaceKey = this.form.formData[this.workspaceKey] ? this.form.formData[this.workspaceKey].value : undefined;\n      workspace.data = { id: [workspaceKey] };\n    } else if (Util.isDefined(this.workspaceS3)) {\n      const formData = this.form ? this.form.toJSONData(this.form.getDataValues()) :{ };\n      workspace = this.workspaceS3 ? this.workspaceS3(formData) : undefined;\n    } else {\n      console.warn('[File manager]: The workspace-key or workspace-S3 should be configured for correct use')\n    }\n    return workspace;\n  }\n\n  // ------------------------------------------------------------------------------------------------------ \\\\\n\n}\n","import { Injectable } from '@angular/core';\nimport { OFormComponent } from 'ontimize-web-ngx';\nimport { WorkspaceProvider } from '../interfaces/workspace.provider.interface';\nimport { WorkspaceOntimizeProvider } from '../providers/workspace/workspace-ontimize.provider';\nimport { WorkspaceS3Provider } from '../providers/workspace/workspace-s3.provider';\nimport { WorkspaceS3 } from '../interfaces/workspaceS3.interface';\nimport { Workspace } from '../types/workspace.type';\n\n\n/**\n * A service that manages the workspace provider and provides access to the workspace object.\n */\n@Injectable()\nexport class WorkspaceService {\n\n  /** The workspace providere. */\n  private provider: WorkspaceProvider;\n\n  // ------------------------------------------------------------------------------------------------------ \\\\\n\n  /**\n   * Initializes the workspace provider with an Ontimize form component.\n   *\n   * @param workspaceKey The key used to access the workspace object in the form data.\n   * @param form The Ontimize form component from which to retrieve the workspace object.\n   */\n  public initializeOntimizeProvider(workspaceKey: string, form: OFormComponent): void {\n    this.provider = new WorkspaceOntimizeProvider(workspaceKey, form);\n  }\n\n\n\n  /**\n   * Initializes the workspace provider with a pre-defined workspace object.\n   *\n   * @param workspace The pre-defined workspace object.\n   */\n  public initializeS3Provider(workspaceKey: string, form: OFormComponent, workspaceS3?: (values: Array<{ attr, value }>) => WorkspaceS3): void {\n    this.provider = new WorkspaceS3Provider(workspaceKey, form, workspaceS3);\n  }\n\n\n\n  /**\n   * Retrieves the workspace object from the workspace provider.\n   *\n   * @returns The workspace object.\n   */\n  public getWorkspace(): Workspace {\n    return this.provider.getWorkspace();\n  }\n\n  // ------------------------------------------------------------------------------------------------------ \\\\\n\n}\n","import { IFileService, OFileItem, OFileUploader, OFormComponent } from 'ontimize-web-ngx';\n\nimport { IFileManagerService } from '../../interfaces/filemanager.service.interface';\nimport { WorkspaceService } from '../../services/workspace.service';\n\nexport class OFileUploaderExtended extends OFileUploader {\n\n  protected form: OFormComponent;\n  parentKey: string;\n  protected filemanagerService: IFileManagerService;\n  protected parentItem: any;\n  protected workspaceService: WorkspaceService;\n\n  constructor(\n    service: IFileService,\n    entity: string,\n    form: OFormComponent,\n    parentKey: string,\n    filemanagerService: any,\n    workspaceService: WorkspaceService\n  ) {\n    super(service, entity);\n    this.form = form;\n    this.parentKey = parentKey;\n    this.filemanagerService = filemanagerService;\n    this.workspaceService = workspaceService;\n  }\n\n  setParentItem(val: any) {\n    this.parentItem = val;\n  }\n\n  getParentItem(): any {\n    return this.parentItem;\n  }\n\n  /**\n   * Uploads a single file on a single request.\n   * @param item the file to upload\n   */\n  uploadItem(item: OFileItem): void {\n    item.prepareToUpload();\n    if (this.isUploading || item.isUploading) {\n      return;\n    }\n    this.isUploading = true;\n    item.isUploading = true;\n\n    this._onBeforeUploadItem(item);\n\n    if (this.service === undefined) {\n      console.warn('No service configured! aborting upload');\n      return;\n    }\n    if (this._uploadSuscription) {\n      this._uploadSuscription.unsubscribe();\n    }\n\n    const workspaceId = this.workspaceService.getWorkspace();\n    let folderId;\n    if (this.parentKey && this.parentItem.hasOwnProperty(this.parentKey)) {\n      folderId = this.parentItem[this.parentKey];\n    }\n\n    const self = this;\n    this._uploadSuscription =\n      this.filemanagerService.upload(workspaceId, folderId, [item]).subscribe(resp => {\n        if (resp.loaded && resp.total) {\n          const progress = Math.round(resp.loaded * 100 / resp.total);\n          self._onProgressItem(item, progress);\n        } else if ( (resp.documentId && resp.fileId && resp.versionId) || (resp.data != null && resp.data.length > 0)) {\n          self._onSuccessItem(item, resp);\n        } else {\n          console.log('error');\n          self._onErrorItem(item, 'Unknow error');\n        }\n      },\n        err => self._onErrorItem(item, err),\n        () => self._onCompleteItem(item)\n      );\n  }\n\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, forwardRef, NgModule } from '@angular/core';\nimport { OFileInputComponent, OFileItem, OSharedModule } from 'ontimize-web-ngx';\n\nimport { WorkspaceService } from '../../services/workspace.service';\nimport { OFileUploaderExtended } from './o-file-uploader-extended';\n\n@Component({\n  selector: 'o-file-input-extended',\n  templateUrl: './o-file-input-extended.component.html',\n  styleUrls: ['./o-file-input-extended.component.scss'],\n  inputs: [\n    'workspaceKey: workspace-key',\n    'parentKey: parent-key'\n  ],\n  providers: [\n    {\n      provide: OFileInputComponent,\n      useExisting: forwardRef(() => OFileInputExtendedComponent)\n    }\n  ]\n})\nexport class OFileInputExtendedComponent extends OFileInputComponent {\n  uploader: OFileUploaderExtended;\n  parentKey: string;\n\n  initialize() {\n    super.initialize();\n    const workspaceService: WorkspaceService = this.injector.get( WorkspaceService );\n    this.uploader = new OFileUploaderExtended( this.fileService, this.entity, this.form, this.parentKey, this.fileService, workspaceService );\n    this.uploader.splitUpload = this.splitUpload;\n  }\n\n  fileSelected(event: Event): void {\n    let value: string = '';\n    if (event) {\n      const files: FileList = event.target['files'];\n\n      for (let i = 0, f: File; f = files[i]; i++) {\n        const fileItem: OFileItem = new OFileItem(f, this.uploader);\n        this.uploader.addFile(fileItem);\n      }\n      value = this.uploader.files.map(file => file.name).join(', ');\n    }\n    window.setTimeout(() => {\n      this.setValue(value !== '' ? value : undefined);\n      this.inputFile.nativeElement.value = '';\n      if (this._fControl) {\n        this._fControl.markAsTouched();\n      }\n    }, 0);\n  }\n\n}\n\n@NgModule({\n  declarations: [OFileInputExtendedComponent],\n  imports: [OSharedModule, CommonModule],\n  exports: [OFileInputExtendedComponent]\n})\nexport class OFileInputExtendedModule { }\n","<div [formGroup]=\"getFormGroup()\" [matTooltip]=\"tooltip\" [matTooltipPosition]=\"tooltipPosition\" [matTooltipShowDelay]=\"tooltipShowDelay\">\n  <mat-form-field #innerInputContainer (click)=\"!enabled || isReadOnly ? null : inputFile.click()\" fxFill>\n    <div fxLayout=\"row\">\n      <input #inputShowValue matInput type=\"text\" [attr.id]=\"getAttribute()\" [id]=\"getAttribute()\" [formControlName]=\"getAttribute()\"\n        [placeholder]=\"placeHolder\" [ngModel]=\"getValue()\" (ngModelChange)=\"innerOnChange($event)\" readonly>\n      <div matSuffix *ngIf=\"getValue()\" (click)=\"$event.stopPropagation()\" fxLayout=\"row\" fxLayoutAlign=\"space-between center\"\n        class=\"o-file-input-buttons\">\n        <button type=\"button\" mat-icon-button (click)=\"onClickClearValue($event)\">\n          <mat-icon aria-label=\"Clear\">clear</mat-icon>\n        </button>\n        <button type=\"button\" mat-icon-button [disabled]=\"!isValid || uploader.isUploading\" (click)=\"onClickUpload($event)\">\n          <mat-icon aria-label=\"Upload\">file_upload</mat-icon>\n        </button>\n      </div>\n    </div>\n    <mat-error *ngIf=\"hasError('required')\">{{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}</mat-error>\n    <mat-error *ngIf=\"hasError('fileType')\">{{ 'FORM_VALIDATION.FILE_TYPE' | oTranslate}} ({{ getErrorValue('fileType', 'allowedFileTypes') }})</mat-error>\n    <mat-error *ngIf=\"hasError('fileSize')\">{{ 'FORM_VALIDATION.FILE_MAXSIZE' | oTranslate }}: {{ getErrorValue('fileSize', 'maxFileSize') }} bytes</mat-error>\n    <mat-error *ngIf=\"hasError('numFile')\">{{ 'FORM_VALIDATION.FILE_MAXNUM' | oTranslate }}: {{ getErrorValue('numFile', 'maxFiles') }}</mat-error>\n  </mat-form-field>\n  <input #inputFile type=\"file\" id=\"{{getAttribute()+'-file-input'}}\" [attr.accept]=\"acceptFileType ? acceptFileType.replace(';',',') : null\"\n    (change)=\"fileSelected($event)\" hidden=\"true\" [attr.multiple]=\"multiple ? '' : null\">\n  <div *ngIf=\"showInfo && files\">\n    <mat-progress-bar *ngIf=\"!splitUpload && uploader.isUploading\" color=\"accent\" mode=\"determinate\" [value]=\"uploader.progress\"></mat-progress-bar>\n    <mat-list>\n      <mat-list-item *ngFor=\"let file of files\">\n        <mat-icon mat-list-icon>insert_drive_file</mat-icon>\n        <span mat-line>{{ file.name }}</span>\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\">\n          <mat-progress-spinner *ngIf=\"splitUpload && file.isUploading\" color=\"accent\" mode=\"determinate\" [value]=\"file.progress\" class=\"uploading\"></mat-progress-spinner>\n          <mat-icon *ngIf=\"splitUpload && file.isUploaded && file.isSuccess\" class=\"uploaded\">check_circle</mat-icon>\n          <mat-icon *ngIf=\"splitUpload && file.isUploaded && file.isError\" class=\"error\">error</mat-icon>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n</div>\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { AfterViewInit, Component, ViewEncapsulation } from '@angular/core';\n\nimport { OFileManagerTranslatePipe } from '../../../util/o-filemanager-translate.pipe';\n\nexport const DEFAULT_INPUTS_DOWNLOAD_PROGRESS = [\n  'title',\n  'files'\n];\n\nexport const DEFAULT_OUTPUTS_DOWNLOAD_PROGRESS = [\n];\n\nexport const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';\n\n@Component({\n  selector: 'download-progress',\n  templateUrl: './download-progress.component.html',\n  styleUrls: ['./download-progress.component.scss'],\n  inputs: DEFAULT_INPUTS_DOWNLOAD_PROGRESS,\n  outputs: DEFAULT_OUTPUTS_DOWNLOAD_PROGRESS,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.download-progress]': 'true'\n  },\n  animations: [\n    trigger('contentExpansion', [\n      state('collapsed', style({ height: '0px' })),\n      state('expanded', style({ height: '*' })),\n      transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING))\n    ]),\n    trigger('containerPosition', [\n      state('opened', style({ opacity: '1' })),\n      state('closed', style({ opacity: '0.01', bottom: '0px' })),\n      transition('opened <=> closed', animate(EXPANSION_PANEL_ANIMATION_TIMING))\n    ])\n  ]\n})\n\nexport class DownloadProgressComponent implements AfterViewInit {\n  _title: string;\n  protected _files: any[] = [];\n\n  isOpened: boolean = false;\n  onCloseFunction: Function;\n\n  collapsed: boolean = false;\n  translatePipe: OFileManagerTranslatePipe;\n\n  ngAfterViewInit() {\n    this.isOpened = true;\n  }\n\n  onClose() {\n    if (this.onCloseFunction) {\n      this.isOpened = false;\n      this.onCloseFunction();\n    }\n  }\n\n  onToggleCollapse() {\n    this.collapsed = !this.collapsed;\n  }\n\n  _getExpandedState(): any {\n    return this.collapsed ? 'collapsed' : 'expanded';\n  }\n\n  _getContainerState(): any {\n    return this.isOpened ? 'opened' : 'closed';\n  }\n\n  onCancelFileDownload(file: any) {\n    if (file.subscription) {\n      file.subscription.unsubscribe();\n      file.cancelled = true;\n    }\n  }\n\n  getText(file: any): string {\n    if (file && file.name) {\n      return file.name;\n    }\n    const quantityStr = file && file.filesQuantity ? '  (' + file.filesQuantity + ')' : '';\n    return this.translatePipe.transform('MESSAGES.COMPRESSING_FILES') + quantityStr;\n  }\n\n  get cancelledDownloadText(): string {\n    return this.translatePipe.transform('MESSAGES.DOWNLOAD_CANCELLED');\n  }\n\n  get files(): any[] {\n    return this._files;\n  }\n\n  set files(arg: any[]) {\n    this._files = arg;\n  }\n\n  get title(): string {\n    return this._title;\n  }\n\n  set title(arg: string) {\n    this._title = arg;\n  }\n}","<div [@containerPosition]=\"_getContainerState()\" [class.opened]=\"isOpened\" class=\"download-progress-container mat-elevation-z4\"\n  fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"30\">\n\n  <mat-toolbar color=\"primary\" class=\"download-progress-toolbar\">\n    <div class=\"mat-toolbar-tools\" fxLayout=\"row\" fxFill fxLayoutAlign=\"start center\">\n\n      <div *ngIf=\"title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span>{{ title }}</span>\n      </div>\n      <span class=\"fill-remaining\"></span>\n\n      <button type=\"button\" mat-icon-button (click)=\"onToggleCollapse()\">\n        <mat-icon *ngIf=\"!collapsed\">keyboard_arrow_down</mat-icon>\n        <mat-icon *ngIf=\"collapsed\">keyboard_arrow_up</mat-icon>\n      </button>\n\n      <button type=\"button\" mat-icon-button (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </mat-toolbar>\n\n  <div [class.collapsed]=\"collapsed\" class=\"download-progress-content\" [@contentExpansion]=\"_getExpandedState()\">\n    <mat-list fxFlex>\n      <mat-list-item *ngFor=\"let file of files\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"file-data\">\n          <span class=\"file-name\" [class.downloading]=\"!file.downloaded\" *ngIf=\"!file.cancelled\"> {{ getText(file) }} </span>\n          <span class=\"file-cancelled-text\" *ngIf=\"file.cancelled\"> {{ cancelledDownloadText }} </span>\n\n          <span class=\"fill-remaining\"></span>\n          <mat-progress-spinner *ngIf=\"!file.downloaded && !file.cancelled\" color=\"accent\" [style.opacity]=\"file.name !== undefined ? 1 : 0.5\"\n            mode=\"indeterminate\" class=\"uploading\" strokeWidth=\"3\" diameter=\"24\">\n          </mat-progress-spinner>\n\n          <button type=\"button\" mat-icon-button *ngIf=\"!file.downloaded && !file.cancelled\" (click)=\"onCancelFileDownload(file)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n          <mat-icon *ngIf=\"file.downloaded\" class=\"downloaded\">check_circle</mat-icon>\n          <mat-icon *ngIf=\"file.cancelled\" class=\"cancelled\">warning</mat-icon>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n\n</div>","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { AfterViewInit, Component, ViewEncapsulation } from '@angular/core';\n\nimport { OFileManagerTranslatePipe } from '../../../util';\n\nexport const DEFAULT_INPUTS_UPLOAD_PROGRESS = [\n  'title',\n  'uploaderFiles : files'\n];\n\nexport const DEFAULT_OUTPUTS_UPLOAD_PROGRESS = [\n];\n\nexport const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';\n\n@Component({\n  selector: 'upload-progress',\n  templateUrl: './upload-progress.component.html',\n  styleUrls: ['./upload-progress.component.scss'],\n  inputs: DEFAULT_INPUTS_UPLOAD_PROGRESS,\n  outputs: DEFAULT_OUTPUTS_UPLOAD_PROGRESS,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.upload-progress]': 'true'\n  },\n  animations: [\n    trigger('contentExpansion', [\n      state('collapsed', style({ height: '0px' })),\n      state('expanded', style({ height: '*' })),\n      transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING))\n    ]),\n    trigger('containerPosition', [\n      state('opened', style({ opacity: '1' })),\n      state('closed', style({ opacity: '0.01', bottom: '0px' })),\n      transition('opened <=> closed', animate(EXPANSION_PANEL_ANIMATION_TIMING))\n    ])\n  ]\n})\n\nexport class UploadProgressComponent implements AfterViewInit {\n  _title: string;\n  protected _uploaderFiles: any[] = [];\n\n  isOpened: boolean = false;\n  onCloseFunction: Function;\n  onCancelItemUpload: Function;\n\n  collapsed: boolean = false;\n  translatePipe: OFileManagerTranslatePipe;\n\n  ngAfterViewInit() {\n    this.isOpened = true;\n  }\n\n  onClose() {\n    if (this.onCloseFunction) {\n      this.isOpened = false;\n      this.onCloseFunction();\n    }\n  }\n\n  onToggleCollapse() {\n    this.collapsed = !this.collapsed;\n  }\n\n  _getExpandedState(): any {\n    return this.collapsed ? 'collapsed' : 'expanded';\n  }\n\n  _getContainerState(): any {\n    return this.isOpened ? 'opened' : 'closed';\n  }\n\n  onCancelFileUpload(file: any) {\n    if (this.onCancelItemUpload) {\n      this.onCancelItemUpload(file);\n    }\n  }\n\n  get cancelledUploadText(): string {\n    return this.translatePipe.transform('MESSAGES.UPLOADING_CANCELLED');\n  }\n\n  get uploaderFiles(): any[] {\n    return this._uploaderFiles;\n  }\n\n  set uploaderFiles(arg: any[]) {\n    this._uploaderFiles = arg;\n  }\n\n  get title(): string {\n    return this._title;\n  }\n\n  set title(arg: string) {\n    this._title = arg;\n  }\n}\n","<div [@containerPosition]=\"_getContainerState()\" [class.opened]=\"isOpened\" class=\"upload-progress-container mat-elevation-z4\"\n  fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"30\">\n\n  <mat-toolbar color=\"primary\" class=\"upload-progress-toolbar\">\n    <div class=\"mat-toolbar-tools\" fxLayout=\"row\" fxFill fxLayoutAlign=\"start center\">\n\n      <div *ngIf=\"title\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <span>{{ title }}</span>\n      </div>\n      <span class=\"fill-remaining\"></span>\n\n      <button type=\"button\" mat-icon-button (click)=\"onToggleCollapse()\">\n        <mat-icon *ngIf=\"!collapsed\">keyboard_arrow_down</mat-icon>\n        <mat-icon *ngIf=\"collapsed\">keyboard_arrow_up</mat-icon>\n      </button>\n\n      <button type=\"button\" mat-icon-button (click)=\"onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </div>\n  </mat-toolbar>\n\n  <!-- mat-expansion-panel-content -->\n  <div [class.collapsed]=\"collapsed\" class=\"upload-progress-content\" [@contentExpansion]=\"_getExpandedState()\">\n    <mat-list fxFlex>\n      <mat-list-item *ngFor=\"let file of uploaderFiles\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"file-data\">\n          <span class=\"file-name\" [class.uploading]=\"file.isUploading\"> {{ file.name }} </span>\n          <span class=\"file-cancelled-text\" *ngIf=\"!file.isUploaded && file.isCancel\"> {{ cancelledUploadText }} </span>\n\n          <span class=\"fill-remaining\"></span>\n          <mat-progress-spinner *ngIf=\"file.isUploading\" color=\"accent\" mode=\"determinate\" [value]=\"file.progress\" class=\"uploading\"\n            strokeWidth=\"3\" diameter=\"24\">\n          </mat-progress-spinner>\n\n          <button type=\"button\" mat-icon-button *ngIf=\"file.isUploading\" (click)=\"onCancelFileUpload(file)\">\n            <mat-icon>close</mat-icon>\n          </button>\n\n          <mat-icon *ngIf=\"file.isUploaded && file.isSuccess\" class=\"uploaded\">check_circle</mat-icon>\n          <mat-icon *ngIf=\"file.isUploaded && file.isError\" class=\"error\">error</mat-icon>\n          <mat-icon *ngIf=\"!file.isUploaded && file.isCancel\" class=\"cancelled\">warning</mat-icon>\n        </div>\n      </mat-list-item>\n    </mat-list>\n  </div>\n\n</div>","import { ApplicationRef, ComponentFactoryResolver, EmbeddedViewRef, Injectable, Injector } from '@angular/core';\n\n@Injectable()\nexport class DomService {\n\n  constructor(\n    private componentFactoryResolver: ComponentFactoryResolver,\n    private appRef: ApplicationRef,\n    private injector: Injector\n  ) { }\n\n  appendComponentToBody(component: any): any {\n    // 1. Create a component reference from the component\n    const componentRef = this.componentFactoryResolver\n      .resolveComponentFactory(component)\n      .create(this.injector);\n\n    // 2. Attach component to the appRef so that it's inside the ng component tree\n    this.appRef.attachView(componentRef.hostView);\n\n    // 3. Get DOM element from component\n    const domElem = (componentRef.hostView as EmbeddedViewRef<any>)\n      .rootNodes[0] as HTMLElement;\n\n    // 4. Append DOM element to the body\n    document.body.appendChild(domElem);\n\n    return componentRef;\n  }\n\n  removeComponentFromBody(componentRef: any, timeout: number = 0) {\n    setTimeout(() => {\n      if (componentRef && componentRef.hostView) {\n        this.appRef.detachView(componentRef.hostView);\n        componentRef.destroy();\n      }\n    }, timeout);\n  }\n\n}\n","import { Injectable, Injector } from '@angular/core';\nimport { Observable, Subject } from 'rxjs';\n\n@Injectable()\nexport class FileManagerStateService {\n\n  protected formParentItem: any;\n  protected _stateArray: Array<any>;\n\n  private subject = new Subject<any>();\n\n  constructor(protected injector: Injector) { }\n\n  setFormParentItem(parentItem: any) {\n    this.formParentItem = parentItem;\n    this.stateArray = [];\n  }\n\n  restart(index?: number) {\n    let state = [];\n    if (index !== undefined) {\n      state = this._stateArray.slice(0, index + 1);\n    }\n    this.stateArray = state;\n  }\n\n  getFormParentItem(): any {\n    return this.formParentItem;\n  }\n\n  getAndStoreQueryFilter(queryFilter: any, item: any) {\n    const filter = Object.assign({}, queryFilter);\n    let state = this.stateArray;\n    state.push({ filter: filter, item: item });\n    this.stateArray = state;\n    return filter;\n  }\n\n  getCurrentQueryFilter(): any {\n    let result = {};\n    if (this.stateArray.length > 0) {\n      result = this.stateArray[this.stateArray.length - 1].filter;\n    }\n    return result;\n  }\n\n  getStateObservable(): Observable<any> {\n    return this.subject.asObservable();\n  }\n\n  set stateArray(array: any[]) {\n    this._stateArray = array;\n    this.subject.next(this._stateArray);\n  }\n\n  get stateArray(): any[] {\n    return this._stateArray;\n  }\n\n}\n","import { UntypedFormControl } from '@angular/forms';\n\nexport const FILENAME_REGEXP = /^[0-9a-zA-Z\\u00C0-\\u00FF\\^\\&\\'\\@\\{\\}\\[\\]\\,\\$\\=\\!\\-\\#\\(\\)\\.\\%\\+\\~\\_\\¡\\¿\\º\\ª\\·\\¬\\;\\€\\`\\´\\¨ ]*$/;\n\nexport function fileNameValidator(control: UntypedFormControl) {\n  if ((void 0 !== control.value) && FILENAME_REGEXP.test(control.value)) {\n    return {};\n  }\n  return { 'invalidFileName': true };\n}\n","import { AfterViewInit, Component, ElementRef, Injector, ViewChild } from '@angular/core';\nimport { UntypedFormControl, Validators } from '@angular/forms';\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';\n\nimport { FileClass } from '../../../../../util/file.class';\nimport { fileNameValidator } from '../../../../../util/filename.validator';\nimport { OFileManagerTranslatePipe } from '../../../../../util/o-filemanager-translate.pipe';\n\nexport class ChangeNameDialogData {\n  title: string;\n  placeholder: string;\n  defaultValue?: string;\n  fileData?: FileClass;\n}\n\n@Component({\n  selector: 'change-name-dialog',\n  templateUrl: 'change-name-dialog.component.html',\n  styleUrls: ['change-name-dialog.component.scss'],\n  host: {\n    '[class.change-name-dialog]': 'true'\n  }\n})\nexport class ChangeNameDialogComponent implements AfterViewInit {\n\n  public filename: string;\n  public filenameFormControl = new UntypedFormControl('', [\n    Validators.required,\n    fileNameValidator\n  ]);\n\n  @ViewChild('inputRef') inputRef: ElementRef;\n  protected data: ChangeNameDialogData;\n  protected translatePipe: OFileManagerTranslatePipe;\n  public title: string;\n  public placeholder: string;\n\n  constructor(\n    protected injector: Injector,\n    public dialogRef: MatDialogRef<ChangeNameDialogData>\n  ) {\n    this.translatePipe = new OFileManagerTranslatePipe(this.injector);\n    this.data = this.injector.get(MAT_DIALOG_DATA);\n    this.initialize();\n  }\n\n  initialize() {\n    this.filename = this.data.defaultValue || this.translatePipe.transform('name');\n    this.title = this.translatePipe.transform(this.data.title);\n    this.placeholder = this.translatePipe.transform(this.data.placeholder);\n  }\n\n  ngAfterViewInit() {\n    let lastIndex: number = this.inputRef.nativeElement.value.lastIndexOf('.');\n    if (this.data.fileData && this.data.fileData.directory) {\n      lastIndex = this.inputRef.nativeElement.value.length;\n    }\n    this.inputRef.nativeElement.setSelectionRange(0, lastIndex);\n  }\n\n\n  onKeyDown(e: Event): void {\n    if (e['keyCode'] === 13) {\n      this.submit();\n    }\n  }\n\n  submit(): void {\n    if (!this.filenameFormControl.invalid) {\n      this.dialogRef.close(this.inputRef.nativeElement.value);\n    }\n  }\n\n}\n","<span mat-dialog-title>{{ title }}</span>\n<mat-dialog-content>\n  <mat-form-field class=\"filename-form-field\" fxFlex=\"100\">\n    <input matInput #inputRef [formControl]=\"filenameFormControl\" [(ngModel)]=\"filename\" placeholder=\"{{ placeholder }}\" (keydown)=\"onKeyDown($event)\"\n      required>\n    <mat-error *ngIf=\"filenameFormControl.hasError('invalidFileName')\">{{ 'VALIDATE.FILENAME.INVALID' | oFileManagerTranslate }}</mat-error>\n    <mat-error *ngIf=\"filenameFormControl.hasError('required')\">{{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}</mat-error>\n  </mat-form-field>\n</mat-dialog-content>\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [disabled]=\"inputRef.value.length === 0\" (click)=\"submit()\" class=\"o-button-primary\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n","import { Component, ElementRef, Injector, ViewChild } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';\n\nimport { FileClass } from '../../../../../util/file.class';\nimport { OFileManagerTranslatePipe } from '../../../../../util/o-filemanager-translate.pipe';\n\nexport class CopyDialogData {\n  title: string;\n  placeholder: string;\n  defaultValue?: string;\n  fileData?: FileClass;\n}\n\n@Component({\n  selector: 'copy-dialog',\n  templateUrl: 'copy-dialog.component.html',\n  host: {\n    '[class.copy-dialog]': 'true'\n  }\n})\nexport class CopyDialogComponent {\n\n  @ViewChild('inputRef', { static: false }) inputRef: ElementRef;\n  public foldername: string;\n  public title: string;\n  public placeholder: string;\n  protected data: CopyDialogData;\n  protected translatePipe: OFileManagerTranslatePipe;\n\n  constructor(\n    protected injector: Injector,\n    public dialogRef: MatDialogRef<CopyDialogComponent>\n  ) {\n    this.translatePipe = new OFileManagerTranslatePipe(this.injector);\n    this.data = this.injector.get(MAT_DIALOG_DATA);\n    this.initialize();\n  }\n\n  initialize() {\n    this.foldername = this.data.defaultValue || this.translatePipe.transform('name');\n    this.title = this.translatePipe.transform(this.data.title);\n    this.placeholder = this.translatePipe.transform(this.data.placeholder);\n  }\n\n\n  onKeyDown(e: Event): void {\n    if (e['keyCode'] === 13) {\n      this.submit();\n    }\n  }\n\n  submit(): void {\n    this.dialogRef.close(this.inputRef.nativeElement.value);\n  }\n\n}\n","<span mat-dialog-title>{{ title }}</span>\n<mat-dialog-content>\n  <mat-form-field fxFlex=\"100\">\n    <input matInput #inputRef placeholder=\"{{ placeholder }}\" [(ngModel)]=\"foldername\" (keydown)=\"onKeyDown($event)\" required>\n  </mat-form-field>\n</mat-dialog-content>\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [disabled]=\"inputRef.value.length === 0\" (click)=\"submit()\" class=\"o-button-primary\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n","export class FileClass {\n\n  public id: any;\n  public name: string;\n  public size: number;\n  public creationDate: number;\n  public directory: boolean;\n  public directoryPath: string;\n  public path: string;\n\n\n  constructor(obj?: any) {\n    this.id = obj && obj.id ? obj.id : null;\n    this.name = obj && obj.name ? obj.name : null;\n    this.size = obj && obj.size ? obj.size : null;\n    this.creationDate = obj && obj.creationDate ? obj.creationDate : null;\n    this.directory = obj && obj.directory ? obj.directory : null;\n    this.directoryPath = obj && obj.directoryPath ? obj.directoryPath : null;\n    this.path = obj && obj.path ? obj.path : null;\n  }\n\n}\n","import { Component, ElementRef, Injector, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { UntypedFormControl, Validators } from '@angular/forms';\nimport { MatDialogRef } from '@angular/material/dialog';\n\nimport { fileNameValidator, OFileManagerTranslatePipe } from '../../../../../util';\n\n@Component({\n  selector: 'folder-name-dialog',\n  templateUrl: 'folder-name-dialog.component.html',\n  styleUrls: ['folder-name-dialog.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.folder-name-dialog]': 'true'\n  }\n})\nexport class FolderNameDialogComponent {\n\n  public foldername: string;\n  public foldernameFormControl = new UntypedFormControl('', [\n    Validators.required,\n    fileNameValidator\n  ]);\n\n  @ViewChild('folderNameRef') inputRef: ElementRef;\n\n  protected translatePipe: OFileManagerTranslatePipe;\n  public title: string;\n  public folderName: string;\n\n  constructor(\n    protected injector: Injector,\n    public dialogRef: MatDialogRef<FolderNameDialogComponent>\n  ) {\n    this.translatePipe = new OFileManagerTranslatePipe(this.injector);\n    this.initialize();\n  }\n\n  initialize() {\n    this.title = this.translatePipe.transform('EXTENDED_TABLE.NEW_FOLDER_TITLE');\n    this.folderName = this.translatePipe.transform('name')\n  }\n\n  onKeyDown(e: Event): void {\n    if (e['keyCode'] === 13) {\n      this.submit();\n    }\n  }\n\n  submit(): void {\n    if (!this.foldernameFormControl.invalid) {\n      this.dialogRef.close(this.inputRef.nativeElement.value);\n    }\n  }\n\n}\n","<span mat-dialog-title>{{ title }}</span>\n<mat-dialog-content>\n  <mat-form-field fxFlex=\"100\">\n    <input matInput #folderNameRef placeholder=\"{{ folderName }}\" [formControl]=\"foldernameFormControl\" [(ngModel)]=\"foldername\"\n      (keydown)=\"onKeyDown($event)\" required>\n    <mat-error *ngIf=\"foldernameFormControl.hasError('invalidFileName')\">{{ 'VALIDATE.FILENAME.INVALID' | oFileManagerTranslate }}</mat-error>\n    <mat-error *ngIf=\"foldernameFormControl.hasError('required')\">{{ 'FORM_VALIDATION.REQUIRED' | oTranslate }}</mat-error>\n  </mat-form-field>\n</mat-dialog-content>\n<mat-dialog-actions fxLayoutAlign=\"end center\">\n  <button type=\"button\" mat-stroked-button [mat-dialog-close]=\"false\">{{ 'CANCEL' | oTranslate }}</button>\n  <button type=\"button\" mat-stroked-button [disabled]=\"folderNameRef.value.length === 0\" (click)=\"submit()\" class=\"o-button-primary\">{{ 'ACCEPT' | oTranslate }}</button>\n</mat-dialog-actions>\n","import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';\nimport { CommonModule } from '@angular/common';\nimport { AfterViewInit, ChangeDetectionStrategy, Component, forwardRef, Injector, NgModule, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';\nimport { MatDialogConfig } from '@angular/material/dialog';\nimport {\n  AbstractComponentStateService,\n  ObservableWrapper,\n  OColumn,\n  OntimizeServiceProvider,\n  OntimizeWebModule,\n  OQueryDataArgs,\n  OQueryParams,\n  OTableBase,\n  OTableComponent,\n  OTableComponentStateService,\n  OTableDataSourceService,\n  OTableVirtualScrollStrategy,\n  Util\n} from 'ontimize-web-ngx';\nimport { BehaviorSubject, combineLatest, Observable } from 'rxjs';\nimport { distinctUntilChanged, map } from 'rxjs/operators';\n\nimport { FileManagerStateService } from '../../../services/filemanager-state.service';\nimport { WorkspaceService } from '../../../services/workspace.service';\nimport { Workspace } from '../../../types/workspace.type';\nimport { OFileManagerTranslateModule } from '../../../util';\nimport { FolderNameDialogComponent } from './dialog/foldername/folder-name-dialog.component';\n\n@Component({\n  selector: 'o-table-extended',\n  templateUrl: './o-table-extended.component.html',\n  providers: [\n    OntimizeServiceProvider,\n    OTableDataSourceService,\n    { provide: OTableComponent, useExisting: forwardRef(() => OTableExtendedComponent) },\n    { provide: OTableBase, useExisting: forwardRef(() => OTableExtendedComponent) },\n    { provide: AbstractComponentStateService, useClass: OTableComponentStateService, deps: [Injector] },\n    { provide: VIRTUAL_SCROLL_STRATEGY, useClass: OTableVirtualScrollStrategy }\n  ],\n  animations: [\n    trigger('detailExpand', [\n      state('collapsed', style({ height: '0px', minHeight: '0' })),\n      state('expanded', style({ height: '*' })),\n      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),\n    ])\n  ],\n  inputs: [\n    'workspaceKey: workspace-key',\n    'addFolderMethod : add-folder-method'\n  ],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.o-table]': 'true',\n    '[class.ontimize-table]': 'true',\n    '[class.o-table-fixed]': 'fixedHeader',\n    '[class.o-table-disabled]': '!enabled',\n    '(document:click)': 'handleDOMClick($event)'\n  }\n})\nexport class OTableExtendedComponent extends OTableComponent implements OnInit, AfterViewInit, OnDestroy {\n\n  public static FM_FOLDER_PARENT_KEY = 'FM_FOLDER_PARENT_KEY';\n\n  protected workspaceId: Workspace;\n  protected addFolderMethod: string;\n\n  protected stateService: FileManagerStateService;\n  protected _breadcrumbs: any[] = [];\n\n  protected mutationObserver: MutationObserver;\n\n  protected workspaceService: WorkspaceService;\n\n  public loadingRemoveSubject = new BehaviorSubject<boolean>(false);\n  protected loadingRemove: Observable<boolean> = this.loadingRemoveSubject.asObservable();\n\n  public loadingCopySubject = new BehaviorSubject<boolean>(false);\n  protected loadingCopy: Observable<boolean> = this.loadingCopySubject.asObservable();\n\n  public loadingMoveSubject = new BehaviorSubject<boolean>(false);\n  protected loadingMove: Observable<boolean> = this.loadingMoveSubject.asObservable();\n\n  public loadingRenameSubject = new BehaviorSubject<boolean>(false);\n  protected loadingRename: Observable<boolean> = this.loadingRenameSubject.asObservable();\n\n  public loadingAddFolderSubject = new BehaviorSubject<boolean>(false);\n  protected loadingAddFolder: Observable<boolean> = this.loadingAddFolderSubject.asObservable();\n\n  public showLoadingExtended: Observable<boolean> = combineLatest([\n    this.showLoading,\n    this.loadingRemove,\n    this.loadingCopy,\n    this.loadingMove,\n    this.loadingRename,\n    this.loadingAddFolder\n  ]).pipe(\n    distinctUntilChanged((prev, curr) =>\n      prev[0] === curr[0] &&\n      prev[1] === curr[1] &&\n      prev[2] === curr[2] &&\n      prev[3] === curr[3] &&\n      prev[4] === curr[4] &&\n      prev[5] === curr[5]), // avoid emitting same value multiple times // avoid emitting same value multiple times\n    map((res: boolean[]) => res.some(r => r))\n  );\n\n  public ngOnInit(): void {\n    super.ngOnInit();\n\n    //Initialize Provider\n    this.workspaceService = this.injector.get(WorkspaceService);\n\n    // setting fake value for avoid entity is undefined checking\n    this.entity = 'fakeEntity';\n    this.paginationControls = false;\n  }\n\n  public ngAfterViewInit(): void {\n    super.ngAfterViewInit();\n    this.registerHeaderMutationObserver();\n  }\n\n  public ngOnDestroy(): void {\n    super.ngOnDestroy();\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  public getDataService(): any {\n    return this.dataService;\n  }\n\n  /**\n   * This method manages the call to the service\n   * @param fi