@koobiq/components 17.0.0-rc.2 → 17.0.0-rc.4

package/alert/_alert-theme.scss

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

package/alert/alert.component.d.ts

@@ -1,5 +1,17 @@
-import { KbqIconItem } from '@koobiq/components/icon';
+import { AfterContentInit } from '@angular/core';
+import { KbqIcon, KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
+export declare enum KbqAlertStyles {
+    Default = "default",
+    Colored = "colored"
+}
+export declare enum KbqAlertColors {
+    Contrast = "contrast",
+    Error = "error",
+    Warning = "warning",
+    Success = "success",
+    Theme = "theme"
+}
 export declare class KbqAlertTitle {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertTitle, "[kbq-alert-title]", never, {}, {}, never, never, false, never>;
@@ -12,11 +24,19 @@ export declare class KbqAlertControl {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlertControl, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAlertControl, "[kbq-alert-control]", never, {}, {}, never, never, false, never>;
 }
-export declare class KbqAlert {
+export declare class KbqAlert implements AfterContentInit {
     iconItem: KbqIconItem;
+    icon: KbqIcon;
     title: KbqAlertTitle;
     control: KbqAlertControl;
     closeButton: KbqAlertCloseButton;
+    compact: boolean;
+    alertStyle: KbqAlertStyles | string;
+    get alertColor(): string;
+    set alertColor(value: string | KbqAlertColors);
+    private _alertColor;
+    get isColored(): boolean;
+    ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAlert, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", never, {}, {}, ["iconItem", "title", "control", "closeButton"], ["[kbq-icon-item]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqAlert, "kbq-alert", never, { "compact": { "alias": "compact"; "required": false; }; "alertStyle": { "alias": "alertStyle"; "required": false; }; "alertColor": { "alias": "alertColor"; "required": false; }; }, {}, ["iconItem", "icon", "title", "control", "closeButton"], ["[kbq-icon-item],[kbq-icon]", "[kbq-alert-title]", "*", "[kbq-alert-control]", "[kbq-alert-close-button]"], false, never>;
 }

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,53 +9,10 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-alert {
     display: flex;
 
-    border-radius: var(--kbq-alert-size-container-border-radius, map.get($tokens, alert-size-container-border-radius));
+    box-sizing: border-box;
 
-    min-width: var(--kbq-alert-size-container-min-width, map.get($tokens, alert-size-container-min-width));
-    min-height: calc(
-        var(--kbq-alert-size-container-min-height, map.get($tokens, alert-size-container-min-height)) -
-        (var(--kbq-alert-size-container-padding-vertical, map.get($tokens, alert-size-container-padding-vertical)) * 2)
-    );
-
-    padding:
-        var(--kbq-alert-size-container-padding-vertical, map.get($tokens, alert-size-container-padding-vertical))
-        var(--kbq-alert-size-container-padding-horizontal, map.get($tokens, alert-size-container-padding-horizontal));
-}
-
-.kbq-alert__icon {
-    margin-right: var(
-        --kbq-alert-size-container-content-gap-horizontal,
-        map.get($tokens, alert-size-container-content-gap-horizontal)
-    );
-}
-
-.kbq-alert__title {
-    margin-bottom: var(
-        --kbq-alert-size-container-content-gap-vertical,
-        map.get($tokens, alert-size-container-content-gap-vertical)
-    );
-}
-
-.kbq-alert__controls {
-    margin-top: var(
-        --kbq-alert-size-container-content-gap-vertical,
-        map.get($tokens, alert-size-container-content-gap-vertical)
-    );
-
-    padding-top: var(
-        --kbq-alert-size-button-stack-content-padding-top,
-        map.get($tokens, alert-size-button-stack-padding-top)
-    );
-
-    & .kbq-button {
-        margin-right: var(
-            --kbq-alert-size-button-stack-content-content-gap-horizontal,
-            map.get($tokens, alert-size-button-stack-content-gap-horizontal)
-        );
-    }
-
-    & .kbq-link {
-        margin-right: 16px;
+    & .kbq-alert__content_title {
+        margin-bottom: cssVar(size-xxs);
     }
 }
 
@@ -67,15 +24,91 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
 }
 
-.kbq-alert__close-button {
-    margin-left: var(
-        --kbq-alert-size-container-content-gap-horizontal,
-        map.get($tokens, alert-size-container-content-gap-horizontal)
-    );
+.kbq-alert.kbq-alert_normal {
+    border-radius: cssVar(alert-size-normal-container-border-radius);
+
+    padding:
+        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:
+            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: cssVar(alert-size-normal-icon-margin-addon-title);
+        }
+    }
+
+    & .kbq-alert__content {
+        padding:
+            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: cssVar(alert-size-normal-title-margin-bottom);
+    }
+
+    & .kbq-alert__button-stack {
+        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: cssVar(alert-size-normal-close-button-margin-top);
+        margin-left: cssVar(alert-size-normal-close-button-margin-left);
+    }
 }
 
-.kbq-alert_dismissible .kbq-alert__close-button {
-    margin-top: var(--kbq-alert-size-close-button-margin-top, map.get($tokens, alert-size-close-button-margin-top));
-    margin-right:
-        var(--kbq-alert-size-close-button-margin-right, map.get($tokens, alert-size-close-button-margin-right));
+.kbq-alert.kbq-alert_compact {
+    border-radius: cssVar(alert-size-compact-container-border-radius);
+
+    padding:
+        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: cssVar(alert-size-compact-icon-margin-top);
+
+        margin-right: cssVar(alert-size-compact-icon-margin-right);
+
+        &.kbq-alert__icon_title .kbq-icon {
+            margin-top: cssVar(alert-size-compact-icon-margin-addon-title);
+        }
+    }
+
+    & .kbq-alert__content {
+        padding:
+            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: cssVar(alert-size-compact-title-margin-bottom);
+    }
+
+    & .kbq-alert__button-stack {
+        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: 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/locales/formatters.d.ts

@@ -17,6 +17,22 @@ export declare const enUSFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const esLAFormattersData: {
     formatters: {
@@ -37,6 +53,22 @@ export declare const esLAFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const faIRFormattersData: {
     formatters: {
@@ -58,6 +90,22 @@ export declare const faIRFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const ptBRFormattersData: {
     formatters: {
@@ -78,6 +126,22 @@ export declare const ptBRFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const ruRUFormattersData: {
     formatters: {
@@ -99,6 +163,22 @@ export declare const ruRUFormattersData: {
             startFormattingFrom: number;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const zhCNFormattersData: {
     formatters: {
@@ -118,4 +198,20 @@ export declare const zhCNFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };