@koobiq/components 17.0.0-rc.3 → 17.0.0-rc.5

package/alert/_alert-theme.scss

@@ -1,84 +1,72 @@
 @use 'sass:meta';
 @use 'sass:map';
 
+@use '../core/styles/common/tokens' as *;
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-alert-default($style) {
-    background: map.get($style, background);
+@mixin kbq-alert($component, $style-name, $color-name) {
+    $style: map.get($component, $style-name);
 
-    .kbq-alert__title {
-        color: map.get($style, title);
-    }
-
-    .kbq-alert__text {
-        color: map.get($style, text);
-    }
-}
-
-@mixin kbq-alert-colored($style) {
-    background: map.get($style, background);
+    background: cssVar('alert-light-#{$style-name}-#{$color-name}-container-background');
 
     .kbq-alert__title {
-        color: map.get($style, title);
+        color: cssVar('alert-light-#{$style-name}-#{$color-name}-container-title');
     }
 
     .kbq-alert__text {
-        color: map.get($style, text);
+        color: cssVar('alert-light-#{$style-name}-#{$color-name}-container-text');
     }
 }
 
 @mixin kbq-alert-theme($theme) {
     $alert: map.get(map.get($theme, components), alert);
 
-    $default: map.get($alert, default);
-    $colored: map.get($alert, colored);
-
     .kbq-alert__close:focus {
         outline: none;
     }
 
     .kbq-alert.kbq-alert_default {
         &.kbq-alert_contrast {
-            @include kbq-alert-default(map.get($default, contrast));
+            @include kbq-alert($alert, default, contrast);
         }
 
         &.kbq-alert_error {
-            @include kbq-alert-default(map.get($default, error));
+            @include kbq-alert($alert, default, error);
         }
 
         &.kbq-alert_warning {
-            @include kbq-alert-default(map.get($default, warning));
+            @include kbq-alert($alert, default, warning);
         }
 
         &.kbq-alert_success {
-            @include kbq-alert-default(map.get($default, success));
+            @include kbq-alert($alert, default, success);
         }
 
         &.kbq-alert_theme {
-            @include kbq-alert-default(map.get($default, theme));
+            @include kbq-alert($alert, default, theme);
         }
     }
 
     .kbq-alert.kbq-alert_colored {
         &.kbq-alert_contrast {
-            @include kbq-alert-colored(map.get($colored, contrast));
+            @include kbq-alert($alert, colored, contrast);
         }
 
         &.kbq-alert_error {
-            @include kbq-alert-colored(map.get($colored, error));
+            @include kbq-alert($alert, colored, error);
         }
 
         &.kbq-alert_warning {
-            @include kbq-alert-colored(map.get($colored, warning));
+            @include kbq-alert($alert, colored, warning);
         }
 
         &.kbq-alert_success {
-            @include kbq-alert-colored(map.get($colored, success));
+            @include kbq-alert($alert, colored, success);
         }
 
         &.kbq-alert_theme {
-            @include kbq-alert-colored(map.get($colored, theme));
+            @include kbq-alert($alert, colored, theme);
         }
     }
 }

package/alert/alert.component.scss

@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -9,10 +9,10 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-alert {
     display: flex;
 
-    width: 492px;
+    box-sizing: border-box;
 
     & .kbq-alert__content_title {
-        margin-bottom: map.get($tokens, size-xxs);
+        margin-bottom: cssVar(size-xxs);
     }
 }
 
@@ -25,182 +25,96 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-alert.kbq-alert_normal {
-    border-radius: var(
-        --kbq-alert-size-normal-container-border-radius,
-        map.get($tokens, alert-size-normal-container-border-radius)
-    );
+    border-radius: cssVar(alert-size-normal-container-border-radius);
 
     padding:
-        var(
-            --kbq-alert-size-normal-container-padding-top,
-            map.get($tokens, alert-size-normal-container-padding-top)
-        )
-        var(
-            --kbq-alert-size-normal-container-padding-right,
-            map.get($tokens, alert-size-normal-container-padding-right)
-        )
-        var(
-            --kbq-alert-size-normal-container-padding-bottom,
-            map.get($tokens, alert-size-normal-container-padding-bottom)
-        )
-        var(
-            --kbq-alert-size-normal-container-padding-left,
-            map.get($tokens, alert-size-normal-container-padding-left)
-        );
+        cssVar(alert-size-normal-container-padding-top)
+        cssVar(alert-size-normal-container-padding-right)
+        cssVar(alert-size-normal-container-padding-bottom)
+        cssVar(alert-size-normal-container-padding-left);
 
     & .kbq-alert__icon {
         margin:
-            var(--kbq-alert-size-normal-icon-margin-top, map.get($tokens, alert-size-normal-icon-margin-top))
-            var(--kbq-alert-size-normal-icon-margin-right, map.get($tokens, alert-size-normal-icon-margin-right))
-            var(--kbq-alert-size-normal-icon-margin-bottom, map.get($tokens, alert-size-normal-icon-margin-bottom))
-            var(--kbq-alert-size-normal-icon-margin-left, map.get($tokens, alert-size-normal-icon-margin-left));
+            cssVar(alert-size-normal-icon-margin-top)
+            cssVar(alert-size-normal-icon-margin-right)
+            cssVar(alert-size-normal-icon-margin-bottom)
+            cssVar(alert-size-normal-icon-margin-left);
 
         &.kbq-alert__icon_title .kbq-icon {
-            margin-top: var(
-                --kbq-alert-size-normal-icon-margin-addon-title,
-                map.get($tokens, alert-size-normal-icon-margin-addon-title)
-            );
+            margin-top: cssVar(alert-size-normal-icon-margin-addon-title);
         }
+
+        display: inline-flex;
+        align-self: flex-start;
     }
 
     & .kbq-alert__content {
         padding:
-            var(
-                --kbq-alert-size-normal-content-padding-top,
-                map.get($tokens, alert-size-normal-content-padding-top)
-            )
-            var(
-                --kbq-alert-size-normal-content-padding-right,
-                map.get($tokens, alert-size-normal-content-padding-right)
-            )
-            var(
-                --kbq-alert-size-normal-content-padding-bottom,
-                map.get($tokens, alert-size-normal-content-padding-bottom)
-            )
-            var(
-                --kbq-alert-size-normal-content-padding-left,
-                map.get($tokens, alert-size-normal-content-padding-left)
-            );
+            cssVar(alert-size-normal-content-padding-top)
+            cssVar(alert-size-normal-content-padding-right)
+            cssVar(alert-size-normal-content-padding-bottom)
+            cssVar(alert-size-normal-content-padding-left);
     }
 
     & .kbq-alert__title {
-        margin-bottom: var(
-            --kbq-alert-size-normal-title-margin-bottom,
-            map.get($tokens, alert-size-normal-title-margin-bottom)
-        );
+        margin-bottom: cssVar(alert-size-normal-title-margin-bottom);
     }
 
     & .kbq-alert__button-stack {
-        padding-top: var(
-            --kbq-alert-size-normal-button-stack-padding-top,
-            map.get($tokens, alert-size-normal-button-stack-padding-top)
-        );
-
-        padding-bottom: var(
-            --kbq-alert-size-normal-button-stack-padding-bottom,
-            map.get($tokens, alert-size-normal-button-stack-padding-bottom)
-        );
+        padding-top: cssVar(alert-size-normal-button-stack-padding-top);
+
+        padding-bottom: cssVar(alert-size-normal-button-stack-padding-bottom);
     }
 
     & .kbq-alert__close-button {
-        margin-top: var(
-            --kbq-alert-size-normal-close-button-margin-top,
-            map.get($tokens, alert-size-normal-close-button-margin-top)
-        );
-
-        margin-left: var(
-            --kbq-alert-size-normal-close-button-margin-left,
-            map.get($tokens, alert-size-normal-close-button-margin-left)
-        );
+        margin-top: cssVar(alert-size-normal-close-button-margin-top);
+        margin-left: cssVar(alert-size-normal-close-button-margin-left);
     }
 }
 
 .kbq-alert.kbq-alert_compact {
-    border-radius: var(
-        --kbq-alert-size-compact-container-border-radius,
-        map.get($tokens, alert-size-compact-container-border-radius)
-    );
+    border-radius: cssVar(alert-size-compact-container-border-radius);
 
     padding:
-        var(
-            --kbq-alert-size-compact-container-padding-top,
-            map.get($tokens, alert-size-compact-container-padding-top)
-        )
-        var(
-            --kbq-alert-size-compact-container-padding-right,
-            map.get($tokens, alert-size-compact-container-padding-right)
-        )
-        var(
-            --kbq-alert-size-compact-container-padding-bottom,
-            map.get($tokens, alert-size-compact-container-padding-bottom)
-        )
-        var(
-            --kbq-alert-size-compact-container-padding-left,
-            map.get($tokens, alert-size-compact-container-padding-left)
-        );
+        cssVar(alert-size-compact-container-padding-top)
+        cssVar(alert-size-compact-container-padding-right)
+        cssVar(alert-size-compact-container-padding-bottom)
+        cssVar(alert-size-compact-container-padding-left);
 
     & .kbq-alert__icon {
-        margin-top: var(--kbq-alert-size-compact-icon-margin-top, map.get($tokens, alert-size-compact-icon-margin-top));
+        margin-top: cssVar(alert-size-compact-icon-margin-top);
 
-        margin-right:
-            var(--kbq-alert-size-compact-icon-margin-right, map.get($tokens, alert-size-compact-icon-margin-right));
+        margin-right: cssVar(alert-size-compact-icon-margin-right);
 
         &.kbq-alert__icon_title .kbq-icon {
-            margin-top: var(
-                --kbq-alert-size-compact-icon-margin-addon-title,
-                map.get($tokens, alert-size-compact-icon-margin-addon-title)
-            );
+            margin-top: cssVar(alert-size-compact-icon-margin-addon-title);
         }
+
+        display: inline-flex;
+        align-self: flex-start;
     }
 
     & .kbq-alert__content {
         padding:
-            var(
-                --kbq-alert-size-compact-content-padding-top,
-                map.get($tokens, alert-size-compact-content-padding-top)
-            )
-            var(
-                --kbq-alert-size-compact-content-padding-right,
-                map.get($tokens, alert-size-compact-content-padding-right)
-            )
-            var(
-                --kbq-alert-size-compact-content-padding-bottom,
-                map.get($tokens, alert-size-compact-content-padding-bottom)
-            )
-            var(
-                --kbq-alert-size-compact-content-padding-left,
-                map.get($tokens, alert-size-compact-content-padding-left)
-            );
+            cssVar(alert-size-compact-content-padding-top)
+            cssVar(alert-size-compact-content-padding-right)
+            cssVar(alert-size-compact-content-padding-bottom)
+            cssVar(alert-size-compact-content-padding-left);
     }
 
     & .kbq-alert__title {
-        margin-bottom: var(
-            --kbq-alert-size-compact-title-margin-bottom,
-            map.get($tokens, alert-size-compact-title-margin-bottom)
-        );
+        margin-bottom: cssVar(alert-size-compact-title-margin-bottom);
     }
 
     & .kbq-alert__button-stack {
-        padding-top: var(
-            --kbq-alert-size-compact-button-stack-padding-top,
-            map.get($tokens, alert-size-compact-button-stack-padding-top)
-        );
-
-        padding-bottom: var(
-            --kbq-alert-size-compact-button-stack-padding-bottom,
-            map.get($tokens, alert-size-compact-button-stack-padding-bottom)
-        );
+        padding-top: cssVar(alert-size-compact-button-stack-padding-top);
+
+        padding-bottom: cssVar(alert-size-compact-button-stack-padding-bottom);
     }
 
     & .kbq-alert__close-button {
-        margin-top: var(
-            --kbq-alert-size-compact-close-button-margin-top,
-            map.get($tokens, alert-size-compact-close-button-margin-top)
-        );
-
-        margin-left: var(
-            --kbq-alert-size-compact-close-button-margin-left,
-            map.get($tokens, alert-size-compact-close-button-margin-left)
-        );
+        margin-top: cssVar(alert-size-compact-close-button-margin-top);
+
+        margin-left: cssVar(alert-size-compact-close-button-margin-left);
     }
 }

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

@@ -11,12 +11,22 @@
     $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;
+        border-color: map.get($container, border);
+    }
+
+    .kbq-tab-body__wrapper {
+        border-color: map.get($container, border);
+    }
+
+    &:not(.kbq-code-block_no-header) {
+        .kbq-tab-body__wrapper {
+            border-top-color: transparent;
+        }
     }
 
     & .kbq-code-block-actionbar {
@@ -335,6 +345,18 @@
             @include kbq-code-block-style(map.get($code-block, filled));
         }
 
+        .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 map.get(map.get($theme, states), focused-color);
+            }
+
+            .kbq-tab-body__wrapper {
+                border-color: map.get(map.get($theme, states), focused-color);
+                box-shadow: inset 0 0 0 1px map.get(map.get($theme, states), focused-color);
+            }
+        }
+
         .kbq-tab-header {
             & .kbq-tab-label.kbq-tab-label_horizontal,
             & .kbq-tab-header__pagination {

package/code-block/actionbar.component.scss

@@ -16,7 +16,7 @@ $tokens: meta.module-variables(tokens) !default;
     top: -1px;
     right: 0;
 
-    padding:
+    margin:
         var(
             --kbq-code-block-size-actionbar-padding-vertical,
             map.get($tokens, code-block-size-actionbar-padding-vertical)
@@ -38,7 +38,7 @@ $tokens: meta.module-variables(tokens) !default;
             --kbq-code-block-size-actionbar-fade-gradient-width,
             map.get($tokens, code-block-size-actionbar-fade-gradient-width)
         );
-        height: 40px;
+        height: 32px;
 
         margin-top: calc(
             var(

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

@@ -1,8 +1,9 @@
 import { Clipboard } from '@angular/cdk/clipboard';
-import { InjectionToken, ElementRef, ChangeDetectorRef, OnDestroy, Renderer2 } from '@angular/core';
+import { InjectionToken, ElementRef, ChangeDetectorRef, OnDestroy, Renderer2, AfterViewInit } from '@angular/core';
 import { KbqTabChangeEvent, KbqTabGroup } from '@koobiq/components/tabs';
 import { Subject } from 'rxjs';
 import { KbqCodeBlockConfiguration, KbqCodeFile } from './code-block.types';
+import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from "@angular/core";
 export declare const COPIED_MESSAGE_TOOLTIP_TIMEOUT = 100;
 export declare const DEFAULT_EXTENSION = "txt";
@@ -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>;
 }

package/code-block/code-block.scss

@@ -4,6 +4,12 @@
 
 $tokens: meta.module-variables(tokens) !default;
 
+$border-radius: var(
+    --kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
+);
+$border-width: var(
+        --kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
+);
 
 /* stylelint-disable no-descending-specificity */
 .kbq-code-block {
@@ -18,13 +24,8 @@ $tokens: meta.module-variables(tokens) !default;
     -moz-hyphens: none;
     -webkit-hyphens: none;
 
-    border-width: var(
-        --kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
-    );
-    border-style: solid;
-    border-radius: var(
-        --kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
-    );
+    border-radius: $border-radius;
+    border-width: 0;
 
     .kbq-tab-header {
         // 4 buttons + margin
@@ -46,6 +47,10 @@ $tokens: meta.module-variables(tokens) !default;
                 --kbq-code-block-size-header-padding-left,
                 map.get($tokens, code-block-size-header-padding-left)
             );
+
+        border-width: $border-width $border-width 0 $border-width;
+        border-style: solid;
+        border-radius: $border-radius $border-radius 0 0;
     }
 
     .kbq-code-block__code {
@@ -66,6 +71,12 @@ $tokens: meta.module-variables(tokens) !default;
                     --kbq-code-block-size-with-header-content-padding-horizontal,
                     map.get($tokens, code-block-size-with-header-content-padding-horizontal)
                 );
+
+            border-radius: $border-radius;
+
+            &:focus-visible {
+                outline: none;
+            }
         }
 
         .hljs-ln-numbers {
@@ -92,11 +103,22 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 
+    &:not(.kbq-code-block_no-header) {
+        .kbq-tab-body__wrapper {
+            border-top-width: 0;
+        }
+    }
+
     &.kbq-code-block_no-header {
         .kbq-tab-header {
             display: none;
         }
 
+        .kbq-tab-body__wrapper {
+            border-width: $border-width;
+            border-radius: $border-radius;
+        }
+
         .kbq-code-block__code {
             position: relative;
 
@@ -134,6 +156,10 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-tab-body__wrapper {
         flex-direction: column;
         position: unset;
+
+        border-width: $border-width;
+        border-style: solid;
+        border-radius: 0 0 $border-radius $border-radius;
     }
 
     .kbq-tab-body.kbq-tab-body__active {
@@ -176,10 +202,11 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     overflow: hidden;
 
-    width: 100%;
+    width: calc(100% - $border-width * 2);
 
     position: absolute;
-    bottom: 0;
+    bottom: $border-width;
+    border-radius: $border-radius;
 
     &.kbq-code-block__show-more_collapsed {
         padding-top: var(

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

@@ -8,9 +8,7 @@
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $secondary: map.get($theme, secondary);
-
-    $is-dark: map.get($theme, is-dark);
+    $states: map.get($theme, states);
 
     .kbq-option-action {
         &.cdk-keyboard-focused {
@@ -20,22 +18,22 @@
         &:active,
         &.kbq-pressed {
             & .kbq-icon {
-                color: kbq-color($secondary, if($is-dark, 70, 30));
+                color: map.get(map.get($states, icon), contrast-fade);
             }
 
-            background-color: kbq-color($secondary, A16);
+            background-color: map.get($background, transparent);
         }
 
         &:hover .kbq-icon {
-            color: kbq-color($secondary, if($is-dark, 70, 30));
+            color: map.get(map.get($states, icon), contrast-fade-hover);
         }
 
         &.kbq-disabled {
             & .kbq-icon {
-                color: kbq-color($secondary, if($is-dark, 30, 70));
+                color: map.get(map.get($states, icon), disabled);
             }
 
-            background-color: transparent;
+            background-color: map.get($background, transparent);
         }
     }
 }

package/core/styles/_variables.scss

@@ -1 +1 @@
-$z-index-loader-overlay: 10;
+

package/core/styles/common/_tokens.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:list';
+
+@use '../tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+@function cssVar($name) {
+    @if string.index($name, light-) {
+        $short-name: '';
+
+        @each $part in string.split($name, '-light') {
+            $short-name: $short-name + $part;
+        }
+
+        @return var(--kbq-#{$short-name}, map.get($tokens, $name));
+    } @else {
+        @return var(--kbq-#{$name}, map.get($tokens, $name));
+    }
+}
+
+@function getToken($name) {
+    @return map.get($tokens, $name);
+}