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

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

package/core/locales/locale-service.d.ts

@@ -2,29 +2,137 @@ import { InjectionToken } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare const KBQ_LOCALE_ID: InjectionToken<string>;
-export declare const KBQ_DEFAULT_LOCALE_ID = "ru";
+export declare const KBQ_DEFAULT_LOCALE_ID = "ru-RU";
 export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
     'zh-CN': {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    tenThousand: string;
+                    oneHundredMillions: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
     'pt-BR': {
         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;
+            };
+        };
     };
     'fa-IR': {
         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;
+            };
+        };
     };
     'es-LA': {
         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;
+            };
+        };
     };
-    en: {
+    'en-US': {
         select: {
             hiddenItemsText: string;
         };
@@ -32,8 +140,26 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             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;
+            };
+        };
     };
-    ru: {
+    'ru-RU': {
         select: {
             hiddenItemsText: string;
         };
@@ -41,6 +167,25 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             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;
+                startFormattingFrom: number;
+            };
+        };
     };
     items: {
         id: string;

package/core/locales/pt-BR.d.ts

@@ -3,5 +3,32 @@ export declare const ptBRLocaleData: {
         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/ru-RU.d.ts

@@ -1,5 +1,5 @@
 export declare const ruRULocaleData: {
-    ru: {
+    'ru-RU': {
         select: {
             hiddenItemsText: string;
         };
@@ -7,5 +7,24 @@ export declare const ruRULocaleData: {
             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;
+                startFormattingFrom: number;
+            };
+        };
     };
 };

package/core/locales/zh-CN.d.ts

@@ -3,5 +3,31 @@ export declare const znCNLocaleData: {
         select: {
             hiddenItemsText: string;
         };
+        datepicker: {
+            placeholder: string;
+        };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    tenThousand: string;
+                    oneHundredMillions: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
     };
 };

package/core/option/_optgroup-theme.scss

@@ -8,7 +8,7 @@
     $foreground: map.get($theme, foreground);
 
     .kbq-optgroup-label {
-        color: map.get($foreground, text);
+        color: map.get($foreground, contrast);
     }
 
     .kbq-disabled .kbq-optgroup-label {

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

@@ -30,7 +30,7 @@
             color: kbq-color($secondary, if($is-dark, 70, 30));
         }
 
-        &[disabled] {
+        &.kbq-disabled {
             & .kbq-icon {
                 color: kbq-color($secondary, if($is-dark, 30, 70));
             }

package/core/option/_option-theme.scss

@@ -4,33 +4,52 @@
 @use '../styles/typography/typography-utils' as *;
 
 
-@mixin kbq-option-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
+@mixin kbq-option($state) {
+    background: map.get($state, container-background);
+
+    .kbq-option-text {
+        color: map.get($state, text);
+    }
+
+    // todo выглядит как баг
+    //.kbq-icon {
+    //    color: map.get($state, icon);
+    //}
+
+    .kbq-option-action .kbq-icon {
+        color: map.get($state, icon-button);
+    }
+
+    .kbq-option-caption {
+        color: map.get($state, caption);
+    }
+}
 
-    $primary: map.get($theme, theme);
+@mixin kbq-option-theme($theme) {
+    $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-option {
-        color: map.get($foreground, text);
+        @include kbq-option(map.get($list-item, default));
 
         &:hover:not(.kbq-disabled) {
-            .kbq-option-overlay {
-                background: map.get($background, overlay-hover);
-            }
+            @include kbq-option(map.get($list-item, hover));
         }
 
+        &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: map.get(map.get($list-item, focused), focus-outline);
         }
 
         &.kbq-selected {
-            background: map.get(map.get($theme, states), selected-color);
+            @include kbq-option(map.get($list-item, selected));
+
+            &:hover:not(.kbq-disabled) {
+                @include kbq-option(map.get($list-item, selected-hover));
+            }
         }
 
         &.kbq-disabled {
-            background: transparent;
-
-            color: map.get($foreground, text-disabled);
+            @include kbq-option(map.get($list-item, disabled));
         }
     }
 }
@@ -39,6 +58,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, option-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
+    }
+
+    .kbq-list-option-caption {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
     }
 }

package/core/option/action.d.ts

@@ -40,5 +40,5 @@ export declare class KbqOptionActionComponent extends KbqOptionActionMixinBase i
     onKeyDown($event: any): void;
     private preventShowingTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionActionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["mcOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["kbqOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]"], false, never>;
 }

package/core/option/action.scss

@@ -1,5 +1,5 @@
 .kbq-option-action {
-    box-sizing: unset;
+    box-sizing: border-box;
 
     position: relative;
 
@@ -10,9 +10,8 @@
 
     margin-right: -2px;
 
-    //width 28px for total width 32px (left border + right border);
-    width: 28px;
-    height: 100%;
+    width: 24px;
+    height: 24px;
 
     cursor: pointer;
 
@@ -22,7 +21,7 @@
 
     background: transparent;
 
-    &[disabled] {
+    &.kbq-disabled {
         cursor: default;
     }
 }