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

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-trigger.directive.d.ts

@@ -67,6 +67,12 @@ export declare class KbqAutocompleteTrigger implements AfterViewInit, ControlVal
      */
     get autocompleteDisabled(): boolean;
     set autocompleteDisabled(value: boolean);
+    /**
+     * Event handler for input blur events.
+     * Determines whether the blur event is triggered outside the specific target
+     * @returns A boolean indicating if the blur event happened outside the target element
+     */
+    onInputBlur: (event: FocusEvent) => boolean;
     private _autocompleteDisabled;
     private overlayAttached;
     private overlayRef;
@@ -153,5 +159,5 @@ export declare class KbqAutocompleteTrigger implements AfterViewInit, ControlVal
     private resetActiveItem;
     private canOpen;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; }; "onInputBlur": { "alias": "kbqAutocompleteOnBlur"; "required": false; }; }, {}, never, never, false, never>;
 }

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/button-toggle/_button-toggle-theme.scss

@@ -57,6 +57,10 @@ $tokens: meta.module-variables(tokens) !default;
                     @include kbq-button-toggle-color(map.get($button, disabled));
                 }
 
+                &.kbq-disabled.kbq-selected {
+                    @include kbq-button-toggle-color(map.get($button, selected-disabled));
+                }
+
                 &.cdk-keyboard-focused {
                     border-color: map.get($button, focused);
                 }

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

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/visually-hidden';
 @use '../core/styles/common/layout';
-@use '../core/styles/variables';
 
 @use '../core/styles/tokens';
 
@@ -14,17 +13,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 +30,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,58 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
+@mixin kbq-code-block-style($style) {
+    $header: map.get($style, header);
+    $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;
+    }
+
+    & .kbq-code-block-actionbar {
+        background: map.get($actionbar, background);
+    }
+
+    &.kbq-code-block_header-with-shadow {
+        & .kbq-tab-header {
+            box-shadow: map.get($header, shadow);
+        }
+    }
+
+    &.kbq-code-block_no-header {
+        & .kbq-code-block__fade-gradient {
+            display: block;
+
+            background: map.get($actionbar, fade-gradient)
+        }
+    }
+
+    .kbq-code-block__show-more {
+        .bg-wrapper {
+            background: map.get($collapse, button-expand-background);
+            opacity: 90%;
+        }
+    }
+
+    & .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);
 
@@ -274,7 +319,7 @@
             }
 
             &-ln-n {
-                color: map.get($code-block, line-numbers-color);
+                color: map.get($hljs, line-numbers-color);
             }
 
             &-line-numbers {
@@ -282,12 +327,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 {
@@ -296,10 +341,6 @@
                 border-bottom-color: transparent;
             }
         }
-
-        .kbq-code-block__show-more {
-            border-top-color: map.get($code-block, border) !important;
-        }
     }
 
     .kbq-code-block-actionbar {
@@ -326,9 +367,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: -1px;
+    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;
@@ -53,6 +53,7 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     copied: boolean;
     viewAll: boolean;
     multiLine: boolean;
+    isTopOverflow: boolean;
     readonly resizeStream: Subject<Event>;
     private readonly resizeDebounceInterval;
     private resizeSubscription;
@@ -67,8 +68,10 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     onHighlighted(): void;
     getMaxHeight(): string;
     onSelectTab($event: KbqTabChangeEvent): void;
+    checkOverflow(currentCodeContentElement: HTMLElement): void;
+    onShowMoreClick(currentCodeContentElement: HTMLPreElement): void;
     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;
+        $buttons-margin: calc(32 * 4) + 24px;
+
+        padding:
+            var(
+                --kbq-code-block-size-header-padding-vertical,
+                map.get($tokens, code-block-size-header-padding-vertical)
+            )
+            calc(var(
+                --kbq-code-block-size-header-padding-right,
+                map.get($tokens, code-block-size-header-padding-right)
+            ) + $buttons-margin)
+            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,37 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-code-block_no-header {
+        .kbq-tab-header {
+            display: none;
+        }
+
         .kbq-code-block__code {
             position: relative;
+
+            & > 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)
+                );
+            }
         }
+    }
 
-        .kbq-tab-header {
-            display: none;
+    &:not(:has(.kbq-code-block__show-more)) {
+        .kbq-code-block__code {
+            overflow-y: auto;
         }
     }
 
@@ -82,17 +146,13 @@ $tokens: meta.module-variables(tokens) !default;
 
     &.kbq-code-block__code_view-all {
         max-height: unset;
-        overflow-y: unset;
+        overflow-y: auto;
     }
 
     &.kbq-code-block__code_soft-wrap {
         white-space: pre-wrap
     }
 
-    > code {
-        padding: map.get($tokens, code-block-size-padding) !important;
-    }
-
     .hljs-ln {
         border-collapse: unset;
 
@@ -102,9 +162,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 +172,41 @@ $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;
+
+    &.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)
+        );
+    }
 
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
+    .bg-wrapper {
+        border-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+    }
 }
 /* stylelint-enable no-descending-specificity */