@koobiq/components 19.7.0 → 19.8.0

package/select/select.component.d.ts

@@ -1,11 +1,11 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
 import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, OverlayContainer } from '@angular/cdk/overlay';
-import { CdkVirtualForOf } from '@angular/cdk/scrolling';
+import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { AfterContentInit, ChangeDetectorRef, DestroyRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, Provider, QueryList, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
-import { CanUpdateErrorState, ErrorStateMatcher, KbqAbstractSelect, KbqComponentColors, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger } from '@koobiq/components/core';
+import { CanUpdateErrorState, ErrorStateMatcher, KbqAbstractSelect, KbqComponentColors, KbqLocaleService, KbqOptgroup, KbqOption, KbqOptionBase, KbqOptionSelectionChange, KbqSelectMatcher, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqSelectTrigger, KbqVirtualOption } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqTag } from '@koobiq/components/tags';
 import { Observable, Subject } from 'rxjs';
@@ -156,6 +156,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     footer?: ElementRef;
     /** Reference to the CDK virtual scroll directive for virtual scrolling support. */
     cdkVirtualForOf?: CdkVirtualForOf<any>;
+    /** Reference to the CDK virtual scroll viewport for tracking scroll position in virtual mode. */
+    virtualScrollViewport?: CdkVirtualScrollViewport;
     /** Query list of tags displayed in multiple selection mode. */
     tags: QueryList<KbqTag>;
     /** User-supplied override of the trigger element for custom rendering. */
@@ -230,6 +232,13 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * @docs-private
      */
     readonly valueChange: EventEmitter<any>;
+    /**
+     * Distance in pixels from the bottom of the options panel at which `scrolledToBottom` fires.
+     * Default `0` — emits only when the panel is fully scrolled to the bottom.
+     */
+    scrolledToBottomOffset: number;
+    /** Emits when the options panel is scrolled to (or within `scrolledToBottomOffset` of) the bottom. */
+    readonly scrolledToBottom: EventEmitter<void>;
     /**
      * Whether the overlay should have a backdrop.
      * When true, clicking the backdrop will close the select.
@@ -266,6 +275,20 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      */
     get compareWith(): (o1: any, o2: any) => boolean;
     set compareWith(fn: (o1: any, o2: any) => boolean);
+    /**
+     * Factory used to construct a `KbqVirtualOption` for selected values whose
+     * `KbqOption` is not currently rendered (e.g. virtual scroll out of viewport,
+     * programmatically set initial value, `showPreselectedValues`).
+     *
+     * Required when option values are objects so the trigger (and tags in
+     * multiple mode) can render a human-readable label. Also lets consumers
+     * customise per-value `disabled` state or any future `KbqVirtualOption`
+     * fields without adding new `@Input`s.
+     *
+     * Defaults to `new KbqVirtualOption(value, this.disabled)`, which is correct
+     * for primitive values where `value` itself is the display label.
+     */
+    virtualOptionFactory?: (value: any) => KbqVirtualOption;
     /**
      * Function for handling the Ctrl + A (select all) keyboard combination.
      * By default, the internal handler selects all options.
@@ -341,6 +364,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     get multiSelection(): boolean;
     /** Subscription to the close event of the overlay. */
     private closeSubscription;
+    /** Subscription to the options panel scroll event used by `scrolledToBottom`. */
+    private scrollSubscription;
     /** The scroll position of the overlay panel, calculated to center the selected option. */
     private scrollTop;
     /** Unique id for this input. Auto-incremented for each instance. */
@@ -507,6 +532,13 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private getHeightOfOptionsContainer;
     /** Updates the keyboard manager scroll size based on options container height. */
     private updateScrollSize;
+    /**
+     * Subscribes to scroll events of the options panel and emits `scrolledToBottom`
+     * when the panel reaches `scrolledToBottomOffset` pixels from the bottom.
+     * Re-subscribes on every panel attach; auto-unsubscribes when the panel closes
+     * or the component is destroyed.
+     */
+    private subscribeToScrolledToBottom;
     /** Calculates the total width of all selected items in the matcher. */
     private getTotalItemsWidthInMatcher;
     /**
@@ -541,6 +573,12 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * @returns Option that has the corresponding value.
      */
     private selectValue;
+    /**
+     * Single entry point for building a `KbqVirtualOption` from a raw value.
+     * Uses the consumer-provided `virtualOptionFactory` when set, otherwise
+     * wraps the raw value with the select's current `disabled` state.
+     */
+    private createVirtualOption;
     /** Sets up a key manager to listen to keyboard events on the overlay panel. */
     private initKeyManager;
     /** Drops current option subscriptions and IDs and resets from scratch. */
@@ -579,8 +617,9 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     /** Removes the dropdown class from the overlay container when select closes. */
     private removeClassFromOverlayContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "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; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["footer", "cdkVirtualForOf", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "searchEmpty", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "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; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "search", "searchEmpty", "options", "optionGroups"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
     static ngAcceptInputType_multiline: unknown;
+    static ngAcceptInputType_scrolledToBottomOffset: unknown;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_panelMinWidth: unknown;
     static ngAcceptInputType_tabIndex: unknown;

package/timepicker/timepicker.directive.d.ts

@@ -86,6 +86,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     /** @docs-private */
     get errorState(): boolean;
     set errorState(value: boolean);
+    private readonly useLegacyValidation;
     private readonly uid;
     private readonly validator;
     private lastValueValid;

package/timezone/timezone-option.directive.d.ts

@@ -1,18 +1,21 @@
-import { AfterViewInit, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, OnDestroy } from '@angular/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
-import { KbqTimezoneOption } from './timezone-option.component';
 import * as i0 from "@angular/core";
 export declare const TOOLTIP_VISIBLE_ROWS_COUNT = 3;
 export declare class KbqTimezoneOptionTooltip extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
-    private changeDetectorRef;
-    private option;
-    private resizeObserver;
-    private resizeObserverSubscription;
-    constructor(changeDetectorRef: ChangeDetectorRef, option: KbqTimezoneOption);
+    private readonly option;
+    private readonly changeDetectorRef;
+    private readonly resizeObserver;
+    private readonly contentObserver;
+    private readonly debounceInterval;
+    private resizeSubscription;
+    private contentObserverSubscription;
+    private focusMonitorSubscription;
+    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    onMouseEnter(): void;
-    onMouseLeave(): void;
+    handleElementEnter(): void;
+    handleElementLeave(): void;
     private checkTooltipDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimezoneOptionTooltip, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimezoneOptionTooltip, "kbq-timezone-option", never, {}, {}, never, never, true, never>;

package/toast/toast.service.d.ts

@@ -6,6 +6,7 @@ import { KbqToastComponent } from './toast.component';
 import { KbqToastConfig, KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
 export declare const KBQ_TOAST_FACTORY: InjectionToken<typeof KbqToastComponent>;
+/** Generic `T` is a type hint only; the runtime component comes from `KBQ_TOAST_FACTORY`. */
 export declare class KbqToastService<T extends KbqToastComponent = KbqToastComponent> implements OnDestroy {
     private overlay;
     private injector;
@@ -20,10 +21,11 @@ export declare class KbqToastService<T extends KbqToastComponent = KbqToastCompo
     readonly focused: BehaviorSubject<boolean>;
     readonly animation: BehaviorSubject<AnimationEvent | null>;
     timer: import("rxjs").Observable<number>;
-    private containerInstance;
-    private overlayRef;
-    private portal;
+    private containerInstance?;
+    private overlayRef?;
+    private portal?;
     private timerSubscription;
+    private currentPosition?;
     private toastsDict;
     private templatesDict;
     constructor(overlay: Overlay, injector: Injector, overlayContainer: OverlayContainer, ngZone: NgZone, toastFactory: any, toastConfig: KbqToastConfig);

package/top-bar/top-bar.d.ts

@@ -1,4 +1,3 @@
-import { KbqOverflowItems } from '@koobiq/components/overflow-items';
 import * as i0 from "@angular/core";
 export declare class KbqTopBarSpacer {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarSpacer, never>;
@@ -12,12 +11,6 @@ export declare class KbqTopBarContainer {
      * Conditionally applies a CSS class based on the value
      */
     readonly placement: import("@angular/core").InputSignal<"start" | "end">;
-    /**
-     * Track if container has `KbqOverflowItems` directive assigned.
-     * Used to replace `gap` with `margin` so `KbqOverflowItems` will calculate correct width on resize.
-     * @docs-private
-     */
-    protected readonly overflowItems: KbqOverflowItems | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarContainer, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTopBarContainer, "[kbqTopBarContainer]", never, { "placement": { "alias": "placement"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/top-bar/top-bar.scss

@@ -45,7 +45,7 @@
     }
 
     .kbq-top-bar-container {
-        &:has(> .kbq-overflow-items) {
+        &:has(.kbq-overflow-items) {
             gap: unset;
             overflow: hidden;
             // reduce height added by overflow-items' padding
@@ -53,10 +53,6 @@
             margin-bottom: calc(-1 * var(--kbq-size-border-width));
         }
 
-        .kbq-overflow-items {
-            @include _overflow-items-margins;
-        }
-
         &.kbq-top-bar-container__start {
             display: flex;
             gap: var(--kbq-top-bar-container-start-gap);
@@ -71,10 +67,8 @@
             justify-content: end;
         }
 
-        &.kbq-top-bar-container__with-overflow-items {
-            gap: unset;
-            justify-content: unset;
-
+        &.kbq-overflow-items,
+        > .kbq-overflow-items {
             @include _overflow-items-margins;
         }
     }

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

@@ -69,6 +69,7 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     readonly onSelectAll: EventEmitter<KbqTreeSelectAllEvent<KbqTreeOption>>;
     readonly onCopy: EventEmitter<KbqTreeCopyEvent<KbqTreeOption>>;
     private sortedNodes;
+    private lastSyncedDataNodes;
     get autoSelect(): boolean;
     set autoSelect(value: boolean);
     private _autoSelect;
@@ -119,6 +120,12 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
      */
     setDisabledState(isDisabled: boolean): void;
     setOptionsFromValues(values: any[]): void;
+    /**
+     * Rebinds orphan node references in selectionModel to current treeControl.dataNodes by value.
+     * Needed after dataSource.data is replaced — selectionModel holds references to old node
+     * objects, but options render with new ones, so toggle()/isSelected() break on identity.
+     */
+    private syncSelectionModelToDataNodes;
     getSelectedValues(): any[];
     getItemHeight(): number;
     setStateChildren(option: KbqTreeOption, state: boolean): void;