@koobiq/components 20.3.0 → 20.3.2

package/file-upload/file-upload.scss

@@ -22,7 +22,16 @@
         position: relative;
         display: flex;
 
+        // The split point is measured against the host's own `clientWidth`, so the host must not grow to fit
+        // the text it is about to shorten — a shrink-to-fit host measures the full width, concludes
+        // everything fits, and leaves the text unsplit and overflowing. `min-width: 0` opts out of the `auto`
+        // minimum a flex item would otherwise inherit from the non-shrinkable end span.
+        max-width: 100%;
+        min-width: 0;
+        overflow: hidden;
+
         .kbq-ellipsis-center_data-text-start {
+            // The only half that shrinks, and the only one carrying `text-overflow` — unsplit text lands here.
             flex: 0 1 auto;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -30,6 +39,8 @@
         }
 
         .kbq-ellipsis-center_data-text-end {
+            // Holds the tail the split exists to keep visible (the file extension, the trailing digits), so
+            // it must not shrink; the directive sizes it from the width the text actually rendered at.
             flex: 1 0 auto;
             overflow: hidden;
             white-space: pre;

package/file-upload/index.d.ts

@@ -129,7 +129,7 @@ declare class KbqFileList<T> {
     addArray(items: T[]): void;
     /** Replaces the current list with the specified items and emits event. */
     replace(items: T[]): void;
-    /** Removes the first occurrence of the specified item. Returns removed items and emits event. */
+    /** Removes every occurrence of the specified item. Returns the removed items. */
     remove(item: T): T[];
     /** Removes item at specified index. Returns removed items and emits event. */
     removeAt(index: number): T[];

package/file-upload/multiple-file-upload.component.scss

@@ -225,6 +225,13 @@
         align-items: center;
         flex: 1;
 
+        // The file name is rendered into `white-space: pre` spans by `kbqEllipsisCenter`, and the tail span
+        // is `flex-shrink: 0`. Under the default `min-width: auto` that intrinsic width propagates up
+        // through every flex item here, so a long name widens the row past the list instead of being
+        // truncated — and `kbqEllipsisCenter` measures the overflowed `clientWidth`, so it truncates to a
+        // width that is off-screen.
+        min-width: 0;
+
         .kbq-file-upload__grid-cell {
             padding: 0 var(--kbq-file-upload-size-multiple-big-grid-cell-padding-horizontal);
         }
@@ -235,9 +242,13 @@
             flex-grow: 1;
             gap: var(--kbq-file-upload-size-multiple-big-grid-cell-content-gap-horizontal);
             padding-left: var(--kbq-size-m);
+            min-width: 0;
 
             .kbq-file-item__text {
-                width: 90%;
+                // Takes whatever is left between the icon and the size column. The `min-width: 0` and
+                // `overflow: hidden` that let it shrink below the name's intrinsic width come from
+                // `.kbq-ellipsis-center`, which this element also is.
+                flex: 1 1 auto;
             }
         }
 
@@ -253,8 +264,9 @@
             width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
             min-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
             max-width: var(--kbq-file-upload-size-multiple-big-grid-cell-file-size-width);
-            flex-grow: 1;
-            flex-shrink: 1;
+            // The three widths above already pin the column, so growing and shrinking were both inert.
+            // Stated outright now that the file-name cell beside it actually shrinks.
+            flex: none;
             text-align: left;
         }
 

package/file-upload/single-file-upload.component.scss

@@ -113,17 +113,25 @@
 
         .kbq-file-item {
             width: 100%;
+            // The row sits beside the delete button in a flex container, and the wrapper below beside the
+            // size column. `min-width: auto` would let the file name's intrinsic width propagate up through
+            // both and push the row past the component instead of being shortened — and `kbqEllipsisCenter`
+            // measures the overflowed `clientWidth`, so it would shorten to a width that is off-screen.
+            min-width: 0;
 
             .kbq-file-item__text-wrapper {
                 display: flex;
                 align-items: center;
                 width: 100%;
+                min-width: 0;
 
                 gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
 
                 .kbq-file-item__text {
-                    width: 120px;
-                    flex-grow: 1;
+                    // Takes whatever is left beside the icon and the size column. The `min-width: 0` and
+                    // `overflow: hidden` that let it shrink below the name's intrinsic width come from
+                    // `.kbq-ellipsis-center`, which this element also is.
+                    flex: 1 1 auto;
                 }
             }
 

package/filter-bar/filter-bar-tokens.scss

@@ -1,5 +1,6 @@
 .kbq-filter-bar {
-    /* Maximum width of a pipe / filters trigger before its label truncates. */
+    /* Maximum width of a whole pipe, clear and remove buttons included, and of the filters trigger.
+       The input pipe keeps its own width. */
     --kbq-filter-bar-pipe-max-width: 320px;
     /* Fixed width of the input pipe's field. Unlike the other pipes it never shrink-wraps its
        content, so this is a width rather than a max-width. */

package/filter-bar/index.d.ts

@@ -125,6 +125,13 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBasePipe<any>, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqBasePipe<any>, never, never, {}, {}, never, never, true, never>;
 }
+/**
+ * Keeps a pipe part at its natural width while its text is shorter than `maxSymbolsForFitContent`.
+ *
+ * @deprecated A pipe lays its name and value out as two shrinkable grid tracks, which already keeps a
+ * short part intact; on a grid item this `min-width` only pushes the part past its track, where it is
+ * clipped without an ellipsis. Will be removed in the next major.
+ */
 declare class KbqPipeMinWidth {
     /** KbqFilterBar instance */
     protected readonly filterBar: KbqFilterBarHost | null;
@@ -293,7 +300,11 @@ interface KbqFilterBarHost {
     readonly internalFilterChanges: BehaviorSubject<KbqFilter | null>;
     /** Internal pipe-template changes. */
     readonly internalTemplatesChanges: BehaviorSubject<KbqPipeTemplate[] | null>;
-    /** Requests opening a pipe after it is added. */
+    /**
+     * Requests that an already-added pipe open its pop-up. A one-shot command handled synchronously by the
+     * pipes that exist when it is dispatched, not retained state — clear it back to `null` after `next`. A
+     * pipe that has not been rendered yet is opened with `openOnAdd` on the pipe itself, not through this.
+     */
     readonly openPipe: BehaviorSubject<string | number | null>;
     /** Emits when the filter is reset. */
     readonly onResetFilter: BehaviorSubject<boolean>;
@@ -307,7 +318,11 @@ interface KbqFilterBarHost {
  * `useExisting`, so pipes `inject(KBQ_FILTER_BAR_HOST)` instead of depending on the concrete bar.
  */
 declare const KBQ_FILTER_BAR_HOST: InjectionToken<KbqFilterBarHost>;
-/** Injection Token for providing pipes in filter-bar */
+/**
+ * Injection Token for providing pipes in filter-bar. Defaults to {@link defaultFilterBarPipes} so the
+ * standalone `KbqFilterBar` works without `KbqFilterBarModule`; override it with
+ * {@link kbqFilterBarPipesProvider} or a provider of your own.
+ */
 declare const KBQ_FILTER_BAR_PIPES: InjectionToken<Map<KbqPipeType, Type<KbqBasePipe<unknown>>>>;
 /** Utility provider for `KBQ_FILTER_BAR_PIPES`. */
 declare const kbqFilterBarPipesProvider: () => Provider;
@@ -814,7 +829,7 @@ declare class KbqFilterBar implements KbqFilterBarHost {
     readonly internalFilterChanges: BehaviorSubject<KbqFilter | null>;
     /** internal changes in templates */
     readonly internalTemplatesChanges: BehaviorSubject<KbqPipeTemplate[] | null>;
-    /** this subject need for opens pipe after adding
+    /** Requests that an already-added pipe open its pop-up. See {@link KbqFilterBarHost.openPipe}.
      * @docs-private */
     readonly openPipe: BehaviorSubject<string | number | null>;
     constructor();
@@ -987,7 +1002,13 @@ declare class KbqPipeState<T> {
     /** KbqFilterBar instance
      * @docs-private */
     private readonly filterBar;
-    /** Pipe state used to calculate/update the button style. */
+    /**
+     * Pipe state the styled button belongs to.
+     *
+     * Carries the binding this directive's selector matches. Every binding passes the pipe's own `data`,
+     * which is mutated in place, so this value is a constant for the life of the pipe and the style is
+     * derived from `pipe.isEmpty` instead.
+     */
     readonly state: _angular_core.InputSignal<T | null>;
     constructor();
     private updateState;

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

@@ -5,27 +5,34 @@
     display: flex;
     flex-direction: row;
 
+    // Caps the whole pipe, clear and remove buttons included. The label's grid tracks have no
+    // min-content, so the trigger gives way down to its own paddings without `min-width: 0`.
+    max-width: var(--kbq-filter-bar-pipe-max-width, 320px);
     max-height: 32px;
 
     & .kbq-select .kbq-select__trigger {
         height: unset;
     }
 
-    .kbq-button-wrapper {
-        max-width: var(--kbq-filter-bar-pipe-max-width, 320px);
+    // The button's default slot is a flex row; a pipe puts its own two independently truncated parts
+    // (name + value) in there as two shrinkable grid tracks instead: as flex items they would give up
+    // the same percentage, which wipes out a short name long before a long value becomes unreadable.
+    // Qualified with `.kbq-button` on purpose: the base rule is `.kbq-button .kbq-button-text`, so a
+    // two-class selector would only win on source order, which differs between app bundles.
+    .kbq-button .kbq-button-text {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(0, max-content);
+        align-items: center;
     }
 
     .kbq-pipe__name {
         @include common.kbq-truncate-line();
-
-        flex: 1 1 auto;
     }
 
     .kbq-pipe__value {
         @include common.kbq-truncate-line();
 
-        flex: 1 1 auto;
-
         &:not(.kbq-pipe__value_empty) {
             margin-inline-start: 4px;
         }

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

@@ -1,7 +1,9 @@
 .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.
+    // .kbq-filter-bar, which a pipe rendered outside a bar never sees. The width is explicit, so the cap
+    // every other pipe takes from that token does not apply here.
     width: var(--kbq-filter-bar-pipe-input-width, 240px);
+    max-width: none;
     flex: none;
 
     .kbq-form-field {

package/form-field/index.d.ts

@@ -607,11 +607,9 @@ declare class KbqFormField extends KbqColorDirective implements AfterContentInit
  */
 declare class KbqTrim {
     private readonly noTrim;
-    private ngControl;
-    private original;
+    private readonly ngControl;
     constructor();
     trim(value: any): any;
-    private registerOnChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTrim, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTrim, "[kbqInput], [kbqTextarea]", ["KbqTrim"], {}, {}, never, never, true, never>;
 }

package/link/_link-theme.scss

@@ -1,7 +1,33 @@
+@use 'sass:string';
+
 @use '../core/styles/common/tokens' as *;
 
 @use './link-tokens';
 
+// Unquoted, so that the joiner reaches the CSS as an escape rather than as an invisible character
+$_kbq-link-word-joiner: string.unquote('"\\2060"');
+
+// The width of a 16px icon less half a pixel: Chromium lays out a line that ends in negative letter-spacing a
+// fraction wider than the max-content size it reports, so the full width would push the last word to the next
+// line in a shrink-to-fit container.
+$_kbq-link-trailing-icon-reserve: 15.5px;
+
+// The gap after the text. Before an icon it is part of the reserve instead of a margin: Firefox does not always
+// keep a margin together with the last word, and the icon could wrap alone again.
+@mixin _kbq-link-text-end-gap($gap) {
+    &:not(:last-child) {
+        margin-right: $gap;
+    }
+
+    &:has(+ .kbq-icon) {
+        margin-right: 0;
+
+        &::after {
+            padding-inline-end: calc($gap + $_kbq-link-trailing-icon-reserve);
+        }
+    }
+}
+
 @mixin kbq-link-geometry() {
     display: inline;
 
@@ -38,6 +64,21 @@
                 line-height: 0;
             }
         }
+
+        // A line may break right before an icon, as before any inline-block, and neither a no-break character
+        // nor white-space stops that in every engine. So the text reserves room for the icon after its last
+        // word, glued to it by a word joiner kept out of the accessible name, and the icon moves back into that
+        // room: the last word and the icon fit on the line together or wrap together.
+        .kbq-link__text:has(+ .kbq-icon) {
+            &::after {
+                content: $_kbq-link-word-joiner;
+                content: $_kbq-link-word-joiner / '';
+            }
+
+            + .kbq-icon {
+                margin-inline-start: -$_kbq-link-trailing-icon-reserve;
+            }
+        }
     }
 
     &.kbq-text-with-icon .kbq-link__text {
@@ -45,9 +86,7 @@
             margin-left: var(--kbq-link-size-normal-content-padding);
         }
 
-        &:not(:last-child) {
-            margin-right: var(--kbq-link-size-normal-content-padding);
-        }
+        @include _kbq-link-text-end-gap(var(--kbq-link-size-normal-content-padding));
     }
 
     &.kbq-link_compact {
@@ -65,9 +104,7 @@
                     margin-left: var(--kbq-link-size-compact-content-padding);
                 }
 
-                &:not(:last-child) {
-                    margin-right: var(--kbq-link-size-compact-content-padding);
-                }
+                @include _kbq-link-text-end-gap(var(--kbq-link-size-compact-content-padding));
             }
         }
     }
@@ -78,20 +115,18 @@
                 margin-left: var(--kbq-link-size-big-content-padding);
             }
 
-            &:not(:last-child) {
-                margin-right: var(--kbq-link-size-big-content-padding);
-            }
+            @include _kbq-link-text-end-gap(var(--kbq-link-size-big-content-padding));
         }
     }
 
     &.kbq-text-with-icon.kbq-link_external {
-        .kbq-link__text:not(:last-child) {
-            margin-right: 1px;
+        .kbq-link__text {
+            @include _kbq-link-text-end-gap(1px);
         }
 
         &.kbq-link_compact {
-            .kbq-link__text:not(:last-child) {
-                margin-right: 0;
+            .kbq-link__text {
+                @include _kbq-link-text-end-gap(0px);
             }
 
             .kbq-icon {
@@ -100,8 +135,8 @@
         }
 
         &.kbq-link_big {
-            .kbq-link__text:not(:last-child) {
-                margin-right: 2px;
+            .kbq-link__text {
+                @include _kbq-link-text-end-gap(2px);
             }
         }
     }

package/markdown/index.d.ts

@@ -38,6 +38,8 @@ declare class KbqMarkdownModule {
 
 /**
  * Service for converting Markdown into HTML.
+ *
+ * @docs-private
  */
 declare class KbqMarkdownService {
     /**

package/modal/index.d.ts

@@ -3,12 +3,12 @@ import * as i0 from '@angular/core';
 import { TemplateRef, Type, EventEmitter, Injector, OnInit, OnChanges, AfterViewInit, OnDestroy, ElementRef, ViewContainerRef, SimpleChanges, ComponentRef, PipeTransform, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayRef, Overlay } from '@angular/cdk/overlay';
-import * as i1 from '@koobiq/components/core';
+import * as i2 from '@koobiq/components/core';
 import { KbqComponentColors, KbqOverflowShadowState } from '@koobiq/components/core';
-import * as i2 from '@angular/cdk/a11y';
+import * as i1 from '@koobiq/components/title';
+import * as i2$1 from '@angular/cdk/a11y';
 import * as i3 from '@koobiq/components/button';
 import * as i4 from '@koobiq/components/icon';
-import * as i5 from '@koobiq/components/title';
 import * as i6 from '@angular/common';
 
 type OnClickCallback<T> = (instance: T) => (false | void | {}) | Promise<false | void | {}>;
@@ -85,7 +85,7 @@ type AnimationState = 'enter' | 'leave' | null;
 declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, ModalOptions {
     private overlay;
     private renderer;
-    private cfr;
+    private environmentInjector;
     private elementRef;
     private viewContainer;
     private modalControl;
@@ -256,7 +256,16 @@ declare abstract class KbqModalRef<C = any, R = unknown> {
 declare class KbqModalTitle {
     protected modal: KbqModalComponent<any, any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalTitle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalTitle, "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalTitle, "[kbq-modal-title], kbq-modal-title, [kbqModalTitle]", never, {}, {}, never, ["*", "kbq-modal-caption, [kbq-modal-caption], [kbqModalCaption]"], true, never>;
+}
+/**
+ * Caption of a manually composed modal (`kbqComponent`). Projected into the header rendered by
+ * `KbqModalTitle`, below the title, and clamped to two lines. The resulting markup matches the
+ * header of a modal created via `KbqModalService.create`.
+ */
+declare class KbqModalCaption {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalCaption, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalCaption, "[kbq-modal-caption], kbq-modal-caption, [kbqModalCaption]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.KbqTitleDirective; inputs: {}; outputs: {}; }]>;
 }
 /**
  * Scrollable body of a manually composed modal (`kbqComponent`). Publishes its scroll-shadow
@@ -268,7 +277,7 @@ declare class KbqModalBody {
     private readonly overflowContainer;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalBody, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", never, {}, {}, never, never, true, [{ directive: typeof i1.KbqOverflowShadowContainer; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqModalBody, "[kbq-modal-body], kbq-modal-body, [kbqModalBody]", never, {}, {}, never, never, true, [{ directive: typeof i2.KbqOverflowShadowContainer; inputs: {}; outputs: {}; }]>;
 }
 declare class KbqModalFooter {
     protected modal: KbqModalComponent<any, any>;
@@ -288,7 +297,7 @@ declare class CssUnitPipe implements PipeTransform {
 
 declare class KbqModalModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqModalModule, never, [typeof i1$1.OverlayModule, typeof i2.A11yModule, typeof i3.KbqButtonModule, typeof i4.KbqIconModule, typeof i5.KbqTitleModule, typeof i6.NgTemplateOutlet, typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalBody, typeof KbqModalFooter, typeof CssUnitPipe, typeof KbqModalMainAction], [typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalBody, typeof KbqModalFooter, typeof KbqModalMainAction]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqModalModule, never, [typeof i1$1.OverlayModule, typeof i2$1.A11yModule, typeof i3.KbqButtonModule, typeof i4.KbqIconModule, typeof i1.KbqTitleModule, typeof i6.NgTemplateOutlet, typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalCaption, typeof KbqModalBody, typeof KbqModalFooter, typeof CssUnitPipe, typeof KbqModalMainAction], [typeof KbqModalComponent, typeof KbqModalTitle, typeof KbqModalCaption, typeof KbqModalBody, typeof KbqModalFooter, typeof KbqModalMainAction]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqModalModule>;
 }
 
@@ -326,5 +335,5 @@ declare class KbqModalService {
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqModalService>;
 }
 
-export { KBQ_MODAL_DATA, KbqModalBody, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, MODAL_ANIMATE_DURATION, ModalBuilderForService, ModalSize };
+export { KBQ_MODAL_DATA, KbqModalBody, KbqModalCaption, KbqModalComponent, KbqModalFooter, KbqModalMainAction, KbqModalModule, KbqModalRef, KbqModalService, KbqModalTitle, MODAL_ANIMATE_DURATION, ModalBuilderForService, ModalSize };
 export type { ConfirmType, IModalButtonOptions, IModalOptionsForService, ModalOptions, ModalType, OnClickCallback };

package/navbar/_navbar-item_horizontal.scss

@@ -19,6 +19,11 @@
 
     justify-content: center;
 
+    // Hit area over the margin this item is spaced with, so the highlight does not drop out between
+    // items (DS-2558) — the transparent pseudo-element is hit-tested as part of the item, so hover and
+    // click both reach it. `:after` below paints the highlight, at the item's own box. The same
+    // technique is written twice more: `select.item-active-area()` for a plain vertical list, and
+    // `--kbq-button-toggle-size-item-hit-area-*` for a group whose `gap` two neighbours have to tile.
     &:before {
         top: calc(-1 * #{var(--kbq-size-s)});
         left: calc(-1 * #{var(--kbq-size-s)});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "20.3.0",
+    "version": "20.3.2",
     "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.3.0",
-        "@koobiq/angular-luxon-adapter": "20.3.0",
+        "@koobiq/angular-moment-adapter": "20.3.2",
+        "@koobiq/angular-luxon-adapter": "20.3.2",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "^3.14.0"