@koobiq/components 19.8.5 → 19.8.6

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^19.2.19");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.8.5");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.8.5");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^19.8.6");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^19.8.6");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.5.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.5.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^11.5.0");

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

@@ -5,6 +5,7 @@ export declare class KbqOptionTooltip extends KbqTooltipTrigger implements After
     private readonly option;
     private readonly resizeObserver;
     private readonly contentObserver;
+    private readonly isBrowser;
     private readonly debounceInterval;
     private resizeSubscription;
     private contentObserverSubscription;

package/select/select.component.d.ts

@@ -121,6 +121,12 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     selectionModel: SelectionModel<KbqOptionBase>;
     /** Previously selected options before the current selection was made. */
     previousSelectionModelSelected: KbqOptionBase[];
+    /**
+     * Detached copies of the selected options, captured while the option was still rendered.
+     * `cdk-virtual-scroll` recycles option views, so a `KbqOption` kept in `selectionModel` can
+     * silently start carrying another item's value and label — the copy preserves the original ones.
+     */
+    private readonly selectedOptionCopies;
     /** Manages keyboard events for options in the panel. */
     keyManager: ActiveDescendantKeyManager<KbqOption>;
     /** The value of the select panel's transform-origin property for animations. */
@@ -366,7 +372,7 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     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. */
+    /** The scroll offset the panel is restored to when it attaches — the list always opens at the top. */
     private scrollTop;
     /** Unique id for this input. Auto-incremented for each instance. */
     private readonly uid;
@@ -543,6 +549,12 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
     private getTotalItemsWidthInMatcher;
     /**
      * Calculates the width of a single item including margins.
+     *
+     * The elements measured here are `kbq-tag`s, which are `border-box` and carry horizontal
+     * padding. `getComputedStyle().width` resolves to the used content-box width whatever
+     * `box-sizing` says, so it dropped that padding from every tag and the matcher believed more
+     * tags fit than actually do. `getBoundingClientRect()` is always the border box — the same fix
+     * `kbqGetPanelWidthOrigin()` carries for the dropdown trigger.
      * @param element The DOM element to measure.
      * @returns Total width including margins and gap.
      */
@@ -556,6 +568,8 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * Defers execution to avoid change detection errors.
      */
     private initializeSelection;
+    /** Whether the key manager has no active item, or its active item is missing from the current options list. */
+    private isActiveItemStale;
     /**
      * Sets the selected option based on a value.
      * If no option can be found with the designated value, the select trigger is cleared.
@@ -569,16 +583,28 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      */
     private getCorrespondOption;
     /**
-     * Finds and selects and option based on its value.
-     * @returns Option that has the corresponding value.
+     * Finds and selects an option based on its value.
+     * @returns Option that has the corresponding value, when it is currently rendered.
      */
     private selectValue;
+    /**
+     * Builds a detached option for a value whose `KbqOption` is not rendered, or returns `undefined`
+     * when the value cannot be resolved and the consumer gave no way to render it.
+     */
+    private createVirtualOptionForValue;
     /**
      * 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;
+    /**
+     * Remembers the value and the label of a selected option while its view is still live, so that the
+     * selection survives the view being recycled by `cdk-virtual-scroll` for another item.
+     */
+    private captureSelectedOptionCopy;
+    /** Copy of `option` when its view has been recycled for another item, otherwise `option` itself. */
+    private resolveSelectedOption;
     /** 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. */
@@ -594,7 +620,6 @@ export declare class KbqSelect extends KbqAbstractSelect implements AfterContent
      * the first item instead.
      */
     private highlightCorrectOption;
-    /** Scrolls the active option into view. */
     private scrollActiveOptionIntoView;
     /** Gets how wide the overlay panel should be. */
     private getOverlayWidth;

package/sidebar/sidebar.component.d.ts

@@ -32,6 +32,9 @@ export declare class KbqSidebar implements OnDestroy, AfterContentInit {
     protected readonly document: Document;
     private readonly renderer;
     private readonly changeDetectorRef;
+    private readonly isBrowser;
+    /** Set once the view is torn down; the animation can still report done after that. */
+    private isDestroyed;
     get opened(): boolean;
     set opened(value: boolean);
     private _opened;

package/sidepanel/sidepanel-directives.d.ts

@@ -11,6 +11,7 @@ export declare class KbqSidepanelClose implements OnInit, OnChanges {
     private sidepanelService;
     sidepanelResult: any;
     kbqSidepanelClose: any;
+    private readonly renderer;
     constructor(sidepanelRef: KbqSidepanelRef, elementRef: ElementRef<HTMLElement>, sidepanelService: KbqSidepanelService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -38,6 +39,7 @@ export declare class KbqSidepanelHeader {
 export declare class KbqSidepanelBody {
     private readonly sidepanelRef;
     private readonly elementRef;
+    constructor();
     /** @docs-private */
     protected checkOverflow(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelBody, never>;

package/sidepanel/sidepanel.service.d.ts

@@ -47,6 +47,14 @@ export declare class KbqSidepanelService implements OnDestroy {
     private closeSidepanels;
     private getOpenedSidepanelsWithSamePosition;
     private updateAnimationState;
+    /**
+     * Moves a sidepanel into `state`, unless it is closing already.
+     *
+     * The exit animation is what disposes the overlay, so interrupting it with another state leaves the
+     * sidepanel in the DOM and in `openedSidepanels` for good — which is what closing a stack of them as
+     * a group used to do to the panels underneath.
+     */
+    private setAnimationState;
     /**
      * Removes a sidepanel from the array of open sidepanels.
      * @param sidepanelRef Sidepanel to be removed.

package/splitter/splitter.component.d.ts

@@ -113,6 +113,7 @@ export declare class KbqSplitterAreaDirective implements AfterViewInit, OnDestro
     private splitter;
     readonly sizeChange: EventEmitter<number>;
     private readonly window;
+    private readonly platform;
     constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2, splitter: KbqSplitterComponent);
     isResizing(): boolean;
     disableFlex(): void;

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

@@ -28,6 +28,8 @@ export type KbqTabBodyOriginState = 'left' | 'right';
 export declare class KbqTabBody implements OnInit, OnDestroy {
     private readonly elementRef;
     private readonly dir;
+    /** Set once the view is torn down; the animation callbacks can still fire after that. */
+    private isDestroyed;
     /** The shifted index position of the tab body, where zero represents the active center tab. */
     set position(position: number);
     /** Tab body position state. Used by the animation trigger for the current state. */

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

@@ -23,6 +23,7 @@ export declare class KbqTabHeader extends KbqPaginatedTabHeader {
     readonly tabList: ElementRef;
     readonly nextPaginator: ElementRef<HTMLElement>;
     readonly previousPaginator: ElementRef<HTMLElement>;
+    private readonly isBrowser;
     /** Width of the active tab, adjusted for icon-only tab margins. */
     protected get activeTabOffsetWidth(): number | undefined;
     /** Left offset of the active tab, adjusted for icon-only tab margins. */

package/tabs/tab-header.scss

@@ -8,6 +8,7 @@
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
+    border-radius: var(--kbq-tabs-size-tab-stack-horizontal-border-radius);
 }
 
 .kbq-tab-list__content {

package/tabs/tab-nav-bar.d.ts

@@ -10,6 +10,7 @@ export declare class KbqTabNavBar extends KbqPaginatedTabHeader implements After
     readonly nextPaginator: ElementRef<HTMLElement>;
     readonly previousPaginator: ElementRef<HTMLElement>;
     readonly items: QueryList<KbqTabLink>;
+    private readonly isBrowser;
     /** Whether the nav bar background should be transparent. */
     transparent: boolean;
     onSurface: boolean;

package/tabs/tabs-tokens.scss

@@ -5,7 +5,7 @@
     --kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);
     --kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);
     --kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);
-    --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);
+    --kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-border-radius);
     --kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-tabs-tab-item-filled-on-background-default-background: transparent;

package/textarea/textarea.component.d.ts

@@ -85,7 +85,6 @@ export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, On
     private _id;
     private _required;
     private valueAccessor;
-    private growSubscription;
     private lineHeight;
     private minHeight;
     private rowsCount;

package/timepicker/timepicker.directive.d.ts

@@ -123,6 +123,8 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private formatUserInput;
     private replaceSymbols;
     private replaceNumbers;
+    /** Clamps a time part to the allowed maximum and trims it to two digits */
+    private normalizeTimePart;
     /** Checks whether the input is invalid based on the native validation. */
     private isBadInput;
     private spaceKeyHandler;
@@ -148,6 +150,7 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private maxValidator;
     private getValidDateOrNull;
     private setViewValue;
+    private setSelection;
     private updateView;
     /** @docs-private */
     updateErrorState(): void;

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

@@ -7,6 +7,7 @@ export declare class KbqTimezoneOptionTooltip extends KbqTooltipTrigger implemen
     private readonly changeDetectorRef;
     private readonly resizeObserver;
     private readonly contentObserver;
+    private readonly platform;
     private readonly debounceInterval;
     private resizeSubscription;
     private contentObserverSubscription;

package/title/title.directive.d.ts

@@ -6,16 +6,37 @@ import * as i0 from "@angular/core";
 export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
     private componentInstance?;
     private readonly nativeElement;
+    /** SSR-safe window reference used for `getComputedStyle` reads. */
+    private readonly window;
     private contentObserver;
     set trigger(value: string);
     get trigger(): string;
     get isOverflown(): boolean;
     get isHorizontalOverflown(): boolean;
     get isVerticalOverflown(): boolean;
+    /**
+     * Compares measured widths, treating only *visible* clipping as overflow. With `text-overflow: ellipsis`
+     * any positive difference counts (even a sub-pixel overflow shows `…`). With `text-overflow: clip` the
+     * widths are rounded to whole CSS pixels first — mirroring the integer `offsetWidth`/`scrollWidth` path —
+     * so an imperceptible sub-pixel clip is not treated as truncation.
+     * @docs-private */
+    private isWidthOverflown;
     get viewValue(): string;
     get parent(): HTMLElement;
     get child(): HTMLElement;
     get hasOnlyText(): boolean;
+    /**
+     * Whether the measured text truncates with an ellipsis on either the child text element or its
+     * wrapping container. Only then is a sub-pixel overflow actually visible (the trailing glyph is
+     * replaced by `…`); with the default `text-overflow: clip` a sub-pixel clip is imperceptible, so
+     * it must not be reported as truncation. Both elements are checked because `text-overflow` is not
+     * inherited and consumers place it differently: `KbqOption`/`KbqDropdownItem` style the measured
+     * `child`, whereas `KbqTreeOption` styles the `parent` container that wraps the child.
+     * @docs-private */
+    private get hasEllipsis();
+    /** Whether the element's computed `text-overflow` renders an ellipsis.
+     * @docs-private */
+    private elementHasEllipsis;
     readonly resizeStream: Subject<Event>;
     private readonly debounceInterval;
     private resizeSubscription;

package/toast/toast-container.component.d.ts

@@ -1,5 +1,6 @@
 import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, Injector, NgZone, TemplateRef, ViewContainerRef, ViewRef } from '@angular/core';
+import { Observable } from 'rxjs';
 import { KbqToastService } from './toast.service';
 import { KbqToastData } from './toast.type';
 import * as i0 from "@angular/core";
@@ -8,11 +9,35 @@ export declare class KbqToastContainerComponent extends CdkScrollable {
     private changeDetectorRef;
     readonly service: KbqToastService;
     viewContainer: ViewContainerRef;
+    /**
+     * Emits while the stack re-lays-out. Toasts are ordinary flow children, so removing one slides the
+     * rest for as long as its height animates — and an overlay opened from inside a toast is anchored to
+     * a trigger that is moving. CDK only re-measures the origin on a scroll or a viewport resize, so the
+     * stack has to say when it moved.
+     *
+     * The container's own box tracks the reflow exactly: continuously while a leaving toast animates its
+     * height away, and once for a removal that is not animated at all, such as a template toast.
+     */
+    private readonly reflowed;
     constructor(injector: Injector, changeDetectorRef: ChangeDetectorRef, service: KbqToastService, elementRef: ElementRef<HTMLElement>, scrollDispatcher: ScrollDispatcher, ngZone: NgZone);
+    /**
+     * `ScrollDispatcher` subscribes to this method when the container registers itself, so merging the
+     * reflow signal in re-broadcasts it to every overlay that repositions on scroll — which is what
+     * `kbq-select` and the dropdown trigger do by default.
+     */
+    elementScrolled(): Observable<Event>;
     createToast<C>(data: KbqToastData, componentType: any, onTop: boolean): ComponentRef<C>;
     createTemplate<C>(data: KbqToastData, template: TemplateRef<any>, onTop: boolean): EmbeddedViewRef<C>;
     remove(viewRef: ViewRef): void;
     getInjector(data: KbqToastData): Injector;
+    /**
+     * Fakes a scroll on the container so that overlays anchored inside a toast are repositioned by their
+     * `RepositionScrollStrategy` when the stack shifts.
+     *
+     * @deprecated The container reports its own reflow through `elementScrolled()`, so nothing calls this.
+     * It is kept only for callers that already hold a container reference — the instance created by
+     * `KbqToastService` is not exposed.
+     */
     dispatchScrollEvent: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToastContainerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqToastContainerComponent, "kbq-toast-container", never, {}, {}, never, never, true, never>;

package/tree/_tree-theme.scss

@@ -11,11 +11,6 @@
         color: var(--kbq-tree-#{$state-name}-text-color);
     }
 
-    .kbq-tree-node-toggle .kbq-icon.kbq-empty,
-    .kbq-icon.kbq-empty.kbq-tree-node-toggle {
-        color: var(--kbq-tree-#{$state-name}-tree-toggle-color);
-    }
-
     .kbq-option-action .kbq-icon.kbq-empty {
         color: var(--kbq-tree-#{$state-name}-action-button-color);
     }
@@ -69,19 +64,18 @@
         &.kbq-disabled {
             @include kbq-tree-option(states-disabled);
 
-            & .kbq-icon.kbq-empty {
+            & .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon) {
                 color: var(--kbq-states-icon-disabled);
             }
         }
     }
 
-    .cdk-keyboard-focused {
+    // Scoped to the tree's own focus-monitored host, matching `kbq-option-action-visibility`. A bare
+    // `.cdk-keyboard-focused` would also match an outer monitored ancestor (e.g. the tree-select panel),
+    // drawing the focus ring on a row whose action button stays correctly hidden.
+    .kbq-tree-selection.cdk-keyboard-focused {
         & .kbq-tree-option.kbq-focused:not(.kbq-action-button-focused) {
             border-color: var(--kbq-tree-states-focused-focus-outline-color);
-
-            & .kbq-action-container {
-                display: flex;
-            }
         }
     }
 }

package/tree/toggle.scss

@@ -27,6 +27,10 @@
 
     &[disabled] {
         cursor: default;
+
+        & .kbq-icon {
+            color: var(--kbq-tree-states-disabled-tree-toggle-color);
+        }
     }
 }
 

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

@@ -30,7 +30,10 @@ export declare class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements
     readonly onFocus: Subject<KbqTreeOptionEvent>;
     readonly onBlur: Subject<KbqTreeOptionEvent>;
     preventBlur: boolean;
+    /** Set once the option is destroyed; the tree can still emit a selection change for it after that. */
+    private isDestroyed;
     parentTextElement: ElementRef;
+    get textElement(): ElementRef;
     toggleElementDirective: KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
     toggleElementComponent: KbqTreeNodeToggleBaseDirective<KbqTreeOption>;
     pseudoCheckbox: KbqPseudoCheckbox;

package/tree/tree-option.scss

@@ -1,9 +1,11 @@
+@use '../core/option/action-container-mixins' as action-container;
 @use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
 
 .kbq-tree-option {
     @include vendor-prefixes.user-select(none);
+    @include action-container.kbq-option-action-visibility('.kbq-tree-selection.cdk-keyboard-focused');
 
     position: relative;
 
@@ -57,20 +59,8 @@
         outline: none;
     }
 
-    &.kbq-disabled .kbq-icon {
-        cursor: default;
-    }
-
     &:not(.kbq-disabled) {
         cursor: pointer;
-
-        &:hover,
-        &.kbq-hovered,
-        &.kbq-action-button-focused {
-            & .kbq-action-container {
-                display: flex;
-            }
-        }
     }
 
     &:is(.kbq-checked, .kbq-selected, .kbq-focused):has(+ :is(.kbq-checked, .kbq-selected, .kbq-focused)) {

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

@@ -51,6 +51,7 @@ export declare class KbqTreeSelection extends KbqTreeBase<any> implements Contro
     private elementRef;
     private scheduler;
     private clipboard;
+    private readonly platform;
     protected readonly focusMonitor: FocusMonitor;
     /** Indicates whether this component is placed inside a KbqFormField component. */
     protected readonly inSelect: boolean;

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

@@ -125,6 +125,8 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
      */
     trigger: ElementRef;
     panel: ElementRef;
+    /** Scrollable option list inside the panel. */
+    protected optionsContainer: ElementRef<HTMLElement>;
     overlayDir: CdkConnectedOverlay;
     tags: QueryList<KbqTag>;
     cleaner: KbqCleaner;
@@ -241,7 +243,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private closeSubscription;
     private _panelOpen;
     private originalOnKeyDown;
-    /** The scroll position of the overlay panel, calculated to center the selected option. */
+    /** The scroll offset the panel is restored to when it attaches — the list always opens at the top. */
     private scrollTop;
     /** Unique id for this input. */
     private readonly uid;
@@ -333,6 +335,12 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     /** Gets how wide the overlay panel should be. */
     private getOverlayWidth;
     private buildTriggerClone;
+    /**
+     * Width of a single `kbq-tag` in the matcher, including margins and the inter-tag gap.
+     *
+     * Tags are `border-box` and carry horizontal padding, which `getComputedStyle().width` — always
+     * the used content-box width — leaves out. See the twin in `KbqSelect`.
+     */
     private getItemWidth;
     private refreshTriggerValues;
     /**
@@ -348,7 +356,6 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
      * the first item instead.
      */
     private highlightCorrectOption;
-    /** Scrolls the active option into view. */
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     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; }]>;