cps-ui-kit 21.7.0 → 21.8.0

package/fesm2022/cps-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, ElementRef, SecurityContext, HostListener, Directive, Pipe, PLATFORM_ID, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Self, Optional, HostBinding, input, computed, numberAttribute, Injectable, ChangeDetectorRef, ViewChildren, TemplateRef, ContentChildren, Host, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf, signal } from '@angular/core';
+import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, SecurityContext, HostListener, Directive, Pipe, PLATFORM_ID, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Self, Optional, HostBinding, numberAttribute, booleanAttribute, Injectable, ChangeDetectorRef, ViewChildren, TemplateRef, ContentChildren, Host, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf, signal } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { Validators, FormsModule, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, take, catchError, of, Subscription, fromEvent } from 'rxjs';
@@ -72,6 +72,11 @@ const getComputedLabel = (context) => {
     }
     return parts.length > 0 ? parts.join(' ') : null;
 };
+const focusElement = (element) => {
+    if (element) {
+        setTimeout(() => element.focus());
+    }
+};
 
 const isSameDomain = (styleSheet, _window) => {
     if (!styleSheet.href) {
@@ -452,69 +457,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * @group Components
  */
 class CpsProgressLinearComponent {
-    // eslint-disable-next-line no-useless-constructor
-    constructor(document) {
-        this.document = document;
+    constructor() {
         /**
          * Width of the progress bar, of type number denoting pixels or string.
          * @group Props
+         * @default 100%
          */
-        this.width = '100%';
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         /**
          * Height of the progress bar, of type number denoting pixels or string.
          * @group Props
+         * @default 0.5rem
          */
-        this.height = '0.5rem';
+        this.height = input('0.5rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
         /**
          * Color of the progress bar.
          * @group Props
+         * @default var(--cps-accent-primary)
          */
-        this.color = 'var(--cps-accent-primary)';
+        this.color = input('var(--cps-accent-primary)', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * Background color of the progress bar.
          * @group Props
+         * @default white
          */
-        this.bgColor = 'white';
+        this.bgColor = input('white', ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
         /**
          * Option to control the opacity of the progress bar.
          * @group Props
+         * @default 1
          */
-        this.opacity = 1;
+        this.opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
         /**
          * Border radius of the progress bar, of type number denoting pixels or string.
          * @group Props
+         * @default 0
          */
-        this.radius = 0;
-    }
-    ngOnInit() {
-        this.width = convertSize(this.width);
-        this.height = convertSize(this.height);
-        this.radius = convertSize(this.radius);
-        this.color = getCSSColor(this.color, this.document);
-        this.bgColor = getCSSColor(this.bgColor, this.document);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressLinearComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: "width", height: "height", color: "color", bgColor: "bgColor", opacity: "opacity", radius: "radius" }, ngImport: i0, template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': width,\n    height: height,\n    'border-radius': radius,\n    background: bgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+        this.radius = input(0, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+        this.document = inject(DOCUMENT);
+        this.cvtWidth = computed(() => convertSize(this.width()), ...(ngDevMode ? [{ debugName: "cvtWidth" }] : /* istanbul ignore next */ []));
+        this.cvtHeight = computed(() => convertSize(this.height()), ...(ngDevMode ? [{ debugName: "cvtHeight" }] : /* istanbul ignore next */ []));
+        this.cvtRadius = computed(() => convertSize(this.radius()), ...(ngDevMode ? [{ debugName: "cvtRadius" }] : /* istanbul ignore next */ []));
+        this.cssColor = computed(() => getCSSColor(this.color(), this.document), ...(ngDevMode ? [{ debugName: "cssColor" }] : /* istanbul ignore next */ []));
+        this.cssBgColor = computed(() => getCSSColor(this.bgColor(), this.document), ...(ngDevMode ? [{ debugName: "cssBgColor" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"cps-progress-linear\"\n  [style.max-width]=\"cvtWidth()\"\n  [style.height]=\"cvtHeight()\"\n  [style.border-radius]=\"cvtRadius()\"\n  [style.background]=\"cssBgColor()\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressLinearComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': width,\n    height: height,\n    'border-radius': radius,\n    background: bgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], opacity: [{
-                type: Input
-            }], radius: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cps-progress-linear', template: "<div\n  class=\"cps-progress-linear\"\n  [style.max-width]=\"cvtWidth()\"\n  [style.height]=\"cvtHeight()\"\n  [style.border-radius]=\"cvtRadius()\"\n  [style.background]=\"cssBgColor()\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }] } });
 
 /**
  * CpsTooltipDirective provides advisory information for a target element.
@@ -3931,21 +3924,25 @@ class CpsDividerComponent {
         /**
          * Determines whether the divider is vertically aligned.
          * @group Props
+         * @default false
          */
         this.vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
         /**
          * Color of the divider.
          * @group Props
+         * @default line-mid
          */
         this.color = input('line-mid', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * Type of the divider.
          * @group Props
+         * @default solid
          */
         this.type = input('solid', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * Thickness of the divider, a number denoting pixels or a string.
          * @group Props
+         * @default 1px
          */
         this.thickness = input('1px', ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
         this.borderTop = computed(() => {
@@ -4196,15 +4193,20 @@ class CpsFileUploadComponent {
          */
         this.fileDesc = 'Any file';
         /**
-         * Width of the component, a number denoting pixels or a string.
+         * Aria label for the component, used for accessibility.
          * @group Props
          */
-        this.width = '100%';
+        this.ariaLabel = 'Upload file';
         /**
          * Expected file info block, explaining some extra stuff about file.
          * @group Props
          */
         this.fileInfo = '';
+        /**
+         * Whether the component is disabled.
+         * @group Props
+         */
+        this.disabled = false;
         /**
          * Callback for uploaded file processing.
          * @group Props
@@ -4220,6 +4222,12 @@ class CpsFileUploadComponent {
          * @group Props
          */
         this.fileNameTooltipOffset = 12;
+        /**
+         * Width of the component, a number denoting pixels or a string.
+         * @group Props
+         * @default 100%
+         */
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         /**
          * Callback to invoke when file is uploaded.
          * @param {File} File
@@ -4232,6 +4240,24 @@ class CpsFileUploadComponent {
          * @group Emits
          */
         this.fileUploadFailed = new EventEmitter();
+        /**
+         * Callback to invoke when file is processed.
+         * @param {File} File
+         * @group Emits
+         */
+        this.fileProcessed = new EventEmitter();
+        /**
+         * Callback to invoke when file processing fails.
+         * @param {string} - file name
+         * @group Emits
+         */
+        this.fileProcessingFailed = new EventEmitter();
+        /**
+         * Callback to invoke when file processing is cancelled.
+         * @param {string} - file name
+         * @group Emits
+         */
+        this.fileProcessingCancelled = new EventEmitter();
         /**
          * Callback to invoke when uploaded file is removed.
          * @param {string} - file name
@@ -4241,18 +4267,60 @@ class CpsFileUploadComponent {
         this.isDragoverFile = false;
         this.extensionsString = '';
         this.extensionsStringAsterisks = '';
-        this.cvtWidth = '';
+        this.cvtWidth = computed(() => convertSize(this.width()), ...(ngDevMode ? [{ debugName: "cvtWidth" }] : /* istanbul ignore next */ []));
         this.isProcessingFile = false;
+        this.errorMessage = '';
+        this.dragCounter = 0;
+        this.cancelProcessing$ = new Subject();
     }
     ngOnInit() {
         this.updateExtensionsString();
-        this.cvtWidth = convertSize(this.width);
+    }
+    ngOnDestroy() {
+        this.cancelProcessing$.next();
+        this.cancelProcessing$.complete();
     }
     ngOnChanges(changes) {
         if (changes.extensions) {
             this.updateExtensionsString();
         }
     }
+    resetState() {
+        this.cancelFileProcessing();
+        this.errorMessage = '';
+        this.dragCounter = 0;
+        this.isDragoverFile = false;
+    }
+    openFilePicker() {
+        if (this.isProcessingFile)
+            return;
+        this.fileInput?.nativeElement.click();
+    }
+    onDragEnter() {
+        this.dragCounter++;
+        this.isDragoverFile = true;
+    }
+    onDragLeave() {
+        this.dragCounter--;
+        if (this.dragCounter <= 0) {
+            this.isDragoverFile = false;
+            this.dragCounter = 0;
+        }
+    }
+    onDragEnd() {
+        this.dragCounter = 0;
+        this.isDragoverFile = false;
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        this.isDragoverFile = true;
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragCounter = 0;
+        this.isDragoverFile = false;
+        this.tryUploadFile(event);
+    }
     updateExtensionsString() {
         this.extensions = this.extensions.map((ext) => ext.startsWith('.') ? ext.toLowerCase() : '.' + ext.toLowerCase());
         this.extensionsString = this.extensions.join(', ');
@@ -4263,7 +4331,10 @@ class CpsFileUploadComponent {
     tryUploadFile(event) {
         event.preventDefault();
         event.stopPropagation();
+        if (this.isProcessingFile)
+            return;
         this.isDragoverFile = false;
+        this.errorMessage = '';
         let file;
         if (event.type === 'drop') {
             file = event.dataTransfer?.files.item(0) ?? undefined;
@@ -4275,6 +4346,7 @@ class CpsFileUploadComponent {
             file = files.item(0) ?? undefined;
         }
         if (!this._isFileExtensionValid(file)) {
+            this.errorMessage = 'Unsupported file type';
             this.fileUploadFailed.emit(file?.name ?? '');
             return;
         }
@@ -4284,23 +4356,53 @@ class CpsFileUploadComponent {
             if (this.fileProcessingCallback) {
                 this.isProcessingFile = true;
                 this.fileProcessingCallback(this.uploadedFile)
-                    .pipe(take(1), catchError(() => {
+                    .pipe(take(1), takeUntil(this.cancelProcessing$), catchError(() => {
                     return of(false);
                 }))
                     .subscribe((res) => {
-                    if (!res)
-                        this.removeUploadedFile();
                     this.isProcessingFile = false;
+                    if (res) {
+                        this.fileProcessed.emit(this.uploadedFile);
+                    }
+                    else {
+                        this.errorMessage = 'File processing failed';
+                        this.fileProcessingFailed.emit(this.uploadedFile?.name ?? '');
+                        this.removeUploadedFile();
+                    }
                 });
             }
         }
     }
+    onRemoveUploadedFile(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.removeUploadedFile();
+        focusElement(this.dropzoneButton?.nativeElement);
+    }
+    onCancelFileProcessing(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.cancelFileProcessing();
+        focusElement(this.dropzoneButton?.nativeElement);
+    }
+    cancelFileProcessing() {
+        this.cancelProcessing$.next();
+        this.isProcessingFile = false;
+        const name = this.uploadedFile?.name;
+        if (name) {
+            this.fileProcessingCancelled.emit(name);
+        }
+        this.removeUploadedFile();
+    }
     removeUploadedFile() {
-        const name = this.uploadedFile?.name ?? '';
+        const name = this.uploadedFile?.name;
         this.uploadedFile = undefined;
-        this.uploadedFileRemoved.emit(name);
-        if (this.fileInput) {
-            this.fileInput.nativeElement.value = '';
+        if (name) {
+            this.uploadedFileRemoved.emit(name);
+        }
+        const inputEl = this.fileInput?.nativeElement;
+        if (inputEl) {
+            inputEl.value = '';
         }
     }
     _isFileExtensionValid(file) {
@@ -4309,14 +4411,10 @@ class CpsFileUploadComponent {
         if (this.extensions.length < 1)
             return true;
         const fileNameLowerCase = file.name.toLowerCase();
-        for (const ext of this.extensions) {
-            if (fileNameLowerCase.endsWith(ext))
-                return true;
-        }
-        return false;
+        return this.extensions.some((ext) => fileNameLowerCase.endsWith(ext));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: "extensions", fileDesc: "fileDesc", width: "width", fileInfo: "fileInfo", fileProcessingCallback: "fileProcessingCallback", fileNameTooltipPosition: "fileNameTooltipPosition", fileNameTooltipOffset: ["fileNameTooltipOffset", "fileNameTooltipOffset", numberAttribute] }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", uploadedFileRemoved: "uploadedFileRemoved" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-file-upload\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-uploads': uploadedFile?.name\n    }\"\n    (dragend)=\"isDragoverFile = false\"\n    (dragenter)=\"isDragoverFile = true\"\n    (dragleave)=\"isDragoverFile = false\"\n    (dragover)=\"isDragoverFile = true\"\n    (mouseleave)=\"isDragoverFile = false\"\n    (drop)=\"tryUploadFile($event)\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      title=\"\" />\n    <cps-icon icon=\"export\" size=\"large\" color=\"text-darkest\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon color=\"calm\" icon=\"info-circle\" size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"isProcessingFile ? 'warn' : 'success'\">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!isProcessingFile) {\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-remove-icon\"\n            icon=\"remove\"\n            color=\"error\"\n            (click)=\"removeUploadedFile()\">\n          </cps-icon>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload .cps-file-upload-dropzone{font-family:Source Sans Pro,sans-serif;min-height:20px;padding:2rem;text-align:center;border:2px dashed var(--cps-color-calm);position:relative;border-radius:1rem}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-uploads{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:1px dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;width:100%;height:100%;top:0;left:0}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:16px;margin:8px 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:18px;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:16px;font-size:1rem}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-2px;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:2px dashed var(--cps-color-calm);border-left:2px dashed var(--cps-color-calm);border-right:2px dashed var(--cps-color-calm);border-bottom-right-radius:16px;border-bottom-left-radius:16px;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:20px;margin:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 60px)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon{cursor:pointer;flex-shrink:0;margin-left:8px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: false, isRequired: false, transformFunction: null }, fileDesc: { classPropertyName: "fileDesc", publicName: "fileDesc", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, fileInfo: { classPropertyName: "fileInfo", publicName: "fileInfo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fileProcessingCallback: { classPropertyName: "fileProcessingCallback", publicName: "fileProcessingCallback", isSignal: false, isRequired: false, transformFunction: null }, fileNameTooltipPosition: { classPropertyName: "fileNameTooltipPosition", publicName: "fileNameTooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, fileNameTooltipOffset: { classPropertyName: "fileNameTooltipOffset", publicName: "fileNameTooltipOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", fileProcessed: "fileProcessed", fileProcessingFailed: "fileProcessingFailed", fileProcessingCancelled: "fileProcessingCancelled", uploadedFileRemoved: "uploadedFileRemoved" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "dropzoneButton", first: true, predicate: ["dropzoneButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-file-upload\"\n  [class.disabled]=\"disabled\"\n  [style.width]=\"cvtWidth()\">\n  <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (errorMessage) {\n      {{ errorMessage }}\n    } @else if (uploadedFile) {\n      @if (isProcessingFile) {\n        File is being processed\n      } @else {\n        File successfully uploaded\n      }\n    }\n  </div>\n  <button\n    #dropzoneButton\n    type=\"button\"\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-bottom-section': uploadedFile?.name || errorMessage\n    }\"\n    [disabled]=\"disabled\"\n    [class.processing]=\"isProcessingFile\"\n    (click)=\"openFilePicker()\"\n    (dragend)=\"onDragEnd()\"\n    (dragenter)=\"onDragEnter()\"\n    (dragleave)=\"onDragLeave()\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n    [attr.aria-label]=\"ariaLabel\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      hidden />\n    <cps-icon\n      icon=\"export\"\n      size=\"large\"\n      [color]=\"disabled ? 'text-mild' : 'text-darkest'\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon\n          [color]=\"disabled ? 'text-mild' : 'info'\"\n          icon=\"info-circle\"\n          size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        [color]=\"disabled ? 'text-mild' : 'calm'\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </button>\n  @if (errorMessage) {\n    <div class=\"cps-file-upload-error\">\n      <cps-icon\n        icon=\"toast-error\"\n        [color]=\"disabled ? 'text-light' : 'error'\"></cps-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"\n              disabled ? 'text-light' : isProcessingFile ? 'warn' : 'success'\n            \">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!disabled) {\n          @if (isProcessingFile) {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Cancel file processing'\"\n              class=\"cps-file-upload-uploaded-file-cancel-process-icon\"\n              icon=\"close-x\"\n              color=\"error\"\n              (click)=\"onCancelFileProcessing($event)\"\n              (keydown.enter)=\"onCancelFileProcessing($event)\"\n              (keydown.space)=\"onCancelFileProcessing($event)\">\n            </cps-icon>\n          } @else {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Remove uploaded file'\"\n              class=\"cps-file-upload-uploaded-file-remove-icon\"\n              icon=\"remove\"\n              color=\"error\"\n              (click)=\"onRemoveUploadedFile($event)\"\n              (keydown.enter)=\"onRemoveUploadedFile($event)\"\n              (keydown.space)=\"onRemoveUploadedFile($event)\">\n            </cps-icon>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload{min-width:0;position:relative}:host .cps-file-upload .cps-file-upload-dropzone{background:transparent;font-family:Source Sans Pro,sans-serif;min-height:1.25rem;padding:2rem;text-align:center;border:.125rem dashed var(--cps-color-calm);position:relative;border-radius:1rem;display:block;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active:not(.processing){background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.processing{pointer-events:none;cursor:default}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-bottom-section{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:.0625rem dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0;width:100%;height:100%}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:1rem;margin:.5rem 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:1.125rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:1rem;font-size:1rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-.125rem;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:1.25rem;margin:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 3.75rem)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon{cursor:pointer;flex-shrink:0;margin-left:.5rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus{outline:none}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}:host .cps-file-upload .cps-file-upload-error{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;overflow:hidden;border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover);color:var(--cps-color-error);font-size:1.25rem}:host .cps-file-upload .cps-file-upload-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .cps-file-upload.disabled{pointer-events:none}:host .cps-file-upload.disabled .cps-file-upload-dropzone{border-color:var(--cps-color-line-darkest);cursor:not-allowed}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-title{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-content{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-error{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-file-upload .sr-only{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsFileUploadComponent, decorators: [{
             type: Component,
@@ -4325,15 +4423,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CpsIconComponent,
                         CpsProgressLinearComponent,
                         CpsTooltipDirective
-                    ], template: "<div class=\"cps-file-upload\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-uploads': uploadedFile?.name\n    }\"\n    (dragend)=\"isDragoverFile = false\"\n    (dragenter)=\"isDragoverFile = true\"\n    (dragleave)=\"isDragoverFile = false\"\n    (dragover)=\"isDragoverFile = true\"\n    (mouseleave)=\"isDragoverFile = false\"\n    (drop)=\"tryUploadFile($event)\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      title=\"\" />\n    <cps-icon icon=\"export\" size=\"large\" color=\"text-darkest\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon color=\"calm\" icon=\"info-circle\" size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"isProcessingFile ? 'warn' : 'success'\">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!isProcessingFile) {\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-remove-icon\"\n            icon=\"remove\"\n            color=\"error\"\n            (click)=\"removeUploadedFile()\">\n          </cps-icon>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload .cps-file-upload-dropzone{font-family:Source Sans Pro,sans-serif;min-height:20px;padding:2rem;text-align:center;border:2px dashed var(--cps-color-calm);position:relative;border-radius:1rem}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-uploads{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:1px dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;width:100%;height:100%;top:0;left:0}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:16px;margin:8px 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:18px;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:16px;font-size:1rem}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-2px;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:2px dashed var(--cps-color-calm);border-left:2px dashed var(--cps-color-calm);border-right:2px dashed var(--cps-color-calm);border-bottom-right-radius:16px;border-bottom-left-radius:16px;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:20px;margin:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 60px)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon{cursor:pointer;flex-shrink:0;margin-left:8px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}\n"] }]
+                    ], template: "<div\n  class=\"cps-file-upload\"\n  [class.disabled]=\"disabled\"\n  [style.width]=\"cvtWidth()\">\n  <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (errorMessage) {\n      {{ errorMessage }}\n    } @else if (uploadedFile) {\n      @if (isProcessingFile) {\n        File is being processed\n      } @else {\n        File successfully uploaded\n      }\n    }\n  </div>\n  <button\n    #dropzoneButton\n    type=\"button\"\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-bottom-section': uploadedFile?.name || errorMessage\n    }\"\n    [disabled]=\"disabled\"\n    [class.processing]=\"isProcessingFile\"\n    (click)=\"openFilePicker()\"\n    (dragend)=\"onDragEnd()\"\n    (dragenter)=\"onDragEnter()\"\n    (dragleave)=\"onDragLeave()\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n    [attr.aria-label]=\"ariaLabel\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      hidden />\n    <cps-icon\n      icon=\"export\"\n      size=\"large\"\n      [color]=\"disabled ? 'text-mild' : 'text-darkest'\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon\n          [color]=\"disabled ? 'text-mild' : 'info'\"\n          icon=\"info-circle\"\n          size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        [color]=\"disabled ? 'text-mild' : 'calm'\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </button>\n  @if (errorMessage) {\n    <div class=\"cps-file-upload-error\">\n      <cps-icon\n        icon=\"toast-error\"\n        [color]=\"disabled ? 'text-light' : 'error'\"></cps-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"\n              disabled ? 'text-light' : isProcessingFile ? 'warn' : 'success'\n            \">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!disabled) {\n          @if (isProcessingFile) {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Cancel file processing'\"\n              class=\"cps-file-upload-uploaded-file-cancel-process-icon\"\n              icon=\"close-x\"\n              color=\"error\"\n              (click)=\"onCancelFileProcessing($event)\"\n              (keydown.enter)=\"onCancelFileProcessing($event)\"\n              (keydown.space)=\"onCancelFileProcessing($event)\">\n            </cps-icon>\n          } @else {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Remove uploaded file'\"\n              class=\"cps-file-upload-uploaded-file-remove-icon\"\n              icon=\"remove\"\n              color=\"error\"\n              (click)=\"onRemoveUploadedFile($event)\"\n              (keydown.enter)=\"onRemoveUploadedFile($event)\"\n              (keydown.space)=\"onRemoveUploadedFile($event)\">\n            </cps-icon>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload{min-width:0;position:relative}:host .cps-file-upload .cps-file-upload-dropzone{background:transparent;font-family:Source Sans Pro,sans-serif;min-height:1.25rem;padding:2rem;text-align:center;border:.125rem dashed var(--cps-color-calm);position:relative;border-radius:1rem;display:block;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active:not(.processing){background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.processing{pointer-events:none;cursor:default}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-bottom-section{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:.0625rem dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0;width:100%;height:100%}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:1rem;margin:.5rem 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:1.125rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:1rem;font-size:1rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-.125rem;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:1.25rem;margin:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 3.75rem)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon{cursor:pointer;flex-shrink:0;margin-left:.5rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus{outline:none}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}:host .cps-file-upload .cps-file-upload-error{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;overflow:hidden;border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover);color:var(--cps-color-error);font-size:1.25rem}:host .cps-file-upload .cps-file-upload-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .cps-file-upload.disabled{pointer-events:none}:host .cps-file-upload.disabled .cps-file-upload-dropzone{border-color:var(--cps-color-line-darkest);cursor:not-allowed}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-title{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-content{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-error{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-file-upload .sr-only{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { extensions: [{
                 type: Input
             }], fileDesc: [{
                 type: Input
-            }], width: [{
+            }], ariaLabel: [{
                 type: Input
             }], fileInfo: [{
                 type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], fileProcessingCallback: [{
                 type: Input
             }], fileNameTooltipPosition: [{
@@ -4341,15 +4442,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             }], fileNameTooltipOffset: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], fileUploaded: [{
+            }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fileUploaded: [{
                 type: Output
             }], fileUploadFailed: [{
                 type: Output
+            }], fileProcessed: [{
+                type: Output
+            }], fileProcessingFailed: [{
+                type: Output
+            }], fileProcessingCancelled: [{
+                type: Output
             }], uploadedFileRemoved: [{
                 type: Output
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
+            }], dropzoneButton: [{
+                type: ViewChild,
+                args: ['dropzoneButton']
             }] } });
 
 /**