@testgorilla/tgo-ui 2.33.13 → 2.33.14-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/file-upload/file-upload.component.d.ts +10 -1
- package/esm2022/assets/i18n/en.json +2 -1
- package/esm2022/components/file-upload/file-upload.component.mjs +31 -29
- package/fesm2022/testgorilla-tgo-ui.mjs +31 -28
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/projects/tgo-canopy-ui/assets/i18n/en.json +2 -1
|
@@ -35,6 +35,7 @@ import { MatInputModule, MatInput } from '@angular/material/input';
|
|
|
35
35
|
import * as i1$3 from '@angular/material/dialog';
|
|
36
36
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
|
37
37
|
import * as i8$1 from '@angular/cdk/text-field';
|
|
38
|
+
import { Color as Color$1 } from 'projects/tgo-canopy-ui/public-api';
|
|
38
39
|
import * as i7 from '@angular/material/menu';
|
|
39
40
|
import { MatMenuModule, MatMenu, MatMenuTrigger } from '@angular/material/menu';
|
|
40
41
|
import * as i1$4 from '@angular/cdk/layout';
|
|
@@ -1459,7 +1460,8 @@ var FILE_UPLOAD$b = {
|
|
|
1459
1460
|
SUPPORTED_FILE_TYPES: "Supported file types:",
|
|
1460
1461
|
CHANGE: "Change",
|
|
1461
1462
|
FILE_UPLOADING_SUCCESS: "File uploaded successfully",
|
|
1462
|
-
CHOOSE_FILE: "Choose file: No file chosen"
|
|
1463
|
+
CHOOSE_FILE: "Choose file: No file chosen",
|
|
1464
|
+
FILE_SIZE: "{{ fileSize }} MB file size."
|
|
1463
1465
|
};
|
|
1464
1466
|
var NAVBAR$b = {
|
|
1465
1467
|
LOG_OUT: "Log out"
|
|
@@ -7608,17 +7610,16 @@ class FileUploadComponent {
|
|
|
7608
7610
|
/**
|
|
7609
7611
|
* @ignore
|
|
7610
7612
|
*/
|
|
7611
|
-
this.onChange = (_) => {
|
|
7612
|
-
};
|
|
7613
|
+
this.onChange = (_) => { };
|
|
7613
7614
|
/**
|
|
7614
7615
|
* @ignore
|
|
7615
7616
|
*/
|
|
7616
|
-
this.onTouch = () => {
|
|
7617
|
-
};
|
|
7617
|
+
this.onTouch = () => { };
|
|
7618
7618
|
this.isMissedMinSize = false;
|
|
7619
7619
|
this.progress = false;
|
|
7620
7620
|
this.success = false;
|
|
7621
7621
|
this.isCanceled = false;
|
|
7622
|
+
this.colorUploadSuccess = Color$1.SUCCESS_40;
|
|
7622
7623
|
if (defaultAppTheme) {
|
|
7623
7624
|
this.applicationTheme = defaultAppTheme;
|
|
7624
7625
|
}
|
|
@@ -7717,43 +7718,43 @@ class FileUploadComponent {
|
|
|
7717
7718
|
}
|
|
7718
7719
|
}
|
|
7719
7720
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7720
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
7721
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FileUploadComponent, selector: "ui-file-upload", inputs: { maxFileSizeMB: "maxFileSizeMB", minFileSizeMB: "minFileSizeMB", supportedFileTypes: "supportedFileTypes", uploadProgress: "uploadProgress", fileProcessingMessage: "fileProcessingMessage", errors: "errors", disabled: "disabled", file: "file", companyColor: "companyColor", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired" }, outputs: { OnDrop: "OnDrop" }, host: { properties: { "class": "this.class", "style.--color": "this.compColor" } }, providers: [
|
|
7721
7722
|
{
|
|
7722
7723
|
provide: NG_VALUE_ACCESSOR,
|
|
7723
7724
|
useExisting: forwardRef(() => FileUploadComponent),
|
|
7724
7725
|
multi: true,
|
|
7725
7726
|
},
|
|
7726
|
-
], viewQueries: [{ propertyName: "fileDrop", first: true, predicate: ["fileDrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"fileDrop?.nativeElement?.click()\"\n >\n <span style=\"position: absolute; left: -9999px;\" [attr.aria-live]=\"'polite'\">\n {{ success ? ('FILE_UPLOAD.FILE_UPLOADING_SUCCESS' | uiTranslate | async) : progress ? ('FILE_UPLOAD.UPLOADING' | uiTranslate | async) : '' }}\n </span>\n <div *ngIf=\"(browse && !(success && !!file && progress))\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : { min: minFileSizeMB } | async }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"'upload-supported-files'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n (change)=\"onChangeUpload($event)\"\n />\n <label for=\"file\" class=\"transparent\">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate | async }}</label>\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate | async }}\n <span\n class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate | async | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate | async }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate | async }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate | async }}</span>\n </div>\n </div>\n <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <label for=\"file\" class=\"transparent\">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate | async }}</label>\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate | async }} <span\n class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate | async | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate | async }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div>\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n <p class=\"upload-text\">\n {{ (translationContext + 'UPLOADING') | uiTranslate | async }} <span>{{ uploadProgress }}</span\n >%\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\" class=\"upload-icon\"\n name=\"File-upload\"></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\"\n name=\"Upload\"\n [size]=\"'24'\"\n [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate | async }}</p>\n </ng-template>\n\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\"\n id=\"upload-supported-files\">\n <span >{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate | async }}</span>{{ supportedFileTypes }}\n </div>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-change .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-change .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
7727
|
+
], viewQueries: [{ propertyName: "fileDrop", first: true, predicate: ["fileDrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"fileDrop?.nativeElement?.click()\"\n >\n <div *ngIf=\"browse && !(success && !!file && progress)\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"'upload-supported-files'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n (change)=\"onChangeUpload($event)\"\n />\n <label for=\"file\" class=\"transparent\">{{\n !!file && success ? '' : (translationContext + 'CHOOSE_FILE' | uiTranslate | async)\n }}</label>\n <p *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\n {{ translationContext + 'DRAG_AND_DROP_OR' | uiTranslate | async }}\n <span class=\"semibold\"> {{ translationContext + 'BROWSE' | uiTranslate | async | lowercase }}</span>\n {{ translationContext + 'YOUR_FILES' | uiTranslate | async }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\"\n >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\n >\n </div>\n </div>\n @if (success && file) {\n <div class=\"upload-success\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <span class=\"upload-success-text\"\n ><ui-icon name=\"Check-round-in-line\" [color]=\"colorUploadSuccess\"></ui-icon\n >{{ translationContext + 'FILE_UPLOADING_SUCCESS' | uiTranslate | async }}</span\n >\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n <span class=\"upload-text\">{{\n translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: file.size / (1024 * 1024) } | async\n }}</span>\n </div>\n }\n <!-- <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <label for=\"file\" class=\"transparent\">{{\n !!file && success ? '' : (translationContext + 'CHOOSE_FILE' | uiTranslate | async)\n }}</label>\n <p *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\n {{ translationContext + 'DRAG_AND_DROP_OR' | uiTranslate | async }} <span class=\"semibold\">{{\n translationContext + 'CHANGE' | uiTranslate | async | lowercase\n }}</span>\n {{ translationContext + 'YOUR_FILES' | uiTranslate | async }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div> -->\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar\n [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n <p class=\"upload-text\">\n {{ fileProcessingMessage ?? translationContext + 'UPLOADING' | uiTranslate | async }}\n @if (uploadProgress) {\n <span>{{ uploadProgress }}</span\n >%\n }\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon\n *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\"\n class=\"upload-icon\"\n name=\"File-upload\"\n ></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\n </ng-template>\n\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\"\n id=\"upload-supported-files\"\n >\n <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\n >{{ supportedFileTypes }}\n </div>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-success,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-success ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-success ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-success input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-success .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:16px}.upload-file-container .upload-success .upload-success-text,.upload-file-container .upload-browse .upload-success-text{color:#56c71a;display:flex;align-items:center;gap:8px}.upload-file-container .upload-success p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-success p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-success .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-success .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-success .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-success .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-success .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-success .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
|
|
7727
7728
|
trigger('inOutAnimation', [
|
|
7728
7729
|
transition(':enter', [
|
|
7729
7730
|
style({ opacity: 0, height: 0 }),
|
|
7730
|
-
animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
|
|
7731
|
+
animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
|
|
7731
7732
|
]),
|
|
7732
7733
|
transition(':leave', [
|
|
7733
7734
|
style({ opacity: 1, height: '196px' }),
|
|
7734
|
-
animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
|
|
7735
|
-
])
|
|
7735
|
+
animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
|
|
7736
|
+
]),
|
|
7736
7737
|
]),
|
|
7737
7738
|
trigger('inOutAnimationProgress', [
|
|
7738
7739
|
transition(':enter', [
|
|
7739
7740
|
style({ opacity: 0, height: 0 }),
|
|
7740
|
-
animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
|
|
7741
|
+
animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
|
|
7741
7742
|
]),
|
|
7742
7743
|
transition(':leave', [
|
|
7743
7744
|
style({ opacity: 1, height: '196px' }),
|
|
7744
|
-
animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
|
|
7745
|
-
])
|
|
7745
|
+
animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
|
|
7746
|
+
]),
|
|
7746
7747
|
]),
|
|
7747
7748
|
trigger('inOutAnimationChange', [
|
|
7748
7749
|
transition(':enter', [
|
|
7749
7750
|
style({ opacity: 0, height: 0 }),
|
|
7750
|
-
animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
|
|
7751
|
+
animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
|
|
7751
7752
|
]),
|
|
7752
7753
|
transition(':leave', [
|
|
7753
7754
|
style({ opacity: 1, height: '196px' }),
|
|
7754
|
-
animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
|
|
7755
|
-
])
|
|
7756
|
-
])
|
|
7755
|
+
animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
|
|
7756
|
+
]),
|
|
7757
|
+
]),
|
|
7757
7758
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7758
7759
|
}
|
|
7759
7760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
@@ -7768,34 +7769,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7768
7769
|
trigger('inOutAnimation', [
|
|
7769
7770
|
transition(':enter', [
|
|
7770
7771
|
style({ opacity: 0, height: 0 }),
|
|
7771
|
-
animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
|
|
7772
|
+
animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
|
|
7772
7773
|
]),
|
|
7773
7774
|
transition(':leave', [
|
|
7774
7775
|
style({ opacity: 1, height: '196px' }),
|
|
7775
|
-
animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
|
|
7776
|
-
])
|
|
7776
|
+
animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
|
|
7777
|
+
]),
|
|
7777
7778
|
]),
|
|
7778
7779
|
trigger('inOutAnimationProgress', [
|
|
7779
7780
|
transition(':enter', [
|
|
7780
7781
|
style({ opacity: 0, height: 0 }),
|
|
7781
|
-
animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
|
|
7782
|
+
animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
|
|
7782
7783
|
]),
|
|
7783
7784
|
transition(':leave', [
|
|
7784
7785
|
style({ opacity: 1, height: '196px' }),
|
|
7785
|
-
animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
|
|
7786
|
-
])
|
|
7786
|
+
animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
|
|
7787
|
+
]),
|
|
7787
7788
|
]),
|
|
7788
7789
|
trigger('inOutAnimationChange', [
|
|
7789
7790
|
transition(':enter', [
|
|
7790
7791
|
style({ opacity: 0, height: 0 }),
|
|
7791
|
-
animate('0.2s ease-out', style({ opacity: 1, height: '196px' }))
|
|
7792
|
+
animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
|
|
7792
7793
|
]),
|
|
7793
7794
|
transition(':leave', [
|
|
7794
7795
|
style({ opacity: 1, height: '196px' }),
|
|
7795
|
-
animate('0.2s ease-in', style({ opacity: 0, height: 0 }))
|
|
7796
|
-
])
|
|
7797
|
-
])
|
|
7798
|
-
], template: "<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"fileDrop?.nativeElement?.click()\"\n >\n <span style=\"position: absolute; left: -9999px;\" [attr.aria-live]=\"'polite'\">\n {{ success ? ('FILE_UPLOAD.FILE_UPLOADING_SUCCESS' | uiTranslate | async) : progress ? ('FILE_UPLOAD.UPLOADING' | uiTranslate | async) : '' }}\n </span>\n <div *ngIf=\"(browse && !(success && !!file && progress))\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate : { min: minFileSizeMB } | async }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"'upload-supported-files'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n (change)=\"onChangeUpload($event)\"\n />\n <label for=\"file\" class=\"transparent\">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate | async }}</label>\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate | async }}\n <span\n class=\"semibold\"> {{ (translationContext + 'BROWSE') | uiTranslate | async | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate | async }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ (translationContext + 'MAX_SIZE') | uiTranslate | async }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\">{{ minFileSizeMB }}{{ (translationContext + 'MIN_SIZE') | uiTranslate | async }}</span>\n </div>\n </div>\n <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <label for=\"file\" class=\"transparent\">{{ !!file && success ? '' : (translationContext + 'CHOOSE_FILE') | uiTranslate | async }}</label>\n <p\n *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">{{ (translationContext + 'DRAG_AND_DROP_OR') | uiTranslate | async }} <span\n class=\"semibold\">{{ (translationContext + 'CHANGE') | uiTranslate | async | lowercase }}</span> {{ (translationContext + 'YOUR_FILES') | uiTranslate | async }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div>\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"></ui-progress-bar>\n <p class=\"upload-text\">\n {{ (translationContext + 'UPLOADING') | uiTranslate | async }} <span>{{ uploadProgress }}</span\n >%\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\" class=\"upload-icon\"\n name=\"File-upload\"></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\"\n name=\"Upload\"\n [size]=\"'24'\"\n [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ (translationContext + 'DRAG_AND_DROP') | uiTranslate | async }}</p>\n </ng-template>\n\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\"\n id=\"upload-supported-files\">\n <span >{{ (translationContext + 'SUPPORTED_FILE_TYPES') | uiTranslate | async }}</span>{{ supportedFileTypes }}\n </div>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-change,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-change ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-change ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-change input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-change .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:20px}.upload-file-container .upload-change p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-change p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-change .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-change .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-change .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-change .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-change .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-change .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity:0}\n"] }]
|
|
7796
|
+
animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
|
|
7797
|
+
]),
|
|
7798
|
+
]),
|
|
7799
|
+
], template: "<ng-container>\n <div\n class=\"upload-file-container\"\n uiDragDrop\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-required]=\"ariaRequired\"\n [attr.theme]=\"applicationTheme\"\n [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n (fileDropped)=\"onFileDropped($event)\"\n [tabIndex]=\"0\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"fileDrop?.nativeElement?.click()\"\n >\n <div *ngIf=\"browse && !(success && !!file && progress)\" [@inOutAnimation] class=\"upload-files\">\n <div class=\"upload-browse\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n <ng-container *ngIf=\"!!errors\">\n <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n </ng-container>\n\n <span *ngIf=\"isMissedMinSize\">\n <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\n </span>\n </div>\n <input\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"'upload-supported-files'\"\n [tabIndex]=\"-1\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"file\"\n [accept]=\"supportedFileTypes\"\n [disabled]=\"disabled\"\n (change)=\"onChangeUpload($event)\"\n />\n <label for=\"file\" class=\"transparent\">{{\n !!file && success ? '' : (translationContext + 'CHOOSE_FILE' | uiTranslate | async)\n }}</label>\n <p *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\n {{ translationContext + 'DRAG_AND_DROP_OR' | uiTranslate | async }}\n <span class=\"semibold\"> {{ translationContext + 'BROWSE' | uiTranslate | async | lowercase }}</span>\n {{ translationContext + 'YOUR_FILES' | uiTranslate | async }}\n </p>\n <span class=\"upload-text\">{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span>\n <span *ngIf=\"minFileSizeMB\" class=\"upload-text\"\n >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\n >\n </div>\n </div>\n @if (success && file) {\n <div class=\"upload-success\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <span class=\"upload-success-text\"\n ><ui-icon name=\"Check-round-in-line\" [color]=\"colorUploadSuccess\"></ui-icon\n >{{ translationContext + 'FILE_UPLOADING_SUCCESS' | uiTranslate | async }}</span\n >\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n <span class=\"upload-text\">{{\n translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: file.size / (1024 * 1024) } | async\n }}</span>\n </div>\n }\n <!-- <div class=\"upload-change\" [@inOutAnimationChange] *ngIf=\"!!success && !!file && !!progress\">\n <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n <input\n [tabIndex]=\"-1\"\n [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n class=\"form-control\"\n #fileDrop\n type=\"file\"\n id=\"fileTest\"\n [accept]=\"supportedFileTypes\"\n (change)=\"onChangeUpload($event)\"\n [disabled]=\"disabled\"\n />\n <label for=\"file\" class=\"transparent\">{{\n !!file && success ? '' : (translationContext + 'CHOOSE_FILE' | uiTranslate | async)\n }}</label>\n <p *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\n {{ translationContext + 'DRAG_AND_DROP_OR' | uiTranslate | async }} <span class=\"semibold\">{{\n translationContext + 'CHANGE' | uiTranslate | async | lowercase\n }}</span>\n {{ translationContext + 'YOUR_FILES' | uiTranslate | async }}\n </p>\n <span class=\"upload-text\"\n ><strong>{{ file.name }}</strong></span\n >\n </div> -->\n <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n <p>{{ file.name }}</p>\n <ui-progress-bar\n [progress]=\"uploadProgress\"\n [companyColor]=\"compColor\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n <p class=\"upload-text\">\n {{ fileProcessingMessage ?? translationContext + 'UPLOADING' | uiTranslate | async }}\n @if (uploadProgress) {\n <span>{{ uploadProgress }}</span\n >%\n }\n </p>\n </div>\n\n <ng-template #iconTpl>\n <ui-icon\n *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\"\n class=\"upload-icon\"\n name=\"File-upload\"\n ></ui-icon>\n <ng-template #rebrandedIconTpl>\n <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n </ng-template>\n </ng-template>\n <ng-template #rebrandedDnDCopyTpl>\n <p id=\"'drag-and-drop'\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\n </ng-template>\n\n <div\n *ngIf=\"!!supportedFileTypes\"\n [attr.theme]=\"applicationTheme\"\n class=\"upload-supported-files\"\n id=\"upload-supported-files\"\n >\n <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\n >{{ supportedFileTypes }}\n </div>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-success,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-success ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-success ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-success input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-success .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:16px}.upload-file-container .upload-success .upload-success-text,.upload-file-container .upload-browse .upload-success-text{color:#56c71a;display:flex;align-items:center;gap:8px}.upload-file-container .upload-success p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-success p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-success .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:20px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-success .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-success .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-success .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-success .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-success .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity:0}\n"] }]
|
|
7799
7800
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
7800
7801
|
type: Optional
|
|
7801
7802
|
}, {
|
|
@@ -7811,6 +7812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7811
7812
|
type: Input
|
|
7812
7813
|
}], uploadProgress: [{
|
|
7813
7814
|
type: Input
|
|
7815
|
+
}], fileProcessingMessage: [{
|
|
7816
|
+
type: Input
|
|
7814
7817
|
}], errors: [{
|
|
7815
7818
|
type: Input
|
|
7816
7819
|
}], disabled: [{
|