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

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

@@ -2,9 +2,9 @@ import { Clipboard } from '@angular/cdk/clipboard';
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, QueryList, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
+import { Observable } from 'rxjs';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
 import { CanDisable, HasTabIndex, MultipleMode } from '@koobiq/components/core';
-import { Observable } from 'rxjs';
 import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
 import { FlatTreeControl } from './control/flat-tree-control';
 import { KbqTreeNodeOutlet } from './outlet';
@@ -79,6 +79,7 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     focus($event: any): void;
+    highlightSelectedOption(): void;
     blur(): void;
     onKeyDown(event: KeyboardEvent): void;
     updateScrollSize(): void;

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

@@ -4,48 +4,45 @@
 @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/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './tree-select.module';
 export * from './tree-select.component';
+export * from './tree-select.module';

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

@@ -3,11 +3,10 @@ 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, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqLocaleService, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } 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 { KbqTreeOption, KbqTreeSelection } from '@koobiq/components/tree';
 import { Observable, Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export interface ITriggerValue {
@@ -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;
@@ -59,6 +46,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private readonly scrollStrategyFactory;
     private readonly dir;
     private readonly parentFormField;
+    private localeService?;
     /** A name for this control that can be used by `kbq-form-field`. */
     controlType: string;
     hiddenItems: number;
@@ -88,14 +76,17 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
      */
     positions: ConnectedPosition[];
     options: QueryList<KbqTreeOption>;
+    /**
+     * Trigger - is a clickable field to open select dropdown panel
+     */
     trigger: ElementRef;
     panel: ElementRef;
     overlayDir: CdkConnectedOverlay;
     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;
@@ -176,7 +167,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     /** Emits whenever the component is destroyed. */
     private readonly destroy;
     private tempValues;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, scrollStrategyFactory: any, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, scrollStrategyFactory: any, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
@@ -228,6 +219,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     get triggerValue(): string;
     get empty(): boolean;
     isRtl(): boolean;
+    get firstSelected(): any;
     handleKeydown(event: KeyboardEvent): void;
     onFocus(): void;
     /**
@@ -248,6 +240,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     /** Invoked when an option is clicked. */
     onRemoveSelectedOption(selectedOption: any, $event: any): void;
     calculateHiddenItems(): void;
+    private updateLocaleParams;
     private closingActions;
     private getTotalItemsWidthInMatcher;
     private getTotalVisibleItems;
@@ -283,7 +276,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     /** Comparison function to specify which option is displayed. Defaults to object equality. */
     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 ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { optional: 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-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,11 +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 +11,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 @@
-$z-index-loader-overlay: 10;