@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

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

@@ -27,6 +27,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -76,6 +92,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -125,6 +157,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -174,6 +222,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -224,6 +288,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 startFormattingFrom: number;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -275,6 +355,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -311,6 +407,7 @@ export declare const KBQ_LOCALE_SERVICE: InjectionToken<KbqLocaleService>;
 export declare class KbqLocaleService {
     readonly changes: BehaviorSubject<string>;
     readonly locales: any;
+    private readonly document;
     id: string;
     current: any;
     constructor(id: string, localeData: any);

package/core/option/_optgroup-theme.scss

@@ -2,24 +2,22 @@
 @use 'sass:map';
 
 @use '../styles/typography/typography-utils' as *;
-
+@use '../styles/common/tokens' as *;
 
 @mixin kbq-optgroup-theme($theme) {
     $foreground: map.get($theme, foreground);
 
     .kbq-optgroup-label {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: map.get($foreground, text-disabled);
+        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 }
 
 @mixin kbq-optgroup-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, optgroup-font-default));
+        @include kbq-typography-css-variables(optgroup, default);
     }
 }

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

@@ -2,40 +2,37 @@
 
 @use '../styles/theming/theming' as *;
 @use '../styles/typography/typography-utils' as *;
-
+@use '../styles/common/tokens' as *;
 
 @mixin kbq-option-action-theme($theme) {
-    $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
 
-    $secondary: map.get($theme, secondary);
-
-    $is-dark: map.get($theme, is-dark);
+    $states: map.get($theme, states);
 
     .kbq-option-action {
         &.cdk-keyboard-focused {
-            border-color: map.get(map.get($theme, states), focused-color);
+            border-color: kbq-css-variable(states-focused-color, map.get($theme, states, focused-color));
         }
 
         &:active,
         &.kbq-pressed {
             & .kbq-icon {
-                color: kbq-color($secondary, if($is-dark, 70, 30));
+                color: kbq-css-variable(states-icon-contrast-fade, map.get($states, icon, contrast-fade));
             }
 
-            background-color: kbq-color($secondary, A16);
+            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
         }
 
         &:hover .kbq-icon {
-            color: kbq-color($secondary, if($is-dark, 70, 30));
+            color: kbq-css-variable(states-icon-contrast-fade-hover, map.get($states, icon, contrast-fade-hover));
         }
 
         &.kbq-disabled {
             & .kbq-icon {
-                color: kbq-color($secondary, if($is-dark, 30, 70));
+                color: kbq-css-variable(states-icon-disabled, map.get($states, icon, disabled));
             }
 
-            background-color: transparent;
+            background-color: kbq-css-variable(background-transparent, map.get($background, transparent));
         }
     }
 }

package/core/option/_option-theme.scss

@@ -2,26 +2,23 @@
 @use 'sass:map';
 
 @use '../styles/typography/typography-utils' as *;
+@use '../styles/common/tokens' as *;
 
+@mixin kbq-option($component, $style-name) {
+    $state: map.get($component, $style-name);
 
-@mixin kbq-option($state) {
-    background: map.get($state, container-background);
+    background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
     }
 
-    // todo выглядит как баг
-    //.kbq-icon {
-    //    color: map.get($state, icon);
-    //}
-
     .kbq-option-action .kbq-icon {
-        color: map.get($state, icon-button);
+        color: kbq-css-variable(list-#{$style-name}-icon-button, map.get($state, icon-button));
     }
 
     .kbq-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
     }
 }
 
@@ -29,39 +26,37 @@
     $list-item: map.get(map.get($theme, components), list-item);
 
     .kbq-option {
-        @include kbq-option(map.get($list-item, default));
+        @include kbq-option($list-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-option(map.get($list-item, hover));
+            @include kbq-option($list-item, states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($list-item, focused), focus-outline);
+            border-color: map.get($list-item, states-focused, focus-outline);
         }
 
         &.kbq-selected {
-            @include kbq-option(map.get($list-item, selected));
+            @include kbq-option($list-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-option(map.get($list-item, selected-hover));
+                @include kbq-option($list-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-option(map.get($list-item, disabled));
+            @include kbq-option($list-item, states-disabled);
         }
     }
 }
 
 @mixin kbq-option-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-text));
+        @include kbq-typography-css-variables(list, text);
     }
 
     .kbq-list-option-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, list-font-caption));
+        @include kbq-typography-css-variables(list, caption);
     }
 }

package/core/option/index.d.ts

@@ -1,4 +1,4 @@
-export * from './option';
-export * from './optgroup';
 export * from './action';
+export * from './optgroup';
+export * from './option';
 export * from './option-module';

package/core/option/optgroup.scss

@@ -3,14 +3,13 @@
 
 @use '../styles/common/vendor-prefixes';
 @use '../styles/tokens';
-
+@use '../styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-optgroup-label {
-    padding-left: var(--kbq-optgroup-size-padding-left, map.get($tokens, optgroup-size-padding-left));
+    padding-left: kbq-css-variable(size-m);
 
     @include vendor-prefixes.user-select(none);
-
     cursor: default;
 }

package/core/option/option.scss

@@ -3,7 +3,6 @@
 
 @use '../styles/common';
 
-
 .kbq-option {
     @include common.kbq-list-item-base();
 

package/core/pop-up/_pop-up.scss

@@ -88,7 +88,6 @@
         top: $arrow-offset;
         right: $arrow-padding;
     }
-
 }
 
 @mixin popup-arrow-borders-color($name, $value) {

package/core/pop-up/pop-up-trigger.d.ts

@@ -1,5 +1,5 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayRef, ScrollDispatcher, OverlayConfig } from '@angular/cdk/overlay';
+import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef, ScrollDispatcher } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ElementRef, EventEmitter, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { Observable, Subject, Subscription } from 'rxjs';
@@ -33,12 +33,13 @@ export declare abstract class KbqPopUpTrigger<T> {
     protected overlayRef: OverlayRef | null;
     protected portal: ComponentPortal<T>;
     protected instance: any | null;
-    protected listeners: Map<string, EventListenerOrEventListenerObject>;
+    protected listeners: Map<string, EventListener>;
     protected closingActionsSubscription: Subscription;
     protected readonly availablePositions: {
         [key: string]: ConnectionPositionPair;
     };
     protected readonly destroyed: Subject<void>;
+    protected triggerName: string;
     protected constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction?: Directionality | undefined);
     abstract updateClassMap(newPlacement?: string): void;
     abstract updateData(): void;
@@ -63,6 +64,7 @@ export declare abstract class KbqPopUpTrigger<T> {
     protected getPriorityPlacementStrategy(value: string | string[]): ConnectionPositionPair[];
     protected getPrioritizedPositions(): ConnectionPositionPair[];
     protected clearListeners(): void;
+    private createListener;
     private addEventListener;
     private removeEventListener;
     private subscribeOnClosingActions;

package/core/public-api.d.ts

@@ -2,21 +2,21 @@ export * from './animation/index';
 export * from './common-behaviors/index';
 export * from './datetime/index';
 export * from './error/error-options';
-export * from './formatters/index';
 export * from './form-field/index';
+export * from './formatters/index';
 export * from './forms/index';
 export * from './highlight/index';
 export * from './label/label-options';
 export * from './line/line';
+export * from './locales/index';
 export * from './option/index';
 export * from './overlay/overlay-position-map';
 export * from './pop-up/index';
 export * from './select/index';
 export * from './selection/index';
-export * from './locales/index';
-export * from './title/index';
 export * from './services/measure-scrollbar.service';
 export * from './services/theme.service';
+export * from './title/index';
 export * from './utils/index';
 export * from './validation/index';
 export * from './version';

package/core/select/common.d.ts

@@ -0,0 +1,35 @@
+import { AfterContentInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { KbqFormFieldRef } from '../form-field';
+import * as i0 from "@angular/core";
+export declare class KbqSelectTrigger {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectMatcher {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectFooter, "kbq-select-footer, [kbq-select-footer]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
+    protected formField: KbqFormFieldRef;
+    searchChangesSubscription: Subscription;
+    isSearchChanged: boolean;
+    get ngControl(): any;
+    constructor(formField: KbqFormFieldRef);
+    focus(): void;
+    reset(): void;
+    value(): any;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearch, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearch, "[kbqSelectSearch]", ["kbqSelectSearch"], {}, {}, never, never, true, never>;
+}
+export declare class KbqSelectSearchEmptyResult {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectSearchEmptyResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectSearchEmptyResult, "[kbq-select-search-empty-result]", ["kbqSelectSearchEmptyResult"], {}, {}, never, never, true, never>;
+}

package/core/select/constants.d.ts

@@ -1,4 +1,4 @@
-import { ScrollStrategy, Overlay, RepositionScrollStrategy } from '@angular/cdk/overlay';
+import { Overlay, RepositionScrollStrategy, ScrollStrategy } from '@angular/cdk/overlay';
 import { InjectionToken } from '@angular/core';
 /** The max height of the select's overlay panel */
 export declare const SELECT_PANEL_MAX_HEIGHT = 224;

package/core/select/index.d.ts

@@ -1,3 +1,4 @@
-export * from './events';
-export * from './errors';
+export * from './common';
 export * from './constants';
+export * from './errors';
+export * from './events';

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,48 +1,44 @@
 @use 'sass:map';
 
+@use '../../styles/common/tokens' as *;
 
-@mixin kbq-pseudo-checkbox-color($checkbox) {
-    $default: map.get($checkbox, default);
+@mixin kbq-pseudo-checkbox-color($component, $style-name) {
+    $style: map.get($component, $style-name);
+    $base: checkbox-#{$style-name};
 
-    border-color: map.get($default, border);
+    border-color: kbq-css-variable(#{$base}-default-border, map.get($style, default, border));
+    background: kbq-css-variable(#{$base}-default-background, map.get($style, default, background));
 
     & .kbq-checkbox-checkmark,
     & .kbq-checkbox-mixedmark {
-        color: map.get($default, color);
+        color: kbq-css-variable(#{$base}-default-color, map.get($style, default, color));
     }
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        $checked: map.get($checkbox, checked);
-
-        border-color: map.get($checked, border);
-        background: map.get($checked, background);
+        border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
+        background: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
     }
 
     &.kbq-disabled {
-        $disabled: map.get($checkbox, disabled);
-
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: map.get($disabled, color);
+            color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
         }
 
-        border-color: map.get($disabled, border);
-        background: map.get($disabled, background);
+        border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
+        background: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
     }
 }
 
 @mixin kbq-pseudo-checkbox-theme($theme) {
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
-    $checkbox: map.get(map.get($theme, components), checkbox);
+    $checkbox: map.get($theme, components, checkbox);
 
     .kbq-pseudo-checkbox {
-        @include kbq-pseudo-checkbox-color(map.get($checkbox, theme));
+        @include kbq-pseudo-checkbox-color($checkbox, theme);
 
         &.kbq-error {
-            @include kbq-pseudo-checkbox-color(map.get($checkbox, error));
+            @include kbq-pseudo-checkbox-color($checkbox, error);
         }
     }
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 @use '../../styles/tokens';
-
+@use '../../styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
@@ -14,12 +14,12 @@ $tokens: meta.module-variables(tokens) !default;
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
-    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    width: kbq-css-variable(checkbox-size-normal-width);
+    height: kbq-css-variable(checkbox-size-normal-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
-        width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
+        radius: kbq-css-variable(checkbox-size-normal-border-radius);
+        width: kbq-css-variable(checkbox-size-normal-border-width);
         style: solid;
     }
 
@@ -56,11 +56,11 @@ $tokens: meta.module-variables(tokens) !default;
 }
 
 .kbq-pseudo-checkbox.kbq-pseudo-checkbox_big {
-    width: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
-    height: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+    width: kbq-css-variable(checkbox-size-big-width);
+    height: kbq-css-variable(checkbox-size-big-width);
 
     border: {
-        radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
-        width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+        radius: kbq-css-variable(checkbox-size-big-border-radius);
+        width: kbq-css-variable(checkbox-size-big-border-width);
     }
 }

package/core/services/theme.service.d.ts

@@ -1,4 +1,4 @@
-import { Renderer2, RendererFactory2 } from '@angular/core';
+import { OnDestroy, Renderer2, RendererFactory2 } from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface KbqTheme {
@@ -7,13 +7,14 @@ export interface KbqTheme {
     selected: boolean;
 }
 export declare const KbqDefaultThemes: KbqTheme[];
-export declare class ThemeService<T extends KbqTheme | null = KbqTheme> {
+export declare class ThemeService<T extends KbqTheme | null = KbqTheme> implements OnDestroy {
     private rendererFactory;
     current: BehaviorSubject<T>;
     themes: T[];
     protected renderer: Renderer2;
     protected subscription: Subscription;
     constructor(rendererFactory: RendererFactory2);
+    ngOnDestroy(): void;
     setThemes(items: T[]): void;
     setTheme(value: T | number): void;
     getTheme(): T;

package/core/styles/_core.scss

@@ -3,7 +3,6 @@
 @use 'common/overlay' as *;
 @use 'common/visually-hidden' as *;
 
-
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin kbq-core() {
     @include a11y-visually-hidden();

package/core/styles/_koobiq-theme.scss

@@ -17,6 +17,7 @@
 @use '../../datepicker/datepicker-theme' as *;
 @use '../../divider/divider-theme' as *;
 @use '../../dropdown/dropdown-theme' as *;
+@use '../../empty-state/empty-state-theme' as *;
 @use '../../file-upload/file-upload-theme' as *;
 @use '../../form-field/form-field-theme' as *;
 @use '../../form-field/hint-theme' as *;
@@ -56,7 +57,6 @@
 @use '../highlight/highlight-theme' as *;
 @use '../../dl/dl-theme' as *;
 
-
 @mixin koobiq-theme($theme) {
     @include kbq-core-theme($theme);
 
@@ -72,6 +72,7 @@
     @include kbq-dl-theme($theme);
     @include kbq-divider-theme($theme);
     @include kbq-dropdown-theme($theme);
+    @include kbq-empty-state-theme($theme);
     @include kbq-form-field-theme($theme);
     @include kbq-file-upload-theme($theme);
     @include kbq-hint-theme($theme);
@@ -112,11 +113,11 @@
 }
 
 @mixin koobiq-typography($tokens, $config: null, $md-config: null) {
-    @if $config == null {
+    @if not $config {
         $config: kbq-typography-config($tokens);
     }
 
-    @if $md-config == null {
+    @if not $md-config {
         $md-config: kbq-markdown-typography-config($tokens);
     }
 
@@ -131,6 +132,7 @@
     @include kbq-code-block-typography($config);
     @include kbq-datepicker-typography($config);
     @include kbq-dropdown-typography($config);
+    @include kbq-empty-state-typography($config);
     @include kbq-dl-typography($config);
     @include kbq-form-field-typography($config);
     @include kbq-hint-typography($config);

package/core/styles/common/_animation.scss

@@ -25,14 +25,15 @@
         $darker: rgba(0, 0, 0, 0.04);
 
         background: linear-gradient(
-            135deg,
-            $darker 10px,
-            $lighter 10px,
-            $lighter 20px,
-            $darker 20px,
-            $darker 30px,
-            $lighter 31px
-        ) repeat;
+                135deg,
+                $darker 10px,
+                $lighter 10px,
+                $lighter 20px,
+                $darker 20px,
+                $darker 30px,
+                $lighter 31px
+            )
+            repeat;
         background-size: 32px 32px;
         animation: kbq-progress 1s linear infinite;
     }