@koobiq/components 20.1.0 → 20.2.0

package/filter-bar/index.d.ts

@@ -10,6 +10,7 @@ import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqPopoverTrigger } from '@koobiq/components/popover';
 import { KbqSelect } from '@koobiq/components/select';
 import { KbqListSelection } from '@koobiq/components/list';
+import { KbqInput } from '@koobiq/components/input';
 import { FlatTreeControl, KbqTreeFlattener, KbqTreeFlatDataSource, KbqTreeSelection, KbqTreeOption } from '@koobiq/components/tree';
 import { KbqTreeSelect } from '@koobiq/components/tree-select';
 
@@ -47,6 +48,12 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
     protected values: any;
     /** TemplateRef for selecting an option */
     protected valueTemplate?: TemplateRef<any> | string;
+    /**
+     * Optional equality comparator forwarded from the pipe template to the underlying `kbq-select`.
+     * Only consumed by the select / multi-select pipe components; when unset they fall back to their
+     * own id-based `compareByValue`.
+     */
+    protected optionCompareWith?: (o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined) => boolean;
     /**
      * Whether the current platform is a Mac.
      *
@@ -272,6 +279,8 @@ declare const kbqFilterBarPipesProvider: () => Provider;
 declare enum KbqPipeTypes {
     ReadOnly = "readonly",
     Text = "text",
+    /** Renders a bare input: no popover, never opens. Commits while typing (debounced), on Enter and on blur. */
+    Input = "input",
     Select = "select",
     TreeSelect = "tree-select",
     MultiSelect = "multiselect",
@@ -327,6 +336,12 @@ interface KbqPipeData<V> extends KbqPipe {
 interface KbqPipeTemplate extends Omit<KbqPipe, 'value'> {
     values?: unknown[];
     valueTemplate?: TemplateRef<any> | string;
+    /**
+     * Custom equality comparator forwarded to the underlying `kbq-select` of the `select` /
+     * `multiselect` pipes. When omitted, the pipe's default id-based comparator (`compareByValue`)
+     * is used. Ignored by other pipe types.
+     */
+    compareWith?: (o1: KbqSelectValue | null | undefined, o2: KbqSelectValue | null | undefined) => boolean;
 }
 interface KbqSaveFilterError {
     text?: string;
@@ -409,7 +424,8 @@ declare class KbqFilterSavePopover implements AfterViewInit {
     /** true if saving a new filter, false if saving changes in filter */
     saveNewFilter: boolean;
     showFilterSavingError: boolean;
-    filterSavingErrorText: string;
+    /** Custom error text passed to `showError()`; `null` when the locale-derived default should be used. */
+    private customErrorText;
     isSaving: boolean;
     /** localized data
      * @docs-private */
@@ -431,6 +447,9 @@ declare class KbqFilterSavePopover implements AfterViewInit {
         cancelButton: string;
         actionsTooltip: string;
     };
+    /** Filter saving error text (custom or locale-derived).
+     * @docs-private */
+    get filterSavingErrorText(): string;
     /** header of popover. Depends on the mode */
     get popoverHeader(): string;
     ngAfterViewInit(): void;
@@ -651,7 +670,9 @@ declare class KbqFilterBar implements KbqFilterBarHost {
         };
     } | null;
     /** Localized strings and configuration for the filter-bar and its pipes. */
-    configuration: KbqFilterBarConfiguration;
+    get configuration(): KbqFilterBarConfiguration;
+    set configuration(value: KbqFilterBarConfiguration);
+    private readonly _configuration;
     /** @docs-private */
     readonly filters: _angular_core.Signal<KbqFilters | undefined>;
     /** @docs-private */
@@ -970,6 +991,44 @@ declare class KbqPipeDatetimeComponent<D> extends KbqPipeDateBaseComponent<D> {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqPipeDatetimeComponent<any>, "kbq-pipe-datetime", never, {}, {}, never, never, true, never>;
 }
 
+declare class KbqPipeInputComponent extends KbqBasePipe<string | null> implements OnInit {
+    /** @docs-private */
+    protected readonly input: _angular_core.Signal<KbqInput>;
+    /**
+     * Input control.
+     *
+     * Must stay nullable: `reset()` — all `KbqFormField.clearValue()` and its Escape handler ever call —
+     * resolves to `defaultValue`, which is `null` only while `nonNullable` is unset. `{ nonNullable: true }`
+     * would make `reset()` yield `''` and silently break the cleaner bridge below.
+     */
+    readonly control: FormControl<string | null>;
+    /**
+     * Debounce in milliseconds between the last keystroke and the typed value being applied to the filter.
+     * Matches `defaultEmitValueTimeout` of `kbq-search-expandable`, so both search fields of a bar feel the
+     * same. `Enter` and blur apply immediately and cancel a pending apply.
+     */
+    debounceTime: number;
+    /**
+     * Minimum number of characters before typing applies the value to the filter. Anything shorter —
+     * including an emptied field — is applied as `null`, so the filter never keeps text the user has
+     * already erased. `Enter` and blur ignore the threshold. Set to `0` to apply every keystroke.
+     */
+    minLength: number;
+    /** Cancels a pending debounced apply once the value has been applied (or cleared) through another path. */
+    private readonly cancelPendingApply;
+    /** Whether the current pipe is empty. Used for apply style modifier */
+    get isEmpty(): boolean;
+    ngOnInit(): void;
+    /** clears the pipe and triggers changes */
+    onClear(): void;
+    /** focuses the input */
+    open(): void;
+    /** Commits a value to `data` and notifies the filter-bar. */
+    private commit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqPipeInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqPipeInputComponent, "kbq-pipe-input", never, {}, {}, never, never, true, never>;
+}
+
 declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements AfterViewInit, OnInit {
     /** control for search options */
     readonly searchControl: FormControl<string | null>;
@@ -1161,5 +1220,5 @@ declare class KbqPipeTreeSelectComponent extends KbqTreeSelectPipeBase<KbqSelect
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqPipeTreeSelectComponent, "kbq-pipe-tree-select", never, {}, {}, never, never, true, never>;
 }
 
-export { KBQ_FILTER_BAR_CONFIGURATION, KBQ_FILTER_BAR_DEFAULT_CONFIGURATION, KBQ_FILTER_BAR_HOST, KBQ_FILTER_BAR_PIPES, KBQ_PIPE_DATA, KbqBasePipe, KbqFilterBar, KbqFilterBarButton, KbqFilterBarModule, KbqFilterRefresher as KbqFilterBarRefresher, KbqFilterRefresher, KbqFilterReset, KbqFilterSavePopover, KbqFilters, KbqPipeAdd, KbqPipeButton, KbqPipeDateBaseComponent, KbqPipeDateComponent, KbqPipeDatetimeComponent, KbqPipeDirective, KbqPipeMinWidth, KbqPipeMultiSelectComponent, KbqPipeMultiTreeSelectComponent, KbqPipeReadonlyComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTreeSelectComponent, KbqPipeTypes, KbqSaveFilterStatuses, KbqTreeSelectFlatNode, KbqTreeSelectPipeBase, defaultFilterBarPipes, getId, kbqBuildTree, kbqFilterBarPipesProvider };
+export { KBQ_FILTER_BAR_CONFIGURATION, KBQ_FILTER_BAR_DEFAULT_CONFIGURATION, KBQ_FILTER_BAR_HOST, KBQ_FILTER_BAR_PIPES, KBQ_PIPE_DATA, KbqBasePipe, KbqFilterBar, KbqFilterBarButton, KbqFilterBarModule, KbqFilterRefresher as KbqFilterBarRefresher, KbqFilterRefresher, KbqFilterReset, KbqFilterSavePopover, KbqFilters, KbqPipeAdd, KbqPipeButton, KbqPipeDateBaseComponent, KbqPipeDateComponent, KbqPipeDatetimeComponent, KbqPipeDirective, KbqPipeInputComponent, KbqPipeMinWidth, KbqPipeMultiSelectComponent, KbqPipeMultiTreeSelectComponent, KbqPipeReadonlyComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTreeSelectComponent, KbqPipeTypes, KbqSaveFilterStatuses, KbqTreeSelectFlatNode, KbqTreeSelectPipeBase, defaultFilterBarPipes, getId, kbqBuildTree, kbqFilterBarPipesProvider };
 export type { KbqDateTimeValue, KbqFilter, KbqFilterBarConfiguration, KbqFilterBarHost, KbqPipe, KbqPipeData, KbqPipeTemplate, KbqPipeType, KbqSaveFilterError, KbqSaveFilterEvent, KbqSelectValue, KbqTreeSelectNode };

package/filter-bar/pipes/base-pipe.scss

@@ -31,17 +31,6 @@
         }
     }
 
-    .kbq-pipe__separator {
-        z-index: 1;
-
-        margin-inline-start: -1px;
-        margin-inline-end: 0;
-
-        height: var(--kbq-size-l);
-
-        align-self: center;
-    }
-
     .kbq-select:not(:hover, .kbq-active),
     .kbq-tree-select:not(:hover, .kbq-active),
     .kbq-button:not(:hover, .kbq-active, [disabled]) {

package/filter-bar/pipes/pipe-input.scss

@@ -0,0 +1,10 @@
+.kbq-pipe.kbq-pipe__input {
+    // Fall back like base-pipe.scss does for --kbq-filter-bar-pipe-max-width: the token is declared on
+    // .kbq-filter-bar, which a pipe rendered outside a bar never sees.
+    width: var(--kbq-filter-bar-pipe-input-width, 240px);
+    flex: none;
+
+    .kbq-form-field {
+        width: 100%;
+    }
+}

package/icon/icon-button.scss

@@ -9,7 +9,9 @@
 
     padding: var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding);
 
-    &.kbq-icon-button_small {
+    // @deprcated Will be removed in the next major release (#DS-5338)
+    &.kbq-icon-button_small,
+    &.kbq-icon-button_compact {
         padding: var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding);
     }
 

package/icon/index.d.ts

@@ -83,9 +83,22 @@ declare class KbqIcon extends KbqColorDirective implements AfterContentInit, OnC
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "small": { "alias": "small"; "required": false; "isSignal": true; }; "autoColor": { "alias": "autoColor"; "required": false; }; "iconName": { "alias": "kbq-icon"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Size options for `KbqIconButton`.
+ * - `compact`: 16px icon with padding, 24×24px container.
+ * - `normal`: 24px icon, no padding.
+ */
+type KbqIconButtonSize = 'compact' | 'normal';
 declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy {
     protected readonly focusMonitor: FocusMonitor;
+    /** Size of the icon button. */
+    readonly size: i0.InputSignal<KbqIconButtonSize>;
+    /**
+     * @deprecated Use `size` input instead. Will be removed in the next major release (#DS-5338).
+     */
     readonly small: i0.InputSignal<boolean>;
+    /** @docs-private */
+    protected readonly isCompact: i0.Signal<boolean>;
     /** Name of an icon within a @koobiq/icons. */
     iconName: string;
     get tabindex(): any;
@@ -104,7 +117,7 @@ declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "small": { "alias": "small"; "required": false; "isSignal": true; }; "iconName": { "alias": "kbq-icon-button"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "small": { "alias": "small"; "required": false; "isSignal": true; }; "iconName": { "alias": "kbq-icon-button"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }
 
@@ -159,4 +172,4 @@ declare class KbqIconModule {
 }
 
 export { KBQ_ICONS_CONFIG, KBQ_ICON_RESOLVER, KbqIcon, KbqIconButton, KbqIconItem, KbqIconModule, KbqIconRegistry, kbqIconsDictProvider, kbqIconsProvider, kbqIconsResolverProvider };
-export type { KbqIconOptions, KbqIconResolver, KbqIconsConfig };
+export type { KbqIconButtonSize, KbqIconOptions, KbqIconResolver, KbqIconsConfig };

package/navbar/_navbar-item_vertical.scss

@@ -55,17 +55,19 @@
         &.kbq-navbar-bento .kbq-navbar-item__title {
             margin-left: -8px;
             opacity: 0;
+
+            transition:
+                opacity 150ms ease-out,
+                margin-left 150ms ease-out;
         }
 
         &.kbq-navbar-bento:hover,
-        &.kbq-navbar-bento.cdk-keyboard-focused {
+        &.kbq-navbar-bento.cdk-keyboard-focused,
+        &.kbq-navbar-bento.kbq-active,
+        &.kbq-navbar-bento.kbq-pressed {
             & .kbq-navbar-item__title {
                 margin-left: 0;
                 opacity: 1;
-
-                transition:
-                    opacity 150ms ease-out,
-                    margin-left 150ms ease-out;
             }
         }
     }

package/navbar/index.d.ts

@@ -31,11 +31,19 @@ declare class KbqNavbarTitle implements AfterViewInit {
     private readonly window;
     readonly hovered: Subject<boolean>;
     outerElementWidth: number;
-    isTextOverflown: boolean;
     get text(): string;
+    /** Whether the text is clipped horizontally (e.g. by `text-overflow: ellipsis`). */
     get isOverflown(): boolean;
+    /**
+     * Whether the text is clipped vertically (e.g. by `-webkit-line-clamp`).
+     *
+     * Kept separate from `isOverflown` on purpose: wrapped text never exceeds its width, so only this
+     * check catches a clamped title. `isOverflown` is also read by `KbqNavbarItem`, whose titles are
+     * always `nowrap` — folding the two together would let sub-pixel line-height rounding enable
+     * tooltips on every navbar item.
+     */
+    get isClamped(): boolean;
     getOuterElementWidth(): number;
-    checkTextOverflown(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarTitle, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarTitle, "kbq-navbar-title, [kbq-navbar-title]", never, {}, {}, never, never, true, never>;
@@ -143,10 +151,26 @@ declare class KbqNavbarBrand extends KbqTooltipTrigger implements AfterContentIn
     protected readonly rectangleElement: KbqNavbarRectangleElement;
     /** @docs-private */
     protected readonly navbarFocusableItem: KbqNavbarFocusableItem;
+    private readonly isBrowser;
+    private readonly resizeObserver;
+    private readonly contentObserver;
+    private readonly document;
+    private readonly injector;
+    private readonly debounceInterval;
     /** @docs-private */
     readonly title: i0.Signal<KbqNavbarTitle | undefined>;
-    /** alternative display of the brand name in two lines */
-    readonly longTitle: i0.InputSignal<boolean>;
+    /** Whether the title has been measured as not fitting into a single line. */
+    private readonly autoLongTitle;
+    /**
+     * Alternative display of the brand name in two lines.
+     *
+     * @deprecated The mode is now detected automatically when the title does not fit into a single line.
+     * Leave unset for auto-detection; `true` and `false` force the mode on and off respectively.
+     * Will be removed in the next major release.
+     */
+    readonly longTitle: i0.InputSignal<boolean | undefined>;
+    /** @docs-private */
+    protected readonly longTitleEnabled: i0.Signal<boolean>;
     /** text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title. */
     get collapsedText(): string;
     set collapsedText(value: string);
@@ -168,6 +192,16 @@ declare class KbqNavbarBrand extends KbqTooltipTrigger implements AfterContentIn
     constructor();
     ngAfterContentInit(): void;
     private updateTooltip;
+    private observeLongTitle;
+    private updateAutoLongTitle;
+    /**
+     * Measures whether the title fits into a single line in the *default* presentation.
+     *
+     * Removing and restoring the class within a single task is safe: the browser does not paint mid-task, and
+     * Angular's host binding only writes to the DOM when its value changes, which it does not here. Both rely
+     * on there being no CSS transition on the title - add one and this starts to flicker.
+     */
+    private measureNeedsLongTitle;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["kbqNavbarBrand"], { "longTitle": { "alias": "longTitle"; "required": false; "isSignal": true; }; "collapsedText": { "alias": "collapsedText"; "required": false; }; }, {}, ["title"], ["*"], true, never>;
 }

package/navbar/navbar-brand.scss

@@ -46,6 +46,8 @@ a.kbq-navbar-brand {
     }
 
     & .kbq-navbar-title {
+        max-width: 154px;
+
         padding-right: var(--kbq-size-m);
     }
 }
@@ -85,14 +87,19 @@ a.kbq-navbar-brand {
             display: none !important;
         }
     }
+}
 
-    &.kbq-navbar-brand_long-title .kbq-navbar-title {
-        display: -webkit-box;
-
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        white-space: normal;
-    }
+// Must stay below the per-orientation rules: `.kbq-vertical` sets `display: block` on the title at the very
+// same specificity, so moving this up lets that win and silently kills the clamp - `-webkit-line-clamp` does
+// nothing without `-webkit-box`, and the title then wraps to an unbounded number of lines with no ellipsis.
+// `.kbq-collapsed` still wins over it via `!important`.
+.kbq-navbar-brand.kbq-navbar-brand_long-title .kbq-navbar-title {
+    display: -webkit-box;
+
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    white-space: normal;
 }
 
 @mixin kbq-navbar-brand-theme() {
@@ -145,8 +152,11 @@ a.kbq-navbar-brand {
             @include kbq-typography-level-to-styles-css-variables(typography, navbar-title);
         }
 
+        // Both orientations: two lines of the 18px/28px default would grow the navbar (48px -> 72px
+        // horizontally), which is what the compact type exists to prevent.
         &.kbq-navbar-brand_long-title .kbq-navbar-title {
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal-strong);
+            line-height: 16px;
         }
     }
 }

package/notification-center/index.d.ts

@@ -195,7 +195,8 @@ declare class KbqNotificationCenterComponent extends KbqPopUp implements AfterVi
      * stall. Suppressed while a load is in flight, errored, or when there is nothing more to load.
      */
     private subscribeToScrolledToBottom;
-    /** Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom. */
+    /** Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom.
+     * Sub-pixel measurement error is absorbed by `SCROLLED_TO_BOTTOM_TOLERANCE`. */
     private isScrolledToBottom;
     /** Emits `onNextPage` unless a load is already in flight, errored, or there is nothing more to load. */
     private requestNextPage;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "20.1.0",
+    "version": "20.2.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,8 +25,8 @@
         "@angular/cdk": ">=20.0.0",
         "@angular/core": ">=20.0.0",
         "@angular/forms": ">=20.0.0",
-        "@koobiq/angular-moment-adapter": "20.1.0",
-        "@koobiq/angular-luxon-adapter": "20.1.0",
+        "@koobiq/angular-moment-adapter": "20.2.0",
+        "@koobiq/angular-luxon-adapter": "20.2.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "^3.14.0"