@koobiq/components 18.14.0 → 18.16.0

package/tabs/_tabs-common.scss

@@ -111,4 +111,32 @@
             display: flex;
         }
     }
+
+    .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
+        padding: 8px 0;
+    }
+
+    .kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 1px;
+        background: var(--kbq-line-contrast-less);
+    }
+
+    .kbq-tab-list__active-tab-underline {
+        display: none;
+    }
+
+    .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        height: 3px;
+        border-radius: 2px 2px 0 0;
+        background: var(--kbq-line-contrast);
+        transition: all 0.2s ease-in-out;
+    }
 }

package/tabs/tab-header.scss

@@ -26,34 +26,6 @@
     flex-direction: column;
 }
 
-.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
-    padding: 8px 0;
-}
-
-.kbq-tab-header_underlined:not(.kbq-tab-header_vertical):after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 1px;
-    background: var(--kbq-line-contrast-less);
-}
-
-.kbq-tab-list__active-tab-underline {
-    display: none;
-}
-
-.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__active-tab-underline {
-    display: block;
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    border-radius: 2px 2px 0 0;
-    background: var(--kbq-line-contrast);
-    transition: all 0.2s ease-in-out;
-}
-
 .kbq-tab-header__container {
     display: flex;
     flex-grow: 1;

package/timezone/timezone.module.d.ts

@@ -12,8 +12,9 @@ import * as i10 from "@koobiq/components/icon";
 import * as i11 from "@koobiq/components/tags";
 import * as i12 from "@koobiq/components/tooltip";
 import * as i13 from "@angular/common";
+import * as i14 from "@angular/cdk/a11y";
 export declare class KbqTimezoneModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.OverlayModule, typeof i7.KbqFormFieldModule, typeof i8.KbqOptionModule, typeof i9.KbqSelectModule, typeof i10.KbqIconModule, typeof i11.KbqTagsModule, typeof i12.KbqToolTipModule, typeof i8.KbqHighlightModule, typeof i13.NgClass, typeof i13.KeyValuePipe], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTimezoneModule, [typeof i1.UtcOffsetPipe, typeof i2.CitiesByFilterPipe, typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger], [typeof i6.OverlayModule, typeof i7.KbqFormFieldModule, typeof i8.KbqOptionModule, typeof i9.KbqSelectModule, typeof i10.KbqIconModule, typeof i11.KbqTagsModule, typeof i12.KbqToolTipModule, typeof i8.KbqHighlightModule, typeof i13.NgClass, typeof i13.KeyValuePipe, typeof i14.A11yModule], [typeof i3.KbqTimezoneSelect, typeof i4.KbqTimezoneOption, typeof i5.KbqTimezoneOptionTooltip, typeof i3.KbqTimezoneSelectTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTimezoneModule>;
 }

package/tree/_tree-theme.scss

@@ -24,8 +24,10 @@
 }
 
 @mixin kbq-tree-theme() {
-    .kbq-tree-selection:focus {
-        outline: none;
+    .kbq-tree-selection {
+        &:focus {
+            outline: none;
+        }
     }
 
     .kbq-tree-option {
@@ -35,11 +37,6 @@
             @include kbq-tree-option(states-hover);
         }
 
-        &.kbq-focused,
-        &.kbq-active {
-            border-color: var(--kbq-tree-states-focused-focus-outline-color);
-        }
-
         &.kbq-selected {
             @include kbq-tree-option(states-selected);
 
@@ -56,6 +53,12 @@
             }
         }
     }
+
+    .cdk-keyboard-focused {
+        & .kbq-tree-option.kbq-focused {
+            border-color: var(--kbq-tree-states-focused-focus-outline-color);
+        }
+    }
 }
 
 @mixin kbq-tree-typography() {

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

@@ -1,6 +1,7 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 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, AfterViewInit, 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,10 +37,11 @@ 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, AfterViewInit, OnDestroy, CanDisable, HasTabIndex {
     private elementRef;
     private scheduler;
     private clipboard;
+    protected readonly focusMonitor: FocusMonitor;
     renderedOptions: QueryList<KbqTreeOption>;
     keyManager: FocusKeyManager<KbqTreeOption>;
     selectionModel: SelectionModel<SelectionModelOption>;
@@ -75,7 +77,9 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     private optionFocusSubscription;
     private optionBlurSubscription;
     constructor(elementRef: ElementRef, scheduler: AsyncScheduler, differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
+    ngAfterViewInit(): void;
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     focus($event: any): void;
     highlightSelectedOption(): void;
     blur(): void;

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

@@ -1,9 +1,9 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
-import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, ViewportRuler } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition } from '@angular/cdk/overlay';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqLocaleService, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
+import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqAbstractSelect, KbqLocaleService, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqTag } from '@koobiq/components/tags';
 import { KbqTreeOption, KbqTreeSelection } from '@koobiq/components/tree';
@@ -46,7 +46,7 @@ export declare class KbqTreeSelectChange {
     constructor(source: KbqTreeSelect, value: any, isUserInput?: boolean);
 }
 /** @docs-private */
-declare class KbqTreeSelectBase {
+declare class KbqTreeSelectBase extends KbqAbstractSelect {
     elementRef: ElementRef;
     defaultErrorStateMatcher: ErrorStateMatcher;
     parentForm: NgForm;
@@ -64,7 +64,6 @@ declare class KbqTreeSelectBase {
 declare const KbqTreeSelectMixinBase: CanDisableCtor & HasTabIndexCtor & CanUpdateErrorStateCtor & typeof KbqTreeSelectBase;
 export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements AfterContentInit, AfterViewInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex, KbqFormFieldControl<KbqTreeOption>, CanUpdateErrorState {
     readonly changeDetectorRef: ChangeDetectorRef;
-    private readonly viewportRuler;
     private readonly ngZone;
     private readonly renderer;
     private readonly scrollStrategyFactory;
@@ -177,8 +176,6 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     protected overlayWidth: string | number;
     /** Min width of the overlay panel. */
     protected overlayMinWidth: string | number;
-    /** Overlay panel class. */
-    protected readonly overlayPanelClass = "kbq-select-overlay";
     /** Origin for the overlay panel. */
     protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
     /**
@@ -199,7 +196,7 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private readonly uid;
     private tempValues;
     private readonly destroyRef;
-    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);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, 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;
@@ -298,16 +295,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private highlightCorrectOption;
     /** Scrolls the active option into view. */
     private scrollActiveOptionIntoView;
-    /**
-     * Sets the x-offset of the overlay panel in relation to the trigger's top start corner.
-     * This must be adjusted to align the selected option text over the trigger text when
-     * the panel opens. Will change based on LTR or RTL text direction. Note that the offset
-     * can't be calculated until the panel has been attached, because we need to know the
-     * content width in order to constrain the panel within the viewport.
-     */
-    private calculateOverlayOffsetX;
     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; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: 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; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "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-matcher, [kbq-select-matcher]", "kbq-select-trigger", "kbq-cleaner", "[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,8 +6,9 @@ import * as i4 from "@koobiq/components/icon";
 import * as i5 from "@koobiq/components/tags";
 import * as i6 from "@koobiq/components/core";
 import * as i7 from "@angular/common";
+import * as i8 from "@angular/cdk/a11y";
 export declare class KbqTreeSelectModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelectModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect], [typeof i2.OverlayModule, typeof i3.KbqTreeModule, typeof i4.KbqIconModule, typeof i5.KbqTagsModule, typeof i6.KbqPseudoCheckboxModule, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult, typeof i7.NgClass, typeof i7.NgTemplateOutlet], [typeof i1.KbqTreeSelect, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTreeSelectModule, [typeof i1.KbqTreeSelect], [typeof i2.OverlayModule, typeof i3.KbqTreeModule, typeof i4.KbqIconModule, typeof i5.KbqTagsModule, typeof i6.KbqPseudoCheckboxModule, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult, typeof i7.NgClass, typeof i7.NgTemplateOutlet, typeof i8.A11yModule], [typeof i1.KbqTreeSelect, typeof i6.KbqSelectSearch, typeof i6.KbqSelectFooter, typeof i6.KbqSelectMatcher, typeof i6.KbqSelectTrigger, typeof i6.KbqSelectSearchEmptyResult]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTreeSelectModule>;
 }