@koobiq/components 18.29.0 → 18.31.0

package/file-upload/_file-upload-theme.scss

@@ -3,19 +3,17 @@
 @use '../core/styles/common/tokens';
 
 @mixin kbq-file-upload-theme() {
-    .kbq-file-upload {
-        .kbq-focused,
-        .kbq-link.kbq-focused {
-            border: 2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color);
-        }
-    }
-
     .kbq-single-file-upload {
         .kbq-file-upload {
             // FIXME: move to mixin kbq-file-upload-state
             background-color: var(--kbq-file-upload-single-default-container-background);
             border-color: var(--kbq-file-upload-single-default-container-border) !important;
 
+            .kbq-focused,
+            .kbq-link.kbq-focused {
+                border: 2px solid var(--kbq-file-upload-single-states-focused-focus-outline-color);
+            }
+
             &:not(.kbq-disabled, .kbq-error) {
                 .kbq-file-upload__action {
                     color: var(--kbq-file-upload-single-default-icon-button-color);
@@ -28,6 +26,10 @@
                 .file-item__text-wrapper .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-single-default-left-icon-color);
                 }
+
+                .kbq-file-item__size {
+                    color: var(--kbq-file-upload-single-default-file-size-text-color);
+                }
             }
 
             &.dragover {
@@ -54,6 +56,10 @@
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
 
+                .kbq-file-item__size {
+                    color: var(--kbq-file-upload-single-states-error-file-size-text-color);
+                }
+
                 .kbq-file-upload__action {
                     color: var(--kbq-file-upload-single-states-error-icon-button-color);
                 }
@@ -76,6 +82,10 @@
                     color: var(--kbq-file-upload-single-states-disabled-text-block-color);
                 }
 
+                .kbq-file-item__size {
+                    color: var(--kbq-file-upload-single-states-disabled-file-size-text-color);
+                }
+
                 .kbq-file-upload__action {
                     color: var(--kbq-file-upload-single-states-disabled-icon-button-color);
                 }
@@ -88,11 +98,17 @@
             background-color: var(--kbq-file-upload-multiple-default-container-background);
             border-color: var(--kbq-file-upload-multiple-default-container-border) !important;
 
+            .kbq-focused,
+            .kbq-link.kbq-focused {
+                border: 2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color);
+            }
+
             .btn-upload {
                 border-top-color: var(--kbq-file-upload-multiple-default-container-border);
             }
 
             .kbq-file-multiple-uploaded__header {
+                color: var(--kbq-foreground-contrast-secondary);
                 border-bottom-color: var(--kbq-file-upload-multiple-default-grid-divider-color);
             }
 
@@ -106,19 +122,17 @@
                 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;
 
+                .btn-upload {
+                    border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
+                }
+
                 .kbq-file-multiple-uploaded__header {
-                    border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-container-background) !important;
+                    border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color) !important;
                 }
 
                 .kbq-dropzone__icon {
                     color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
                 }
-
-                &.selected {
-                    .dropzone {
-                        border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
-                    }
-                }
             }
 
             &.kbq-disabled {
@@ -134,6 +148,10 @@
                     color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
                 }
 
+                .kbq-file-multiple-uploaded__header {
+                    border-bottom-color: var(--kbq-file-upload-multiple-states-disabled-grid-divider-color) !important;
+                }
+
                 .multiple__uploaded-item {
                     .kbq-file-upload__file .kbq-icon.kbq-empty {
                         color: var(--kbq-file-upload-multiple-states-disabled-left-icon-color);
@@ -148,12 +166,6 @@
                         color: var(--kbq-file-upload-multiple-states-disabled-icon-button-color);
                     }
                 }
-
-                &.selected {
-                    .dropzone {
-                        border-top-color: var(--kbq-file-upload-multiple-states-disabled-container-border);
-                    }
-                }
             }
 
             &:not(.kbq-disabled) {
@@ -162,12 +174,12 @@
                     border-color: var(--kbq-line-error) !important;
 
                     .kbq-dropzone__icon {
-                        color: var(--kbq-file-upload-single-states-error-upload-icon-color);
+                        color: var(--kbq-file-upload-multiple-states-error-upload-icon-color);
                     }
 
                     .dropzone__text:not(.kbq-link),
                     .kbq-file-multiple-uploaded__header {
-                        color: var(--kbq-file-upload-single-states-error-text-block-color);
+                        color: var(--kbq-file-upload-multiple-states-error-text-block-color);
                     }
                 }
 
@@ -196,6 +208,10 @@
                     color: var(--kbq-file-upload-multiple-default-left-icon-color);
                 }
 
+                .kbq-file-upload__size {
+                    color: var(--kbq-file-upload-multiple-default-file-size-text-color);
+                }
+
                 .kbq-file-upload__action .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-icon-button-color);
                 }

package/file-upload/file-upload-tokens.scss

@@ -1,4 +1,8 @@
-.kbq-file-upload {
+:where(.kbq-file-upload) {
+    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
+}
+
+:where(.kbq-single-file-upload) {
     --kbq-file-upload-size-single-container-border-radius: var(--kbq-size-s);
     --kbq-file-upload-size-single-container-border-width: 1px;
     --kbq-file-upload-size-single-container-content-gap-horizontal: var(--kbq-size-s);
@@ -7,18 +11,6 @@
     --kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);
     --kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-file-upload-single-min-height: var(--kbq-size-5xl);
-    --kbq-file-upload-size-multiple-big-container-min-height: 160px;
-    --kbq-file-upload-size-multiple-big-container-min-width: 320px;
-    --kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-container-border-width: 1px;
-    --kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);
-    --kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);
-    --kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);
-    --kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;
-    --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);
-    --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
-    --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);
     /* THEME TOKENS */
     --kbq-file-upload-single-default-container-border: var(--kbq-line-contrast-fade);
     --kbq-file-upload-single-default-container-background: var(--kbq-background-bg);
@@ -26,6 +18,7 @@
     --kbq-file-upload-single-default-left-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-file-upload-single-default-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-default-icon-button-color: var(--kbq-icon-contrast);
+    --kbq-file-upload-single-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);
     --kbq-file-upload-single-states-on-drag-container-border: var(--kbq-line-theme-fade);
     --kbq-file-upload-single-states-on-drag-container-background: var(--kbq-background-theme-fade);
     --kbq-file-upload-single-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
@@ -37,13 +30,33 @@
     --kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
     --kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);
+    --kbq-file-upload-single-states-error-file-size-text-color: var(--kbq-foreground-error);
     --kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
     --kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);
     --kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
+    --kbq-file-upload-single-states-disabled-file-size-text-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+:where(.kbq-multiple-file-upload) {
+    --kbq-file-upload-size-multiple-big-container-min-height: 192px;
+    --kbq-file-upload-size-multiple-big-container-min-width: 320px;
+    --kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);
+    --kbq-file-upload-size-multiple-big-container-border-width: 1px;
+    --kbq-file-upload-size-multiple-big-container-content-gap-horizontal: var(--kbq-size-m);
+    --kbq-file-upload-size-multiple-big-container-padding-vertical: var(--kbq-size-xxl);
+    --kbq-file-upload-size-multiple-big-container-padding-horizontal: var(--kbq-size-xxl);
+    --kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal: var(--kbq-size-s);
+    --kbq-file-upload-size-multiple-big-text-block-content-gap-vertical: 0px;
+    --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal: var(--kbq-size-s);
+    --kbq-file-upload-size-multiple-big-grid-cell-padding-vertical: var(--kbq-size-s);
+    --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-file-upload-size-multiple-big-grid-cell-file-size-width: var(--kbq-size-7xl);
+    /* THEME TOKENS */
     --kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);
     --kbq-file-upload-multiple-default-container-background: var(--kbq-background-bg);
     --kbq-file-upload-multiple-default-upload-icon-color: var(--kbq-icon-contrast-fade);
@@ -51,6 +64,7 @@
     --kbq-file-upload-multiple-default-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-multiple-default-icon-button-color: var(--kbq-icon-contrast);
     --kbq-file-upload-multiple-default-grid-divider-color: var(--kbq-line-contrast-less);
+    --kbq-file-upload-multiple-default-file-size-text-color: var(--kbq-foreground-contrast-secondary);
     --kbq-file-upload-multiple-states-on-drag-container-border: var(--kbq-line-theme-fade);
     --kbq-file-upload-multiple-states-on-drag-container-background: var(--kbq-background-theme-fade);
     --kbq-file-upload-multiple-states-on-drag-upload-icon-color: var(--kbq-icon-contrast-fade);
@@ -59,6 +73,7 @@
     --kbq-file-upload-multiple-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-multiple-states-on-drag-grid-divider-color: var(--kbq-line-contrast-less);
     --kbq-file-upload-multiple-states-error-grid-cell-background: var(--kbq-background-error-less);
+    --kbq-file-upload-multiple-states-error-upload-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-multiple-states-error-text-block-color: var(--kbq-foreground-error);
     --kbq-file-upload-multiple-states-error-icon-button-color: var(--kbq-icon-error);
@@ -69,5 +84,13 @@
     --kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
-    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
+    --kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+:where(.kbq-file-upload.compact) {
+    --kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);
+    --kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);
+    --kbq-file-upload-multiple-compact-container-padding-vertical: 11px;
+    --kbq-file-upload-multiple-compact-container-padding-horizontal: 11px;
 }

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

@@ -27,6 +27,7 @@ export interface KbqInputFileLabel {
  */
 export type KbqFileValidatorFn = (file: File) => string | null;
 export declare const KBQ_FILE_UPLOAD_CONFIGURATION: InjectionToken<KbqInputFileLabel>;
+/** @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 implements CanUpdateErrorState {

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

@@ -42,21 +42,23 @@ export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase im
     set files(currentFileList: KbqFileItem[]);
     /** Emits an event containing updated file list.
      * public output will be renamed to filesChange in next major release (#DS-3700) */
-    filesChange: EventEmitter<KbqFileItem[]>;
+    readonly filesChange: EventEmitter<KbqFileItem[]>;
     /**
      * Emits an event containing a chunk of files added to the file list.
      * Useful when handling added files, skipping filtering file list.
      */
-    filesAdded: EventEmitter<KbqFileItem[]>;
+    readonly filesAdded: EventEmitter<KbqFileItem[]>;
     /**
      * Emits an event containing a tuple of file and file's index when removed from the file list.
      * Useful when handle removed files, skipping filtering file list.
      */
-    fileRemoved: EventEmitter<[KbqFileItem, number]>;
+    readonly fileRemoved: EventEmitter<[KbqFileItem, number]>;
     /** File Icon Template */
-    customFileIcon: TemplateRef<HTMLElement>;
+    protected readonly customFileIcon: TemplateRef<HTMLElement>;
     /** @docs-private */
-    input: ElementRef<HTMLInputElement>;
+    readonly input: ElementRef<HTMLInputElement>;
+    private readonly listSelection;
+    private readonly fileSizeHeaderCell;
     /** @docs-private */
     protected readonly hint: QueryList<TemplateRef<any>>;
     /** @docs-private */
@@ -95,6 +97,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;
     constructor();

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

@@ -18,58 +18,35 @@
 
         min-width: var(--kbq-file-upload-size-multiple-big-container-min-width);
 
-        & .dropzone {
+        .dropzone {
             gap: var(--kbq-file-upload-size-multiple-big-container-content-gap-horizontal);
         }
 
-        & .dropzone__text {
-            & .multiple__header {
-                display: block;
-            }
-
-            & .multiple__caption {
-                display: block;
+        .dropzone__text {
+            .multiple__caption {
                 padding-top: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-vertical);
-                // гап не применяется тк не флекс. в целом гап не нужен, тк по логике дизайна ссылка от текста отделяется пробелом
-                gap: var(--kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal);
             }
         }
     }
 
     &.compact:not(.selected) {
-        padding: var(--kbq-file-upload-size-single-container-padding-vertical)
-            var(--kbq-file-upload-size-single-container-padding-horizontal);
-
-        & .dropzone {
-            gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+        padding: var(--kbq-file-upload-multiple-compact-container-padding-vertical)
+            var(--kbq-file-upload-multiple-compact-container-padding-horizontal);
 
-            & .dropzone__text.multiple__caption {
-                padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
+        .dropzone {
+            gap: var(--kbq-file-upload-multiple-compact-container-content-gap-horizontal);
 
-                padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
+            .dropzone__text.multiple__caption {
+                padding-top: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
 
-                gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
+                padding-bottom: var(--kbq-file-upload-multiple-compact-text-block-padding-vertical);
             }
         }
     }
 
-    & .kbq-list-option.multiple__uploaded-item {
-        padding: 0;
-
-        & .kbq-list-text {
-            padding: calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical) - var(
-                            --kbq-list-size-container-focus-outline-width,
-                            var(--kbq-size-3xs)
-                        )
-                )
-                calc(
-                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal) - var(
-                            --kbq-list-size-container-focus-outline-width,
-                            var(--kbq-size-3xs)
-                        )
-                );
-        }
+    .kbq-list-option.multiple__uploaded-item {
+        border-radius: 0;
+        padding: 0 calc(var(--kbq-size-3xs) - var(--kbq-file-upload-size-multiple-big-container-border-width));
 
         .kbq-icon {
             margin-right: 0;
@@ -86,67 +63,87 @@
         align-items: center;
 
         .kbq-file-upload__file {
-            width: 65%;
-            max-width: 65%;
-
-            gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
+            flex-grow: 1;
         }
 
         .kbq-file-upload__size {
-            width: var(--kbq-size-7xl);
-            min-width: var(--kbq-size-7xl);
-            text-align: left;
+            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__row {
+        .kbq-file-upload__grid-cell {
+            padding: 0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
+        }
+
         .kbq-file-upload__file {
             display: flex;
             align-items: center;
+            gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
 
             .file-item__text {
-                margin-left: 0;
                 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 {
-        border-bottom-width: 1px;
+        margin: -1px;
+        border-bottom-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
         border-bottom-style: solid;
 
-        .kbq-file-multiple-uploaded__header-inner {
-            padding: kbq-sum-series-css-variables([file-upload-size-multiple-big-grid-cell-padding-vertical, 2px])
-                kbq-sum-series-css-variables([file-upload-size-multiple-big-grid-cell-padding-horizontal 2px]);
+        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__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
+                        )
+                );
         }
     }
 
     .btn-upload {
-        padding: kbq-difference-series-css-variables(
-                [ file-upload-size-single-container-padding-vertical,
-                file-upload-size-single-container-border-width]
-            )
-            kbq-difference-series-css-variables(
-                [ file-upload-size-single-container-padding-horizontal,
-                file-upload-size-single-container-border-width]
-            );
-        border-top-left-radius: var(--kbq-file-upload-size-single-container-border-radius);
+        margin: -1px;
+        padding: calc(var(--kbq-size-m) - var(--kbq-file-upload-size-multiple-big-container-border-width))
+            var(--kbq-size-m) var(--kbq-size-m) var(--kbq-size-m);
 
-        border-top-right-radius: var(--kbq-file-upload-size-single-container-border-radius);
-        border-top-width: var(--kbq-file-upload-size-single-container-border-width);
+        border-top-width: var(--kbq-file-upload-size-multiple-big-container-border-width);
         border-top-style: dashed;
 
-        & .dropzone {
-            gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
-
-            & .dropzone__text.multiple__caption {
-                padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-                padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-                gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
-            }
+        .dropzone {
+            gap: var(--kbq-file-upload-size-multiple-big-dropzone-content-gap-horizontal);
         }
     }
 

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

@@ -27,6 +27,11 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     private _file;
     get file(): KbqFileItem | null;
     set file(currentFile: KbqFileItem | null);
+    /**
+     * Controls whether to display the file size information.
+     * @default true
+     */
+    showFileSize: boolean;
     /** Emits an event containing updated file.
      * public output will be renamed to fileChange in next major release (#DS-3700) */
     fileChange: EventEmitter<KbqFileItem | null>;
@@ -88,5 +93,6 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     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; }; "disabled": { "alias": "disabled"; "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; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, 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; }; "disabled": { "alias": "disabled"; "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; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, never>;
+    static ngAcceptInputType_showFileSize: unknown;
 }

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

@@ -44,5 +44,13 @@
                 flex-grow: 1;
             }
         }
+
+        .kbq-file-item__size {
+            padding: 0 var(--kbq-size-s);
+        }
+
+        .kbq-file-upload__action {
+            padding: var(--kbq-size-xxs);
+        }
     }
 }

package/filter-bar/filter-bar.d.ts

@@ -15,6 +15,11 @@ export declare class KbqFilterBar {
     filters: KbqFilters;
     /** @docs-private */
     filterReset: KbqFilterReset;
+    /**
+     * This is special logic that unselect all items when all selected because "all selected = nothing selected".
+     * Default is true
+     * */
+    selectedAllEqualsSelectedNothing: boolean;
     /** Filter that is currently selected */
     get filter(): KbqFilter | null;
     set filter(value: KbqFilter | null);
@@ -67,5 +72,6 @@ export declare class KbqFilterBar {
     private updateLocaleParams;
     private initDefaultParams;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFilterBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; "onClosePipe": "onClosePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "selectedAllEqualsSelectedNothing": { "alias": "selectedAllEqualsSelectedNothing"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; "onClosePipe": "onClosePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
+    static ngAcceptInputType_selectedAllEqualsSelectedNothing: unknown;
 }

package/filter-bar/filter-bar.types.d.ts

@@ -88,6 +88,11 @@ export interface KbqPipe {
     value: unknown | null;
     search?: boolean;
     selectAll?: boolean;
+    /**
+     * This is special logic that unselect all items when all selected because "all selected = nothing selected".
+     * Default is true
+     * */
+    selectedAllEqualsSelectedNothing?: boolean;
     /** @deprecated use cleanable = false and removable = false instead */
     required?: boolean;
     cleanable: boolean;

package/filter-bar/pipes/pipe-multi-select.d.ts

@@ -25,6 +25,7 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     get allVisibleOptionsSelected(): boolean;
     /** true if all options selected */
     get allOptionsSelected(): boolean;
+    get selectedAllEqualsSelectedNothing(): boolean;
     private get visibleOptions();
     private selectionAllInProgress;
     /** @docs-private */
@@ -38,9 +39,12 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     /** @docs-private */
     toggleSelectionAllByEnterKey(): void;
     /** @docs-private */
-    toggleSelectionAll(): void;
+    toggleSelectionAll(emitEvent?: boolean): void;
+    private emitChangePipeEvent;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
+    /** handler for select all options in select */
+    selectAllHandler: (event: KeyboardEvent) => void;
     onClose(): void;
     /** opens select */
     open(): void;

package/filter-bar/pipes/pipe-multi-tree-select.d.ts

@@ -28,6 +28,7 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
     get numberOfSelectedLeaves(): number;
     /** true if all options selected */
     get allOptionsSelected(): boolean;
+    get selectedAllEqualsSelectedNothing(): boolean;
     /** true if all visible options selected */
     get allVisibleOptionsSelected(): boolean;
     constructor();
@@ -38,13 +39,16 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
         value: any;
     }): void;
     searchKeydownHandler(): void;
-    toggleSelectAllNode(): void;
+    toggleSelectAllNode(emitEvent?: boolean): void;
     /** updates values for selection and value template */
     updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
     /** opens select */
     open(): void;
     onOpen(): void;
     onClose(): void;
+    /** handler for select all options in select */
+    selectAllHandler: (event: KeyboardEvent) => void;
+    private emitChangePipeEvent;
     private toggleParents;
     private transformer;
     private getLevel;

package/form-field/form-field.d.ts

@@ -38,7 +38,9 @@ export declare class KbqFormField extends KbqColorDirective implements AfterCont
     get hasPasswordToggle(): boolean;
     get canShowCleaner(): boolean;
     get disabled(): boolean;
-    get canShowStepper(): boolean;
+    /** @deprecated stepper should be always visible when provided, so this parameter is redundant,
+     * use `hasStepper` instead */
+    canShowStepper: boolean;
     constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;

package/form-field/stepper.d.ts

@@ -1,11 +1,25 @@
 import { EventEmitter } from '@angular/core';
+import { KbqFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
+/**
+ * Used as temporary solution to resolve circular dependency.
+ * Moving `KbqStepper` to standalone will resolve the issue
+ */
+type KbqNumberInput = KbqFormFieldControl<unknown> & {
+    stepUp: (val: number) => void;
+    stepDown: (val: number) => void;
+    step: number;
+};
 export declare class KbqStepper {
+    private readonly formField;
     readonly stepUp: EventEmitter<void>;
     readonly stepDown: EventEmitter<void>;
-    connectTo(numberInput: any): void;
+    /** Form field number control. */
+    protected get control(): KbqNumberInput;
+    connectTo(numberInput: KbqNumberInput): void;
     onStepUp($event: MouseEvent): void;
     onStepDown($event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqStepper, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqStepper, "kbq-stepper", never, {}, { "stepUp": "stepUp"; "stepDown": "stepDown"; }, never, never, false, never>;
 }
+export {};