@ptsecurity/mosaic 17.0.0 → 17.1.0

package/fesm2022/ptsecurity-mosaic-file-upload.mjs

@@ -1,24 +1,25 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, EventEmitter, Directive, Output, TemplateRef, Component, ChangeDetectionStrategy, Optional, Inject, Input, ContentChild, ViewChild, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5$1 from '@ptsecurity/mosaic/button';
+import * as i4$1 from '@ptsecurity/mosaic/button';
 import { McButtonModule } from '@ptsecurity/mosaic/button';
 import * as i9 from '@ptsecurity/mosaic/core';
 import { McDataSizeModule } from '@ptsecurity/mosaic/core';
-import * as i7 from '@ptsecurity/mosaic/ellipsis-center';
+import * as i6 from '@ptsecurity/mosaic/ellipsis-center';
 import { McEllipsisCenterModule } from '@ptsecurity/mosaic/ellipsis-center';
-import * as i6 from '@ptsecurity/mosaic/form-field';
+import * as i5 from '@ptsecurity/mosaic/form-field';
 import { McFormFieldModule } from '@ptsecurity/mosaic/form-field';
-import * as i4 from '@ptsecurity/mosaic/icon';
+import * as i3 from '@ptsecurity/mosaic/icon';
 import { McIconModule } from '@ptsecurity/mosaic/icon';
-import * as i5 from '@ptsecurity/mosaic/list';
+import * as i7 from '@ptsecurity/mosaic/link';
+import { McLinkModule } from '@ptsecurity/mosaic/link';
+import * as i4 from '@ptsecurity/mosaic/list';
 import { McListModule } from '@ptsecurity/mosaic/list';
-import * as i3 from '@ptsecurity/mosaic/progress-spinner';
+import * as i2 from '@ptsecurity/mosaic/progress-spinner';
 import { McProgressSpinnerModule } from '@ptsecurity/mosaic/progress-spinner';
 import { McToolTipModule } from '@ptsecurity/mosaic/tooltip';
-import * as i1 from '@angular/cdk/a11y';
-import { Subscription, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 
 /* Object for labels customization inside file upload component */
 const MC_FILE_UPLOAD_CONFIGURATION = new InjectionToken('McFileUploadConfiguration');
@@ -120,9 +121,7 @@ class McMultipleFileUploadComponent {
     get hasErrors() {
         return this.errors && !!this.errors.length;
     }
-    constructor(focusMonitor, cdr, renderer, config) {
-        this.focusMonitor = focusMonitor;
-        this.cdr = cdr;
+    constructor(renderer, config) {
         this.renderer = renderer;
         this.config = config;
         this.errors = [];
@@ -130,8 +129,6 @@ class McMultipleFileUploadComponent {
         this.size = 'default';
         this.inputId = `mc-multiple-file-upload-${nextMultipleFileUploadUniqueId++}`;
         this.fileQueueChanged = new EventEmitter();
-        this.hasFocus = false;
-        this.focusMonitorSubscription = Subscription.EMPTY;
         this.config = config || MC_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
         this.columnDefs = [
             { header: this.config.gridHeaders.file, cssClass: 'file' },
@@ -139,13 +136,6 @@ class McMultipleFileUploadComponent {
             { header: '', cssClass: 'action' }
         ];
     }
-    ngAfterViewInit() {
-        this.focusMonitorSubscription = this.focusMonitor.monitor(this.input)
-            .subscribe((origin) => this.onFocus(origin === 'keyboard'));
-    }
-    ngOnDestroy() {
-        this.focusMonitorSubscription.unsubscribe();
-    }
     onFileSelectedViaClick({ target }) {
         if (this.disabled) {
             return;
@@ -178,13 +168,6 @@ class McMultipleFileUploadComponent {
     onFileListChange() {
         this.fileQueueChanged.emit(this.files);
     }
-    onFocus(focusState) {
-        if (this.disabled) {
-            return;
-        }
-        this.hasFocus = focusState;
-        this.cdr.markForCheck();
-    }
     mapToFileItem(files) {
         if (!files) {
             return [];
@@ -215,15 +198,15 @@ class McMultipleFileUploadComponent {
         const fileExt = file.name.split('.').pop() || '';
         return this.acceptedFiles !== '*/*' && this.acceptedFiles.length > 0 ? this.acceptedFiles.includes(fileExt) : true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McMultipleFileUploadComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: MC_FILE_UPLOAD_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: McMultipleFileUploadComponent, selector: "mc-multiple-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", size: "size", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "mc-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["mcFileIcon"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"mc-file-upload\"\n     mcFileDrop\n     [class.disabled]=\"disabled\"\n     [class.selected]=\"files && files.length\"\n     [ngClass]=\"size\"\n     (filesDropped)=\"onFileDropped($event)\"\n>\n    <ng-container *ngIf=\"!files.length; else fileOutput\">\n        <div class=\"dropzone\">\n            <ng-container  *ngIf=\"size === 'default' else compactCaption\">\n                <i mc-icon=\"mc-upload-to-cloud_64\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <span class=\"multiple__caption\">\n                            {{ config.captionText }}\n                            <label class=\"mc-link\"\n                                   [class.mc-focused]=\"hasFocus\"\n                                   [for]=\"inputId\">\n                            {{ config.browseLink }}\n                        </label>\n                        </span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n\n\n    </ng-container>\n    <input #input\n           type=\"file\"\n           class=\"cdk-visually-hidden\"\n           multiple\n           [id]=\"inputId\"\n           [accept]=\"acceptedFiles\"\n           [disabled]=\"disabled\"\n           (change)=\"onFileSelectedViaClick($event)\"\n    >\n</div>\n\n<div class=\"mc-file-upload__info-section\">\n    <mc-hint class=\"mc-file-upload__hint\">\n        <ng-content select=\"[hint]\"></ng-content>\n    </mc-hint>\n\n    <ng-container *ngIf=\"hasErrors\">\n        <mc-hint class=\"mc-file-upload__hint mc-error\"\n                 *ngFor=\"let error of errors\">\n                {{ error }}\n        </mc-hint>\n    </ng-container>\n</div>\n\n<ng-template #fileOutput>\n    <div class=\"file-upload__dropzone\">\n        <div class=\"mc-file-upload__grid\">\n            <div class=\"mc-file-multiple-uploaded__header\">\n                <div class=\"mc-file-multiple-uploaded__header-inner\">\n                    <div [class]=\"'mc-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n                        {{ column.header }}\n                    </div>\n                </div>\n            </div>\n\n            <mc-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                <mc-list-option\n                    class=\"multiple__uploaded-item\"\n                    [value]=\"file.file.name\"\n                    (keydown.delete)=\"deleteFile(index)\"\n                    (keydown.backspace)=\"deleteFile(index)\"\n                    *ngFor=\"let file of files; let index = index;\">\n                    <div class=\"mc-file-upload__row\" [class.error]=\"file.hasError\">\n                        <div class=\"mc-file-upload__file\">\n                            <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n                                <ng-container *ngIf=\"!asyncData.loading\"\n                                              [ngTemplateOutlet]=\"$any(customFileIcon)\"\n                                              [ngTemplateOutletContext]=\"{ $implicit: file }\"\n                                >\n                                </ng-container>\n\n                                <mc-progress-spinner\n                                    class=\"pt-nat-file-upload-name-cell__icon\"\n                                    [value]=\"asyncData.progress || 0\"\n                                    *ngIf=\"asyncData.loading\"\n                                ></mc-progress-spinner>\n                            </ng-container>\n\n                            <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n                        </div>\n                        <div class=\"mc-file-upload__size\">\n                            {{ file.file.size | mcDataSize }}\n                        </div>\n                        <div class=\"mc-file-upload__action\">\n                            <i mc-icon=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n                        </div>\n                    </div>\n                </mc-list-option>\n            </mc-list-selection>\n        </div>\n\n        <div class=\"btn-upload\">\n            <div class=\"dropzone\">\n                <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ config.captionTextWhenSelected }}\n                    <label class=\"mc-link\"\n                           [class.mc-focused]=\"hasFocus\"\n                           [for]=\"inputId\">\n                        {{ config.browseLink }}\n                    </label>\n                </span>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #compactCaption>\n    <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n    <span class=\"dropzone__text multiple__caption\">\n        {{ config.captionText }}\n        <label class=\"mc-link\"\n               [class.mc-focused]=\"hasFocus\"\n               [for]=\"inputId\">\n        {{ config.browseLink }}\n    </label>\n    </span>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative;cursor:pointer}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{border-radius:var(--mc-file-upload-size-multiple-border-radius, 4px);border-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-style:var(--mc-file-upload-size-multiple-border-style, dashed)}.mc-file-upload.default{min-height:176px;justify-content:center}.mc-file-upload.compact:not(.selected){height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px}.mc-file-upload .mc-list-option{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px)}.mc-file-upload .mc-list-option .mc-icon{margin-right:0}.mc-file-upload .mc-file-upload__grid{min-height:144px}.mc-file-upload .mc-file-multiple-uploaded__header-inner,.mc-file-upload .mc-file-upload__row{display:flex;align-items:center}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{width:65%;max-width:65%}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__action{padding-left:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px);padding-right:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px)}.mc-file-upload .mc-file-upload__row .mc-file-upload__file{display:flex;align-items:center}.mc-file-upload .mc-file-upload__row .mc-file-upload__file .file-item__text{margin-left:0;width:90%}.mc-file-upload .mc-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.mc-file-upload .mc-file-multiple-uploaded__header-inner{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);border:2px solid transparent;border-bottom:unset;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px)}.mc-file-upload .btn-upload .dropzone{margin:0;border-top-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-top-style:var(--mc-file-upload-size-multiple-border-style, dashed);padding:4px 12px}.mc-file-upload .file-upload__dropzone{width:100%;height:100%}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i4.McIconCSSStyler, selector: "[mc-icon]" }, { kind: "component", type: i5.McListSelection, selector: "mc-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["mcListSelection"] }, { kind: "component", type: i5.McListOption, selector: "mc-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["mcListOption"] }, { kind: "directive", type: i6.McHint, selector: "mc-hint", inputs: ["color", "id"] }, { kind: "directive", type: i7.McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: McFileDropDirective, selector: "[mcFileDrop]", outputs: ["filesDropped"], exportAs: ["mcFileDrop"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.McDataSizePipe, name: "mcDataSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McMultipleFileUploadComponent, deps: [{ token: i0.Renderer2 }, { token: MC_FILE_UPLOAD_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: McMultipleFileUploadComponent, selector: "mc-multiple-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", size: "size", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "mc-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["mcFileIcon"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"mc-file-upload\"\n     mcFileDrop\n     [class.disabled]=\"disabled\"\n     [class.selected]=\"files && files.length\"\n     [ngClass]=\"size\"\n     (filesDropped)=\"onFileDropped($event)\"\n>\n    <ng-container *ngIf=\"!files.length; else fileOutput\">\n        <div class=\"dropzone\">\n            <ng-container  *ngIf=\"size === 'default' else compactCaption\">\n                <i mc-icon=\"mc-upload-to-cloud_64\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <span class=\"multiple__caption\">\n                            {{ config.captionText }}\n                            <label mc-link pseudo [tabIndex]=\"-1\" [for]=\"inputId\" [disabled]=\"disabled\">\n                                {{ config.browseLink }}\n                                <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n                            </label>\n                        </span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"mc-file-upload__info-section\">\n    <mc-hint class=\"mc-file-upload__hint\">\n        <ng-content select=\"[hint]\"></ng-content>\n    </mc-hint>\n\n    <ng-container *ngIf=\"hasErrors\">\n        <mc-hint class=\"mc-file-upload__hint mc-error\"\n                 *ngFor=\"let error of errors\">\n                {{ error }}\n        </mc-hint>\n    </ng-container>\n</div>\n\n<ng-template #fileOutput>\n    <div class=\"file-upload__dropzone\">\n        <div class=\"mc-file-upload__grid\">\n            <div class=\"mc-file-multiple-uploaded__header\">\n                <div class=\"mc-file-multiple-uploaded__header-inner\">\n                    <div [class]=\"'mc-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n                        {{ column.header }}\n                    </div>\n                </div>\n            </div>\n\n            <mc-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                <mc-list-option\n                    class=\"multiple__uploaded-item\"\n                    [value]=\"file.file.name\"\n                    (keydown.delete)=\"deleteFile(index)\"\n                    (keydown.backspace)=\"deleteFile(index)\"\n                    *ngFor=\"let file of files; let index = index;\">\n                    <div class=\"mc-file-upload__row\" [class.error]=\"file.hasError\">\n                        <div class=\"mc-file-upload__file\">\n                            <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n                                <ng-container *ngIf=\"!asyncData.loading\"\n                                              [ngTemplateOutlet]=\"$any(customFileIcon)\"\n                                              [ngTemplateOutletContext]=\"{ $implicit: file }\"\n                                >\n                                </ng-container>\n\n                                <mc-progress-spinner\n                                    class=\"pt-nat-file-upload-name-cell__icon\"\n                                    [value]=\"asyncData.progress || 0\"\n                                    *ngIf=\"asyncData.loading\"\n                                ></mc-progress-spinner>\n                            </ng-container>\n\n                            <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n                        </div>\n                        <div class=\"mc-file-upload__size\">\n                            {{ file.file.size | mcDataSize }}\n                        </div>\n                        <div class=\"mc-file-upload__action\">\n                            <i mc-icon=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n                        </div>\n                    </div>\n                </mc-list-option>\n            </mc-list-selection>\n        </div>\n\n        <div class=\"btn-upload\">\n            <div class=\"dropzone\">\n                <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ config.captionTextWhenSelected }}\n                    <label mc-link pseudo [tabIndex]=\"-1\" [for]=\"inputId\" [disabled]=\"disabled\">\n                        {{ config.browseLink }}\n                        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n                    </label>\n                </span>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #compactCaption>\n    <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n    <span class=\"dropzone__text multiple__caption\">\n        {{ config.captionText }}\n        <label mc-link pseudo [tabIndex]=\"-1\" [for]=\"inputId\" [disabled]=\"disabled\">\n            {{ config.browseLink }}\n            <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </label>\n    </span>\n</ng-template>\n\n<ng-template #inputTemplate>\n    <input #input\n           type=\"file\"\n           class=\"cdk-visually-hidden\"\n           multiple\n           [id]=\"inputId\"\n           [accept]=\"acceptedFiles\"\n           [disabled]=\"disabled\"\n           (change)=\"onFileSelectedViaClick($event)\">\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{border-radius:var(--mc-file-upload-size-multiple-border-radius, 4px);border-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-style:var(--mc-file-upload-size-multiple-border-style, dashed)}.mc-file-upload .mc-list-option{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);height:36px}.mc-file-upload .mc-list-option .mc-icon{margin-right:0}.mc-file-upload .mc-file-upload__grid{min-height:142px}.mc-file-upload .mc-file-multiple-uploaded__header-inner,.mc-file-upload .mc-file-upload__row{display:flex;align-items:center}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{width:65%;max-width:65%}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__action{padding-left:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px);padding-right:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px)}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{display:flex;align-items:center}.mc-file-upload .mc-file-upload__row .mc-file-upload__file .file-item__text{margin-left:0;width:90%}.mc-file-upload .mc-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.mc-file-upload .mc-file-multiple-uploaded__header-inner{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);border:2px solid transparent;border-bottom:unset;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px)}.mc-file-upload .btn-upload .dropzone{margin:0;border-top-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-top-style:var(--mc-file-upload-size-multiple-border-style, dashed);padding:3px 12px 4px}.mc-file-upload.compact:not(.selected){height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px}.mc-file-upload.compact .dropzone .dropzone__text{margin-left:6px}.mc-file-upload.default{min-height:176px;justify-content:center}.mc-file-upload.default .dropzone .dropzone__text{margin-left:16px}.mc-file-upload.default .btn-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .file-upload__dropzone{width:100%;height:100%}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i3.McIconCSSStyler, selector: "[mc-icon]" }, { kind: "component", type: i4.McListSelection, selector: "mc-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["mcListSelection"] }, { kind: "component", type: i4.McListOption, selector: "mc-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["mcListOption"] }, { kind: "directive", type: i5.McHint, selector: "mc-hint", inputs: ["color", "id"] }, { kind: "directive", type: i6.McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i7.McLink, selector: "[mc-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "caption", "useVisited", "print"], exportAs: ["mcLink"] }, { kind: "directive", type: McFileDropDirective, selector: "[mcFileDrop]", outputs: ["filesDropped"], exportAs: ["mcFileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.McDataSizePipe, name: "mcDataSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McMultipleFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mc-multiple-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'mc-multiple-file-upload'
-                    }, template: "<div class=\"mc-file-upload\"\n     mcFileDrop\n     [class.disabled]=\"disabled\"\n     [class.selected]=\"files && files.length\"\n     [ngClass]=\"size\"\n     (filesDropped)=\"onFileDropped($event)\"\n>\n    <ng-container *ngIf=\"!files.length; else fileOutput\">\n        <div class=\"dropzone\">\n            <ng-container  *ngIf=\"size === 'default' else compactCaption\">\n                <i mc-icon=\"mc-upload-to-cloud_64\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <span class=\"multiple__caption\">\n                            {{ config.captionText }}\n                            <label class=\"mc-link\"\n                                   [class.mc-focused]=\"hasFocus\"\n                                   [for]=\"inputId\">\n                            {{ config.browseLink }}\n                        </label>\n                        </span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n\n\n    </ng-container>\n    <input #input\n           type=\"file\"\n           class=\"cdk-visually-hidden\"\n           multiple\n           [id]=\"inputId\"\n           [accept]=\"acceptedFiles\"\n           [disabled]=\"disabled\"\n           (change)=\"onFileSelectedViaClick($event)\"\n    >\n</div>\n\n<div class=\"mc-file-upload__info-section\">\n    <mc-hint class=\"mc-file-upload__hint\">\n        <ng-content select=\"[hint]\"></ng-content>\n    </mc-hint>\n\n    <ng-container *ngIf=\"hasErrors\">\n        <mc-hint class=\"mc-file-upload__hint mc-error\"\n                 *ngFor=\"let error of errors\">\n                {{ error }}\n        </mc-hint>\n    </ng-container>\n</div>\n\n<ng-template #fileOutput>\n    <div class=\"file-upload__dropzone\">\n        <div class=\"mc-file-upload__grid\">\n            <div class=\"mc-file-multiple-uploaded__header\">\n                <div class=\"mc-file-multiple-uploaded__header-inner\">\n                    <div [class]=\"'mc-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n                        {{ column.header }}\n                    </div>\n                </div>\n            </div>\n\n            <mc-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                <mc-list-option\n                    class=\"multiple__uploaded-item\"\n                    [value]=\"file.file.name\"\n                    (keydown.delete)=\"deleteFile(index)\"\n                    (keydown.backspace)=\"deleteFile(index)\"\n                    *ngFor=\"let file of files; let index = index;\">\n                    <div class=\"mc-file-upload__row\" [class.error]=\"file.hasError\">\n                        <div class=\"mc-file-upload__file\">\n                            <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n                                <ng-container *ngIf=\"!asyncData.loading\"\n                                              [ngTemplateOutlet]=\"$any(customFileIcon)\"\n                                              [ngTemplateOutletContext]=\"{ $implicit: file }\"\n                                >\n                                </ng-container>\n\n                                <mc-progress-spinner\n                                    class=\"pt-nat-file-upload-name-cell__icon\"\n                                    [value]=\"asyncData.progress || 0\"\n                                    *ngIf=\"asyncData.loading\"\n                                ></mc-progress-spinner>\n                            </ng-container>\n\n                            <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n                        </div>\n                        <div class=\"mc-file-upload__size\">\n                            {{ file.file.size | mcDataSize }}\n                        </div>\n                        <div class=\"mc-file-upload__action\">\n                            <i mc-icon=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n                        </div>\n                    </div>\n                </mc-list-option>\n            </mc-list-selection>\n        </div>\n\n        <div class=\"btn-upload\">\n            <div class=\"dropzone\">\n                <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ config.captionTextWhenSelected }}\n                    <label class=\"mc-link\"\n                           [class.mc-focused]=\"hasFocus\"\n                           [for]=\"inputId\">\n                        {{ config.browseLink }}\n                    </label>\n                </span>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #compactCaption>\n    <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n    <span class=\"dropzone__text multiple__caption\">\n        {{ config.captionText }}\n        <label class=\"mc-link\"\n               [class.mc-focused]=\"hasFocus\"\n               [for]=\"inputId\">\n        {{ config.browseLink }}\n    </label>\n    </span>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative;cursor:pointer}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{border-radius:var(--mc-file-upload-size-multiple-border-radius, 4px);border-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-style:var(--mc-file-upload-size-multiple-border-style, dashed)}.mc-file-upload.default{min-height:176px;justify-content:center}.mc-file-upload.compact:not(.selected){height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px}.mc-file-upload .mc-list-option{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px)}.mc-file-upload .mc-list-option .mc-icon{margin-right:0}.mc-file-upload .mc-file-upload__grid{min-height:144px}.mc-file-upload .mc-file-multiple-uploaded__header-inner,.mc-file-upload .mc-file-upload__row{display:flex;align-items:center}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{width:65%;max-width:65%}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__action{padding-left:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px);padding-right:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px)}.mc-file-upload .mc-file-upload__row .mc-file-upload__file{display:flex;align-items:center}.mc-file-upload .mc-file-upload__row .mc-file-upload__file .file-item__text{margin-left:0;width:90%}.mc-file-upload .mc-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.mc-file-upload .mc-file-multiple-uploaded__header-inner{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);border:2px solid transparent;border-bottom:unset;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px)}.mc-file-upload .btn-upload .dropzone{margin:0;border-top-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-top-style:var(--mc-file-upload-size-multiple-border-style, dashed);padding:4px 12px}.mc-file-upload .file-upload__dropzone{width:100%;height:100%}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    }, template: "<div class=\"mc-file-upload\"\n     mcFileDrop\n     [class.disabled]=\"disabled\"\n     [class.selected]=\"files && files.length\"\n     [ngClass]=\"size\"\n     (filesDropped)=\"onFileDropped($event)\"\n>\n    <ng-container *ngIf=\"!files.length; else fileOutput\">\n        <div class=\"dropzone\">\n            <ng-container  *ngIf=\"size === 'default' else compactCaption\">\n                <i mc-icon=\"mc-upload-to-cloud_64\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <span class=\"multiple__caption\">\n                            {{ config.captionText }}\n                            <label mc-link pseudo [tabIndex]=\"-1\" [for]=\"inputId\" [disabled]=\"disabled\">\n                                {{ config.browseLink }}\n                                <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n                            </label>\n                        </span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"mc-file-upload__info-section\">\n    <mc-hint class=\"mc-file-upload__hint\">\n        <ng-content select=\"[hint]\"></ng-content>\n    </mc-hint>\n\n    <ng-container *ngIf=\"hasErrors\">\n        <mc-hint class=\"mc-file-upload__hint mc-error\"\n                 *ngFor=\"let error of errors\">\n                {{ error }}\n        </mc-hint>\n    </ng-container>\n</div>\n\n<ng-template #fileOutput>\n    <div class=\"file-upload__dropzone\">\n        <div class=\"mc-file-upload__grid\">\n            <div class=\"mc-file-multiple-uploaded__header\">\n                <div class=\"mc-file-multiple-uploaded__header-inner\">\n                    <div [class]=\"'mc-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n                        {{ column.header }}\n                    </div>\n                </div>\n            </div>\n\n            <mc-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                <mc-list-option\n                    class=\"multiple__uploaded-item\"\n                    [value]=\"file.file.name\"\n                    (keydown.delete)=\"deleteFile(index)\"\n                    (keydown.backspace)=\"deleteFile(index)\"\n                    *ngFor=\"let file of files; let index = index;\">\n                    <div class=\"mc-file-upload__row\" [class.error]=\"file.hasError\">\n                        <div class=\"mc-file-upload__file\">\n                            <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n                                <ng-container *ngIf=\"!asyncData.loading\"\n                                              [ngTemplateOutlet]=\"$any(customFileIcon)\"\n                                              [ngTemplateOutletContext]=\"{ $implicit: file }\"\n                                >\n                                </ng-container>\n\n                                <mc-progress-spinner\n                                    class=\"pt-nat-file-upload-name-cell__icon\"\n                                    [value]=\"asyncData.progress || 0\"\n                                    *ngIf=\"asyncData.loading\"\n                                ></mc-progress-spinner>\n                            </ng-container>\n\n                            <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n                        </div>\n                        <div class=\"mc-file-upload__size\">\n                            {{ file.file.size | mcDataSize }}\n                        </div>\n                        <div class=\"mc-file-upload__action\">\n                            <i mc-icon=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n                        </div>\n                    </div>\n                </mc-list-option>\n            </mc-list-selection>\n        </div>\n\n        <div class=\"btn-upload\">\n            <div class=\"dropzone\">\n                <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ config.captionTextWhenSelected }}\n                    <label mc-link pseudo [tabIndex]=\"-1\" [for]=\"inputId\" [disabled]=\"disabled\">\n                        {{ config.browseLink }}\n                        <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n                    </label>\n                </span>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #compactCaption>\n    <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n    <span class=\"dropzone__text multiple__caption\">\n        {{ config.captionText }}\n        <label mc-link pseudo [tabIndex]=\"-1\" [for]=\"inputId\" [disabled]=\"disabled\">\n            {{ config.browseLink }}\n            <ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container>\n        </label>\n    </span>\n</ng-template>\n\n<ng-template #inputTemplate>\n    <input #input\n           type=\"file\"\n           class=\"cdk-visually-hidden\"\n           multiple\n           [id]=\"inputId\"\n           [accept]=\"acceptedFiles\"\n           [disabled]=\"disabled\"\n           (change)=\"onFileSelectedViaClick($event)\">\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{border-radius:var(--mc-file-upload-size-multiple-border-radius, 4px);border-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-style:var(--mc-file-upload-size-multiple-border-style, dashed)}.mc-file-upload .mc-list-option{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);height:36px}.mc-file-upload .mc-list-option .mc-icon{margin-right:0}.mc-file-upload .mc-file-upload__grid{min-height:142px}.mc-file-upload .mc-file-multiple-uploaded__header-inner,.mc-file-upload .mc-file-upload__row{display:flex;align-items:center}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{width:65%;max-width:65%}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__file,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__size,.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file,.mc-file-upload .mc-file-upload__row .mc-file-upload__size,.mc-file-upload .mc-file-upload__row .mc-file-upload__action{padding-left:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px);padding-right:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px)}.mc-file-upload .mc-file-multiple-uploaded__header-inner .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__action,.mc-file-upload .mc-file-upload__row .mc-file-upload__file{display:flex;align-items:center}.mc-file-upload .mc-file-upload__row .mc-file-upload__file .file-item__text{margin-left:0;width:90%}.mc-file-upload .mc-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.mc-file-upload .mc-file-multiple-uploaded__header-inner{padding:var(--mc-file-upload-size-multiple-uploaded-item-horizontal-padding, 8px) var(--mc-file-upload-size-multiple-uploaded-item-vertical-padding, 8px);border:2px solid transparent;border-bottom:unset;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px)}.mc-file-upload .btn-upload .dropzone{margin:0;border-top-width:var(--mc-file-upload-size-multiple-border-width, 1px);border-top-style:var(--mc-file-upload-size-multiple-border-style, dashed);padding:3px 12px 4px}.mc-file-upload.compact:not(.selected){height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px}.mc-file-upload.compact .dropzone .dropzone__text{margin-left:6px}.mc-file-upload.default{min-height:176px;justify-content:center}.mc-file-upload.default .dropzone .dropzone__text{margin-left:16px}.mc-file-upload.default .btn-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .file-upload__dropzone{width:100%;height:100%}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -261,9 +244,7 @@ class McSingleFileUploadComponent {
     get acceptedFiles() {
         return this.accept && this.accept.length > 0 ? this.accept.map((ext) => `.${ext}`).join(',') : '*/*';
     }
-    constructor(focusMonitor, cdr, renderer, config) {
-        this.focusMonitor = focusMonitor;
-        this.cdr = cdr;
+    constructor(renderer, config) {
         this.renderer = renderer;
         this.config = config;
         this.disabled = false;
@@ -271,17 +252,8 @@ class McSingleFileUploadComponent {
         this.files = [];
         this.inputId = `mc-single-file-upload-${nextSingleFileUploadUniqueId++}`;
         this.fileQueueChanged = new EventEmitter();
-        this.hasFocus = false;
-        this.focusMonitorSubscription = Subscription.EMPTY;
         this.config = config || MC_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
     }
-    ngAfterViewInit() {
-        this.focusMonitorSubscription = this.focusMonitor.monitor(this.input)
-            .subscribe((origin) => this.onFocus(origin === 'keyboard'));
-    }
-    ngOnDestroy() {
-        this.focusMonitorSubscription.unsubscribe();
-    }
     onFileSelectedViaClick({ target }) {
         if (this.disabled) {
             return;
@@ -314,13 +286,6 @@ class McSingleFileUploadComponent {
             this.fileQueueChanged.emit(this.files[0]);
         }
     }
-    onFocus(focusState) {
-        if (this.disabled) {
-            return;
-        }
-        this.hasFocus = focusState;
-        this.cdr.markForCheck();
-    }
     mapToFileItem(file) {
         this.validateFile(file);
         return {
@@ -341,15 +306,15 @@ class McSingleFileUploadComponent {
         const fileExt = file.name.split('.').pop() || '';
         return this.acceptedFiles !== '*/*' && this.acceptedFiles.length > 0 ? this.acceptedFiles.includes(fileExt) : true;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McSingleFileUploadComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: MC_FILE_UPLOAD_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: McSingleFileUploadComponent, selector: "mc-single-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "mc-single-file-upload" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"mc-file-upload\"\n     mcFileDrop\n     [class.disabled]=\"disabled\"\n     [class.mc-error]=\"errors && errors.length\"\n     (filesDropped)=\"onFileDropped($event)\">\n        <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n            <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n            <span class=\"dropzone__text\">\n                {{ config.captionText }}\n                <label class=\"mc-link\"\n                       [class.mc-focused]=\"hasFocus\"\n                       [for]=\"inputId\">\n                {{ config.browseLink }}\n                </label>\n            </span>\n        </div>\n    <input #input\n           type=\"file\"\n           class=\"cdk-visually-hidden\"\n           [id]=\"inputId\"\n           [accept]=\"acceptedFiles\"\n           [disabled]=\"disabled\"\n           (change)=\"onFileSelectedViaClick($event)\"\n    >\n</div>\n<mc-hint class=\"mc-file-upload__hint\">\n    <ng-content select=\"[hint]\"></ng-content>\n</mc-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n    <mc-hint class=\"mc-file-upload__hint mc-error\" *ngFor=\"let error of errors\">{{ error }}</mc-hint>\n</ng-container>\n\n\n<ng-template #fileOutput>\n    <div class=\"file-item\" *ngIf=\"files && files.length\">\n        <div class=\"file-item__text-wrapper\">\n            <ng-container *ngIf=\"{ loading: files[0].loading | async, progress: files[0].progress | async} as asyncData\">\n                <ng-container *ngIf=\"!asyncData.loading\">\n                    <ng-content select=\"[mc-icon]\"></ng-content>\n                </ng-container>\n\n                <mc-progress-spinner\n                    [value]=\"asyncData.progress || 0\"\n                    *ngIf=\"asyncData.loading\"\n                ></mc-progress-spinner>\n            </ng-container>\n\n            <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n        </div>\n        <button mc-button\n                class=\"mc-button_transparent\"\n                [disabled]=\"disabled\"\n                (keydown.delete)=\"deleteItem()\"\n                (keydown.backspace)=\"deleteItem()\"\n                (click)=\"deleteItem($event)\">\n            <i mc-icon=\"mc-close-circle_16\"></i>\n        </button>\n    </div>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative;cursor:pointer}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px;border-radius:var(--mc-file-upload-size-single-border-radius, 4px);border-width:var(--mc-file-upload-size-single-border-width, 1px);border-style:var(--mc-file-upload-size-single-border-style, dashed)}.mc-file-upload .file-item{width:100%}.mc-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%}.mc-file-upload .file-item .file-item__text-wrapper .file-item__text{margin-left:8px;width:120px;flex-grow:1}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i4.McIconCSSStyler, selector: "[mc-icon]" }, { kind: "component", type: i5$1.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i5$1.McButtonCssStyler, selector: "[mc-button]" }, { kind: "directive", type: i6.McHint, selector: "mc-hint", inputs: ["color", "id"] }, { kind: "directive", type: i7.McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: McFileDropDirective, selector: "[mcFileDrop]", outputs: ["filesDropped"], exportAs: ["mcFileDrop"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McSingleFileUploadComponent, deps: [{ token: i0.Renderer2 }, { token: MC_FILE_UPLOAD_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: McSingleFileUploadComponent, selector: "mc-single-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "mc-single-file-upload" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"mc-file-upload\"\n     mcFileDrop\n     [class.disabled]=\"disabled\"\n     [class.mc-error]=\"errors && errors.length\"\n     (filesDropped)=\"onFileDropped($event)\">\n        <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n            <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n            <span class=\"dropzone__text\">\n                {{ config.captionText }}\n                <label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">\n                    {{ config.browseLink }}\n                    <input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\">\n                </label>\n            </span>\n        </div>\n</div>\n\n<mc-hint class=\"mc-file-upload__hint\">\n    <ng-content select=\"[hint]\"></ng-content>\n</mc-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n    <mc-hint class=\"mc-file-upload__hint mc-error\" *ngFor=\"let error of errors\">{{ error }}</mc-hint>\n</ng-container>\n\n\n<ng-template #fileOutput>\n    <div class=\"file-item\" *ngIf=\"files && files.length\">\n        <div class=\"file-item__text-wrapper\">\n            <ng-container *ngIf=\"{ loading: files[0].loading | async, progress: files[0].progress | async} as asyncData\">\n                <ng-container *ngIf=\"!asyncData.loading\">\n                    <ng-content select=\"[mc-icon]\"></ng-content>\n                </ng-container>\n\n                <mc-progress-spinner\n                    [value]=\"asyncData.progress || 0\"\n                    *ngIf=\"asyncData.loading\"\n                ></mc-progress-spinner>\n            </ng-container>\n\n            <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n        </div>\n        <button mc-button\n                class=\"mc-button_transparent\"\n                [disabled]=\"disabled\"\n                (keydown.delete)=\"deleteItem()\"\n                (keydown.backspace)=\"deleteItem()\"\n                (click)=\"deleteItem($event)\">\n            <i mc-icon=\"mc-close-circle_16\"></i>\n        </button>\n    </div>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px;border-radius:var(--mc-file-upload-size-single-border-radius, 4px);border-width:var(--mc-file-upload-size-single-border-width, 1px);border-style:var(--mc-file-upload-size-single-border-style, dashed)}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .file-item{width:100%}.mc-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%}.mc-file-upload .file-item .file-item__text-wrapper .file-item__text{margin-left:8px;width:120px;flex-grow:1}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.McIcon, selector: "[mc-icon]", inputs: ["color"] }, { kind: "directive", type: i3.McIconCSSStyler, selector: "[mc-icon]" }, { kind: "component", type: i4$1.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { kind: "directive", type: i4$1.McButtonCssStyler, selector: "[mc-button]" }, { kind: "directive", type: i5.McHint, selector: "mc-hint", inputs: ["color", "id"] }, { kind: "directive", type: i6.McEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i7.McLink, selector: "[mc-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "caption", "useVisited", "print"], exportAs: ["mcLink"] }, { kind: "directive", type: McFileDropDirective, selector: "[mcFileDrop]", outputs: ["filesDropped"], exportAs: ["mcFileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McSingleFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mc-single-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'mc-single-file-upload'
-                    }, template: "<div class=\"mc-file-upload\"\n     mcFileDrop\n     [class.disabled]=\"disabled\"\n     [class.mc-error]=\"errors && errors.length\"\n     (filesDropped)=\"onFileDropped($event)\">\n        <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n            <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n            <span class=\"dropzone__text\">\n                {{ config.captionText }}\n                <label class=\"mc-link\"\n                       [class.mc-focused]=\"hasFocus\"\n                       [for]=\"inputId\">\n                {{ config.browseLink }}\n                </label>\n            </span>\n        </div>\n    <input #input\n           type=\"file\"\n           class=\"cdk-visually-hidden\"\n           [id]=\"inputId\"\n           [accept]=\"acceptedFiles\"\n           [disabled]=\"disabled\"\n           (change)=\"onFileSelectedViaClick($event)\"\n    >\n</div>\n<mc-hint class=\"mc-file-upload__hint\">\n    <ng-content select=\"[hint]\"></ng-content>\n</mc-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n    <mc-hint class=\"mc-file-upload__hint mc-error\" *ngFor=\"let error of errors\">{{ error }}</mc-hint>\n</ng-container>\n\n\n<ng-template #fileOutput>\n    <div class=\"file-item\" *ngIf=\"files && files.length\">\n        <div class=\"file-item__text-wrapper\">\n            <ng-container *ngIf=\"{ loading: files[0].loading | async, progress: files[0].progress | async} as asyncData\">\n                <ng-container *ngIf=\"!asyncData.loading\">\n                    <ng-content select=\"[mc-icon]\"></ng-content>\n                </ng-container>\n\n                <mc-progress-spinner\n                    [value]=\"asyncData.progress || 0\"\n                    *ngIf=\"asyncData.loading\"\n                ></mc-progress-spinner>\n            </ng-container>\n\n            <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n        </div>\n        <button mc-button\n                class=\"mc-button_transparent\"\n                [disabled]=\"disabled\"\n                (keydown.delete)=\"deleteItem()\"\n                (keydown.backspace)=\"deleteItem()\"\n                (click)=\"deleteItem($event)\">\n            <i mc-icon=\"mc-close-circle_16\"></i>\n        </button>\n    </div>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative;cursor:pointer}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px;border-radius:var(--mc-file-upload-size-single-border-radius, 4px);border-width:var(--mc-file-upload-size-single-border-width, 1px);border-style:var(--mc-file-upload-size-single-border-style, dashed)}.mc-file-upload .file-item{width:100%}.mc-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%}.mc-file-upload .file-item .file-item__text-wrapper .file-item__text{margin-left:8px;width:120px;flex-grow:1}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    }, template: "<div class=\"mc-file-upload\"\n     mcFileDrop\n     [class.disabled]=\"disabled\"\n     [class.mc-error]=\"errors && errors.length\"\n     (filesDropped)=\"onFileDropped($event)\">\n        <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n            <i mc-icon=\"mc-upload-to-cloud_24\"></i>\n            <span class=\"dropzone__text\">\n                {{ config.captionText }}\n                <label mc-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">\n                    {{ config.browseLink }}\n                    <input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\">\n                </label>\n            </span>\n        </div>\n</div>\n\n<mc-hint class=\"mc-file-upload__hint\">\n    <ng-content select=\"[hint]\"></ng-content>\n</mc-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n    <mc-hint class=\"mc-file-upload__hint mc-error\" *ngFor=\"let error of errors\">{{ error }}</mc-hint>\n</ng-container>\n\n\n<ng-template #fileOutput>\n    <div class=\"file-item\" *ngIf=\"files && files.length\">\n        <div class=\"file-item__text-wrapper\">\n            <ng-container *ngIf=\"{ loading: files[0].loading | async, progress: files[0].progress | async} as asyncData\">\n                <ng-container *ngIf=\"!asyncData.loading\">\n                    <ng-content select=\"[mc-icon]\"></ng-content>\n                </ng-container>\n\n                <mc-progress-spinner\n                    [value]=\"asyncData.progress || 0\"\n                    *ngIf=\"asyncData.loading\"\n                ></mc-progress-spinner>\n            </ng-container>\n\n            <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n        </div>\n        <button mc-button\n                class=\"mc-button_transparent\"\n                [disabled]=\"disabled\"\n                (keydown.delete)=\"deleteItem()\"\n                (keydown.backspace)=\"deleteItem()\"\n                (click)=\"deleteItem($event)\">\n            <i mc-icon=\"mc-close-circle_16\"></i>\n        </button>\n    </div>\n</ng-template>\n", styles: ["@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.mc-file-upload .dropzone,.mc-file-upload .file-item{display:flex;align-items:center}.mc-file-upload .mc-ellipsis-center{position:relative;display:flex}.mc-file-upload .mc-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.mc-file-upload .mc-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes mc-progress{0%{background-position:0 0}to{background-position:29px 0}}.mc-progress{position:relative}.mc-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:mc-progress 1s linear infinite}.mc-group{display:flex;flex-direction:row}.mc-group .mc-group_justified>.mc-group-item{width:100%}.mc-group .mc-group-item+.mc-group-item{margin-left:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group{display:flex;flex-direction:column}.mc-vertical-group>.mc-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:first-child:not(:last-child)>.mc-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.mc-vertical-group>.mc-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--mc-button-size-border-radius, 4px)}.mc-vertical-group>.mc-group-item:last-child:not(:first-child)>.mc-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child){border-radius:0}.mc-vertical-group>.mc-group-item:not(:first-child):not(:last-child)>.mc-form-field__container{border-radius:0}.mc-vertical-group .mc-group-item+.mc-group-item{margin-top:calc(-1 * var(--mc-button-size-border-width, 1px))}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mc-file-upload{height:var(--mc-file-upload-size-single-height, 48px);padding-top:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-bottom:var(--mc-file-upload-size-single-vertical-padding, 12px);padding-left:12px;border-radius:var(--mc-file-upload-size-single-border-radius, 4px);border-width:var(--mc-file-upload-size-single-border-width, 1px);border-style:var(--mc-file-upload-size-single-border-style, dashed)}.mc-file-upload .dropzone .dropzone__text{margin-left:6px}.mc-file-upload .file-item{width:100%}.mc-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%}.mc-file-upload .file-item .file-item__text-wrapper .file-item__text{margin-left:8px;width:120px;flex-grow:1}.mc-hint{display:block}.mc-file-upload__hint{margin-top:var(--mc-form-field-hint-size-margin-top, 4px)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -385,7 +350,8 @@ class McFileUploadModule {
             McListModule,
             McFormFieldModule,
             McEllipsisCenterModule,
-            McDataSizeModule], exports: [McSingleFileUploadComponent,
+            McDataSizeModule,
+            McLinkModule], exports: [McSingleFileUploadComponent,
             McMultipleFileUploadComponent,
             McFileDropDirective] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McFileUploadModule, imports: [CommonModule,
@@ -396,7 +362,8 @@ class McFileUploadModule {
             McListModule,
             McFormFieldModule,
             McEllipsisCenterModule,
-            McDataSizeModule] }); }
+            McDataSizeModule,
+            McLinkModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: McFileUploadModule, decorators: [{
             type: NgModule,
@@ -410,7 +377,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         McListModule,
                         McFormFieldModule,
                         McEllipsisCenterModule,
-                        McDataSizeModule
+                        McDataSizeModule,
+                        McLinkModule
                     ],
                     declarations: [
                         McFileDropDirective,