@koobiq/components 18.3.0 → 18.4.1

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

@@ -1,25 +1,25 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Directive, Output, InjectionToken, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, Self, Input, ContentChild, ViewChild, NgModule } from '@angular/core';
-import * as i8 from '@angular/common';
+import { EventEmitter, Directive, Output, InjectionToken, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, Self, Input, ContentChild, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import * as i7 from '@angular/common';
 import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { KbqButtonModule } from '@koobiq/components/button';
-import * as i10 from '@koobiq/components/core';
+import * as i9 from '@koobiq/components/core';
 import { ruRULocaleData, KBQ_LOCALE_SERVICE, KbqDataSizePipe } from '@koobiq/components/core';
-import * as i6 from '@koobiq/components/ellipsis-center';
+import * as i5 from '@koobiq/components/ellipsis-center';
 import { KbqEllipsisCenterModule } from '@koobiq/components/ellipsis-center';
-import * as i5 from '@koobiq/components/form-field';
-import { KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqHint, KbqFormFieldModule } from '@koobiq/components/form-field';
 import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i7 from '@koobiq/components/link';
+import * as i6 from '@koobiq/components/link';
 import { KbqLinkModule } from '@koobiq/components/link';
 import * as i4 from '@koobiq/components/list';
 import { KbqListModule } from '@koobiq/components/list';
 import * as i2 from '@koobiq/components/progress-spinner';
 import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
 import { KbqToolTipModule } from '@koobiq/components/tooltip';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subscription, BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged } from 'rxjs/operators';
 
@@ -105,9 +105,8 @@ const unwrapDirectory = async (item) => {
 /* Object for labels customization inside file upload component */
 const KBQ_FILE_UPLOAD_CONFIGURATION = new InjectionToken('KbqFileUploadConfiguration');
 const isCorrectExtension = (file, accept) => {
-    if (!accept?.length) {
+    if (!accept?.length)
         return true;
-    }
     const { name, type } = file;
     const fileExt = name.split('.').pop() || '';
     for (const acceptedExtensionOrMimeType of accept) {
@@ -134,9 +133,15 @@ class KbqMultipleFileUploadComponent {
     get acceptedFiles() {
         return this.accept?.join(',') || '*/*';
     }
+    /**
+     * @deprecated use `FormControl.errors`
+     */
     get hasErrors() {
         return this.errors && !!this.errors.length;
     }
+    get hasHint() {
+        return this.hint.length > 0;
+    }
     constructor(cdr, renderer, configuration, localeService, ngControl) {
         this.cdr = cdr;
         this.renderer = renderer;
@@ -147,16 +152,34 @@ class KbqMultipleFileUploadComponent {
          * A value responsible for progress spinner type.
          * Loading logic depends on selected mode */
         this.progressMode = 'determinate';
+        /**
+         * @deprecated use `FormControl.errors`
+         */
         this.errors = [];
         this.size = 'default';
+        /**
+         * custom ID for the file input element.
+         */
         this.inputId = `kbq-multiple-file-upload-${nextMultipleFileUploadUniqueId++}`;
         this._files = [];
         this.fileQueueChanged = new EventEmitter();
+        /**
+         * Emits an event containing a chunk of files added to the file list.
+         */
+        this.filesAdded = new EventEmitter();
+        /**
+         * Emits an event containing a file and file's index when removed from the file list.
+         */
+        this.fileRemoved = new EventEmitter();
         this.hasFocus = false;
         this.statusChangeSubscription = Subscription.EMPTY;
-        /** cvaOnChange function registered via registerOnChange (ControlValueAccessor). */
+        /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
+         * @docs-private
+         */
         this.cvaOnChange = (_) => { };
-        /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+        /** onTouch function registered via registerOnTouch (ControlValueAccessor).
+         * @docs-private
+         */
         this.onTouched = () => { };
         this.updateLocaleParams = () => {
             this.config = this.configuration || this.localeService?.getParams('fileUpload').multiple;
@@ -168,7 +191,7 @@ class KbqMultipleFileUploadComponent {
             this.getCaptionText();
             this.cdr.markForCheck();
         };
-        this.localeService?.changes.subscribe(this.updateLocaleParams);
+        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
         if (!localeService) {
             this.initDefaultParams();
         }
@@ -221,10 +244,12 @@ class KbqMultipleFileUploadComponent {
         if (this.disabled) {
             return;
         }
+        const filesToAdd = this.mapToFileItem(target.files);
         this.files = [
             ...this.files,
-            ...this.mapToFileItem(target.files)
+            ...filesToAdd
         ];
+        this.filesAdded.emit(filesToAdd);
         this.onTouched();
         /* even if the user selects the same file,
                  the onchange event will be triggered every time user clicks on the control.*/
@@ -234,7 +259,12 @@ class KbqMultipleFileUploadComponent {
         if (this.disabled) {
             return;
         }
-        this.files = [...this.files, ...this.mapToFileItem(files)];
+        const filesToAdd = this.mapToFileItem(files);
+        this.files = [
+            ...this.files,
+            ...filesToAdd
+        ];
+        this.filesAdded.emit(filesToAdd);
         this.onTouched();
     }
     deleteFile(index, event) {
@@ -242,6 +272,7 @@ class KbqMultipleFileUploadComponent {
             return;
         }
         event?.stopPropagation();
+        this.fileRemoved.emit([this.files[index], index]);
         this.files.splice(index, 1);
         this.files = [...this.files];
         this.onTouched();
@@ -293,19 +324,19 @@ class KbqMultipleFileUploadComponent {
         this.separatedCaptionTextForCompactSize = this.config.captionTextForCompactSize.split('{{ browseLink }}');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqMultipleFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: KBQ_FILE_UPLOAD_CONFIGURATION, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqMultipleFileUploadComponent, selector: "kbq-multiple-file-upload,kbq-file-upload[multiple]", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", size: "size", inputId: "inputId", customValidation: "customValidation", files: "files" }, outputs: { fileQueueChanged: "fileQueueChanged" }, host: { classAttribute: "kbq-multiple-file-upload" }, queries: [{ propertyName: "customFileIcon", first: true, predicate: ["kbqFileIcon"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.selected]=\"files?.length\"\n    [ngClass]=\"size\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!files.length) {\n        <div class=\"dropzone\">\n            @if (size === 'default') {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_32\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <!-- prettier-ignore -->\n                        <span class=\"multiple__caption\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\" /></label>{{ separatedCaptionText[1] }}</span>\n                    </div>\n                </div>\n            } @else {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ separatedCaptionTextForCompactSize[0] }}\n                    <label\n                        kbq-link\n                        pseudo\n                        [disabled]=\"disabled\"\n                        [for]=\"inputId\"\n                        [tabIndex]=\"-1\"\n                    >\n                        {{ config.browseLink }}\n                        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n                    </label>\n                    {{ separatedCaptionTextForCompactSize[1] }}\n                </span>\n            }\n        </div>\n    } @else {\n        <div class=\"file-upload__dropzone\">\n            <div class=\"kbq-file-upload__grid\">\n                <div class=\"kbq-file-multiple-uploaded__header\">\n                    <div class=\"kbq-file-multiple-uploaded__header-inner\">\n                        @for (column of columnDefs; track column) {\n                            <div [class]=\"'kbq-file-upload__' + column.cssClass\">\n                                {{ column.header }}\n                            </div>\n                        }\n                    </div>\n                </div>\n                <kbq-list-selection\n                    [autoSelect]=\"false\"\n                    [disabled]=\"disabled\"\n                >\n                    @for (file of files; track file; let index = $index) {\n                        <kbq-list-option\n                            class=\"multiple__uploaded-item\"\n                            [value]=\"file.file.name\"\n                            (keydown.backspace)=\"deleteFile(index)\"\n                            (keydown.delete)=\"deleteFile(index)\"\n                        >\n                            <div\n                                class=\"kbq-file-upload__row\"\n                                [class.error]=\"file.hasError\"\n                            >\n                                <div class=\"kbq-file-upload__file\">\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=\"file-item__text\"\n                                        [kbqEllipsisCenter]=\"file.file.name\"\n                                        [minVisibleLength]=\"10\"\n                                    ></span>\n                                </div>\n                                <div class=\"kbq-file-upload__size\">{{ file.file.size | kbqDataSize }}</div>\n                                <div class=\"kbq-file-upload__action\">\n                                    <i\n                                        kbq-icon-button=\"kbq-xmark-circle_16\"\n                                        (click)=\"deleteFile(index, $event)\"\n                                    ></i>\n                                </div>\n                            </div>\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n            <div class=\"btn-upload\">\n                <div class=\"dropzone\">\n                    <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n                    <span class=\"dropzone__text multiple__caption\">\n                        {{ separatedCaptionTextWhenSelected[0] }}\n                        <label\n                            kbq-link\n                            pseudo\n                            [disabled]=\"disabled\"\n                            [for]=\"inputId\"\n                            [tabIndex]=\"-1\"\n                        >\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<div class=\"kbq-file-upload__info-section\">\n    <kbq-hint class=\"kbq-file-upload__hint\">\n        <ng-content select=\"[hint]\" />\n    </kbq-hint>\n\n    @if (hasErrors) {\n        @for (error of errors; track error) {\n            <kbq-hint class=\"kbq-file-upload__hint kbq-error\">\n                {{ error }}\n            </kbq-hint>\n        }\n    }\n</div>\n\n<ng-template #inputTemplate>\n    <input\n        #input\n        multiple\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 .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload .kbq-focused,.kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline)}.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.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(.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-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-icon{color:var(--kbq-file-upload-single-states-error-text-block-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-single-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-single-states-disabled-container-border)}.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 .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{border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload.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.dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-container-background)!important}.kbq-multiple-file-upload .kbq-file-upload.dragover.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.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-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error *,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error .kbq-icon{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__file .kbq-icon{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__action .kbq-icon{color:var(--kbq-file-upload-multiple-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload__hint:not(.kbq-error),.kbq-multiple-file-upload .kbq-file-upload__hint:not(.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-single-file-upload .file-item__text-wrapper,.kbq-single-file-upload .dropzone__text{font-size:var(--kbq-file-upload-font-single-text-block-font-size);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight);line-height:var(--kbq-file-upload-font-single-text-block-line-height);font-family:var(--kbq-file-upload-font-single-text-block-font-family);text-transform:var(--kbq-file-upload-font-single-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-single-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight);line-height:var(--kbq-file-upload-font-multiple-title-line-height);font-family:var(--kbq-file-upload-font-multiple-title-font-family);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing)}.kbq-multiple-file-upload .multiple__caption,.kbq-multiple-file-upload .multiple__caption .kbq-link{font-size:var(--kbq-file-upload-font-multiple-text-block-font-size);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family);text-transform:var(--kbq-file-upload-font-multiple-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .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-file-upload-font-multiple-grid-font-size);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight);line-height:var(--kbq-file-upload-font-multiple-grid-line-height);font-family:var(--kbq-file-upload-font-multiple-grid-font-family);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing)}.kbq-single-file-upload .kbq-file-upload__hint.kbq-hint .kbq-hint__text,.kbq-multiple-file-upload .kbq-file-upload__hint.kbq-hint .kbq-hint__text{font-size:var(--kbq-form-field-hint-font-text-font-size);font-weight:var(--kbq-form-field-hint-font-text-font-weight);line-height:var(--kbq-form-field-hint-font-text-line-height);font-family:var(--kbq-form-field-hint-font-text-font-family);text-transform:var(--kbq-form-field-hint-font-text-text-transform);font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings);letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing)}\n", ".kbq-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-size-multiple-big-container-min-height: 160px;--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-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-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-single-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);--kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);--kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);--kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);--kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);--kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);--kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);--kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);--kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);--kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);--kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);--kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);--kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);--kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);--kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings)}:where(.kbq-light,.theme-light,.kbq-theme-light){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-theme-fade);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\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.default:not(.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.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__header{display:block}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__caption{display:block;padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical) var(--kbq-file-upload-size-single-container-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);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-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-list-size-container-focus-outline-width)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(--kbq-list-size-container-focus-outline-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal)}.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-size-7xl);min-width:var(--kbq-size-7xl);text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) + 2px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) + 2px)}.kbq-multiple-file-upload .kbq-file-upload .btn-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));border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius);border-top-width:var(--kbq-file-upload-size-single-container-border-width);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);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-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top)}\n"], dependencies: [{ kind: "component", type: i2.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i4.KbqListSelection, selector: "kbq-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i4.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "component", type: i5.KbqHint, selector: "kbq-hint", inputs: ["color", "id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i6.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i7.KbqLink, selector: "[kbq-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i10.KbqDataSizePipe, name: "kbqDataSize" }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqMultipleFileUploadComponent, selector: "kbq-multiple-file-upload,kbq-file-upload[multiple]", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", size: "size", inputId: "inputId", customValidation: "customValidation", files: "files" }, outputs: { fileQueueChanged: "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 }], ngImport: i0, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.selected]=\"files?.length\"\n    [ngClass]=\"size\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!files.length) {\n        <div class=\"dropzone\">\n            @if (size === 'default') {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_32\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <!-- prettier-ignore -->\n                        <span class=\"multiple__caption\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\" /></label>{{ separatedCaptionText[1] }}</span>\n                    </div>\n                </div>\n            } @else {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ separatedCaptionTextForCompactSize[0] }}\n                    <label\n                        kbq-link\n                        pseudo\n                        [disabled]=\"disabled\"\n                        [for]=\"inputId\"\n                        [tabIndex]=\"-1\"\n                    >\n                        {{ config.browseLink }}\n                        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n                    </label>\n                    {{ separatedCaptionTextForCompactSize[1] }}\n                </span>\n            }\n        </div>\n    } @else {\n        <div class=\"file-upload__dropzone\">\n            <div class=\"kbq-file-upload__grid\">\n                <div class=\"kbq-file-multiple-uploaded__header\">\n                    <div class=\"kbq-file-multiple-uploaded__header-inner\">\n                        @for (column of columnDefs; track column) {\n                            <div [class]=\"'kbq-file-upload__' + column.cssClass\">\n                                {{ column.header }}\n                            </div>\n                        }\n                    </div>\n                </div>\n                <kbq-list-selection\n                    [autoSelect]=\"false\"\n                    [disabled]=\"disabled\"\n                >\n                    @for (file of files; track file; let index = $index) {\n                        <kbq-list-option\n                            class=\"multiple__uploaded-item\"\n                            [value]=\"file.file.name\"\n                            (keydown.backspace)=\"deleteFile(index)\"\n                            (keydown.delete)=\"deleteFile(index)\"\n                        >\n                            <div\n                                class=\"kbq-file-upload__row\"\n                                [class.error]=\"file.hasError\"\n                            >\n                                <div class=\"kbq-file-upload__file\">\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=\"file-item__text\"\n                                        [kbqEllipsisCenter]=\"file.file.name\"\n                                        [minVisibleLength]=\"10\"\n                                    ></span>\n                                </div>\n                                <div class=\"kbq-file-upload__size\">{{ file.file.size | kbqDataSize }}</div>\n                                <div class=\"kbq-file-upload__action\">\n                                    <i\n                                        kbq-icon-button=\"kbq-xmark-circle_16\"\n                                        (click)=\"deleteFile(index, $event)\"\n                                    ></i>\n                                </div>\n                            </div>\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n            <div class=\"btn-upload\">\n                <div class=\"dropzone\">\n                    <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n                    <span class=\"dropzone__text multiple__caption\">\n                        {{ separatedCaptionTextWhenSelected[0] }}\n                        <label\n                            kbq-link\n                            pseudo\n                            [disabled]=\"disabled\"\n                            [for]=\"inputId\"\n                            [tabIndex]=\"-1\"\n                        >\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        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 .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-file-upload .kbq-focused,.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{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.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(.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-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-icon{color:var(--kbq-file-upload-single-states-error-text-block-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-single-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-single-states-disabled-container-border)}.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 .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{border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload.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.dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-container-background)!important}.kbq-multiple-file-upload .kbq-file-upload.dragover.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.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-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error *,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error .kbq-icon{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__file .kbq-icon{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__action .kbq-icon{color:var(--kbq-file-upload-multiple-default-icon-button-color)}.kbq-file-upload__hint .kbq-hint{color:var(--kbq-foreground-contrast-secondary)}.kbq-single-file-upload .file-item__text-wrapper,.kbq-single-file-upload .dropzone__text{font-size:var(--kbq-file-upload-font-single-text-block-font-size);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight);line-height:var(--kbq-file-upload-font-single-text-block-line-height);font-family:var(--kbq-file-upload-font-single-text-block-font-family);text-transform:var(--kbq-file-upload-font-single-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-single-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight);line-height:var(--kbq-file-upload-font-multiple-title-line-height);font-family:var(--kbq-file-upload-font-multiple-title-font-family);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing)}.kbq-multiple-file-upload .multiple__caption,.kbq-multiple-file-upload .multiple__caption .kbq-link{font-size:var(--kbq-file-upload-font-multiple-text-block-font-size);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family);text-transform:var(--kbq-file-upload-font-multiple-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .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-file-upload-font-multiple-grid-font-size);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight);line-height:var(--kbq-file-upload-font-multiple-grid-line-height);font-family:var(--kbq-file-upload-font-multiple-grid-font-family);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);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", ".kbq-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-size-multiple-big-container-min-height: 160px;--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-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-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-single-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);--kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);--kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);--kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);--kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);--kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);--kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);--kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);--kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);--kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);--kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);--kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);--kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);--kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);--kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings)}:where(.kbq-light,.theme-light,.kbq-theme-light){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-theme-fade);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\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.default:not(.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.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__header{display:block}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__caption{display:block;padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical) var(--kbq-file-upload-size-single-container-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);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-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-list-size-container-focus-outline-width)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(--kbq-list-size-container-focus-outline-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal)}.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-size-7xl);min-width:var(--kbq-size-7xl);text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) + 2px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) + 2px)}.kbq-multiple-file-upload .kbq-file-upload .btn-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));border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius);border-top-width:var(--kbq-file-upload-size-single-container-border-width);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);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-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: i2.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i4.KbqListSelection, selector: "kbq-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i4.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "directive", type: i5.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i6.KbqLink, selector: "[kbq-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i9.KbqDataSizePipe, name: "kbqDataSize" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqMultipleFileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-multiple-file-upload,kbq-file-upload[multiple]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-multiple-file-upload'
-                    }, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.selected]=\"files?.length\"\n    [ngClass]=\"size\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!files.length) {\n        <div class=\"dropzone\">\n            @if (size === 'default') {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_32\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <!-- prettier-ignore -->\n                        <span class=\"multiple__caption\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\" /></label>{{ separatedCaptionText[1] }}</span>\n                    </div>\n                </div>\n            } @else {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ separatedCaptionTextForCompactSize[0] }}\n                    <label\n                        kbq-link\n                        pseudo\n                        [disabled]=\"disabled\"\n                        [for]=\"inputId\"\n                        [tabIndex]=\"-1\"\n                    >\n                        {{ config.browseLink }}\n                        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n                    </label>\n                    {{ separatedCaptionTextForCompactSize[1] }}\n                </span>\n            }\n        </div>\n    } @else {\n        <div class=\"file-upload__dropzone\">\n            <div class=\"kbq-file-upload__grid\">\n                <div class=\"kbq-file-multiple-uploaded__header\">\n                    <div class=\"kbq-file-multiple-uploaded__header-inner\">\n                        @for (column of columnDefs; track column) {\n                            <div [class]=\"'kbq-file-upload__' + column.cssClass\">\n                                {{ column.header }}\n                            </div>\n                        }\n                    </div>\n                </div>\n                <kbq-list-selection\n                    [autoSelect]=\"false\"\n                    [disabled]=\"disabled\"\n                >\n                    @for (file of files; track file; let index = $index) {\n                        <kbq-list-option\n                            class=\"multiple__uploaded-item\"\n                            [value]=\"file.file.name\"\n                            (keydown.backspace)=\"deleteFile(index)\"\n                            (keydown.delete)=\"deleteFile(index)\"\n                        >\n                            <div\n                                class=\"kbq-file-upload__row\"\n                                [class.error]=\"file.hasError\"\n                            >\n                                <div class=\"kbq-file-upload__file\">\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=\"file-item__text\"\n                                        [kbqEllipsisCenter]=\"file.file.name\"\n                                        [minVisibleLength]=\"10\"\n                                    ></span>\n                                </div>\n                                <div class=\"kbq-file-upload__size\">{{ file.file.size | kbqDataSize }}</div>\n                                <div class=\"kbq-file-upload__action\">\n                                    <i\n                                        kbq-icon-button=\"kbq-xmark-circle_16\"\n                                        (click)=\"deleteFile(index, $event)\"\n                                    ></i>\n                                </div>\n                            </div>\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n            <div class=\"btn-upload\">\n                <div class=\"dropzone\">\n                    <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n                    <span class=\"dropzone__text multiple__caption\">\n                        {{ separatedCaptionTextWhenSelected[0] }}\n                        <label\n                            kbq-link\n                            pseudo\n                            [disabled]=\"disabled\"\n                            [for]=\"inputId\"\n                            [tabIndex]=\"-1\"\n                        >\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<div class=\"kbq-file-upload__info-section\">\n    <kbq-hint class=\"kbq-file-upload__hint\">\n        <ng-content select=\"[hint]\" />\n    </kbq-hint>\n\n    @if (hasErrors) {\n        @for (error of errors; track error) {\n            <kbq-hint class=\"kbq-file-upload__hint kbq-error\">\n                {{ error }}\n            </kbq-hint>\n        }\n    }\n</div>\n\n<ng-template #inputTemplate>\n    <input\n        #input\n        multiple\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 .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload .kbq-focused,.kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline)}.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.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(.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-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-icon{color:var(--kbq-file-upload-single-states-error-text-block-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-single-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-single-states-disabled-container-border)}.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 .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{border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload.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.dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-container-background)!important}.kbq-multiple-file-upload .kbq-file-upload.dragover.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.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-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error *,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error .kbq-icon{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__file .kbq-icon{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__action .kbq-icon{color:var(--kbq-file-upload-multiple-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload__hint:not(.kbq-error),.kbq-multiple-file-upload .kbq-file-upload__hint:not(.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-single-file-upload .file-item__text-wrapper,.kbq-single-file-upload .dropzone__text{font-size:var(--kbq-file-upload-font-single-text-block-font-size);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight);line-height:var(--kbq-file-upload-font-single-text-block-line-height);font-family:var(--kbq-file-upload-font-single-text-block-font-family);text-transform:var(--kbq-file-upload-font-single-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-single-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight);line-height:var(--kbq-file-upload-font-multiple-title-line-height);font-family:var(--kbq-file-upload-font-multiple-title-font-family);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing)}.kbq-multiple-file-upload .multiple__caption,.kbq-multiple-file-upload .multiple__caption .kbq-link{font-size:var(--kbq-file-upload-font-multiple-text-block-font-size);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family);text-transform:var(--kbq-file-upload-font-multiple-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .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-file-upload-font-multiple-grid-font-size);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight);line-height:var(--kbq-file-upload-font-multiple-grid-line-height);font-family:var(--kbq-file-upload-font-multiple-grid-font-family);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing)}.kbq-single-file-upload .kbq-file-upload__hint.kbq-hint .kbq-hint__text,.kbq-multiple-file-upload .kbq-file-upload__hint.kbq-hint .kbq-hint__text{font-size:var(--kbq-form-field-hint-font-text-font-size);font-weight:var(--kbq-form-field-hint-font-text-font-weight);line-height:var(--kbq-form-field-hint-font-text-line-height);font-family:var(--kbq-form-field-hint-font-text-font-family);text-transform:var(--kbq-form-field-hint-font-text-text-transform);font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings);letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing)}\n", ".kbq-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-size-multiple-big-container-min-height: 160px;--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-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-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-single-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);--kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);--kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);--kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);--kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);--kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);--kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);--kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);--kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);--kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);--kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);--kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);--kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);--kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);--kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings)}:where(.kbq-light,.theme-light,.kbq-theme-light){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-theme-fade);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\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.default:not(.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.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__header{display:block}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__caption{display:block;padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical) var(--kbq-file-upload-size-single-container-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);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-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-list-size-container-focus-outline-width)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(--kbq-list-size-container-focus-outline-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal)}.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-size-7xl);min-width:var(--kbq-size-7xl);text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) + 2px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) + 2px)}.kbq-multiple-file-upload .kbq-file-upload .btn-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));border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius);border-top-width:var(--kbq-file-upload-size-single-container-border-width);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);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-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top)}\n"] }]
+                    }, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.selected]=\"files?.length\"\n    [ngClass]=\"size\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!files.length) {\n        <div class=\"dropzone\">\n            @if (size === 'default') {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_32\"></i>\n                <div class=\"dropzone__text\">\n                    <span class=\"multiple__header\">{{ config.title }}</span>\n                    <div>\n                        <!-- prettier-ignore -->\n                        <span class=\"multiple__caption\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\" /></label>{{ separatedCaptionText[1] }}</span>\n                    </div>\n                </div>\n            } @else {\n                <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n                <span class=\"dropzone__text multiple__caption\">\n                    {{ separatedCaptionTextForCompactSize[0] }}\n                    <label\n                        kbq-link\n                        pseudo\n                        [disabled]=\"disabled\"\n                        [for]=\"inputId\"\n                        [tabIndex]=\"-1\"\n                    >\n                        {{ config.browseLink }}\n                        <ng-container *ngTemplateOutlet=\"inputTemplate\" />\n                    </label>\n                    {{ separatedCaptionTextForCompactSize[1] }}\n                </span>\n            }\n        </div>\n    } @else {\n        <div class=\"file-upload__dropzone\">\n            <div class=\"kbq-file-upload__grid\">\n                <div class=\"kbq-file-multiple-uploaded__header\">\n                    <div class=\"kbq-file-multiple-uploaded__header-inner\">\n                        @for (column of columnDefs; track column) {\n                            <div [class]=\"'kbq-file-upload__' + column.cssClass\">\n                                {{ column.header }}\n                            </div>\n                        }\n                    </div>\n                </div>\n                <kbq-list-selection\n                    [autoSelect]=\"false\"\n                    [disabled]=\"disabled\"\n                >\n                    @for (file of files; track file; let index = $index) {\n                        <kbq-list-option\n                            class=\"multiple__uploaded-item\"\n                            [value]=\"file.file.name\"\n                            (keydown.backspace)=\"deleteFile(index)\"\n                            (keydown.delete)=\"deleteFile(index)\"\n                        >\n                            <div\n                                class=\"kbq-file-upload__row\"\n                                [class.error]=\"file.hasError\"\n                            >\n                                <div class=\"kbq-file-upload__file\">\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=\"file-item__text\"\n                                        [kbqEllipsisCenter]=\"file.file.name\"\n                                        [minVisibleLength]=\"10\"\n                                    ></span>\n                                </div>\n                                <div class=\"kbq-file-upload__size\">{{ file.file.size | kbqDataSize }}</div>\n                                <div class=\"kbq-file-upload__action\">\n                                    <i\n                                        kbq-icon-button=\"kbq-xmark-circle_16\"\n                                        (click)=\"deleteFile(index, $event)\"\n                                    ></i>\n                                </div>\n                            </div>\n                        </kbq-list-option>\n                    }\n                </kbq-list-selection>\n            </div>\n            <div class=\"btn-upload\">\n                <div class=\"dropzone\">\n                    <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n                    <span class=\"dropzone__text multiple__caption\">\n                        {{ separatedCaptionTextWhenSelected[0] }}\n                        <label\n                            kbq-link\n                            pseudo\n                            [disabled]=\"disabled\"\n                            [for]=\"inputId\"\n                            [tabIndex]=\"-1\"\n                        >\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        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 .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-file-upload .kbq-focused,.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{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.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(.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-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-icon{color:var(--kbq-file-upload-single-states-error-text-block-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-single-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-single-states-disabled-container-border)}.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 .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{border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload.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.dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-container-background)!important}.kbq-multiple-file-upload .kbq-file-upload.dragover.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.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-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error *,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error .kbq-icon{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__file .kbq-icon{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__action .kbq-icon{color:var(--kbq-file-upload-multiple-default-icon-button-color)}.kbq-file-upload__hint .kbq-hint{color:var(--kbq-foreground-contrast-secondary)}.kbq-single-file-upload .file-item__text-wrapper,.kbq-single-file-upload .dropzone__text{font-size:var(--kbq-file-upload-font-single-text-block-font-size);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight);line-height:var(--kbq-file-upload-font-single-text-block-line-height);font-family:var(--kbq-file-upload-font-single-text-block-font-family);text-transform:var(--kbq-file-upload-font-single-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-single-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight);line-height:var(--kbq-file-upload-font-multiple-title-line-height);font-family:var(--kbq-file-upload-font-multiple-title-font-family);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing)}.kbq-multiple-file-upload .multiple__caption,.kbq-multiple-file-upload .multiple__caption .kbq-link{font-size:var(--kbq-file-upload-font-multiple-text-block-font-size);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family);text-transform:var(--kbq-file-upload-font-multiple-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .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-file-upload-font-multiple-grid-font-size);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight);line-height:var(--kbq-file-upload-font-multiple-grid-line-height);font-family:var(--kbq-file-upload-font-multiple-grid-font-family);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);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", ".kbq-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-size-multiple-big-container-min-height: 160px;--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-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-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-single-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);--kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);--kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);--kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);--kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);--kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);--kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);--kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);--kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);--kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);--kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);--kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);--kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);--kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);--kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings)}:where(.kbq-light,.theme-light,.kbq-theme-light){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-theme-fade);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\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.default:not(.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.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__header{display:block}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__caption{display:block;padding-top:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical) var(--kbq-file-upload-size-single-container-padding-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);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-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(--kbq-list-size-container-focus-outline-width)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(--kbq-list-size-container-focus-outline-width))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal)}.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-size-7xl);min-width:var(--kbq-size-7xl);text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) + 2px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) + 2px)}.kbq-multiple-file-upload .kbq-file-upload .btn-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));border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius);border-top-width:var(--kbq-file-upload-size-single-container-border-width);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical);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-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [KBQ_FILE_UPLOAD_CONFIGURATION]
-                }] }, { type: i10.KbqLocaleService, decorators: [{
+                }] }, { type: i9.KbqLocaleService, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -332,12 +363,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 type: Input
             }], fileQueueChanged: [{
                 type: Output
+            }], filesAdded: [{
+                type: Output
+            }], fileRemoved: [{
+                type: Output
             }], customFileIcon: [{
                 type: ContentChild,
                 args: ['kbqFileIcon', { static: false, read: TemplateRef }]
             }], input: [{
                 type: ViewChild,
                 args: ['input']
+            }], hint: [{
+                type: ContentChildren,
+                args: [KbqHint]
             }] } });
 
 let nextSingleFileUploadUniqueId = 0;
@@ -355,6 +393,9 @@ class KbqSingleFileUploadComponent {
     get acceptedFiles() {
         return this.accept?.join(',') || '*/*';
     }
+    get hasHint() {
+        return this.hint.length > 0;
+    }
     constructor(cdr, renderer, configuration, localeService, ngControl) {
         this.cdr = cdr;
         this.renderer = renderer;
@@ -366,21 +407,28 @@ class KbqSingleFileUploadComponent {
          * 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;
         this.fileQueueChange = new EventEmitter();
         this.statusChangeSubscription = Subscription.EMPTY;
-        /** cvaOnChange function registered via registerOnChange (ControlValueAccessor). */
+        /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
+         * @docs-private
+         */
         this.cvaOnChange = (_) => { };
-        /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+        /** onTouch function registered via registerOnTouch (ControlValueAccessor).
+         * @docs-private
+         */
         this.onTouched = () => { };
         this.updateLocaleParams = () => {
             this.config = this.configuration || this.localeService?.getParams('fileUpload').multiple;
             this.getCaptionText();
             this.cdr.markForCheck();
         };
-        this.localeService?.changes.subscribe(this.updateLocaleParams);
+        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
         if (!localeService) {
             this.initDefaultParams();
         }
@@ -448,9 +496,8 @@ class KbqSingleFileUploadComponent {
         this.renderer.setProperty(this.input.nativeElement, 'value', null);
     }
     deleteItem(event) {
-        if (this.disabled) {
+        if (this.disabled)
             return;
-        }
         event?.stopPropagation();
         this.file = null;
         this.errors = [];
@@ -477,9 +524,8 @@ class KbqSingleFileUploadComponent {
         };
     }
     validateFile(file) {
-        if (!this.customValidation?.length) {
+        if (!this.customValidation?.length)
             return;
-        }
         this.errors = this.customValidation
             .reduce((errors, validatorFn) => {
             errors.push(validatorFn(file));
@@ -496,19 +542,19 @@ class KbqSingleFileUploadComponent {
         this.separatedCaptionText = this.config.captionText.split('{{ browseLink }}');
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqSingleFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: KBQ_FILE_UPLOAD_CONFIGURATION, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqSingleFileUploadComponent, selector: "kbq-single-file-upload,kbq-file-upload:not([multiple])", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", inputId: "inputId", customValidation: "customValidation", file: "file" }, outputs: { fileQueueChange: "fileQueueChange" }, host: { classAttribute: "kbq-single-file-upload" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"file?.hasError\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!file) {\n        <div class=\"dropzone\">\n            <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n            <!-- prettier-ignore -->\n            <span class=\"dropzone__text\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}</span>\n        </div>\n    } @else {\n        @if (file) {\n            <div class=\"file-item\">\n                <div class=\"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\n                                [mode]=\"progressMode\"\n                                [value]=\"asyncData.progress || 0\"\n                            />\n                        }\n                    }\n                    <div\n                        class=\"file-item__text\"\n                        [kbqEllipsisCenter]=\"file.file.name\"\n                        [minVisibleLength]=\"10\"\n                    ></div>\n                </div>\n                <i\n                    kbq-icon-button=\"kbq-xmark-circle_16\"\n                    [color]=\"'contrast'\"\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<kbq-hint class=\"kbq-file-upload__hint\">\n    <ng-content select=\"[hint]\" />\n</kbq-hint>\n@if (errors?.length) {\n    @for (error of errors; track error) {\n        <kbq-hint class=\"kbq-file-upload__hint kbq-error\">\n            {{ error }}\n        </kbq-hint>\n    }\n}\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload .kbq-focused,.kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline)}.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.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(.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-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-icon{color:var(--kbq-file-upload-single-states-error-text-block-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-single-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-single-states-disabled-container-border)}.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 .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{border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload.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.dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-container-background)!important}.kbq-multiple-file-upload .kbq-file-upload.dragover.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.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-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error *,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error .kbq-icon{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__file .kbq-icon{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__action .kbq-icon{color:var(--kbq-file-upload-multiple-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload__hint:not(.kbq-error),.kbq-multiple-file-upload .kbq-file-upload__hint:not(.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-single-file-upload .file-item__text-wrapper,.kbq-single-file-upload .dropzone__text{font-size:var(--kbq-file-upload-font-single-text-block-font-size);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight);line-height:var(--kbq-file-upload-font-single-text-block-line-height);font-family:var(--kbq-file-upload-font-single-text-block-font-family);text-transform:var(--kbq-file-upload-font-single-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-single-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight);line-height:var(--kbq-file-upload-font-multiple-title-line-height);font-family:var(--kbq-file-upload-font-multiple-title-font-family);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing)}.kbq-multiple-file-upload .multiple__caption,.kbq-multiple-file-upload .multiple__caption .kbq-link{font-size:var(--kbq-file-upload-font-multiple-text-block-font-size);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family);text-transform:var(--kbq-file-upload-font-multiple-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .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-file-upload-font-multiple-grid-font-size);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight);line-height:var(--kbq-file-upload-font-multiple-grid-line-height);font-family:var(--kbq-file-upload-font-multiple-grid-font-family);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing)}.kbq-single-file-upload .kbq-file-upload__hint.kbq-hint .kbq-hint__text,.kbq-multiple-file-upload .kbq-file-upload__hint.kbq-hint .kbq-hint__text{font-size:var(--kbq-form-field-hint-font-text-font-size);font-weight:var(--kbq-form-field-hint-font-text-font-weight);line-height:var(--kbq-form-field-hint-font-text-line-height);font-family:var(--kbq-form-field-hint-font-text-font-family);text-transform:var(--kbq-form-field-hint-font-text-text-transform);font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings);letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing)}\n", ".kbq-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-size-multiple-big-container-min-height: 160px;--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-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-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-single-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);--kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);--kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);--kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);--kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);--kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);--kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);--kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);--kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);--kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);--kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);--kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);--kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);--kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);--kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings)}:where(.kbq-light,.theme-light,.kbq-theme-light){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-theme-fade);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical) - 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));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 .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 .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top)}\n"], dependencies: [{ kind: "component", type: i2.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i5.KbqHint, selector: "kbq-hint", inputs: ["color", "id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i6.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i7.KbqLink, selector: "[kbq-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i8.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqSingleFileUploadComponent, selector: "kbq-single-file-upload,kbq-file-upload:not([multiple])", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", inputId: "inputId", customValidation: "customValidation", file: "file" }, outputs: { fileQueueChange: "fileQueueChange" }, host: { classAttribute: "kbq-single-file-upload" }, queries: [{ propertyName: "hint", predicate: KbqHint }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"file?.hasError\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!file) {\n        <div class=\"dropzone\">\n            <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n            <!-- prettier-ignore -->\n            <span class=\"dropzone__text\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}</span>\n        </div>\n    } @else {\n        @if (file) {\n            <div class=\"file-item\">\n                <div class=\"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\n                                [mode]=\"progressMode\"\n                                [value]=\"asyncData.progress || 0\"\n                            />\n                        }\n                    }\n                    <div\n                        class=\"file-item__text\"\n                        [kbqEllipsisCenter]=\"file.file.name\"\n                        [minVisibleLength]=\"10\"\n                    ></div>\n                </div>\n                <i\n                    kbq-icon-button=\"kbq-xmark-circle_16\"\n                    [color]=\"'contrast'\"\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 .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-file-upload .kbq-focused,.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{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.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(.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-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-icon{color:var(--kbq-file-upload-single-states-error-text-block-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-single-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-single-states-disabled-container-border)}.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 .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{border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload.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.dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-container-background)!important}.kbq-multiple-file-upload .kbq-file-upload.dragover.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.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-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error *,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error .kbq-icon{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__file .kbq-icon{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__action .kbq-icon{color:var(--kbq-file-upload-multiple-default-icon-button-color)}.kbq-file-upload__hint .kbq-hint{color:var(--kbq-foreground-contrast-secondary)}.kbq-single-file-upload .file-item__text-wrapper,.kbq-single-file-upload .dropzone__text{font-size:var(--kbq-file-upload-font-single-text-block-font-size);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight);line-height:var(--kbq-file-upload-font-single-text-block-line-height);font-family:var(--kbq-file-upload-font-single-text-block-font-family);text-transform:var(--kbq-file-upload-font-single-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-single-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight);line-height:var(--kbq-file-upload-font-multiple-title-line-height);font-family:var(--kbq-file-upload-font-multiple-title-font-family);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing)}.kbq-multiple-file-upload .multiple__caption,.kbq-multiple-file-upload .multiple__caption .kbq-link{font-size:var(--kbq-file-upload-font-multiple-text-block-font-size);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family);text-transform:var(--kbq-file-upload-font-multiple-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .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-file-upload-font-multiple-grid-font-size);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight);line-height:var(--kbq-file-upload-font-multiple-grid-line-height);font-family:var(--kbq-file-upload-font-multiple-grid-font-family);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);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", ".kbq-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-size-multiple-big-container-min-height: 160px;--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-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-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-single-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);--kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);--kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);--kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);--kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);--kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);--kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);--kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);--kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);--kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);--kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);--kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);--kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);--kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);--kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings)}:where(.kbq-light,.theme-light,.kbq-theme-light){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-theme-fade);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\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));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 .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 .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}\n"], dependencies: [{ kind: "component", type: i2.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "directive", type: i5.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i6.KbqLink, selector: "[kbq-link]", inputs: ["tabIndex", "disabled", "pseudo", "noUnderline", "big", "compact", "useVisited", "print"], exportAs: ["kbqLink"] }, { kind: "directive", type: KbqFileDropDirective, selector: "[kbqFileDrop]", outputs: ["filesDropped"], exportAs: ["kbqFileDrop"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", 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: {
                         class: 'kbq-single-file-upload'
-                    }, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"file?.hasError\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!file) {\n        <div class=\"dropzone\">\n            <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n            <!-- prettier-ignore -->\n            <span class=\"dropzone__text\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}</span>\n        </div>\n    } @else {\n        @if (file) {\n            <div class=\"file-item\">\n                <div class=\"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\n                                [mode]=\"progressMode\"\n                                [value]=\"asyncData.progress || 0\"\n                            />\n                        }\n                    }\n                    <div\n                        class=\"file-item__text\"\n                        [kbqEllipsisCenter]=\"file.file.name\"\n                        [minVisibleLength]=\"10\"\n                    ></div>\n                </div>\n                <i\n                    kbq-icon-button=\"kbq-xmark-circle_16\"\n                    [color]=\"'contrast'\"\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<kbq-hint class=\"kbq-file-upload__hint\">\n    <ng-content select=\"[hint]\" />\n</kbq-hint>\n@if (errors?.length) {\n    @for (error of errors; track error) {\n        <kbq-hint class=\"kbq-file-upload__hint kbq-error\">\n            {{ error }}\n        </kbq-hint>\n    }\n}\n", styles: [".kbq-file-upload{box-sizing:border-box;display:flex;align-items:center;position:relative}.kbq-file-upload .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload .kbq-focused,.kbq-file-upload .kbq-link.kbq-focused{border:2px solid var(--kbq-file-upload-single-states-focused-focus-outline)}.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.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(.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-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-icon{color:var(--kbq-file-upload-single-states-error-text-block-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-single-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-single-states-disabled-container-border)}.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 .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{border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload.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.dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-container-background)!important}.kbq-multiple-file-upload .kbq-file-upload.dragover.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.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-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error *,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error .kbq-icon{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__file .kbq-icon{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__action .kbq-icon{color:var(--kbq-file-upload-multiple-default-icon-button-color)}.kbq-single-file-upload .kbq-file-upload__hint:not(.kbq-error),.kbq-multiple-file-upload .kbq-file-upload__hint:not(.kbq-error){color:var(--kbq-form-field-hint-text)}.kbq-single-file-upload .file-item__text-wrapper,.kbq-single-file-upload .dropzone__text{font-size:var(--kbq-file-upload-font-single-text-block-font-size);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight);line-height:var(--kbq-file-upload-font-single-text-block-line-height);font-family:var(--kbq-file-upload-font-single-text-block-font-family);text-transform:var(--kbq-file-upload-font-single-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-single-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight);line-height:var(--kbq-file-upload-font-multiple-title-line-height);font-family:var(--kbq-file-upload-font-multiple-title-font-family);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing)}.kbq-multiple-file-upload .multiple__caption,.kbq-multiple-file-upload .multiple__caption .kbq-link{font-size:var(--kbq-file-upload-font-multiple-text-block-font-size);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family);text-transform:var(--kbq-file-upload-font-multiple-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .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-file-upload-font-multiple-grid-font-size);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight);line-height:var(--kbq-file-upload-font-multiple-grid-line-height);font-family:var(--kbq-file-upload-font-multiple-grid-font-family);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing)}.kbq-single-file-upload .kbq-file-upload__hint.kbq-hint .kbq-hint__text,.kbq-multiple-file-upload .kbq-file-upload__hint.kbq-hint .kbq-hint__text{font-size:var(--kbq-form-field-hint-font-text-font-size);font-weight:var(--kbq-form-field-hint-font-text-font-weight);line-height:var(--kbq-form-field-hint-font-text-line-height);font-family:var(--kbq-form-field-hint-font-text-font-family);text-transform:var(--kbq-form-field-hint-font-text-text-transform);font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings);letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing)}\n", ".kbq-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-size-multiple-big-container-min-height: 160px;--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-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-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-single-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);--kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);--kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);--kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);--kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);--kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);--kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);--kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);--kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);--kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);--kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);--kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);--kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);--kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);--kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings)}:where(.kbq-light,.theme-light,.kbq-theme-light){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-theme-fade);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\n", "@keyframes kbq-progress{0%{background-position:0 0}to{background-position:64px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,#0000000a 12px,#ffffff1a 12px 22px,#0000000a 22px 34px,#ffffff1a 34px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical) - 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));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 .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 .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top)}\n"] }]
+                    }, template: "<div\n    kbqFileDrop\n    class=\"kbq-file-upload\"\n    [class.kbq-disabled]=\"disabled\"\n    [class.kbq-error]=\"file?.hasError\"\n    (filesDropped)=\"onFileDropped($event)\"\n>\n    @if (!file) {\n        <div class=\"dropzone\">\n            <i kbq-icon=\"kbq-cloud-arrow-up-o_24\"></i>\n            <!-- prettier-ignore -->\n            <span class=\"dropzone__text\">{{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}</span>\n        </div>\n    } @else {\n        @if (file) {\n            <div class=\"file-item\">\n                <div class=\"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\n                                [mode]=\"progressMode\"\n                                [value]=\"asyncData.progress || 0\"\n                            />\n                        }\n                    }\n                    <div\n                        class=\"file-item__text\"\n                        [kbqEllipsisCenter]=\"file.file.name\"\n                        [minVisibleLength]=\"10\"\n                    ></div>\n                </div>\n                <i\n                    kbq-icon-button=\"kbq-xmark-circle_16\"\n                    [color]=\"'contrast'\"\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 .dropzone,.kbq-file-upload .file-item{display:flex;align-items:center}.kbq-file-upload .kbq-ellipsis-center{position:relative;display:flex}.kbq-file-upload .kbq-ellipsis-center .data-text-start{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:pre}.kbq-file-upload .kbq-ellipsis-center .data-text-end{flex:1 0 auto;overflow:hidden;white-space:pre}.kbq-file-upload__hint .kbq-hint{margin-top:var(--kbq-size-xxs)}.kbq-file-upload .kbq-focused,.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{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.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(.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-single-file-upload .kbq-file-upload.kbq-error:not(.kbq-disabled) .kbq-icon{color:var(--kbq-file-upload-single-states-error-text-block-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-single-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-single-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-single-states-disabled-container-border)}.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 .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{border-bottom-color:var(--kbq-file-upload-multiple-default-grid-divider-color)}.kbq-multiple-file-upload .kbq-file-upload.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.dragover .kbq-file-multiple-uploaded__header{border-bottom-color:var(--kbq-file-upload-multiple-states-on-drag-container-background)!important}.kbq-multiple-file-upload .kbq-file-upload.dragover.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-on-drag-container-border)}.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-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-icon,.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled .kbq-link{color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload.kbq-disabled.selected .dropzone{border-top-color:var(--kbq-file-upload-multiple-states-disabled-container-border)}.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error *,.kbq-multiple-file-upload .kbq-file-upload:not(.kbq-disabled) .kbq-file-upload__row.error .kbq-icon{color:var(--kbq-file-upload-multiple-states-error-text-block-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__file .kbq-icon{color:var(--kbq-file-upload-multiple-default-left-icon-color)}.kbq-multiple-file-upload .kbq-file-upload .multiple__uploaded-item .kbq-file-upload__action .kbq-icon{color:var(--kbq-file-upload-multiple-default-icon-button-color)}.kbq-file-upload__hint .kbq-hint{color:var(--kbq-foreground-contrast-secondary)}.kbq-single-file-upload .file-item__text-wrapper,.kbq-single-file-upload .dropzone__text{font-size:var(--kbq-file-upload-font-single-text-block-font-size);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight);line-height:var(--kbq-file-upload-font-single-text-block-line-height);font-family:var(--kbq-file-upload-font-single-text-block-font-family);text-transform:var(--kbq-file-upload-font-single-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-single-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight);line-height:var(--kbq-file-upload-font-multiple-title-line-height);font-family:var(--kbq-file-upload-font-multiple-title-font-family);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing)}.kbq-multiple-file-upload .multiple__caption,.kbq-multiple-file-upload .multiple__caption .kbq-link{font-size:var(--kbq-file-upload-font-multiple-text-block-font-size);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family);text-transform:var(--kbq-file-upload-font-multiple-text-block-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-text-block-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing)}.kbq-multiple-file-upload .kbq-file-multiple-uploaded__header,.kbq-multiple-file-upload .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-file-upload-font-multiple-grid-font-size);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight);line-height:var(--kbq-file-upload-font-multiple-grid-line-height);font-family:var(--kbq-file-upload-font-multiple-grid-font-family);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform);font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings);letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing)}.kbq-file-upload__hint .kbq-hint .kbq-hint__text{font-size:var(--kbq-typography-text-compact-font-size);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", ".kbq-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-size-multiple-big-container-min-height: 160px;--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-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-font-single-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-single-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-single-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-single-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-single-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-single-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-single-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-title-font-size: var(--kbq-typography-subheading-font-size);--kbq-file-upload-font-multiple-title-line-height: var(--kbq-typography-subheading-line-height);--kbq-file-upload-font-multiple-title-letter-spacing: var(--kbq-typography-subheading-letter-spacing);--kbq-file-upload-font-multiple-title-font-weight: var(--kbq-typography-subheading-font-weight);--kbq-file-upload-font-multiple-title-font-family: var(--kbq-typography-subheading-font-family);--kbq-file-upload-font-multiple-title-text-transform: var(--kbq-typography-subheading-text-transform);--kbq-file-upload-font-multiple-title-font-feature-settings: var(--kbq-typography-subheading-font-feature-settings);--kbq-file-upload-font-multiple-text-block-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-text-block-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-text-block-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-text-block-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-text-block-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-text-block-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-text-block-font-feature-settings: var( --kbq-typography-text-normal-font-feature-settings );--kbq-file-upload-font-multiple-grid-font-size: var(--kbq-typography-text-normal-font-size);--kbq-file-upload-font-multiple-grid-line-height: var(--kbq-typography-text-normal-line-height);--kbq-file-upload-font-multiple-grid-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);--kbq-file-upload-font-multiple-grid-font-weight: var(--kbq-typography-text-normal-font-weight);--kbq-file-upload-font-multiple-grid-font-family: var(--kbq-typography-text-normal-font-family);--kbq-file-upload-font-multiple-grid-text-transform: var(--kbq-typography-text-normal-text-transform);--kbq-file-upload-font-multiple-grid-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);--kbq-form-field-hint-font-text-font-size: var(--kbq-typography-text-compact-font-size);--kbq-form-field-hint-font-text-line-height: var(--kbq-typography-text-compact-line-height);--kbq-form-field-hint-font-text-letter-spacing: var(--kbq-typography-text-compact-letter-spacing);--kbq-form-field-hint-font-text-font-weight: var(--kbq-typography-text-compact-font-weight);--kbq-form-field-hint-font-text-font-family: var(--kbq-typography-text-compact-font-family);--kbq-form-field-hint-font-text-text-transform: var(--kbq-typography-text-compact-text-transform);--kbq-form-field-hint-font-text-font-feature-settings: var(--kbq-typography-text-compact-font-feature-settings)}:where(.kbq-light,.theme-light,.kbq-theme-light){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--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-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-states-background-error-less);--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-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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--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-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-theme-fade);--kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-states-background-error-less);--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-text-block-color: var(--kbq-states-foreground-disabled);--kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);--kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary)}\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));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 .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 .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
                     args: [KBQ_FILE_UPLOAD_CONFIGURATION]
-                }] }, { type: i10.KbqLocaleService, decorators: [{
+                }] }, { type: i9.KbqLocaleService, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -536,6 +582,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
             }], input: [{
                 type: ViewChild,
                 args: ['input']
+            }], hint: [{
+                type: ContentChildren,
+                args: [KbqHint]
             }] } });
 
 class KbqFileUploadModule {