@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/core/styles/visual/_layout.scss

@@ -3,10 +3,7 @@
 
 @use '../../styles/common/rtl';
 
-@use '../tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
+@use '../common/tokens' as *;
 
 /*
 *  Responsive attributes
@@ -28,7 +25,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin flex-order-for-name($sizes: null) {
-    @if $sizes == null {
+    @if not $sizes {
         $sizes: '';
 
         .flex-order {
@@ -56,8 +53,8 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-@mixin offset-for-name($sizes:null) {
-    @if $sizes == null {
+@mixin offset-for-name($sizes: null) {
+    @if not $sizes {
         $sizes: '';
     }
 
@@ -72,8 +69,7 @@ $tokens: meta.module-variables(tokens) !default;
                 $suffix: '#{$i * 5}';
             }
 
-            $offsets:
-                '.offset-#{$suffix}, ' +
+            $offsets: '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
                 '.layout-margin .offset-#{$suffix}';
@@ -99,8 +95,7 @@ $tokens: meta.module-variables(tokens) !default;
                 $suffix: '#{$i}';
             }
 
-            $offsets:
-                '.offset-#{$suffix}, ' +
+            $offsets: '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
                 '.layout-margin .offset-#{$suffix}';
@@ -122,8 +117,7 @@ $tokens: meta.module-variables(tokens) !default;
                 $suffix: '#{$i}';
             }
 
-            $offsets:
-                '.offset-#{$suffix}, ' +
+            $offsets: '.offset-#{$suffix}, ' +
                 '.flex-offset-#{$suffix}, ' +
                 '.layout-margin .flex-offset-#{$suffix}, ' +
                 '.layout-margin .offset-#{$suffix}';
@@ -136,7 +130,7 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin layout-for-name($name: null) {
-    @if $name == null {
+    @if not $name {
         $name: '';
     }
 
@@ -169,7 +163,7 @@ $tokens: meta.module-variables(tokens) !default;
 @mixin flex-properties-for-name($name: null) {
     $flexName: 'flex';
 
-    @if $name != null {
+    @if $name {
         $flexName: 'flex-#{$name}';
         $name: '-#{$name}';
     } @else {
@@ -177,13 +171,27 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     // === flex: 1 1 0%;
-    .#{$flexName}             { flex: 1; }
-    .#{$flexName}-grow        { flex: 1 1 100%; }
-    .#{$flexName}-initial     { flex: 0 1 auto; }
-    .#{$flexName}-auto        { flex: 1 1 auto; }
-    .#{$flexName}-none        { flex: 0 0 auto; }
-    .#{$flexName}-no-shrink    { flex: 1 0 auto; }
-    .#{$flexName}-no-grow      { flex: 0 1 auto; }
+    .#{$flexName} {
+        flex: 1;
+    }
+    .#{$flexName}-grow {
+        flex: 1 1 100%;
+    }
+    .#{$flexName}-initial {
+        flex: 0 1 auto;
+    }
+    .#{$flexName}-auto {
+        flex: 1 1 auto;
+    }
+    .#{$flexName}-none {
+        flex: 0 0 auto;
+    }
+    .#{$flexName}-no-shrink {
+        flex: 1 0 auto;
+    }
+    .#{$flexName}-no-grow {
+        flex: 0 1 auto;
+    }
 
     // (1-20) * 5 = 0-100%
     @for $i from 0 through 20 {
@@ -334,7 +342,6 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 @mixin layout-align-for-name($suffix: null) {
-
     // Alignment attributes for layout containers' children
     // Arrange on the Main Axis
     // center, start, end, space-between, space-around
@@ -342,7 +349,7 @@ $tokens: meta.module-variables(tokens) !default;
     // ------------------------------
 
     $name: 'layout-align';
-    @if $suffix != null {
+    @if $suffix {
         $name: 'layout-align-#{$suffix}';
     }
 
@@ -456,19 +463,19 @@ $tokens: meta.module-variables(tokens) !default;
 
 @mixin layout-indents() {
     $sizes: (
-        '3xs': map.get($tokens, size-3xs),
-        'xxs': map.get($tokens, size-xxs),
-        'xs': map.get($tokens, size-xs),
-        's': map.get($tokens, size-s),
-        'm': map.get($tokens, size-m),
-        'l': map.get($tokens, size-l),
-        'xl': map.get($tokens, size-xl),
-        'xxl': map.get($tokens, size-xxl),
-        '3xl': map.get($tokens, size-3xl),
-        '4xl': map.get($tokens, size-4xl),
-        '5xl': map.get($tokens, size-5xl),
-        '6xl': map.get($tokens, size-6xl),
-        '7xl': map.get($tokens, size-7xl)
+        '3xs': kbq-css-variable(size-3xs),
+        'xxs': kbq-css-variable(size-xxs),
+        'xs': kbq-css-variable(size-xs),
+        's': kbq-css-variable(size-s),
+        'm': kbq-css-variable(size-m),
+        'l': kbq-css-variable(size-l),
+        'xl': kbq-css-variable(size-xl),
+        'xxl': kbq-css-variable(size-xxl),
+        '3xl': kbq-css-variable(size-3xl),
+        '4xl': kbq-css-variable(size-4xl),
+        '5xl': kbq-css-variable(size-5xl),
+        '6xl': kbq-css-variable(size-6xl),
+        '7xl': kbq-css-variable(size-7xl),
     );
 
     $indents: 'padding', 'margin';
@@ -524,4 +531,3 @@ $tokens: meta.module-variables(tokens) !default;
 
     @include layout-indents();
 }
-

package/core/utils/data-size/config.d.ts

@@ -1,9 +1,26 @@
+import { InjectionToken } from '@angular/core';
 export declare enum MeasurementSystem {
     SI = "SI",
     IEC = "IEC"
 }
-export declare const sizeUnitsConfig: {
-    defaultUnitSystem: MeasurementSystem;
+export interface SizeUnitsConfig {
+    defaultUnitSystem: string;
+    defaultPrecision: number;
+    unitSystems: {
+        [MeasurementSystem.SI]: {
+            abbreviations: string[];
+            base: number;
+            power: number;
+        };
+        [MeasurementSystem.IEC]: {
+            abbreviations: string[];
+            base: number;
+            power: number;
+        };
+    };
+}
+export declare const KBQ_SIZE_UNITS_DEFAULT_CONFIG: {
+    defaultUnitSystem: string;
     defaultPrecision: number;
     unitSystems: {
         SI: {
@@ -18,3 +35,4 @@ export declare const sizeUnitsConfig: {
         };
     };
 };
+export declare const KBQ_SIZE_UNITS_CONFIG: InjectionToken<SizeUnitsConfig>;

package/core/utils/data-size/data-size.pipe.d.ts

@@ -1,13 +1,14 @@
 import { PipeTransform } from '@angular/core';
-import { MeasurementSystem } from './config';
+import { KbqLocaleService } from '../../locales';
+import { SizeUnitsConfig } from './config';
 import * as i0 from "@angular/core";
 export declare class KbqDataSizePipe implements PipeTransform {
-    transform(source: number, precision?: number, measurementSystem?: MeasurementSystem): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDataSizePipe, never>;
-    static ɵpipe: i0.ɵɵPipeDeclaration<KbqDataSizePipe, "kbqDataSize", false>;
-}
-export declare class KbqDataSizeModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDataSizeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqDataSizeModule, [typeof KbqDataSizePipe], never, [typeof KbqDataSizePipe]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<KbqDataSizeModule>;
+    readonly externalConfig: SizeUnitsConfig;
+    private localeService?;
+    private config;
+    constructor(externalConfig: SizeUnitsConfig, localeService?: KbqLocaleService | undefined);
+    transform(source: number, precision?: number, unitSystemName?: string): string;
+    private updateLocaleParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDataSizePipe, [{ optional: true; }, { optional: true; }]>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqDataSizePipe, "kbqDataSize", true>;
 }

package/core/utils/data-size/size.d.ts

@@ -1,5 +1,4 @@
-import { MeasurementSystem } from './config';
-export declare const formatDataSize: (value: number, systemCode?: MeasurementSystem, precision?: number) => {
+export declare const formatDataSize: (value: number, precision: number, system: any) => {
     value: string;
     unit: string;
 };
@@ -7,10 +6,10 @@ export declare const formatDataSize: (value: number, systemCode?: MeasurementSys
  * Переводит байты в Кб, Мб, Гб
  *
  * @param value количество байт
- * @param systemCode система измерения
+ * @param system система измерения
  * @param threshold нижний порог подсчета
  */
-export declare const getHumanizedBytes: (value: number, systemCode?: MeasurementSystem, threshold?: number) => {
+export declare const getHumanizedBytes: (value: number, system: any, threshold?: number) => {
     result: number;
     unit: string;
 };

package/datepicker/_datepicker-theme.scss

@@ -3,85 +3,83 @@
 
 @use '../core/styles/theming/theming';
 @use '../core/styles/typography/typography-utils' as *;
-
-
-$kbq-datepicker-selected-fade-amount: 0.6;
-$kbq-datepicker-today-fade-amount: 0.2;
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-datepicker-theme($theme) {
     $datepicker: map.get(map.get($theme, components), datepicker);
 
-    $container: map.get($datepicker, container);
-    $header: map.get($datepicker, header);
-    $cell: map.get($datepicker, cell);
-
     .kbq-datepicker__content {
-        background: map.get($container, background);
-        box-shadow: map.get($container, box-shadow);
+        background: kbq-css-variable(datepicker-container-background, map.get($datepicker, container, background));
+        box-shadow: kbq-css-variable(datepicker-container-bo-shadow, map.get($datepicker, container, box-shadow));
     }
 
     .kbq-calendar__table-header {
-        color: map.get($header, text);
+        color: kbq-css-variable(datepicker-header-text, map.get($datepicker, header, text));
     }
 
     .kbq-calendar__table-header-divider::after {
-        background: map.get($header, divider);
+        background: kbq-css-variable(datepicker-header-divider, map.get($datepicker, header, divider));
     }
 
     .kbq-calendar__body-cell-content {
-        $default: map.get($cell, default);
-
-        background: map.get($default, background);
-        color: map.get($default, text);
+        background: kbq-css-variable(
+            datepicker-cell-default-background,
+            map.get($datepicker, cell, default, background)
+        );
+        color: kbq-css-variable(datepicker-cell-default-text, map.get($datepicker, cell, default, text));
 
         &.kbq-calendar__body-today {
-            $today: map.get($cell, today);
-
-            background: map.get($today, background);
-            color: map.get($today, text);
+            background: kbq-css-variable(
+                datepicker-cell-today-background,
+                map.get($datepicker, cell, today, background)
+            );
+            color: kbq-css-variable(datepicker-cell-today-text, map.get($datepicker, cell, today, text));
         }
 
         &:hover:not(.kbq-disabled) {
-            $hover: map.get($cell, hover);
-
-            background: map.get($hover, background);
+            background: kbq-css-variable(
+                datepicker-cell-hover-background,
+                map.get($datepicker, cell, hover, background)
+            );
         }
 
         &:active:not(.kbq-disabled) {
-            $active: map.get($cell, active);
-
-            background: map.get($active, background);
+            background: kbq-css-variable(
+                datepicker-cell-active-background,
+                map.get($datepicker, cell, active, background)
+            );
         }
 
         &.kbq-selected:not(.kbq-disabled) {
-            $selected: map.get($cell, selected);
-
-            background: map.get($selected, background);
-            color: map.get($selected, text);
+            background: kbq-css-variable(
+                datepicker-cell-selected-background,
+                map.get($datepicker, cell, selected, background)
+            );
+            color: kbq-css-variable(datepicker-cell-selected-text, map.get($datepicker, cell, selected, text));
 
             &:hover {
-                $selected-hover: map.get($cell, selected-hover);
-
-                background: map.get($selected-hover, background);
+                background: kbq-css-variable(
+                    datepicker-cell-selected-hover-background,
+                    map.get($datepicker, cell, selected-hover, background)
+                );
             }
         }
 
         &.kbq-disabled {
-            $disabled: map.get($cell, disabled);
-
-            background: map.get($disabled, background);
+            background: kbq-css-variable(
+                datepicker-cell-disabled-background,
+                map.get($datepicker, cell, disabled, background)
+            );
         }
     }
 }
 
 @mixin kbq-datepicker-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-calendar {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
+        @include kbq-typography-css-variables(datepicker, text);
     }
 
     .kbq-calendar__table-header th {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, datepicker-font-text));
+        @include kbq-typography-css-variables(datepicker, text);
     }
 }

package/datepicker/calendar-body.scss

@@ -2,11 +2,10 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-calendar__body-cell {
     position: relative;
     height: 0;
@@ -33,14 +32,7 @@ $tokens: meta.module-variables(tokens) !default;
     // Prevents text being off-center on Android.
     line-height: 1;
 
-    border-radius: var(
-        --kbq-datepicker-size-grid-cell-border-radius,
-        map.get($tokens, datepicker-size-grid-cell-border-radius)
-    );
+    border-radius: kbq-css-variable(datepicker-size-grid-cell-border-radius);
 
-    margin-bottom: var(
-        --kbq-datepicker-size-grid-content-gap-vertical,
-        map.get($tokens, datepicker-size-grid-content-gap-vertical)
-    );
+    margin-bottom: kbq-css-variable(datepicker-size-grid-content-gap-vertical);
 }
-

package/datepicker/calendar-header.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -11,17 +11,11 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
     justify-content: space-between;
 
-    padding-right: var(
-        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
-    );
+    padding-right: kbq-css-variable(datepicker-size-header-padding-horizontal);
 
-    padding-left: var(
-        --kbq-datepicker-size-header-padding-horizontal, map.get($tokens, datepicker-size-header-padding-horizontal)
-    );
+    padding-left: kbq-css-variable(datepicker-size-header-padding-horizontal);
 
-    margin-bottom: var(
-        --kbq-datepicker-size-header-margin-bottom, map.get($tokens, datepicker-size-header-margin-bottom)
-    );
+    margin-bottom: kbq-css-variable(datepicker-size-header-margin-bottom);
 }
 
 .kbq-calendar-header__select {

package/datepicker/calendar.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -11,15 +11,9 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-calendar__content {
-    padding-right: var(
-        --kbq-datepicker-size-grid-padding-horizontal,
-        map.get($tokens, datepicker-size-grid-padding-horizontal)
-    );
+    padding-right: kbq-css-variable(datepicker-size-grid-padding-horizontal);
 
-    padding-left: var(
-        --kbq-datepicker-size-grid-padding-horizontal,
-        map.get($tokens, datepicker-size-grid-padding-horizontal)
-    );
+    padding-left: kbq-css-variable(datepicker-size-grid-padding-horizontal);
 
     outline: none;
 }
@@ -38,10 +32,7 @@ $tokens: meta.module-variables(tokens) !default;
         position: relative;
 
         box-sizing: border-box;
-        height: var(
-            --kbq-datepicker-size-grid-content-gap-vertical,
-            map.get($tokens, datepicker-size-grid-content-gap-vertical)
-        );;
+        height: kbq-css-variable(datepicker-size-grid-content-gap-vertical);
 
         $horizontal-padding: map.get($tokens, datepicker-size-grid-padding-horizontal);
         // We use an absolutely positioned pseudo-element as the divider line for the table header so we
@@ -54,10 +45,7 @@ $tokens: meta.module-variables(tokens) !default;
             left: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
             right: calc(-1 * var(--kbq-datepicker-size-grid-padding-horizontal, #{$horizontal-padding}));
 
-            height: var(
-                --kbq-datepicker-size-grid-divider-height,
-                map.get($tokens, datepicker-size-grid-divider-height)
-            );
+            height: kbq-css-variable(datepicker-size-grid-divider-height);
         }
     }
 }

package/datepicker/datepicker-content.scss

@@ -2,14 +2,13 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
 $kbq-datepicker-non-touch-calendar-cell-size: 40px;
 
-$kbq-datepicker-non-touch-calendar-width:
-    $kbq-datepicker-non-touch-calendar-cell-size * 7 +
+$kbq-datepicker-non-touch-calendar-width: $kbq-datepicker-non-touch-calendar-cell-size * 7 +
     map.get($tokens, datepicker-size-grid-padding-horizontal) * 2;
 // Based on the natural height of the calendar in a month with 6 rows of dates
 // (largest the calendar will get).
@@ -18,23 +17,14 @@ $kbq-datepicker-non-touch-calendar-height: 270px;
 .kbq-datepicker__content {
     display: block;
 
-    border-radius: var(
-        --kbq-datepicker-size-container-border-radius,
-        map.get($tokens, datepicker-size-container-border-radius)
-    );
+    border-radius: kbq-css-variable(datepicker-size-container-border-radius);
 
     .kbq-calendar {
         width: $kbq-datepicker-non-touch-calendar-width;
         height: $kbq-datepicker-non-touch-calendar-height;
 
-        padding-top: var(
-            --kbq-datepicker-size-container-padding-vertical,
-            map.get($tokens, datepicker-size-container-padding-vertical)
-        );
+        padding-top: kbq-css-variable(datepicker-size-container-padding-vertical);
 
-        padding-bottom: var(
-            --kbq-datepicker-size-container-padding-vertical,
-            map.get($tokens, datepicker-size-container-padding-vertical)
-        );
+        padding-bottom: kbq-css-variable(datepicker-size-container-padding-vertical);
     }
 }

package/datepicker/datepicker-input.scss

@@ -1,11 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-form-field-type-datepicker {
     width: auto;
 }

package/datepicker/datepicker-toggle.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -11,8 +11,8 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-datepicker-toggle__button.kbq-button-icon {
-    width: var(--kbq-datepicker-toggle-size-width, map.get($tokens, datepicker-toggle-size-width));
-    height: var(--kbq-datepicker-toggle-size-height, map.get($tokens, datepicker-toggle-size-height));
+    width: kbq-css-variable(datepicker-toggle-size-width);
+    height: kbq-css-variable(datepicker-toggle-size-height);
     margin-left: 2px;
 }
 

package/divider/_divider-theme.scss

@@ -1,10 +1,11 @@
 @use 'sass:map';
 
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-divider-theme($theme) {
     $divider: map.get(map.get($theme, components), divider);
 
     .kbq-divider {
-        background: map.get($divider, color);
+        background: kbq-css-variable(divider-color, map.get($divider, color));
     }
 }

package/divider/divider.scss

@@ -1,47 +1,30 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
+@use '../core/styles/common/tokens' as *;
 
 .kbq-divider {
     display: block;
     margin: 0;
 
     &.kbq-divider_horizontal {
-        height: var(--kbq-divider-size-horizontal-width, map.get($tokens, divider-size-horizontal-width));
+        height: kbq-css-variable(divider-size-horizontal-width);
 
         &.kbq-divider_paddings {
-            margin-top: var(
-                --kbq-divider-size-horizontal-margin-vertical,
-                map.get($tokens, divider-size-horizontal-margin-vertical)
-            );
-
-            margin-bottom: var(
-                --kbq-divider-size-horizontal-margin-vertical,
-                map.get($tokens, divider-size-horizontal-margin-vertical)
-            );
+            margin-top: kbq-css-variable(divider-size-horizontal-margin-vertical);
+
+            margin-bottom: kbq-css-variable(divider-size-horizontal-margin-vertical);
         }
     }
 
     &.kbq-divider_vertical {
-        width: var(--kbq-divider-size-vertical-width, map.get($tokens, divider-size-vertical-width));
+        width: kbq-css-variable(divider-size-vertical-width);
         height: 100%;
 
         &.kbq-divider_paddings {
-            margin-left: var(
-                --kbq-divider-size-vertical-margin-horizontal,
-                map.get($tokens, divider-size-vertical-margin-horizontal)
-            );
-
-            margin-right: var(
-                --kbq-divider-size-vertical-margin-horizontal,
-                map.get($tokens, divider-size-vertical-margin-horizontal)
-            );
+            margin-left: kbq-css-variable(divider-size-vertical-margin-horizontal);
+
+            margin-right: kbq-css-variable(divider-size-vertical-margin-horizontal);
         }
     }
-
 }

package/dl/_dl-theme.scss

@@ -2,31 +2,28 @@
 @use 'sass:map';
 
 @use '../core/styles/typography/typography-utils' as *;
-
+@use '../core/styles/common/tokens' as *;
 
 @mixin kbq-dl-theme($theme) {
     $dl: map.get(map.get($theme, components), dl);
 
     .kbq-dt {
-        color: map.get($dl, dt);
+        color: kbq-css-variable(dl-dt, map.get($dl, dt));
     }
 
     .kbq-dd {
-        color: map.get($dl, dd);
+        color: kbq-css-variable(dl-dd, map.get($dl, dd));
     }
 }
 
 @mixin kbq-dl-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-dl {
         & .kbq-dt {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-term));
+            @include kbq-typography-css-variables(description-list, term);
         }
 
         & .kbq-dd {
-            @include kbq-typography-level-to-styles($config, map.get($tokens, description-list-font-description));
+            @include kbq-typography-css-variables(description-list, description);
         }
     }
 }
-