@koobiq/components 17.0.0-rc.8 → 17.0.0

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

@@ -4,26 +4,27 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
-/* stylelint-disable no-descending-specificity */
 @mixin kbq-file-upload-theme($theme) {
     $file-upload: map.get($theme, components, file-upload);
 
     .kbq-file-upload {
-        .kbq-focused, .kbq-link.kbq-focused {
-            border: 2px solid kbq-css-variable(
-                file-upload-single-states-focused, map.get($file-upload, single, states, focused)
-            );
+        .kbq-focused,
+        .kbq-link.kbq-focused {
+            border: 2px solid
+                kbq-css-variable(file-upload-single-states-focused, map.get($file-upload, single, states, focused));
         }
     }
 
     .kbq-single-file-upload {
         .kbq-file-upload {
             background-color: kbq-css-variable(
-                file-upload-single-default-background, map.get($file-upload, single, default, background)
+                file-upload-single-default-background,
+                map.get($file-upload, single, default, background)
             );
             border-color: kbq-css-variable(
-                file-upload-single-default-border, map.get($file-upload, single, default, border)) !important;
+                file-upload-single-default-border,
+                map.get($file-upload, single, default, border)
+            ) !important;
 
             &.dragover {
                 background-color: kbq-css-variable(
@@ -32,7 +33,8 @@
                 );
                 border-color: kbq-css-variable(
                     file-upload-single-states-on-drag-border,
-                    map.get($file-upload, single, states, on-drag, border)) !important;
+                    map.get($file-upload, single, states, on-drag, border)
+                ) !important;
             }
 
             &.kbq-error:not(.kbq-disabled) {
@@ -43,7 +45,8 @@
                     );
                     border-color: kbq-css-variable(
                         file-upload-single-states-error-border,
-                        map.get($file-upload, single, states, error, border)) !important;
+                        map.get($file-upload, single, states, error, border)
+                    ) !important;
                 }
 
                 *,
@@ -80,18 +83,25 @@
     .kbq-multiple-file-upload {
         .kbq-file-upload {
             background-color: kbq-css-variable(
-                file-upload-multiple-default-background, map.get($file-upload, multiple, default, background));
+                file-upload-multiple-default-background,
+                map.get($file-upload, multiple, default, background)
+            );
             border-color: kbq-css-variable(
-                file-upload-multiple-default-border, map.get($file-upload, multiple, default, border)) !important;
+                file-upload-multiple-default-border,
+                map.get($file-upload, multiple, default, border)
+            ) !important;
 
             .btn-upload {
                 border-top-color: kbq-css-variable(
-                    file-upload-multiple-default-border, map.get($file-upload, multiple, default, border));
+                    file-upload-multiple-default-border,
+                    map.get($file-upload, multiple, default, border)
+                );
             }
 
             .kbq-file-multiple-uploaded__header {
                 border-bottom-color: kbq-css-variable(
-                    file-upload-multiple-default-grid-divider, map.get($file-upload, multiple, default, grid-divider)
+                    file-upload-multiple-default-grid-divider,
+                    map.get($file-upload, multiple, default, grid-divider)
                 );
 
                 .kbq-file-multiple-uploaded__header-inner {
@@ -170,13 +180,15 @@
             .multiple__uploaded-item {
                 & .kbq-file-upload__file .kbq-icon {
                     color: kbq-css-variable(
-                        file-upload-multiple-default-left-icon, map.get($file-upload, multiple, default, left-icon)
+                        file-upload-multiple-default-left-icon,
+                        map.get($file-upload, multiple, default, left-icon)
                     );
                 }
 
                 & .kbq-file-upload__action .kbq-icon {
                     color: kbq-css-variable(
-                        file-upload-multiple-default-icon-button, map.get($file-upload, multiple, default, icon-button)
+                        file-upload-multiple-default-icon-button,
+                        map.get($file-upload, multiple, default, icon-button)
                     );
                 }
             }
@@ -191,7 +203,6 @@
     }
 }
 
-
 @mixin kbq-file-upload-typography($config) {
     .kbq-single-file-upload {
         & .file-item__text-wrapper,
@@ -235,4 +246,3 @@
         }
     }
 }
-/* stylelint-enable no-descending-specificity */

package/file-upload/file-upload.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-
 .kbq-file-upload {
     box-sizing: border-box;
     display: flex;

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

@@ -1,9 +1,9 @@
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
+import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
 import { Subscription } from 'rxjs';
 import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
-import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
 import * as i0 from "@angular/core";
 export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
     captionTextWhenSelected: string;

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

@@ -4,12 +4,9 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-//todo нужно рефакторить со стилями тут сложно
-/* stylelint-disable no-descending-specificity */
-
+// todo нужно рефакторить со стилями тут сложно
 .kbq-multiple-file-upload .kbq-file-upload {
     border-radius: kbq-css-variable(file-upload-size-multiple-big-container-border-radius);
     border-width: kbq-css-variable(file-upload-size-multiple-big-container-border-width);
@@ -18,8 +15,7 @@ $tokens: meta.module-variables(tokens) !default;
     &.default:not(.selected) {
         justify-content: center;
 
-        padding:
-            kbq-css-variable(file-upload-size-multiple-big-container-padding-vertical)
+        padding: kbq-css-variable(file-upload-size-multiple-big-container-padding-vertical)
             kbq-css-variable(file-upload-size-multiple-big-container-padding-vertical);
 
         min-height: kbq-css-variable(file-upload-size-multiple-big-container-min-height);
@@ -45,8 +41,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.compact:not(.selected) {
-        padding:
-            kbq-css-variable(file-upload-size-single-container-padding-vertical)
+        padding: kbq-css-variable(file-upload-size-single-container-padding-vertical)
             kbq-css-variable(file-upload-size-single-container-padding-horizontal);
 
         & .dropzone {
@@ -70,14 +65,17 @@ $tokens: meta.module-variables(tokens) !default;
             $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)
+            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)
+                    var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) - var(
+                            --kbq-list-size-container-focus-outline-width,
+                            $outline-width
+                        )
                 );
         }
 
@@ -111,7 +109,7 @@ $tokens: meta.module-variables(tokens) !default;
 
         .kbq-file-upload__file,
         .kbq-file-upload__size,
-        .kbq-file-upload__action, {
+        .kbq-file-upload__action {
             //padding-left: $horizontal-padding-item;
             //padding-right: $horizontal-padding-item;
         }
@@ -138,17 +136,15 @@ $tokens: meta.module-variables(tokens) !default;
             $padding-horizontal: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-horizontal);
             $compensation: 2px;
 
-            padding:
-                calc(
+            padding: calc(
                     var(--kbq-file-upload-size-multiple-big-grid-cell-padding-vertical, $padding-vertical) +
-                    $compensation
+                        $compensation
                 )
                 calc(
                     var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal, $padding-horizontal) +
-                    $compensation
+                        $compensation
                 );
         }
-
     }
 
     .btn-upload {
@@ -156,8 +152,7 @@ $tokens: meta.module-variables(tokens) !default;
         $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)
+        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: kbq-css-variable(file-upload-size-single-container-border-radius);
@@ -185,11 +180,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-.kbq-hint {
-    display: block;
-}
-
 .kbq-file-upload__hint {
     margin-top: kbq-css-variable(form-field-hint-size-margin-top);
 }
-/* stylelint-enable no-descending-specificity */

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

@@ -1,5 +1,5 @@
+export * from './file-drop';
 export * from './file-upload';
 export * from './file-upload.module';
 export * from './multiple-file-upload.component';
 export * from './single-file-upload.component';
-export * from './file-drop';

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

@@ -1,8 +1,8 @@
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
-import { Subscription } from 'rxjs';
 import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
-import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileLabel;

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

@@ -6,7 +6,6 @@
 @use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-single-file-upload .kbq-file-upload {
@@ -14,8 +13,7 @@ $tokens: meta.module-variables(tokens) !default;
     $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)
+    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: kbq-css-variable(file-upload-size-single-container-border-radius);
@@ -52,10 +50,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-.kbq-hint {
-    display: block;
-}
-
 .kbq-file-upload__hint {
     margin-top: kbq-css-variable(form-field-hint-size-margin-top);
 }

package/form-field/_form-field-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-form-field-state($component, $state-name) {
     $state: map.get($component, $state-name);
 
@@ -39,18 +38,25 @@
 
         @include kbq-form-field-state($form-field, default);
 
-        /* stylelint-disable no-descending-specificity */
         & .kbq-input {
             //https://css-tricks.com/almanac/selectors/a/autofill/
             &:-webkit-autofill,
             &:-webkit-autofill:hover,
             &:-webkit-autofill:focus {
-                -webkit-box-shadow: 0 0 0 40rem kbq-css-variable(
-                    form-field-states-autofill-background, map.get($form-field, states-autofill, background)) inset;
+                -webkit-box-shadow: 0 0 0 40rem
+                    kbq-css-variable(
+                        form-field-states-autofill-background,
+                        map.get($form-field, states-autofill, background)
+                    )
+                    inset;
                 -webkit-text-fill-color: kbq-css-variable(
-                    form-field-states-autofill-text, map.get($form-field, states-autofill, text));
+                    form-field-states-autofill-text,
+                    map.get($form-field, states-autofill, text)
+                );
                 caret-color: kbq-css-variable(
-                    form-field-states-autofill-text, map.get($form-field, states-autofill, text));
+                    form-field-states-autofill-text,
+                    map.get($form-field, states-autofill, text)
+                );
             }
         }
 
@@ -58,8 +64,11 @@
             @include kbq-form-field-state($form-field, states-focused);
 
             & .kbq-form-field__container {
-                box-shadow: 0 0 0.1px 1px kbq-css-variable(
-                    form-field-states-focused-focu-outline, map.get($form-field, states-focused, focus-outline));
+                box-shadow: 0 0 0.1px 1px
+                    kbq-css-variable(
+                        form-field-states-focused-focu-outline,
+                        map.get($form-field, states-focused, focus-outline)
+                    );
             }
         }
 
@@ -68,8 +77,11 @@
             @include kbq-form-field-state($form-field, states-error);
 
             &.cdk-focused .kbq-form-field__container {
-                box-shadow: 0 0 0.1px 1px kbq-css-variable(
-                    form-field-states-error-focu-outline, map.get($form-field, states-error, focus-outline));
+                box-shadow: 0 0 0.1px 1px
+                    kbq-css-variable(
+                        form-field-states-error-focu-outline,
+                        map.get($form-field, states-error, focus-outline)
+                    );
             }
         }
 
@@ -79,11 +91,11 @@
             .kbq-icon {
                 color: kbq-css-variable(form-field-disabled-text, map.get($form-field, disabled, text));
                 -webkit-text-fill-color: kbq-css-variable(
-                    form-field-disabled-text, map.get($form-field, disabled, text)
+                    form-field-disabled-text,
+                    map.get($form-field, disabled, text)
                 );
             }
         }
-        /* stylelint-enable no-descending-specificity */
     }
 
     .kbq-form-field__hint {

package/form-field/_hint-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-hint-color($component, $type, $style-name) {
     $style: map.get($component, $type, $style-name);
 
@@ -16,7 +15,6 @@
     }
 }
 
-
 @mixin kbq-hint-theme($theme) {
     $hint: map.get(map.get($theme, components), hint);
 

package/form-field/cleaner.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-cleaner {
     display: flex;
     align-items: center;

package/form-field/form-field.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable scss/operator-no-newline-after */
+
 @use 'sass:meta';
 @use 'sass:map';
 
@@ -6,11 +8,8 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-/* stylelint-disable no-descending-specificity */
-
 .kbq-form-field {
     position: relative;
     display: inline-block;
@@ -47,8 +46,8 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-input {
             padding-left: calc(
                 var(--kbq-form-field-size-icon-size, map.get($tokens, form-field-size-icon-size)) +
-                var(--kbq-form-field-size-icon-margin-left, map.get($tokens, form-field-size-icon-margin-left)) +
-                var(--kbq-form-field-size-icon-margin-right, map.get($tokens, form-field-size-icon-margin-right))
+                    var(--kbq-form-field-size-icon-margin-left, map.get($tokens, form-field-size-icon-margin-left)) +
+                    var(--kbq-form-field-size-icon-margin-right, map.get($tokens, form-field-size-icon-margin-right))
             );
         }
     }
@@ -60,14 +59,14 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-input {
             padding-right: calc(
                 var(--kbq-form-field-size-icon-button-size, map.get($tokens, form-field-size-icon-button-size)) +
-                var(
-                    --kbq-form-field-size-icon-button-margin-left,
-                    map.get($tokens, form-field-size-icon-button-margin-left)
-                ) +
-                var(
-                    --kbq-form-field-size-icon-button-margin-right,
-                    map.get($tokens, form-field-size-icon-button-margin-right)
-                )
+                    var(
+                        --kbq-form-field-size-icon-button-margin-left,
+                        map.get($tokens, form-field-size-icon-button-margin-left)
+                    ) +
+                    var(
+                        --kbq-form-field-size-icon-button-margin-right,
+                        map.get($tokens, form-field-size-icon-button-margin-right)
+                    )
             );
         }
     }
@@ -150,4 +149,3 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-password-hint {
     margin-top: kbq-css-variable(form-field-hint-size-gap);
 }
-/* stylelint-enable no-descending-specificity */

package/form-field/hint.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-hint {
     display: flex;
 

package/form-field/password-toggle.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-password-toggle {
     display: flex;
     align-items: center;

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

@@ -1,12 +1,12 @@
-export * from './form-field.module';
+export * from './cleaner';
 export * from './form-field';
 export * from './form-field-control';
 export * from './form-field-errors';
+export * from './form-field.module';
 export * from './hint';
 export * from './password-hint';
 export * from './password-toggle';
-export * from './suffix';
 export * from './prefix';
-export * from './cleaner';
 export * from './stepper';
+export * from './suffix';
 export * from './validate.directive';

package/form-field/stepper.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-stepper {
     display: flex;
     flex-direction: column;

package/icon/_icon-button-theme.scss

@@ -3,7 +3,6 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-icon-button-theme($theme) {
     $icon-button: map.get($theme, components, icon-button);
 
@@ -35,7 +34,9 @@
             &:active,
             &.kbq-active {
                 color: kbq-css-variable(
-                    icon-button-ontrast-state-active, map.get($icon-button, contrast, state-active));
+                    icon-button-ontrast-state-active,
+                    map.get($icon-button, contrast, state-active)
+                );
             }
 
             &:not(.kbq-disabled):hover {
@@ -44,7 +45,9 @@
 
             &.kbq-disabled {
                 color: kbq-css-variable(
-                    icon-button-ontrast-state-disabled, map.get($icon-button, contrast, state-disabled));
+                    icon-button-ontrast-state-disabled,
+                    map.get($icon-button, contrast, state-disabled)
+                );
             }
         }
 
@@ -54,17 +57,23 @@
             &:active,
             &.kbq-active {
                 color: kbq-css-variable(
-                    icon-button-ade-contrast-state-active, map.get($icon-button, fade-contrast, state-active));
+                    icon-button-ade-contrast-state-active,
+                    map.get($icon-button, fade-contrast, state-active)
+                );
             }
 
             &:not(.kbq-disabled):hover {
                 color: kbq-css-variable(
-                    icon-button-ade-contrast-state-hover, map.get($icon-button, fade-contrast, state-hover));
+                    icon-button-ade-contrast-state-hover,
+                    map.get($icon-button, fade-contrast, state-hover)
+                );
             }
 
             &.kbq-disabled {
                 color: kbq-css-variable(
-                    icon-button-ade-contrast-state-disabled, map.get($icon-button, fade-contrast, state-disabled));
+                    icon-button-ade-contrast-state-disabled,
+                    map.get($icon-button, fade-contrast, state-disabled)
+                );
             }
         }
 
@@ -99,7 +108,9 @@
 
             &.kbq-disabled {
                 color: kbq-css-variable(
-                    icon-button-uccess-state-disabled, map.get($icon-button, success, state-disabled));
+                    icon-button-uccess-state-disabled,
+                    map.get($icon-button, success, state-disabled)
+                );
             }
         }
 

package/icon/_icon-theme.scss

@@ -3,7 +3,6 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-icon-theme($theme) {
     $icon: map.get($theme, components, icon);
 

package/icon/icon-button.scss

@@ -3,19 +3,16 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-icon-button {
     &:not(.kbq-disabled) {
         cursor: pointer;
     }
 
-    padding:
-        kbq-css-variable(icon-button-size-small-vertical-padding)
+    padding: kbq-css-variable(icon-button-size-small-vertical-padding)
         kbq-css-variable(icon-button-size-small-horizontal-padding);
 
     &.kbq-icon-button_small {
-        padding:
-            kbq-css-variable(icon-button-size-normal-vertical-padding)
+        padding: kbq-css-variable(icon-button-size-normal-vertical-padding)
             kbq-css-variable(icon-button-size-normal-horizontal-padding);
     }
 }

package/icon/icon-item.scss

@@ -3,21 +3,18 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-icon-item {
     box-sizing: border-box;
 
     border-radius: 50%;
 
     &.kbq-icon-item_normal {
-        padding:
-            kbq-css-variable(icon-item-size-normal-vertical-padding)
+        padding: kbq-css-variable(icon-item-size-normal-vertical-padding)
             kbq-css-variable(icon-item-size-normal-horizontal-padding);
     }
 
     &.kbq-icon-item_big {
-        padding:
-            kbq-css-variable(icon-item-size-big-vertical-padding)
+        padding: kbq-css-variable(icon-item-size-big-vertical-padding)
             kbq-css-variable(icon-item-size-big-horizontal-padding);
     }
 }

package/icon/icon.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-
 .kbq-icon-rotate_90 {
     transform: rotate(90deg);
 }

package/icon/public-api.d.ts

@@ -1,4 +1,4 @@
-export * from './icon.module';
-export * from './icon.component';
 export * from './icon-button.component';
 export * from './icon-item.component';
+export * from './icon.component';
+export * from './icon.module';

package/input/_input-theme.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-input-typography($config) {
     .kbq-input,
     .kbq-input.kbq-input-password::placeholder {