@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/checkbox/_checkbox-theme.scss

@@ -2,130 +2,130 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-checkbox-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+    $base: checkbox-#{$style-name};
 
-/* stylelint-disable no-descending-specificity */
-@mixin kbq-checkbox-state($state) {
     .kbq-checkbox__frame {
-        border-color: map.get($state, border);
+        border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
 
-        background-color: map.get($state, background);
-    }
-}
-
-@mixin kbq-checkbox-color($checkbox) {
-    $default: map.get($checkbox, default);
-
-    @include kbq-checkbox-state($default);
-
-    .kbq-checkbox-label {
-        color: map.get($default, text);
-    }
+        background-color: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
 
-    .kbq-checkbox__frame {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: map.get($default, color);
+            color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
         }
     }
 
+    .kbq-checkbox-label {
+        color: kbq-css-variable(#{$base}-default-text, map.get($style, default, text));
+    }
+
     & .kbq-hint .kbq-hint__text {
-        color: map.get($default, caption);
+        color: kbq-css-variable(#{$base}-default-caption, map.get($style, default, caption));
     }
 
     &:hover,
     &.kbq-hover {
-        @include kbq-checkbox-state(map.get($checkbox, hover));
+        .kbq-checkbox__frame {
+            border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, hover, border));
+
+            background-color: kbq-css-variable(#{$base}-hover-background, map.get($style, hover, background));
+        }
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        @include kbq-checkbox-state(map.get($checkbox, checked));
+        .kbq-checkbox__frame {
+            border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
+
+            background-color: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
+        }
     }
 
     &.kbq-checked:not(.kbq-disabled),
     &.kbq-indeterminate:not(.kbq-disabled) {
         &:hover,
         &.kbq-hover {
-            @include kbq-checkbox-state(map.get($checkbox, checked-hover));
+            .kbq-checkbox__frame {
+                border-color: kbq-css-variable(#{$base}-hover-border, map.get($style, checked-hover, border));
+
+                background-color: kbq-css-variable(
+                    #{$base}-hover-background,
+                    map.get($style, checked-hover, background)
+                );
+            }
         }
 
         & .kbq-checkbox-input.cdk-keyboard-focused {
             + .kbq-checkbox__frame {
-                $checked-focused: map.get($checkbox, checked-focused);
-
-                border-color: map.get($checked-focused, border);
-                background-color: map.get($checked-focused, background);
-                outline: map.get($checked-focused, outline);
+                border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, checked-focused, border));
+                background-color: kbq-css-variable(
+                    #{$base}-focused-background,
+                    map.get($style, checked-focused, background)
+                );
+                outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, checked-focused, outline));
             }
         }
     }
 
     & .kbq-checkbox-input.cdk-keyboard-focused {
         + .kbq-checkbox__frame {
-            $focused: map.get($checkbox, focused);
-
-            border-color: map.get($focused, border);
-            background-color: map.get($focused, background);
-            outline: map.get($focused, outline);
+            border-color: kbq-css-variable(#{$base}-focused-border, map.get($style, focused, border));
+            background-color: kbq-css-variable(#{$base}-focused-background, map.get($style, focused, background));
+            outline: kbq-css-variable(#{$base}-focused-outline, map.get($style, focused, outline));
         }
     }
 
     &.kbq-disabled {
-        $disabled: map.get($checkbox, disabled);
-
         .kbq-checkbox__frame {
-            border-color: map.get($disabled, border);
-            background-color: map.get($disabled, background);
+            border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
+            background-color: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
 
             & .kbq-checkbox-checkmark,
             & .kbq-checkbox-mixedmark {
-                color: map.get($disabled, color);
+                color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
             }
         }
 
         & .kbq-hint .kbq-hint__text {
-            color: map.get($disabled, caption);
+            color: kbq-css-variable(#{$base}-disabled-caption, map.get($style, disabled, caption));
         }
 
         .kbq-checkbox-label {
-            color: map.get($disabled, text);
+            color: kbq-css-variable(#{$base}-disabled-text, map.get($style, disabled, text));
         }
     }
 }
-/* stylelint-enable no-descending-specificity */
 
 @mixin kbq-checkbox-theme($theme) {
     $checkbox: map.get(map.get($theme, components), checkbox);
 
-    $checkbox-theme: map.get($checkbox, theme);
-    $checkbox-error: map.get($checkbox, error);
-
     .kbq-checkbox {
-        @include kbq-checkbox-color($checkbox-theme);
+        @include kbq-checkbox-color($checkbox, theme);
 
         &.kbq-error {
-            @include kbq-checkbox-color($checkbox-error);
+            @include kbq-checkbox-color($checkbox, error);
         }
     }
 }
 
 @mixin kbq-checkbox-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-checkbox {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-label));
+        @include kbq-typography-css-variables(checkbox, normal-label);
 
         & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-caption));
+            @include kbq-typography-css-variables(checkbox, normal-caption);
         }
     }
 
     .kbq-checkbox.kbq-checkbox_big {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-label));
+        @include kbq-typography-css-variables(checkbox, big-label);
 
         & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-caption));
+            @include kbq-typography-css-variables(checkbox, big-caption);
         }
     }
 }

package/checkbox/checkbox.scss

@@ -5,11 +5,10 @@
 @use '../core/styles/common/layout';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-checkbox-checkmark,
 .kbq-checkbox-mixedmark {
     display: none;
@@ -24,15 +23,15 @@ $tokens: meta.module-variables(tokens) !default;
     pointer-events: none;
     background-color: transparent;
 
-    border-radius: var(--kbq-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
+    border-radius: kbq-css-variable(checkbox-size-normal-border-radius);
 
     border: {
-        width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
+        width: kbq-css-variable(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));
+    height: kbq-css-variable(checkbox-size-normal-width);
+    width: kbq-css-variable(checkbox-size-normal-width);
 }
 
 .kbq-checkbox__layout {
@@ -44,12 +43,16 @@ $tokens: meta.module-variables(tokens) !default;
     // (e.g. pointer by default, regular when disabled), instead of the browser default.
     cursor: inherit;
 
+    padding-top: kbq-css-variable(checkbox-size-normal-paddding-top);
+
+    padding-bottom: kbq-css-variable(checkbox-size-normal-paddding-bottom);
+
     padding-left: calc(
         var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
-        var(
-            --kbq-checkbox-size-normal-horizontal-content-padding,
-            map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-        )
+            var(
+                --kbq-checkbox-size-normal-horizontal-content-padding,
+                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+            )
     );
 
     vertical-align: top;
@@ -59,11 +62,11 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-block;
 
     position: absolute;
-    top: 0;
+    top: kbq-css-variable(checkbox-size-normal-top);
     left: 0;
 
-    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));
+    height: kbq-css-variable(checkbox-size-normal-width);
+    width: kbq-css-variable(checkbox-size-normal-width);
 }
 
 .kbq-checkbox {
@@ -101,10 +104,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     & .kbq-hint {
-        margin-top: var(
-            --kbq-checkbox-size-normal-vertical-content-padding,
-            map.get($tokens, checkbox-size-normal-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(checkbox-size-normal-vertical-content-padding);
     }
 }
 
@@ -112,33 +112,30 @@ $tokens: meta.module-variables(tokens) !default;
     & .kbq-checkbox__layout {
         padding-left: calc(
             var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
-            var(
-                --kbq-checkbox-size-normal-horizontal-content-padding,
-                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-            )
+                var(
+                    --kbq-checkbox-size-normal-horizontal-content-padding,
+                    map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+                )
         );
     }
 
     & .kbq-checkbox__inner-container {
-        top: 2px;
-        height: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
-        width: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+        top: kbq-css-variable(checkbox-size-big-top);
+        height: kbq-css-variable(checkbox-size-big-width);
+        width: kbq-css-variable(checkbox-size-big-width);
     }
 
     & .kbq-checkbox__frame {
-        border-radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
+        border-radius: kbq-css-variable(checkbox-size-big-border-radius);
 
         border: {
-            width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+            width: kbq-css-variable(checkbox-size-big-border-width);
             style: solid;
         }
     }
 
     & .kbq-hint {
-        margin-top: var(
-            --kbq-checkbox-size-big-vertical-content-padding,
-            map.get($tokens, checkbox-size-big-vertical-content-padding)
-        );
+        margin-top: kbq-css-variable(checkbox-size-big-vertical-content-padding);
     }
 }
 
@@ -154,16 +151,15 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-/* stylelint-disable no-descending-specificity */
 .kbq-checkbox_label-before {
     .kbq-checkbox__layout {
         padding-left: 0;
         padding-right: calc(
             var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
-            var(
-                --kbq-checkbox-size-normal-horizontal-content-padding,
-                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
-            )
+                var(
+                    --kbq-checkbox-size-normal-horizontal-content-padding,
+                    map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+                )
         );
     }
 

package/code-block/README.md

@@ -2,31 +2,35 @@
 
 ## API
 
-| Property               | Description                                                                                                                                                                              | Type                  | Default |
-|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
-| kbqPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
-| kbqTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
-| kbqVisible              | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                             | boolean               | false   |
-| kbqPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
-| kbqPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
-| kbqPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
-| kbqPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
-| kbqPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
-| kbqVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+| Property           | Description                                                                                                                                                                           | Type                  | Default     |     |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | --- |
+| kbqPlacement       | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                          | string                | bottom      |     |
+| kbqTrigger         | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                    | string                | hover       |     |
+| kbqVisible         | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                                | boolean               | false       |     |
+| kbqPopoverHeader   | Содержимое шапки Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости.      | string                | ng-template | –   |
+| kbqPopoverContent  | Содержимое компонента Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости. | string                | ng-template | –   |
+| kbqPopoverFooter   | Содержимое подвала Обрати внимание: если используешь строку, то используй аккуратно, желательно предварительно сделать escape строки, чтобы избежать потенциальной XSS уязвимости.    | string                | ng-template | –   |
+| kbqPopoverDisabled | Флаг для запрета показа                                                                                                                                                               | boolean               | false       |     |
+| kbqPopoverClass    | Добавление своих классов                                                                                                                                                              | string                | string[]    | –   |
+| kbqVisibleChange   | Callback на изменение видимости компонента                                                                                                                                            | EventEmitter<boolean> | –           |     |
 
 ## Example
 
+<!-- cspell:ignore Э́йяфьядлайё̀кюдль, Эйяфьядлайёкюдль -->
+
 ```html
 <ng-template #customContent>
-    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика. Под этим ледником находится одноимённый вулкан конической формы.
+    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика.
+    Под этим ледником находится одноимённый вулкан конической формы.
 </ng-template>
- 
+
 <button
     kbqPopover
     [kbqTrigger]="'hover'"
     [kbqPlacement]="'top'"
     [kbqPopoverHeader]="'Это header'"
-    [kbqPopoverContent]="customContent">
+    [kbqPopoverContent]="customContent"
+>
     Найти Эйяфьядлайёкюдль
 </button>
 ```

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

@@ -3,29 +3,36 @@
 @use 'sass:list';
 
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
+@mixin kbq-code-block-style($component, $style-name) {
+    $style: map.get($component, $style-name);
+    $base: code-block-#{$style-name};
 
-@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);
+    background: kbq-css-variable(#{$base}-container-background, map.get($style, container, background));
 
     & .kbq-tab-header {
-        $header: map.get($style, header);
-        background: map.get($header, background) !important;
+        background: kbq-css-variable(#{$base}-header-background, map.get($style, header, background)) !important;
+        border-color: kbq-css-variable(#{$base}-container-border, map.get($style, container, border));
+    }
+
+    .kbq-tab-body__wrapper {
+        border-color: kbq-css-variable(#{$base}-container-border, map.get($style, container, border));
+    }
+
+    &:not(.kbq-code-block_no-header) {
+        .kbq-tab-body__wrapper {
+            border-top-color: transparent;
+        }
     }
 
     & .kbq-code-block-actionbar {
-        background: map.get($actionbar, background);
+        background: kbq-css-variable(#{$base}-actionbar-background, map.get($style, actionbar, background));
     }
 
     &.kbq-code-block_header-with-shadow {
         & .kbq-tab-header {
-            box-shadow: map.get($header, shadow);
+            box-shadow: kbq-css-variable(#{$base}-header-shadow, map.get($style, header, shadow));
         }
     }
 
@@ -33,23 +40,32 @@
         & .kbq-code-block__fade-gradient {
             display: block;
 
-            background: map.get($actionbar, fade-gradient)
+            background: kbq-css-variable(#{$base}-actionbar-fade-gradient, map.get($style, actionbar, fade-gradient));
         }
     }
 
     .kbq-code-block__show-more {
         .bg-wrapper {
-            background: map.get($collapse, button-expand-background);
+            background: kbq-css-variable(
+                #{$base}-collapse-button-expand-background,
+                map.get($style, collapse, button-expand-background)
+            );
             opacity: 90%;
         }
     }
 
     & .kbq-code-block__show-more_expanded {
-        background: map.get($collapse, expanded-background);
+        background: kbq-css-variable(
+            #{$base}-collapse-expanded-background,
+            map.get($style, collapse, expanded-background)
+        );
     }
 
     & .kbq-code-block__show-more_collapsed {
-        background: map.get($collapse, collapsed-background);
+        background: kbq-css-variable(
+            #{$base}-collapse-collapsed-background,
+            map.get($style, collapse, collapsed-background)
+        );
     }
 }
 
@@ -328,11 +344,11 @@
         }
 
         &.kbq-code-block_outline {
-            @include kbq-code-block-style(map.get($code-block, outline));
+            @include kbq-code-block-style($code-block, outline);
         }
 
         &.kbq-code-block_filled {
-            @include kbq-code-block-style(map.get($code-block, filled));
+            @include kbq-code-block-style($code-block, filled);
         }
 
         .kbq-tab-header {
@@ -341,24 +357,38 @@
                 border-bottom-color: transparent;
             }
         }
+
+        .kbq-tab-group.kbq-focused {
+            // paint focus border from the top since because of border constraints
+            .kbq-tab-header {
+                box-shadow: 0 3px 0 -1px kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+            }
+
+            .kbq-tab-body__wrapper {
+                border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+                box-shadow: inset 0 0 0.1 1px
+                    kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
+            }
+        }
     }
 
     .kbq-code-block-actionbar {
         .kbq-code-block-actionbar_less-contrast {
-            background-color: map-get($code-block, actionbar, bg-less-contrast);
+            background-color: kbq-css-variable(
+                code-block-actionbar-bg-less-contrast,
+                map.get($code-block, actionbar, bg-less-contrast)
+            );
         }
 
         &.kbq-actionbar-block_floating {
-            background-color: map-get($code-block, actionbar, bg);
+            background-color: kbq-css-variable(code-block-actionbar-bg, map.get($code-block, actionbar, bg));
         }
     }
 }
 
 @mixin kbq-code-block-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-code-block {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
+        @include kbq-typography-css-variables(code-block, default);
 
         & .kbq-code-block__code {
             font: inherit;

package/code-block/actionbar.component.scss

@@ -1,11 +1,10 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-code-block-actionbar {
     display: flex;
     justify-content: right;
@@ -16,40 +15,27 @@ $tokens: meta.module-variables(tokens) !default;
     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)
-        );
+    margin: kbq-css-variable(code-block-size-actionbar-padding-vertical)
+        kbq-css-variable(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)
-    );
+    gap: kbq-css-variable(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;
+        width: kbq-css-variable(code-block-size-actionbar-fade-gradient-width);
+        height: 32px;
 
         margin-top: calc(
             var(
-                --kbq-code-block-size-actionbar-padding-vertical,
-                map.get($tokens, code-block-size-actionbar-padding-vertical)
-            ) * -1
+                    --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);
-        right: map.get($tokens, code-block-size-actionbar-margin-right);
+        top: kbq-css-variable(code-block-size-actionbar-margin-top);
+        right: kbq-css-variable(code-block-size-actionbar-margin-right);
     }
 }

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

@@ -1,5 +1,6 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { InjectionToken, ElementRef, ChangeDetectorRef, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, OnDestroy, Renderer2 } from '@angular/core';
 import { KbqTabChangeEvent, KbqTabGroup } from '@koobiq/components/tabs';
 import { Subject } from 'rxjs';
 import { KbqCodeBlockConfiguration, KbqCodeFile } from './code-block.types';
@@ -35,11 +36,12 @@ export declare const KBQ_CODE_BLOCK_DEFAULT_CONFIGURATION: {
     viewLessText: string;
     openExternalSystemTooltip: string;
 };
-export declare class KbqCodeBlockComponent implements OnDestroy {
+export declare class KbqCodeBlockComponent implements AfterViewInit, OnDestroy {
     private elementRef;
     private changeDetectorRef;
     private clipboard;
     private renderer;
+    private focusMonitor;
     config: KbqCodeBlockConfiguration;
     tabGroup: KbqTabGroup;
     lineNumbers: boolean;
@@ -54,10 +56,14 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     viewAll: boolean;
     multiLine: boolean;
     isTopOverflow: boolean;
+    hasFocus: boolean;
     readonly resizeStream: Subject<Event>;
+    readonly currentCodeBlock: Subject<HTMLElement>;
     private readonly resizeDebounceInterval;
     private resizeSubscription;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, clipboard: Clipboard, renderer: Renderer2, config: KbqCodeBlockConfiguration);
+    private codeBlockSubscription;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, clipboard: Clipboard, renderer: Renderer2, focusMonitor: FocusMonitor, config: KbqCodeBlockConfiguration);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     updateHeader: () => void;
     toggleSoftWrap(): void;
@@ -70,8 +76,10 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     onSelectTab($event: KbqTabChangeEvent): void;
     checkOverflow(currentCodeContentElement: HTMLElement): void;
     onShowMoreClick(currentCodeContentElement: HTMLPreElement): void;
+    canShowFocus(currentCodeContent: HTMLPreElement): boolean;
     private updateMultiline;
     private getFullFileName;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
+    onEnter(currentCodeBlock: HTMLPreElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, 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; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
 }