@koobiq/components 19.0.0 → 19.2.0

package/file-upload/file-upload.d.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, InputSignal, Renderer2 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
+import { CanUpdateErrorState, ErrorStateMatcher, KbqBaseFileUploadLocaleConfig, KbqEnumValues, KbqMultipleFileUploadLocaleConfig } from '@koobiq/components/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { KbqFileList, KbqFileUploadContext } from './primitives';
 export interface KbqFile extends File {
@@ -22,20 +22,39 @@ export interface KbqInputFile {
     onFileSelectedViaClick(event: Event): void;
     onFileDropped(files: FileList | KbqFile[]): void;
 }
+/**
+ * @docs-private
+ * @deprecated Will be removed in next major release
+ */
 export interface KbqInputFileLabel {
     captionText: string;
     browseLink: string;
     title?: string | undefined;
 }
+/** Upload modes enum. */
+export declare enum KbqFileUploadAllowedType {
+    File = "file",
+    Folder = "folder",
+    Mixed = "mixed"
+}
+/** Allowed upload modes for the upload component. */
+export type KbqFileUploadAllowedTypeValues = KbqEnumValues<KbqFileUploadAllowedType>;
+/** @docs-private */
+export type KbqFileUploadCaptionContext = {
+    captionText: string;
+    browseLink?: string;
+    captionTextSeparator?: string;
+    browseLinkFolder?: string;
+};
 /**
  * @deprecated use FormControl for validation
  */
 export type KbqFileValidatorFn = (file: File) => string | null;
-export declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqInputFileLabel>;
+export declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqBaseFileUploadLocaleConfig | KbqMultipleFileUploadLocaleConfig>;
 /** @deprecated use `FileValidators.isCorrectExtension` instead. Will be removed in next major release. */
 export declare const isCorrectExtension: (file: File, accept?: string[]) => boolean;
 /** @docs-private */
-export declare abstract class KbqFileUploadBase<T = KbqInputFileLabel> implements CanUpdateErrorState {
+export declare abstract class KbqFileUploadBase<T = KbqBaseFileUploadLocaleConfig> implements CanUpdateErrorState {
     protected abstract localeConfig: InputSignal<Partial<T> | undefined>;
     /** Tracks whether the component is in an error state based on the control, parent form,
      * and `errorStateMatcher`, triggering visual updates and state changes if needed. */

package/file-upload/file-upload.scss

@@ -1,4 +1,5 @@
 @use './file-upload-theme' as theme;
+@use '../form-field/form-field';
 
 .kbq-file-upload {
     box-sizing: border-box;
@@ -6,12 +7,17 @@
     align-items: center;
     position: relative;
 
-    .kbq-file-dropzone,
     .kbq-file-item {
         display: flex;
         align-items: center;
     }
 
+    .kbq-file-dropzone {
+        display: flex;
+        align-items: baseline;
+        gap: var(--dropzone-gap, var(--kbq-file-upload-size-dropzone-content-gap-horizontal));
+    }
+
     .kbq-ellipsis-center {
         position: relative;
         display: flex;
@@ -32,9 +38,7 @@
 }
 
 .kbq-file-upload__hint {
-    .kbq-hint {
-        margin-top: var(--kbq-size-xxs);
-    }
+    @include form-field.kbq-form-field-hint-geometry();
 }
 
 @include theme.kbq-file-upload-theme();

package/file-upload/multiple-file-upload.component.d.ts

@@ -1,22 +1,16 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { AfterViewInit, DoCheck, ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { ErrorStateMatcher } from '@koobiq/components/core';
+import { ErrorStateMatcher, KbqMultipleFileUploadLocaleConfig } from '@koobiq/components/core';
 import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
-import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileValidatorFn, KbqInputFileLabel } from './file-upload';
+import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileUploadCaptionContext, KbqFileValidatorFn } from './file-upload';
 import { KbqFileLoader } from './primitives';
 import * as i0 from "@angular/core";
 import * as i1 from "./primitives/file-picker";
-export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
-    captionTextWhenSelected: string;
-    captionTextForCompactSize: string;
-    gridHeaders: {
-        file: string;
-        size: string;
-    };
+export interface KbqInputFileMultipleLabel extends KbqMultipleFileUploadLocaleConfig {
     [k: string | number | symbol]: unknown;
 }
-export declare const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileMultipleLabel;
+export declare const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqMultipleFileUploadLocaleConfig;
 export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, ControlValueAccessor, DoCheck {
     /**
      * A value responsible for progress spinner type.
@@ -41,8 +35,13 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     errorStateMatcher: ErrorStateMatcher;
     get files(): KbqFileItem[];
     set files(currentFileList: KbqFileItem[]);
+    /**
+     * Determines which kind of items the upload component can accept.
+     * @default mixed
+     */
+    allowed: import("@angular/core").InputSignal<"file" | "folder" | "mixed">;
     /** Optional configuration to override default labels with localized text.*/
-    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqInputFileMultipleLabel> | undefined>;
+    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqMultipleFileUploadLocaleConfig> | undefined>;
     /** Emits an event containing updated file list.
      * public output will be renamed to filesChange in next major release (#DS-3700) */
     readonly filesChange: EventEmitter<KbqFileItem[]>;
@@ -59,24 +58,14 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     /** File Icon Template */
     protected readonly customFileIcon: TemplateRef<HTMLElement>;
     protected readonly fileLoader: KbqFileLoader | undefined;
-    private readonly fileSizeHeaderCell;
     /** @docs-private */
     protected readonly hint: QueryList<TemplateRef<any>>;
     /** @docs-private */
     hasFocus: boolean;
     /** @docs-private */
-    columnDefs: {
-        header: string;
-        cssClass: string;
-    }[];
-    /** @docs-private */
-    config: KbqInputFileMultipleLabel;
-    /** @docs-private */
-    separatedCaptionText: string[];
-    /** @docs-private */
-    separatedCaptionTextWhenSelected: string[];
+    readonly resolvedLocaleConfig: import("@angular/core").Signal<KbqMultipleFileUploadLocaleConfig>;
     /** @docs-private */
-    separatedCaptionTextForCompactSize: string[];
+    protected readonly captionContext: import("@angular/core").Signal<KbqFileUploadCaptionContext>;
     /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
      * @docs-private
      */
@@ -100,13 +89,11 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
      * @docs-private
      */
     get invalid(): boolean;
-    /**
-     * Set maxWidth for filesize cell to enable proper ellipsis center,
-     * @docs-private
-     */
-    protected get fileSizeCellMaxWidth(): number;
     /** @docs-private */
-    readonly configuration: KbqInputFileMultipleLabel | null;
+    protected get captionTextWhenSelected(): string;
+    /** @docs-private */
+    readonly configuration: KbqMultipleFileUploadLocaleConfig | null;
+    private readonly localeId;
     private readonly focusMonitor;
     private readonly platformId;
     constructor();
@@ -133,12 +120,9 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     onFileDropped(files: KbqFile[]): void;
     /** @docs-private */
     deleteFile(index: number, event?: MouseEvent, origin?: FocusOrigin): void;
-    private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
-    private initDefaultParams;
-    private getCaptionText;
     private onFileAdded;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "onlyDirectory": "onlyDirectory"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload,kbq-file-upload[multiple]", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "files": { "alias": "files"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "filesChange": "fileQueueChanged"; "filesAdded": "filesAdded"; "fileRemoved": "fileRemoved"; }, ["customFileIcon", "hint"], ["kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "filesChange"; "itemsAdded": "itemsAdded"; "itemRemoved": "itemRemoved"; }; }]>;
 }

package/file-upload/multiple-file-upload.component.scss

@@ -1,80 +1,218 @@
-@use '../core/styles/common/tokens' as *;
+@mixin _kbq-list-item($state-name) {
+    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background);
 
-// todo нужно рефакторить со стилями тут сложно
-.kbq-multiple-file-upload .kbq-file-upload {
-    border-radius: var(--kbq-file-upload-size-multiple-big-container-border-radius);
-    border-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
-    border-style: dashed;
+    background: var(--kbq-list-#{$state-name}-container-background);
+}
+
+@mixin _kbq-multiple-file-upload-theme() {
+    background-color: var(--kbq-file-upload-multiple-default-container-background);
+    border-color: var(--kbq-file-upload-multiple-default-container-border) !important;
 
-    &.kbq-file-upload_default:not(.kbq-selected) {
-        justify-content: center;
+    &:not(.kbq-disabled, .kbq-error) {
+        .kbq-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-multiple-default-dropzone-icon-color);
+        }
 
-        padding: var(--kbq-file-upload-size-multiple-big-container-padding-vertical)
-            var(--kbq-file-upload-size-multiple-big-container-padding-vertical);
+        .kbq-multiple-file-upload__empty-state {
+            --kbq-empty-state-title: var(--kbq-file-upload-multiple-default-text-block-color);
+            --kbq-empty-state-color: var(--kbq-file-upload-multiple-default-text-block-color);
+        }
 
-        min-height: var(--kbq-file-upload-size-multiple-big-container-min-height);
+        .kbq-multiple-file-upload__empty-state-upload-icon {
+            color: var(--kbq-file-upload-multiple-default-upload-icon-color);
+        }
 
-        min-width: var(--kbq-file-upload-size-multiple-big-container-min-width);
+        .kbq-file-upload__dropzone-caption {
+            color: var(--kbq-file-upload-multiple-default-text-block-color);
+        }
+    }
+
+    &.kbq-file-drop_dragover {
+        background-color: var(--kbq-file-upload-multiple-states-on-drag-container-background);
+        border-color: var(--kbq-file-upload-multiple-states-on-drag-container-border) !important;
 
-        .kbq-file-dropzone {
-            gap: var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal);
+        .kbq-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-multiple-states-on-drag-dropzone-icon-color);
         }
 
-        .kbq-file-dropzone__text {
-            .kbq-file-multiple__caption {
-                padding-top: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);
-            }
+        .kbq-file-upload__list-footer {
+            border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
+        }
+
+        .kbq-multiple-file-upload__empty-state-upload-icon {
+            color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
         }
     }
 
-    &.kbq-file-upload_compact:not(.kbq-selected) {
-        padding: var(--kbq-file-upload-multiple-compact-container-padding-vertical)
-            var(--kbq-file-upload-multiple-compact-container-padding-horizontal);
+    &.kbq-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-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-multiple-states-disabled-dropzone-icon-color);
+        }
+
+        .kbq-file-upload__list-footer {
+            border-top-color: var(--kbq-file-upload-multiple-states-disabled-container-border);
+        }
+
+        .kbq-multiple-file-upload__empty-state-upload-icon {
+            color: var(--kbq-file-upload-multiple-states-disabled-upload-icon-color);
+        }
 
-        .kbq-file-dropzone {
-            gap: var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal);
+        .kbq-multiple-file-upload__empty-state {
+            --kbq-empty-state-title: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+            --kbq-empty-state-color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+        }
 
-            .kbq-file-dropzone__text.kbq-file-multiple__caption {
-                padding-top: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
+        .kbq-file-upload__dropzone-caption {
+            color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+        }
 
-                padding-bottom: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
+        .kbq-file-upload__item {
+            .kbq-file-upload__file .kbq-icon.kbq-empty {
+                color: var(--kbq-file-upload-multiple-states-disabled-left-icon-color);
+            }
+
+            .kbq-file-item__text,
+            .kbq-file-upload__size {
+                color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
             }
         }
     }
 
-    .kbq-list-option.kbq-file-multiple__uploaded-item {
-        border-radius: 0;
-        padding: 0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width));
+    &:not(.kbq-disabled) {
+        &.kbq-error {
+            background-color: var(--kbq-file-upload-multiple-states-error-container-background);
+            border-color: var(--kbq-file-upload-multiple-states-error-container-border) !important;
+
+            .kbq-file-upload__dropzone-icon {
+                color: var(--kbq-file-upload-multiple-states-error-dropzone-icon-color);
+            }
+
+            .kbq-multiple-file-upload__empty-state-upload-icon {
+                color: var(--kbq-file-upload-multiple-states-error-upload-icon-color);
+            }
+
+            .kbq-file-upload__dropzone-caption {
+                color: var(--kbq-file-upload-multiple-states-error-text-block-color);
+            }
+
+            .kbq-multiple-file-upload__empty-state {
+                --kbq-file-upload-multiple-states-error-text-block-color: var(
+                    --kbq-file-upload-multiple-default-text-block-color
+                );
 
-        .kbq-icon {
-            margin-right: 0;
+                --kbq-empty-state-title: var(--kbq-file-upload-multiple-states-error-text-block-color);
+                --kbq-empty-state-color: var(--kbq-file-upload-multiple-states-error-text-block-color);
+            }
+
+            .kbq-file-upload__list-footer {
+                border-top-color: var(--kbq-file-upload-multiple-states-error-container-border);
+            }
         }
-    }
 
-    .kbq-file-upload__grid {
-        min-height: 144px;
+        .kbq-file-upload__item {
+            &:has(.kbq-file-upload__row.kbq-error) {
+                &:hover,
+                &.kbq-hovered {
+                    .kbq-file-upload__row {
+                        background-color: var(--kbq-states-background-error-less-hover);
+                    }
+                }
+
+                .kbq-file-item__text,
+                .kbq-file-upload__size {
+                    color: var(--kbq-file-upload-multiple-states-error-text-block-color);
+                }
+
+                .kbq-file-upload__file .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-multiple-states-error-left-icon-color);
+                }
+
+                .kbq-file-upload__action.kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-multiple-states-error-icon-button-color);
+                }
+            }
+
+            &:not(:has(.kbq-file-upload__row.kbq-error)) {
+                &:hover,
+                &.kbq-hovered {
+                    .kbq-file-upload__row {
+                        @include _kbq-list-item(states-hover);
+                    }
+                }
+
+                &.kbq-disabled {
+                    .kbq-file-upload__row {
+                        @include _kbq-list-item(states-disabled);
+                    }
+                }
+            }
+        }
     }
 
-    .kbq-file-multiple-uploaded__header-inner,
-    .kbq-file-upload__row {
-        display: flex;
-        align-items: center;
+    .kbq-file-upload__list-footer {
+        border-top-color: var(--kbq-file-upload-multiple-default-container-border);
+    }
 
-        .kbq-file-upload__file {
-            flex-grow: 1;
+    .kbq-file-upload__item {
+        .kbq-file-upload__file .kbq-icon.kbq-empty {
+            color: var(--kbq-file-upload-multiple-default-left-icon-color);
         }
 
         .kbq-file-upload__size {
-            width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
-            min-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
-            max-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
-            flex-grow: 1;
-            flex-shrink: 1;
-            text-align: left;
+            color: var(--kbq-file-upload-multiple-default-file-size-text-color);
+        }
+    }
+}
+
+// todo нужно рефакторить со стилями тут сложно
+.kbq-multiple-file-upload .kbq-file-upload {
+    border-radius: var(--kbq-file-upload-size-multiple-big-container-border-radius);
+    border-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
+    border-style: dashed;
+
+    &:not(.kbq-selected) {
+        &.kbq-file-upload_default {
+            justify-content: center;
+            min-height: var(--kbq-file-upload-size-multiple-big-container-min-height);
+            min-width: var(--kbq-file-upload-size-multiple-big-container-min-width);
+
+            .kbq-empty-state {
+                --kbq-empty-state-size-normal-padding-top: 0;
+                --kbq-empty-state-size-normal-padding-bottom: 0;
+                --kbq-empty-state-size-normal-image-addon-height: 4px;
+                --kbq-empty-state-size-normal-padding-horizontal: 23px;
+            }
+        }
+
+        &.kbq-file-upload_compact {
+            padding: var(--kbq-file-upload-multiple-compact-container-padding-vertical)
+                var(--kbq-file-upload-multiple-compact-container-padding-horizontal);
         }
     }
 
+    .kbq-multiple-file-upload__empty-state {
+        --kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-m);
+        --kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xs);
+    }
+
+    .kbq-file-upload__list {
+        min-height: var(--kbq-file-upload-size-multiple-min-height);
+        max-height: var(--kbq-file-upload-size-multiple-max-height);
+
+        overflow-y: auto;
+
+        padding-top: calc(var(--kbq-size-xxs) - var(--kbq-size-border-width));
+        padding-bottom: var(--kbq-size-xxl);
+    }
+
     .kbq-file-upload__row {
+        display: flex;
+        align-items: center;
+        flex: 1;
+
         .kbq-file-upload__grid-cell {
             padding: 0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
         }
@@ -82,71 +220,51 @@
         .kbq-file-upload__file {
             display: flex;
             align-items: center;
+            flex-grow: 1;
             gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
+            padding-left: var(--kbq-size-m);
 
             .kbq-file-item__text {
                 width: 90%;
             }
         }
 
-        .kbq-file-upload__action {
-            $list-option-border-width: var(--kbq-size-3xs);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding-top: calc(
-                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - $list-option-border-width
-            );
-            padding-bottom: calc(
-                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - $list-option-border-width
-            );
-            min-height: var(--kbq-size-xxl);
-            min-width: var(--kbq-size-xxl);
-        }
-    }
-
-    .kbq-file-multiple-uploaded__header {
-        margin: -1px;
-        border-bottom-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
-        border-bottom-style: solid;
-
-        padding: 0 var(--kbq-size-xxs);
-
-        .kbq-file-upload__grid-cell {
-            $header-cell-vertical-padding: 10px;
-            padding: $header-cell-vertical-padding var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
-                calc($header-cell-vertical-padding - var(--kbq-file-upload-size-multiple-big-container-border-width))
-                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
+        .kbq-file-upload__size {
+            width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
+            min-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
+            max-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
+            flex-grow: 1;
+            flex-shrink: 1;
+            text-align: left;
         }
 
         .kbq-file-upload__action {
-            min-height: var(--kbq-size-xxl);
-            min-width: var(--kbq-size-xxl);
-            padding: var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
-                var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal)
-                calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(
-                            --kbq-file-upload-size-multiple-big-container-border-width
-                        )
-                );
+            padding: var(--kbq-size-m);
         }
     }
 
-    .kbq-file-btn-upload {
+    .kbq-file-upload__list-footer {
         margin: -1px;
-        padding: calc(var(--kbq-size-m) - var(--kbq-file-upload-size-multiple-big-container-border-width))
-            var(--kbq-size-m) var(--kbq-size-m) var(--kbq-size-m);
+        padding: var(--kbq-size-m) var(--kbq-size-l);
 
         border-top-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
         border-top-style: dashed;
-
-        .kbq-file-dropzone {
-            gap: var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal);
-        }
     }
 
-    .kbq-file-upload__dropzone {
+    .kbq-file-upload__wrapper {
         width: 100%;
         height: 100%;
     }
+
+    .kbq-file-upload__item {
+        border-radius: 0;
+        border: 0;
+        padding: 0 calc(var(--kbq-size-xxs) - var(--kbq-size-border-width));
+
+        .kbq-file-upload__row {
+            border-radius: var(--kbq-size-xs);
+        }
+    }
+
+    @include _kbq-multiple-file-upload-theme();
 }

package/file-upload/primitives/file-drop.d.ts

@@ -1,11 +1,10 @@
-import { EventEmitter } from '@angular/core';
 import { KbqFile } from '../file-upload';
 import * as i0 from "@angular/core";
 export declare class KbqFileDropDirective {
     /** Flag that controls css-class modifications on drag events. */
     dragover: boolean;
     /** Emits an event when file items were dropped. */
-    readonly filesDropped: EventEmitter<KbqFile[]>;
+    readonly filesDropped: import("@angular/core").OutputEmitterRef<KbqFile[]>;
     /** @docs-private */
     onDragOver(event: DragEvent): void;
     /** @docs-private */

package/file-upload/single-file-upload.component.d.ts

@@ -1,13 +1,13 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
 import { AfterViewInit, DoCheck, ElementRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { ErrorStateMatcher } from '@koobiq/components/core';
+import { ErrorStateMatcher, KbqBaseFileUploadLocaleConfig, KbqFileUploadLocaleConfig } from '@koobiq/components/core';
 import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
-import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileValidatorFn, KbqInputFileLabel } from './file-upload';
+import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileUploadCaptionContext, KbqFileValidatorFn } from './file-upload';
 import { KbqFileLoader } from './primitives';
 import * as i0 from "@angular/core";
 import * as i1 from "./primitives/file-picker";
-export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileLabel;
+export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqFileUploadLocaleConfig['single'];
 export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, ControlValueAccessor, DoCheck {
     /**
      * A value responsible for progress spinner type.
@@ -33,8 +33,13 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      * @default true
      */
     showFileSize: boolean;
+    /**
+     * Determines which kind of items the upload component can accept.
+     * @default mixed
+     */
+    allowed: import("@angular/core").InputSignal<"file" | "folder" | "mixed">;
     /** Optional configuration to override default labels with localized text.*/
-    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqInputFileLabel> | undefined>;
+    readonly localeConfig: import("@angular/core").InputSignal<Partial<KbqBaseFileUploadLocaleConfig> | undefined>;
     /** Emits an event containing updated file.
      * public output will be renamed to fileChange in next major release (#DS-3700) */
     readonly fileChange: EventEmitter<KbqFileItem | null>;
@@ -42,10 +47,6 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     protected readonly fileLoader: KbqFileLoader | undefined;
     /** @docs-private */
     private readonly hint;
-    /** @docs-private */
-    config: KbqInputFileLabel;
-    /** @docs-private */
-    separatedCaptionText: string[];
     /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
      * @docs-private
      */
@@ -67,7 +68,12 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      */
     get invalid(): boolean;
     /** @docs-private */
-    readonly configuration: KbqInputFileLabel | null;
+    readonly configuration: KbqBaseFileUploadLocaleConfig | null;
+    /** @docs-private */
+    protected readonly captionContext: import("@angular/core").Signal<KbqFileUploadCaptionContext>;
+    private readonly localeId;
+    /** @docs-private */
+    readonly resolvedLocaleConfig: import("@angular/core").Signal<KbqBaseFileUploadLocaleConfig>;
     private readonly focusMonitor;
     private readonly platformId;
     constructor();
@@ -94,12 +100,9 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     onFileDropped(files: KbqFile[]): void;
     /** @docs-private */
     deleteItem(event?: MouseEvent, origin?: FocusOrigin): void;
-    private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
-    private initDefaultParams;
-    private getCaptionText;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; "onlyDirectory": "onlyDirectory"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "fileChange"; }; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; "showFileSize": { "alias": "showFileSize"; "required": false; }; "allowed": { "alias": "allowed"; "required": false; "isSignal": true; }; "localeConfig": { "alias": "localeConfig"; "required": false; "isSignal": true; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], true, [{ directive: typeof i1.KbqFileUploadContext; inputs: { "id": "id"; "disabled": "disabled"; "multiple": "multiple"; }; outputs: {}; }, { directive: typeof i1.KbqFileList; inputs: {}; outputs: { "listChange": "fileChange"; }; }]>;
     static ngAcceptInputType_showFileSize: unknown;
 }