@koobiq/components 18.0.0 → 18.1.0

package/schematics/ng-add/index.js

@@ -25,9 +25,9 @@ function ngAdd(options) {
             }
         }
         // Installing dependencies
-        utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.5");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.0.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.0.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.1.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.1.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.1.0");

package/tabs/_tabs-common.scss

@@ -32,6 +32,25 @@
 
     outline: none;
 
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+        padding-left: 14px;
+        padding-right: 14px;
+    }
+
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-left {
+        padding-left: kbq-difference-series-css-variables(
+            [tabs-size-tab-item-padding-horizontal,
+            tabs-size-tab-item-focus-outline-width]
+        );
+    }
+
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-tab-label_with-icon-right {
+        padding-right: kbq-difference-series-css-variables(
+            [tabs-size-tab-item-padding-horizontal,
+            tabs-size-tab-item-focus-outline-width]
+        );
+    }
+
     &.kbq-selected {
         cursor: default;
     }
@@ -51,10 +70,20 @@
         gap: kbq-css-variable(tabs-size-tab-item-content-gap-horizontal);
     }
 
+    &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical):before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: -10px;
+        bottom: -10px;
+    }
+
     &.kbq-tab-label_vertical {
         justify-content: flex-start;
 
         & .kbq-tab-label__content {
+            display: block;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

package/tabs/_tabs-theme.scss

@@ -19,11 +19,23 @@
         @include kbq-tab-item-state($type, $sub-type, states-hover);
     }
 
+    &.kbq-tab-label_empty {
+        color: kbq-css-variable(foreground-contrast-secondary);
+    }
+
     &.kbq-selected {
         @include kbq-tab-item-state($type, $sub-type, states-selected);
 
+        &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+            background: none;
+        }
+
         &:hover {
             @include kbq-tab-item-state($type, $sub-type, states-selected-hover);
+
+            &.kbq-tab-label_underlined:not(.kbq-tab-label_vertical) {
+                background: none;
+            }
         }
     }
 

package/tabs/tab-group.component.d.ts

@@ -20,6 +20,10 @@ export declare class KbqVerticalTabsCssStyler {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalTabsCssStyler, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqVerticalTabsCssStyler, "kbq-tab-group[vertical], [kbq-tab-nav-bar][vertical]", never, {}, {}, never, never, false, never>;
 }
+export declare class KbqUnderlinedTabsCssStyler {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqUnderlinedTabsCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqUnderlinedTabsCssStyler, "kbq-tab-group[underlined], [kbq-tab-nav-bar][underlined]", never, {}, {}, never, never, false, never>;
+}
 /** A simple change event emitted on focus or selection changes. */
 export declare class KbqTabChangeEvent {
     /** Index of the currently-selected tab. */
@@ -52,6 +56,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private readonly changeDetectorRef;
     readonly resizeStream: Subject<Event>;
     vertical: boolean;
+    underlined: boolean;
     tabs: QueryList<KbqTab>;
     tabBodyWrapper: ElementRef;
     tabHeader: KbqTabHeader;
@@ -91,7 +96,7 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     private resizeSubscription;
     private readonly groupId;
     private readonly resizeDebounceInterval;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, vertical: string, defaultConfig?: IKbqTabsConfig);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, vertical: string, underlined: string, defaultConfig?: IKbqTabsConfig);
     /**
      * After the content is checked, this component knows what tabs have been defined
      * and what the selected index should be. This is where we can know exactly what position
@@ -132,6 +137,6 @@ export declare class KbqTabGroup extends KbqTabGroupMixinBase implements AfterCo
     /** Clamps the given index to the bounds of 0 and the tabs length. */
     private clampTabIndex;
     private getTabIndexToSelect;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "vertical"; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabGroup, [null, null, { attribute: "vertical"; }, { attribute: "underlined"; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabGroup, "kbq-tab-group", ["kbqTabGroup"], { "disabled": { "alias": "disabled"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "onSurface": { "alias": "onSurface"; "required": false; }; "dynamicHeight": { "alias": "dynamicHeight"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "activeTab": { "alias": "activeTab"; "required": false; }; "headerPosition": { "alias": "headerPosition"; "required": false; }; "animationDuration": { "alias": "animationDuration"; "required": false; }; }, { "selectedIndexChange": "selectedIndexChange"; "activeTabChange": "activeTabChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, ["tabs"], never, false, never>;
 }

package/tabs/tab-header.component.d.ts

@@ -23,13 +23,16 @@ export declare class KbqTabHeader extends KbqPaginatedTabHeader {
     readonly changeDetectorRef: ChangeDetectorRef;
     /** The index of the active tab. */
     vertical: boolean;
+    underlined: boolean;
     items: QueryList<KbqTabLabelWrapper>;
     tabListContainer: ElementRef;
     tabList: ElementRef;
     nextPaginator: ElementRef<HTMLElement>;
     previousPaginator: ElementRef<HTMLElement>;
+    get activeTabOffsetWidth(): string;
+    get activeTabOffsetLeft(): string;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, viewportRuler: ViewportRuler, ngZone: NgZone, platform: Platform, dir: Directionality, animationMode?: string);
     itemSelected(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabHeader, [null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTabHeader, "kbq-tab-header", never, { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "underlined": { "alias": "underlined"; "required": false; }; }, { "selectFocusedIndex": "selectFocusedIndex"; "indexFocused": "indexFocused"; }, ["items"], ["*"], false, never>;
 }

package/tabs/tab-header.scss

@@ -24,6 +24,34 @@
     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: rgba(13, 14, 18, 0.12);
+}
+
+.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: rgba(33, 34, 44, 1);
+    transition: all 0.2s ease-in-out;
+}
+
 .kbq-tab-header__pagination {
     @include vendor-prefixes.user-select(none);
 

package/tabs/tabs.module.d.ts

@@ -13,8 +13,9 @@ import * as i11 from "@angular/cdk/scrolling";
 import * as i12 from "@koobiq/components/core";
 import * as i13 from "@koobiq/components/icon";
 import * as i14 from "@koobiq/components/tooltip";
+import * as i15 from "@angular/common";
 export declare class KbqTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.PortalModule, typeof i10.A11yModule, typeof i11.CdkScrollableModule, typeof i12.KbqCommonModule, typeof i13.KbqIconModule, typeof i14.KbqToolTipModule], [typeof i12.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i6.KbqTabBody, typeof i6.KbqTabBodyPortal, typeof i7.KbqTabHeader, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i9.PortalModule, typeof i10.A11yModule, typeof i11.CdkScrollableModule, typeof i12.KbqCommonModule, typeof i13.KbqIconModule, typeof i14.KbqToolTipModule, typeof i15.NgStyle], [typeof i12.KbqCommonModule, typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i5.KbqTabNav, typeof i5.KbqTabLink, typeof i8.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqUnderlinedTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
 }

package/timezone/timezone-option-tokens.scss

@@ -1,6 +1,26 @@
 /* stylelint-disable no-unknown-custom-properties */
 
 .kbq-timezone-select__panel {
+    --kbq-option-size-horizontal-padding: var(--kbq-size-m);
+    --kbq-option-size-height: var(--kbq-size-3xl);
+    --kbq-option-size-border-width: 2px;
+    --kbq-select-size-single-padding-left: var(--kbq-size-m);
+    --kbq-select-size-single-padding-right: var(--kbq-size-xxs);
+    --kbq-select-size-single-padding-vertical: var(--kbq-size-xs);
+    --kbq-select-size-single-content-gap: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-left: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-right: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
+    --kbq-select-panel-size-border-radius: var(--kbq-size-s);
+    --kbq-select-panel-size-max-height: 256px;
+    --kbq-select-panel-font-default-font-size: var(--kbq-typography-text-normal-font-size);
+    --kbq-select-panel-font-default-line-height: var(--kbq-typography-text-normal-line-height);
+    --kbq-select-panel-font-default-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+    --kbq-select-panel-font-default-font-weight: var(--kbq-typography-text-normal-font-weight);
+    --kbq-select-panel-font-default-font-family: var(--kbq-typography-text-normal-font-family);
+    --kbq-select-panel-font-default-text-transform: var(--kbq-typography-text-normal-text-transform);
+    --kbq-select-panel-font-default-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
     --kbq-timezone-option-size-padding: 6px 10px;
     --kbq-timezone-option-size-column-gap: 16px;
     --kbq-timezone-option-size-height: auto;
@@ -41,12 +61,16 @@
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
+    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
     --kbq-timezone-option-text: var(--kbq-foreground-contrast);
     --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
+    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
     --kbq-timezone-option-text: var(--kbq-foreground-contrast);
     --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);

package/tooltip/tooltip.component.d.ts

@@ -27,7 +27,7 @@ export declare class KbqTooltipComponent extends KbqPopUp {
         modifier: any;
     }): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTooltipComponent, "kbq-tooltip-component", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTooltipComponent, "kbq-tooltip-component", never, {}, {}, never, never, true, never>;
 }
 export declare const KBQ_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
@@ -44,6 +44,11 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     get tooltipVisible(): boolean;
     set tooltipVisible(value: boolean);
     get tooltipPlacement(): PopUpPlacements;
+    /**
+     * Positions the tooltip relative to the mouse cursor. Only available for top and bottom kbqPlacement.
+     * Does not work with kbqPlacementPriority.
+     */
+    relativeToPointer: boolean;
     set tooltipPlacement(value: PopUpPlacements);
     get tooltipPlacementPriority(): string | string[] | null;
     set tooltipPlacementPriority(value: string | string[] | null);
@@ -79,8 +84,10 @@ export declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipCompone
     closingActions(): import("rxjs").Observable<void | MouseEvent>;
     getOverlayHandleComponentType(): Type<KbqTooltipComponent>;
     updateClassMap(newPlacement?: string): void;
+    protected applyRelativeToPointer(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, 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; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "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; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "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; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
+    static ngAcceptInputType_relativeToPointer: unknown;
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;
 }
@@ -89,7 +96,7 @@ export declare class KbqWarningTooltipTrigger extends KbqTooltipTrigger {
     set content(content: string | TemplateRef<any>);
     protected modifier: TooltipModifier;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqWarningTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqWarningTooltipTrigger, "[kbqWarningTooltip]", ["kbqWarningTooltip"], { "content": { "alias": "kbqWarningTooltip"; "required": false; }; }, {}, never, never, true, never>;
 }
 export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
@@ -100,5 +107,5 @@ export declare class KbqExtendedTooltipTrigger extends KbqTooltipTrigger {
     protected modifier: TooltipModifier;
     updateData(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqExtendedTooltipTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[kbqExtendedTooltip]", ["kbqExtendedTooltip"], { "content": { "alias": "kbqExtendedTooltip"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqExtendedTooltipTrigger, "[kbqExtendedTooltip]", ["kbqExtendedTooltip"], { "content": { "alias": "kbqExtendedTooltip"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, {}, never, never, true, never>;
 }

package/tooltip/tooltip.module.d.ts

@@ -1,9 +1,7 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./tooltip.component";
-import * as i2 from "@angular/cdk/overlay";
-import * as i3 from "@angular/common";
 export declare class KbqToolTipModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToolTipModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToolTipModule, [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger], [typeof i2.OverlayModule, typeof i3.NgClass, typeof i3.NgTemplateOutlet], [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToolTipModule, never, [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger], [typeof i1.KbqTooltipComponent, typeof i1.KbqTooltipTrigger, typeof i1.KbqExtendedTooltipTrigger, typeof i1.KbqWarningTooltipTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToolTipModule>;
 }

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

@@ -45,6 +45,7 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     set showCheckbox(value: any);
     private _showCheckbox;
     readonly onSelectionChange: EventEmitter<KbqTreeOptionChange>;
+    readonly userInteraction: EventEmitter<void>;
     get selected(): boolean;
     set selected(value: boolean);
     private _selected;

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

@@ -119,6 +119,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     sortComparator: (a: KbqTreeOption, b: KbqTreeOption, options: KbqTreeOption[]) => number;
     /** Combined stream of all of the child options' change events. */
     readonly optionSelectionChanges: Observable<KbqTreeSelectChange>;
+    /** Combined stream of all of the child options userInteraction events. */
+    readonly userInteractionChanges: Observable<void>;
     get placeholder(): string;
     set placeholder(value: string);
     private _placeholder;