@koobiq/components 16.0.0-beta.9 → 17.0.0-beta.2

package/scrollbar/scrollbar.directive.d.ts

@@ -0,0 +1,47 @@
+import { NgZone, OnDestroy } from '@angular/core';
+import { KbqScrollbarEvents, KbqScrollbarOptions, KbqScrollbarTarget } from './scrollbar.types';
+import { OverlayScrollbars } from 'overlayscrollbars';
+import * as i0 from "@angular/core";
+export declare class KbqScrollbarDirective implements OnDestroy {
+    private ngZone;
+    private scrollbarConfig?;
+    private requestDefer;
+    private cancelDefer;
+    private _options;
+    set options(value: KbqScrollbarOptions);
+    /** Scrollbar behavior customization object */
+    get options(): KbqScrollbarOptions | undefined;
+    private _events?;
+    set events(value: KbqScrollbarEvents);
+    get events(): KbqScrollbarEvents | undefined;
+    /** Whether to defer the initialization to a point in time when the browser is idle. (or to the next frame if `window.requestIdleCallback` is not supported) */
+    defer?: boolean | IdleRequestOptions;
+    scrollbarInstance?: OverlayScrollbars;
+    constructor(ngZone: NgZone, scrollbarConfig?: {
+        paddingAbsolute?: boolean | undefined;
+        showNativeOverlaidScrollbars?: boolean | undefined;
+        update?: {
+            elementEvents?: [elementSelector: string, eventNames: string][] | null | undefined;
+            debounce?: number | [timeout: number, maxWait: number] | null | undefined;
+            attributes?: string[] | null | undefined;
+            ignoreMutation?: ((mutation: MutationRecord) => any) | null | undefined;
+        } | undefined;
+        overflow?: {
+            x?: import("overlayscrollbars").OverflowBehavior | undefined;
+            y?: import("overlayscrollbars").OverflowBehavior | undefined;
+        } | undefined;
+        scrollbars?: {
+            theme?: string | null | undefined;
+            visibility?: import("overlayscrollbars").ScrollbarsVisibilityBehavior | undefined;
+            autoHide?: import("overlayscrollbars").ScrollbarsAutoHideBehavior | undefined;
+            autoHideDelay?: number | undefined;
+            dragScroll?: boolean | undefined;
+            clickScroll?: boolean | undefined;
+            pointers?: string[] | null | undefined;
+        } | undefined;
+    } | undefined);
+    initialize(target: KbqScrollbarTarget): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqScrollbarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqScrollbarDirective, "[kbqScrollbar]", never, { "options": { "alias": "options"; "required": false; }; "events": { "alias": "events"; "required": false; }; "defer": { "alias": "defer"; "required": false; }; }, {}, never, never, false, never>;
+}

package/scrollbar/scrollbar.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./scrollbar.component";
+import * as i2 from "./scrollbar.directive";
+export declare class KbqScrollbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqScrollbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqScrollbarModule, [typeof i1.KbqScrollbar, typeof i2.KbqScrollbarDirective], never, [typeof i1.KbqScrollbar, typeof i2.KbqScrollbarDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqScrollbarModule>;
+}

package/scrollbar/scrollbar.types.d.ts

@@ -0,0 +1,32 @@
+import { EventListeners, EventListenerArgs, InitializationTarget, PartialOptions } from 'overlayscrollbars';
+import { InjectionToken, Provider } from '@angular/core';
+export type KbqScrollbarEvents = EventListeners;
+export type KbqScrollbarEventListenerArgs = EventListenerArgs;
+export type KbqScrollbarOptions = PartialOptions;
+export type KbqScrollbarTarget = InitializationTarget;
+export declare const KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG: KbqScrollbarOptions;
+export declare const KBQ_SCROLLBAR_CONFIG: InjectionToken<{
+    paddingAbsolute?: boolean | undefined;
+    showNativeOverlaidScrollbars?: boolean | undefined;
+    update?: {
+        elementEvents?: [elementSelector: string, eventNames: string][] | null | undefined;
+        debounce?: number | [timeout: number, maxWait: number] | null | undefined;
+        attributes?: string[] | null | undefined;
+        ignoreMutation?: ((mutation: MutationRecord) => any) | null | undefined;
+    } | undefined;
+    overflow?: {
+        x?: import("overlayscrollbars").OverflowBehavior | undefined;
+        y?: import("overlayscrollbars").OverflowBehavior | undefined;
+    } | undefined;
+    scrollbars?: {
+        theme?: string | null | undefined;
+        visibility?: import("overlayscrollbars").ScrollbarsVisibilityBehavior | undefined;
+        autoHide?: import("overlayscrollbars").ScrollbarsAutoHideBehavior | undefined;
+        autoHideDelay?: number | undefined;
+        dragScroll?: boolean | undefined;
+        clickScroll?: boolean | undefined;
+        pointers?: string[] | null | undefined;
+    } | undefined;
+}>;
+/** Default scroll behavior */
+export declare const KBQ_SCROLLBAR_OPTIONS_DEFAULT_CONFIG_PROVIDER: Provider;

package/select/select.component.d.ts

@@ -1,6 +1,6 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
-import { CdkConnectedOverlay, ConnectedPosition } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay';
 import { CdkVirtualForOf } from '@angular/cdk/scrolling';
 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';
@@ -67,6 +67,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private readonly _changeDetectorRef;
     private readonly _ngZone;
     private readonly _renderer;
+    private overlayContainer;
     private readonly _dir;
     private readonly parentFormField;
     private readonly scrollStrategyFactory;
@@ -196,7 +197,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private visibleChanges;
     /** Emits whenever the component is destroyed. */
     private readonly destroy;
-    constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
+    constructor(_changeDetectorRef: ChangeDetectorRef, _ngZone: NgZone, _renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, elementRef: ElementRef, overlayContainer: OverlayContainer, _dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, scrollStrategyFactory: any, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
@@ -327,7 +328,7 @@ export declare class KbqSelect extends KbqSelectMixinBase implements AfterConten
     private _compareWith;
     private getTotalVisibleItems;
     private buildTriggerClone;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "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; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "options", "optionGroups"], ["kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "kbq-select-matcher, [kbq-select-matcher]", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], false, never>;
 }
 export {};

package/select/select.scss

@@ -25,9 +25,16 @@ $tokens: meta.module-variables(tokens) !default;
     @extend %kbq-select-content;
 
     &:not(:has(> .kbq-select__no-options-message)) .cdk-virtual-scroll-viewport {
+        min-height: calc(
+            var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height))
+        );
         max-height: calc(
             var(--kbq-select-panel-size-max-height, map.get($tokens, select-panel-size-max-height))
         );
+
+        &.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
+            max-width: 100%;
+        }
     }
 }
 

package/sidepanel/sidepanel-animations.d.ts

@@ -5,10 +5,10 @@ export declare enum KbqSidepanelAnimationState {
     Visible = "visible",
     Hidden = "hidden"
 }
-export declare const mcSidepanelTransformAnimation: Record<KbqSidepanelPosition, {
+export declare const kbqSidepanelTransformAnimation: Record<KbqSidepanelPosition, {
     in: string;
     out: string;
 }>;
-export declare const mcSidepanelAnimations: {
+export declare const kbqSidepanelAnimations: {
     readonly sidepanelState: AnimationTriggerMetadata;
 };

package/sidepanel/sidepanel-directives.d.ts

@@ -10,12 +10,12 @@ export declare class KbqSidepanelClose implements OnInit, OnChanges {
     private elementRef;
     private sidepanelService;
     sidepanelResult: any;
-    mcSidepanelClose: any;
+    kbqSidepanelClose: any;
     constructor(sidepanelRef: KbqSidepanelRef, elementRef: ElementRef<HTMLElement>, sidepanelService: KbqSidepanelService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelClose, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelClose, "button[kbq-sidepanel-close], button[mcSidepanelClose]", never, { "sidepanelResult": { "alias": "kbq-sidepanel-close"; "required": false; }; "mcSidepanelClose": { "alias": "mcSidepanelClose"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelClose, "button[kbq-sidepanel-close], button[kbqSidepanelClose]", never, { "sidepanelResult": { "alias": "kbq-sidepanel-close"; "required": false; }; "kbqSidepanelClose": { "alias": "kbqSidepanelClose"; "required": false; }; }, {}, never, never, false, never>;
 }
 /**
  * Header of a sidepanel.
@@ -30,19 +30,19 @@ export declare class KbqSidepanelHeader {
  */
 export declare class KbqSidepanelBody {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelBody, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelBody, "kbq-sidepanel-body, [kbq-sidepanel-body], mcSidepanelBody", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelBody, "kbq-sidepanel-body, [kbq-sidepanel-body], kbqSidepanelBody", never, {}, {}, never, never, false, never>;
 }
 /**
  * Footer of a sidepanel.
  */
 export declare class KbqSidepanelFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelFooter, "kbq-sidepanel-footer, [kbq-sidepanel-footer], mcSidepanelFooter", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelFooter, "kbq-sidepanel-footer, [kbq-sidepanel-footer], kbqSidepanelFooter", never, {}, {}, never, never, false, never>;
 }
 /**
  * Actions block of a sidepanel footer.
  */
 export declare class KbqSidepanelActions {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelActions, "kbq-sidepanel-actions, [kbq-sidepanel-actions], mcSidepanelActions", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSidepanelActions, "kbq-sidepanel-actions, [kbq-sidepanel-actions], kbqSidepanelActions", never, {}, {}, never, never, false, never>;
 }

package/splitter/_splitter-theme.scss

@@ -4,28 +4,29 @@
 
 
 @mixin kbq-splitter-theme($theme) {
-    $background: map.get($theme, background);
+    $background: map.get(map.get($theme, states), background);
 
     .kbq-gutter {
         cursor: col-resize;
 
         &:hover,
         &.kbq-gutter_dragged {
-            background-color: map.get($background, background-disabled);
+            background-color: map.get($background, ghost-hover);
         }
 
         &.kbq-gutter_vertical {
             cursor: row-resize;
         }
 
+        // todo
         &[disabled] {
-            background-color: kbq-color($background, overlay-disabled);
+            background-color: kbq-color($background, disabled);
 
             cursor: default;
         }
     }
 
     .kbq-gutter-ghost {
-        background: kbq-color($background, overlay-disabled);
+        background: kbq-color($background, ghost-active);
     }
 }

package/tabs/_tabs-common.scss

@@ -54,7 +54,7 @@ $tokens: meta.module-variables(tokens) !default;
         z-index: 1;
     }
 
-    &[disabled] {
+    &.kbq-disabled {
         pointer-events: none;
     }
 

package/tabs/_tabs-theme.scss

@@ -16,7 +16,7 @@
 @mixin kbq-tab-item-style($tab-item) {
     @include kbq-tab-item-state(map.get($tab-item, default));
 
-    &:hover:not([disabled]) {
+    &:hover:not(.kbq-disabled) {
         @include kbq-tab-item-state(map.get($tab-item, hover));
     }
 
@@ -32,7 +32,7 @@
         border-color: map.get(map.get($tab-item, focused), border-color);
     }
 
-    &[disabled] {
+    &.kbq-disabled {
         @include kbq-tab-item-state(map.get($tab-item, disabled));
 
         &.kbq-selected {

package/tags/tag-input.d.ts

@@ -4,6 +4,7 @@ import { KbqTrim } from '@koobiq/components/form-field';
 import { KbqTagsDefaultOptions } from './tag-default-options';
 import { KbqTagList } from './tag-list.component';
 import { KbqTagTextControl } from './tag-text-control';
+import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
 import * as i0 from "@angular/core";
 /** Represents an input event on a `kbqTagInput`. */
 export interface KbqTagInputEvent {
@@ -26,6 +27,7 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private defaultOptions;
     private trimDirective;
     ngControl: NgControl;
+    autocompleteTrigger?: KbqAutocompleteTrigger | undefined;
     /** Whether the control is focused. */
     focused: boolean;
     /**
@@ -39,6 +41,8 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private _separators;
     /** Emitted when a tag is to be added. */
     tagEnd: EventEmitter<KbqTagInputEvent>;
+    /** A value indicating whether allow/prevent tags duplication  */
+    distinct: boolean;
     /** The input's placeholder text. */
     placeholder: string;
     /** Unique id for the input. */
@@ -62,14 +66,15 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private oneSymbolWidth;
     /** The native input element to which this directive is attached. */
     private inputElement;
-    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, defaultOptions: KbqTagsDefaultOptions, trimDirective: KbqTrim, ngControl: NgControl);
+    constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, defaultOptions: KbqTagsDefaultOptions, trimDirective: KbqTrim, ngControl: NgControl, autocompleteTrigger?: KbqAutocompleteTrigger | undefined);
     ngOnChanges(): void;
     onKeydown(event: KeyboardEvent): void;
     /** Checks to see if the blur should emit the (tagEnd) event. */
-    blur(): void;
+    blur(event: FocusEvent): void;
     triggerValidation(): void;
     /** Checks to see if the (tagEnd) event needs to be emitted. */
     emitTagEnd(): void;
+    get hasDuplicates(): boolean;
     onInput(): void;
     onPaste($event: ClipboardEvent): void;
     updateInputWidth(): void;
@@ -82,6 +87,6 @@ export declare class KbqTagInput implements KbqTagTextControl, OnChanges {
     private setDefaultInputWidth;
     /** Checks whether a keycode is one of the configured separators. */
     private isSeparatorKey;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; self: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTagInput, "input[kbqTagInputFor]", ["kbqTagInput", "kbqTagInputFor"], { "separatorKeyCodes": { "alias": "kbqTagInputSeparatorKeyCodes"; "required": false; }; "distinct": { "alias": "distinct"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tagList": { "alias": "kbqTagInputFor"; "required": false; }; "addOnBlur": { "alias": "kbqTagInputAddOnBlur"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "tagEnd": "kbqTagInputTokenEnd"; }, never, never, false, never>;
 }

package/tags/tag-list.scss

@@ -11,6 +11,10 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: row;
 
     box-sizing: border-box;
+
+    &:focus-visible {
+        outline: none;
+    }
 }
 
 .kbq-tag-input {

package/textarea/textarea.component.d.ts

@@ -25,6 +25,7 @@ export declare class KbqTextareaBase {
 export declare const KbqTextareaMixinBase: CanUpdateErrorStateCtor & typeof KbqTextareaBase;
 export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqFormFieldControl<any>, OnInit, OnChanges, OnDestroy, DoCheck, CanUpdateErrorState {
     protected elementRef: ElementRef;
+    private parent;
     private ngZone;
     canGrow: boolean;
     /** An object used to control when error messages are shown. */
@@ -83,14 +84,14 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
     private lineHeight;
     private freeRowsHeight;
     private minHeight;
-    constructor(elementRef: ElementRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any, ngZone: NgZone);
+    constructor(elementRef: ElementRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any, parent: any, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
     ngDoCheck(): void;
     onBlur(): void;
     /** Grow textarea height to avoid vertical scroll  */
-    grow(): void;
+    grow: () => void;
     /** Focuses the textarea. */
     focus(): void;
     /** Callback for the cases where the focused state of the textarea changes. */
@@ -109,6 +110,6 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
     protected dirtyCheckNativeValue(): void;
     /** Checks whether the textarea is invalid based on the native validation. */
     protected isBadInput(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextarea, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextarea, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, { optional: true; host: true; }, null]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTextarea, "textarea[kbqTextarea]", ["kbqTextarea"], { "canGrow": { "alias": "canGrow"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }

package/timezone/_timezone-option-theme.scss

@@ -15,6 +15,10 @@
     .kbq-timezone-option__cities {
         color: map.get($timezone, caption);
     }
+
+    .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
+        color: map.get($timezone, optgroup-label);
+    }
 }
 
 @mixin kbq-timezone-option-typography($config) {
@@ -31,4 +35,8 @@
     .kbq-timezone-option__cities {
         @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-caption));
     }
+
+    .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, timezone-option-font-optgroup-label));
+    }
 }

package/timezone/timezone-option.component.scss

@@ -23,6 +23,10 @@ $tokens: meta.module-variables(tokens) !default;
     min-width: 0;
 }
 
+.kbq-timezone-option__offset-wrapper {
+    min-width: 77px;
+}
+
 .kbq-timezone-option__cities {
     display: -webkit-box;
     -webkit-box-orient: vertical;

package/timezone/timezone-select.component.scss

@@ -0,0 +1,13 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-timezone-select__panel.kbq-select__panel {
+    .kbq-optgroup-label {
+        display: block;
+        padding: map.get($tokens, timezone-option-size-optgroup-label-padding);
+    }
+}

package/timezone/timezone.utils.d.ts

@@ -7,7 +7,11 @@ export declare function parseOffset(offset: string): number;
  * Grouping timezones by countries
  */
 export declare function getZonesGroupedByCountry(data: KbqTimezoneZone[], otherCountriesLabel?: string, priorityCountry?: string): KbqTimezoneGroup[];
+export declare function offset(value: any): string;
 export declare function offsetFormatter(value: string): string;
+export declare function offsetFormatterAsObject(value: string): {
+    [UTC: string]: string;
+};
 /**
  * Comparator for timezone sorting. Sort by offset and country name
  */

package/timezone/utc-offset.pipe.d.ts

@@ -1,7 +1,9 @@
 import { PipeTransform } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class UtcOffsetPipe implements PipeTransform {
-    transform(value: string): string;
+    transform(value: string): {
+        [UTC: string]: string;
+    };
     static ɵfac: i0.ɵɵFactoryDeclaration<UtcOffsetPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<UtcOffsetPipe, "utcOffset", false>;
 }

package/toast/toast-animations.d.ts

@@ -1,5 +1,5 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
-export declare const mcToastAnimations: {
+export declare const kbqToastAnimations: {
     readonly toastState: AnimationTriggerMetadata;
 };
 export declare const toastState: AnimationTriggerMetadata;

package/toast/toast-container.component.scss

@@ -2,7 +2,6 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-@use '../core/styles/variables';
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -13,12 +12,5 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     align-items: flex-end;
 
-    gap: 12px;
-}
-
-.cdk-overlay-container {
-    .kbq-toast-overlay,
-    .kbq-toast-overlay ~ *:not(.kbq-modal-overlay, .kbq-sidepanel-overlay, .cdk-overlay-backdrop) {
-        z-index: variables.$z-index-notification;
-    }
+    gap: map.get($tokens, size-m);
 }

package/toast/toast.component.scss

@@ -1,8 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/variables' as *;
-
 @use '../core/styles/tokens';
 
 
@@ -12,8 +10,6 @@ $tokens: meta.module-variables(tokens) !default;
     display: flex;
     box-sizing: border-box;
 
-    z-index: $z-index-toast;
-
     min-width: var(--kbq-toast-size-container-min-width, map.get($tokens, toast-size-container-min-width));
     max-width: 480px;
 

package/toast/toast.service.d.ts

@@ -1,5 +1,5 @@
 import { AnimationEvent } from '@angular/animations';
-import { Overlay } from '@angular/cdk/overlay';
+import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
 import { Injector, ComponentRef, TemplateRef, EmbeddedViewRef, InjectionToken } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import { KbqToastComponent } from './toast.component';
@@ -10,6 +10,7 @@ export declare const defaultToastConfig: KbqToastConfig;
 export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> {
     private overlay;
     private injector;
+    private overlayContainer;
     private toastFactory;
     private toastConfig;
     get toasts(): ComponentRef<T>[];
@@ -22,7 +23,7 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     private portal;
     private toastsDict;
     private templatesDict;
-    constructor(overlay: Overlay, injector: Injector, toastFactory: any, toastConfig: KbqToastConfig);
+    constructor(overlay: Overlay, injector: Injector, overlayContainer: OverlayContainer, toastFactory: any, toastConfig: KbqToastConfig);
     show(data: KbqToastData, duration?: number, onTop?: boolean): {
         ref: ComponentRef<T>;
         id: number;
@@ -38,6 +39,7 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     private updateTTLAfterDelete;
     private addRemoveTimer;
     private prepareContainer;
+    private toTop;
     private createOverlay;
     private getPositionStrategy;
     private getTopCenter;
@@ -48,6 +50,6 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     private getBottomRight;
     private getCenter;
     private getGlobalOverlayPosition;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastService<any>, [null, null, null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqToastService<any>>;
 }

package/toast/toast.type.d.ts

@@ -16,6 +16,7 @@ export declare class KbqToastData {
     title?: string | TemplateRef<any>;
     style?: KbqToastStyle | string;
     icon?: TemplateRef<any> | boolean;
+    iconClass?: string;
     caption?: string | TemplateRef<any>;
     content?: string | TemplateRef<any>;
     actions?: TemplateRef<any>;

package/tooltip/tooltip.component.d.ts

@@ -70,7 +70,7 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     getOverlayHandleComponentType(): Type<KbqTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "mcEnterDelay"; "required": false; }; "leaveDelay": { "alias": "mcLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, false, never>;
 }
 export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;

package/tooltip/tooltip.scss

@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/variables' as *;
 @use '../core/pop-up/pop-up';
 
 @use '../core/styles/tokens';
@@ -22,8 +21,6 @@ $trigger-margin: 8px;
 
     border-radius: var(--kbq-tooltip-size-border-radius, map.get($tokens, tooltip-size-border-radius));
 
-    z-index: $z-index-tooltip;
-
     white-space: pre-line;
 
     @include pop-up.popup-margins(kbq-tooltip, $trigger-margin);

package/tree/_tree-theme.scss

@@ -12,9 +12,10 @@
         color: map.get($state, text);
     }
 
-    .kbq-icon {
-        color: map.get($state, icon);
-    }
+    // todo выглядит как баг
+    //.kbq-icon {
+    //    color: map.get($state, icon);
+    //}
 
     .kbq-tree-node-toggle .kbq-icon {
         color: map.get($state, tree-toggle);
@@ -57,8 +58,7 @@
             }
         }
 
-        &.kbq-disabled,
-        &[disabled] {
+        &.kbq-disabled {
             @include kbq-tree-option(map.get($tree-item, disabled));
 
             & .kbq-icon {

package/tree/control/base-tree-control.d.ts

@@ -7,7 +7,7 @@ export declare abstract class BaseTreeControl<T> implements TreeControl<T> {
     /** A selection model with multi-selection to track expansion status. */
     expansionModel: SelectionModel<T>;
     filterModel: SelectionModel<T>;
-    filterValue: BehaviorSubject<string | null>;
+    filterValue: BehaviorSubject<string | T[] | null>;
     /** Get depth of a given data node, return the level number. This is for flat tree node. */
     getLevel: (dataNode: T) => number;
     /**

package/tree/control/flat-tree-control.d.ts

@@ -1,4 +1,5 @@
 import { BaseTreeControl } from './base-tree-control';
+import { FlatTreeControlFilter } from './flat-tree-control.filters';
 export declare function defaultCompareValues(firstValue: string, secondValue: string): boolean;
 export declare function defaultCompareViewValues(firstViewValue: string, secondViewValue: string): boolean;
 /** Flat tree control. Able to expand/collapse a subtree recursively for flattened tree. */
@@ -16,6 +17,7 @@ export declare class FlatTreeControl<T> extends BaseTreeControl<T> {
     /** isDisabled will be used to determine if the node is disabled. */
     isDisabled: (dataNode: T) => boolean;
     expandedItemsBeforeFiltration: T[];
+    private filters;
     /** Construct with flat tree data node functions getLevel, isExpandable, getValue and getViewValue. */
     constructor(getLevel: (dataNode: T) => number, isExpandable: (dataNode: T) => boolean, 
     /** getValue will be used to determine if the tree contains value or not. Used in method hasValue */
@@ -28,6 +30,8 @@ export declare class FlatTreeControl<T> extends BaseTreeControl<T> {
     compareViewValues?: (firstViewValue: any, secondViewValue: any) => boolean, 
     /** isDisabled will be used to determine if the node is disabled. */
     isDisabled?: (dataNode: T) => boolean);
+    getFilters(): FlatTreeControlFilter<T>[];
+    setFilters(...filters: FlatTreeControlFilter<T>[]): void;
     /**
      * Gets a list of the data node's subtree of descendent data nodes.
      *
@@ -44,10 +48,8 @@ export declare class FlatTreeControl<T> extends BaseTreeControl<T> {
     expandAll(): void;
     getParents(node: any, result: T[]): T[];
     hasValue(value: string): T | undefined;
-    filterNodes(value: string): void;
+    filterNodes(value?: string | null): void;
     private updateFilterValue;
-    private expandDataNode;
     private saveExpansionState;
     private restoreExpansionState;
-    private hasFilteredDescendant;
 }