@koobiq/components 17.0.0-rc.9 → 17.0.0

package/toast/toast.service.d.ts

@@ -1,9 +1,9 @@
 import { AnimationEvent } from '@angular/animations';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
-import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken, NgZone, OnDestroy } from '@angular/core';
+import { ComponentRef, EmbeddedViewRef, InjectionToken, Injector, NgZone, OnDestroy, TemplateRef } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { KbqToastComponent } from './toast.component';
-import { KbqToastData, KbqToastConfig } from './toast.type';
+import { KbqToastConfig, KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
 export declare const KBQ_TOAST_FACTORY: InjectionToken<unknown>;
 export declare const defaultToastConfig: KbqToastConfig;

package/toast/toast.type.d.ts

@@ -1,4 +1,4 @@
-import { TemplateRef, InjectionToken } from '@angular/core';
+import { InjectionToken, TemplateRef } from '@angular/core';
 export declare enum KbqToastStyle {
     Contrast = "contrast",
     Success = "success",

package/toggle/_toggle-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-toggle-state($component, $type, $state-name) {
     $state: map.get($component, $type, $state-name);
     $base: toggle-#{$type}-#{$state-name};
@@ -43,10 +42,11 @@
                 toggle-#{$type}-states-focused-focus-outline,
                 map.get($component, $type, states-focused, focus-outline)
             );
-            box-shadow: 0 0 0.1px 1px kbq-css-variable(
-                toggle-#{$type}-states-focused-focus-outline,
-                map.get($component, $type, states-focused, focus-outline)
-            );
+            box-shadow: 0 0 0.1px 1px
+                kbq-css-variable(
+                    toggle-#{$type}-states-focused-focus-outline,
+                    map.get($component, $type, states-focused, focus-outline)
+                );
         }
     }
 
@@ -58,10 +58,11 @@
                 toggle-#{$type}-states-checked-focused-focus-outline,
                 map.get($component, $type, states-checked-focused, focus-outline)
             );
-            box-shadow: 0 0 0.1px 1px kbq-css-variable(
-                toggle-#{$type}-states-checked-focused-focus-outline,
-                map.get($component, $type, states-checked-focused, focus-outline)
-            );
+            box-shadow: 0 0 0.1px 1px
+                kbq-css-variable(
+                    toggle-#{$type}-states-checked-focused-focus-outline,
+                    map.get($component, $type, states-checked-focused, focus-outline)
+                );
         }
     }
 

package/toggle/public-api.d.ts

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

package/toggle/toggle.component.d.ts

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
@@ -15,7 +15,7 @@ export declare class KbqToggleChange {
     source: KbqToggleComponent;
     checked: boolean;
 }
-export declare class KbqToggleComponent extends KbqToggleMixinBase implements ControlValueAccessor, CanColor, CanDisable, HasTabIndex {
+export declare class KbqToggleComponent extends KbqToggleMixinBase implements ControlValueAccessor, CanColor, CanDisable, HasTabIndex, OnDestroy {
     elementRef: ElementRef;
     private _focusMonitor;
     private _changeDetectorRef;

package/toggle/toggle.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-toggle {

package/tooltip/_tooltip-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-tooltip-color($component, $style-name) {
     $style: map.get($component, $style-name);
 

package/tooltip/public-api.d.ts

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

package/tooltip/tooltip.component.d.ts

@@ -1,8 +1,8 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher, ScrollStrategy, OverlayConfig } from '@angular/cdk/overlay';
+import { Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, TemplateRef, Type, ViewContainerRef } from '@angular/core';
-import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
+import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare enum TooltipModifier {
     Default = "default",

package/tooltip/tooltip.scss

@@ -5,10 +5,8 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 $trigger-margin: 8px;
 
-
 .kbq-tooltip__inner {
     border-radius: kbq-css-variable(tooltip-size-border-radius);
     word-break: break-word;
@@ -26,9 +24,7 @@ $trigger-margin: 8px;
     max-width: kbq-css-variable(tooltip-size-max-width);
 
     .kbq-tooltip__inner {
-        padding:
-            kbq-css-variable(tooltip-size-padding-vertical)
-            kbq-css-variable(tooltip-size-padding-horizontal);
+        padding: kbq-css-variable(tooltip-size-padding-vertical) kbq-css-variable(tooltip-size-padding-horizontal);
     }
 }
 

package/tree/_tree-theme.scss

@@ -5,7 +5,6 @@
 @use '../core/styles/typography/typography-utils' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-tree-option($component, $state-name) {
     $state: map.get($component, $state-name);
 
@@ -28,7 +27,6 @@
     }
 }
 
-
 @mixin kbq-tree-theme($theme) {
     .kbq-tree-selection:focus {
         outline: none;
@@ -46,7 +44,8 @@
         &.kbq-focused,
         &.kbq-active {
             border-color: kbq-css-variable(
-                tree-states-focused-focus-outline, map.get($tree-item, states-focused, focus-outline)
+                tree-states-focused-focus-outline,
+                map.get($tree-item, states-focused, focus-outline)
             );
         }
 

package/tree/public-api.d.ts

@@ -1,16 +1,16 @@
-export * from './tree.module';
-export * from './tree-base';
-export * from './outlet';
-export * from './tree';
-export * from './node';
-export * from './padding.directive';
-export * from './toggle';
-export * from './tree-selection.component';
-export * from './tree-option.component';
 export * from './control/base-tree-control';
-export * from './control/tree-control';
 export * from './control/flat-tree-control';
 export * from './control/flat-tree-control.filters';
 export * from './control/nested-tree-control';
+export * from './control/tree-control';
 export * from './data-source/flat-data-source';
 export * from './data-source/nested-data-source';
+export * from './node';
+export * from './outlet';
+export * from './padding.directive';
+export * from './toggle';
+export * from './tree';
+export * from './tree-base';
+export * from './tree-option.component';
+export * from './tree-selection.component';
+export * from './tree.module';

package/tree/toggle.scss

@@ -3,7 +3,6 @@
 
 @use '../core/styles/common/tokens' as *;
 
-
 .kbq-tree-node-toggle {
     display: flex;
     align-items: center;

package/tree/tree-base.d.ts

@@ -1,5 +1,5 @@
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
-import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, OnInit, QueryList, ViewContainerRef, TrackByFunction } from '@angular/core';
+import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, OnInit, QueryList, TrackByFunction, ViewContainerRef } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { TreeControl } from './control/tree-control';

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

@@ -1,5 +1,5 @@
 import { FocusOrigin } from '@angular/cdk/a11y';
-import { ChangeDetectorRef, EventEmitter, ElementRef, InjectionToken, AfterContentInit, NgZone } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone } from '@angular/core';
 import { KbqOptionActionComponent, KbqPseudoCheckbox, KbqPseudoCheckboxState, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';

package/tree/tree-option.scss

@@ -5,10 +5,8 @@
 @use '../core/styles/tokens';
 @use '../core/styles/common/tokens' as *;
 
-
 $tokens: meta.module-variables(tokens) !default;
 
-
 .kbq-tree-option {
     @include common.kbq-no-select;
 
@@ -31,16 +29,22 @@ $tokens: meta.module-variables(tokens) !default;
     border-color: transparent;
 
     padding-top: calc(
-        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
     padding-right: calc(
-        var(--kbq-tree-size-container-padding-right, $padding-right) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-right, $padding-right) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
     padding-bottom: calc(
-        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) -
-        var(--kbq-tree-size-container-focus-outline-width, $outline-width)
+        var(--kbq-tree-size-container-padding-vertical, $padding-vertical) - var(
+                --kbq-tree-size-container-focus-outline-width,
+                $outline-width
+            )
     );
 
     gap: kbq-css-variable(tree-size-container-content-gap-horizontal);

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

@@ -1,6 +1,6 @@
 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 { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, IterableDiffer, IterableDiffers, OnDestroy, QueryList, ViewContainerRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
 import { CanDisable, HasTabIndex, MultipleMode } from '@koobiq/components/core';
@@ -36,7 +36,7 @@ interface SelectionModelOption {
     id: number | string;
     value: string;
 }
-export declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueAccessor, AfterContentInit, CanDisable, HasTabIndex {
+export declare class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueAccessor, AfterContentInit, CanDisable, HasTabIndex, OnDestroy {
     private elementRef;
     private scheduler;
     private clipboard;
@@ -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

@@ -6,7 +6,6 @@
 @use '../core/styles/common/popup' as *;
 @use '../core/styles/common/tokens' as *;
 
-
 @mixin kbq-tree-select-theme($theme) {
     $foreground: map.get($theme, foreground);
 

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,10 +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, KbqSelectSearch, KbqSelectTrigger, KbqSelectMatcher } 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 { 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 {
@@ -46,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;
@@ -75,6 +76,9 @@ 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;
@@ -163,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;
@@ -236,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;
@@ -271,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 ɵ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.scss

@@ -4,7 +4,6 @@
 @use '../core/styles/common';
 @use '../core/styles/common/select' as *;
 
-
 .kbq-tree-select {
     @extend %kbq-select-base;
 }