@koobiq/components 16.0.0-beta.9 → 17.0.0-beta.1

package/autocomplete/_autocomplete-theme.scss

@@ -5,17 +5,10 @@
 
 
 @mixin kbq-autocomplete-theme($theme) {
-    $foreground: map.get($theme, foreground);
+    $select-panel: map.get(map.get($theme, components), select-panel);
 
     .kbq-autocomplete-panel {
-        @include popup.popup-params($theme);
-
-        color: theming.kbq-color($foreground, text);
-
-        .kbq-selected {
-            $popup: map.get(map.get($theme, components), popup);
-
-            background-color: map.get($popup, background);
-        }
+        box-shadow: map.get($select-panel, shadow);
+        background: map.get($select-panel, background);
     }
 }

package/autocomplete/autocomplete.scss

@@ -23,11 +23,6 @@ $tokens: meta.module-variables(tokens) !default;
 
     max-height: var(--kbq-autocomplete-size-panel-max-height, map.get($tokens, autocomplete-size-panel-max-height));
 
-    border: {
-        width: 1px;
-        style: solid;
-    }
-
     border-bottom-left-radius: var(
         --kbq-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
     );

package/badge/_badge-theme.scss

@@ -60,6 +60,10 @@
 
         $fade-off: map.get($filled, fade-off);
 
+        &.kbq-badge_theme {
+            @include kbq-badge-filled-color(map.get($fade-off, theme));
+        }
+
         &.kbq-badge_success {
             @include kbq-badge-filled-color(map.get($fade-off, success));
         }

package/badge/badge.component.d.ts

@@ -7,6 +7,7 @@ export declare enum KbqBadgeColors {
     FadeSuccess = "fade-success",
     FadeWarning = "fade-warning",
     FadeError = "fade-error",
+    Theme = "theme",
     Success = "success",
     Warning = "warning",
     Error = "error"

package/button/_button-base.scss

@@ -42,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
         outline: none;
     }
 
-    &[disabled] {
+    &.kbq-disabled {
         cursor: default;
     }
 

package/button/_button-theme.scss

@@ -25,18 +25,17 @@
 
     @include _icon(map.get($params, left-icon), map.get($params, right-icon));
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         color: map.get($params, states_disabled_foreground);
         background: map.get($params, states_disabled_background);
 
@@ -44,27 +43,24 @@
     }
 }
 
-@mixin kbq-outline-button($params, $include-icons: true) {
+@mixin kbq-outline-button($params) {
     border-color: map.get($params, border);
     color: map.get($params, foreground);
     background: map.get($params, background);
 
-    @if $include-icons {
-        @include _icon(map.get($params, left-icon), map.get($params, right-icon));
-    }
+    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         border-color: map.get($params, states_disabled_border);
         color: map.get($params, states_disabled_foreground);
 
@@ -79,18 +75,17 @@
 
     @include _icon(map.get($params, left-icon), map.get($params, right-icon));
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         border-color: map.get($params, states_disabled_border);
         color: map.get($params, states_disabled_foreground);
 
@@ -132,6 +127,12 @@
 
                 @include kbq-outline-button($outline-theme-fade-on);
             }
+
+            &.kbq-contrast-fade {
+                $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
+
+                @include kbq-outline-button($outline-contrast-fade-on);
+            }
         }
 
         &.kbq-button_transparent {
@@ -156,22 +157,6 @@
             }
         }
     }
-
-    .kbq-button_outline {
-        $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
-
-        &.kbq-button {
-            &.kbq-contrast-fade {
-                @include kbq-outline-button($outline-contrast-fade-on);
-            }
-        }
-
-        &.kbq-button-icon {
-            &.kbq-contrast-fade {
-                @include kbq-outline-button($outline-contrast-fade-on, $include-icons: false);
-            }
-        }
-    }
 }
 
 @mixin kbq-button-typography($config) {

package/checkbox/_checkbox-theme.scss

@@ -15,8 +15,13 @@
 
 @mixin kbq-checkbox-color($checkbox) {
     $default: map.get($checkbox, default);
+
     @include kbq-checkbox-state($default);
 
+    .kbq-checkbox-label {
+        color: map.get($default, text);
+    }
+
     .kbq-checkbox__frame {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
@@ -82,26 +87,24 @@
         & .kbq-hint .kbq-hint__text {
             color: map.get($disabled, caption);
         }
+
+        .kbq-checkbox-label {
+            color: map.get($disabled, text);
+        }
     }
 }
 /* stylelint-enable no-descending-specificity */
 
 @mixin kbq-checkbox-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
     $checkbox: map.get(map.get($theme, components), checkbox);
 
     $checkbox-theme: map.get($checkbox, theme);
     $checkbox-error: map.get($checkbox, error);
 
     .kbq-checkbox {
-        color: map.get($foreground, contrast);
-
         @include kbq-checkbox-color($checkbox-theme);
 
         &.kbq-error {
-            color: map.get($foreground, contrast);
-
             @include kbq-checkbox-color($checkbox-error);
         }
     }

package/checkbox/checkbox.scss

@@ -14,17 +14,12 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-checkbox-checkmark,
 .kbq-checkbox-mixedmark {
     display: none;
-
-    position: absolute;
-
-    top: -1px;
-    left: -1px;
-    right: 0;
-    bottom: 0;
 }
 
 .kbq-checkbox__frame {
-    @include layout.kbq-fill;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     box-sizing: border-box;
     pointer-events: none;
@@ -36,6 +31,9 @@ $tokens: meta.module-variables(tokens) !default;
         width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
         style: solid;
     }
+
+    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
 }
 
 .kbq-checkbox__layout {

package/code-block/_code-block-theme.scss

@@ -5,13 +5,49 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
+@mixin kbq-code-block-style($style) {
+    $container: map.get($style, container);
+    $actionbar: map.get($style, actionbar);
+    $collapse: map.get($style, collapse);
+
+    border-color: map.get($container, border);
+    background: map.get($container, background);
+
+    & .kbq-tab-header {
+        $header: map.get($style, header);
+        background: map.get($header, background) !important;
+    }
+
+    &:not(.kbq-code-block_no-header) .kbq-code-block__code {
+        box-shadow: map.get($container, shadow);
+    }
+
+    &.kbq-code-block_no-header {
+        & .kbq-code-block__fade-gradient {
+            display: block;
+
+            background: map.get($actionbar, fade-gradient)
+        }
+    }
+
+    & .kbq-code-block-actionbar {
+        background: map.get($actionbar, background);
+    }
+
+
+    & .kbq-code-block__show-more_expanded {
+        background: map.get($collapse, expanded-background);
+    }
+
+    & .kbq-code-block__show-more_collapsed {
+        background: map.get($collapse, collapsed-background);
+    }
+}
+
 @mixin kbq-code-block-theme($theme) {
     $code-block: map.get(map.get($theme, components), code-block);
 
     .kbq-code-block {
-        background-color: map.get($code-block, main-background);
-        border-color: map.get($code-block, border);
-
         .hljs {
             $hljs: map.get($code-block, hljs);
 
@@ -282,12 +318,12 @@
             }
         }
 
-        &.kbq-code-block_less-contrast {
-            background-color: map.get($code-block, main-background-less-contrast);
+        &.kbq-code-block_outline {
+            @include kbq-code-block-style(map.get($code-block, outline));
         }
 
-        .kbq-tab-group:after {
-            background: map.get($code-block, border);
+        &.kbq-code-block_filled {
+            @include kbq-code-block-style(map.get($code-block, filled));
         }
 
         .kbq-tab-header {
@@ -298,7 +334,6 @@
         }
 
         .kbq-code-block__show-more {
-            border-top-color: map.get($code-block, border) !important;
         }
     }
 
@@ -326,9 +361,5 @@
                 font: inherit;
             }
         }
-
-        .hljs-ln-numbers {
-            @include kbq-typography-level-to-styles($config, caption-mono);
-        }
     }
 }

package/code-block/actionbar.component.scss

@@ -13,12 +13,40 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: absolute;
 
-    top: 4px;
-    right: 8px;
-
-    gap: map.get($tokens, code-block-size-actionbar-gap);
-
-    border-radius: map.get($tokens, code-block-size-actionbar-border-radius);
+    top: 0;
+    right: 0;
+
+    padding:
+        var(
+            --kbq-code-block-size-actionbar-padding-vertical,
+            map.get($tokens, code-block-size-actionbar-padding-vertical)
+        )
+        var(
+            --kbq-code-block-size-actionbar-padding-horizontal,
+            map.get($tokens, code-block-size-actionbar-padding-horizontal)
+        );
+
+    gap: var(
+        --kbq-code-block-size-actionbar-content-gap-horizontal,
+        map.get($tokens, code-block-size-actionbar-content-gap-horizontal)
+    );
+
+    & .kbq-code-block__fade-gradient {
+        display: none;
+
+        width: var(
+            --kbq-code-block-size-actionbar-fade-gradient-width,
+            map.get($tokens, code-block-size-actionbar-fade-gradient-width)
+        );
+        height: 40px;
+
+        margin-top: calc(
+            var(
+                --kbq-code-block-size-actionbar-padding-vertical,
+                map.get($tokens, code-block-size-actionbar-padding-vertical)
+            ) * -1
+        );
+    }
 
     &.kbq-actionbar-block_floating {
         top: map.get($tokens, code-block-size-actionbar-margin-top);

package/code-block/code-block.component.d.ts

@@ -44,7 +44,7 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     tabGroup: KbqTabGroup;
     lineNumbers: boolean;
     codeFiles: KbqCodeFile[];
-    lessContrast: boolean;
+    filled: boolean;
     maxHeight: number;
     softWrap: boolean;
     get noHeader(): any;
@@ -70,5 +70,5 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     private updateMultiline;
     private getFullFileName;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "lessContrast": { "alias": "lessContrast"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
 }

package/code-block/code-block.scss

@@ -9,6 +9,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-code-block {
     display: block;
     position: relative;
+    overflow: hidden;
 
     box-sizing: border-box;
 
@@ -17,24 +18,62 @@ $tokens: meta.module-variables(tokens) !default;
     -moz-hyphens: none;
     -webkit-hyphens: none;
 
-    border-width: 1px;
+    border-width: var(
+        --kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
+    );
     border-style: solid;
-    border-radius: map.get($tokens, code-block-size-border-radius);
-
-    &:not(.kbq-code-block_no-header) .kbq-tab-group:after {
-        content: "";
-
-        position: absolute;
-        top: 39px;
-        left: 0;
-        right: 0;
-
-        height: 1px;
-    }
+    border-radius: var(
+        --kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
+    );
 
     .kbq-tab-header {
         // 4 buttons + margin
         margin-right: calc(32 * 4) + 24px;
+
+        padding:
+            var(
+                --kbq-code-block-size-header-padding-vertical,
+                map.get($tokens, code-block-size-header-padding-vertical)
+            )
+            var(
+                --kbq-code-block-size-header-padding-right,
+                map.get($tokens, code-block-size-header-padding-right)
+            )
+            var(
+                --kbq-code-block-size-header-padding-vertical,
+                map.get($tokens, code-block-size-header-padding-vertical)
+            ) var(
+                --kbq-code-block-size-header-padding-left,
+                map.get($tokens, code-block-size-header-padding-left)
+            );
+    }
+
+    .kbq-code-block__code {
+        > code {
+            padding:
+                var(
+                    --kbq-code-block-size-with-header-content-padding-top,
+                    map.get($tokens, code-block-size-with-header-content-padding-top)
+                )
+                var(
+                    --kbq-code-block-size-with-header-content-padding-horizontal,
+                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
+                )
+                var(
+                    --kbq-code-block-size-with-header-content-padding-bottom,
+                    map.get($tokens, code-block-size-with-header-content-padding-bottom)
+                ) var(
+                    --kbq-code-block-size-with-header-content-padding-horizontal,
+                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
+                );
+        }
+
+        .hljs-ln-numbers {
+            padding-right: var(
+                --kbq-code-block-size-with-header-content-content-gap-horizontal,
+                map.get($tokens, code-block-size-with-header-content-content-gap-horizontal)
+            );
+        }
     }
 
     &.kbq-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers {
@@ -54,12 +93,31 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-code-block_no-header {
+        .kbq-tab-header {
+            display: none;
+        }
+
         .kbq-code-block__code {
             position: relative;
-        }
 
-        .kbq-tab-header {
-            display: none;
+            & > code {
+                padding:
+                    var(
+                        --kbq-code-block-size-no-header-content-padding-vertical,
+                        map.get($tokens, code-block-size-no-header-content-padding-vertical)
+                    )
+                    var(
+                        --kbq-code-block-size-no-header-content-padding-horizontal,
+                        map.get($tokens, code-block-size-no-header-content-padding-horizontal)
+                    );
+            }
+
+            .hljs-ln-numbers {
+                padding-right: var(
+                    --kbq-code-block-size-no-header-content-content-gap-horizontal,
+                    map.get($tokens, code-block-size-no-header-content-content-gap-horizontal)
+                );
+            }
         }
     }
 
@@ -89,10 +147,6 @@ $tokens: meta.module-variables(tokens) !default;
         white-space: pre-wrap
     }
 
-    > code {
-        padding: map.get($tokens, code-block-size-padding) !important;
-    }
-
     .hljs-ln {
         border-collapse: unset;
 
@@ -102,9 +156,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .hljs-ln-numbers {
-        border-right-width: map.get($tokens, code-block-size-line-numbers-border-width);
-        padding: map.get($tokens, code-block-size-line-numbers-padding);
-
         vertical-align: baseline;
         text-align: right;
     }
@@ -115,14 +166,37 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-code-block__show-more {
+    display: flex;
+    justify-content: center;
     overflow: hidden;
 
     width: 100%;
 
-    border-top-style: solid !important;
-    border-top-width: 1px !important;
+    position: absolute;
+    bottom: 0;
 
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
+    &.kbq-code-block__show-more_collapsed {
+        padding-top: var(
+            --kbq-code-block-size-collapse-collapsed-padding-top,
+            map.get($tokens, code-block-size-collapse-collapsed-padding-top)
+        );
+
+        padding-bottom: var(
+            --kbq-code-block-size-collapse-collapsed-padding-bottom,
+            map.get($tokens, code-block-size-collapse-collapsed-padding-bottom)
+        );
+    }
+
+    &.kbq-code-block__show-more_expanded {
+        padding-top: var(
+            --kbq-code-block-size-collapse-expanded-padding-top,
+            map.get($tokens, code-block-size-collapse-expanded-padding-top)
+        );
+
+        margin-bottom: var(
+            --kbq-code-block-size-collapse-expanded-padding-bottom,
+            map.get($tokens, code-block-size-collapse-expanded-padding-bottom)
+        );
+    }
 }
 /* stylelint-enable no-descending-specificity */

package/core/common-behaviors/index.d.ts

@@ -1,5 +1,7 @@
+import { InjectionToken } from '@angular/core';
 export { KbqCommonModule, KBQ_SANITY_CHECKS } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
 export { CanColor, CanColorCtor, mixinColor, ThemePalette, KbqComponentColors } from './color';
 export { HasTabIndex, HasTabIndexCtor, mixinTabIndex } from './tabindex';
 export { CanUpdateErrorStateCtor, CanUpdateErrorState, mixinErrorState } from './error-state';
+export declare const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;

package/core/locales/index.d.ts

@@ -1,4 +1,2 @@
-import { InjectionToken } from '@angular/core';
 export * from './locale-service';
 export * from './locale-service.module';
-export declare const KBQ_LOCALE_ID: InjectionToken<string>;

package/core/option/_option-action-theme.scss

@@ -30,7 +30,7 @@
             color: kbq-color($secondary, if($is-dark, 70, 30));
         }
 
-        &[disabled] {
+        &.kbq-disabled {
             & .kbq-icon {
                 color: kbq-color($secondary, if($is-dark, 30, 70));
             }

package/core/option/_option-theme.scss

@@ -11,9 +11,10 @@
         color: map.get($state, text);
     }
 
-    .kbq-icon {
-        color: map.get($state, icon);
-    }
+    // todo выглядит как баг
+    //.kbq-icon {
+    //    color: map.get($state, icon);
+    //}
 
     .kbq-option-action .kbq-icon {
         color: map.get($state, icon-button);
@@ -47,8 +48,7 @@
             }
         }
 
-        &.kbq-disabled,
-        &[disabled] {
+        &.kbq-disabled {
             @include kbq-option(map.get($list-item, disabled));
         }
     }

package/core/option/action.scss

@@ -21,7 +21,7 @@
 
     background: transparent;
 
-    &[disabled] {
+    &.kbq-disabled {
         cursor: default;
     }
 }

package/core/pop-up/pop-up.d.ts

@@ -21,6 +21,13 @@ export declare abstract class KbqPopUp implements OnDestroy {
     ngOnDestroy(): void;
     isTemplateRef(value: any): boolean;
     show(delay: number): void;
+    /**
+     * Hides the popup after a specified delay.
+     *
+     * The hide timeout triggers the hiding of the popup by updating visibility and emitting relevant events.
+     * Also, it marks for check to ensure proper change detection, especially for parent components with OnPush strategy.
+     * @param delay - The delay in milliseconds before hiding the popup.
+     */
     hide(delay: number): void;
     isVisible(): boolean;
     updateClassMap(placement: string, customClass: string, classMap?: any): void;