@koobiq/components 17.0.0-rc.6 → 17.0.0-rc.8

package/tooltip/tooltip.scss

@@ -3,42 +3,40 @@
 
 @use '../core/pop-up/pop-up';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 $trigger-margin: 8px;
 
 
 .kbq-tooltip__inner {
-    border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: kbq-css-variable(tooltip-size-border-radius);
     word-break: break-word;
 }
 
 .kbq-tooltip {
     box-sizing: border-box;
 
-    border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
+    border-radius: kbq-css-variable(tooltip-size-border-radius);
 
     white-space: pre-line;
 
     @include pop-up.popup-margins(kbq-tooltip, $trigger-margin);
 
-    max-width: var(--kbq-tooltip-size-max-width, map.get($tokens, tooltip-size-max-width));
+    max-width: kbq-css-variable(tooltip-size-max-width);
 
     .kbq-tooltip__inner {
         padding:
-            var(--kbq-tooltip-size-padding-vertical, map.get($tokens, tooltip-size-padding-vertical))
-            var(--kbq-tooltip-size-padding-horizontal, map.get($tokens, tooltip-size-padding-horizontal));
+            kbq-css-variable(tooltip-size-padding-vertical)
+            kbq-css-variable(tooltip-size-padding-horizontal);
     }
 }
 
 .kbq-tooltip__arrow {
     position: absolute;
 
-    width: var(--kbq-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
-    height: var(--kbq-tooltip-size-arrow-size, map.get($tokens, tooltip-size-arrow-size));
+    width: kbq-css-variable(tooltip-size-arrow-size);
+    height: kbq-css-variable(tooltip-size-arrow-size);
 
     transform: rotate(45deg);
 

package/tree/_tree-theme.scss

@@ -3,30 +3,28 @@
 
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
+@use '../core/styles/common/tokens' as *;
 
 
-@mixin kbq-tree-option($state) {
-    background: map.get($state, container-background);
+@mixin kbq-tree-option($component, $state-name) {
+    $state: map.get($component, $state-name);
+
+    background: kbq-css-variable(tree-#{$state-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: map.get($state, text);
+        color: kbq-css-variable(tree-#{$state-name}-text, map.get($state, text));
     }
 
-    // todo выглядит как баг
-    //.kbq-icon {
-    //    color: map.get($state, icon);
-    //}
-
     .kbq-tree-node-toggle .kbq-icon {
-        color: map.get($state, tree-toggle);
+        color: kbq-css-variable(tree-#{$state-name}-tree-toggle, map.get($state, tree-toggle));
     }
 
     .kbq-option-action .kbq-icon {
-        color: map.get($state, action-button);
+        color: kbq-css-variable(tree-#{$state-name}-action-button, map.get($state, action-button));
     }
 
     .kbq-option-caption {
-        color: map.get($state, caption);
+        color: kbq-css-variable(tree-#{$state-name}-caption, map.get($state, caption));
     }
 }
 
@@ -37,29 +35,31 @@
     }
 
     .kbq-tree-option {
-        $tree-item: map.get(map.get($theme, components), tree-item);
+        $tree-item: map.get($theme, components, tree-item);
 
-        @include kbq-tree-option(map.get($tree-item, default));
+        @include kbq-tree-option($tree-item, default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-tree-option(map.get($tree-item, hover));
+            @include kbq-tree-option($tree-item, states-hover);
         }
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get(map.get($tree-item, focused), focus-outline);
+            border-color: kbq-css-variable(
+                tree-states-focused-focus-outline, map.get($tree-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {
-            @include kbq-tree-option(map.get($tree-item, selected));
+            @include kbq-tree-option($tree-item, states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-tree-option(map.get($tree-item, selected-hover));
+                @include kbq-tree-option($tree-item, states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-tree-option(map.get($tree-item, disabled));
+            @include kbq-tree-option($tree-item, states-disabled);
 
             & .kbq-icon {
                 cursor: default;
@@ -69,13 +69,11 @@
 }
 
 @mixin kbq-tree-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tree-option {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-text));
+        @include kbq-typography-css-variables(tree, text);
     }
 
     .kbq-tree-option-caption {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, tree-font-caption));
+        @include kbq-typography-css-variables(tree, caption);
     }
 }

package/tree/toggle.scss

@@ -1,11 +1,9 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
 .kbq-tree-node-toggle {
     display: flex;
     align-items: center;
@@ -14,8 +12,8 @@ $tokens: meta.module-variables(tokens) !default;
 
     height: 100%;
 
-    padding-left: var(--kbq-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
-    padding-right: var(--kbq-tree-size-toggle-padding, map.get($tokens, tree-size-toggle-padding));
+    padding-left: kbq-css-variable(tree-size-toggle-padding);
+    padding-right: kbq-css-variable(tree-size-toggle-padding);
 
     cursor: pointer;
 

package/tree/tree-option.scss

@@ -3,6 +3,7 @@
 
 @use '../core/styles/common';
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -25,7 +26,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     word-wrap: break-word;
 
-    border-width: var(--kbq-tree-size-container-focus-outline-width, $outline-width);
+    border-width: kbq-css-variable(tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
 
@@ -42,9 +43,7 @@ $tokens: meta.module-variables(tokens) !default;
         var(--kbq-tree-size-container-focus-outline-width, $outline-width)
     );
 
-    gap: var(
-        --kbq-tree-size-container-content-gap-horizontal, map.get($tokens, tree-size-container-content-gap-horizontal)
-    );
+    gap: kbq-css-variable(tree-size-container-content-gap-horizontal);
 
     & .kbq-option-text {
         $tokens: meta.module-variables(tokens) !default;
@@ -54,8 +53,8 @@ $tokens: meta.module-variables(tokens) !default;
 
         @include common.kbq-truncate-line();
 
-        padding-top: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
-        padding-bottom: var(--kbq-list-size-text-padding-vertical, map.get($tokens, list-size-text-padding-vertical));
+        padding-top: kbq-css-variable(list-size-text-padding-vertical);
+        padding-bottom: kbq-css-variable(list-size-text-padding-vertical);
     }
 
     &:focus {

package/tree-select/_tree-select-theme.scss

@@ -4,48 +4,46 @@
 @use '../core/styles/theming/theming' as *;
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/popup' as *;
+@use '../core/styles/common/tokens' as *;
 
 
 @mixin kbq-tree-select-theme($theme) {
     $foreground: map.get($theme, foreground);
-    $error: map.get($theme, error);
 
-    $select-panel: map.get(map.get($theme, components), select-panel);
-    $divider: map.get(map.get($theme, components), divider);
+    $select-panel: map.get($theme, components, select-panel);
+    $divider: map.get($theme, components, divider);
 
     .kbq-tree-select {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
 
         &.ng-invalid {
-            color: kbq-color($error);
+            color: kbq-css-variable(error-default, map.get($theme, error, default));
         }
 
         &.kbq-disabled {
-            color: map.get($foreground, text-disabled);
+            color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: map.get($foreground, text-disabled);
+        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 
     .kbq-tree-select__panel {
-        box-shadow: map.get($select-panel, shadow);
-        background: map.get($select-panel, background);
+        box-shadow: kbq-css-variable(select-panel-shadow, map.get($select-panel, shadow));
+        background: kbq-css-variable(select-panel-background, map.get($select-panel, background));
 
-        & .kbq-tree-select__footer {
-            border-color: map.get($divider, color);
+        & .kbq-select__footer {
+            border-color: kbq-css-variable(divider-color, map.get($divider, color));
         }
     }
 }
 
 @mixin kbq-tree-select-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-tree-select,
     .kbq-tree-select__panel {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, select-panel-font-default));
+        @include kbq-typography-css-variables(select-panel, default);
     }
 }

package/tree-select/tree-select.component.d.ts

@@ -3,9 +3,8 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { CdkConnectedOverlay, ConnectedPosition, ViewportRuler } from '@angular/cdk/overlay';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanDisable, CanUpdateErrorState, ErrorStateMatcher, HasTabIndex, CanDisableCtor, HasTabIndexCtor, CanUpdateErrorStateCtor } from '@koobiq/components/core';
+import { CanDisable, CanUpdateErrorState, ErrorStateMatcher, HasTabIndex, CanDisableCtor, HasTabIndexCtor, CanUpdateErrorStateCtor, KbqSelectSearch, KbqSelectTrigger, KbqSelectMatcher } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqSelectSearch } from '@koobiq/components/select';
 import { KbqTag } from '@koobiq/components/tags';
 import { KbqTreeSelection, KbqTreeOption } from '@koobiq/components/tree';
 import { Observable, Subject } from 'rxjs';
@@ -22,18 +21,6 @@ export declare class KbqTreeSelectChange {
     isUserInput: boolean;
     constructor(source: KbqTreeSelect, value: any, isUserInput?: boolean);
 }
-export declare class KbqTreeSelectTrigger {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectTrigger, "kbq-tree-select-trigger,[kbq-tree-select-trigger]", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqTreeSelectMatcher {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectMatcher, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectMatcher, "kbq-tree-select-matcher", never, {}, {}, never, never, false, never>;
-}
-export declare class KbqTreeSelectFooter {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectFooter, "kbq-tree-select-footer, [kbq-tree-select-footer]", never, {}, {}, never, never, false, never>;
-}
 /** @docs-private */
 declare class KbqTreeSelectBase {
     elementRef: ElementRef;
@@ -94,8 +81,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     tags: QueryList<KbqTag>;
     cleaner: KbqCleaner;
     /** User-supplied override of the trigger element. */
-    customTrigger: KbqTreeSelectTrigger;
-    customMatcher: KbqTreeSelectMatcher;
+    customTrigger: KbqSelectTrigger;
+    customMatcher: KbqSelectMatcher;
     customTagTemplateRef: TemplateRef<any>;
     tree: KbqTreeSelection;
     search: KbqSelectSearch;
@@ -285,6 +272,6 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private _compareWith;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-tree-select-trigger", "kbq-cleaner", "kbq-tree-select-matcher, [kbq-tree-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-tree-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-trigger", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
 }
 export {};

package/tree-select/tree-select.module.d.ts

@@ -6,9 +6,8 @@ import * as i4 from "@koobiq/components/tree";
 import * as i5 from "@koobiq/components/icon";
 import * as i6 from "@koobiq/components/tags";
 import * as i7 from "@koobiq/components/core";
-import * as i8 from "@koobiq/components/select";
 export declare class KbqTreeSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect, typeof i1.KbqTreeSelectTrigger, typeof i1.KbqTreeSelectMatcher, typeof i1.KbqTreeSelectFooter], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.KbqTreeModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqPseudoCheckboxModule, typeof i8.KbqSelectModule], [typeof i1.KbqTreeSelect, typeof i1.KbqTreeSelectTrigger, typeof i1.KbqTreeSelectMatcher, typeof i1.KbqTreeSelectFooter, typeof i2.CommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect], [typeof i2.CommonModule, typeof i3.OverlayModule, typeof i4.KbqTreeModule, typeof i5.KbqIconModule, typeof i6.KbqTagsModule, typeof i7.KbqPseudoCheckboxModule, typeof i7.KbqSelectSearch, typeof i7.KbqSelectFooter, typeof i7.KbqSelectMatcher, typeof i7.KbqSelectTrigger, typeof i7.KbqSelectSearchEmptyResult], [typeof i1.KbqTreeSelect, typeof i2.CommonModule, typeof i7.KbqSelectSearch, typeof i7.KbqSelectFooter, typeof i7.KbqSelectMatcher, typeof i7.KbqSelectTrigger, typeof i7.KbqSelectSearchEmptyResult]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeSelectModule>;
 }

package/tree-select/tree-select.scss

@@ -4,10 +4,6 @@
 @use '../core/styles/common';
 @use '../core/styles/common/select' as *;
 
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
 
 .kbq-tree-select {
     @extend %kbq-select-base;
@@ -16,7 +12,7 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-tree-select__panel {
     @extend %kbq-select-panel;
 
-    & .kbq-tree-select__footer {
+    & .kbq-select__footer {
         @extend %kbq-select-footer;
     }
 }

package/core/styles/_variables.scss

@@ -1 +0,0 @@
-