ontimize-web-ngx-filemanager
Version:
An implementation of file management system for Ontimize Web
522 lines (513 loc) • 228 kB
JavaScript
import * as i0 from '@angular/core';
import { Pipe, NgModule, Injectable, forwardRef, Component, ViewEncapsulation, ViewChild, Injector, ChangeDetectionStrategy, TemplateRef, Optional, Inject, CUSTOM_ELEMENTS_SCHEMA, ComponentFactoryResolver, ApplicationRef } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5$1 from 'ontimize-web-ngx';
import { OTranslateService, Util, OFileUploader, OFileInputComponent, OFileItem, OSharedModule, OTableComponent, ObservableWrapper, OntimizeServiceProvider, OTableDataSourceService, OTableBase, AbstractComponentStateService, OTableComponentStateService, OTableVirtualScrollStrategy, OntimizeWebModule, OBaseTableCellRenderer, DialogService, OFormComponent, BooleanInputConverter, NumberInputConverter, OntimizeServiceResponse, OntimizeEEService, Observable as Observable$1 } from 'ontimize-web-ngx';
import * as i2 from '@angular/flex-layout/flex';
import * as i4 from '@angular/forms';
import { UntypedFormControl, Validators } from '@angular/forms';
import * as i3 from '@angular/material/button';
import * as i4$1 from '@angular/material/core';
import * as i4$2 from '@angular/material/icon';
import * as i6 from '@angular/material/input';
import * as i7 from '@angular/material/form-field';
import * as i5 from '@angular/material/list';
import * as i9 from '@angular/material/progress-bar';
import * as i6$1 from '@angular/material/progress-spinner';
import * as i11 from '@angular/material/tooltip';
import { trigger, state, style, transition, animate } from '@angular/animations';
import * as i7$1 from '@angular/material/toolbar';
import { __decorate, __metadata } from 'tslib';
import { HttpEventType, HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
import * as i1$1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { Subject, BehaviorSubject, combineLatest, throwError, Observable } from 'rxjs';
import * as i15 from '@angular/cdk/scrolling';
import { VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';
import { distinctUntilChanged, map, share, filter } from 'rxjs/operators';
import * as i3$1 from '@angular/flex-layout/extended';
import * as i7$2 from '@angular/material/checkbox';
import * as i11$1 from '@angular/material/menu';
import * as i13 from '@angular/material/table';
import * as i14 from '@angular/material/paginator';
var MAP = {
// English
'en': {
'name': 'Name',
'newName': 'New name',
'targetFolder': 'Destination folder',
'size': 'Size',
'creationDate': 'Creation date',
'CONTEXT_MENU.OPEN_FOLDER': 'Open',
'CONTEXT_MENU.DOWNLOAD_FILE': 'Download',
'CONTEXT_MENU.COPY': 'Copy',
'CONTEXT_MENU.MOVE': 'Move',
'CONTEXT_MENU.CHANGE_NAME': 'Rename',
'MESSAGES.ERROR_DOWNLOAD': 'Failed to download file from the server.',
'MESSAGES.ERROR_COPY': 'Error to copy files/folders from the server.',
'MESSAGES.ERROR_MOVE': 'Error to move files/folders from the server.',
'MESSAGES.ERROR_CHANGE_FILE': 'Error to change file',
'BUTTONS.UPLOAD': 'Upload',
'BUTTONS.NEW_FOLDER': 'New folder',
'EXTENDED_TABLE.NEW_FOLDER_TITLE': 'New folder',
'CHANGE_NAME_TITLE': 'Change name',
'COPY_TITLE': 'Copy',
'MOVE_TITLE': 'Move',
'MESSAGES.UPLOADING_SINGLE_FILE': 'Uploading 1 element',
'MESSAGES.UPLOADING_MULTIPLE_FILE': 'Uploading elements',
'MESSAGES.UPLOADING_COMPLETED': 'Uploading completed',
'MESSAGES.UPLOADING_ERROR': 'An error has occurred',
'MESSAGES.UPLOADING_CANCELLED': 'Uploading cancelled',
'MESSAGES.CONFIRM_DISCARD_UPLOAD_TITLE': 'Are you sure you want to discard the upload?',
'MESSAGES.CONFIRM_DISCARD_UPLOAD_TEXT': 'Uploading is not completed',
'MESSAGES.PREPARE_DOWNLOAD': 'Preparing download',
'MESSAGES.DOWNLOADING': 'Downloading elements',
'MESSAGES.DOWNLOAD_COMPLETED': 'Download completed',
'MESSAGES.DOWNLOAD_CANCELLED': 'Download cancelled',
'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TITLE': 'Are you sure you want to discard the download?',
'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TEXT': 'Downloading is not completed',
'MESSAGES.COMPRESSING_FILES': 'Compressing files',
// 'VALIDATE.FILENAME.INVALID': 'The following characters are not allowed: \\ / : * ? \" < > |'
'VALIDATE.FILENAME.INVALID': 'The following characters are not allowed: \^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_'
},
// Spanish
'es': {
'name': 'Nombre',
'newName': 'Nuevo nombre',
'targetFolder': 'Carpeta de destino',
'size': 'Tamaño',
'creationDate': 'Fecha de creación',
'CONTEXT_MENU.OPEN_FOLDER': 'Abrir',
'CONTEXT_MENU.DOWNLOAD_FILE': 'Descargar',
'CONTEXT_MENU.COPY': 'Copiar',
'CONTEXT_MENU.MOVE': 'Mover',
'CONTEXT_MENU.CHANGE_NAME': 'Cambiar nombre',
'MESSAGES.ERROR_DOWNLOAD': 'Error al descargar el fichero del servidor.',
'MESSAGES.ERROR_COPY': 'Error al copiar los ficheros/carpetas del servidor.',
'MESSAGES.ERROR_MOVE': 'Error al mover los ficheros/carpetas del servidor.',
'MESSAGES.ERROR_CHANGE_FILE': 'Error al renombrar el fichero/carpeta',
'BUTTONS.UPLOAD': 'Subir',
'BUTTONS.NEW_FOLDER': 'Crear carpeta',
'EXTENDED_TABLE.NEW_FOLDER_TITLE': 'Nueva carpeta',
'CHANGE_NAME_TITLE': 'Cambiar nombre',
'COPY_TITLE': 'Copiar',
'MOVE_TITLE': 'Mover',
'MESSAGES.UPLOADING_SINGLE_FILE': 'Subiendo 1 elemento',
'MESSAGES.UPLOADING_MULTIPLE_FILE': 'Subiendo elementos',
'MESSAGES.UPLOADING_COMPLETED': 'Subida completada',
'MESSAGES.UPLOADING_ERROR': 'Ha ocurrido un error',
'MESSAGES.UPLOADING_CANCELLED': 'Subida cancelada',
'MESSAGES.CONFIRM_DISCARD_UPLOAD_TITLE': '¿Está seguro de que quiere cancelar la subida?',
'MESSAGES.CONFIRM_DISCARD_UPLOAD_TEXT': 'La subida no se ha completado',
'MESSAGES.PREPARE_DOWNLOAD': 'Preparando descarga',
'MESSAGES.DOWNLOADING': 'Descargando elementos',
'MESSAGES.DOWNLOAD_COMPLETED': 'Descarga completada',
'MESSAGES.DOWNLOAD_CANCELLED': 'Descarga cancelada',
'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TITLE': '¿Está seguro de que quiere cancelar la descarga?',
'MESSAGES.CONFIRM_DISCARD_DOWNLOAD_TEXT': 'La descarga no se ha completado',
'MESSAGES.COMPRESSING_FILES': 'Comprimiendo elementos',
// 'VALIDATE.FILENAME.INVALID': 'No puede contener ninguno de los siguientes caracteres: \\ / : * ? \" < > |'
'VALIDATE.FILENAME.INVALID': 'No puede contener ninguno de los siguientes caracteres: \^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_'
}
};
class OFileManagerTranslatePipe {
constructor(injector) {
this.injector = injector;
this.translateService = this.injector.get(OTranslateService);
}
transform(text) {
let textTranslated = undefined;
let bundle = MAP[this.translateService.getCurrentLang()];
if (bundle && bundle[text]) {
textTranslated = bundle[text];
}
else {
textTranslated = this.translateService.get(text);
}
return textTranslated;
}
}
OFileManagerTranslatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileManagerTranslatePipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe });
OFileManagerTranslatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OFileManagerTranslatePipe, name: "oFileManagerTranslate", pure: false });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileManagerTranslatePipe, decorators: [{
type: Pipe,
args: [{
name: 'oFileManagerTranslate',
pure: false
}]
}], ctorParameters: function () { return [{ type: i0.Injector }]; } });
class OFileManagerTranslateModule {
static forRoot() {
return {
ngModule: OFileManagerTranslateModule,
providers: []
};
}
}
OFileManagerTranslateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileManagerTranslateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OFileManagerTranslateModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OFileManagerTranslateModule, declarations: [OFileManagerTranslatePipe], exports: [OFileManagerTranslatePipe] });
OFileManagerTranslateModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileManagerTranslateModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileManagerTranslateModule, decorators: [{
type: NgModule,
args: [{
declarations: [OFileManagerTranslatePipe],
imports: [],
exports: [OFileManagerTranslatePipe]
}]
}] });
/**
* A workspace provider implementation that retrieves the workspace object from an Ontimize form component.
* Implements the WorkspaceProvider interface.
*/
class WorkspaceOntimizeProvider {
// ------------------------------------------------------------------------------------------------------ \\
/**
* Creates an instance of WorkspaceOntimizeProvider.
*
* @param workspaceKey The key used to access the workspace object in the form data.
* @param form The Ontimize form component from which to retrieve the workspace object.
*/
constructor(workspaceKey, form) {
this.form = form;
this.workspaceKey = workspaceKey;
}
/**
* Retrieves the workspace object from the Ontimize form component.
*
* @returns The workspace object, or undefined if not found.
*/
getWorkspace() {
return this.form.formData[this.workspaceKey] ? this.form.formData[this.workspaceKey].value : undefined;
}
}
/**
* A workspace provider implementation that uses a pre-defined workspace object.
* Implements the WorkspaceProvider interface.
*/
class WorkspaceS3Provider {
// ------------------------------------------------------------------------------------------------------ \\
/**
* Creates an instance of WorkspaceS3Provider.
*
* @param workspace The pre-defined workspace object.
*
* @example workspace = { name: 'default', data: {}}
*/
constructor(workspaceKey, form, workspaceS3) {
this.workspaceKey = workspaceKey;
this.form = form;
this.workspaceS3 = workspaceS3;
}
/**
* Retrieves the pre-defined workspace object.
*
* @returns The workspace object.
*/
getWorkspace() {
let workspace = { name: 'default', data: {} };
if (Util.isDefined(this.workspaceKey)) {
const workspaceKey = this.form.formData[this.workspaceKey] ? this.form.formData[this.workspaceKey].value : undefined;
workspace.data = { id: [workspaceKey] };
}
else if (Util.isDefined(this.workspaceS3)) {
const formData = this.form ? this.form.toJSONData(this.form.getDataValues()) : {};
workspace = this.workspaceS3 ? this.workspaceS3(formData) : undefined;
}
else {
console.warn('[File manager]: The workspace-key or workspace-S3 should be configured for correct use');
}
return workspace;
}
}
/**
* A service that manages the workspace provider and provides access to the workspace object.
*/
class WorkspaceService {
// ------------------------------------------------------------------------------------------------------ \\
/**
* Initializes the workspace provider with an Ontimize form component.
*
* @param workspaceKey The key used to access the workspace object in the form data.
* @param form The Ontimize form component from which to retrieve the workspace object.
*/
initializeOntimizeProvider(workspaceKey, form) {
this.provider = new WorkspaceOntimizeProvider(workspaceKey, form);
}
/**
* Initializes the workspace provider with a pre-defined workspace object.
*
* @param workspace The pre-defined workspace object.
*/
initializeS3Provider(workspaceKey, form, workspaceS3) {
this.provider = new WorkspaceS3Provider(workspaceKey, form, workspaceS3);
}
/**
* Retrieves the workspace object from the workspace provider.
*
* @returns The workspace object.
*/
getWorkspace() {
return this.provider.getWorkspace();
}
}
WorkspaceService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
WorkspaceService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: WorkspaceService, decorators: [{
type: Injectable
}] });
class OFileUploaderExtended extends OFileUploader {
constructor(service, entity, form, parentKey, filemanagerService, workspaceService) {
super(service, entity);
this.form = form;
this.parentKey = parentKey;
this.filemanagerService = filemanagerService;
this.workspaceService = workspaceService;
}
setParentItem(val) {
this.parentItem = val;
}
getParentItem() {
return this.parentItem;
}
/**
* Uploads a single file on a single request.
* @param item the file to upload
*/
uploadItem(item) {
item.prepareToUpload();
if (this.isUploading || item.isUploading) {
return;
}
this.isUploading = true;
item.isUploading = true;
this._onBeforeUploadItem(item);
if (this.service === undefined) {
console.warn('No service configured! aborting upload');
return;
}
if (this._uploadSuscription) {
this._uploadSuscription.unsubscribe();
}
const workspaceId = this.workspaceService.getWorkspace();
let folderId;
if (this.parentKey && this.parentItem.hasOwnProperty(this.parentKey)) {
folderId = this.parentItem[this.parentKey];
}
const self = this;
this._uploadSuscription =
this.filemanagerService.upload(workspaceId, folderId, [item]).subscribe(resp => {
if (resp.loaded && resp.total) {
const progress = Math.round(resp.loaded * 100 / resp.total);
self._onProgressItem(item, progress);
}
else if ((resp.documentId && resp.fileId && resp.versionId) || (resp.data != null && resp.data.length > 0)) {
self._onSuccessItem(item, resp);
}
else {
console.log('error');
self._onErrorItem(item, 'Unknow error');
}
}, err => self._onErrorItem(item, err), () => self._onCompleteItem(item));
}
}
class OFileInputExtendedComponent extends OFileInputComponent {
initialize() {
super.initialize();
const workspaceService = this.injector.get(WorkspaceService);
this.uploader = new OFileUploaderExtended(this.fileService, this.entity, this.form, this.parentKey, this.fileService, workspaceService);
this.uploader.splitUpload = this.splitUpload;
}
fileSelected(event) {
let value = '';
if (event) {
const files = event.target['files'];
for (let i = 0, f; f = files[i]; i++) {
const fileItem = new OFileItem(f, this.uploader);
this.uploader.addFile(fileItem);
}
value = this.uploader.files.map(file => file.name).join(', ');
}
window.setTimeout(() => {
this.setValue(value !== '' ? value : undefined);
this.inputFile.nativeElement.value = '';
if (this._fControl) {
this._fControl.markAsTouched();
}
}, 0);
}
}
OFileInputExtendedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileInputExtendedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
OFileInputExtendedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OFileInputExtendedComponent, selector: "o-file-input-extended", inputs: { workspaceKey: ["workspace-key", "workspaceKey"], parentKey: ["parent-key", "parentKey"] }, providers: [
{
provide: OFileInputComponent,
useExisting: forwardRef(() => OFileInputExtendedComponent)
}
], usesInheritance: true, ngImport: i0, template: "<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", styles: [".o-file-input-buttons{position:absolute;top:0;bottom:0;right:0;margin:auto}mat-progress-spinner.uploading{width:24px;height:24px}mat-icon.uploaded{color:#0f9d58}mat-icon.error{color:#d50000}\n"], dependencies: [{ kind: "directive", type: i2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$1.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5$1.OTranslatePipe, name: "oTranslate" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileInputExtendedComponent, decorators: [{
type: Component,
args: [{ selector: 'o-file-input-extended', inputs: [
'workspaceKey: workspace-key',
'parentKey: parent-key'
], providers: [
{
provide: OFileInputComponent,
useExisting: forwardRef(() => OFileInputExtendedComponent)
}
], template: "<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", styles: [".o-file-input-buttons{position:absolute;top:0;bottom:0;right:0;margin:auto}mat-progress-spinner.uploading{width:24px;height:24px}mat-icon.uploaded{color:#0f9d58}mat-icon.error{color:#d50000}\n"] }]
}] });
class OFileInputExtendedModule {
}
OFileInputExtendedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileInputExtendedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
OFileInputExtendedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OFileInputExtendedModule, declarations: [OFileInputExtendedComponent], imports: [OSharedModule, CommonModule], exports: [OFileInputExtendedComponent] });
OFileInputExtendedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileInputExtendedModule, imports: [OSharedModule, CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFileInputExtendedModule, decorators: [{
type: NgModule,
args: [{
declarations: [OFileInputExtendedComponent],
imports: [OSharedModule, CommonModule],
exports: [OFileInputExtendedComponent]
}]
}] });
const DEFAULT_INPUTS_DOWNLOAD_PROGRESS = [
'title',
'files'
];
const DEFAULT_OUTPUTS_DOWNLOAD_PROGRESS = [];
const EXPANSION_PANEL_ANIMATION_TIMING$1 = '225ms cubic-bezier(0.4,0.0,0.2,1)';
class DownloadProgressComponent {
constructor() {
this._files = [];
this.isOpened = false;
this.collapsed = false;
}
ngAfterViewInit() {
this.isOpened = true;
}
onClose() {
if (this.onCloseFunction) {
this.isOpened = false;
this.onCloseFunction();
}
}
onToggleCollapse() {
this.collapsed = !this.collapsed;
}
_getExpandedState() {
return this.collapsed ? 'collapsed' : 'expanded';
}
_getContainerState() {
return this.isOpened ? 'opened' : 'closed';
}
onCancelFileDownload(file) {
if (file.subscription) {
file.subscription.unsubscribe();
file.cancelled = true;
}
}
getText(file) {
if (file && file.name) {
return file.name;
}
const quantityStr = file && file.filesQuantity ? ' (' + file.filesQuantity + ')' : '';
return this.translatePipe.transform('MESSAGES.COMPRESSING_FILES') + quantityStr;
}
get cancelledDownloadText() {
return this.translatePipe.transform('MESSAGES.DOWNLOAD_CANCELLED');
}
get files() {
return this._files;
}
set files(arg) {
this._files = arg;
}
get title() {
return this._title;
}
set title(arg) {
this._title = arg;
}
}
DownloadProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DownloadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
DownloadProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DownloadProgressComponent, selector: "download-progress", inputs: { title: "title", files: "files" }, host: { properties: { "class.download-progress": "true" } }, ngImport: i0, template: "<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>", styles: [".download-progress{z-index:10;position:absolute}.download-progress .download-progress-container{position:fixed;bottom:24px;right:24px;width:362px;max-width:30%}.download-progress .download-progress-container:not(.opened) .download-progress-content{overflow:hidden}.download-progress .download-progress-container .mat-toolbar{font-size:14px;min-height:52px;cursor:default}.download-progress .download-progress-container .mat-toolbar .mat-toolbar-row{height:52px}.download-progress .download-progress-container .mat-toolbar .mat-toolbar-row .mat-mdc-icon-button:not(:hover){opacity:.7}.download-progress .download-progress-container .fill-remaining{flex:1 1 auto}.download-progress .download-progress-container .download-progress-content{max-height:240px;overflow:auto;padding:0 2px;box-sizing:border-box;width:100%}.download-progress .download-progress-container .download-progress-content .mat-mdc-list{padding:0}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .mat-mdc-list-item{border-bottom:solid 1px #eee;padding:0 14px}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .mdc-list-item__content .file-data{width:100%;cursor:default}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .mdc-list-item__content .file-data .mat-icon{width:40px;text-align:center}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .file-name.downloading,.download-progress .download-progress-container .download-progress-content .mat-mdc-list .file-cancelled-text{opacity:.35}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .cancelled{opacity:.5}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .downloaded{color:#0f9d58}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .error{color:#db4437}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "directive", type: i2.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i6$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i7$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], animations: [
trigger('contentExpansion', [
state('collapsed', style({ height: '0px' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1))
]),
trigger('containerPosition', [
state('opened', style({ opacity: '1' })),
state('closed', style({ opacity: '0.01', bottom: '0px' })),
transition('opened <=> closed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1))
])
], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DownloadProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'download-progress', inputs: DEFAULT_INPUTS_DOWNLOAD_PROGRESS, outputs: DEFAULT_OUTPUTS_DOWNLOAD_PROGRESS, encapsulation: ViewEncapsulation.None, host: {
'[class.download-progress]': 'true'
}, animations: [
trigger('contentExpansion', [
state('collapsed', style({ height: '0px' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1))
]),
trigger('containerPosition', [
state('opened', style({ opacity: '1' })),
state('closed', style({ opacity: '0.01', bottom: '0px' })),
transition('opened <=> closed', animate(EXPANSION_PANEL_ANIMATION_TIMING$1))
])
], template: "<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>", styles: [".download-progress{z-index:10;position:absolute}.download-progress .download-progress-container{position:fixed;bottom:24px;right:24px;width:362px;max-width:30%}.download-progress .download-progress-container:not(.opened) .download-progress-content{overflow:hidden}.download-progress .download-progress-container .mat-toolbar{font-size:14px;min-height:52px;cursor:default}.download-progress .download-progress-container .mat-toolbar .mat-toolbar-row{height:52px}.download-progress .download-progress-container .mat-toolbar .mat-toolbar-row .mat-mdc-icon-button:not(:hover){opacity:.7}.download-progress .download-progress-container .fill-remaining{flex:1 1 auto}.download-progress .download-progress-container .download-progress-content{max-height:240px;overflow:auto;padding:0 2px;box-sizing:border-box;width:100%}.download-progress .download-progress-container .download-progress-content .mat-mdc-list{padding:0}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .mat-mdc-list-item{border-bottom:solid 1px #eee;padding:0 14px}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .mdc-list-item__content .file-data{width:100%;cursor:default}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .mdc-list-item__content .file-data .mat-icon{width:40px;text-align:center}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .file-name.downloading,.download-progress .download-progress-container .download-progress-content .mat-mdc-list .file-cancelled-text{opacity:.35}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .cancelled{opacity:.5}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .downloaded{color:#0f9d58}.download-progress .download-progress-container .download-progress-content .mat-mdc-list .error{color:#db4437}\n"] }]
}] });
const DEFAULT_INPUTS_UPLOAD_PROGRESS = [
'title',
'uploaderFiles : files'
];
const DEFAULT_OUTPUTS_UPLOAD_PROGRESS = [];
const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
class UploadProgressComponent {
constructor() {
this._uploaderFiles = [];
this.isOpened = false;
this.collapsed = false;
}
ngAfterViewInit() {
this.isOpened = true;
}
onClose() {
if (this.onCloseFunction) {
this.isOpened = false;
this.onCloseFunction();
}
}
onToggleCollapse() {
this.collapsed = !this.collapsed;
}
_getExpandedState() {
return this.collapsed ? 'collapsed' : 'expanded';
}
_getContainerState() {
return this.isOpened ? 'opened' : 'closed';
}
onCancelFileUpload(file) {
if (this.onCancelItemUpload) {
this.onCancelItemUpload(file);
}
}
get cancelledUploadText() {
return this.translatePipe.transform('MESSAGES.UPLOADING_CANCELLED');
}
get uploaderFiles() {
return this._uploaderFiles;
}
set uploaderFiles(arg) {
this._uploaderFiles = arg;
}
get title() {
return this._title;
}
set title(arg) {
this._title = arg;
}
}
UploadProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UploadProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
UploadProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: UploadProgressComponent, selector: "upload-progress", inputs: { title: "title", uploaderFiles: ["files", "uploaderFiles"] }, host: { properties: { "class.upload-progress": "true" } }, ngImport: i0, template: "<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>", styles: [".upload-progress{z-index:10;position:absolute}.upload-progress .upload-progress-container{position:fixed;bottom:24px;right:24px;width:362px;max-width:30%}.upload-progress .upload-progress-container:not(.opened) .upload-progress-content{overflow:hidden}.upload-progress .upload-progress-container .mat-toolbar{font-size:14px;min-height:52px;cursor:default}.upload-progress .upload-progress-container .mat-toolbar .mat-toolbar-row{height:52px}.upload-progress .upload-progress-container .mat-toolbar .mat-toolbar-row .mat-mdc-icon-button:not(:hover){opacity:.7}.upload-progress .upload-progress-container .fill-remaining{flex:1 1 auto}.upload-progress .upload-progress-container .upload-progress-content{max-height:240px;overflow:auto;padding:0 2px;box-sizing:border-box;width:100%}.upload-progress .upload-progress-container .upload-progress-content .mat-mdc-list{padding:0}.upload-progress .upload-progress-container .upload-progress-content .mat-mdc-list .mat-mdc-list-item{border-bottom:solid 1px #eee;padding:0 14px;width:auto}.upload-progress .upload-progress-container .upload-progress-content .mat-mdc-list .mdc-list-item__content .file-data{width:1