@testgorilla/tgo-ui 11.22.3 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-file-upload.mjs

@@ -1,420 +1,554 @@
-import { trigger, transition, style, animate } from '@angular/animations';
-import { NgClass, NgTemplateOutlet, AsyncPipe, LowerCasePipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, HostListener, Output, HostBinding, Directive, inject, ChangeDetectorRef, forwardRef, ViewChild, Input, Optional, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Color, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import { IconComponent, IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import { ProgressBarComponent, ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-
-class DragDropDirective {
-    constructor() {
-        this.fileDropped = new EventEmitter();
-    }
-    // Dragover listener
-    onDragOver(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.file = true;
-    }
-    // Dragleave listener
-    onDragLeave(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.file = false;
-    }
-    // Drop listener
-    ondrop(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.file = false;
-        let files;
-        if (event.dataTransfer) {
-            files = event.dataTransfer.files;
-            if (files.length > 0) {
-                this.fileDropped.emit(files);
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: DragDropDirective, isStandalone: true, selector: "[uiDragDrop]", outputs: { fileDropped: "fileDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "class.file-over": "this.file" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DragDropDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[uiDragDrop]' }]
-        }], ctorParameters: () => [], propDecorators: { file: [{
-                type: HostBinding,
-                args: ['class.file-over']
-            }], fileDropped: [{
-                type: Output
-            }], onDragOver: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }], onDragLeave: [{
-                type: HostListener,
-                args: ['dragleave', ['$event']]
-            }], ondrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }] } });
-
-class FileUploadComponent {
-    get successInputTestId() {
-        return this.testId ? `${this.testId}-success` : 'file-upload-success-input';
-    }
-    get fileSizeInMB() {
-        return this.file ? (this.file.size / (1024 * 1024)).toFixed(2) : null;
-    }
-    constructor(defaultAppTheme) {
-        this.defaultAppTheme = defaultAppTheme;
-        this.class = 'ui-file-upload';
-        /**
-         * Show Upload progress percentage or not
-         *
-         * @type {boolean}
-         * @memberof FileUploadComponent
-         */
-        this.showUploadProgress = true;
-        /**
-         * File upload disabled
-         *
-         * @type {boolean}
-         * @memberof FileUploadComponent
-         */
-        this.disabled = false;
-        this.testId = null;
-        /**
-         * Existing file information
-         *
-         * @type {(File | null)}
-         * @memberof FileUploadComponent
-         */
-        this.file = null;
-        /**
-         * Color of the file upload.
-         * Defaults to Test Gorilla primary color.
-         *
-         * @type {string}
-         * @memberof FileUploadComponent
-         */
-        this.companyColor = '';
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof FileUploadComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * A string representing the ARIA requirement for accessibility.
-         * This attribute is used to indicate whether an input field is required for form submission.
-         * @type {boolean}
-         * @memberof FileUploadComponent
-         */
-        this.ariaRequired = false;
-        /**
-         * Whether to show the file size information.
-         * @type {boolean}
-         * @memberof FileUploadComponent
-         */
-        this.showFileSize = true;
-        this.OnDrop = new EventEmitter();
-        this.translationContext = 'FILE_UPLOAD.';
-        /**
-         * @ignore
-         */
-        this.onChange = (_value) => { };
-        /**
-         * @ignore
-         */
-        this.onTouch = () => { };
-        this.isMissedMinSize = false;
-        this.progress = false;
-        this.success = false;
-        this.isCanceled = false;
-        this.colorUploadSuccess = Color.SUCCESS_50;
-        this.cdr = inject(ChangeDetectorRef);
-        if (defaultAppTheme) {
-            this.applicationTheme = defaultAppTheme;
-        }
-    }
-    ngOnInit() {
-        this.browse = true;
-    }
-    //When file is dropped
-    onFileDropped(files) {
-        this.emitFile(files);
-    }
-    //When input changes
-    onChangeUpload(event) {
-        this.isCanceled = false;
-        const element = event.currentTarget;
-        // Prevents clearing items when user selects cancel in the dialog. Cancel event can emit empty file list.
-        if (element.files?.length) {
-            this.emitFile(element.files || new FileList());
-        }
-    }
-    //Emit drop file
-    emitFile(files) {
-        const [file] = Array.from(files);
-        this.file = file;
-        this.errors = null;
-        this.onTouch();
-        this.isMissedMinSize =
-            !file?.size && !this.minFileSizeMB ? true : this.fileSizeToMB(file?.size ?? 0) <= this.minFileSizeMB;
-        if (!this.isMissedMinSize) {
-            this.onChange(this.file);
-            this.OnDrop.emit(file);
-        }
-    }
-    //Show progress-bar
-    showProgress() {
-        this.browse = false;
-        return Boolean(this.file && !this.errors && !this.isMissedMinSize);
-    }
-    //Show success elements
-    showSuccess() {
-        return Boolean(this.file && this.uploadProgress === 100 && !this.errors && !this.isMissedMinSize);
-    }
-    //Show browse when there are error
-    showBrowse() {
-        return Boolean(this.errors) || this.isMissedMinSize;
-    }
-    ngOnChanges(changes) {
-        if (!this.isCanceled) {
-            if (changes['uploadProgress'] || changes['file']) {
-                this.progress = this.showProgress();
-                this.success = this.showSuccess();
-                this.browse = this.showBrowse();
-            }
-            if (changes['errors']) {
-                this.progress = this.showProgress();
-                this.success = this.showSuccess();
-                this.browse = this.showBrowse();
-            }
-            if (changes['applicationTheme']) {
-                this.compColor = this.getCompanyColor();
-            }
-        }
-    }
-    writeValue(value) {
-        if (value) {
-            this.file = value || null;
-        }
-        else {
-            this.file = null;
-        }
-        // The forms API calls this from outside the component's own change
-        // detection — under OnPush the view must be marked explicitly.
-        this.cdr.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    getCompanyColor() {
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty companyColor falls back to the theme colour
-        return this.companyColor || (this.applicationTheme === 'classic' ? '#46A997' : '#D410AA');
-    }
-    fileSizeToMB(fileSize) {
-        return fileSize / 1024 / 1024;
-    }
-    onKeydown(ev) {
-        if (ev.key === 'Enter' || ev.key === ' ') {
-            this.fileDrop?.nativeElement?.click();
-        }
-        else if (ev.key === 'Escape') {
-            this.file = null;
-            this.success = false;
-            this.progress = false;
-            this.errors = null;
-            this.isMissedMinSize = false;
-            this.browse = true;
-            this.isCanceled = true;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FileUploadComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: FileUploadComponent, isStandalone: true, selector: "ui-file-upload", inputs: { maxFileSizeMB: "maxFileSizeMB", minFileSizeMB: "minFileSizeMB", supportedFileTypes: "supportedFileTypes", uploadProgress: "uploadProgress", showUploadProgress: "showUploadProgress", fileProcessingMessage: "fileProcessingMessage", errors: "errors", disabled: "disabled", testId: "testId", file: "file", companyColor: "companyColor", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", showFileSize: "showFileSize" }, outputs: { OnDrop: "OnDrop" }, host: { properties: { "class": "this.class", "style.--color": "this.compColor" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => FileUploadComponent),
-                multi: true,
-            },
-        ], 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    [tabIndex]=\"0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"fileDrop?.nativeElement?.click()\"\n  >\n    @if (browse && !(success && !!file && progress)) {\n      <div [@inOutAnimation] class=\"upload-files\">\n        <div class=\"upload-browse\">\n          <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n          @if (!!errors || isMissedMinSize) {\n            <div class=\"errors\" role=\"alert\">\n              @if (!!errors) {\n                @for (error of errors; track error) {\n                  <span><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n                }\n              }\n              @if (isMissedMinSize) {\n                <span>\n                  <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n                  {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\n                </span>\n              }\n            </div>\n          }\n          <input\n            [attr.data-testid]=\"testId ?? 'file-upload-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          @if (applicationTheme === 'classic') {\n            <p>\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          } @else {\n            <p id=\"drag-and-drop\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\n          }\n          <span class=\"upload-text\"\n            >{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span\n          >\n          @if (minFileSizeMB) {\n            <span class=\"upload-text\"\n              >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\n            >\n          }\n        </div>\n      </div>\n    }\n    @if (success) {\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          [attr.data-testid]=\"successInputTestId\"\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\">{{ file?.name }}</span>\n        @if (showFileSize) {\n          <span class=\"upload-text\">{{\n            translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: fileSizeInMB } | async\n          }}</span>\n        }\n      </div>\n    }\n    @if (!!progress && !!file && !success) {\n      <div class=\"upload-progress\" [@inOutAnimationProgress]>\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 (showUploadProgress) {\n            <span>{{ uploadProgress }}</span\n            >%\n          }\n        </p>\n      </div>\n    }\n\n    <ng-template #iconTpl>\n      @if (applicationTheme === 'classic') {\n        <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      } @else {\n        <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n      }\n    </ng-template>\n\n    @if (!!supportedFileTypes) {\n      <div [attr.theme]=\"applicationTheme\" class=\"upload-supported-files\" id=\"upload-supported-files\">\n        <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\n        >{{ supportedFileTypes }}\n      </div>\n    }\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:#3c9a13;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:16px;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: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
-            trigger('inOutAnimation', [
-                transition(':enter', [
-                    style({ opacity: 0, height: 0 }),
-                    animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
-                ]),
-                transition(':leave', [
-                    style({ opacity: 1, height: '196px' }),
-                    animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
-                ]),
-            ]),
-            trigger('inOutAnimationProgress', [
-                transition(':enter', [
-                    style({ opacity: 0, height: 0 }),
-                    animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
-                ]),
-                transition(':leave', [
-                    style({ opacity: 1, height: '196px' }),
-                    animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
-                ]),
-            ]),
-            trigger('inOutAnimationChange', [
-                transition(':enter', [
-                    style({ opacity: 0, height: 0 }),
-                    animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
-                ]),
-                transition(':leave', [
-                    style({ opacity: 1, height: '196px' }),
-                    animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
-                ]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FileUploadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-file-upload', encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => FileUploadComponent),
-                            multi: true,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('inOutAnimation', [
-                            transition(':enter', [
-                                style({ opacity: 0, height: 0 }),
-                                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
-                            ]),
-                            transition(':leave', [
-                                style({ opacity: 1, height: '196px' }),
-                                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
-                            ]),
-                        ]),
-                        trigger('inOutAnimationProgress', [
-                            transition(':enter', [
-                                style({ opacity: 0, height: 0 }),
-                                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
-                            ]),
-                            transition(':leave', [
-                                style({ opacity: 1, height: '196px' }),
-                                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
-                            ]),
-                        ]),
-                        trigger('inOutAnimationChange', [
-                            transition(':enter', [
-                                style({ opacity: 0, height: 0 }),
-                                animate('0.2s ease-out', style({ opacity: 1, height: '196px' })),
-                            ]),
-                            transition(':leave', [
-                                style({ opacity: 1, height: '196px' }),
-                                animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
-                            ]),
-                        ]),
-                    ], imports: [
-                        DragDropDirective,
-                        NgClass,
-                        NgTemplateOutlet,
-                        IconComponent,
-                        ProgressBarComponent,
-                        AsyncPipe,
-                        LowerCasePipe,
-                        UiTranslatePipe,
-                    ], 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    [tabIndex]=\"0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"fileDrop?.nativeElement?.click()\"\n  >\n    @if (browse && !(success && !!file && progress)) {\n      <div [@inOutAnimation] class=\"upload-files\">\n        <div class=\"upload-browse\">\n          <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n          @if (!!errors || isMissedMinSize) {\n            <div class=\"errors\" role=\"alert\">\n              @if (!!errors) {\n                @for (error of errors; track error) {\n                  <span><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n                }\n              }\n              @if (isMissedMinSize) {\n                <span>\n                  <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n                  {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\n                </span>\n              }\n            </div>\n          }\n          <input\n            [attr.data-testid]=\"testId ?? 'file-upload-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          @if (applicationTheme === 'classic') {\n            <p>\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          } @else {\n            <p id=\"drag-and-drop\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\n          }\n          <span class=\"upload-text\"\n            >{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span\n          >\n          @if (minFileSizeMB) {\n            <span class=\"upload-text\"\n              >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\n            >\n          }\n        </div>\n      </div>\n    }\n    @if (success) {\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          [attr.data-testid]=\"successInputTestId\"\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\">{{ file?.name }}</span>\n        @if (showFileSize) {\n          <span class=\"upload-text\">{{\n            translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: fileSizeInMB } | async\n          }}</span>\n        }\n      </div>\n    }\n    @if (!!progress && !!file && !success) {\n      <div class=\"upload-progress\" [@inOutAnimationProgress]>\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 (showUploadProgress) {\n            <span>{{ uploadProgress }}</span\n            >%\n          }\n        </p>\n      </div>\n    }\n\n    <ng-template #iconTpl>\n      @if (applicationTheme === 'classic') {\n        <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      } @else {\n        <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n      }\n    </ng-template>\n\n    @if (!!supportedFileTypes) {\n      <div [attr.theme]=\"applicationTheme\" class=\"upload-supported-files\" id=\"upload-supported-files\">\n        <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\n        >{{ supportedFileTypes }}\n      </div>\n    }\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:#3c9a13;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:16px;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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }], propDecorators: { class: [{
-                type: HostBinding
-            }], maxFileSizeMB: [{
-                type: Input
-            }], minFileSizeMB: [{
-                type: Input
-            }], supportedFileTypes: [{
-                type: Input
-            }], uploadProgress: [{
-                type: Input
-            }], showUploadProgress: [{
-                type: Input
-            }], fileProcessingMessage: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], file: [{
-                type: Input
-            }], companyColor: [{
-                type: Input
-            }], compColor: [{
-                type: HostBinding,
-                args: ['style.--color']
-            }], applicationTheme: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], ariaRequired: [{
-                type: Input
-            }], showFileSize: [{
-                type: Input
-            }], OnDrop: [{
-                type: Output
-            }], fileDrop: [{
-                type: ViewChild,
-                args: ['fileDrop']
-            }] } });
-
-class FileUploadComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FileUploadComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: FileUploadComponentModule, imports: [CommonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            IconComponentModule,
-            ProgressBarComponentModule,
-            UiTranslatePipe,
-            FileUploadComponent,
-            DragDropDirective], exports: [FileUploadComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FileUploadComponentModule, imports: [CommonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            IconComponentModule,
-            ProgressBarComponentModule,
-            FileUploadComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: FileUploadComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        IconComponentModule,
-                        ProgressBarComponentModule,
-                        UiTranslatePipe,
-                        FileUploadComponent,
-                        DragDropDirective,
-                    ],
-                    exports: [FileUploadComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { animate, style, transition, trigger } from "@angular/animations";
+import { AsyncPipe, CommonModule, LowerCasePipe, NgClass, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, EventEmitter, HostBinding, HostListener, Inject, Input, NgModule, Optional, Output, ViewChild, ViewEncapsulation, forwardRef, inject } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { Color, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import { IconComponent, IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import { ProgressBarComponent, ProgressBarComponentModule } from "@testgorilla/tgo-ui/components/progress-bar";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+var DragDropDirective = class DragDropDirective {
+	constructor() {
+		this.fileDropped = new EventEmitter();
+	}
+	onDragOver(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.file = true;
+	}
+	onDragLeave(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.file = false;
+	}
+	ondrop(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.file = false;
+		let files;
+		if (event.dataTransfer) {
+			files = event.dataTransfer.files;
+			if (files.length > 0) this.fileDropped.emit(files);
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DragDropDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			type: DragDropDirective,
+			isStandalone: true,
+			selector: "[uiDragDrop]",
+			outputs: { fileDropped: "fileDropped" },
+			host: {
+				listeners: {
+					"dragover": "onDragOver($event)",
+					"dragleave": "onDragLeave($event)",
+					"drop": "ondrop($event)"
+				},
+				properties: { "class.file-over": "this.file" }
+			},
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DragDropDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[uiDragDrop]" }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		file: [{
+			type: HostBinding,
+			args: ["class.file-over"]
+		}],
+		fileDropped: [{ type: Output }],
+		onDragOver: [{
+			type: HostListener,
+			args: ["dragover", ["$event"]]
+		}],
+		onDragLeave: [{
+			type: HostListener,
+			args: ["dragleave", ["$event"]]
+		}],
+		ondrop: [{
+			type: HostListener,
+			args: ["drop", ["$event"]]
+		}]
+	}
+});
+var FileUploadComponent = class FileUploadComponent {
+	get successInputTestId() {
+		return this.testId ? `${this.testId}-success` : "file-upload-success-input";
+	}
+	get fileSizeInMB() {
+		return this.file ? (this.file.size / 1048576).toFixed(2) : null;
+	}
+	constructor(defaultAppTheme) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.class = "ui-file-upload";
+		this.showUploadProgress = true;
+		this.disabled = false;
+		this.testId = null;
+		this.file = null;
+		this.companyColor = "";
+		this.applicationTheme = "light";
+		this.ariaRequired = false;
+		this.showFileSize = true;
+		this.OnDrop = new EventEmitter();
+		this.translationContext = "FILE_UPLOAD.";
+		this.onChange = (_value) => {};
+		this.onTouch = () => {};
+		this.isMissedMinSize = false;
+		this.progress = false;
+		this.success = false;
+		this.isCanceled = false;
+		this.colorUploadSuccess = Color.SUCCESS_50;
+		this.cdr = inject(ChangeDetectorRef);
+		if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
+	}
+	ngOnInit() {
+		this.browse = true;
+	}
+	onFileDropped(files) {
+		this.emitFile(files);
+	}
+	onChangeUpload(event) {
+		this.isCanceled = false;
+		const element = event.currentTarget;
+		if (element.files?.length) this.emitFile(element.files || new FileList());
+	}
+	emitFile(files) {
+		const [file] = Array.from(files);
+		this.file = file;
+		this.errors = null;
+		this.onTouch();
+		this.isMissedMinSize = !file?.size && !this.minFileSizeMB ? true : this.fileSizeToMB(file?.size ?? 0) <= this.minFileSizeMB;
+		if (!this.isMissedMinSize) {
+			this.onChange(this.file);
+			this.OnDrop.emit(file);
+		}
+	}
+	showProgress() {
+		this.browse = false;
+		return Boolean(this.file && !this.errors && !this.isMissedMinSize);
+	}
+	showSuccess() {
+		return Boolean(this.file && this.uploadProgress === 100 && !this.errors && !this.isMissedMinSize);
+	}
+	showBrowse() {
+		return Boolean(this.errors) || this.isMissedMinSize;
+	}
+	ngOnChanges(changes) {
+		if (!this.isCanceled) {
+			if (changes["uploadProgress"] || changes["file"]) {
+				this.progress = this.showProgress();
+				this.success = this.showSuccess();
+				this.browse = this.showBrowse();
+			}
+			if (changes["errors"]) {
+				this.progress = this.showProgress();
+				this.success = this.showSuccess();
+				this.browse = this.showBrowse();
+			}
+			if (changes["applicationTheme"]) this.compColor = this.getCompanyColor();
+		}
+	}
+	writeValue(value) {
+		if (value) this.file = value || null;
+		else this.file = null;
+		this.cdr.markForCheck();
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouch = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	getCompanyColor() {
+		return this.companyColor || (this.applicationTheme === "classic" ? "#46A997" : "#D410AA");
+	}
+	fileSizeToMB(fileSize) {
+		return fileSize / 1024 / 1024;
+	}
+	onKeydown(ev) {
+		if (ev.key === "Enter" || ev.key === " ") this.fileDrop?.nativeElement?.click();
+		else if (ev.key === "Escape") {
+			this.file = null;
+			this.success = false;
+			this.progress = false;
+			this.errors = null;
+			this.isMissedMinSize = false;
+			this.browse = true;
+			this.isCanceled = true;
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: FileUploadComponent,
+			deps: [{
+				token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+				optional: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: FileUploadComponent,
+			isStandalone: true,
+			selector: "ui-file-upload",
+			inputs: {
+				maxFileSizeMB: "maxFileSizeMB",
+				minFileSizeMB: "minFileSizeMB",
+				supportedFileTypes: "supportedFileTypes",
+				uploadProgress: "uploadProgress",
+				showUploadProgress: "showUploadProgress",
+				fileProcessingMessage: "fileProcessingMessage",
+				errors: "errors",
+				disabled: "disabled",
+				testId: "testId",
+				file: "file",
+				companyColor: "companyColor",
+				applicationTheme: "applicationTheme",
+				ariaLabel: "ariaLabel",
+				ariaRequired: "ariaRequired",
+				showFileSize: "showFileSize"
+			},
+			outputs: { OnDrop: "OnDrop" },
+			host: { properties: {
+				"class": "this.class",
+				"style.--color": "this.compColor"
+			} },
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => FileUploadComponent),
+				multi: true
+			}],
+			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    [tabIndex]=\"0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"fileDrop?.nativeElement?.click()\"\n  >\n    @if (browse && !(success && !!file && progress)) {\n      <div [@inOutAnimation] class=\"upload-files\">\n        <div class=\"upload-browse\">\n          <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n          @if (!!errors || isMissedMinSize) {\n            <div class=\"errors\" role=\"alert\">\n              @if (!!errors) {\n                @for (error of errors; track error) {\n                  <span><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n                }\n              }\n              @if (isMissedMinSize) {\n                <span>\n                  <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n                  {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\n                </span>\n              }\n            </div>\n          }\n          <input\n            [attr.data-testid]=\"testId ?? 'file-upload-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          @if (applicationTheme === 'classic') {\n            <p>\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          } @else {\n            <p id=\"drag-and-drop\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\n          }\n          <span class=\"upload-text\"\n            >{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span\n          >\n          @if (minFileSizeMB) {\n            <span class=\"upload-text\"\n              >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\n            >\n          }\n        </div>\n      </div>\n    }\n    @if (success) {\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          [attr.data-testid]=\"successInputTestId\"\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\">{{ file?.name }}</span>\n        @if (showFileSize) {\n          <span class=\"upload-text\">{{\n            translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: fileSizeInMB } | async\n          }}</span>\n        }\n      </div>\n    }\n    @if (!!progress && !!file && !success) {\n      <div class=\"upload-progress\" [@inOutAnimationProgress]>\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 (showUploadProgress) {\n            <span>{{ uploadProgress }}</span\n            >%\n          }\n        </p>\n      </div>\n    }\n\n    <ng-template #iconTpl>\n      @if (applicationTheme === 'classic') {\n        <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      } @else {\n        <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n      }\n    </ng-template>\n\n    @if (!!supportedFileTypes) {\n      <div [attr.theme]=\"applicationTheme\" class=\"upload-supported-files\" id=\"upload-supported-files\">\n        <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\n        >{{ supportedFileTypes }}\n      </div>\n    }\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:#3c9a13;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:16px;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: DragDropDirective,
+					selector: "[uiDragDrop]",
+					outputs: ["fileDropped"]
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "component",
+					type: ProgressBarComponent,
+					selector: "ui-progress-bar",
+					inputs: [
+						"companyColor",
+						"progress",
+						"mode",
+						"buffer",
+						"applicationTheme",
+						"ariaLabel",
+						"ariaDescribedBy",
+						"showPercentage"
+					]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: LowerCasePipe,
+					name: "lowercase"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			animations: [
+				trigger("inOutAnimation", [transition(":enter", [style({
+					opacity: 0,
+					height: 0
+				}), animate("0.2s ease-out", style({
+					opacity: 1,
+					height: "196px"
+				}))]), transition(":leave", [style({
+					opacity: 1,
+					height: "196px"
+				}), animate("0.2s ease-in", style({
+					opacity: 0,
+					height: 0
+				}))])]),
+				trigger("inOutAnimationProgress", [transition(":enter", [style({
+					opacity: 0,
+					height: 0
+				}), animate("0.2s ease-out", style({
+					opacity: 1,
+					height: "196px"
+				}))]), transition(":leave", [style({
+					opacity: 1,
+					height: "196px"
+				}), animate("0.2s ease-in", style({
+					opacity: 0,
+					height: 0
+				}))])]),
+				trigger("inOutAnimationChange", [transition(":enter", [style({
+					opacity: 0,
+					height: 0
+				}), animate("0.2s ease-out", style({
+					opacity: 1,
+					height: "196px"
+				}))]), transition(":leave", [style({
+					opacity: 1,
+					height: "196px"
+				}), animate("0.2s ease-in", style({
+					opacity: 0,
+					height: 0
+				}))])])
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FileUploadComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-file-upload",
+			encapsulation: ViewEncapsulation.None,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => FileUploadComponent),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			animations: [
+				trigger("inOutAnimation", [transition(":enter", [style({
+					opacity: 0,
+					height: 0
+				}), animate("0.2s ease-out", style({
+					opacity: 1,
+					height: "196px"
+				}))]), transition(":leave", [style({
+					opacity: 1,
+					height: "196px"
+				}), animate("0.2s ease-in", style({
+					opacity: 0,
+					height: 0
+				}))])]),
+				trigger("inOutAnimationProgress", [transition(":enter", [style({
+					opacity: 0,
+					height: 0
+				}), animate("0.2s ease-out", style({
+					opacity: 1,
+					height: "196px"
+				}))]), transition(":leave", [style({
+					opacity: 1,
+					height: "196px"
+				}), animate("0.2s ease-in", style({
+					opacity: 0,
+					height: 0
+				}))])]),
+				trigger("inOutAnimationChange", [transition(":enter", [style({
+					opacity: 0,
+					height: 0
+				}), animate("0.2s ease-out", style({
+					opacity: 1,
+					height: "196px"
+				}))]), transition(":leave", [style({
+					opacity: 1,
+					height: "196px"
+				}), animate("0.2s ease-in", style({
+					opacity: 0,
+					height: 0
+				}))])])
+			],
+			imports: [
+				DragDropDirective,
+				NgClass,
+				NgTemplateOutlet,
+				IconComponent,
+				ProgressBarComponent,
+				AsyncPipe,
+				LowerCasePipe,
+				UiTranslatePipe
+			],
+			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    [tabIndex]=\"0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"fileDrop?.nativeElement?.click()\"\n  >\n    @if (browse && !(success && !!file && progress)) {\n      <div [@inOutAnimation] class=\"upload-files\">\n        <div class=\"upload-browse\">\n          <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n          @if (!!errors || isMissedMinSize) {\n            <div class=\"errors\" role=\"alert\">\n              @if (!!errors) {\n                @for (error of errors; track error) {\n                  <span><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n                }\n              }\n              @if (isMissedMinSize) {\n                <span>\n                  <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n                  {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\n                </span>\n              }\n            </div>\n          }\n          <input\n            [attr.data-testid]=\"testId ?? 'file-upload-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          @if (applicationTheme === 'classic') {\n            <p>\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          } @else {\n            <p id=\"drag-and-drop\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\n          }\n          <span class=\"upload-text\"\n            >{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span\n          >\n          @if (minFileSizeMB) {\n            <span class=\"upload-text\"\n              >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\n            >\n          }\n        </div>\n      </div>\n    }\n    @if (success) {\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          [attr.data-testid]=\"successInputTestId\"\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\">{{ file?.name }}</span>\n        @if (showFileSize) {\n          <span class=\"upload-text\">{{\n            translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: fileSizeInMB } | async\n          }}</span>\n        }\n      </div>\n    }\n    @if (!!progress && !!file && !success) {\n      <div class=\"upload-progress\" [@inOutAnimationProgress]>\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 (showUploadProgress) {\n            <span>{{ uploadProgress }}</span\n            >%\n          }\n        </p>\n      </div>\n    }\n\n    <ng-template #iconTpl>\n      @if (applicationTheme === 'classic') {\n        <ui-icon class=\"upload-icon\" name=\"File-upload\"></ui-icon>\n      } @else {\n        <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n      }\n    </ng-template>\n\n    @if (!!supportedFileTypes) {\n      <div [attr.theme]=\"applicationTheme\" class=\"upload-supported-files\" id=\"upload-supported-files\">\n        <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\n        >{{ supportedFileTypes }}\n      </div>\n    }\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:#3c9a13;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:16px;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"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+		}]
+	}],
+	propDecorators: {
+		class: [{ type: HostBinding }],
+		maxFileSizeMB: [{ type: Input }],
+		minFileSizeMB: [{ type: Input }],
+		supportedFileTypes: [{ type: Input }],
+		uploadProgress: [{ type: Input }],
+		showUploadProgress: [{ type: Input }],
+		fileProcessingMessage: [{ type: Input }],
+		errors: [{ type: Input }],
+		disabled: [{ type: Input }],
+		testId: [{ type: Input }],
+		file: [{ type: Input }],
+		companyColor: [{ type: Input }],
+		compColor: [{
+			type: HostBinding,
+			args: ["style.--color"]
+		}],
+		applicationTheme: [{ type: Input }],
+		ariaLabel: [{ type: Input }],
+		ariaRequired: [{ type: Input }],
+		showFileSize: [{ type: Input }],
+		OnDrop: [{ type: Output }],
+		fileDrop: [{
+			type: ViewChild,
+			args: ["fileDrop"]
+		}]
+	}
+});
+var FileUploadComponentModule = class FileUploadComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: FileUploadComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: FileUploadComponentModule,
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				ProgressBarComponentModule,
+				UiTranslatePipe,
+				FileUploadComponent,
+				DragDropDirective
+			],
+			exports: [FileUploadComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: FileUploadComponentModule,
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				ProgressBarComponentModule,
+				FileUploadComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: FileUploadComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				ProgressBarComponentModule,
+				UiTranslatePipe,
+				FileUploadComponent,
+				DragDropDirective
+			],
+			exports: [FileUploadComponent]
+		}]
+	}]
+});
 export { FileUploadComponent, FileUploadComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-file-upload.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-file-upload.mjs.map