@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.10

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/README.md

@@ -1 +1 @@
-Please see the official documentation at https://github.com/positive-js/mosaic
+Please see the official documentation at #

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

@@ -39,7 +39,7 @@ export declare class KbqCheckboxBase {
 /** @docs-private */
 export declare const KbqCheckboxMixinBase: HasTabIndexCtor & CanColorCtor & CanDisableCtor & typeof KbqCheckboxBase;
 /**
- * A mosaic checkbox component. Supports all of the functionality of an HTML5 checkbox,
+ * A Koobiq checkbox component. Supports all of the functionality of an HTML5 checkbox,
  * and exposes a similar API. A KbqCheckbox can be either checked, unchecked, indeterminate, or
  * disabled. Note that all additional accessibility attributes are taken care of by the component,
  * so there is no need to provide them yourself. However, if you want to omit a label and still
@@ -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/common-behaviors/color.d.ts

@@ -1,7 +1,7 @@
 import { ElementRef } from '@angular/core';
 import { AbstractConstructor, Constructor } from './constructor';
 export interface CanColor {
-    color: KbqComponentColors | ThemePalette;
+    color: KbqComponentColors | ThemePalette | string;
 }
 /** @docs-private */
 export type CanColorCtor = Constructor<CanColor> & AbstractConstructor<CanColor>;

package/core/common-behaviors/common-module.d.ts

@@ -4,7 +4,7 @@ import * as i1 from "@angular/cdk/bidi";
 export declare const KBQ_SANITY_CHECKS: InjectionToken<boolean>;
 export declare function mcSanityChecksFactory(): boolean;
 /**
- * Module that captures anything that should be loaded and/or run for *all* Mosaic
+ * Module that captures anything that should be loaded and/or run for *all* Koobiq
  * components. This includes Bidi, etc.
  *
  * This module should be imported to each top-level component module (e.g., KbqTabsModule).

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-theme.scss

@@ -25,10 +25,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-form__label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-label));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-label));
     }
 
-    .kbq-form__legend {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
-    }
+    //.kbq-form__legend {
+    //    @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-default-legend));
+    //}
 }

package/core/forms/_forms.scss

@@ -20,10 +20,8 @@
     .kbq-form-horizontal {
         $config: kbq-typography-config($tokens);
 
-        $line-height: kbq-line-height($config, body);
-
+        $line-height: kbq-line-height($config, map.get($tokens, forms-font-label));
         $form-field-size-height: map.get($tokens, form-field-size-height);
-
         $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
 
         & .kbq-form-row_margin {

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>;
 }

package/core/locales/en-US.d.ts

@@ -1,5 +1,5 @@
 export declare const enUSLocaleData: {
-    en: {
+    'en-US': {
         select: {
             hiddenItemsText: string;
         };
@@ -7,5 +7,23 @@ export declare const enUSLocaleData: {
             placeholder: string;
             dateInput: string;
         };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };

package/core/locales/es-LA.d.ts

@@ -3,5 +3,32 @@ export declare const esLALocaleData: {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };

package/core/locales/fa-IR.d.ts

@@ -3,5 +3,33 @@ export declare const faIRLocaleData: {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                    rtl: boolean;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };