@koobiq/components 16.0.0-beta.6 → 16.0.0-beta.8

package/autocomplete/autocomplete-trigger.directive.d.ts

@@ -1,9 +1,9 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ViewportRuler } from '@angular/cdk/scrolling';
-import { ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, NgZone, OnDestroy, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { KbqOption, KbqOptionSelectionChange } from '@koobiq/components/core';
+import { KbqOption, KbqOptionSelectionChange, KeyboardNavigationHandler } from '@koobiq/components/core';
 import { KbqFormField } from '@koobiq/components/form-field';
 import { Observable } from 'rxjs';
 import { KbqAutocompleteOrigin } from './autocomplete-origin.directive';
@@ -14,8 +14,6 @@ import * as i0 from "@angular/core";
  * to properly calculate the scrollTop of the panel. Because we are not
  * actually focusing the active item, scroll must be handled manually.
  */
-/** The height of each autocomplete option. */
-export declare const AUTOCOMPLETE_OPTION_HEIGHT = 32;
 /** The total height of the autocomplete panel. */
 export declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;
 export declare const AUTOCOMPLETE_BORDER_WIDTH: number;
@@ -37,7 +35,7 @@ export declare const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any;
  * @docs-private
  */
 export declare function getKbqAutocompleteMissingPanelError(): Error;
-export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
+export declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAccessor, OnDestroy, KeyboardNavigationHandler {
     private elementRef;
     private viewContainerRef;
     private changeDetectorRef;
@@ -92,6 +90,7 @@ export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnD
     /** Stream of keyboard events that can close the panel. */
     private readonly closeKeyEventStream;
     constructor(elementRef: ElementRef<HTMLInputElement>, viewContainerRef: ViewContainerRef, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, zone: NgZone, scrollStrategy: any, dir: Directionality, formField: KbqFormField, document: any, viewportRuler?: ViewportRuler | undefined);
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** `View -> model callback called when value changes` */
     onChange: (value: any) => void;
@@ -118,6 +117,7 @@ export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnD
     handleInput(event: KeyboardEvent): void;
     handleFocus(): void;
     handleClick($event: MouseEvent): void;
+    scrollActiveOptionIntoView(): void;
     /** Stream of clicks outside of the autocomplete panel. */
     private getOutsideClickStream;
     /**
@@ -125,16 +125,6 @@ export declare class KbqAutocompleteTrigger implements ControlValueAccessor, OnD
      * arrow function in order to preserve the context.
      */
     private windowBlurHandler;
-    /**
-     * Given that we are not actually focusing active options, we must manually adjust scroll
-     * to reveal options below the fold. First, we find the offset of the option from the top
-     * of the panel. If that offset is below the fold, the new scrollTop will be the offset -
-     * the panel height + the option height, so the active option will be just visible at the
-     * bottom of the panel. If that offset is above the top of the visible panel, the new scrollTop
-     * will become the offset. If that offset is visible within the panel already, the scrollTop is
-     * not adjusted.
-     */
-    private scrollToOption;
     /**
      * This method listens to a stream of panel closing actions and resets the
      * stream every time the option list changes.

package/button-toggle/_button-toggle-theme.scss

@@ -9,10 +9,9 @@
 $tokens: meta.module-variables(tokens) !default;
 
 @mixin kbq-button-toggle-color($state) {
-    & .kbq-button-overlay {
-        background: map.get($state, background);
-        border-color: map.get($state, background);
-    }
+    background: map.get($state, background);
+
+    color: map.get($state, text);
 
     & .kbq-icon {
         color: map.get($state, icon);
@@ -20,73 +19,55 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin kbq-button-toggle-theme($theme) {
-    $button-toggle-group: map.get(map.get(map.get($theme, components), button-toggle), button-toggle-group);
-    $button-toggle: map.get(map.get(map.get($theme, components), button-toggle), button-toggle);
-    $states: map.get($button-toggle, states);
+    $button-toggle: map.get(map.get($theme, components), button-toggle);
 
     .kbq-button-toggle-group {
-        background: map.get($button-toggle-group, background);
-        border-color:  map.get($button-toggle-group, border);
+        $container: map.get($button-toggle, container);
+
+        background: map.get($container, background);
 
         .kbq-button-toggle {
+            $button: map.get($button-toggle, item);
+
             & > .kbq-button,
             & > .kbq-icon-button {
-                color: map.get($button-toggle, color);
-                border-color: map.get($button-toggle-group, background);
-                background: inherit;
+                @include kbq-button-toggle-color(map.get($button, default));
 
-                & .kbq-icon {
-                    color: map.get($button-toggle, icon);
+                &:hover:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, hover));
                 }
 
-                .kbq-button-overlay {
-                    background-color: unset;
+                &:active:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, active));
                 }
 
-                &:hover:not([disabled], .kbq-active) {
-                    @include kbq-button-toggle-color(map.get($states, hover));
-                }
-
-                &:active:not([disabled], .kbq-active) {
-                    @include kbq-button-toggle-color(map.get($states, active));
-                }
+                &.kbq-selected:not(.kbq-disabled) {
+                    @include kbq-button-toggle-color(map.get($button, selected));
 
-                &.kbq-active {
-                    $state: map.get($states, pressed);
-
-                    background: map.get($state, background);
-                    border-color: map.get($state, background);
+                    &:hover {
+                        @include kbq-button-toggle-color(map.get($button, selected-hover));
+                    }
 
-                    & .kbq-icon {
-                        color: map.get($state, icon);
+                    &:active {
+                        @include kbq-button-toggle-color(map.get($button, selected-active));
                     }
                 }
 
-                &.kbq-disabled,
-                &[disabled] {
-                    opacity: map.get(map.get($states, disabled), opacity);
+                &.kbq-disabled {
+                    @include kbq-button-toggle-color(map.get($button, disabled));
                 }
 
                 &.cdk-keyboard-focused {
-                    box-shadow: unset;
+                    border-color: map.get($button, focused);
                 }
             }
-
-            &.cdk-keyboard-focused {
-                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
-            }
         }
     }
 }
 
 @mixin kbq-button-toggle-typography($config) {
-    .kbq-button-toggle {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
-
-        > .kbq-button,
-        > .kbq-icon-button {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
-        }
+    .kbq-button-toggle .kbq-button-toggle-wrapper {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, button-toggle-font-item));
     }
 }
 

package/button-toggle/button-toggle.component.d.ts

@@ -100,7 +100,7 @@ export declare class KbqButtonToggleGroup implements ControlValueAccessor, OnIni
     /** Selects a value if there's a toggle that corresponds to it. */
     private selectValue;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonToggleGroup, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["mcButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
 }
 /** Single button inside of a toggle group. */
 export declare class KbqButtonToggle implements OnInit, AfterContentInit, OnDestroy {
@@ -141,5 +141,5 @@ export declare class KbqButtonToggle implements OnInit, AfterContentInit, OnDest
      */
     markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonToggle, [{ optional: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButtonToggle, "kbq-button-toggle", ["mcButtonToggle"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["icons"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButtonToggle, "kbq-button-toggle", ["kbqButtonToggle"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["icons"], ["*"], false, never>;
 }

package/button-toggle/button-toggle.scss

@@ -13,116 +13,82 @@ $tokens: meta.module-variables(tokens) !default;
     display: inline-flex;
     flex-direction: row;
     align-items: center;
-    gap: map.get($tokens, size-3xs);
 
-    border-width: var(
-        --kbq-button-toggle-group-size-border-width,
-        map.get($tokens, button-toggle-group-size-border-width)
+    gap: var(
+        --kbq-button-toggle-size-container-content-gap-horizontal,
+        map.get($tokens, button-toggle-size-container-content-gap-horizontal)
     );
+
     border-radius: var(
-        --kbq-button-toggle-group-size-border-radius,
-        map.get($tokens, button-toggle-group-size-border-radius)
-    );
-    border-style: solid;
-    padding: var(
-        --kbq-button-toggle-group-size-padding,
-        map.get($tokens, button-toggle-group-size-padding)
+        --kbq-button-toggle-size-container-border-radius,
+        map.get($tokens, button-toggle-size-container-border-radius)
     );
 
+    padding:
+        var(
+            --kbq-button-toggle-size-container-padding-vertical,
+            map.get($tokens, button-toggle-size-container-padding-vertical)
+        )
+        var(
+            --kbq-button-toggle-size-container-padding-horizontal,
+            map.get($tokens, button-toggle-size-container-padding-horizontal)
+        );
+
     .kbq-button-toggle {
         display: flex;
         overflow: hidden;
         justify-content: flex-start;
 
+        $padding-vertical: map.get($tokens, button-toggle-size-item-padding-vertical);
+        $padding-horizontal: map.get($tokens, button-toggle-size-item-padding-horizontal);
+        $outline-width: map.get($tokens, button-toggle-size-item-focus-outline-width);
+
         border-radius: var(
-            --kbq-button-toggle-size-border-radius,
-            map.get($tokens, button-toggle-size-border-radius)
+            --kbq-button-toggle-size-item-border-radius,
+            map.get($tokens, button-toggle-size-item-border-radius)
         );
 
         > .kbq-button,
         > .kbq-button-icon {
-            border: none;
-            border-width: var(
-                --kbq-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
             border-radius: var(
-                --kbq-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
-            );
-            min-width: var(
-                --kbq-button-toggle-size-min-width,
-                map.get($tokens, button-toggle-size-min-width)
-            );
-            padding-left: var(
-                --kbq-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
-            );
-            padding-right: var(
-                --kbq-button-toggle-size-horizontal-padding,
-                map.get($tokens, button-toggle-size-horizontal-padding)
+                --kbq-button-toggle-size-item-border-radius,
+                map.get($tokens, button-toggle-size-item-border-radius)
             );
 
+            padding:
+                calc(var(--kbq-button-toggle-size-item-padding-vertical, $padding-vertical) - $outline-width)
+                calc(var(--kbq-button-toggle-size-item-padding-horizontal, $padding-horizontal) - $outline-width);
+
             & .kbq-button-wrapper {
                 width: 100%;
+
             }
 
             .kbq-button-toggle-wrapper {
+                display: inline-flex;
+
                 text-overflow: ellipsis;
                 overflow: hidden;
                 white-space: nowrap;
-                display: inline-block;
-                width: 100%;
 
-                .kbq-icon {
-                    line-height: 20px;
-                    vertical-align: baseline;
-                }
-            }
-        }
+                width: 100%;
 
-        &.kbq-button-toggle-icon-text {
-            > .kbq-button,
-            > .kbq-button-icon {
-                padding-left: var(
-                    --kbq-button-toggle-size-left-icon-padding,
-                    map.get($tokens, button-toggle-size-left-icon-padding)
+                gap: var(
+                    --kbq-button-toggle-size-item-content-gap-horizontal,
+                    map.get($tokens, button-toggle-size-item-content-gap-horizontal)
                 );
-
-                & .kbq-icon {
-                    margin-right: map.get($tokens, size-xxs);
-                }
             }
         }
-
-        &[disabled] {
-            outline: 0;
-        }
     }
 
     &:not(.kbq-button-toggle_vertical) {
-        height: 32px;
-
         .kbq-button-toggle {
             > .kbq-button,
             > .kbq-button-icon {
-                height: 28px;
-                min-height: 28px;
-            }
+                max-width: 100%;
 
-            &.kbq-button-toggle-icon {
-                width: var(
-                    --kbq-button-icon-toggle-size-width,
-                    map.get($tokens, icon-button-toggle-size-width)
-                );
-
-                > .kbq-button,
-                > .kbq-button-icon {
-                    width: var(
-                        --kbq-button-icon-toggle-size-width,
-                        map.get($tokens, icon-button-toggle-size-width)
-                    );
-                }
+                height: unset;
+                min-height: unset;
             }
         }
     }
@@ -132,32 +98,19 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-button-toggle_vertical {
     flex-direction: column;
 
-    .kbq-button-toggle + .kbq-button-toggle {
-        border-left: none;
-        border-right: none;
-    }
-
     .kbq-button-toggle {
         width: 100%;
 
         > .kbq-button,
         > .kbq-button-icon {
             width: 100%;
-            border-width: var(
-                --kbq-button-toggle-size-border-width,
-                map.get($tokens, button-toggle-size-border-width)
-            );
 
             border-radius: var(
-                --kbq-button-toggle-size-border-radius,
-                map.get($tokens, button-toggle-size-border-radius)
+                --kbq-button-toggle-size-item-border-radius,
+                map.get($tokens, button-toggle-size-item-border-radius)
             );
         }
     }
 }
 
 /* stylelint-enable no-descending-specificity */
-
-.kbq-button-toggle-standalone {
-    box-shadow: none;
-}

package/card/_card-theme.scss

@@ -22,7 +22,7 @@
     $is-dark: map.get($theme, is-dark);
 
     .kbq-card {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
 
         &.kbq-card_error {
             @include kbq-card-type(map.get($card, error));

package/checkbox/_checkbox-theme.scss

@@ -24,6 +24,10 @@
         }
     }
 
+    & .kbq-hint .kbq-hint__text {
+        color: map.get($default, caption);
+    }
+
     &:hover,
     &.kbq-hover {
         @include kbq-checkbox-state(map.get($checkbox, hover));
@@ -74,6 +78,10 @@
                 color: map.get($disabled, color);
             }
         }
+
+        & .kbq-hint .kbq-hint__text {
+            color: map.get($disabled, caption);
+        }
     }
 }
 /* stylelint-enable no-descending-specificity */
@@ -105,7 +113,7 @@
     .kbq-checkbox {
         @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-label));
 
-        & .kbq-hint {
+        & .kbq-hint .kbq-hint__text {
             @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-normal-caption));
         }
     }
@@ -113,7 +121,7 @@
     .kbq-checkbox.kbq-checkbox_big {
         @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-label));
 
-        & .kbq-hint {
+        & .kbq-hint .kbq-hint__text {
             @include kbq-typography-level-to-styles($config, map.get($tokens, checkbox-font-big-caption));
         }
     }

package/checkbox/checkbox.d.ts

@@ -129,5 +129,5 @@ export declare class KbqCheckbox extends KbqCheckboxMixinBase implements Control
     /** Function is called whenever the focus changes for the input element. */
     private onInputFocusChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["mcCheckbox"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
 }

package/code-block/README.md

@@ -4,15 +4,15 @@
 
 | Property               | Description                                                                                                                                                                              | Type                  | Default |
 |------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
-| mcPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
-| mcTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
-| mcVisible              | Ручное управление показом, используется только при mcTrigger="manual"                                                                                                             | boolean               | false   |
-| mcPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
-| mcPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
-| mcPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
-| mcPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
-| mcPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
-| mcVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+| 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
 
@@ -22,11 +22,11 @@
 </ng-template>
  
 <button
-    mcPopover
-    [mcTrigger]="'hover'"
-    [mcPlacement]="'top'"
-    [mcPopoverHeader]="'Это header'"
-    [mcPopoverContent]="customContent">
+    kbqPopover
+    [kbqTrigger]="'hover'"
+    [kbqPlacement]="'top'"
+    [kbqPopoverHeader]="'Это header'"
+    [kbqPopoverContent]="customContent">
     Найти Эйяфьядлайёкюдль
 </button>
 ```

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

@@ -319,6 +319,14 @@
     .kbq-code-block {
         @include kbq-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
 
+        & .kbq-code-block__code {
+            font: inherit;
+
+            > code {
+                font: inherit;
+            }
+        }
+
         .hljs-ln-numbers {
             @include kbq-typography-level-to-styles($config, caption-mono);
         }

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

@@ -70,5 +70,5 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     private updateMultiline;
     private getFullFileName;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["mcCodeBlock"], { "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; }; "lessContrast": { "alias": "lessContrast"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
 }

package/core/animation/index.d.ts

@@ -1,3 +1,3 @@
 export { fadeAnimation } from './fade-animations';
 export * from './animation';
-export { mcSelectAnimations } from './select-animations';
+export { kbqSelectAnimations } from './select-animations';

package/core/animation/select-animations.d.ts

@@ -4,7 +4,7 @@ import { AnimationTriggerMetadata } from '@angular/animations';
  * const containing the metadata for one animation.
  *
  */
-export declare const mcSelectAnimations: {
+export declare const kbqSelectAnimations: {
     readonly transformPanel: AnimationTriggerMetadata;
     readonly fadeInContent: AnimationTriggerMetadata;
 };

package/core/formatters/index.d.ts

@@ -3,7 +3,7 @@ import * as i1 from "./number/formatter";
 import * as i2 from "./date/formatter.pipe";
 export declare class KbqFormattersModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormattersModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFormattersModule, [typeof i1.KbqDecimalPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe], never, [typeof i1.KbqDecimalPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFormattersModule, [typeof i1.KbqDecimalPipe, typeof i1.KbqRoundDecimalPipe, typeof i1.KbqTableNumberPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe], never, [typeof i1.KbqDecimalPipe, typeof i1.KbqRoundDecimalPipe, typeof i1.KbqTableNumberPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqFormattersModule>;
 }
 export * from './number/formatter';

package/core/formatters/number/formatter.d.ts

@@ -4,6 +4,17 @@ import * as i0 from "@angular/core";
 export declare const KBQ_NUMBER_FORMATTER_OPTIONS: InjectionToken<string>;
 export declare const KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS: ParsedDigitsInfo;
 export declare const NUMBER_FORMAT_REGEXP: RegExp;
+interface RoundDecimalOptions {
+    separator: string;
+    groupSeparator: string;
+    thousands?: string;
+    tenThousand?: string;
+    million?: string;
+    oneHundredMillions?: string;
+    billion?: string;
+    trillion: string;
+    rtl?: boolean;
+}
 declare class ParsedDigitsInfo {
     useGrouping: boolean;
     minimumIntegerDigits: number;
@@ -30,8 +41,52 @@ export declare class KbqDecimalPipe implements PipeTransform {
      * When not supplied, uses the value of `KBQ_LOCALE_ID`, which is `ru` by default.
      */
     transform(value: any, digitsInfo?: string, locale?: string): string | null;
+    isSpecialFormatForRULocale(locale: string, value: number, grouping?: boolean): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDecimalPipe, [{ optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<KbqDecimalPipe, "mcNumber", false>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqDecimalPipe, "kbqNumber", false>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqDecimalPipe>;
 }
+export declare class KbqTableNumberPipe implements PipeTransform {
+    private id;
+    private localeService;
+    private readonly options;
+    constructor(id: string, localeService: KbqLocaleService, options: ParsedDigitsInfo);
+    /**
+     * @param value The number to be formatted.
+     * @param digitsInfo Decimal representation options, specified by a string
+     * in the following format:<br>
+     * <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>.
+     *   - `minIntegerDigits`: The minimum number of integer digits before the decimal point.
+     * Default is `1`.
+     *   - `minFractionDigits`: The minimum number of digits after the decimal point.
+     * Default is `0`.
+     *   - `maxFractionDigits`: The maximum number of digits after the decimal point.
+     * Default is `3`.
+     * @param locale A locale code for the locale format rules to use.
+     * When not supplied, uses the value of `KBQ_LOCALE_ID`, which is `ru` by default.
+     */
+    transform(value: any, digitsInfo?: string, locale?: string): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTableNumberPipe, [{ optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqTableNumberPipe, "kbqTableNumber", false>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqTableNumberPipe>;
+}
+export declare function isWithin(startRange: number, endRange: number, valueToCheck: number): boolean;
+export declare class KbqRoundDecimalPipe implements PipeTransform {
+    private id;
+    private localeService;
+    roundingOptions: RoundDecimalOptions;
+    constructor(id: string, localeService: KbqLocaleService);
+    transform(value: any, locale?: string): any;
+    private calculateDecimal;
+    /**
+     * 2 * 1000 is a number in the interval of [1500...2500)
+     *
+     * 2,0 * 1000 is a number in the interval of [1950...2050)
+     */
+    private calculatePartsForThousands;
+    private calculateUnit;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRoundDecimalPipe, [{ optional: true; }, { optional: true; }]>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqRoundDecimalPipe, "kbqRoundNumber", false>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqRoundDecimalPipe>;
+}
 export {};

package/core/forms/forms.directive.d.ts

@@ -11,12 +11,12 @@ export declare class KbqFormElement implements AfterContentInit {
     constructor(element: ElementRef<HTMLElement>);
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormElement, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFormElement, ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", ["mcFormElement"], {}, {}, ["elements"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFormElement, ".kbq-form__row, .kbq-form__fieldset, .kbq-form__legend", ["kbqFormElement"], {}, {}, ["elements"], never, false, never>;
 }
 export declare class KbqForm implements AfterContentInit {
     elements: QueryList<KbqFormElement>;
     ngAfterContentInit(): void;
     handleElements(elements: QueryList<KbqFormElement>): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqForm, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqForm, ".kbq-form-vertical, .kbq-form-horizontal", ["mcForm"], {}, {}, ["elements"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqForm, ".kbq-form-vertical, .kbq-form-horizontal", ["kbqForm"], {}, {}, ["elements"], never, false, never>;
 }