@koobiq/components 17.6.1 → 17.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/alert/alert.module.d.ts +3 -4
- package/autocomplete/autocomplete.module.d.ts +1 -1
- package/badge/badge.module.d.ts +3 -4
- package/button/button.module.d.ts +4 -5
- package/code-block/code-block.module.d.ts +6 -7
- package/core/forms/_forms-theme.scss +7 -15
- package/core/forms/_forms.scss +3 -9
- package/core/forms/forms-tokens.scss +39 -0
- package/core/option/_optgroup-theme.scss +4 -10
- package/core/option/_option-action-theme.scss +7 -15
- package/core/option/_option-theme.scss +13 -24
- package/core/option/action.scss +4 -0
- package/core/option/optgroup-tokens.scss +26 -0
- package/core/option/optgroup.scss +4 -5
- package/core/option/option-action-tokens.scss +21 -0
- package/core/option/option-module.d.ts +2 -3
- package/core/option/option-tokens.scss +115 -0
- package/core/option/option.scss +5 -3
- package/core/styles/_koobiq-theme.scss +7 -37
- package/core/styles/theming/_scrollbar-theme.scss +10 -11
- package/core/styles/theming/scrollbar-tokens.scss +34 -0
- package/datepicker/datepicker-module.d.ts +8 -8
- package/dl/dl.module.d.ts +3 -4
- package/dropdown/dropdown.module.d.ts +4 -4
- package/empty-state/empty-state.module.d.ts +3 -4
- package/esm2022/alert/alert.component.mjs +3 -4
- package/esm2022/alert/alert.module.mjs +3 -7
- package/esm2022/autocomplete/autocomplete.module.mjs +15 -5
- package/esm2022/badge/badge.module.mjs +3 -7
- package/esm2022/button/button.module.mjs +3 -7
- package/esm2022/code-block/actionbar.component.mjs +6 -7
- package/esm2022/code-block/code-block.component.mjs +8 -9
- package/esm2022/code-block/code-block.module.mjs +4 -8
- package/esm2022/core/option/action.mjs +14 -25
- package/esm2022/core/option/optgroup.mjs +3 -3
- package/esm2022/core/option/option-module.mjs +4 -5
- package/esm2022/core/option/option.mjs +5 -6
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/datepicker/calendar-body.component.mjs +3 -3
- package/esm2022/datepicker/calendar-header.component.mjs +8 -8
- package/esm2022/datepicker/datepicker-module.mjs +10 -9
- package/esm2022/datepicker/datepicker-toggle.component.mjs +5 -6
- package/esm2022/datepicker/month-view.component.mjs +4 -5
- package/esm2022/dl/dl.module.mjs +3 -7
- package/esm2022/dropdown/dropdown-item.component.mjs +5 -6
- package/esm2022/dropdown/dropdown.module.mjs +8 -9
- package/esm2022/empty-state/empty-state.module.mjs +3 -7
- package/esm2022/file-upload/file-upload.module.mjs +12 -9
- package/esm2022/file-upload/multiple-file-upload.component.mjs +10 -10
- package/esm2022/file-upload/single-file-upload.component.mjs +10 -10
- package/esm2022/form-field/form-field.mjs +7 -8
- package/esm2022/form-field/form-field.module.mjs +9 -5
- package/esm2022/form-field/password-hint.mjs +3 -3
- package/esm2022/form-field/password-toggle.mjs +3 -3
- package/esm2022/icon/icon.module.mjs +3 -7
- package/esm2022/input/input.module.mjs +3 -7
- package/esm2022/link/link.module.mjs +3 -7
- package/esm2022/list/list-selection.component.mjs +4 -5
- package/esm2022/list/list.module.mjs +3 -7
- package/esm2022/loader-overlay/loader-overlay.component.mjs +4 -5
- package/esm2022/loader-overlay/loader-overlay.module.mjs +3 -7
- package/esm2022/markdown/markdown.module.mjs +4 -5
- package/esm2022/modal/modal.component.mjs +7 -7
- package/esm2022/modal/modal.module.mjs +12 -9
- package/esm2022/navbar/navbar-item.component.mjs +30 -31
- package/esm2022/navbar/navbar.module.mjs +3 -7
- package/esm2022/popover/popover-confirm.component.mjs +4 -4
- package/esm2022/popover/popover.component.mjs +8 -8
- package/esm2022/popover/popover.module.mjs +40 -7
- package/esm2022/progress-bar/progress-bar.component.mjs +3 -4
- package/esm2022/progress-bar/progress-bar.module.mjs +3 -7
- package/esm2022/progress-spinner/progress-spinner.component.mjs +3 -3
- package/esm2022/progress-spinner/progress-spinner.module.mjs +7 -8
- package/esm2022/radio/radio.component.mjs +3 -3
- package/esm2022/radio/radio.module.mjs +4 -5
- package/esm2022/risk-level/risk-level.component.mjs +3 -3
- package/esm2022/risk-level/risk-level.module.mjs +3 -7
- package/esm2022/scrollbar/scrollbar.component.mjs +3 -3
- package/esm2022/select/select.component.mjs +8 -8
- package/esm2022/select/select.module.mjs +11 -13
- package/esm2022/sidebar/sidebar.component.mjs +3 -4
- package/esm2022/sidepanel/sidepanel-container.component.mjs +5 -6
- package/esm2022/sidepanel/sidepanel-directives.mjs +30 -29
- package/esm2022/sidepanel/sidepanel.module.mjs +3 -7
- package/esm2022/splitter/splitter.component.mjs +3 -4
- package/esm2022/splitter/splitter.module.mjs +3 -7
- package/esm2022/table/table.module.mjs +3 -7
- package/esm2022/tabs/tab-group.component.mjs +9 -10
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +3 -3
- package/esm2022/tabs/tabs.module.mjs +3 -7
- package/esm2022/tags/tag-list.component.mjs +3 -4
- package/esm2022/tags/tag.module.mjs +4 -5
- package/esm2022/textarea/textarea.module.mjs +4 -5
- package/esm2022/timepicker/timepicker.module.mjs +3 -7
- package/esm2022/timezone/timezone-option.component.mjs +6 -6
- package/esm2022/timezone/timezone-select.component.mjs +7 -7
- package/esm2022/timezone/timezone.module.mjs +10 -9
- package/esm2022/toast/toast.component.mjs +6 -6
- package/esm2022/toast/toast.module.mjs +10 -9
- package/esm2022/toggle/toggle.module.mjs +4 -5
- package/esm2022/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/tooltip/tooltip.module.mjs +11 -5
- package/esm2022/tree/tree-option.component.mjs +5 -6
- package/esm2022/tree/tree.module.mjs +3 -7
- package/esm2022/tree-select/tree-select.component.mjs +7 -7
- package/esm2022/tree-select/tree-select.module.mjs +11 -12
- package/fesm2022/koobiq-components-alert.mjs +4 -9
- package/fesm2022/koobiq-components-alert.mjs.map +1 -1
- package/fesm2022/koobiq-components-autocomplete.mjs +14 -4
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-badge.mjs +2 -6
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +2 -6
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +15 -20
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +22 -33
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +21 -20
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-dl.mjs +2 -6
- package/fesm2022/koobiq-components-dl.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +16 -17
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-empty-state.mjs +2 -6
- package/fesm2022/koobiq-components-empty-state.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +22 -19
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +17 -13
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +2 -6
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-input.mjs +2 -6
- package/fesm2022/koobiq-components-input.mjs.map +1 -1
- package/fesm2022/koobiq-components-link.mjs +2 -6
- package/fesm2022/koobiq-components-link.mjs.map +1 -1
- package/fesm2022/koobiq-components-list.mjs +5 -10
- package/fesm2022/koobiq-components-list.mjs.map +1 -1
- package/fesm2022/koobiq-components-loader-overlay.mjs +5 -10
- package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
- package/fesm2022/koobiq-components-markdown.mjs +3 -4
- package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-modal.mjs +18 -15
- package/fesm2022/koobiq-components-modal.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +32 -36
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-popover.mjs +47 -14
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-bar.mjs +4 -9
- package/fesm2022/koobiq-components-progress-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-spinner.mjs +8 -9
- package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
- package/fesm2022/koobiq-components-radio.mjs +5 -6
- package/fesm2022/koobiq-components-radio.mjs.map +1 -1
- package/fesm2022/koobiq-components-risk-level.mjs +4 -8
- package/fesm2022/koobiq-components-risk-level.mjs.map +1 -1
- package/fesm2022/koobiq-components-scrollbar.mjs +2 -2
- package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +17 -19
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidebar.mjs +2 -3
- package/fesm2022/koobiq-components-sidebar.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidepanel.mjs +35 -38
- package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
- package/fesm2022/koobiq-components-splitter.mjs +4 -9
- package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
- package/fesm2022/koobiq-components-table.mjs +2 -6
- package/fesm2022/koobiq-components-table.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +8 -13
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +5 -7
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-textarea.mjs +3 -4
- package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
- package/fesm2022/koobiq-components-timepicker.mjs +2 -6
- package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +19 -18
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-toast.mjs +14 -13
- package/fesm2022/koobiq-components-toast.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +3 -4
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +12 -6
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +16 -17
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +10 -15
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/file-upload/file-upload.module.d.ts +12 -12
- package/file-upload/single-file-upload.component.d.ts +1 -1
- package/form-field/form-field-tokens.scss +12 -0
- package/form-field/form-field.module.d.ts +3 -3
- package/icon/icon.module.d.ts +3 -4
- package/input/input.module.d.ts +5 -6
- package/link/link.module.d.ts +2 -3
- package/list/list.module.d.ts +3 -4
- package/loader-overlay/loader-overlay.module.d.ts +4 -5
- package/markdown/markdown.module.d.ts +4 -5
- package/modal/modal.module.d.ts +7 -7
- package/navbar/navbar.module.d.ts +5 -6
- package/package.json +4 -4
- package/popover/popover.module.d.ts +7 -7
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/progress-bar/_progress-bar-theme.scss +6 -12
- package/progress-bar/progress-bar-tokens.scss +36 -0
- package/progress-bar/progress-bar.module.d.ts +2 -3
- package/progress-bar/progress-bar.scss +4 -4
- package/progress-spinner/_progress-spinner-theme.scss +5 -11
- package/progress-spinner/progress-spinner-tokens.scss +38 -0
- package/progress-spinner/progress-spinner.module.d.ts +3 -3
- package/progress-spinner/progress-spinner.scss +4 -4
- package/radio/_radio-theme.scss +21 -36
- package/radio/radio-tokens.scss +166 -0
- package/radio/radio.module.d.ts +3 -4
- package/radio/radio.scss +4 -5
- package/risk-level/_risk-level-theme.scss +20 -24
- package/risk-level/risk-level-tokens.scss +72 -0
- package/risk-level/risk-level.component.scss +5 -3
- package/risk-level/risk-level.module.d.ts +3 -4
- package/schematics/ng-add/index.js +2 -2
- package/scrollbar/_scrollbar-component-theme.scss +13 -31
- package/scrollbar/scrollbar-tokens.scss +34 -0
- package/scrollbar/scrollbar.component.scss +4 -3
- package/select/_select-theme.scss +11 -22
- package/select/select-tokens.scss +59 -0
- package/select/select.component.d.ts +1 -1
- package/select/select.module.d.ts +7 -7
- package/select/select.scss +5 -3
- package/sidepanel/_sidepanel-theme.scss +6 -12
- package/sidepanel/sidepanel-tokens.scss +48 -0
- package/sidepanel/sidepanel.module.d.ts +8 -9
- package/sidepanel/sidepanel.scss +4 -4
- package/splitter/_splitter-theme.scss +2 -6
- package/splitter/splitter-tokens.scss +7 -0
- package/splitter/splitter.module.d.ts +2 -3
- package/splitter/splitter.scss +4 -0
- package/table/table.module.d.ts +3 -4
- package/tabs/_tabs-common.scss +0 -6
- package/tabs/_tabs-theme.scss +30 -65
- package/tabs/tab-group.scss +0 -3
- package/tabs/tab-header.scss +0 -3
- package/tabs/tab-nav-bar/tab-nav-bar.scss +0 -2
- package/tabs/tabs-tokens.scss +136 -0
- package/tabs/tabs.module.d.ts +7 -8
- package/tags/_tag-theme.scss +17 -26
- package/tags/tag-input-tokens.scss +14 -0
- package/tags/tag-list.scss +0 -6
- package/tags/tag-tokens.scss +151 -0
- package/tags/tag.module.d.ts +2 -3
- package/tags/tag.scss +0 -3
- package/textarea/textarea.module.d.ts +4 -5
- package/timepicker/timepicker.module.d.ts +4 -5
- package/timezone/timezone.module.d.ts +9 -9
- package/toast/toast.module.d.ts +7 -7
- package/toggle/toggle.module.d.ts +3 -4
- package/tooltip/tooltip.module.d.ts +3 -3
- package/tree/tree.module.d.ts +3 -4
- package/tree-select/tree-select.component.d.ts +1 -1
- package/tree-select/tree-select.module.d.ts +7 -7
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, Directive, Output, InjectionToken, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, Self, Input, ContentChild, ViewChild, NgModule } from '@angular/core';
|
|
3
|
-
import * as
|
|
4
|
-
import {
|
|
3
|
+
import * as i8 from '@angular/common';
|
|
4
|
+
import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
6
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import { KbqButtonModule } from '@koobiq/components/button';
|
|
8
8
|
import * as i10 from '@koobiq/components/core';
|
|
9
9
|
import { ruRULocaleData, KBQ_LOCALE_SERVICE, KbqDataSizePipe } from '@koobiq/components/core';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i6 from '@koobiq/components/ellipsis-center';
|
|
11
11
|
import { KbqEllipsisCenterModule } from '@koobiq/components/ellipsis-center';
|
|
12
|
-
import * as
|
|
12
|
+
import * as i5 from '@koobiq/components/form-field';
|
|
13
13
|
import { KbqFormFieldModule } from '@koobiq/components/form-field';
|
|
14
|
-
import * as
|
|
14
|
+
import * as i3 from '@koobiq/components/icon';
|
|
15
15
|
import { KbqIconModule } from '@koobiq/components/icon';
|
|
16
|
-
import * as
|
|
16
|
+
import * as i7 from '@koobiq/components/link';
|
|
17
17
|
import { KbqLinkModule } from '@koobiq/components/link';
|
|
18
|
-
import * as
|
|
18
|
+
import * as i4 from '@koobiq/components/list';
|
|
19
19
|
import { KbqListModule } from '@koobiq/components/list';
|
|
20
|
-
import * as
|
|
20
|
+
import * as i2 from '@koobiq/components/progress-spinner';
|
|
21
21
|
import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
|
|
22
22
|
import { KbqToolTipModule } from '@koobiq/components/tooltip';
|
|
23
23
|
import { Subscription, BehaviorSubject } from 'rxjs';
|
|
@@ -293,13 +293,13 @@ class KbqMultipleFileUploadComponent {
|
|
|
293
293
|
this.separatedCaptionTextForCompactSize = this.config.captionTextForCompactSize.split('{{ browseLink }}');
|
|
294
294
|
}
|
|
295
295
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqMultipleFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: KBQ_FILE_UPLOAD_CONFIGURATION, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
296
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqMultipleFileUploadComponent, selector: "kbq-multiple-file-upload,kbq-file-upload[multiple]", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", 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 <ng-container *ngIf=\"!files.length; else fileOutput\">\n <div class=\"dropzone\">\n <ng-container *ngIf=\"size === 'default'; else compactCaption\">\n <i kbq-icon=\"mc-upload-to-cloud_32\"></i>\n <div class=\"dropzone__text\">\n <span class=\"multiple__header\">{{ config.title }}</span>\n <div>\n <!-- prettier-ignore -->\n <span class=\"multiple__caption\">\n {{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\" /></label>{{ separatedCaptionText[1] }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</div>\n\n<div class=\"kbq-file-upload__info-section\">\n <kbq-hint class=\"kbq-file-upload__hint\">\n <ng-content select=\"[hint]\" />\n </kbq-hint>\n\n <ng-container *ngIf=\"hasErrors\">\n <kbq-hint\n *ngFor=\"let error of errors\"\n class=\"kbq-file-upload__hint kbq-error\"\n >\n {{ error }}\n </kbq-hint>\n </ng-container>\n</div>\n\n<ng-template #fileOutput>\n <div class=\"file-upload__dropzone\">\n <div class=\"kbq-file-upload__grid\">\n <div class=\"kbq-file-multiple-uploaded__header\">\n <div class=\"kbq-file-multiple-uploaded__header-inner\">\n <div\n *ngFor=\"let column of columnDefs\"\n [class]=\"'kbq-file-upload__' + column.cssClass\"\n >\n {{ column.header }}\n </div>\n </div>\n </div>\n\n <kbq-list-selection\n [autoSelect]=\"false\"\n [disabled]=\"disabled\"\n >\n <kbq-list-option\n *ngFor=\"let file of files; let index = index\"\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 <ng-container\n *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\"\n >\n <ng-container\n *ngIf=\"!asyncData.loading\"\n [ngTemplateOutlet]=\"$any(customFileIcon)\"\n [ngTemplateOutletContext]=\"{ $implicit: file }\"\n />\n\n <kbq-progress-spinner\n *ngIf=\"asyncData.loading\"\n class=\"kbq-file-upload-name-cell__icon\"\n [mode]=\"progressMode\"\n [value]=\"asyncData.progress || 0\"\n />\n </ng-container>\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=\"mc-close-circle_16\"\n (click)=\"deleteFile(index, $event)\"\n ></i>\n </div>\n </div>\n </kbq-list-option>\n </kbq-list-selection>\n </div>\n\n <div class=\"btn-upload\">\n <div class=\"dropzone\">\n <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ separatedCaptionTextWhenSelected[0] }}\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</ng-template>\n\n<ng-template #compactCaption>\n <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ separatedCaptionTextForCompactSize[0] }}\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</ng-template>\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, 14px);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-single-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-single-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing, -.006em)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size, 18px);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight, 600);line-height:var(--kbq-file-upload-font-multiple-title-line-height, 26px);font-family:var(--kbq-file-upload-font-multiple-title-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing, normal)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing, -.006em)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-grid-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-grid-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing, -.006em)}.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, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-file-upload{--kbq-file-upload-size-single-container-border-radius: 8px;--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: 8px;--kbq-file-upload-size-single-container-padding-vertical: 12px;--kbq-file-upload-size-single-container-padding-horizontal: 12px;--kbq-file-upload-size-single-text-block-padding-vertical: 2px;--kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;--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: 8px;--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;--kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;--kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;--kbq-file-upload-font-single-text-block-font-size: 14px;--kbq-file-upload-font-single-text-block-line-height: 20px;--kbq-file-upload-font-single-text-block-letter-spacing: -.006em;--kbq-file-upload-font-single-text-block-font-weight: normal;--kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-single-text-block-text-transform: null;--kbq-file-upload-font-single-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-title-font-size: 18px;--kbq-file-upload-font-multiple-title-line-height: 26px;--kbq-file-upload-font-multiple-title-letter-spacing: normal;--kbq-file-upload-font-multiple-title-font-weight: 600;--kbq-file-upload-font-multiple-title-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-title-text-transform: null;--kbq-file-upload-font-multiple-title-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-file-upload-font-multiple-text-block-font-size: 14px;--kbq-file-upload-font-multiple-text-block-line-height: 20px;--kbq-file-upload-font-multiple-text-block-letter-spacing: -.006em;--kbq-file-upload-font-multiple-text-block-font-weight: normal;--kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-text-block-text-transform: null;--kbq-file-upload-font-multiple-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-grid-font-size: 14px;--kbq-file-upload-font-multiple-grid-line-height: 20px;--kbq-file-upload-font-multiple-grid-letter-spacing: -.006em;--kbq-file-upload-font-multiple-grid-font-weight: normal;--kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-grid-text-transform: null;--kbq-file-upload-font-multiple-grid-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-form-field-hint-font-text-font-size: 12px;--kbq-form-field-hint-font-text-line-height: 16px;--kbq-form-field-hint-font-text-letter-spacing: normal;--kbq-form-field-hint-font-text-font-weight: normal;--kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-hint-font-text-text-transform: null;--kbq-form-field-hint-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%)}\n", ".kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width, 1px);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px) var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height, 160px);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width, 320px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__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, 0px);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical, 12px) var(--kbq-file-upload-size-single-container-padding-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__size,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) + 2px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) + 2px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px));border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i4.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i5.KbqListSelection, selector: "kbq-list-selection", inputs: ["disabled", "autoSelect", "noUnselectLast", "horizontal", "tabIndex", "compareWith"], outputs: ["onSelectAll", "onCopy", "selectionChange"], exportAs: ["kbqListSelection"] }, { kind: "component", type: i5.KbqListOption, selector: "kbq-list-option", inputs: ["checkboxPosition", "value", "disabled", "showCheckbox", "selected"], exportAs: ["kbqListOption"] }, { kind: "component", type: i6.KbqHint, selector: "kbq-hint", inputs: ["color", "id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i7.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i8.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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.KbqDataSizePipe, name: "kbqDataSize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
296
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.0", type: KbqMultipleFileUploadComponent, selector: "kbq-multiple-file-upload,kbq-file-upload[multiple]", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", 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=\"mc-upload-to-cloud_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=\"mc-upload-to-cloud_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=\"mc-close-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=\"mc-upload-to-cloud_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, 14px);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-single-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-single-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing, -.006em)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size, 18px);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight, 600);line-height:var(--kbq-file-upload-font-multiple-title-line-height, 26px);font-family:var(--kbq-file-upload-font-multiple-title-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing, normal)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing, -.006em)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-grid-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-grid-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing, -.006em)}.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, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-file-upload{--kbq-file-upload-size-single-container-border-radius: 8px;--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: 8px;--kbq-file-upload-size-single-container-padding-vertical: 12px;--kbq-file-upload-size-single-container-padding-horizontal: 12px;--kbq-file-upload-size-single-text-block-padding-vertical: 2px;--kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;--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: 8px;--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;--kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;--kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;--kbq-file-upload-font-single-text-block-font-size: 14px;--kbq-file-upload-font-single-text-block-line-height: 20px;--kbq-file-upload-font-single-text-block-letter-spacing: -.006em;--kbq-file-upload-font-single-text-block-font-weight: normal;--kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-single-text-block-text-transform: null;--kbq-file-upload-font-single-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-title-font-size: 18px;--kbq-file-upload-font-multiple-title-line-height: 26px;--kbq-file-upload-font-multiple-title-letter-spacing: normal;--kbq-file-upload-font-multiple-title-font-weight: 600;--kbq-file-upload-font-multiple-title-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-title-text-transform: null;--kbq-file-upload-font-multiple-title-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-file-upload-font-multiple-text-block-font-size: 14px;--kbq-file-upload-font-multiple-text-block-line-height: 20px;--kbq-file-upload-font-multiple-text-block-letter-spacing: -.006em;--kbq-file-upload-font-multiple-text-block-font-weight: normal;--kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-text-block-text-transform: null;--kbq-file-upload-font-multiple-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-grid-font-size: 14px;--kbq-file-upload-font-multiple-grid-line-height: 20px;--kbq-file-upload-font-multiple-grid-letter-spacing: -.006em;--kbq-file-upload-font-multiple-grid-font-weight: normal;--kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-grid-text-transform: null;--kbq-file-upload-font-multiple-grid-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-form-field-hint-font-text-font-size: 12px;--kbq-form-field-hint-font-text-line-height: 16px;--kbq-form-field-hint-font-text-letter-spacing: normal;--kbq-form-field-hint-font-text-font-weight: normal;--kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-hint-font-text-text-transform: null;--kbq-form-field-hint-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%)}\n", ".kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width, 1px);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px) var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height, 160px);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width, 320px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__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, 0px);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical, 12px) var(--kbq-file-upload-size-single-container-padding-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__size,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) + 2px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) + 2px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px));border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\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 }); }
|
|
297
297
|
}
|
|
298
298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqMultipleFileUploadComponent, decorators: [{
|
|
299
299
|
type: Component,
|
|
300
300
|
args: [{ selector: 'kbq-multiple-file-upload,kbq-file-upload[multiple]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
301
301
|
class: 'kbq-multiple-file-upload'
|
|
302
|
-
}, 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 <ng-container *ngIf=\"!files.length; else fileOutput\">\n <div class=\"dropzone\">\n <ng-container *ngIf=\"size === 'default'; else compactCaption\">\n <i kbq-icon=\"mc-upload-to-cloud_32\"></i>\n <div class=\"dropzone__text\">\n <span class=\"multiple__header\">{{ config.title }}</span>\n <div>\n <!-- prettier-ignore -->\n <span class=\"multiple__caption\">\n {{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<ng-container *ngTemplateOutlet=\"inputTemplate\" /></label>{{ separatedCaptionText[1] }}\n </span>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n</div>\n\n<div class=\"kbq-file-upload__info-section\">\n <kbq-hint class=\"kbq-file-upload__hint\">\n <ng-content select=\"[hint]\" />\n </kbq-hint>\n\n <ng-container *ngIf=\"hasErrors\">\n <kbq-hint\n *ngFor=\"let error of errors\"\n class=\"kbq-file-upload__hint kbq-error\"\n >\n {{ error }}\n </kbq-hint>\n </ng-container>\n</div>\n\n<ng-template #fileOutput>\n <div class=\"file-upload__dropzone\">\n <div class=\"kbq-file-upload__grid\">\n <div class=\"kbq-file-multiple-uploaded__header\">\n <div class=\"kbq-file-multiple-uploaded__header-inner\">\n <div\n *ngFor=\"let column of columnDefs\"\n [class]=\"'kbq-file-upload__' + column.cssClass\"\n >\n {{ column.header }}\n </div>\n </div>\n </div>\n\n <kbq-list-selection\n [autoSelect]=\"false\"\n [disabled]=\"disabled\"\n >\n <kbq-list-option\n *ngFor=\"let file of files; let index = index\"\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 <ng-container\n *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\"\n >\n <ng-container\n *ngIf=\"!asyncData.loading\"\n [ngTemplateOutlet]=\"$any(customFileIcon)\"\n [ngTemplateOutletContext]=\"{ $implicit: file }\"\n />\n\n <kbq-progress-spinner\n *ngIf=\"asyncData.loading\"\n class=\"kbq-file-upload-name-cell__icon\"\n [mode]=\"progressMode\"\n [value]=\"asyncData.progress || 0\"\n />\n </ng-container>\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=\"mc-close-circle_16\"\n (click)=\"deleteFile(index, $event)\"\n ></i>\n </div>\n </div>\n </kbq-list-option>\n </kbq-list-selection>\n </div>\n\n <div class=\"btn-upload\">\n <div class=\"dropzone\">\n <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ separatedCaptionTextWhenSelected[0] }}\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</ng-template>\n\n<ng-template #compactCaption>\n <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n <span class=\"dropzone__text multiple__caption\">\n {{ separatedCaptionTextForCompactSize[0] }}\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</ng-template>\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, 14px);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-single-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-single-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing, -.006em)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size, 18px);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight, 600);line-height:var(--kbq-file-upload-font-multiple-title-line-height, 26px);font-family:var(--kbq-file-upload-font-multiple-title-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing, normal)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing, -.006em)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-grid-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-grid-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing, -.006em)}.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, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-file-upload{--kbq-file-upload-size-single-container-border-radius: 8px;--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: 8px;--kbq-file-upload-size-single-container-padding-vertical: 12px;--kbq-file-upload-size-single-container-padding-horizontal: 12px;--kbq-file-upload-size-single-text-block-padding-vertical: 2px;--kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;--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: 8px;--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;--kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;--kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;--kbq-file-upload-font-single-text-block-font-size: 14px;--kbq-file-upload-font-single-text-block-line-height: 20px;--kbq-file-upload-font-single-text-block-letter-spacing: -.006em;--kbq-file-upload-font-single-text-block-font-weight: normal;--kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-single-text-block-text-transform: null;--kbq-file-upload-font-single-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-title-font-size: 18px;--kbq-file-upload-font-multiple-title-line-height: 26px;--kbq-file-upload-font-multiple-title-letter-spacing: normal;--kbq-file-upload-font-multiple-title-font-weight: 600;--kbq-file-upload-font-multiple-title-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-title-text-transform: null;--kbq-file-upload-font-multiple-title-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-file-upload-font-multiple-text-block-font-size: 14px;--kbq-file-upload-font-multiple-text-block-line-height: 20px;--kbq-file-upload-font-multiple-text-block-letter-spacing: -.006em;--kbq-file-upload-font-multiple-text-block-font-weight: normal;--kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-text-block-text-transform: null;--kbq-file-upload-font-multiple-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-grid-font-size: 14px;--kbq-file-upload-font-multiple-grid-line-height: 20px;--kbq-file-upload-font-multiple-grid-letter-spacing: -.006em;--kbq-file-upload-font-multiple-grid-font-weight: normal;--kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-grid-text-transform: null;--kbq-file-upload-font-multiple-grid-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-form-field-hint-font-text-font-size: 12px;--kbq-form-field-hint-font-text-line-height: 16px;--kbq-form-field-hint-font-text-letter-spacing: normal;--kbq-form-field-hint-font-text-font-weight: normal;--kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-hint-font-text-text-transform: null;--kbq-form-field-hint-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%)}\n", ".kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width, 1px);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px) var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height, 160px);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width, 320px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__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, 0px);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical, 12px) var(--kbq-file-upload-size-single-container-padding-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__size,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) + 2px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) + 2px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px));border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"] }]
|
|
302
|
+
}, 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=\"mc-upload-to-cloud_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=\"mc-upload-to-cloud_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=\"mc-close-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=\"mc-upload-to-cloud_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, 14px);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-single-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-single-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing, -.006em)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size, 18px);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight, 600);line-height:var(--kbq-file-upload-font-multiple-title-line-height, 26px);font-family:var(--kbq-file-upload-font-multiple-title-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing, normal)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing, -.006em)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-grid-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-grid-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing, -.006em)}.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, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-file-upload{--kbq-file-upload-size-single-container-border-radius: 8px;--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: 8px;--kbq-file-upload-size-single-container-padding-vertical: 12px;--kbq-file-upload-size-single-container-padding-horizontal: 12px;--kbq-file-upload-size-single-text-block-padding-vertical: 2px;--kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;--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: 8px;--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;--kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;--kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;--kbq-file-upload-font-single-text-block-font-size: 14px;--kbq-file-upload-font-single-text-block-line-height: 20px;--kbq-file-upload-font-single-text-block-letter-spacing: -.006em;--kbq-file-upload-font-single-text-block-font-weight: normal;--kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-single-text-block-text-transform: null;--kbq-file-upload-font-single-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-title-font-size: 18px;--kbq-file-upload-font-multiple-title-line-height: 26px;--kbq-file-upload-font-multiple-title-letter-spacing: normal;--kbq-file-upload-font-multiple-title-font-weight: 600;--kbq-file-upload-font-multiple-title-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-title-text-transform: null;--kbq-file-upload-font-multiple-title-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-file-upload-font-multiple-text-block-font-size: 14px;--kbq-file-upload-font-multiple-text-block-line-height: 20px;--kbq-file-upload-font-multiple-text-block-letter-spacing: -.006em;--kbq-file-upload-font-multiple-text-block-font-weight: normal;--kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-text-block-text-transform: null;--kbq-file-upload-font-multiple-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-grid-font-size: 14px;--kbq-file-upload-font-multiple-grid-line-height: 20px;--kbq-file-upload-font-multiple-grid-letter-spacing: -.006em;--kbq-file-upload-font-multiple-grid-font-weight: normal;--kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-grid-text-transform: null;--kbq-file-upload-font-multiple-grid-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-form-field-hint-font-text-font-size: 12px;--kbq-form-field-hint-font-text-line-height: 16px;--kbq-form-field-hint-font-text-letter-spacing: normal;--kbq-form-field-hint-font-text-font-weight: normal;--kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-hint-font-text-text-transform: null;--kbq-form-field-hint-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%)}\n", ".kbq-multiple-file-upload .kbq-file-upload{border-radius:var(--kbq-file-upload-size-multiple-big-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-multiple-big-container-border-width, 1px);border-style:dashed}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected){justify-content:center;padding:var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px) var(--kbq-file-upload-size-multiple-big-container-padding-vertical, 24px);min-height:var(--kbq-file-upload-size-multiple-big-container-min-height, 160px);min-width:var(--kbq-file-upload-size-multiple-big-container-min-width, 320px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.default:not(.selected) .dropzone__text .multiple__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, 0px);gap:var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected){padding:var(--kbq-file-upload-size-single-container-padding-vertical, 12px) var(--kbq-file-upload-size-single-container-padding-horizontal, 12px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload.compact:not(.selected) .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item{padding:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-list-text{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px)) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) - var(--kbq-list-size-container-focus-outline-width, 2px))}.kbq-multiple-file-upload .kbq-file-upload .kbq-list-option.multiple__uploaded-item .kbq-icon{margin-right:0}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__grid{min-height:144px}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__file,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{width:65%;max-width:65%;gap:var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header-inner .kbq-file-upload__size,.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__size{width:64px;min-width:64px;text-align:left;flex-grow:1}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file{display:flex;align-items:center}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-upload__row .kbq-file-upload__file .file-item__text{margin-left:0;width:90%}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header{border-bottom-width:1px;border-bottom-style:solid}.kbq-multiple-file-upload .kbq-file-upload .kbq-file-multiple-uploaded__header .kbq-file-multiple-uploaded__header-inner{padding:calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, 8px) + 2px) calc(var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, 8px) + 2px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px));border-top-left-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-right-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-top-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-top-style:dashed}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-multiple-file-upload .kbq-file-upload .btn-upload .dropzone .dropzone__text.multiple__caption{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-multiple-file-upload .kbq-file-upload .file-upload__dropzone{width:100%;height:100%}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"] }]
|
|
303
303
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
304
304
|
type: Optional
|
|
305
305
|
}, {
|
|
@@ -496,13 +496,13 @@ class KbqSingleFileUploadComponent {
|
|
|
496
496
|
this.separatedCaptionText = this.config.captionText.split('{{ browseLink }}');
|
|
497
497
|
}
|
|
498
498
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSingleFileUploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: KBQ_FILE_UPLOAD_CONFIGURATION, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
499
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqSingleFileUploadComponent, selector: "kbq-single-file-upload,kbq-file-upload:not([multiple])", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", 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]=\"errors?.length\"\n (filesDropped)=\"onFileDropped($event)\"\n>\n <div\n *ngIf=\"!file; else fileOutput\"\n class=\"dropzone\"\n >\n <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n <!-- prettier-ignore -->\n <span class=\"dropzone__text\">\n {{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}\n </span>\n </div>\n</div>\n\n<kbq-hint class=\"kbq-file-upload__hint\">\n <ng-content select=\"[hint]\" />\n</kbq-hint>\n<ng-container *ngIf=\"errors?.length\">\n <kbq-hint\n *ngFor=\"let error of errors\"\n class=\"kbq-file-upload__hint kbq-error\"\n >\n {{ error }}\n </kbq-hint>\n</ng-container>\n\n<ng-template #fileOutput>\n <div\n *ngIf=\"file\"\n class=\"file-item\"\n >\n <div class=\"file-item__text-wrapper\">\n <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\">\n <ng-content select=\"[kbq-icon]\" />\n </ng-container>\n\n <kbq-progress-spinner\n *ngIf=\"asyncData.loading\"\n [mode]=\"progressMode\"\n [value]=\"asyncData.progress || 0\"\n />\n </ng-container>\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=\"mc-close-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</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, 14px);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-single-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-single-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing, -.006em)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size, 18px);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight, 600);line-height:var(--kbq-file-upload-font-multiple-title-line-height, 26px);font-family:var(--kbq-file-upload-font-multiple-title-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing, normal)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing, -.006em)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-grid-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-grid-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing, -.006em)}.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, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-file-upload{--kbq-file-upload-size-single-container-border-radius: 8px;--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: 8px;--kbq-file-upload-size-single-container-padding-vertical: 12px;--kbq-file-upload-size-single-container-padding-horizontal: 12px;--kbq-file-upload-size-single-text-block-padding-vertical: 2px;--kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;--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: 8px;--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;--kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;--kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;--kbq-file-upload-font-single-text-block-font-size: 14px;--kbq-file-upload-font-single-text-block-line-height: 20px;--kbq-file-upload-font-single-text-block-letter-spacing: -.006em;--kbq-file-upload-font-single-text-block-font-weight: normal;--kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-single-text-block-text-transform: null;--kbq-file-upload-font-single-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-title-font-size: 18px;--kbq-file-upload-font-multiple-title-line-height: 26px;--kbq-file-upload-font-multiple-title-letter-spacing: normal;--kbq-file-upload-font-multiple-title-font-weight: 600;--kbq-file-upload-font-multiple-title-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-title-text-transform: null;--kbq-file-upload-font-multiple-title-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-file-upload-font-multiple-text-block-font-size: 14px;--kbq-file-upload-font-multiple-text-block-line-height: 20px;--kbq-file-upload-font-multiple-text-block-letter-spacing: -.006em;--kbq-file-upload-font-multiple-text-block-font-weight: normal;--kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-text-block-text-transform: null;--kbq-file-upload-font-multiple-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-grid-font-size: 14px;--kbq-file-upload-font-multiple-grid-line-height: 20px;--kbq-file-upload-font-multiple-grid-letter-spacing: -.006em;--kbq-file-upload-font-multiple-grid-font-weight: normal;--kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-grid-text-transform: null;--kbq-file-upload-font-multiple-grid-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-form-field-hint-font-text-font-size: 12px;--kbq-form-field-hint-font-text-line-height: 16px;--kbq-form-field-hint-font-text-letter-spacing: normal;--kbq-form-field-hint-font-text-font-weight: normal;--kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-hint-font-text-text-transform: null;--kbq-form-field-hint-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%)}\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, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px));border-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-single-file-upload .kbq-file-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["color", "id", "value", "mode", "size"] }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i4.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "component", type: i6.KbqHint, selector: "kbq-hint", inputs: ["color", "id", "fillTextOff", "compact"], exportAs: ["kbqHint"] }, { kind: "directive", type: i7.KbqEllipsisCenterDirective, selector: "[kbqEllipsisCenter]", inputs: ["kbqEllipsisCenter", "minVisibleLength"] }, { kind: "directive", type: i8.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: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
499
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.0", type: KbqSingleFileUploadComponent, selector: "kbq-single-file-upload,kbq-file-upload:not([multiple])", inputs: { progressMode: "progressMode", accept: "accept", disabled: "disabled", errors: "errors", 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]=\"errors?.length\"\n (filesDropped)=\"onFileDropped($event)\"\n>\n @if (!file) {\n <div class=\"dropzone\">\n <i kbq-icon=\"mc-upload-to-cloud_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=\"mc-close-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, 14px);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-single-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-single-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing, -.006em)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size, 18px);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight, 600);line-height:var(--kbq-file-upload-font-multiple-title-line-height, 26px);font-family:var(--kbq-file-upload-font-multiple-title-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing, normal)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing, -.006em)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-grid-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-grid-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing, -.006em)}.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, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-file-upload{--kbq-file-upload-size-single-container-border-radius: 8px;--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: 8px;--kbq-file-upload-size-single-container-padding-vertical: 12px;--kbq-file-upload-size-single-container-padding-horizontal: 12px;--kbq-file-upload-size-single-text-block-padding-vertical: 2px;--kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;--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: 8px;--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;--kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;--kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;--kbq-file-upload-font-single-text-block-font-size: 14px;--kbq-file-upload-font-single-text-block-line-height: 20px;--kbq-file-upload-font-single-text-block-letter-spacing: -.006em;--kbq-file-upload-font-single-text-block-font-weight: normal;--kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-single-text-block-text-transform: null;--kbq-file-upload-font-single-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-title-font-size: 18px;--kbq-file-upload-font-multiple-title-line-height: 26px;--kbq-file-upload-font-multiple-title-letter-spacing: normal;--kbq-file-upload-font-multiple-title-font-weight: 600;--kbq-file-upload-font-multiple-title-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-title-text-transform: null;--kbq-file-upload-font-multiple-title-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-file-upload-font-multiple-text-block-font-size: 14px;--kbq-file-upload-font-multiple-text-block-line-height: 20px;--kbq-file-upload-font-multiple-text-block-letter-spacing: -.006em;--kbq-file-upload-font-multiple-text-block-font-weight: normal;--kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-text-block-text-transform: null;--kbq-file-upload-font-multiple-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-grid-font-size: 14px;--kbq-file-upload-font-multiple-grid-line-height: 20px;--kbq-file-upload-font-multiple-grid-letter-spacing: -.006em;--kbq-file-upload-font-multiple-grid-font-weight: normal;--kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-grid-text-transform: null;--kbq-file-upload-font-multiple-grid-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-form-field-hint-font-text-font-size: 12px;--kbq-form-field-hint-font-text-line-height: 16px;--kbq-form-field-hint-font-text-letter-spacing: normal;--kbq-form-field-hint-font-text-font-weight: normal;--kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-hint-font-text-text-transform: null;--kbq-form-field-hint-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%)}\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, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px));border-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-single-file-upload .kbq-file-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\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 }); }
|
|
500
500
|
}
|
|
501
501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqSingleFileUploadComponent, decorators: [{
|
|
502
502
|
type: Component,
|
|
503
503
|
args: [{ selector: 'kbq-single-file-upload,kbq-file-upload:not([multiple])', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
504
504
|
class: 'kbq-single-file-upload'
|
|
505
|
-
}, template: "<div\n kbqFileDrop\n class=\"kbq-file-upload\"\n [class.kbq-disabled]=\"disabled\"\n [class.kbq-error]=\"errors?.length\"\n (filesDropped)=\"onFileDropped($event)\"\n>\n <div\n *ngIf=\"!file; else fileOutput\"\n class=\"dropzone\"\n >\n <i kbq-icon=\"mc-upload-to-cloud_24\"></i>\n <!-- prettier-ignore -->\n <span class=\"dropzone__text\">\n {{ separatedCaptionText[0] }}<label kbq-link pseudo [disabled]=\"disabled\" [tabIndex]=\"-1\" [for]=\"inputId\">{{ config.browseLink }}<input #input type=\"file\" class=\"cdk-visually-hidden\" [id]=\"inputId\" [accept]=\"acceptedFiles\" [disabled]=\"disabled\" (change)=\"onFileSelectedViaClick($event)\"></label>{{ separatedCaptionText[1] }}\n </span>\n </div>\n</div>\n\n<kbq-hint class=\"kbq-file-upload__hint\">\n <ng-content select=\"[hint]\" />\n</kbq-hint>\n<ng-container *ngIf=\"errors?.length\">\n <kbq-hint\n *ngFor=\"let error of errors\"\n class=\"kbq-file-upload__hint kbq-error\"\n >\n {{ error }}\n </kbq-hint>\n</ng-container>\n\n<ng-template #fileOutput>\n <div\n *ngIf=\"file\"\n class=\"file-item\"\n >\n <div class=\"file-item__text-wrapper\">\n <ng-container *ngIf=\"{ loading: file.loading | async, progress: file.progress | async } as asyncData\">\n <ng-container *ngIf=\"!asyncData.loading\">\n <ng-content select=\"[kbq-icon]\" />\n </ng-container>\n\n <kbq-progress-spinner\n *ngIf=\"asyncData.loading\"\n [mode]=\"progressMode\"\n [value]=\"asyncData.progress || 0\"\n />\n </ng-container>\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=\"mc-close-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</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, 14px);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-single-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-single-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing, -.006em)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size, 18px);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight, 600);line-height:var(--kbq-file-upload-font-multiple-title-line-height, 26px);font-family:var(--kbq-file-upload-font-multiple-title-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing, normal)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing, -.006em)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-grid-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-grid-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing, -.006em)}.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, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-file-upload{--kbq-file-upload-size-single-container-border-radius: 8px;--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: 8px;--kbq-file-upload-size-single-container-padding-vertical: 12px;--kbq-file-upload-size-single-container-padding-horizontal: 12px;--kbq-file-upload-size-single-text-block-padding-vertical: 2px;--kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;--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: 8px;--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;--kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;--kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;--kbq-file-upload-font-single-text-block-font-size: 14px;--kbq-file-upload-font-single-text-block-line-height: 20px;--kbq-file-upload-font-single-text-block-letter-spacing: -.006em;--kbq-file-upload-font-single-text-block-font-weight: normal;--kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-single-text-block-text-transform: null;--kbq-file-upload-font-single-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-title-font-size: 18px;--kbq-file-upload-font-multiple-title-line-height: 26px;--kbq-file-upload-font-multiple-title-letter-spacing: normal;--kbq-file-upload-font-multiple-title-font-weight: 600;--kbq-file-upload-font-multiple-title-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-title-text-transform: null;--kbq-file-upload-font-multiple-title-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-file-upload-font-multiple-text-block-font-size: 14px;--kbq-file-upload-font-multiple-text-block-line-height: 20px;--kbq-file-upload-font-multiple-text-block-letter-spacing: -.006em;--kbq-file-upload-font-multiple-text-block-font-weight: normal;--kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-text-block-text-transform: null;--kbq-file-upload-font-multiple-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-grid-font-size: 14px;--kbq-file-upload-font-multiple-grid-line-height: 20px;--kbq-file-upload-font-multiple-grid-letter-spacing: -.006em;--kbq-file-upload-font-multiple-grid-font-weight: normal;--kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-grid-text-transform: null;--kbq-file-upload-font-multiple-grid-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-form-field-hint-font-text-font-size: 12px;--kbq-form-field-hint-font-text-line-height: 16px;--kbq-form-field-hint-font-text-letter-spacing: normal;--kbq-form-field-hint-font-text-font-weight: normal;--kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-hint-font-text-text-transform: null;--kbq-form-field-hint-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%)}\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, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px));border-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-single-file-upload .kbq-file-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"] }]
|
|
505
|
+
}, template: "<div\n kbqFileDrop\n class=\"kbq-file-upload\"\n [class.kbq-disabled]=\"disabled\"\n [class.kbq-error]=\"errors?.length\"\n (filesDropped)=\"onFileDropped($event)\"\n>\n @if (!file) {\n <div class=\"dropzone\">\n <i kbq-icon=\"mc-upload-to-cloud_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=\"mc-close-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, 14px);font-weight:var(--kbq-file-upload-font-single-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-single-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-single-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-single-text-block-letter-spacing, -.006em)}.kbq-multiple-file-upload .multiple__header{font-size:var(--kbq-file-upload-font-multiple-title-font-size, 18px);font-weight:var(--kbq-file-upload-font-multiple-title-font-weight, 600);line-height:var(--kbq-file-upload-font-multiple-title-line-height, 26px);font-family:var(--kbq-file-upload-font-multiple-title-font-family, \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-title-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-title-font-feature-settings, \"calt\", \"kern\", \"liga\");letter-spacing:var(--kbq-file-upload-font-multiple-title-letter-spacing, normal)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-text-block-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-text-block-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-text-block-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);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, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-text-block-letter-spacing, -.006em)}.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, 14px);font-weight:var(--kbq-file-upload-font-multiple-grid-font-weight, normal);line-height:var(--kbq-file-upload-font-multiple-grid-line-height, 20px);font-family:var(--kbq-file-upload-font-multiple-grid-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-file-upload-font-multiple-grid-text-transform, );font-feature-settings:var(--kbq-file-upload-font-multiple-grid-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-file-upload-font-multiple-grid-letter-spacing, -.006em)}.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, 12px);font-weight:var(--kbq-form-field-hint-font-text-font-weight, normal);line-height:var(--kbq-form-field-hint-font-text-line-height, 16px);font-family:var(--kbq-form-field-hint-font-text-font-family, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif);text-transform:var(--kbq-form-field-hint-font-text-text-transform, );font-feature-settings:var(--kbq-form-field-hint-font-text-font-feature-settings, \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\");letter-spacing:var(--kbq-form-field-hint-font-text-letter-spacing, normal)}\n", ".kbq-file-upload{--kbq-file-upload-size-single-container-border-radius: 8px;--kbq-file-upload-size-single-container-border-width: 1px;--kbq-file-upload-size-single-container-content-gap-horizontal: 8px;--kbq-file-upload-size-single-container-padding-vertical: 12px;--kbq-file-upload-size-single-container-padding-horizontal: 12px;--kbq-file-upload-size-single-text-block-padding-vertical: 2px;--kbq-file-upload-size-single-text-block-content-gap-horizontal: 4px;--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: 8px;--kbq-file-upload-size-multiple-big-container-border-width: 1px;--kbq-file-upload-size-multiple-big-container-content-gap-horizontal: 12px;--kbq-file-upload-size-multiple-big-container-padding-vertical: 24px;--kbq-file-upload-size-multiple-big-container-padding-horizontal: 24px;--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: 4px;--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: 8px;--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: 8px;--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: 4px;--kbq-file-upload-font-single-text-block-font-size: 14px;--kbq-file-upload-font-single-text-block-line-height: 20px;--kbq-file-upload-font-single-text-block-letter-spacing: -.006em;--kbq-file-upload-font-single-text-block-font-weight: normal;--kbq-file-upload-font-single-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-single-text-block-text-transform: null;--kbq-file-upload-font-single-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-title-font-size: 18px;--kbq-file-upload-font-multiple-title-line-height: 26px;--kbq-file-upload-font-multiple-title-letter-spacing: normal;--kbq-file-upload-font-multiple-title-font-weight: 600;--kbq-file-upload-font-multiple-title-font-family: \"TT-Positive\", Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-title-text-transform: null;--kbq-file-upload-font-multiple-title-font-feature-settings: \"calt\", \"kern\", \"liga\";--kbq-file-upload-font-multiple-text-block-font-size: 14px;--kbq-file-upload-font-multiple-text-block-line-height: 20px;--kbq-file-upload-font-multiple-text-block-letter-spacing: -.006em;--kbq-file-upload-font-multiple-text-block-font-weight: normal;--kbq-file-upload-font-multiple-text-block-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-text-block-text-transform: null;--kbq-file-upload-font-multiple-text-block-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-file-upload-font-multiple-grid-font-size: 14px;--kbq-file-upload-font-multiple-grid-line-height: 20px;--kbq-file-upload-font-multiple-grid-letter-spacing: -.006em;--kbq-file-upload-font-multiple-grid-font-weight: normal;--kbq-file-upload-font-multiple-grid-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-file-upload-font-multiple-grid-text-transform: null;--kbq-file-upload-font-multiple-grid-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\";--kbq-form-field-hint-font-text-font-size: 12px;--kbq-form-field-hint-font-text-line-height: 16px;--kbq-form-field-hint-font-text-letter-spacing: normal;--kbq-form-field-hint-font-text-font-weight: normal;--kbq-form-field-hint-font-text-font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif;--kbq-form-field-hint-font-text-text-transform: null;--kbq-form-field-hint-font-text-font-feature-settings: \"calt\", \"kern\", \"liga\", \"ss01\", \"ss04\"}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(0, 0%, 100%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 6%, 12%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 85%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 60%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 15%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 65%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 99%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 40%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 45%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 15%, 32%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 50%, 100%)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-file-upload-single-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-single-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-single-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-single-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-single-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-single-states-error-container-border: hsla(7, 97%, 35%, 100%);--kbq-file-upload-single-states-error-container-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-single-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-single-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-single-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-single-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-single-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-single-states-focused-focus-outline-color: hsla(216, 100%, 60%, 100%);--kbq-file-upload-multiple-default-container-border: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-default-container-background: hsla(229, 15%, 12%, 100%);--kbq-file-upload-multiple-default-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-default-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-default-grid-divider-color: hsla(229, 15%, 22%, 100%);--kbq-file-upload-multiple-states-on-drag-container-border: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-on-drag-container-background: hsla(216, 100%, 20%, 100%);--kbq-file-upload-multiple-states-on-drag-upload-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-left-icon-color: hsla(229, 15%, 45%, 100%);--kbq-file-upload-multiple-states-on-drag-icon-button-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-text-block-color: hsla(229, 15%, 80%, 100%);--kbq-file-upload-multiple-states-on-drag-grid-divider-color: hsla(216, 100%, 30%, 100%);--kbq-file-upload-multiple-states-error-grid-cell-background: hsla(7, 97%, 6%, 100%);--kbq-file-upload-multiple-states-error-left-icon-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-text-block-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-error-icon-button-color: hsla(7, 97%, 60%, 100%);--kbq-file-upload-multiple-states-disabled-container-border: hsla(229, 15%, 50%, 32%);--kbq-file-upload-multiple-states-disabled-container-background: hsla(229, 15%, 50%, 16%);--kbq-file-upload-multiple-states-disabled-upload-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-left-icon-color: hsla(229, 15%, 30%, 100%);--kbq-file-upload-multiple-states-disabled-text-block-color: hsla(229, 15%, 40%, 100%);--kbq-file-upload-multiple-states-disabled-grid-divider-color: hsla(229, 15%, 50%, 32%);--kbq-form-field-hint-text: hsla(229, 15%, 60%, 100%)}\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, 1px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 1px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-single-file-upload .kbq-file-upload{padding:calc(var(--kbq-file-upload-size-single-container-padding-vertical, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px)) calc(var(--kbq-file-upload-size-single-container-padding-horizontal, 12px) - var(--kbq-file-upload-size-single-container-border-width, 1px));border-radius:var(--kbq-file-upload-size-single-container-border-radius, 8px);border-width:var(--kbq-file-upload-size-single-container-border-width, 1px);border-style:dashed}.kbq-single-file-upload .kbq-file-upload .dropzone__text{padding-top:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);padding-bottom:var(--kbq-file-upload-size-single-text-block-padding-vertical, 2px);gap:var(--kbq-file-upload-size-single-text-block-content-gap-horizontal, 4px)}.kbq-single-file-upload .kbq-file-upload .dropzone{gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item{width:100%}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper{display:flex;align-items:center;width:100%;gap:var(--kbq-file-upload-size-single-container-content-gap-horizontal, 8px)}.kbq-single-file-upload .kbq-file-upload .file-item .file-item__text-wrapper .file-item__text{width:120px;flex-grow:1}.kbq-file-upload__hint{margin-top:var(--kbq-form-field-hint-size-margin-top, 4px)}\n"] }]
|
|
506
506
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
|
507
507
|
type: Optional
|
|
508
508
|
}, {
|
|
@@ -542,8 +542,7 @@ class KbqFileUploadModule {
|
|
|
542
542
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
543
543
|
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.0", ngImport: i0, type: KbqFileUploadModule, declarations: [KbqFileDropDirective,
|
|
544
544
|
KbqSingleFileUploadComponent,
|
|
545
|
-
KbqMultipleFileUploadComponent], imports: [
|
|
546
|
-
FormsModule,
|
|
545
|
+
KbqMultipleFileUploadComponent], imports: [FormsModule,
|
|
547
546
|
ReactiveFormsModule,
|
|
548
547
|
KbqToolTipModule,
|
|
549
548
|
KbqProgressSpinnerModule,
|
|
@@ -553,11 +552,13 @@ class KbqFileUploadModule {
|
|
|
553
552
|
KbqFormFieldModule,
|
|
554
553
|
KbqEllipsisCenterModule,
|
|
555
554
|
KbqDataSizePipe,
|
|
556
|
-
KbqLinkModule
|
|
555
|
+
KbqLinkModule,
|
|
556
|
+
AsyncPipe,
|
|
557
|
+
NgClass,
|
|
558
|
+
NgTemplateOutlet], exports: [KbqSingleFileUploadComponent,
|
|
557
559
|
KbqMultipleFileUploadComponent,
|
|
558
560
|
KbqFileDropDirective] }); }
|
|
559
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFileUploadModule, imports: [
|
|
560
|
-
FormsModule,
|
|
561
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFileUploadModule, imports: [FormsModule,
|
|
561
562
|
ReactiveFormsModule,
|
|
562
563
|
KbqToolTipModule,
|
|
563
564
|
KbqProgressSpinnerModule,
|
|
@@ -572,7 +573,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
|
|
|
572
573
|
type: NgModule,
|
|
573
574
|
args: [{
|
|
574
575
|
imports: [
|
|
575
|
-
CommonModule,
|
|
576
576
|
FormsModule,
|
|
577
577
|
ReactiveFormsModule,
|
|
578
578
|
KbqToolTipModule,
|
|
@@ -583,7 +583,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
|
|
|
583
583
|
KbqFormFieldModule,
|
|
584
584
|
KbqEllipsisCenterModule,
|
|
585
585
|
KbqDataSizePipe,
|
|
586
|
-
KbqLinkModule
|
|
586
|
+
KbqLinkModule,
|
|
587
|
+
AsyncPipe,
|
|
588
|
+
NgClass,
|
|
589
|
+
NgTemplateOutlet
|
|
587
590
|
],
|
|
588
591
|
declarations: [
|
|
589
592
|
KbqFileDropDirective,
|