@koobiq/components 17.0.0-beta.1 → 17.0.0-rc.1

package/fesm2022/koobiq-components-file-upload.mjs

@@ -1,26 +1,41 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, EventEmitter, Directive, Output, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, 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 { KbqButtonModule } from '@koobiq/components/button';
 import * as i9 from '@koobiq/components/core';
-import { KbqDataSizeModule } from '@koobiq/components/core';
-import * as i7 from '@koobiq/components/ellipsis-center';
+import { ruRULocaleData, KBQ_LOCALE_SERVICE, KbqDataSizeModule } from '@koobiq/components/core';
+import * as i6 from '@koobiq/components/ellipsis-center';
 import { KbqEllipsisCenterModule } from '@koobiq/components/ellipsis-center';
-import * as i6 from '@koobiq/components/form-field';
+import * as i5 from '@koobiq/components/form-field';
 import { KbqFormFieldModule } from '@koobiq/components/form-field';
-import * as i4 from '@koobiq/components/icon';
+import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i5 from '@koobiq/components/list';
+import * as i4 from '@koobiq/components/list';
 import { KbqListModule } from '@koobiq/components/list';
-import * as i3 from '@koobiq/components/progress-spinner';
+import * as i2 from '@koobiq/components/progress-spinner';
 import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
-import * as i1 from '@angular/cdk/a11y';
-import { Subscription, BehaviorSubject } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+import * as i7 from '@koobiq/components/link';
+import { KbqLinkModule } from '@koobiq/components/link';
 
 /* Object for labels customization inside file upload component */
 const KBQ_FILE_UPLOAD_CONFIGURATION = new InjectionToken('KbqFileUploadConfiguration');
+const isCorrectExtension = (file, accept) => {
+    if (!accept?.length) {
+        return true;
+    }
+    const { name, type } = file;
+    const fileExt = name.split('.').pop() || '';
+    for (const acceptedExtensionOrMimeType of accept) {
+        const typeAsRegExp = new RegExp(acceptedExtensionOrMimeType);
+        if (typeAsRegExp.test(fileExt) || typeAsRegExp.test(type)) {
+            return true;
+        }
+    }
+    return false;
+};
 
 const isFolderCanBeDragged = () => 'webkitGetAsEntry' in DataTransferItem.prototype;
 const entryIsDirectory = (entry) => !!entry && entry.isDirectory;
@@ -101,49 +116,44 @@ const unwrapDirectory = async (item) => {
 };
 
 let nextMultipleFileUploadUniqueId = 0;
-const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = {
-    captionText: 'Перетащите сюда или',
-    captionTextWhenSelected: 'Перетащите еще или',
-    captionTextForCompactSize: 'Перетащите файлы или',
-    browseLink: 'выберите',
-    title: 'Загрузите файлы',
-    gridHeaders: {
-        file: 'Файл',
-        size: 'Размер'
-    }
-};
+const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = ruRULocaleData.fileUpload.multiple;
 class KbqMultipleFileUploadComponent {
     get acceptedFiles() {
-        return this.accept && this.accept.length > 0 ? this.accept.map((ext) => `.${ext}`).join(',') : '*/*';
+        return this.accept?.join(',') || '*/*';
     }
     get hasErrors() {
         return this.errors && !!this.errors.length;
     }
-    constructor(focusMonitor, cdr, renderer, config) {
-        this.focusMonitor = focusMonitor;
+    constructor(cdr, renderer, configuration, localeService) {
         this.cdr = cdr;
         this.renderer = renderer;
-        this.config = config;
+        this.configuration = configuration;
+        this.localeService = localeService;
+        /**
+         * A value responsible for progress spinner type.
+         * Loading logic depends on selected mode */
+        this.progressMode = 'determinate';
         this.errors = [];
         this.files = [];
         this.size = 'default';
         this.inputId = `kbq-multiple-file-upload-${nextMultipleFileUploadUniqueId++}`;
         this.fileQueueChanged = new EventEmitter();
         this.hasFocus = false;
-        this.focusMonitorSubscription = Subscription.EMPTY;
-        this.config = config || KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
-        this.columnDefs = [
-            { header: this.config.gridHeaders.file, cssClass: 'file' },
-            { header: this.config.gridHeaders.size, cssClass: 'size' },
-            { header: '', cssClass: 'action' }
-        ];
-    }
-    ngAfterViewInit() {
-        this.focusMonitorSubscription = this.focusMonitor.monitor(this.input)
-            .subscribe((origin) => this.onFocus(origin === 'keyboard'));
-    }
-    ngOnDestroy() {
-        this.focusMonitorSubscription.unsubscribe();
+        this.updateLocaleParams = () => {
+            this.config = this.configuration || this.localeService?.getParams('fileUpload').multiple;
+            this.columnDefs = [
+                { header: this.config.gridHeaders.file, cssClass: 'file' },
+                { header: this.config.gridHeaders.size, cssClass: 'size' },
+                { header: '', cssClass: 'action' }
+            ];
+            this.getCaptionText();
+            this.cdr.markForCheck();
+        };
+        this.localeService?.changes
+            .subscribe(this.updateLocaleParams);
+        if (!localeService) {
+            this.initDefaultParams();
+        }
     }
     onFileSelectedViaClick({ target }) {
         if (this.disabled) {
@@ -177,19 +187,12 @@ class KbqMultipleFileUploadComponent {
     onFileListChange() {
         this.fileQueueChanged.emit(this.files);
     }
-    onFocus(focusState) {
-        if (this.disabled) {
-            return;
-        }
-        this.hasFocus = focusState;
-        this.cdr.markForCheck();
-    }
     mapToFileItem(files) {
         if (!files) {
             return [];
         }
         return Array.from(files)
-            .filter((file) => this.isCorrectExtension(file))
+            .filter((file) => isCorrectExtension(file, this.accept))
             .map((file) => ({
             file,
             hasError: this.validateFile(file),
@@ -198,36 +201,55 @@ class KbqMultipleFileUploadComponent {
         }));
     }
     validateFile(file) {
-        if (this.customValidation && this.customValidation.length) {
-            const errorsPerFile = this.customValidation.reduce((errors, validatorFn) => {
-                errors.push(validatorFn(file));
-                return errors;
-            }, []).filter(Boolean);
-            this.errors = [
-                ...this.errors,
-                ...errorsPerFile
-            ];
-            return !!errorsPerFile.length;
+        if (!this.customValidation?.length) {
+            return;
         }
+        const errorsPerFile = this.customValidation.reduce((errors, validatorFn) => {
+            errors.push(validatorFn(file));
+            return errors;
+        }, []).filter(Boolean);
+        this.errors = [
+            ...this.errors,
+            ...errorsPerFile
+        ];
+        return !!errorsPerFile.length;
     }
-    isCorrectExtension(file) {
-        const fileExt = file.name.split('.').pop() || '';
-        return this.acceptedFiles !== '*/*' && this.acceptedFiles.length > 0 ? this.acceptedFiles.includes(fileExt) : true;
+    initDefaultParams() {
+        this.config = KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
+        this.columnDefs = [
+            { header: this.config.gridHeaders.file, cssClass: 'file' },
+            { header: this.config.gridHeaders.size, cssClass: 'size' },
+            { header: '', cssClass: 'action' }
+        ];
+        this.getCaptionText();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqMultipleFileUploadComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: KBQ_FILE_UPLOAD_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqMultipleFileUploadComponent, selector: "kbq-multiple-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", size: "size", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "kbq-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["kbqFileIcon"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"kbq-file-upload\"\n     kbqFileDrop\n     [class.kbq-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 kbq-icon=\"mc-upload-to-cloud_32\"></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=\"kbq-link\"\n                                   [class.kbq-focused]=\"hasFocus\"\n                                   [for]=\"inputId\">\n                            {{ config.browseLink }}\n                        </label>\n                        </span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n\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</div>\n\n<div class=\"kbq-file-upload__info-section\">\n    <kbq-hint class=\"kbq-file-upload__hint\">\n        <ng-content select=\"[hint]\"></ng-content>\n    </kbq-hint>\n\n    <ng-container *ngIf=\"hasErrors\">\n        <kbq-hint class=\"kbq-file-upload__hint kbq-error\"\n                 *ngFor=\"let error of errors\">\n                {{ error }}\n        </kbq-hint>\n    </ng-container>\n</div>\n\n<ng-template #fileOutput>\n    <div class=\"file-upload__dropzone\">\n        <div class=\"kbq-file-upload__grid\">\n            <div class=\"kbq-file-multiple-uploaded__header\">\n                <div class=\"kbq-file-multiple-uploaded__header-inner\">\n                    <div [class]=\"'kbq-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n                        {{ column.header }}\n                    </div>\n                </div>\n            </div>\n\n            <kbq-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                <kbq-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=\"kbq-file-upload__row\" [class.error]=\"file.hasError\">\n                        <div class=\"kbq-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                                </ng-container>\n\n                                <kbq-progress-spinner\n                                    class=\"pt-nat-file-upload-name-cell__icon\"\n                                    [value]=\"asyncData.progress || 0\"\n                                    *ngIf=\"asyncData.loading\"\n                                ></kbq-progress-spinner>\n                            </ng-container>\n\n                            <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n                        </div>\n                        <div class=\"kbq-file-upload__size\">\n                            {{ file.file.size | mcDataSize }}\n                        </div>\n                        <div class=\"kbq-file-upload__action\">\n                            <i kbq-icon-button=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n                        </div>\n                    </div>\n                </kbq-list-option>\n            </kbq-list-selection>\n        </div>\n\n        <div class=\"btn-upload\">\n            <div class=\"dropzone\">\n                <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ config.captionTextWhenSelected }}\n                    <label class=\"kbq-link\"\n                           [class.kbq-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 kbq-icon=\"mc-upload-to-cloud_24\"></i>\n    <span class=\"dropzone__text multiple__caption\">\n        {{ config.captionText }}\n        <label class=\"kbq-link\"\n               [class.kbq-focused]=\"hasFocus\"\n               [for]=\"inputId\">\n        {{ config.browseLink }}\n    </label>\n    </span>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width, 1px);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px) var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height, 160px);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width, 320px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__caption{padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical, 4px);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical, 12px) var(--kbq-file-upload-size-single-container-padding-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__size,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) + 3px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) + 3px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - 1px) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - 1px);border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-hint{display:block}.kbq-file-upload__hint{margin-top:var(--kbq-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.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i4.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i5.KbqListSelection, selector: "kbq-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i5.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "component", type: i6.KbqHint, selector: "kbq-hint", inputs: ["color", "id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i7.KbqEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.KbqDataSizePipe, name: "mcDataSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    getCaptionText() {
+        this.separatedCaptionText = this.config.captionText.split('{{ browseLink }}');
+        this.separatedCaptionTextWhenSelected = this.config.captionTextWhenSelected.split('{{ browseLink }}');
+        this.separatedCaptionTextForCompactSize = this.config.captionTextForCompactSize
+            .split('{{ browseLink }}');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqMultipleFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: KBQ_FILE_UPLOAD_CONFIGURATION, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqMultipleFileUploadComponent, selector: "kbq-multiple-file-upload,kbq-file-upload[multiple]", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", files: "files", size: "size", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "kbq-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["kbqFileIcon"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"kbq-file-upload\"\n     kbqFileDrop\n     [class.kbq-disabled]=\"disabled\"\n     [class.selected]=\"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 kbq-icon=\"mc-upload-to-cloud_32\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <span class=\"multiple__caption\">\n                            {{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionText[1] }}\n                        </span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"kbq-file-upload__info-section\">\n    <kbq-hint class=\"kbq-file-upload__hint\">\n        <ng-content select=\"[hint]\"></ng-content>\n    </kbq-hint>\n\n    <ng-container *ngIf=\"hasErrors\">\n        <kbq-hint class=\"kbq-file-upload__hint kbq-error\"\n                 *ngFor=\"let error of errors\">\n                {{ error }}\n        </kbq-hint>\n    </ng-container>\n</div>\n\n<ng-template #fileOutput>\n    <div class=\"file-upload__dropzone\">\n        <div class=\"kbq-file-upload__grid\">\n            <div class=\"kbq-file-multiple-uploaded__header\">\n                <div class=\"kbq-file-multiple-uploaded__header-inner\">\n                    <div [class]=\"'kbq-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n                        {{ column.header }}\n                    </div>\n                </div>\n            </div>\n\n            <kbq-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                <kbq-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=\"kbq-file-upload__row\" [class.error]=\"file.hasError\">\n                        <div class=\"kbq-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                                </ng-container>\n\n                                <kbq-progress-spinner\n                                    class=\"kbq-file-upload-name-cell__icon\"\n                                    [mode]=\"progressMode\"\n                                    [value]=\"asyncData.progress || 0\"\n                                    *ngIf=\"asyncData.loading\"\n                                ></kbq-progress-spinner>\n                            </ng-container>\n\n                            <span class=\"file-item__text\" [kbqEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n                        </div>\n                        <div class=\"kbq-file-upload__size\">\n                            {{ file.file.size | kbqDataSize }}\n                        </div>\n                        <div class=\"kbq-file-upload__action\">\n                            <i kbq-icon-button=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n                        </div>\n                    </div>\n                </kbq-list-option>\n            </kbq-list-selection>\n        </div>\n\n        <div class=\"btn-upload\">\n            <div class=\"dropzone\">\n                <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ separatedCaptionTextWhenSelected[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionTextWhenSelected[1] }}\n                </span>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #compactCaption>\n    <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n    <span class=\"dropzone__text multiple__caption\">\n        {{ separatedCaptionTextForCompactSize[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionTextForCompactSize[1] }}\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 kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width, 1px);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px) var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height, 160px);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width, 320px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__caption{padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical, 4px);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical, 12px) var(--kbq-file-upload-size-single-container-padding-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__size,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) + 3px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) + 3px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - 1px) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - 1px);border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-hint{display:block}.kbq-file-upload__hint{margin-top:var(--kbq-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.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i4.KbqListSelection, selector: "kbq-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i4.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "component", type: i5.KbqHint, selector: "kbq-hint", inputs: ["color", "id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i6.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i7.KbqLink, selector: "[kbq-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.KbqDataSizePipe, name: "kbqDataSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqMultipleFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-multiple-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'kbq-multiple-file-upload,kbq-file-upload[multiple]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-multiple-file-upload'
-                    }, template: "<div class=\"kbq-file-upload\"\n     kbqFileDrop\n     [class.kbq-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 kbq-icon=\"mc-upload-to-cloud_32\"></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=\"kbq-link\"\n                                   [class.kbq-focused]=\"hasFocus\"\n                                   [for]=\"inputId\">\n                            {{ config.browseLink }}\n                        </label>\n                        </span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n\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</div>\n\n<div class=\"kbq-file-upload__info-section\">\n    <kbq-hint class=\"kbq-file-upload__hint\">\n        <ng-content select=\"[hint]\"></ng-content>\n    </kbq-hint>\n\n    <ng-container *ngIf=\"hasErrors\">\n        <kbq-hint class=\"kbq-file-upload__hint kbq-error\"\n                 *ngFor=\"let error of errors\">\n                {{ error }}\n        </kbq-hint>\n    </ng-container>\n</div>\n\n<ng-template #fileOutput>\n    <div class=\"file-upload__dropzone\">\n        <div class=\"kbq-file-upload__grid\">\n            <div class=\"kbq-file-multiple-uploaded__header\">\n                <div class=\"kbq-file-multiple-uploaded__header-inner\">\n                    <div [class]=\"'kbq-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n                        {{ column.header }}\n                    </div>\n                </div>\n            </div>\n\n            <kbq-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                <kbq-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=\"kbq-file-upload__row\" [class.error]=\"file.hasError\">\n                        <div class=\"kbq-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                                </ng-container>\n\n                                <kbq-progress-spinner\n                                    class=\"pt-nat-file-upload-name-cell__icon\"\n                                    [value]=\"asyncData.progress || 0\"\n                                    *ngIf=\"asyncData.loading\"\n                                ></kbq-progress-spinner>\n                            </ng-container>\n\n                            <span class=\"file-item__text\" [mcEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n                        </div>\n                        <div class=\"kbq-file-upload__size\">\n                            {{ file.file.size | mcDataSize }}\n                        </div>\n                        <div class=\"kbq-file-upload__action\">\n                            <i kbq-icon-button=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n                        </div>\n                    </div>\n                </kbq-list-option>\n            </kbq-list-selection>\n        </div>\n\n        <div class=\"btn-upload\">\n            <div class=\"dropzone\">\n                <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ config.captionTextWhenSelected }}\n                    <label class=\"kbq-link\"\n                           [class.kbq-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 kbq-icon=\"mc-upload-to-cloud_24\"></i>\n    <span class=\"dropzone__text multiple__caption\">\n        {{ config.captionText }}\n        <label class=\"kbq-link\"\n               [class.kbq-focused]=\"hasFocus\"\n               [for]=\"inputId\">\n        {{ config.browseLink }}\n    </label>\n    </span>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width, 1px);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px) var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height, 160px);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width, 320px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__caption{padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical, 4px);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical, 12px) var(--kbq-file-upload-size-single-container-padding-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__size,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) + 3px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) + 3px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - 1px) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - 1px);border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-hint{display:block}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    }, template: "<div class=\"kbq-file-upload\"\n     kbqFileDrop\n     [class.kbq-disabled]=\"disabled\"\n     [class.selected]=\"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 kbq-icon=\"mc-upload-to-cloud_32\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <span class=\"multiple__caption\">\n                            {{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionText[1] }}\n                        </span>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"kbq-file-upload__info-section\">\n    <kbq-hint class=\"kbq-file-upload__hint\">\n        <ng-content select=\"[hint]\"></ng-content>\n    </kbq-hint>\n\n    <ng-container *ngIf=\"hasErrors\">\n        <kbq-hint class=\"kbq-file-upload__hint kbq-error\"\n                 *ngFor=\"let error of errors\">\n                {{ error }}\n        </kbq-hint>\n    </ng-container>\n</div>\n\n<ng-template #fileOutput>\n    <div class=\"file-upload__dropzone\">\n        <div class=\"kbq-file-upload__grid\">\n            <div class=\"kbq-file-multiple-uploaded__header\">\n                <div class=\"kbq-file-multiple-uploaded__header-inner\">\n                    <div [class]=\"'kbq-file-upload__' + column.cssClass\" *ngFor=\"let column of columnDefs\">\n                        {{ column.header }}\n                    </div>\n                </div>\n            </div>\n\n            <kbq-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                <kbq-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=\"kbq-file-upload__row\" [class.error]=\"file.hasError\">\n                        <div class=\"kbq-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                                </ng-container>\n\n                                <kbq-progress-spinner\n                                    class=\"kbq-file-upload-name-cell__icon\"\n                                    [mode]=\"progressMode\"\n                                    [value]=\"asyncData.progress || 0\"\n                                    *ngIf=\"asyncData.loading\"\n                                ></kbq-progress-spinner>\n                            </ng-container>\n\n                            <span class=\"file-item__text\" [kbqEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></span>\n                        </div>\n                        <div class=\"kbq-file-upload__size\">\n                            {{ file.file.size | kbqDataSize }}\n                        </div>\n                        <div class=\"kbq-file-upload__action\">\n                            <i kbq-icon-button=\"mc-close-circle_16\" (click)=\"deleteFile(index, $event)\"></i>\n                        </div>\n                    </div>\n                </kbq-list-option>\n            </kbq-list-selection>\n        </div>\n\n        <div class=\"btn-upload\">\n            <div class=\"dropzone\">\n                <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ separatedCaptionTextWhenSelected[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionTextWhenSelected[1] }}\n                </span>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #compactCaption>\n    <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n    <span class=\"dropzone__text multiple__caption\">\n        {{ separatedCaptionTextForCompactSize[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\"></ng-container></label>{{ separatedCaptionTextForCompactSize[1] }}\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 kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width, 1px);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px) var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height, 160px);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width, 320px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__caption{padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical, 4px);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical, 12px) var(--kbq-file-upload-size-single-container-padding-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__size,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) + 3px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) + 3px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - 1px) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - 1px);border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-hint{display:block}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [KBQ_FILE_UPLOAD_CONFIGURATION]
-                }] }], propDecorators: { accept: [{
+                }] }, { type: i9.KbqLocaleService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_SERVICE]
+                }] }], propDecorators: { progressMode: [{
+                type: Input
+            }], accept: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -252,34 +274,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             }] } });
 
 let nextSingleFileUploadUniqueId = 0;
-const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = {
-    captionText: 'Перетащите файл или',
-    browseLink: 'выберите'
-};
+const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = ruRULocaleData.fileUpload.single;
 class KbqSingleFileUploadComponent {
     get acceptedFiles() {
-        return this.accept && this.accept.length > 0 ? this.accept.map((ext) => `.${ext}`).join(',') : '*/*';
+        return this.accept?.join(',') || '*/*';
     }
-    constructor(focusMonitor, cdr, renderer, config) {
-        this.focusMonitor = focusMonitor;
+    constructor(cdr, renderer, configuration, localeService) {
         this.cdr = cdr;
         this.renderer = renderer;
-        this.config = config;
+        this.configuration = configuration;
+        this.localeService = localeService;
+        /**
+         * A value responsible for progress spinner type.
+         * Loading logic depends on selected mode */
+        this.progressMode = 'determinate';
         this.disabled = false;
         this.errors = [];
-        this.files = [];
+        this.file = null;
         this.inputId = `kbq-single-file-upload-${nextSingleFileUploadUniqueId++}`;
-        this.fileQueueChanged = new EventEmitter();
-        this.hasFocus = false;
-        this.focusMonitorSubscription = Subscription.EMPTY;
-        this.config = config || KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
-    }
-    ngAfterViewInit() {
-        this.focusMonitorSubscription = this.focusMonitor.monitor(this.input)
-            .subscribe((origin) => this.onFocus(origin === 'keyboard'));
-    }
-    ngOnDestroy() {
-        this.focusMonitorSubscription.unsubscribe();
+        this.fileQueueChange = new EventEmitter();
+        this.updateLocaleParams = () => {
+            this.config = this.configuration || this.localeService?.getParams('fileUpload').multiple;
+            this.getCaptionText();
+            this.cdr.markForCheck();
+        };
+        this.localeService?.changes
+            .subscribe(this.updateLocaleParams);
+        if (!localeService) {
+            this.initDefaultParams();
+        }
     }
     onFileSelectedViaClick({ target }) {
         if (this.disabled) {
@@ -287,8 +310,8 @@ class KbqSingleFileUploadComponent {
         }
         const files = target.files;
         if (files?.length) {
-            this.files = [this.mapToFileItem(files[0])];
-            this.fileQueueChanged.emit(this.files[0]);
+            this.file = this.mapToFileItem(files[0]);
+            this.fileQueueChange.emit(this.file);
         }
         /* even if the user selects the same file,
          the onchange event will be triggered every time user clicks on the control.*/
@@ -299,73 +322,79 @@ class KbqSingleFileUploadComponent {
             return;
         }
         event?.stopPropagation();
-        this.files = [];
+        this.file = null;
+        this.fileQueueChange.emit(this.file);
         this.errors = [];
-        this.fileQueueChanged.emit(null);
     }
     onFileDropped(files) {
         if (this.disabled) {
             return;
         }
-        if (this.isCorrectExtension(files[0])) {
-            this.files = Array.from(files)
-                .map((file) => this.mapToFileItem(file));
-            this.fileQueueChanged.emit(this.files[0]);
+        if (isCorrectExtension(files[0], this.accept)) {
+            this.file = this.mapToFileItem(files[0]);
+            this.fileQueueChange.emit(this.file);
         }
     }
-    onFocus(focusState) {
-        if (this.disabled) {
-            return;
-        }
-        this.hasFocus = focusState;
-        this.cdr.markForCheck();
-    }
     mapToFileItem(file) {
-        this.validateFile(file);
         return {
             file,
+            hasError: this.validateFile(file),
             progress: new BehaviorSubject(0),
             loading: new BehaviorSubject(false)
         };
     }
     validateFile(file) {
-        if (this.customValidation && this.customValidation.length) {
-            this.errors = this.customValidation.reduce((errors, validatorFn) => {
-                errors.push(validatorFn(file));
-                return errors;
-            }, []).filter(Boolean);
+        if (!this.customValidation?.length) {
+            return;
         }
+        this.errors = this.customValidation
+            .reduce((errors, validatorFn) => {
+            errors.push(validatorFn(file));
+            return errors;
+        }, [])
+            .filter(Boolean);
+        return !!this.errors.length;
+    }
+    initDefaultParams() {
+        this.config = KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION;
+        this.getCaptionText();
     }
-    isCorrectExtension(file) {
-        const fileExt = file.name.split('.').pop() || '';
-        return this.acceptedFiles !== '*/*' && this.acceptedFiles.length > 0 ? this.acceptedFiles.includes(fileExt) : true;
+    getCaptionText() {
+        this.separatedCaptionText = this.config.captionText.split('{{ browseLink }}');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSingleFileUploadComponent, deps: [{ token: i1.FocusMonitor }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: KBQ_FILE_UPLOAD_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqSingleFileUploadComponent, selector: "kbq-single-file-upload", inputs: { accept: "accept", disabled: "disabled", errors: "errors", files: "files", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "kbq-single-file-upload" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"kbq-file-upload\"\n     kbqFileDrop\n     [class.kbq-disabled]=\"disabled\"\n     [class.kbq-error]=\"errors && errors.length\"\n     (filesDropped)=\"onFileDropped($event)\">\n        <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n            <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n            <span class=\"dropzone__text\">\n                {{ config.captionText }}\n                <label class=\"kbq-link\"\n                       [class.kbq-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</div>\n<kbq-hint class=\"kbq-file-upload__hint\">\n    <ng-content select=\"[hint]\"></ng-content>\n</kbq-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n    <kbq-hint class=\"kbq-file-upload__hint kbq-error\" *ngFor=\"let error of errors\">{{ error }}</kbq-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=\"[kbq-icon]\"></ng-content>\n                </ng-container>\n\n                <kbq-progress-spinner\n                    [value]=\"asyncData.progress || 0\"\n                    *ngIf=\"asyncData.loading\"\n                ></kbq-progress-spinner>\n            </ng-container>\n\n            <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n        </div>\n        <i kbq-icon-button=\"mc-close-circle_16\"\n           [color]=\"'contrast'\"\n           [disabled]=\"disabled\"\n           (keydown.delete)=\"deleteItem()\"\n           (keydown.backspace)=\"deleteItem()\"\n           (click)=\"deleteItem($event)\">\n        </i>\n    </div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - 1px) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - 1px);border-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-single-file-upload .kbq-file-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-hint{display:block}.kbq-file-upload__hint{margin-top:var(--kbq-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.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i4.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i6.KbqHint, selector: "kbq-hint", inputs: ["color", "id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i7.KbqEllipsisCenterDirective, selector: "[mcEllipsisCenter]", inputs: ["mcEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSingleFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: KBQ_FILE_UPLOAD_CONFIGURATION, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqSingleFileUploadComponent, selector: "kbq-single-file-upload,kbq-file-upload:not([multiple])", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", file: "file", inputId: "inputId", customValidation: "customValidation" }, outputs: { fileQueueChange: "fileQueueChange" }, host: { classAttribute: "kbq-single-file-upload" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div class=\"kbq-file-upload\"\n     kbqFileDrop\n     [class.kbq-disabled]=\"disabled\"\n     [class.kbq-error]=\"errors?.length\"\n     (filesDropped)=\"onFileDropped($event)\">\n\n    <div class=\"dropzone\" *ngIf=\"!file; else fileOutput\">\n        <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n        <span class=\"dropzone__text\">\n            {{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}\n        </span>\n    </div>\n</div>\n\n<kbq-hint class=\"kbq-file-upload__hint\">\n    <ng-content select=\"[hint]\"></ng-content>\n</kbq-hint>\n<ng-container *ngIf=\"errors?.length\">\n    <kbq-hint class=\"kbq-file-upload__hint kbq-error\" *ngFor=\"let error of errors\">{{ error }}</kbq-hint>\n</ng-container>\n\n<ng-template #fileOutput>\n    <div class=\"file-item\" *ngIf=\"file\">\n        <div class=\"file-item__text-wrapper\">\n            <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async} as asyncData\">\n                <ng-container *ngIf=\"!asyncData.loading\">\n                    <ng-content select=\"[kbq-icon]\"></ng-content>\n                </ng-container>\n\n                <kbq-progress-spinner\n                    [mode]=\"progressMode\"\n                    [value]=\"asyncData.progress || 0\"\n                    *ngIf=\"asyncData.loading\"\n                ></kbq-progress-spinner>\n            </ng-container>\n\n            <div class=\"file-item__text\" [kbqEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></div>\n        </div>\n        <i kbq-icon-button=\"mc-close-circle_16\"\n           [color]=\"'contrast'\"\n           [disabled]=\"disabled\"\n           (keydown.delete)=\"deleteItem()\"\n           (keydown.backspace)=\"deleteItem()\"\n           (click)=\"deleteItem($event)\">\n        </i>\n    </div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - 1px) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - 1px);border-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-single-file-upload .kbq-file-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-hint{display:block}.kbq-file-upload__hint{margin-top:var(--kbq-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.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i5.KbqHint, selector: "kbq-hint", inputs: ["color", "id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i6.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i7.KbqLink, selector: "[kbq-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSingleFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-single-file-upload', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'kbq-single-file-upload,kbq-file-upload:not([multiple])', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-single-file-upload'
-                    }, template: "<div class=\"kbq-file-upload\"\n     kbqFileDrop\n     [class.kbq-disabled]=\"disabled\"\n     [class.kbq-error]=\"errors && errors.length\"\n     (filesDropped)=\"onFileDropped($event)\">\n        <div class=\"dropzone\" *ngIf=\"!files.length; else fileOutput\">\n            <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n            <span class=\"dropzone__text\">\n                {{ config.captionText }}\n                <label class=\"kbq-link\"\n                       [class.kbq-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</div>\n<kbq-hint class=\"kbq-file-upload__hint\">\n    <ng-content select=\"[hint]\"></ng-content>\n</kbq-hint>\n<ng-container *ngIf=\"errors && errors.length\">\n    <kbq-hint class=\"kbq-file-upload__hint kbq-error\" *ngFor=\"let error of errors\">{{ error }}</kbq-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=\"[kbq-icon]\"></ng-content>\n                </ng-container>\n\n                <kbq-progress-spinner\n                    [value]=\"asyncData.progress || 0\"\n                    *ngIf=\"asyncData.loading\"\n                ></kbq-progress-spinner>\n            </ng-container>\n\n            <div class=\"file-item__text\" [mcEllipsisCenter]=\"files[0].file.name\" [minVisibleLength]=\"10\"></div>\n        </div>\n        <i kbq-icon-button=\"mc-close-circle_16\"\n           [color]=\"'contrast'\"\n           [disabled]=\"disabled\"\n           (keydown.delete)=\"deleteItem()\"\n           (keydown.backspace)=\"deleteItem()\"\n           (click)=\"deleteItem($event)\">\n        </i>\n    </div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - 1px) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - 1px);border-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-single-file-upload .kbq-file-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-hint{display:block}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    }, template: "<div class=\"kbq-file-upload\"\n     kbqFileDrop\n     [class.kbq-disabled]=\"disabled\"\n     [class.kbq-error]=\"errors?.length\"\n     (filesDropped)=\"onFileDropped($event)\">\n\n    <div class=\"dropzone\" *ngIf=\"!file; else fileOutput\">\n        <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n        <span class=\"dropzone__text\">\n            {{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}\n        </span>\n    </div>\n</div>\n\n<kbq-hint class=\"kbq-file-upload__hint\">\n    <ng-content select=\"[hint]\"></ng-content>\n</kbq-hint>\n<ng-container *ngIf=\"errors?.length\">\n    <kbq-hint class=\"kbq-file-upload__hint kbq-error\" *ngFor=\"let error of errors\">{{ error }}</kbq-hint>\n</ng-container>\n\n<ng-template #fileOutput>\n    <div class=\"file-item\" *ngIf=\"file\">\n        <div class=\"file-item__text-wrapper\">\n            <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async} as asyncData\">\n                <ng-container *ngIf=\"!asyncData.loading\">\n                    <ng-content select=\"[kbq-icon]\"></ng-content>\n                </ng-container>\n\n                <kbq-progress-spinner\n                    [mode]=\"progressMode\"\n                    [value]=\"asyncData.progress || 0\"\n                    *ngIf=\"asyncData.loading\"\n                ></kbq-progress-spinner>\n            </ng-container>\n\n            <div class=\"file-item__text\" [kbqEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></div>\n        </div>\n        <i kbq-icon-button=\"mc-close-circle_16\"\n           [color]=\"'contrast'\"\n           [disabled]=\"disabled\"\n           (keydown.delete)=\"deleteItem()\"\n           (keydown.backspace)=\"deleteItem()\"\n           (click)=\"deleteItem($event)\">\n        </i>\n    </div>\n</ng-template>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 10px,#ffffff0a 10px 20px,#0000000a 20px 30px,#ffffff0a 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - 1px) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - 1px);border-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 4px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-single-file-upload .kbq-file-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-hint{display:block}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [KBQ_FILE_UPLOAD_CONFIGURATION]
-                }] }], propDecorators: { accept: [{
+                }] }, { type: i9.KbqLocaleService, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KBQ_LOCALE_SERVICE]
+                }] }], propDecorators: { progressMode: [{
+                type: Input
+            }], accept: [{
                 type: Input
             }], disabled: [{
                 type: Input
             }], errors: [{
                 type: Input
-            }], files: [{
+            }], file: [{
                 type: Input
             }], inputId: [{
                 type: Input
             }], customValidation: [{
                 type: Input
-            }], fileQueueChanged: [{
+            }], fileQueueChange: [{
                 type: Output
             }], input: [{
                 type: ViewChild,
@@ -384,7 +413,8 @@ class KbqFileUploadModule {
             KbqListModule,
             KbqFormFieldModule,
             KbqEllipsisCenterModule,
-            KbqDataSizeModule], exports: [KbqSingleFileUploadComponent,
+            KbqDataSizeModule,
+            KbqLinkModule], exports: [KbqSingleFileUploadComponent,
             KbqMultipleFileUploadComponent,
             KbqFileDropDirective] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFileUploadModule, imports: [CommonModule,
@@ -395,7 +425,8 @@ class KbqFileUploadModule {
             KbqListModule,
             KbqFormFieldModule,
             KbqEllipsisCenterModule,
-            KbqDataSizeModule] }); }
+            KbqDataSizeModule,
+            KbqLinkModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFileUploadModule, decorators: [{
             type: NgModule,
@@ -409,7 +440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         KbqListModule,
                         KbqFormFieldModule,
                         KbqEllipsisCenterModule,
-                        KbqDataSizeModule
+                        KbqDataSizeModule,
+                        KbqLinkModule
                     ],
                     declarations: [
                         KbqFileDropDirective,
@@ -428,5 +460,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_FILE_UPLOAD_CONFIGURATION, KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KbqFileDropDirective, KbqFileUploadModule, KbqMultipleFileUploadComponent, KbqSingleFileUploadComponent };
+export { KBQ_FILE_UPLOAD_CONFIGURATION, KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KbqFileDropDirective, KbqFileUploadModule, KbqMultipleFileUploadComponent, KbqSingleFileUploadComponent, isCorrectExtension };
 //# sourceMappingURL=koobiq-components-file-upload.mjs.map