@koobiq/components 18.39.0 → 19.0.0

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

@@ -1,23 +1,18 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Output, InjectionToken, inject, ChangeDetectorRef, Renderer2, DestroyRef, ElementRef, input, PLATFORM_ID, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, ViewChild, ContentChildren, booleanAttribute, NgModule } from '@angular/core';
+import { EventEmitter, Output, Directive, input, model, booleanAttribute, inject, output, viewChild, computed, ChangeDetectionStrategy, Component, InjectionToken, ChangeDetectorRef, Renderer2, DestroyRef, ElementRef, PLATFORM_ID, TemplateRef, ContentChildren, ViewChild, ContentChild, Input, ViewEncapsulation, NgModule } from '@angular/core';
 import { NgControl, NgForm, FormGroupDirective, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i8 from '@koobiq/components/core';
 import { KBQ_LOCALE_SERVICE, ErrorStateMatcher, ruRULocaleData, KbqDataSizePipe } from '@koobiq/components/core';
 import { Subject, skip, BehaviorSubject } from 'rxjs';
-import * as i6 from '@angular/common';
-import { isPlatformBrowser, AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
+import { isPlatformBrowser, AsyncPipe, NgTemplateOutlet, NgClass } from '@angular/common';
 import { KbqButtonModule } from '@koobiq/components/button';
-import * as i4 from '@koobiq/components/ellipsis-center';
-import { KbqEllipsisCenterModule } from '@koobiq/components/ellipsis-center';
+import { KbqEllipsisCenterDirective, KbqEllipsisCenterModule } from '@koobiq/components/ellipsis-center';
 import { KbqHint, KbqFormFieldModule } from '@koobiq/components/form-field';
-import * as i2 from '@koobiq/components/icon';
-import { KbqIconModule } from '@koobiq/components/icon';
-import * as i5 from '@koobiq/components/link';
-import { KbqLinkModule } from '@koobiq/components/link';
-import * as i3 from '@koobiq/components/list';
+import { KbqIconButton, KbqIcon, KbqIconModule } from '@koobiq/components/icon';
+import { KbqLink, KbqLinkModule } from '@koobiq/components/link';
+import * as i2 from '@koobiq/components/list';
 import { KbqListModule } from '@koobiq/components/list';
-import * as i1 from '@koobiq/components/progress-spinner';
-import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
+import * as i3 from '@koobiq/components/progress-spinner';
+import { KbqProgressSpinnerModule, KbqProgressSpinner } from '@koobiq/components/progress-spinner';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
@@ -64,10 +59,10 @@ class KbqFileDropDirective {
                 .then((entries) => this.filesDropped.emit(entries));
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.kbq-file-drop_dragover": "dragover" }, classAttribute: "kbq-file-drop" }, exportAs: ["kbqFileDrop"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: KbqFileDropDirective, isStandalone: true, selector: "[kbqFileDrop]", outputs: { filesDropped: "filesDropped" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.kbq-file-drop_dragover": "dragover" }, classAttribute: "kbq-file-drop" }, exportAs: ["kbqFileDrop"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFileDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqFileDrop]',
@@ -108,6 +103,177 @@ const unwrapDirectory = async (item) => {
     return Promise.all(result);
 };
 
+/**
+ * File upload context.
+ */
+class KbqFileUploadContext {
+    constructor() {
+        /** id for file input */
+        this.id = input(null);
+        /** Whether file input selectable or not */
+        this.disabled = model(null);
+        /** Selection mode for file input */
+        this.multiple = input(null, { transform: booleanAttribute });
+        /** File type specifiers */
+        this.accept = input(null);
+        /**
+         * Reflects webkitdirectory attribute, which indicates that elements can only select directories instead of files.
+         */
+        this.onlyDirectory = input(null);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileUploadContext, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: KbqFileUploadContext, isStandalone: true, selector: "[kbqFileUploadContext]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, onlyDirectory: { classPropertyName: "onlyDirectory", publicName: "onlyDirectory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, exportAs: ["kbqFileUploadContext"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileUploadContext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqFileUploadContext]',
+                    exportAs: 'kbqFileUploadContext'
+                }]
+        }] });
+/**
+ * Loader component to trigger Browser API.
+ */
+class KbqFileLoader {
+    constructor() {
+        this.fileUploadContext = inject(KbqFileUploadContext, { optional: true });
+        /** Whether file input selectable or not */
+        this.disabled = input(false);
+        /** Selection mode for file input */
+        this.multiple = input(null);
+        /** File type specifiers */
+        this.accept = input(null);
+        /** id for file input  */
+        this.for = input(null);
+        /**
+         * Reflects webkitdirectory attribute,
+         * which indicates that elements can only select directories instead of files.
+         * @link [`HTMLInputElement: webkitdirectory property`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+         */
+        this.onlyDirectory = input(null);
+        /** Event fires when file selected in file-picker. */
+        this.fileChange = output();
+        /** Underlying file input element */
+        this.input = viewChild.required('input');
+        /** @docs-private */
+        this.innerDisabled = computed(() => this.fileUploadContext?.disabled() ?? this.disabled());
+        /** @docs-private */
+        this.innerMultiple = computed(() => this.fileUploadContext?.multiple() ?? this.multiple());
+        /** @docs-private */
+        this.innerAccept = computed(() => this.fileUploadContext?.accept() ?? this.accept());
+        /** @docs-private */
+        this.innerFor = computed(() => this.fileUploadContext?.id() ?? this.for());
+        /** @docs-private */
+        this.innerOnlyDirectory = computed(() => this.fileUploadContext?.onlyDirectory() ?? this.onlyDirectory());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.17", type: KbqFileLoader, isStandalone: true, selector: "[kbqFileLoader]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, onlyDirectory: { classPropertyName: "onlyDirectory", publicName: "onlyDirectory", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange" }, host: { classAttribute: "kbq-file-loader" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], exportAs: ["kbqFileLoader"], ngImport: i0, template: `
+        <ng-content />
+        <input
+            #input
+            tabindex="0"
+            type="file"
+            class="cdk-visually-hidden"
+            [attr.multiple]="innerMultiple()"
+            [attr.webkitdirectory]="innerOnlyDirectory()"
+            [accept]="innerAccept()"
+            [disabled]="innerDisabled()"
+            [id]="innerFor()"
+            (change)="fileChange.emit($event)"
+        />
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileLoader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kbqFileLoader]',
+                    exportAs: 'kbqFileLoader',
+                    template: `
+        <ng-content />
+        <input
+            #input
+            tabindex="0"
+            type="file"
+            class="cdk-visually-hidden"
+            [attr.multiple]="innerMultiple()"
+            [attr.webkitdirectory]="innerOnlyDirectory()"
+            [accept]="innerAccept()"
+            [disabled]="innerDisabled()"
+            [id]="innerFor()"
+            (change)="fileChange.emit($event)"
+        />
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'kbq-file-loader'
+                    }
+                }]
+        }] });
+/**
+ * Responsible for list update (add/remove)
+ */
+class KbqFileList {
+    constructor() {
+        /** Current list of items. */
+        this.list = model([]);
+        /**
+         * Emits an event containing a tuple of file and file's index when removed from the file list.
+         * Useful when handle removed files, skipping filtering file list.
+         */
+        this.itemRemoved = output();
+        /** Emits array of items that were added to the list. */
+        this.itemsAdded = output();
+    }
+    /** Adds a single item to the list and emits event */
+    add(item) {
+        this.update((current) => [...current, item]);
+        this.itemsAdded.emit([item]);
+    }
+    /** Adds multiple items to the list and emits event */
+    addArray(items) {
+        this.update((current) => [...current, ...items]);
+        this.itemsAdded.emit(items);
+    }
+    /** Removes the first occurrence of the specified item. Returns removed items and emits event. */
+    remove(item) {
+        const removed = [];
+        this.update((current) => current.filter((currentItem) => {
+            const isRemoved = currentItem !== item;
+            if (isRemoved) {
+                removed.push(currentItem);
+            }
+            return isRemoved;
+        }));
+        return removed;
+    }
+    /** Removes item at specified index. Returns removed items and emits event. */
+    removeAt(index) {
+        const removed = [];
+        this.update((current) => {
+            const removedItem = current.splice(index, 1);
+            removed.push(...removedItem);
+            return current;
+        });
+        this.itemRemoved.emit([removed[0], index]);
+        return removed;
+    }
+    update(fn) {
+        this.list.update(fn);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.17", type: KbqFileList, isStandalone: true, selector: "[kbqFileList]", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { list: "listChange", itemRemoved: "itemRemoved", itemsAdded: "itemsAdded" }, host: { classAttribute: "kbq-file-list" }, exportAs: ["kbqFileList"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kbqFileList]',
+                    exportAs: 'kbqFileList',
+                    host: {
+                        class: 'kbq-file-list'
+                    }
+                }]
+        }] });
+
 /* Object for labels customization inside file upload component */
 const KBQ_FILE_UPLOAD_CONFIGURATION = new InjectionToken('KbqFileUploadConfiguration');
 /** @deprecated use `FileValidators.isCorrectExtension` instead. Will be removed in next major release. */
@@ -137,6 +303,10 @@ class KbqFileUploadBase {
          */
         this.stateChanges = new Subject();
         /** @docs-private */
+        this.fileUploadContext = inject(KbqFileUploadContext, { host: true });
+        /** @docs-private */
+        this.fileList = inject(KbqFileList, { host: true });
+        /** @docs-private */
         this.cdr = inject(ChangeDetectorRef);
         /** @docs-private */
         this.renderer = inject(Renderer2);
@@ -155,6 +325,10 @@ class KbqFileUploadBase {
         /** @docs-private */
         this.elementRef = inject(ElementRef);
     }
+    /** @docs-private */
+    get disabled() {
+        return this.fileUploadContext.disabled() ?? false;
+    }
     /** implemented as part of base class. Decided not use mixinErrorState, not to overcomplicate
      * @docs-private */
     updateErrorState() {
@@ -180,12 +354,15 @@ const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = ruRULocaleData.fileUpload
 const fileSizeCellPadding = 16;
 class KbqMultipleFileUploadComponent extends KbqFileUploadBase {
     get files() {
-        return this._files;
+        return this.fileList.list();
     }
     set files(currentFileList) {
-        this._files = currentFileList;
-        this.cvaOnChange(this._files);
-        this.cdr.markForCheck();
+        this.fileList.list.set(currentFileList);
+        this.cvaOnChange(this.files);
+    }
+    /** @docs-private */
+    get input() {
+        return this.fileLoader?.input();
     }
     /** @docs-private */
     get acceptedFiles() {
@@ -231,7 +408,6 @@ class KbqMultipleFileUploadComponent extends KbqFileUploadBase {
          * custom ID for the file input element.
          */
         this.inputId = `kbq-multiple-file-upload-${nextMultipleFileUploadUniqueId++}`;
-        this._files = [];
         /** Optional configuration to override default labels with localized text.*/
         this.localeConfig = input();
         /** Emits an event containing updated file list.
@@ -326,52 +502,41 @@ class KbqMultipleFileUploadComponent extends KbqFileUploadBase {
      * @docs-private
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.fileUploadContext.disabled.set(isDisabled);
         this.cdr.markForCheck();
     }
     /** @docs-private */
     onFileSelectedViaClick({ target }) {
-        if (this.disabled) {
+        if (this.disabled)
             return;
-        }
         const filesToAdd = this.mapToFileItem(target.files);
-        this.files = [
-            ...this.files,
-            ...filesToAdd
-        ];
-        this.filesAdded.emit(filesToAdd);
-        this.filesChange.emit(this.files);
-        this.onTouched();
+        this.onFileAdded(filesToAdd);
         // allows the same file selection every time user clicks on the control.
         this.renderer.setProperty(target, 'value', null);
     }
     /** @docs-private */
     onFileDropped(files) {
-        if (this.disabled) {
+        if (this.disabled)
             return;
-        }
         const filesToAdd = this.mapToFileItem(files);
-        this.files = [
-            ...this.files,
-            ...filesToAdd
-        ];
-        this.filesAdded.emit(filesToAdd);
-        this.filesChange.emit(this.files);
-        this.onTouched();
+        this.onFileAdded(filesToAdd);
     }
     /** @docs-private */
-    deleteFile(index, event) {
+    deleteFile(index, event, origin) {
         if (this.disabled)
             return;
         event?.stopPropagation();
-        const removedFile = this.files.splice(index, 1)[0];
-        this.files = [...this.files];
+        const removedFile = this.fileList.removeAt(index)[0];
+        this.cvaOnChange(this.files);
         this.fileRemoved.emit([removedFile, index]);
         this.filesChange.emit(this.files);
         this.onTouched();
         if (this.files.length === 0) {
             setTimeout(() => {
-                this.focusMonitor.focusVia(this.input, 'keyboard');
+                const input = this.input?.nativeElement;
+                if (input) {
+                    this.focusMonitor.focusVia(input, origin ?? 'keyboard');
+                }
             });
             return;
         }
@@ -417,20 +582,43 @@ class KbqMultipleFileUploadComponent extends KbqFileUploadBase {
         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: "18.2.14", ngImport: i0, type: KbqMultipleFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqMultipleFileUploadComponent, selector: "kbq-multiple-file-upload,kbq-file-upload[multiple]", inputs: { progressMode: { classPropertyName: "progressMode", publicName: "progressMode", isSignal: false, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, customValidation: { classPropertyName: "customValidation", publicName: "customValidation", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, localeConfig: { classPropertyName: "localeConfig", publicName: "localeConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "fileQueueChanged", filesAdded: "filesAdded", fileRemoved: "fileRemoved" }, host: { classAttribute: "kbq-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["kbqFileIcon"], descendants: true, read: TemplateRef }, { propertyName: "hint", predicate: KbqHint }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "fileSizeHeaderCell", first: true, predicate: ["fileSizeHeaderCell"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"invalid\"\n    [class.kbq-selected]=\"files?.length\"\n    [class.kbq-file-upload_default]=\"size === 'default'\"\n    [class.kbq-file-upload_compact]=\"size === 'compact'\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!files.length) {\n        <div class=\"kbq-file-dropzone\">\n            @if (size === 'default') {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_32\" class=\"kbq-file-dropzone__icon\"></i>\n                <div class=\"kbq-file-dropzone__text\">\n                    <div class=\"kbq-file-multiple__header\">{{ config.title }}</div>\n                    <div>\n                        <!-- prettier-ignore -->\n                        <div class=\"kbq-file-multiple__caption\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\" /></label>{{ separatedCaptionText[1] }}</div>\n                    </div>\n                </div>\n            } @else {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n                <span class=\"kbq-file-dropzone__text kbq-file-multiple__caption\">\n                    {{ separatedCaptionTextForCompactSize[0] }}\n                    <label kbq-link pseudo [disabled]=\"disabled\" [for]=\"inputId\" [tabIndex]=\"-1\">\n                        {{ config.browseLink }}\n                        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n                    </label>\n                    {{ separatedCaptionTextForCompactSize[1] }}\n                </span>\n            }\n        </div>\n    } @else {\n        <div class=\"kbq-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 #fileSizeHeaderCell class=\"kbq-file-upload__file kbq-file-upload__grid-cell\">\n                            {{ config.gridHeaders.file }}\n                        </div>\n                        <div class=\"kbq-file-upload__size kbq-file-upload__grid-cell\">\n                            {{ config.gridHeaders.size }}\n                        </div>\n                        <div class=\"kbq-file-upload__action kbq-file-upload__grid-cell\"></div>\n                    </div>\n                </div>\n                <kbq-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                    @for (file of files; track file; let index = $index) {\n                        <kbq-list-option\n                            class=\"kbq-file-multiple__uploaded-item\"\n                            [value]=\"file.file.name\"\n                            (keydown.backspace)=\"deleteFile(index)\"\n                            (keydown.delete)=\"deleteFile(index)\"\n                        >\n                            <div class=\"kbq-file-upload__row\" [class.kbq-error]=\"file.hasError\">\n                                <div\n                                    class=\"kbq-file-upload__file kbq-file-upload__grid-cell\"\n                                    [style.max-width.px]=\"fileSizeCellMaxWidth\"\n                                >\n                                    @if (\n                                        { loading: file.loading | async, progress: file.progress | async };\n                                        as asyncData\n                                    ) {\n                                        @if (!asyncData.loading) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"$any(customFileIcon)\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: file }\"\n                                            />\n                                        }\n                                        @if (asyncData.loading) {\n                                            <kbq-progress-spinner\n                                                class=\"kbq-file-upload-name-cell__icon\"\n                                                [mode]=\"progressMode\"\n                                                [value]=\"asyncData.progress || 0\"\n                                            />\n                                        }\n                                    }\n                                    <span\n                                        class=\"kbq-file-item__text\"\n                                        [debounceInterval]=\"0\"\n                                        [kbqEllipsisCenter]=\"file.file.name\"\n                                    ></span>\n                                </div>\n                                <div class=\"kbq-file-upload__size kbq-file-upload__grid-cell\">\n                                    {{ file.file.size | kbqDataSize }}\n                                </div>\n                                <div\n                                    class=\"kbq-file-upload__action kbq-file-upload__grid-cell\"\n                                    (click)=\"deleteFile(index, $event)\"\n                                >\n                                    <i kbq-icon-button=\"kbq-xmark-circle_16\" tabindex=\"-1\" [disabled]=\"disabled\"></i>\n                                </div>\n                            </div>\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n            <div class=\"kbq-file-btn-upload\">\n                <div class=\"kbq-file-dropzone\">\n                    <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n                    <span class=\"kbq-file-dropzone__text kbq-file-multiple__caption\">\n                        {{ separatedCaptionTextWhenSelected[0] }}\n                        <label kbq-link pseudo [disabled]=\"disabled\" [for]=\"inputId\" [tabIndex]=\"-1\">\n                            {{ config.browseLink }}\n                            <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n                        </label>\n                        {{ separatedCaptionTextWhenSelected[1] }}\n                    </span>\n                </div>\n            </div>\n        </div>\n    }\n</div>\n\n@if (hasHint) {\n    <div class=\"kbq-file-upload__hint\">\n        <ng-content select=\"kbq-hint\" />\n    </div>\n}\n\n<ng-template #inputTemplate>\n    <input\n        #input\n        multiple\n        tabindex=\"0\"\n        type=\"file\"\n        class=\"cdk-visually-hidden\"\n        [accept]=\"acceptedFiles\"\n        [disabled]=\"disabled\"\n        [id]=\"inputId\"\n        (change)=\"onFileSelectedViaClick($event)\"\n    />\n</ng-template>\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .kbq-file-dropzone,.kbq-file-upload .kbq-file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-single-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-single-default-container-background);border-color:var(--kbq-file-upload-single-default-container-border)!important}.kbq-single-file-upload .kbq-file-upload .kbq-focused,.kbq-single-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-upload__action{color:var(--kbq-file-upload-single-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-default-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-default-left-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__size{color:var(--kbq-file-upload-single-default-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-single-states-on-drag-container-background);border-color:var(--kbq-file-upload-single-states-on-drag-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled):not(.kbq-file-drop_dragover){background-color:var(--kbq-file-upload-single-states-error-container-background);border-color:var(--kbq-file-upload-single-states-error-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-error-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-error-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text,.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__text:not(.kbq-link){color:var(--kbq-file-upload-single-states-error-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__size{color:var(--kbq-file-upload-single-states-error-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-error-icon-button-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-single-states-disabled-container-background);border-color:var(--kbq-file-upload-single-states-disabled-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-disabled-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-disabled-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text{color:var(--kbq-file-upload-single-states-disabled-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__size{color:var(--kbq-file-upload-single-states-disabled-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-multiple-default-container-background);border-color:var(--kbq-file-upload-multiple-default-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload .kbq-focused:not(.kbq-list-option),.kbq-multiple-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-default-container-border)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{color:var(--kbq-foreground-contrast-secondary);border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-default-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-multiple-states-on-drag-container-background);border-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-multiple-states-disabled-container-background);border-color:var(--kbq-file-upload-multiple-states-disabled-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-disabled-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-disabled-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error{background-color:var(--kbq-background-error-less);border-color:var(--kbq-line-error)!important}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-error-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__text:not(.kbq-link),.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error){background-color:var(--kbq-background-error-less)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__size{color:var(--kbq-foreground-error)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-default-file-size-text-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-icon-button-color)}:where(.kbq-file-upload__hint .kbq-hint){color:var(--kbq-foreground-contrast-secondary)}.kbq-file-upload,.kbq-single-file-upload .kbq-file-item__text-wrapper,.kbq-single-file-upload .kbq-file-dropzone__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__header{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__caption,.kbq-multiple-file-upload .kbq-file-multiple__caption .kbq-link,.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .kbq-file-multiple__uploaded-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ":where(.kbq-file-upload){--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-single-file-upload){--kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);--kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);--kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-single-min-height: var(--kbq-size-5xl);--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-multiple-file-upload){--kbq-file-upload-size-multiple-big-container-min-height: 192px;--kbq-file-upload-size-multiple-big-container-min-width: 320px;--kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);--kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);--kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-file-upload.kbq-file-upload_compact){--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;--kbq-file-upload-multiple-compact-container-padding-horizontal: 11px}\n", ".kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical) var(--kbq-file-upload-size-multiple-big-container-padding-vertical);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected) .kbq-file-dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected) .kbq-file-dropzone__text .kbq-file-multiple__caption{padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected){padding:var(--kbq-file-upload-multiple-compact-container-padding-vertical) var(--kbq-file-upload-multiple-compact-container-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected) .kbq-file-dropzone{gap:var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected) .kbq-file-dropzone .kbq-file-dropzone__text.kbq-file-multiple__caption{padding-top:var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);padding-bottom:var(--kbq-file-upload-multiple-compact-text-block-padding-vertical)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.kbq-file-multiple__uploaded-item{border-radius:0;padding:0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.kbq-file-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{flex-grow:1}.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:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);min-width:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);max-width:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);flex-grow:1;flex-shrink:1;text-align:left}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__grid-cell{padding:0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .kbq-file-item__text{width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__action{display:flex;justify-content:center;align-items:center;padding-top:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-size-3xs));padding-bottom:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(--kbq-size-3xs));min-height:var(--kbq-size-xxl);min-width:var(--kbq-size-xxl)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{margin:-1px;border-bottom-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-bottom-style:solid;padding:0 var(--kbq-size-xxs)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-upload__grid-cell{padding:10px var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) calc(10px - var(--kbq-file-upload-size-multiple-big-container-border-width)) var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-upload__action{min-height:var(--kbq-size-xxl);min-width:var(--kbq-size-xxl);padding:var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-file-upload-size-multiple-big-container-border-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{margin:-1px;padding:calc(var(--kbq-size-m) - var(--kbq-file-upload-size-multiple-big-container-border-width)) var(--kbq-size-m) var(--kbq-size-m) var(--kbq-size-m);border-top-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload .kbq-file-dropzone{gap:var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__dropzone{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: i1.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }, { kind: "component", type: i3.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i3.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "directive", type: i4.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength", "charWidth", "debounceInterval"] }, { kind: "directive", type: i5.KbqLink, selector: "[kbq-link]", inputs: ["disabled", "tabIndex", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i8.KbqDataSizePipe, name: "kbqDataSize" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    onFileAdded(filesToAdd) {
+        this.fileList.addArray(filesToAdd);
+        this.cvaOnChange(this.files);
+        this.filesAdded.emit(filesToAdd);
+        this.filesChange.emit(this.files);
+        this.onTouched();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqMultipleFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KbqMultipleFileUploadComponent, isStandalone: true, selector: "kbq-multiple-file-upload,kbq-file-upload[multiple]", inputs: { progressMode: { classPropertyName: "progressMode", publicName: "progressMode", isSignal: false, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, customValidation: { classPropertyName: "customValidation", publicName: "customValidation", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: false, isRequired: false, transformFunction: null }, localeConfig: { classPropertyName: "localeConfig", publicName: "localeConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "fileQueueChanged", filesAdded: "filesAdded", fileRemoved: "fileRemoved" }, host: { classAttribute: "kbq-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["kbqFileIcon"], descendants: true, read: TemplateRef }, { propertyName: "hint", predicate: KbqHint }], viewQueries: [{ propertyName: "fileLoader", first: true, predicate: KbqFileLoader, descendants: true }, { propertyName: "fileSizeHeaderCell", first: true, predicate: ["fileSizeHeaderCell"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: KbqFileUploadContext, inputs: ["id", "id", "disabled", "disabled", "onlyDirectory", "onlyDirectory"] }, { directive: KbqFileList, outputs: ["listChange", "filesChange", "itemsAdded", "itemsAdded", "itemRemoved", "itemRemoved"] }], ngImport: i0, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"invalid\"\n    [class.kbq-selected]=\"files.length\"\n    [class.kbq-file-upload_default]=\"size === 'default'\"\n    [class.kbq-file-upload_compact]=\"size === 'compact'\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!files.length) {\n        <div class=\"kbq-file-dropzone\">\n            @if (size === 'default') {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_32\" class=\"kbq-file-dropzone__icon\"></i>\n                <div class=\"kbq-file-dropzone__text\">\n                    <div class=\"kbq-file-multiple__header\">{{ config.title }}</div>\n                    <div>\n                        <!-- prettier-ignore -->\n                        <div class=\"kbq-file-multiple__caption\">{{ separatedCaptionText[0] }}<label kbq-link pseudo kbqFileLoader [accept]=\"acceptedFiles\" [disabled]=\"disabled\" [for]=\"fileUploadContext.id() || inputId\" [tabIndex]=\"-1\" [multiple]=\"true\" (fileChange)=\"onFileSelectedViaClick($event)\">{{ config.browseLink }}</label>{{ separatedCaptionText[1] }}</div>\n                    </div>\n                </div>\n            } @else {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n                <span class=\"kbq-file-dropzone__text kbq-file-multiple__caption\">\n                    {{ separatedCaptionTextForCompactSize[0] }}\n                    <label\n                        kbq-link\n                        pseudo\n                        kbqFileLoader\n                        [for]=\"fileUploadContext.id() || inputId\"\n                        [multiple]=\"true\"\n                        [accept]=\"acceptedFiles\"\n                        [disabled]=\"disabled\"\n                        [tabIndex]=\"-1\"\n                        (fileChange)=\"onFileSelectedViaClick($event)\"\n                    >\n                        {{ config.browseLink }}\n                    </label>\n                    {{ separatedCaptionTextForCompactSize[1] }}\n                </span>\n            }\n        </div>\n    } @else {\n        <div class=\"kbq-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 #fileSizeHeaderCell class=\"kbq-file-upload__file kbq-file-upload__grid-cell\">\n                            {{ config.gridHeaders.file }}\n                        </div>\n                        <div class=\"kbq-file-upload__size kbq-file-upload__grid-cell\">\n                            {{ config.gridHeaders.size }}\n                        </div>\n                        <div class=\"kbq-file-upload__action kbq-file-upload__grid-cell\"></div>\n                    </div>\n                </div>\n                <kbq-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                    @for (file of files; track file) {\n                        <kbq-list-option\n                            class=\"kbq-file-multiple__uploaded-item\"\n                            [value]=\"file.file.name\"\n                            (keydown.backspace)=\"deleteFile($index)\"\n                            (keydown.delete)=\"deleteFile($index)\"\n                        >\n                            <div class=\"kbq-file-upload__row\" [class.kbq-error]=\"file.hasError\">\n                                <div\n                                    class=\"kbq-file-upload__file kbq-file-upload__grid-cell\"\n                                    [style.max-width.px]=\"fileSizeCellMaxWidth\"\n                                >\n                                    @if (\n                                        { loading: file.loading | async, progress: file.progress | async };\n                                        as asyncData\n                                    ) {\n                                        @if (!asyncData.loading) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"$any(customFileIcon)\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: file }\"\n                                            />\n                                        }\n                                        @if (asyncData.loading) {\n                                            <kbq-progress-spinner\n                                                class=\"kbq-file-upload-name-cell__icon\"\n                                                [mode]=\"progressMode\"\n                                                [value]=\"asyncData.progress || 0\"\n                                            />\n                                        }\n                                    }\n                                    <span\n                                        class=\"kbq-file-item__text\"\n                                        [debounceInterval]=\"0\"\n                                        [kbqEllipsisCenter]=\"file.file.name\"\n                                    ></span>\n                                </div>\n                                <div class=\"kbq-file-upload__size kbq-file-upload__grid-cell\">\n                                    {{ file.file.size | kbqDataSize }}\n                                </div>\n                                <div\n                                    class=\"kbq-file-upload__action kbq-file-upload__grid-cell\"\n                                    (click)=\"deleteFile($index, $event, 'program')\"\n                                >\n                                    <i kbq-icon-button=\"kbq-circle-xmark_16\" tabindex=\"-1\" [disabled]=\"disabled\"></i>\n                                </div>\n                            </div>\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n            <div class=\"kbq-file-btn-upload\">\n                <div class=\"kbq-file-dropzone\">\n                    <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n                    <span class=\"kbq-file-dropzone__text kbq-file-multiple__caption\">\n                        {{ separatedCaptionTextWhenSelected[0] }}\n                        <label\n                            kbq-link\n                            pseudo\n                            kbqFileLoader\n                            [multiple]=\"true\"\n                            [accept]=\"acceptedFiles\"\n                            [for]=\"fileUploadContext.id() || inputId\"\n                            [disabled]=\"disabled\"\n                            [tabIndex]=\"-1\"\n                            (fileChange)=\"onFileSelectedViaClick($event)\"\n                        >\n                            {{ config.browseLink }}\n                        </label>\n                        {{ separatedCaptionTextWhenSelected[1] }}\n                    </span>\n                </div>\n            </div>\n        </div>\n    }\n</div>\n\n@if (hasHint) {\n    <div class=\"kbq-file-upload__hint\">\n        <ng-content select=\"kbq-hint\" />\n    </div>\n}\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .kbq-file-dropzone,.kbq-file-upload .kbq-file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-single-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-single-default-container-background);border-color:var(--kbq-file-upload-single-default-container-border)!important}.kbq-single-file-upload .kbq-file-upload .kbq-focused,.kbq-single-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-upload__action{color:var(--kbq-file-upload-single-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-default-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-default-left-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__size{color:var(--kbq-file-upload-single-default-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-single-states-on-drag-container-background);border-color:var(--kbq-file-upload-single-states-on-drag-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled):not(.kbq-file-drop_dragover){background-color:var(--kbq-file-upload-single-states-error-container-background);border-color:var(--kbq-file-upload-single-states-error-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-error-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-error-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text,.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__text:not(.kbq-link){color:var(--kbq-file-upload-single-states-error-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__size{color:var(--kbq-file-upload-single-states-error-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-error-icon-button-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-single-states-disabled-container-background);border-color:var(--kbq-file-upload-single-states-disabled-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-disabled-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-disabled-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text{color:var(--kbq-file-upload-single-states-disabled-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__size{color:var(--kbq-file-upload-single-states-disabled-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-multiple-default-container-background);border-color:var(--kbq-file-upload-multiple-default-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload .kbq-focused:not(.kbq-list-option),.kbq-multiple-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-default-container-border)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{color:var(--kbq-foreground-contrast-secondary);border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-default-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-multiple-states-on-drag-container-background);border-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-multiple-states-disabled-container-background);border-color:var(--kbq-file-upload-multiple-states-disabled-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-disabled-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-disabled-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error{background-color:var(--kbq-background-error-less);border-color:var(--kbq-line-error)!important}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-error-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__text:not(.kbq-link),.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error){background-color:var(--kbq-background-error-less)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__size{color:var(--kbq-foreground-error)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-default-file-size-text-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-icon-button-color)}:where(.kbq-file-upload__hint .kbq-hint){color:var(--kbq-foreground-contrast-secondary)}.kbq-file-upload,.kbq-single-file-upload .kbq-file-item__text-wrapper,.kbq-single-file-upload .kbq-file-dropzone__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__header{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__caption,.kbq-multiple-file-upload .kbq-file-multiple__caption .kbq-link,.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .kbq-file-multiple__uploaded-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ":where(.kbq-file-upload){--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-single-file-upload){--kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);--kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);--kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-single-min-height: var(--kbq-size-5xl);--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-multiple-file-upload){--kbq-file-upload-size-multiple-big-container-min-height: 192px;--kbq-file-upload-size-multiple-big-container-min-width: 320px;--kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);--kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);--kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-file-upload.kbq-file-upload_compact){--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;--kbq-file-upload-multiple-compact-container-padding-horizontal: 11px}\n", ".kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical) var(--kbq-file-upload-size-multiple-big-container-padding-vertical);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected) .kbq-file-dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected) .kbq-file-dropzone__text .kbq-file-multiple__caption{padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected){padding:var(--kbq-file-upload-multiple-compact-container-padding-vertical) var(--kbq-file-upload-multiple-compact-container-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected) .kbq-file-dropzone{gap:var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected) .kbq-file-dropzone .kbq-file-dropzone__text.kbq-file-multiple__caption{padding-top:var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);padding-bottom:var(--kbq-file-upload-multiple-compact-text-block-padding-vertical)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.kbq-file-multiple__uploaded-item{border-radius:0;padding:0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.kbq-file-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{flex-grow:1}.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:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);min-width:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);max-width:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);flex-grow:1;flex-shrink:1;text-align:left}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__grid-cell{padding:0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .kbq-file-item__text{width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__action{display:flex;justify-content:center;align-items:center;padding-top:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-size-3xs));padding-bottom:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(--kbq-size-3xs));min-height:var(--kbq-size-xxl);min-width:var(--kbq-size-xxl)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{margin:-1px;border-bottom-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-bottom-style:solid;padding:0 var(--kbq-size-xxs)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-upload__grid-cell{padding:10px var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) calc(10px - var(--kbq-file-upload-size-multiple-big-container-border-width)) var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-upload__action{min-height:var(--kbq-size-xxl);min-width:var(--kbq-size-xxl);padding:var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-file-upload-size-multiple-big-container-border-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{margin:-1px;padding:calc(var(--kbq-size-m) - var(--kbq-file-upload-size-multiple-big-container-border-width)) var(--kbq-size-m) var(--kbq-size-m) var(--kbq-size-m);border-top-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload .kbq-file-dropzone{gap:var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__dropzone{width:100%;height:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "component", type: KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqLink, selector: "[kbq-link]", inputs: ["disabled", "tabIndex", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "ngmodule", type: KbqListModule }, { kind: "component", type: i2.KbqListSelection, selector: "kbq-list-selection", inputs: ["autoSelect", "noUnselectLast", "horizontal", "tabIndex", "disabled", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i2.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "pipe", type: KbqDataSizePipe, name: "kbqDataSize" }, { kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i3.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "directive", type: KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength", "charWidth", "debounceInterval"] }, { kind: "component", type: KbqFileLoader, selector: "[kbqFileLoader]", inputs: ["disabled", "multiple", "accept", "for", "onlyDirectory"], outputs: ["fileChange"], exportAs: ["kbqFileLoader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqMultipleFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqMultipleFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-multiple-file-upload,kbq-file-upload[multiple]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'kbq-multiple-file-upload,kbq-file-upload[multiple]', imports: [
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                        KbqFileDropDirective,
+                        KbqIconButton,
+                        KbqIcon,
+                        KbqLink,
+                        KbqListModule,
+                        KbqDataSizePipe,
+                        KbqProgressSpinnerModule,
+                        KbqEllipsisCenterDirective,
+                        KbqFileLoader
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq-multiple-file-upload'
-                    }, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"invalid\"\n    [class.kbq-selected]=\"files?.length\"\n    [class.kbq-file-upload_default]=\"size === 'default'\"\n    [class.kbq-file-upload_compact]=\"size === 'compact'\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!files.length) {\n        <div class=\"kbq-file-dropzone\">\n            @if (size === 'default') {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_32\" class=\"kbq-file-dropzone__icon\"></i>\n                <div class=\"kbq-file-dropzone__text\">\n                    <div class=\"kbq-file-multiple__header\">{{ config.title }}</div>\n                    <div>\n                        <!-- prettier-ignore -->\n                        <div class=\"kbq-file-multiple__caption\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\" /></label>{{ separatedCaptionText[1] }}</div>\n                    </div>\n                </div>\n            } @else {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n                <span class=\"kbq-file-dropzone__text kbq-file-multiple__caption\">\n                    {{ separatedCaptionTextForCompactSize[0] }}\n                    <label kbq-link pseudo [disabled]=\"disabled\" [for]=\"inputId\" [tabIndex]=\"-1\">\n                        {{ config.browseLink }}\n                        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n                    </label>\n                    {{ separatedCaptionTextForCompactSize[1] }}\n                </span>\n            }\n        </div>\n    } @else {\n        <div class=\"kbq-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 #fileSizeHeaderCell class=\"kbq-file-upload__file kbq-file-upload__grid-cell\">\n                            {{ config.gridHeaders.file }}\n                        </div>\n                        <div class=\"kbq-file-upload__size kbq-file-upload__grid-cell\">\n                            {{ config.gridHeaders.size }}\n                        </div>\n                        <div class=\"kbq-file-upload__action kbq-file-upload__grid-cell\"></div>\n                    </div>\n                </div>\n                <kbq-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                    @for (file of files; track file; let index = $index) {\n                        <kbq-list-option\n                            class=\"kbq-file-multiple__uploaded-item\"\n                            [value]=\"file.file.name\"\n                            (keydown.backspace)=\"deleteFile(index)\"\n                            (keydown.delete)=\"deleteFile(index)\"\n                        >\n                            <div class=\"kbq-file-upload__row\" [class.kbq-error]=\"file.hasError\">\n                                <div\n                                    class=\"kbq-file-upload__file kbq-file-upload__grid-cell\"\n                                    [style.max-width.px]=\"fileSizeCellMaxWidth\"\n                                >\n                                    @if (\n                                        { loading: file.loading | async, progress: file.progress | async };\n                                        as asyncData\n                                    ) {\n                                        @if (!asyncData.loading) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"$any(customFileIcon)\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: file }\"\n                                            />\n                                        }\n                                        @if (asyncData.loading) {\n                                            <kbq-progress-spinner\n                                                class=\"kbq-file-upload-name-cell__icon\"\n                                                [mode]=\"progressMode\"\n                                                [value]=\"asyncData.progress || 0\"\n                                            />\n                                        }\n                                    }\n                                    <span\n                                        class=\"kbq-file-item__text\"\n                                        [debounceInterval]=\"0\"\n                                        [kbqEllipsisCenter]=\"file.file.name\"\n                                    ></span>\n                                </div>\n                                <div class=\"kbq-file-upload__size kbq-file-upload__grid-cell\">\n                                    {{ file.file.size | kbqDataSize }}\n                                </div>\n                                <div\n                                    class=\"kbq-file-upload__action kbq-file-upload__grid-cell\"\n                                    (click)=\"deleteFile(index, $event)\"\n                                >\n                                    <i kbq-icon-button=\"kbq-xmark-circle_16\" tabindex=\"-1\" [disabled]=\"disabled\"></i>\n                                </div>\n                            </div>\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n            <div class=\"kbq-file-btn-upload\">\n                <div class=\"kbq-file-dropzone\">\n                    <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n                    <span class=\"kbq-file-dropzone__text kbq-file-multiple__caption\">\n                        {{ separatedCaptionTextWhenSelected[0] }}\n                        <label kbq-link pseudo [disabled]=\"disabled\" [for]=\"inputId\" [tabIndex]=\"-1\">\n                            {{ config.browseLink }}\n                            <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n                        </label>\n                        {{ separatedCaptionTextWhenSelected[1] }}\n                    </span>\n                </div>\n            </div>\n        </div>\n    }\n</div>\n\n@if (hasHint) {\n    <div class=\"kbq-file-upload__hint\">\n        <ng-content select=\"kbq-hint\" />\n    </div>\n}\n\n<ng-template #inputTemplate>\n    <input\n        #input\n        multiple\n        tabindex=\"0\"\n        type=\"file\"\n        class=\"cdk-visually-hidden\"\n        [accept]=\"acceptedFiles\"\n        [disabled]=\"disabled\"\n        [id]=\"inputId\"\n        (change)=\"onFileSelectedViaClick($event)\"\n    />\n</ng-template>\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .kbq-file-dropzone,.kbq-file-upload .kbq-file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-single-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-single-default-container-background);border-color:var(--kbq-file-upload-single-default-container-border)!important}.kbq-single-file-upload .kbq-file-upload .kbq-focused,.kbq-single-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-upload__action{color:var(--kbq-file-upload-single-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-default-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-default-left-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__size{color:var(--kbq-file-upload-single-default-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-single-states-on-drag-container-background);border-color:var(--kbq-file-upload-single-states-on-drag-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled):not(.kbq-file-drop_dragover){background-color:var(--kbq-file-upload-single-states-error-container-background);border-color:var(--kbq-file-upload-single-states-error-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-error-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-error-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text,.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__text:not(.kbq-link){color:var(--kbq-file-upload-single-states-error-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__size{color:var(--kbq-file-upload-single-states-error-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-error-icon-button-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-single-states-disabled-container-background);border-color:var(--kbq-file-upload-single-states-disabled-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-disabled-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-disabled-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text{color:var(--kbq-file-upload-single-states-disabled-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__size{color:var(--kbq-file-upload-single-states-disabled-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-multiple-default-container-background);border-color:var(--kbq-file-upload-multiple-default-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload .kbq-focused:not(.kbq-list-option),.kbq-multiple-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-default-container-border)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{color:var(--kbq-foreground-contrast-secondary);border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-default-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-multiple-states-on-drag-container-background);border-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-multiple-states-disabled-container-background);border-color:var(--kbq-file-upload-multiple-states-disabled-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-disabled-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-disabled-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error{background-color:var(--kbq-background-error-less);border-color:var(--kbq-line-error)!important}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-error-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__text:not(.kbq-link),.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error){background-color:var(--kbq-background-error-less)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__size{color:var(--kbq-foreground-error)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-default-file-size-text-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-icon-button-color)}:where(.kbq-file-upload__hint .kbq-hint){color:var(--kbq-foreground-contrast-secondary)}.kbq-file-upload,.kbq-single-file-upload .kbq-file-item__text-wrapper,.kbq-single-file-upload .kbq-file-dropzone__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__header{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__caption,.kbq-multiple-file-upload .kbq-file-multiple__caption .kbq-link,.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .kbq-file-multiple__uploaded-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ":where(.kbq-file-upload){--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-single-file-upload){--kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);--kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);--kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-single-min-height: var(--kbq-size-5xl);--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-multiple-file-upload){--kbq-file-upload-size-multiple-big-container-min-height: 192px;--kbq-file-upload-size-multiple-big-container-min-width: 320px;--kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);--kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);--kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-file-upload.kbq-file-upload_compact){--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;--kbq-file-upload-multiple-compact-container-padding-horizontal: 11px}\n", ".kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical) var(--kbq-file-upload-size-multiple-big-container-padding-vertical);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected) .kbq-file-dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected) .kbq-file-dropzone__text .kbq-file-multiple__caption{padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected){padding:var(--kbq-file-upload-multiple-compact-container-padding-vertical) var(--kbq-file-upload-multiple-compact-container-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected) .kbq-file-dropzone{gap:var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected) .kbq-file-dropzone .kbq-file-dropzone__text.kbq-file-multiple__caption{padding-top:var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);padding-bottom:var(--kbq-file-upload-multiple-compact-text-block-padding-vertical)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.kbq-file-multiple__uploaded-item{border-radius:0;padding:0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.kbq-file-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{flex-grow:1}.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:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);min-width:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);max-width:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);flex-grow:1;flex-shrink:1;text-align:left}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__grid-cell{padding:0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .kbq-file-item__text{width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__action{display:flex;justify-content:center;align-items:center;padding-top:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-size-3xs));padding-bottom:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(--kbq-size-3xs));min-height:var(--kbq-size-xxl);min-width:var(--kbq-size-xxl)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{margin:-1px;border-bottom-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-bottom-style:solid;padding:0 var(--kbq-size-xxs)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-upload__grid-cell{padding:10px var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) calc(10px - var(--kbq-file-upload-size-multiple-big-container-border-width)) var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-upload__action{min-height:var(--kbq-size-xxl);min-width:var(--kbq-size-xxl);padding:var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-file-upload-size-multiple-big-container-border-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{margin:-1px;padding:calc(var(--kbq-size-m) - var(--kbq-file-upload-size-multiple-big-container-border-width)) var(--kbq-size-m) var(--kbq-size-m) var(--kbq-size-m);border-top-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload .kbq-file-dropzone{gap:var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__dropzone{width:100%;height:100%}\n"] }]
+                    }, hostDirectives: [
+                        {
+                            directive: KbqFileUploadContext,
+                            inputs: ['id', 'disabled', 'onlyDirectory']
+                        },
+                        { directive: KbqFileList, outputs: ['listChange: filesChange', 'itemsAdded', 'itemRemoved'] }
+                    ], template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"invalid\"\n    [class.kbq-selected]=\"files.length\"\n    [class.kbq-file-upload_default]=\"size === 'default'\"\n    [class.kbq-file-upload_compact]=\"size === 'compact'\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!files.length) {\n        <div class=\"kbq-file-dropzone\">\n            @if (size === 'default') {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_32\" class=\"kbq-file-dropzone__icon\"></i>\n                <div class=\"kbq-file-dropzone__text\">\n                    <div class=\"kbq-file-multiple__header\">{{ config.title }}</div>\n                    <div>\n                        <!-- prettier-ignore -->\n                        <div class=\"kbq-file-multiple__caption\">{{ separatedCaptionText[0] }}<label kbq-link pseudo kbqFileLoader [accept]=\"acceptedFiles\" [disabled]=\"disabled\" [for]=\"fileUploadContext.id() || inputId\" [tabIndex]=\"-1\" [multiple]=\"true\" (fileChange)=\"onFileSelectedViaClick($event)\">{{ config.browseLink }}</label>{{ separatedCaptionText[1] }}</div>\n                    </div>\n                </div>\n            } @else {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n                <span class=\"kbq-file-dropzone__text kbq-file-multiple__caption\">\n                    {{ separatedCaptionTextForCompactSize[0] }}\n                    <label\n                        kbq-link\n                        pseudo\n                        kbqFileLoader\n                        [for]=\"fileUploadContext.id() || inputId\"\n                        [multiple]=\"true\"\n                        [accept]=\"acceptedFiles\"\n                        [disabled]=\"disabled\"\n                        [tabIndex]=\"-1\"\n                        (fileChange)=\"onFileSelectedViaClick($event)\"\n                    >\n                        {{ config.browseLink }}\n                    </label>\n                    {{ separatedCaptionTextForCompactSize[1] }}\n                </span>\n            }\n        </div>\n    } @else {\n        <div class=\"kbq-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 #fileSizeHeaderCell class=\"kbq-file-upload__file kbq-file-upload__grid-cell\">\n                            {{ config.gridHeaders.file }}\n                        </div>\n                        <div class=\"kbq-file-upload__size kbq-file-upload__grid-cell\">\n                            {{ config.gridHeaders.size }}\n                        </div>\n                        <div class=\"kbq-file-upload__action kbq-file-upload__grid-cell\"></div>\n                    </div>\n                </div>\n                <kbq-list-selection [autoSelect]=\"false\" [disabled]=\"disabled\">\n                    @for (file of files; track file) {\n                        <kbq-list-option\n                            class=\"kbq-file-multiple__uploaded-item\"\n                            [value]=\"file.file.name\"\n                            (keydown.backspace)=\"deleteFile($index)\"\n                            (keydown.delete)=\"deleteFile($index)\"\n                        >\n                            <div class=\"kbq-file-upload__row\" [class.kbq-error]=\"file.hasError\">\n                                <div\n                                    class=\"kbq-file-upload__file kbq-file-upload__grid-cell\"\n                                    [style.max-width.px]=\"fileSizeCellMaxWidth\"\n                                >\n                                    @if (\n                                        { loading: file.loading | async, progress: file.progress | async };\n                                        as asyncData\n                                    ) {\n                                        @if (!asyncData.loading) {\n                                            <ng-container\n                                                [ngTemplateOutlet]=\"$any(customFileIcon)\"\n                                                [ngTemplateOutletContext]=\"{ $implicit: file }\"\n                                            />\n                                        }\n                                        @if (asyncData.loading) {\n                                            <kbq-progress-spinner\n                                                class=\"kbq-file-upload-name-cell__icon\"\n                                                [mode]=\"progressMode\"\n                                                [value]=\"asyncData.progress || 0\"\n                                            />\n                                        }\n                                    }\n                                    <span\n                                        class=\"kbq-file-item__text\"\n                                        [debounceInterval]=\"0\"\n                                        [kbqEllipsisCenter]=\"file.file.name\"\n                                    ></span>\n                                </div>\n                                <div class=\"kbq-file-upload__size kbq-file-upload__grid-cell\">\n                                    {{ file.file.size | kbqDataSize }}\n                                </div>\n                                <div\n                                    class=\"kbq-file-upload__action kbq-file-upload__grid-cell\"\n                                    (click)=\"deleteFile($index, $event, 'program')\"\n                                >\n                                    <i kbq-icon-button=\"kbq-circle-xmark_16\" tabindex=\"-1\" [disabled]=\"disabled\"></i>\n                                </div>\n                            </div>\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n            <div class=\"kbq-file-btn-upload\">\n                <div class=\"kbq-file-dropzone\">\n                    <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n                    <span class=\"kbq-file-dropzone__text kbq-file-multiple__caption\">\n                        {{ separatedCaptionTextWhenSelected[0] }}\n                        <label\n                            kbq-link\n                            pseudo\n                            kbqFileLoader\n                            [multiple]=\"true\"\n                            [accept]=\"acceptedFiles\"\n                            [for]=\"fileUploadContext.id() || inputId\"\n                            [disabled]=\"disabled\"\n                            [tabIndex]=\"-1\"\n                            (fileChange)=\"onFileSelectedViaClick($event)\"\n                        >\n                            {{ config.browseLink }}\n                        </label>\n                        {{ separatedCaptionTextWhenSelected[1] }}\n                    </span>\n                </div>\n            </div>\n        </div>\n    }\n</div>\n\n@if (hasHint) {\n    <div class=\"kbq-file-upload__hint\">\n        <ng-content select=\"kbq-hint\" />\n    </div>\n}\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .kbq-file-dropzone,.kbq-file-upload .kbq-file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-single-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-single-default-container-background);border-color:var(--kbq-file-upload-single-default-container-border)!important}.kbq-single-file-upload .kbq-file-upload .kbq-focused,.kbq-single-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-upload__action{color:var(--kbq-file-upload-single-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-default-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-default-left-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__size{color:var(--kbq-file-upload-single-default-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-single-states-on-drag-container-background);border-color:var(--kbq-file-upload-single-states-on-drag-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled):not(.kbq-file-drop_dragover){background-color:var(--kbq-file-upload-single-states-error-container-background);border-color:var(--kbq-file-upload-single-states-error-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-error-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-error-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text,.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__text:not(.kbq-link){color:var(--kbq-file-upload-single-states-error-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__size{color:var(--kbq-file-upload-single-states-error-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-error-icon-button-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-single-states-disabled-container-background);border-color:var(--kbq-file-upload-single-states-disabled-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-disabled-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-disabled-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text{color:var(--kbq-file-upload-single-states-disabled-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__size{color:var(--kbq-file-upload-single-states-disabled-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-multiple-default-container-background);border-color:var(--kbq-file-upload-multiple-default-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload .kbq-focused:not(.kbq-list-option),.kbq-multiple-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-default-container-border)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{color:var(--kbq-foreground-contrast-secondary);border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-default-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-multiple-states-on-drag-container-background);border-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-multiple-states-disabled-container-background);border-color:var(--kbq-file-upload-multiple-states-disabled-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-disabled-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-disabled-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error{background-color:var(--kbq-background-error-less);border-color:var(--kbq-line-error)!important}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-error-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__text:not(.kbq-link),.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error){background-color:var(--kbq-background-error-less)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__size{color:var(--kbq-foreground-error)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-default-file-size-text-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-icon-button-color)}:where(.kbq-file-upload__hint .kbq-hint){color:var(--kbq-foreground-contrast-secondary)}.kbq-file-upload,.kbq-single-file-upload .kbq-file-item__text-wrapper,.kbq-single-file-upload .kbq-file-dropzone__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__header{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__caption,.kbq-multiple-file-upload .kbq-file-multiple__caption .kbq-link,.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .kbq-file-multiple__uploaded-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ":where(.kbq-file-upload){--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-single-file-upload){--kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);--kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);--kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-single-min-height: var(--kbq-size-5xl);--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-multiple-file-upload){--kbq-file-upload-size-multiple-big-container-min-height: 192px;--kbq-file-upload-size-multiple-big-container-min-width: 320px;--kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);--kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);--kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-file-upload.kbq-file-upload_compact){--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;--kbq-file-upload-multiple-compact-container-padding-horizontal: 11px}\n", ".kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical) var(--kbq-file-upload-size-multiple-big-container-padding-vertical);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected) .kbq-file-dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_default:not(.kbq-selected) .kbq-file-dropzone__text .kbq-file-multiple__caption{padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected){padding:var(--kbq-file-upload-multiple-compact-container-padding-vertical) var(--kbq-file-upload-multiple-compact-container-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected) .kbq-file-dropzone{gap:var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-upload_compact:not(.kbq-selected) .kbq-file-dropzone .kbq-file-dropzone__text.kbq-file-multiple__caption{padding-top:var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);padding-bottom:var(--kbq-file-upload-multiple-compact-text-block-padding-vertical)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.kbq-file-multiple__uploaded-item{border-radius:0;padding:0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.kbq-file-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{flex-grow:1}.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:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);min-width:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);max-width:var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);flex-grow:1;flex-shrink:1;text-align:left}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__grid-cell{padding:0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .kbq-file-item__text{width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__action{display:flex;justify-content:center;align-items:center;padding-top:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-size-3xs));padding-bottom:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(--kbq-size-3xs));min-height:var(--kbq-size-xxl);min-width:var(--kbq-size-xxl)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{margin:-1px;border-bottom-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-bottom-style:solid;padding:0 var(--kbq-size-xxs)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-upload__grid-cell{padding:10px var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) calc(10px - var(--kbq-file-upload-size-multiple-big-container-border-width)) var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-upload__action{min-height:var(--kbq-size-xxl);min-width:var(--kbq-size-xxl);padding:var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-file-upload-size-multiple-big-container-border-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{margin:-1px;padding:calc(var(--kbq-size-m) - var(--kbq-file-upload-size-multiple-big-container-border-width)) var(--kbq-size-m) var(--kbq-size-m) var(--kbq-size-m);border-top-width:var(--kbq-file-upload-size-multiple-big-container-border-width);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload .kbq-file-dropzone{gap:var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__dropzone{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { progressMode: [{
                 type: Input
             }], accept: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], errors: [{
                 type: Input
             }], size: [{
@@ -453,9 +641,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], customFileIcon: [{
                 type: ContentChild,
                 args: ['kbqFileIcon', { static: false, read: TemplateRef }]
-            }], input: [{
+            }], fileLoader: [{
                 type: ViewChild,
-                args: ['input']
+                args: [KbqFileLoader]
             }], fileSizeHeaderCell: [{
                 type: ViewChild,
                 args: ['fileSizeHeaderCell']
@@ -468,14 +656,19 @@ let nextSingleFileUploadUniqueId = 0;
 const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION = ruRULocaleData.fileUpload.single;
 class KbqSingleFileUploadComponent extends KbqFileUploadBase {
     get file() {
-        return this._file;
+        const files = this.fileList.list();
+        return files.length === 0 ? null : files[0];
     }
     set file(currentFile) {
-        this._file = currentFile;
-        this.cvaOnChange(this._file);
+        this.fileList.list.set(currentFile === null ? [] : [currentFile]);
+        this.cvaOnChange(currentFile);
         this.cdr.markForCheck();
     }
     /** @docs-private */
+    get input() {
+        return this.fileLoader?.input();
+    }
+    /** @docs-private */
     get acceptedFiles() {
         return this.accept?.join(',') || '*/*';
     }
@@ -497,13 +690,11 @@ class KbqSingleFileUploadComponent extends KbqFileUploadBase {
          * A value responsible for progress spinner type.
          * Loading logic depends on selected mode */
         this.progressMode = 'determinate';
-        this.disabled = false;
         /**
          * @deprecated use `FormControl.errors`
          */
         this.errors = [];
         this.inputId = `kbq-single-file-upload-${nextSingleFileUploadUniqueId++}`;
-        this._file = null;
         /**
          * Controls whether to display the file size information.
          * @default true
@@ -561,8 +752,9 @@ class KbqSingleFileUploadComponent extends KbqFileUploadBase {
         this.ngControl?.statusChanges
             ?.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe((status) => {
-            if (this._file) {
-                this._file.hasError = status === 'INVALID';
+            const file = this.file;
+            if (file) {
+                file.hasError = status === 'INVALID';
             }
             this.errors = Object.values(this.ngControl?.errors || {});
             this.cdr.markForCheck();
@@ -594,14 +786,13 @@ class KbqSingleFileUploadComponent extends KbqFileUploadBase {
      * @docs-private
      */
     setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+        this.fileUploadContext.disabled.set(isDisabled);
         this.cdr.markForCheck();
     }
     /** @docs-private */
     onFileSelectedViaClick({ target }) {
-        if (this.disabled) {
+        if (this.disabled)
             return;
-        }
         const fileToAdd = target.files?.item(0);
         if (fileToAdd) {
             this.file = this.mapToFileItem(fileToAdd);
@@ -612,7 +803,18 @@ class KbqSingleFileUploadComponent extends KbqFileUploadBase {
         this.renderer.setProperty(target, 'value', null);
     }
     /** @docs-private */
-    deleteItem(event) {
+    onFileDropped(files) {
+        if (this.disabled)
+            return;
+        if (files?.length) {
+            this.file = this.mapToFileItem(files[0]);
+            this.fileChange.emit(this.file);
+        }
+        // mark as touched after file drop even if file wasn't correct
+        this.onTouched();
+    }
+    /** @docs-private */
+    deleteItem(event, origin) {
         if (this.disabled)
             return;
         event?.stopPropagation();
@@ -623,23 +825,14 @@ class KbqSingleFileUploadComponent extends KbqFileUploadBase {
         this.onTouched();
         if (this.file === null) {
             setTimeout(() => {
-                this.focusMonitor.focusVia(this.input, 'keyboard');
+                const input = this.input?.nativeElement;
+                if (input) {
+                    this.focusMonitor.focusVia(input, origin ?? 'keyboard');
+                }
             });
             return;
         }
     }
-    /** @docs-private */
-    onFileDropped(files) {
-        if (this.disabled) {
-            return;
-        }
-        if (files?.length) {
-            this.file = this.mapToFileItem(files[0]);
-            this.fileChange.emit(this.file);
-        }
-        // mark as touched after file drop even if file wasn't correct
-        this.onTouched();
-    }
     mapToFileItem(file) {
         return {
             file,
@@ -666,20 +859,34 @@ class KbqSingleFileUploadComponent extends KbqFileUploadBase {
     getCaptionText() {
         this.separatedCaptionText = this.config.captionText.split('{{ browseLink }}');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSingleFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqSingleFileUploadComponent, selector: "kbq-single-file-upload,kbq-file-upload:not([multiple])", inputs: { progressMode: { classPropertyName: "progressMode", publicName: "progressMode", isSignal: false, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, customValidation: { classPropertyName: "customValidation", publicName: "customValidation", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: false, isRequired: false, transformFunction: null }, showFileSize: { classPropertyName: "showFileSize", publicName: "showFileSize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, localeConfig: { classPropertyName: "localeConfig", publicName: "localeConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileQueueChange" }, host: { classAttribute: "kbq-single-file-upload" }, queries: [{ propertyName: "hint", predicate: KbqHint }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"invalid\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!file) {\n        <div class=\"kbq-file-dropzone\">\n            <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n            <!-- prettier-ignore -->\n            <span class=\"kbq-file-dropzone__text\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" tabindex=\"0\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}</span>\n        </div>\n    } @else {\n        @if (file) {\n            <div class=\"kbq-file-item\">\n                <div class=\"kbq-file-item__text-wrapper\">\n                    @if ({ loading: file.loading | async, progress: file.progress | async }; as asyncData) {\n                        @if (!asyncData.loading) {\n                            <ng-content select=\"[kbq-icon]\" />\n                        }\n                        @if (asyncData.loading) {\n                            <kbq-progress-spinner [mode]=\"progressMode\" [value]=\"asyncData.progress || 0\" />\n                        }\n                    }\n                    <div class=\"kbq-file-item__text\" [kbqEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></div>\n                </div>\n                @if (showFileSize) {\n                    <div class=\"kbq-file-item__size\">\n                        {{ file.file.size | kbqDataSize }}\n                    </div>\n                }\n                <i\n                    kbq-icon-button=\"kbq-xmark-circle_16\"\n                    class=\"kbq-file-upload__action\"\n                    [disabled]=\"disabled\"\n                    (click)=\"deleteItem($event)\"\n                    (keydown.backspace)=\"deleteItem()\"\n                    (keydown.delete)=\"deleteItem()\"\n                ></i>\n            </div>\n        }\n    }\n</div>\n\n@if (hasHint) {\n    <div class=\"kbq-file-upload__hint\">\n        <ng-content select=\"kbq-hint\" />\n    </div>\n}\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .kbq-file-dropzone,.kbq-file-upload .kbq-file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-single-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-single-default-container-background);border-color:var(--kbq-file-upload-single-default-container-border)!important}.kbq-single-file-upload .kbq-file-upload .kbq-focused,.kbq-single-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-upload__action{color:var(--kbq-file-upload-single-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-default-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-default-left-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__size{color:var(--kbq-file-upload-single-default-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-single-states-on-drag-container-background);border-color:var(--kbq-file-upload-single-states-on-drag-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled):not(.kbq-file-drop_dragover){background-color:var(--kbq-file-upload-single-states-error-container-background);border-color:var(--kbq-file-upload-single-states-error-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-error-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-error-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text,.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__text:not(.kbq-link){color:var(--kbq-file-upload-single-states-error-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__size{color:var(--kbq-file-upload-single-states-error-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-error-icon-button-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-single-states-disabled-container-background);border-color:var(--kbq-file-upload-single-states-disabled-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-disabled-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-disabled-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text{color:var(--kbq-file-upload-single-states-disabled-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__size{color:var(--kbq-file-upload-single-states-disabled-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-multiple-default-container-background);border-color:var(--kbq-file-upload-multiple-default-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload .kbq-focused:not(.kbq-list-option),.kbq-multiple-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-default-container-border)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{color:var(--kbq-foreground-contrast-secondary);border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-default-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-multiple-states-on-drag-container-background);border-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-multiple-states-disabled-container-background);border-color:var(--kbq-file-upload-multiple-states-disabled-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-disabled-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-disabled-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error{background-color:var(--kbq-background-error-less);border-color:var(--kbq-line-error)!important}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-error-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__text:not(.kbq-link),.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error){background-color:var(--kbq-background-error-less)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__size{color:var(--kbq-foreground-error)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-default-file-size-text-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-icon-button-color)}:where(.kbq-file-upload__hint .kbq-hint){color:var(--kbq-foreground-contrast-secondary)}.kbq-file-upload,.kbq-single-file-upload .kbq-file-item__text-wrapper,.kbq-single-file-upload .kbq-file-dropzone__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__header{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__caption,.kbq-multiple-file-upload .kbq-file-multiple__caption .kbq-link,.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .kbq-file-multiple__uploaded-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ":where(.kbq-file-upload){--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-single-file-upload){--kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);--kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);--kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-single-min-height: var(--kbq-size-5xl);--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-multiple-file-upload){--kbq-file-upload-size-multiple-big-container-min-height: 192px;--kbq-file-upload-size-multiple-big-container-min-width: 320px;--kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);--kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);--kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-file-upload.kbq-file-upload_compact){--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;--kbq-file-upload-multiple-compact-container-padding-horizontal: 11px}\n", ".kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical) - var(--kbq-file-upload-size-single-container-border-width)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal) - var(--kbq-file-upload-size-single-container-border-width));min-height:var(--kbq-file-upload-single-min-height);border-radius:var(--kbq-file-upload-size-single-container-border-radius);border-width:var(--kbq-file-upload-size-single-container-border-width);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .kbq-file-dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__text-wrapper .kbq-file-item__text{width:120px;flex-grow:1}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__size{padding:0 var(--kbq-size-s)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-upload__action{padding:var(--kbq-size-xxs)}\n"], dependencies: [{ kind: "component", type: i1.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i2.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }, { kind: "directive", type: i4.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength", "charWidth", "debounceInterval"] }, { kind: "directive", type: i5.KbqLink, selector: "[kbq-link]", inputs: ["disabled", "tabIndex", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i8.KbqDataSizePipe, name: "kbqDataSize" }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqSingleFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KbqSingleFileUploadComponent, isStandalone: true, selector: "kbq-single-file-upload,kbq-file-upload:not([multiple])", inputs: { progressMode: { classPropertyName: "progressMode", publicName: "progressMode", isSignal: false, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, customValidation: { classPropertyName: "customValidation", publicName: "customValidation", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null }, file: { classPropertyName: "file", publicName: "file", isSignal: false, isRequired: false, transformFunction: null }, showFileSize: { classPropertyName: "showFileSize", publicName: "showFileSize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, localeConfig: { classPropertyName: "localeConfig", publicName: "localeConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileQueueChange" }, host: { classAttribute: "kbq-single-file-upload" }, queries: [{ propertyName: "hint", predicate: KbqHint }], viewQueries: [{ propertyName: "fileLoader", first: true, predicate: KbqFileLoader, descendants: true }], usesInheritance: true, hostDirectives: [{ directive: KbqFileUploadContext, inputs: ["id", "id", "disabled", "disabled", "multiple", "multiple", "onlyDirectory", "onlyDirectory"] }, { directive: KbqFileList, outputs: ["listChange", "fileChange"] }], ngImport: i0, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"invalid\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!file) {\n        <div class=\"kbq-file-dropzone\">\n            <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n            <!-- prettier-ignore -->\n            <span class=\"kbq-file-dropzone__text\">{{ separatedCaptionText[0] }}<label kbq-link pseudo kbqFileLoader [for]=\"fileUploadContext.id() || inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" [tabIndex]=\"-1\" (fileChange)=\"onFileSelectedViaClick($event)\">{{ config.browseLink }}</label>{{ separatedCaptionText[1] }}</span>\n        </div>\n    } @else {\n        @if (file) {\n            <div class=\"kbq-file-item\">\n                <div class=\"kbq-file-item__text-wrapper\">\n                    @if ({ loading: file.loading | async, progress: file.progress | async }; as asyncData) {\n                        @if (!asyncData.loading) {\n                            <ng-content select=\"[kbq-icon]\" />\n                        }\n                        @if (asyncData.loading) {\n                            <kbq-progress-spinner [mode]=\"progressMode\" [value]=\"asyncData.progress || 0\" />\n                        }\n                    }\n                    <div class=\"kbq-file-item__text\" [kbqEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></div>\n                </div>\n                @if (showFileSize) {\n                    <div class=\"kbq-file-item__size\">\n                        {{ file.file.size | kbqDataSize }}\n                    </div>\n                }\n                <i\n                    kbq-icon-button=\"kbq-circle-xmark_16\"\n                    class=\"kbq-file-upload__action\"\n                    [disabled]=\"disabled\"\n                    (click)=\"deleteItem($event, 'program')\"\n                    (keydown.backspace)=\"deleteItem()\"\n                    (keydown.delete)=\"deleteItem()\"\n                ></i>\n            </div>\n        }\n    }\n</div>\n\n@if (hasHint) {\n    <div class=\"kbq-file-upload__hint\">\n        <ng-content select=\"kbq-hint\" />\n    </div>\n}\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .kbq-file-dropzone,.kbq-file-upload .kbq-file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-single-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-single-default-container-background);border-color:var(--kbq-file-upload-single-default-container-border)!important}.kbq-single-file-upload .kbq-file-upload .kbq-focused,.kbq-single-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-upload__action{color:var(--kbq-file-upload-single-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-default-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-default-left-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__size{color:var(--kbq-file-upload-single-default-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-single-states-on-drag-container-background);border-color:var(--kbq-file-upload-single-states-on-drag-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled):not(.kbq-file-drop_dragover){background-color:var(--kbq-file-upload-single-states-error-container-background);border-color:var(--kbq-file-upload-single-states-error-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-error-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-error-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text,.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__text:not(.kbq-link){color:var(--kbq-file-upload-single-states-error-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__size{color:var(--kbq-file-upload-single-states-error-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-error-icon-button-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-single-states-disabled-container-background);border-color:var(--kbq-file-upload-single-states-disabled-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-disabled-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-disabled-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text{color:var(--kbq-file-upload-single-states-disabled-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__size{color:var(--kbq-file-upload-single-states-disabled-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-multiple-default-container-background);border-color:var(--kbq-file-upload-multiple-default-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload .kbq-focused:not(.kbq-list-option),.kbq-multiple-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-default-container-border)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{color:var(--kbq-foreground-contrast-secondary);border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-default-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-multiple-states-on-drag-container-background);border-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-multiple-states-disabled-container-background);border-color:var(--kbq-file-upload-multiple-states-disabled-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-disabled-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-disabled-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error{background-color:var(--kbq-background-error-less);border-color:var(--kbq-line-error)!important}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-error-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__text:not(.kbq-link),.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error){background-color:var(--kbq-background-error-less)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__size{color:var(--kbq-foreground-error)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-default-file-size-text-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-icon-button-color)}:where(.kbq-file-upload__hint .kbq-hint){color:var(--kbq-foreground-contrast-secondary)}.kbq-file-upload,.kbq-single-file-upload .kbq-file-item__text-wrapper,.kbq-single-file-upload .kbq-file-dropzone__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__header{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__caption,.kbq-multiple-file-upload .kbq-file-multiple__caption .kbq-link,.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .kbq-file-multiple__uploaded-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ":where(.kbq-file-upload){--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-single-file-upload){--kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);--kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);--kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-single-min-height: var(--kbq-size-5xl);--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-multiple-file-upload){--kbq-file-upload-size-multiple-big-container-min-height: 192px;--kbq-file-upload-size-multiple-big-container-min-width: 320px;--kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);--kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);--kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-file-upload.kbq-file-upload_compact){--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;--kbq-file-upload-multiple-compact-container-padding-horizontal: 11px}\n", ".kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical) - var(--kbq-file-upload-size-single-container-border-width)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal) - var(--kbq-file-upload-size-single-container-border-width));min-height:var(--kbq-file-upload-single-min-height);border-radius:var(--kbq-file-upload-size-single-container-border-radius);border-width:var(--kbq-file-upload-size-single-container-border-width);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .kbq-file-dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__text-wrapper .kbq-file-item__text{width:120px;flex-grow:1}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__size{padding:0 var(--kbq-size-s)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-upload__action{padding:var(--kbq-size-xxs)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "directive", type: KbqLink, selector: "[kbq-link]", inputs: ["disabled", "tabIndex", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: KbqIconButton, selector: "[kbq-icon-button]", inputs: ["small", "kbq-icon-button", "tabindex", "disabled"] }, { kind: "component", type: KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "directive", type: KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength", "charWidth", "debounceInterval"] }, { kind: "pipe", type: KbqDataSizePipe, name: "kbqDataSize" }, { kind: "component", type: KbqFileLoader, selector: "[kbqFileLoader]", inputs: ["disabled", "multiple", "accept", "for", "onlyDirectory"], outputs: ["fileChange"], exportAs: ["kbqFileLoader"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSingleFileUploadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqSingleFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-single-file-upload,kbq-file-upload:not([multiple])', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'kbq-single-file-upload,kbq-file-upload:not([multiple])', imports: [
+                        AsyncPipe,
+                        KbqFileDropDirective,
+                        KbqLink,
+                        KbqIcon,
+                        KbqIconButton,
+                        KbqProgressSpinner,
+                        KbqEllipsisCenterDirective,
+                        KbqDataSizePipe,
+                        KbqFileLoader
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq-single-file-upload'
-                    }, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"invalid\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!file) {\n        <div class=\"kbq-file-dropzone\">\n            <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n            <!-- prettier-ignore -->\n            <span class=\"kbq-file-dropzone__text\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" tabindex=\"0\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}</span>\n        </div>\n    } @else {\n        @if (file) {\n            <div class=\"kbq-file-item\">\n                <div class=\"kbq-file-item__text-wrapper\">\n                    @if ({ loading: file.loading | async, progress: file.progress | async }; as asyncData) {\n                        @if (!asyncData.loading) {\n                            <ng-content select=\"[kbq-icon]\" />\n                        }\n                        @if (asyncData.loading) {\n                            <kbq-progress-spinner [mode]=\"progressMode\" [value]=\"asyncData.progress || 0\" />\n                        }\n                    }\n                    <div class=\"kbq-file-item__text\" [kbqEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></div>\n                </div>\n                @if (showFileSize) {\n                    <div class=\"kbq-file-item__size\">\n                        {{ file.file.size | kbqDataSize }}\n                    </div>\n                }\n                <i\n                    kbq-icon-button=\"kbq-xmark-circle_16\"\n                    class=\"kbq-file-upload__action\"\n                    [disabled]=\"disabled\"\n                    (click)=\"deleteItem($event)\"\n                    (keydown.backspace)=\"deleteItem()\"\n                    (keydown.delete)=\"deleteItem()\"\n                ></i>\n            </div>\n        }\n    }\n</div>\n\n@if (hasHint) {\n    <div class=\"kbq-file-upload__hint\">\n        <ng-content select=\"kbq-hint\" />\n    </div>\n}\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .kbq-file-dropzone,.kbq-file-upload .kbq-file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-single-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-single-default-container-background);border-color:var(--kbq-file-upload-single-default-container-border)!important}.kbq-single-file-upload .kbq-file-upload .kbq-focused,.kbq-single-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-upload__action{color:var(--kbq-file-upload-single-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-default-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-default-left-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__size{color:var(--kbq-file-upload-single-default-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-single-states-on-drag-container-background);border-color:var(--kbq-file-upload-single-states-on-drag-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled):not(.kbq-file-drop_dragover){background-color:var(--kbq-file-upload-single-states-error-container-background);border-color:var(--kbq-file-upload-single-states-error-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-error-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-error-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text,.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__text:not(.kbq-link){color:var(--kbq-file-upload-single-states-error-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__size{color:var(--kbq-file-upload-single-states-error-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-error-icon-button-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-single-states-disabled-container-background);border-color:var(--kbq-file-upload-single-states-disabled-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-disabled-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-disabled-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text{color:var(--kbq-file-upload-single-states-disabled-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__size{color:var(--kbq-file-upload-single-states-disabled-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-multiple-default-container-background);border-color:var(--kbq-file-upload-multiple-default-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload .kbq-focused:not(.kbq-list-option),.kbq-multiple-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-default-container-border)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{color:var(--kbq-foreground-contrast-secondary);border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-default-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-multiple-states-on-drag-container-background);border-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-multiple-states-disabled-container-background);border-color:var(--kbq-file-upload-multiple-states-disabled-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-disabled-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-disabled-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error{background-color:var(--kbq-background-error-less);border-color:var(--kbq-line-error)!important}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-error-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__text:not(.kbq-link),.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error){background-color:var(--kbq-background-error-less)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__size{color:var(--kbq-foreground-error)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-default-file-size-text-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-icon-button-color)}:where(.kbq-file-upload__hint .kbq-hint){color:var(--kbq-foreground-contrast-secondary)}.kbq-file-upload,.kbq-single-file-upload .kbq-file-item__text-wrapper,.kbq-single-file-upload .kbq-file-dropzone__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__header{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__caption,.kbq-multiple-file-upload .kbq-file-multiple__caption .kbq-link,.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .kbq-file-multiple__uploaded-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ":where(.kbq-file-upload){--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-single-file-upload){--kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);--kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);--kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-single-min-height: var(--kbq-size-5xl);--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-multiple-file-upload){--kbq-file-upload-size-multiple-big-container-min-height: 192px;--kbq-file-upload-size-multiple-big-container-min-width: 320px;--kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);--kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);--kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-file-upload.kbq-file-upload_compact){--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;--kbq-file-upload-multiple-compact-container-padding-horizontal: 11px}\n", ".kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical) - var(--kbq-file-upload-size-single-container-border-width)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal) - var(--kbq-file-upload-size-single-container-border-width));min-height:var(--kbq-file-upload-single-min-height);border-radius:var(--kbq-file-upload-size-single-container-border-radius);border-width:var(--kbq-file-upload-size-single-container-border-width);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .kbq-file-dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__text-wrapper .kbq-file-item__text{width:120px;flex-grow:1}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__size{padding:0 var(--kbq-size-s)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-upload__action{padding:var(--kbq-size-xxs)}\n"] }]
+                    }, hostDirectives: [
+                        {
+                            directive: KbqFileUploadContext,
+                            inputs: ['id', 'disabled', 'multiple', 'onlyDirectory']
+                        },
+                        { directive: KbqFileList, outputs: ['listChange: fileChange'] }
+                    ], template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"invalid\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!file) {\n        <div class=\"kbq-file-dropzone\">\n            <i kbq-icon=\"kbq-cloud-arrow-up-o_24\" class=\"kbq-file-dropzone__icon\"></i>\n            <!-- prettier-ignore -->\n            <span class=\"kbq-file-dropzone__text\">{{ separatedCaptionText[0] }}<label kbq-link pseudo kbqFileLoader [for]=\"fileUploadContext.id() || inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" [tabIndex]=\"-1\" (fileChange)=\"onFileSelectedViaClick($event)\">{{ config.browseLink }}</label>{{ separatedCaptionText[1] }}</span>\n        </div>\n    } @else {\n        @if (file) {\n            <div class=\"kbq-file-item\">\n                <div class=\"kbq-file-item__text-wrapper\">\n                    @if ({ loading: file.loading | async, progress: file.progress | async }; as asyncData) {\n                        @if (!asyncData.loading) {\n                            <ng-content select=\"[kbq-icon]\" />\n                        }\n                        @if (asyncData.loading) {\n                            <kbq-progress-spinner [mode]=\"progressMode\" [value]=\"asyncData.progress || 0\" />\n                        }\n                    }\n                    <div class=\"kbq-file-item__text\" [kbqEllipsisCenter]=\"file.file.name\" [minVisibleLength]=\"10\"></div>\n                </div>\n                @if (showFileSize) {\n                    <div class=\"kbq-file-item__size\">\n                        {{ file.file.size | kbqDataSize }}\n                    </div>\n                }\n                <i\n                    kbq-icon-button=\"kbq-circle-xmark_16\"\n                    class=\"kbq-file-upload__action\"\n                    [disabled]=\"disabled\"\n                    (click)=\"deleteItem($event, 'program')\"\n                    (keydown.backspace)=\"deleteItem()\"\n                    (keydown.delete)=\"deleteItem()\"\n                ></i>\n            </div>\n        }\n    }\n</div>\n\n@if (hasHint) {\n    <div class=\"kbq-file-upload__hint\">\n        <ng-content select=\"kbq-hint\" />\n    </div>\n}\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .kbq-file-dropzone,.kbq-file-upload .kbq-file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .kbq-ellipsis-center_data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-single-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-single-default-container-background);border-color:var(--kbq-file-upload-single-default-container-border)!important}.kbq-single-file-upload .kbq-file-upload .kbq-focused,.kbq-single-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-upload__action{color:var(--kbq-file-upload-single-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-default-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-default-left-icon-color)}.kbq-single-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-item__size{color:var(--kbq-file-upload-single-default-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-single-states-on-drag-container-background);border-color:var(--kbq-file-upload-single-states-on-drag-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled):not(.kbq-file-drop_dragover){background-color:var(--kbq-file-upload-single-states-error-container-background);border-color:var(--kbq-file-upload-single-states-error-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-error-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-error-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__text,.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-dropzone__text:not(.kbq-link){color:var(--kbq-file-upload-single-states-error-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-item__size{color:var(--kbq-file-upload-single-states-error-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-error-icon-button-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-single-states-disabled-container-background);border-color:var(--kbq-file-upload-single-states-disabled-container-border)!important}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-single-states-disabled-upload-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text-wrapper .kbq-icon.kbq-empty{color:var(--kbq-file-upload-single-states-disabled-left-icon-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__text{color:var(--kbq-file-upload-single-states-disabled-text-block-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-item__size{color:var(--kbq-file-upload-single-states-disabled-file-size-text-color)}.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-file-upload__action{color:var(--kbq-file-upload-single-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload{background-color:var(--kbq-file-upload-multiple-default-container-background);border-color:var(--kbq-file-upload-multiple-default-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload .kbq-focused:not(.kbq-list-option),.kbq-multiple-file-upload .kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-default-container-border)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{color:var(--kbq-foreground-contrast-secondary);border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled,.kbq-error) .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-default-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover{background-color:var(--kbq-file-upload-multiple-states-on-drag-container-background);border-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-btn-upload{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-file-drop_dragover .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled{background-color:var(--kbq-file-upload-multiple-states-disabled-container-background);border-color:var(--kbq-file-upload-multiple-states-disabled-container-border)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-disabled-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-dropzone__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-disabled-grid-divider-color)!important}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-states-disabled-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-disabled-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error{background-color:var(--kbq-background-error-less);border-color:var(--kbq-line-error)!important}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__icon{color:var(--kbq-file-upload-multiple-states-error-upload-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-dropzone__text:not(.kbq-link),.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled).kbq-error .kbq-file-multiple-uploaded__header{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error){background-color:var(--kbq-background-error-less)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-item__text,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__size{color:var(--kbq-foreground-error)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-multiple__uploaded-item:has(.kbq-file-upload__row.kbq-error) .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-states-error-icon-button-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__file .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__size{color:var(--kbq-file-upload-multiple-default-file-size-text-color)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple__uploaded-item .kbq-file-upload__action .kbq-icon.kbq-empty{color:var(--kbq-file-upload-multiple-default-icon-button-color)}:where(.kbq-file-upload__hint .kbq-hint){color:var(--kbq-foreground-contrast-secondary)}.kbq-file-upload,.kbq-single-file-upload .kbq-file-item__text-wrapper,.kbq-single-file-upload .kbq-file-dropzone__text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__header{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple__caption,.kbq-multiple-file-upload .kbq-file-multiple__caption .kbq-link,.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .kbq-file-multiple__uploaded-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-item,.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n", ":where(.kbq-file-upload){--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-single-file-upload){--kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-single-container-padding-vertical: var(--kbq-size-m);--kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);--kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-single-min-height: var(--kbq-size-5xl);--kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-single-default-container-background: var(--kbq-background-bg);--kbq-file-upload-single-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);--kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);--kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);--kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-multiple-file-upload){--kbq-file-upload-size-multiple-big-container-min-height: 192px;--kbq-file-upload-size-multiple-big-container-min-width: 320px;--kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);--kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);--kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);--kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);--kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);--kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);--kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);--kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-left-icon-color: var(--kbq-icon-contrast-fade);--kbq-file-upload-multiple-states-on-drag-icon-button-color: var(--kbq-icon-contrast);--kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);--kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);--kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);--kbq-file-upload-multiple-states-disabled-container-border: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);--kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);--kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme)}:where(.kbq-file-upload.kbq-file-upload_compact){--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;--kbq-file-upload-multiple-compact-container-padding-horizontal: 11px}\n", ".kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical) - var(--kbq-file-upload-size-single-container-border-width)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal) - var(--kbq-file-upload-size-single-container-border-width));min-height:var(--kbq-file-upload-single-min-height);border-radius:var(--kbq-file-upload-size-single-container-border-radius);border-width:var(--kbq-file-upload-size-single-container-border-width);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .kbq-file-dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__text-wrapper .kbq-file-item__text{width:120px;flex-grow:1}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-item__size{padding:0 var(--kbq-size-s)}.kbq-single-file-upload .kbq-file-upload .kbq-file-item .kbq-file-upload__action{padding:var(--kbq-size-xxs)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { progressMode: [{
                 type: Input
             }], accept: [{
                 type: Input
-            }], disabled: [{
-                type: Input
             }], errors: [{
                 type: Input
             }], inputId: [{
@@ -696,19 +903,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], fileChange: [{
                 type: Output,
                 args: ['fileQueueChange']
-            }], input: [{
+            }], fileLoader: [{
                 type: ViewChild,
-                args: ['input']
+                args: [KbqFileLoader]
             }], hint: [{
                 type: ContentChildren,
                 args: [KbqHint]
             }] } });
 
 class KbqFileUploadModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqFileUploadModule, declarations: [KbqFileDropDirective,
-            KbqSingleFileUploadComponent,
-            KbqMultipleFileUploadComponent], imports: [FormsModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KbqFileUploadModule, imports: [FormsModule,
             ReactiveFormsModule,
             KbqToolTipModule,
             KbqProgressSpinnerModule,
@@ -721,10 +926,13 @@ class KbqFileUploadModule {
             KbqLinkModule,
             AsyncPipe,
             NgClass,
-            NgTemplateOutlet], exports: [KbqSingleFileUploadComponent,
+            NgTemplateOutlet,
+            KbqFileDropDirective,
+            KbqSingleFileUploadComponent,
+            KbqMultipleFileUploadComponent], exports: [KbqSingleFileUploadComponent,
             KbqMultipleFileUploadComponent,
             KbqFileDropDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFileUploadModule, imports: [FormsModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileUploadModule, imports: [FormsModule,
             ReactiveFormsModule,
             KbqToolTipModule,
             KbqProgressSpinnerModule,
@@ -733,9 +941,11 @@ class KbqFileUploadModule {
             KbqListModule,
             KbqFormFieldModule,
             KbqEllipsisCenterModule,
-            KbqLinkModule] }); }
+            KbqLinkModule,
+            KbqSingleFileUploadComponent,
+            KbqMultipleFileUploadComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFileUploadModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqFileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -752,9 +962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         KbqLinkModule,
                         AsyncPipe,
                         NgClass,
-                        NgTemplateOutlet
-                    ],
-                    declarations: [
+                        NgTemplateOutlet,
                         KbqFileDropDirective,
                         KbqSingleFileUploadComponent,
                         KbqMultipleFileUploadComponent
@@ -771,5 +979,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_FILE_UPLOAD_CONFIGURATION, KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KbqFileDropDirective, KbqFileUploadBase, KbqFileUploadModule, KbqMultipleFileUploadComponent, KbqSingleFileUploadComponent, isCorrectExtension };
+export { KBQ_FILE_UPLOAD_CONFIGURATION, KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION, KbqFileDropDirective, KbqFileList, KbqFileLoader, KbqFileUploadBase, KbqFileUploadContext, KbqFileUploadModule, KbqMultipleFileUploadComponent, KbqSingleFileUploadComponent, isCorrectExtension };
 //# sourceMappingURL=koobiq-components-file-upload.mjs.map