@koobiq/components 16.0.0-beta.7 → 16.0.0-beta.9

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

@@ -7,8 +7,11 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
+/* stylelint-disable no-descending-specificity */
 @mixin kbq-file-upload-text-color($states) {
-    &, .kbq-icon, .kbq-link {
+    &,
+    .kbq-icon,
+    .kbq-link {
         color: map.get($states, border);
     }
 }
@@ -20,15 +23,16 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin kbq-file-upload-theme($theme) {
     $file-upload: map.get(map.get($theme, components), file-upload);
+
     $single: map.get($file-upload, single);
     $single-states: map.get($single, states);
+
     $multiple: map.get($file-upload, multiple);
     $multiple-states: map.get($multiple, states);
-    $foreground: map.get($theme, foreground);
 
     .kbq-file-upload {
         .kbq-focused, .kbq-link.kbq-focused {
-            border: 2px solid map.get(map.get($theme, states), focused-color);
+            border: 2px solid map.get(map.get($single, states), focused);
         }
     }
 
@@ -37,20 +41,23 @@ $tokens: meta.module-variables(tokens) !default;
             @include kbq-file-upload-color(map.get($single, default));
 
             &.dragover {
-                @include kbq-file-upload-color(map.get($single-states, drag-n-drop));
+                @include kbq-file-upload-color(map.get($single-states, on-drag));
             }
 
-            &.kbq-error:not(.disabled) {
+            &.kbq-error:not(.kbq-disabled) {
+                $state-error: map.get($single-states, error);
+
                 &:not(.dragover) {
-                    @include kbq-file-upload-color(map.get($single-states, error));
+                    @include kbq-file-upload-color($state-error);
                 }
 
-                *, .kbq-icon {
-                    color: map.get($foreground, text-error);
+                *,
+                .kbq-icon {
+                    color: map.get($state-error, text-block);
                 }
             }
 
-            &.disabled {
+            &.kbq-disabled {
                 @include kbq-file-upload-color(map.get($single-states, disabled));
 
                 @include kbq-file-upload-text-color(map.get($single-states, disabled));
@@ -60,37 +67,37 @@ $tokens: meta.module-variables(tokens) !default;
 
     .kbq-multiple-file-upload {
         .kbq-file-upload {
-            @include kbq-file-upload-color(map.get($multiple, default));
+            $default: map.get($multiple, default);
+
+            @include kbq-file-upload-color($default);
 
             .btn-upload {
-                .dropzone {
-                    border-top-color: map.get(map.get($multiple, default), border);
-                }
+                border-top-color: map.get($default, border);
             }
 
             .kbq-file-multiple-uploaded__header {
-                border-bottom-color: map.get(map.get($multiple, default), border);
+                border-bottom-color: map.get($default, grid-divider);
 
-                &-inner {
-                    color: map.get($foreground, text-less-contrast);
+                .kbq-file-multiple-uploaded__header-inner {
+                    //color: map.get(map.get($multiple, default), border);;
                 }
             }
 
             &.dragover {
-                @include kbq-file-upload-color(map.get($multiple-states, drag-n-drop));
+                @include kbq-file-upload-color(map.get($multiple-states, on-drag));
 
                 .kbq-file-multiple-uploaded__header {
-                    border-bottom-color: map.get(map.get($multiple-states, drag-n-drop), background) !important;
+                    border-bottom-color: map.get(map.get($multiple-states, on-drag), background) !important;
                 }
 
                 &.selected {
                     .dropzone {
-                        border-top-color: map.get(map.get($multiple-states, drag-n-drop), border);
+                        border-top-color: map.get(map.get($multiple-states, on-drag), border);
                     }
                 }
             }
 
-            &.disabled {
+            &.kbq-disabled {
                 @include kbq-file-upload-color(map.get($multiple-states, disabled));
 
                 @include kbq-file-upload-text-color(map.get($multiple-states, disabled));
@@ -102,25 +109,33 @@ $tokens: meta.module-variables(tokens) !default;
                 }
             }
 
-            &:not(.disabled) {
+            &:not(.kbq-disabled) {
                 .kbq-file-upload__row.error {
-                    *, .kbq-icon {
-                        color: map.get($foreground, text-error);
+                    $state-error: map.get($multiple-states, error);
+
+                    *,
+                    .kbq-icon {
+                        color: map.get($state-error, text-block);
                     }
                 }
             }
 
             .multiple__uploaded-item {
-                .kbq-list-text {
-                    padding-right: 0;
+                & .kbq-file-upload__file .kbq-icon {
+                    color: map.get($default, left-icon)
+                }
+
+                & .kbq-file-upload__action .kbq-icon {
+                    color: map.get($default, icon-button)
                 }
             }
         }
     }
 
-    .kbq-single-file-upload, .kbq-multiple-file-upload {
+    .kbq-single-file-upload,
+    .kbq-multiple-file-upload {
         .kbq-file-upload__hint:not(.kbq-error) {
-            color: map-get($foreground, text-less-contrast);
+            //color: map-get($foreground, text-less-contrast);
         }
     }
 }
@@ -128,18 +143,22 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin kbq-file-upload-typography($config) {
     .kbq-single-file-upload {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-single));
+        & .file-item__text-wrapper,
+        & .dropzone__text {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-single-text-block));
+        }
     }
 
     .kbq-multiple-file-upload {
         .multiple__header {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-header));
+            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-title));
         }
 
         .multiple__caption {
-            &, .kbq-link {
+            &,
+            .kbq-link {
                 @include kbq-typography-level-to-styles(
-                    $config, map.get($tokens, file-upload-font-multiple-caption)
+                    $config, map.get($tokens, file-upload-font-multiple-text-block)
                 );
             }
         }
@@ -147,12 +166,12 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-file-multiple-uploaded__header {
             @include kbq-typography-level-to-styles(
                 $config,
-                map.get($tokens, file-upload-font-multiple-uploaded-header)
+                map.get($tokens, file-upload-font-multiple-grid)
             );
         }
 
         .multiple__uploaded-item {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-uploaded-item));
+            @include kbq-typography-level-to-styles($config, map.get($tokens, file-upload-font-multiple-grid));
         }
 
         .kbq-file-upload {
@@ -160,15 +179,10 @@ $tokens: meta.module-variables(tokens) !default;
             .kbq-list-option {
                 @include kbq-typography-level-to-styles(
                     $config,
-                    map.get($tokens, file-upload-font-multiple-uploaded-item)
+                    map.get($tokens, file-upload-font-multiple-grid)
                 );
             }
         }
     }
-
-    .kbq-single-file-upload, .kbq-multiple-file-upload {
-        .kbq-file-upload__hint {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-default));
-        }
-    }
 }
+/* stylelint-enable no-descending-specificity */

package/file-upload/file-upload.scss

@@ -6,26 +6,19 @@
 @use '../core/styles/common';
 
 $tokens: meta.module-variables(tokens) !default;
-$dropzone-text-margin-left: map.get($tokens, size-xs);
 
 .kbq-file-upload {
     box-sizing: border-box;
     display: flex;
     align-items: center;
     position: relative;
-    cursor: pointer;
 
-    .dropzone, .file-item {
+    .dropzone,
+    .file-item {
         display: flex;
         align-items: center;
     }
 
-    .dropzone {
-        .dropzone__text {
-            margin-left: $dropzone-text-margin-left;
-        }
-    }
-
     .kbq-ellipsis-center {
         position: relative;
         display: flex;

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

@@ -7,56 +7,119 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-$dropzone-text-margin-left: map.get($tokens, size-xs);
-$multiple-default-height: 176px;
-$border-type-header: solid;
-
-$horizontal-padding-item: var(
-    --kbq-file-upload-size-multiple-uploaded-item-horizontal-padding,
-    map.get($tokens, file-upload-size-multiple-uploaded-item-horizontal-padding)
-);
-$vertical-padding-item: var(
-    --kbq-file-upload-size-multiple-uploaded-item-vertical-padding,
-    map.get($tokens, file-upload-size-multiple-uploaded-item-vertical-padding)
-);
-
-.kbq-file-upload {
+//todo нужно рефакторить со стилями тут сложно
+/* stylelint-disable no-descending-specificity */
+
+.kbq-multiple-file-upload .kbq-file-upload {
     border-radius: var(
-        --kbq-file-upload-size-multiple-border-radius,
-        map.get($tokens, file-upload-size-multiple-border-radius)
+        --kbq-file-upload-size-multiple-big-container-border-radius,
+        map.get($tokens, file-upload-size-multiple-big-container-border-radius)
     );
     border-width: var(
-        --kbq-file-upload-size-multiple-border-width,
-        map.get($tokens, file-upload-size-multiple-border-width)
-    );
-    border-style: var(
-        --kbq-file-upload-size-multiple-border-style,
-        map.get($tokens, file-upload-size-multiple-border-style)
+        --kbq-file-upload-size-multiple-big-container-border-width,
+        map.get($tokens, file-upload-size-multiple-big-container-border-width)
     );
+    border-style: dashed;
 
-    &.default {
-        min-height: $multiple-default-height;
+    &.default:not(.selected) {
         justify-content: center;
-    }
 
-    &.compact:not(.selected) {
-        height: var(
-            --kbq-file-upload-size-single-height,
-            map.get($tokens, file-upload-size-single-height)
-        );
-        padding-top: var(
-            --kbq-file-upload-size-single-vertical-padding,
-            map.get($tokens, file-upload-size-single-vertical-padding)
+        padding:
+            var(
+                --kbq-file-upload-size-multiple-big-container-padding-vertical,
+                map.get($tokens, file-upload-size-multiple-big-container-padding-vertical)
+            )
+            var(
+                --kbq-file-upload-size-multiple-big-container-padding-vertical,
+                map.get($tokens, file-upload-size-multiple-big-container-padding-vertical)
+            );
+
+        min-height: var(
+            --kbq-file-upload-size-multiple-big-container-min-height,
+            map.get($tokens, file-upload-size-multiple-big-container-min-height)
         );
-        padding-bottom: var(
-            --kbq-file-upload-size-single-vertical-padding,
-            map.get($tokens, file-upload-size-single-vertical-padding)
+
+        min-width: var(
+            --kbq-file-upload-size-multiple-big-container-min-width,
+            map.get($tokens, file-upload-size-multiple-big-container-min-width)
         );
-        padding-left: map.get($tokens, size-m);
+
+        & .dropzone {
+            gap: var(
+                --kbq-file-upload-size-multiple-big-container-content-gap-horizontal,
+                map.get($tokens, file-upload-size-multiple-big-container-content-gap-horizontal)
+            );
+        }
+
+        & .dropzone__text {
+            & .multiple__caption {
+                padding-top: var(
+                    --kbq-file-upload-size-multiple-big-text-block-content-gap-vertical,
+                    map.get($tokens, file-upload-size-multiple-big-text-block-content-gap-vertical)
+                );
+
+                gap: var(
+                    --kbq-file-upload-size-multiple-big-text-block-content-gap-horizontal,
+                    map.get($tokens, file-upload-size-multiple-big-text-block-content-gap-horizontal)
+                );
+            }
+        }
     }
 
-    .kbq-list-option {
-        padding: $horizontal-padding-item $vertical-padding-item;
+    &.compact:not(.selected) {
+        padding:
+            var(
+                --kbq-file-upload-size-single-container-padding-vertical,
+                map.get($tokens, file-upload-size-single-container-padding-vertical)
+            )
+            var(
+                --kbq-file-upload-size-single-container-padding-horizontal,
+                map.get($tokens, file-upload-size-single-container-padding-horizontal)
+            );
+
+        & .dropzone {
+            gap: var(
+                --kbq-file-upload-size-single-container-content-gap-horizontal,
+                map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
+            );
+
+            & .dropzone__text.multiple__caption {
+                padding-top: var(
+                    --kbq-file-upload-size-single-text-block-padding-vertical,
+                    map.get($tokens, file-upload-size-single-text-block-padding-vertical)
+                );
+
+                padding-bottom: var(
+                    --kbq-file-upload-size-single-text-block-padding-vertical,
+                    map.get($tokens, file-upload-size-single-text-block-padding-vertical)
+                );
+
+                gap: var(
+                    --kbq-file-upload-size-single-text-block-content-gap-horizontal,
+                    map.get($tokens, file-upload-size-single-text-block-content-gap-horizontal)
+                );
+            }
+        }
+    }
+
+    & .kbq-list-option.multiple__uploaded-item {
+        padding: 0;
+
+        & .kbq-list-text {
+            $padding-vertical: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-vertical);
+            $padding-horizontal: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-horizontal);
+            $outline-width: map.get($tokens, list-size-container-focus-outline-width);
+
+            padding:
+                calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, $padding-vertical) -
+                    var(--kbq-list-size-container-focus-outline-width, $outline-width)
+                )
+                calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) -
+                    var(--kbq-list-size-container-focus-outline-width, $outline-width)
+                );
+        }
 
         .kbq-icon {
             margin-right: 0;
@@ -75,6 +138,11 @@ $vertical-padding-item: var(
         .kbq-file-upload__file {
             width: 65%;
             max-width: 65%;
+
+            gap: var(
+                --kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal,
+                map.get($tokens, file-upload-size-multiple-big-grid-cell-content-gap-horizontal)
+            );
         }
 
         .kbq-file-upload__size {
@@ -87,8 +155,8 @@ $vertical-padding-item: var(
         .kbq-file-upload__file,
         .kbq-file-upload__size,
         .kbq-file-upload__action, {
-            padding-left: $horizontal-padding-item;
-            padding-right: $horizontal-padding-item;
+            //padding-left: $horizontal-padding-item;
+            //padding-right: $horizontal-padding-item;
         }
     }
 
@@ -106,30 +174,72 @@ $vertical-padding-item: var(
 
     .kbq-file-multiple-uploaded__header {
         border-bottom-width: 1px;
-        border-bottom-style: $border-type-header;
-
-        &-inner {
-            padding: $horizontal-padding-item $vertical-padding-item;
-            border: 2px solid transparent;
-            border-bottom: unset;
-            box-sizing: border-box;
-            height: var(--kbq-list-size-item-height, map.get($tokens, size-3xl));
+        border-bottom-style: solid;
+
+        .kbq-file-multiple-uploaded__header-inner {
+            $padding-vertical: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-vertical);
+            $padding-horizontal: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-horizontal);
+            $compensation: 3px;
+
+            padding:
+                calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, $padding-vertical) +
+                    $compensation
+                )
+                calc(
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) +
+                    $compensation
+                );
         }
 
     }
 
     .btn-upload {
-        .dropzone {
-            margin: 0;
-            border-top-width: var(
-                --kbq-file-upload-size-multiple-border-width,
-                map.get($tokens, file-upload-size-multiple-border-width)
-            );
-            border-top-style: var(
-                --kbq-file-upload-size-multiple-border-style,
-                map.get($tokens, file-upload-size-multiple-border-style)
+        $padding-vertical: map.get($tokens, file-upload-size-single-container-padding-vertical);
+        $padding-horizontal: map.get($tokens, file-upload-size-single-container-padding-horizontal);
+        $border-width: map.get($tokens, file-upload-size-single-container-border-width);
+
+        padding:
+            calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
+            calc(var(--kbq-file-upload-size-single-container-padding-horizontal, $padding-horizontal) - $border-width);
+
+        border-top-left-radius: var(
+            --kbq-file-upload-size-single-container-border-radius,
+            map.get($tokens, file-upload-size-single-container-border-radius)
+        );
+
+        border-top-right-radius: var(
+            --kbq-file-upload-size-single-container-border-radius,
+            map.get($tokens, file-upload-size-single-container-border-radius)
+        );
+        border-top-width: var(
+            --kbq-file-upload-size-single-container-border-width,
+            map.get($tokens, file-upload-size-single-container-border-width)
+        );
+        border-top-style: dashed;
+
+        & .dropzone {
+            gap: var(
+                --kbq-file-upload-size-single-container-content-gap-horizontal,
+                map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
             );
-            padding: map.get($tokens, size-xxs) map.get($tokens, size-m);
+
+            & .dropzone__text.multiple__caption {
+                padding-top: var(
+                    --kbq-file-upload-size-single-text-block-padding-vertical,
+                    map.get($tokens, file-upload-size-single-text-block-padding-vertical)
+                );
+
+                padding-bottom: var(
+                    --kbq-file-upload-size-single-text-block-padding-vertical,
+                    map.get($tokens, file-upload-size-single-text-block-padding-vertical)
+                );
+
+                gap: var(
+                    --kbq-file-upload-size-single-text-block-content-gap-horizontal,
+                    map.get($tokens, file-upload-size-single-text-block-content-gap-horizontal)
+                );
+            }
         }
     }
 
@@ -146,3 +256,4 @@ $vertical-padding-item: var(
 .kbq-file-upload__hint {
     margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
 }
+/* stylelint-enable no-descending-specificity */

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

@@ -7,32 +7,48 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
-.kbq-file-upload {
-    height: var(
-        --kbq-file-upload-size-single-height,
-        map.get($tokens, file-upload-size-single-height)
-    );
-    padding-top: var(
-        --kbq-file-upload-size-single-vertical-padding,
-        map.get($tokens, file-upload-size-single-vertical-padding)
-    );
-    padding-bottom: var(
-        --kbq-file-upload-size-single-vertical-padding,
-        map.get($tokens, file-upload-size-single-vertical-padding)
-    );
-    padding-left: map.get($tokens, size-m);
+.kbq-single-file-upload .kbq-file-upload {
+    $padding-vertical: map.get($tokens, file-upload-size-single-container-padding-vertical);
+    $padding-horizontal: map.get($tokens, file-upload-size-single-container-padding-horizontal);
+    $border-width: map.get($tokens, file-upload-size-single-container-border-width);
+
+    padding:
+        calc(var(--kbq-file-upload-size-single-container-padding-vertical, $padding-vertical) - $border-width)
+        calc(var(--kbq-file-upload-size-single-container-padding-horizontal, $padding-horizontal) - $border-width);
 
     border-radius: var(
-        --kbq-file-upload-size-single-border-radius,
-        map.get($tokens, file-upload-size-single-border-radius)
+        --kbq-file-upload-size-single-container-border-radius,
+        map.get($tokens, file-upload-size-single-container-border-radius)
     );
     border-width: var(
-        --kbq-file-upload-size-single-border-width,
-        map.get($tokens, file-upload-size-single-border-width));
-    border-style: var(
-        --kbq-file-upload-size-single-border-style,
-        map.get($tokens, file-upload-size-single-border-style)
+        --kbq-file-upload-size-single-container-border-width,
+        map.get($tokens, file-upload-size-single-container-border-width)
     );
+    border-style: dashed;
+
+    & .dropzone__text {
+        padding-top: var(
+            --kbq-file-upload-size-single-text-block-padding-vertical,
+            map.get($tokens, file-upload-size-single-text-block-padding-vertical)
+        );
+
+        padding-bottom: var(
+            --kbq-file-upload-size-single-text-block-padding-vertical,
+            map.get($tokens, file-upload-size-single-text-block-padding-vertical)
+        );
+
+        gap: var(
+            --kbq-file-upload-size-single-text-block-content-gap-horizontal,
+            map.get($tokens, file-upload-size-single-text-block-content-gap-horizontal)
+        );
+    }
+
+    & .dropzone {
+        gap: var(
+            --kbq-file-upload-size-single-container-content-gap-horizontal,
+            map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
+        );
+    }
 
     .file-item {
         width: 100%;
@@ -42,8 +58,12 @@ $tokens: meta.module-variables(tokens) !default;
             align-items: center;
             width: 100%;
 
+            gap: var(
+                --kbq-file-upload-size-single-container-content-gap-horizontal,
+                map.get($tokens, file-upload-size-single-container-content-gap-horizontal)
+            );
+
             .file-item__text {
-                margin-left: map.get($tokens, size-s);
                 width: 120px;
                 flex-grow: 1;
             }

package/form-field/_hint-theme.scss

@@ -9,7 +9,7 @@
     color: map.get($hint, text);
 
     & .kbq-icon {
-        color: map.get($hint, icon);
+        color: map.get($hint, icon) !important;
     }
 }
 
@@ -64,4 +64,8 @@
     .kbq-hint .kbq-hint__text {
         @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-normal-text));
     }
+
+    .kbq-hint.kbq-hint_compact .kbq-hint__text {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-compact-text));
+    }
 }

package/form-field/hint.d.ts

@@ -11,7 +11,10 @@ export declare const KbqHintMixinBase: CanColorCtor & typeof KbqHintBase;
 export declare class KbqHint extends KbqHintMixinBase {
     id: string;
     fillTextOff: boolean;
+    get compact(): any;
+    set compact(value: any);
+    private _compact;
     constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqHint, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
 }

package/form-field/hint.scss

@@ -10,6 +10,14 @@ $tokens: meta.module-variables(tokens) !default;
     display: block;
 
     & .kbq-icon {
-        margin-right: var(--kbq-hint-size-content-padding, map-get($tokens, hint-size-content-padding));
+        margin-right: var(--kbq-hint-size-normal-content-padding, map-get($tokens, hint-size-normal-content-padding));
+    }
+
+    &.kbq-hint_compact {
+        & .kbq-icon {
+            margin-right: var(
+                --kbq-hint-size-compact-content-padding, map-get($tokens, hint-size-compact-content-padding)
+            );
+        }
     }
 }