@koobiq/components 19.1.0 → 19.2.0

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

@@ -58,7 +58,6 @@ 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 */
@@ -90,11 +89,8 @@ 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 */
+    protected get captionTextWhenSelected(): string;
     /** @docs-private */
     readonly configuration: KbqMultipleFileUploadLocaleConfig | null;
     private readonly localeId;

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

@@ -47,7 +47,6 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     protected readonly fileLoader: KbqFileLoader | undefined;
     /** @docs-private */
     private readonly hint;
-    /** @docs-private */
     /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
      * @docs-private
      */

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

@@ -1,54 +1,135 @@
 @use '../core/styles/common/tokens' as *;
 
-.kbq-single-file-upload .kbq-file-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]
-        );
-    min-height: var(--kbq-file-upload-single-min-height);
-
-    border-radius: var(--kbq-file-upload-size-single-container-border-radius);
-    border-width: var(--kbq-file-upload-size-single-container-border-width);
-    border-style: dashed;
-
-    & .kbq-file-dropzone__text {
-        padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-        padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-        gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
+@mixin _kbq-single-file-upload-theme() {
+    background-color: var(--kbq-file-upload-single-default-container-background);
+    border-color: var(--kbq-file-upload-single-default-container-border) !important;
+
+    &:not(.kbq-disabled, .kbq-error) {
+        .kbq-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-single-default-dropzone-icon-color);
+        }
+
+        .kbq-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);
+        }
     }
 
-    & .kbq-file-dropzone {
-        gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+    &.kbq-file-drop_dragover {
+        background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
+        border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
     }
 
-    .kbq-file-item {
-        width: 100%;
+    &.kbq-error:not(.kbq-disabled) {
+        &:not(.kbq-file-drop_dragover) {
+            background-color: var(--kbq-file-upload-single-states-error-container-background);
+            border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
+        }
 
-        .kbq-file-item__text-wrapper {
-            display: flex;
-            align-items: center;
-            width: 100%;
+        .kbq-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-single-states-error-dropzone-icon-color);
+        }
 
-            gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+        .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
+            color: var(--kbq-file-upload-single-states-error-left-icon-color);
+        }
 
-            .kbq-file-item__text {
-                width: 120px;
-                flex-grow: 1;
-            }
+        .kbq-file-item__text,
+        .kbq-file-upload__dropzone-caption:not(.kbq-link) {
+            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-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-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-single-states-disabled-dropzone-icon-color);
+        }
+
+        .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
+            color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
+        }
+
+        .kbq-file-upload__dropzone-caption,
+        .kbq-file-item__text {
+            color: var(--kbq-file-upload-single-states-disabled-text-block-color);
         }
 
         .kbq-file-item__size {
-            padding: 0 var(--kbq-size-s);
+            color: var(--kbq-file-upload-single-states-disabled-file-size-text-color);
+        }
+    }
+}
+
+.kbq-single-file-upload {
+    &.kbq-single-file-upload_selected .kbq-file-upload {
+        .kbq-file-item {
+            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]
+                );
+            padding-right: 0;
+        }
+    }
+
+    &:not(.kbq-single-file-upload_selected) .kbq-file-upload {
+        padding: calc(
+                var(--kbq-file-upload-size-single-container-padding-vertical) - var(
+                        --kbq-file-upload-size-single-container-border-width
+                    )
+            )
+            calc(
+                var(--kbq-file-upload-size-single-container-padding-horizontal) - var(
+                        --kbq-file-upload-size-single-container-border-width
+                    )
+            );
+    }
+
+    .kbq-file-upload {
+        min-height: var(--kbq-file-upload-single-min-height);
+
+        border-radius: var(--kbq-file-upload-size-single-container-border-radius);
+        border-width: var(--kbq-file-upload-size-single-container-border-width);
+        border-style: dashed;
+
+        .kbq-file-item {
+            width: 100%;
+
+            .kbq-file-item__text-wrapper {
+                display: flex;
+                align-items: center;
+                width: 100%;
+
+                gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+
+                .kbq-file-item__text {
+                    width: 120px;
+                    flex-grow: 1;
+                }
+            }
+
+            .kbq-file-item__size {
+                padding: 0 var(--kbq-size-s);
+            }
         }
 
         .kbq-file-upload__action {
-            padding: var(--kbq-size-xxs);
+            padding: 13px;
         }
+
+        @include _kbq-single-file-upload-theme();
     }
 }

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

@@ -1,9 +1,14 @@
+import { KbqFilters } from './filters';
 import * as i0 from "@angular/core";
 export declare class KbqFilterBarButton {
     private readonly button;
     /** KbqFilterBar instance */
     private readonly filterBar;
+    /** KbqFilters instance */
+    protected readonly filters: KbqFilters;
     constructor();
+    /** @docs-private */
+    saveFocusedElement(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFilterBarButton, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFilterBarButton, "[kbqFilterBarButton]", never, {}, {}, never, never, true, never>;
 }