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

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/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-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/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/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;
 }

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

@@ -0,0 +1,26 @@
+import { FlatTreeControl } from './flat-tree-control';
+export interface FlatTreeControlFilter<T> {
+    result: T[];
+    handle(value: string | null, prevFilter?: FlatTreeControlFilter<T> | null): T[];
+}
+export declare class FilterByViewValue<T> implements FlatTreeControlFilter<T> {
+    private control;
+    result: T[];
+    constructor(control: FlatTreeControl<T>);
+    handle(value: string | null): T[];
+}
+export declare class FilterParentsForNodes<T> implements FlatTreeControlFilter<T> {
+    private control;
+    result: T[];
+    constructor(control: FlatTreeControl<T>);
+    handle(_: any, prevFilter: FlatTreeControlFilter<T>): T[];
+}
+export declare class FilterByValues<T> implements FlatTreeControlFilter<T> {
+    private control;
+    result: T[];
+    private values;
+    constructor(control: FlatTreeControl<T>);
+    handle(_: any, prevFilter?: FlatTreeControlFilter<T>): T[];
+    setValues: (values: string[]) => void;
+    getValues(): string[];
+}

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

@@ -11,7 +11,7 @@ export interface TreeControl<T> {
     /** The expansion model */
     expansionModel: SelectionModel<T>;
     filterModel: SelectionModel<T>;
-    filterValue: BehaviorSubject<string | null>;
+    filterValue: BehaviorSubject<T[] | string | null>;
     /** Get depth of a given data node, return the level number. This is for flat tree node. */
     getLevel(dataNode: T): number;
     /**

package/tree/public-api.d.ts

@@ -10,6 +10,7 @@ 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 './data-source/flat-data-source';
 export * from './data-source/nested-data-source';

package/tree/tree-option.scss

@@ -62,7 +62,7 @@ $tokens: meta.module-variables(tokens) !default;
         outline: none;
     }
 
-    &:not([disabled]) {
+    &:not(.kbq-disabled) {
         cursor: pointer;
     }
 
@@ -70,9 +70,9 @@ $tokens: meta.module-variables(tokens) !default;
         display: none;
     }
 
-    &:not([disabled]):hover,
-    &:not([disabled]).kbq-focused,
-    &:not([disabled]).kbq-action-button-focused {
+    &:not(.kbq-disabled):hover,
+    &:not(.kbq-disabled).kbq-focused,
+    &:not(.kbq-disabled).kbq-action-button-focused {
         & .kbq-option-action {
             display: flex;
         }

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

@@ -5,7 +5,7 @@ import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanDisable, CanUpdateErrorState, ErrorStateMatcher, HasTabIndex, CanDisableCtor, HasTabIndexCtor, CanUpdateErrorStateCtor } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqSelectMatcher, KbqSelectSearch } from '@koobiq/components/select';
+import { KbqSelectSearch } from '@koobiq/components/select';
 import { KbqTag } from '@koobiq/components/tags';
 import { KbqTreeSelection, KbqTreeOption } from '@koobiq/components/tree';
 import { Observable, Subject } from 'rxjs';
@@ -24,7 +24,11 @@ export declare class KbqTreeSelectChange {
 }
 export declare class KbqTreeSelectTrigger {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTreeSelectTrigger, "kbq-tree-select-trigger", never, {}, {}, never, never, false, 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>;
@@ -91,7 +95,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     cleaner: KbqCleaner;
     /** User-supplied override of the trigger element. */
     customTrigger: KbqTreeSelectTrigger;
-    customMatcher: KbqSelectMatcher;
+    customMatcher: KbqTreeSelectMatcher;
     customTagTemplateRef: TemplateRef<any>;
     tree: KbqTreeSelection;
     search: KbqSelectSearch;
@@ -280,6 +284,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", "[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-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>;
 }
 export {};

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

@@ -9,6 +9,6 @@ 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.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.KbqTreeSelectFooter, typeof i2.CommonModule]>;
+    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 ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeSelectModule>;
 }

package/form-field/password-hint.scss

@@ -1,11 +0,0 @@
-@use 'sass:meta';
-@use 'sass:map';
-
-@use '../core/styles/tokens';
-
-
-$tokens: meta.module-variables(tokens) !default;
-
-.kbq-password-hint {
-    display: block;
-}