@koobiq/components 20.3.2 → 20.4.0

package/inline-edit/index.d.ts

@@ -1,14 +1,46 @@
+import * as _koobiq_components_core from '@koobiq/components/core';
+import { KbqConnectedOverlayOriginProvider, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
 import * as _angular_core from '@angular/core';
-import { ElementRef, TemplateRef } from '@angular/core';
+import { InjectionToken, ElementRef, TemplateRef } from '@angular/core';
 import { ScrollStrategy, CdkConnectedOverlay } from '@angular/cdk/overlay';
-import { KbqConnectedOverlayOriginProvider, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqLabel, KbqFormField } from '@koobiq/components/form-field';
 import { KbqSelect } from '@koobiq/components/select';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { Observable } from 'rxjs';
 import * as i1 from '@angular/cdk/a11y';
 
+/** Delay before the save progress state appears, so a fast response causes no flicker. */
+declare const kbqInlineEditSaveProgressDelay = 100;
+/** Minimum time the save progress state stays once it has appeared. */
+declare const kbqInlineEditSaveProgressMinimumDuration = 300;
 type KbqInlineEditMode = 'view' | 'edit';
+/**
+ * Saves the edited value, e.g. sends it to a server. Only the first emission counts, and the observable must emit
+ * or complete: destroying the row does not cancel it, so one that never settles keeps the row in memory.
+ *
+ * Called without a receiver, so bind an arrow function rather than a method that relies on `this`.
+ */
+type KbqInlineEditSaveHandler = () => Observable<unknown>;
+/** State of the save request started by `saveHandler`. `progress` is `pending` past the indicator delay. */
+type KbqInlineEditSaveStatus = 'idle' | 'pending' | 'progress' | 'error';
+/** Recovery a failed-save notification can offer: retry, edit again, discard the unsaved value. */
+interface KbqInlineEditSaveRecovery {
+    retrySave(): void;
+    toggleMode(): void;
+    rollback(): void;
+}
+/** Failed save, reported through `saveError` and `KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER`. */
+interface KbqInlineEditSaveErrorContext<E = any> {
+    /** Parameterise the interface to type this. */
+    readonly error: E;
+    /** Inline edit whose save failed. */
+    readonly inlineEdit: KbqInlineEditSaveRecovery;
+}
+/** Reaction to a failed save, e.g. opening a toast. */
+type KbqInlineEditSaveErrorHandler = (context: KbqInlineEditSaveErrorContext) => void;
+/** Reports every failed save the same way across the application. Declare it in the root injector. */
+declare const KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER: InjectionToken<KbqInlineEditSaveErrorHandler>;
 /** @docs-private */
 declare class KbqFocusRegionItem {
     readonly tabOut: _angular_core.OutputEmitterRef<KeyboardEvent>;
@@ -38,7 +70,9 @@ declare class KbqInlineEditMenu {
  * This component is projecting edit/view mode templates and adds keyboard/pointer handlers.
  * Edit mode opens in a positioned overlay that matches the view mode width or can be customized.
  */
-declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
+declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInlineEditSaveRecovery {
+    /** Texts of the save status announcements. */
+    protected readonly a11yLocaleConfiguration: _angular_core.Signal<_koobiq_components_core.KbqA11yLocaleConfiguration>;
     private readonly overlay;
     private readonly document;
     private readonly window;
@@ -46,6 +80,7 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     protected readonly elementRef: ElementRef<HTMLElement>;
     private readonly ngZone;
     private readonly scrollDispatcher;
+    private readonly destroyRef;
     /**
      * The validation tooltip is anchored inside the edit-mode overlay — an overlay inside another
      * overlay. Its default `close()` scroll strategy would close it the moment either overlay's
@@ -83,6 +118,22 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     readonly getValueHandler: _angular_core.InputSignal<(() => unknown) | undefined>;
     /** Handler function to update the value */
     readonly setValueHandler: _angular_core.InputSignal<((value: any) => void) | undefined>;
+    /**
+     * Whether the value still equals the one the editor opened with, in which case `saveHandler` is not called.
+     * The default suits text and numbers; bind your own for arrays and objects, or `null` to send every time.
+     * A failed save is always retried, however the values compare.
+     */
+    readonly compareWith: _angular_core.InputSignal<((a: any, b: any) => boolean) | null>;
+    /**
+     * Saves a valid value in the background: edit mode closes right away and view mode reports how the request
+     * went. Without it, a valid value is saved immediately.
+     */
+    readonly saveHandler: _angular_core.InputSignal<KbqInlineEditSaveHandler | undefined>;
+    /**
+     * Reaction to a failed save for this inline edit alone. Defaults to `KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER`;
+     * bind `null` to leave it without one.
+     */
+    readonly saveErrorHandler: _angular_core.InputSignal<KbqInlineEditSaveErrorHandler | null>;
     /** Customizable function that checks if saving on enter available. */
     readonly canSaveOnEnter: _angular_core.InputSignal<(event: KeyboardEvent) => boolean>;
     /**
@@ -97,6 +148,8 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     protected readonly saved: _angular_core.OutputEmitterRef<void>;
     /** Emitted when the inline edit is canceled and changes are discarded. */
     protected readonly canceled: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when a `saveHandler` request fails. Silent once the row is destroyed; `saveErrorHandler` is not. */
+    protected readonly saveError: _angular_core.OutputEmitterRef<KbqInlineEditSaveErrorContext<any>>;
     /** Emitted when mode switched to edit/view */
     protected readonly modeChange: _angular_core.OutputEmitterRef<KbqInlineEditMode>;
     /** @docs-private */
@@ -133,6 +186,17 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     protected readonly scrollStrategy: _angular_core.WritableSignal<ScrollStrategy>;
     /** @docs-private */
     readonly modeAsReadonly: _angular_core.Signal<KbqInlineEditMode>;
+    private readonly saveStatusSource;
+    /** State of the background save started by `saveHandler`. */
+    readonly saveStatus: _angular_core.Signal<KbqInlineEditSaveStatus>;
+    /** @docs-private */
+    protected readonly isSaving: _angular_core.Signal<boolean>;
+    /**
+     * Both save states are otherwise conveyed by colour alone. `aria-busy` cannot carry the first one: it is set
+     * on the row, which contains this region, and that tells assistive tech to hold the announcement back.
+     * @docs-private
+     */
+    protected readonly saveStatusMessage: _angular_core.Signal<string>;
     /** @docs-private */
     protected readonly className: _angular_core.Signal<string>;
     /** @docs-private */
@@ -148,10 +212,15 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     /** @docs-private */
     protected readonly colors: typeof KbqComponentColors;
     private initialValue;
+    /** Value sent by the in-flight `saveHandler` request, which becomes `lastSavedValue` once it succeeds. */
+    private submittedValue;
+    /** Last value the server accepted — what `rollback()` restores after a failed save. */
+    private lastSavedValue;
+    private destroyed;
     /** Handle for an in-flight `showValidationTooltip()` scroll/settle request, if any. */
     private validationTooltipScrollHandle;
     constructor();
-    /** Manually switch mode */
+    /** Manually switch mode. Does nothing while a `saveHandler` request is in flight. */
     toggleMode(): void;
     /**
      * Implements `KbqConnectedOverlayOriginProvider`, letting a nested `KbqFormField`'s control
@@ -160,14 +229,22 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
      * @docs-private
      */
     getConnectedOverlayOrigin(): ElementRef | undefined;
-    /** Saves the current value and returns to view mode, running the same validation as a normal save. */
+    /** Saves the current value, running the same validation as a normal save. */
     commit(): void;
+    /** Repeats the request for a value the server rejected. Does nothing unless the last save failed. */
+    retrySave(): void;
+    /** Discards the value the server rejected, restoring the last saved one and closing the editor. */
+    rollback(): void;
     /** @docs-private */
     protected onClick(event: Event): void;
     /** @docs-private */
     protected onAttach(): void;
     /** @docs-private */
     protected save($event?: Event): void;
+    /** Runs `saveHandler` once and maps its lifecycle onto `saveStatus`, holding the progress state steady. */
+    private startSave;
+    private onSaveSucceeded;
+    private onSaveFailed;
     /**
      * Whether `overlayOrigin` is fully within the viewport and every registered `CdkScrollable`
      * ancestor between it and the viewport. Ancestors without the `CdkScrollable` directive aren't
@@ -207,6 +284,8 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
      */
     private setOverlayKeydownListener;
     private saveAndFocusNextInlineEdit;
+    /** Whether saving would send back the value the editor opened with. */
+    private isUnchanged;
     private isInvalid;
     private getValue;
     private setValue;
@@ -216,7 +295,7 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider {
     private getInputNativeElement;
     private markAllAsTouched;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList", "selectRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "saveHandler": { "alias": "saveHandler"; "required": false; "isSignal": true; }; "saveErrorHandler": { "alias": "saveErrorHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "saveError": "saveError"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList", "selectRef"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }
 
 declare class KbqInlineEditModule {
@@ -225,5 +304,5 @@ declare class KbqInlineEditModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqInlineEditModule>;
 }
 
-export { KbqFocusRegionItem, KbqInlineEdit, KbqInlineEditMenu, KbqInlineEditModule, KbqInlineEditPlaceholder };
-export type { KbqInlineEditMode };
+export { KBQ_INLINE_EDIT_SAVE_ERROR_HANDLER, KbqFocusRegionItem, KbqInlineEdit, KbqInlineEditMenu, KbqInlineEditModule, KbqInlineEditPlaceholder, kbqInlineEditSaveProgressDelay, kbqInlineEditSaveProgressMinimumDuration };
+export type { KbqInlineEditMode, KbqInlineEditSaveErrorContext, KbqInlineEditSaveErrorHandler, KbqInlineEditSaveHandler, KbqInlineEditSaveRecovery, KbqInlineEditSaveStatus };

package/inline-edit/inline-edit-tokens.scss

@@ -5,4 +5,5 @@
     --kbq-inline-edit-padding-vertical: calc(var(--kbq-size-xs) - var(--kbq-size-border-width));
     --kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);
     --kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-inline-edit-error-background: var(--kbq-background-error-less);
 }

package/inline-edit/inline-edit.scss

@@ -81,6 +81,31 @@
     }
 }
 
+/**
+ * A save the server rejected keeps the unsaved value marked until the user reacts to the notification, so the
+ * state outlives the request itself. Every state `_inline-edit-theme()` paints a background for is repeated here
+ * with the error color: each of its selectors is more specific than the plain `.kbq-inline-edit_save-error` rule,
+ * so leaving one out would drop the marking in that state.
+ */
+@mixin _inline-edit-save-error-theme {
+    &.kbq-inline-edit_view.kbq-inline-edit_save-error {
+        --kbq-inline-edit-background: var(--kbq-inline-edit-error-background);
+
+        &:not(.kbq-inline-edit_disabled) {
+            &:hover {
+                --kbq-inline-edit-background: var(--kbq-states-background-error-less-hover);
+                --kbq-mask-background: var(--kbq-states-background-error-less-hover);
+            }
+
+            &:active,
+            &:has(.kbq-inline-edit__menu.kbq-active) {
+                --kbq-inline-edit-background: var(--kbq-states-background-error-less-active);
+                --kbq-mask-background: var(--kbq-states-background-error-less-active);
+            }
+        }
+    }
+}
+
 @mixin _inline-edit-typography {
     @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
 }
@@ -97,6 +122,7 @@
     min-height: var(--kbq-inline-edit-height);
 
     @include _inline-edit-theme();
+    @include _inline-edit-save-error-theme();
     @include _inline-edit-typography();
 
     &:not(.kbq-inline-edit_with-label) {

package/list/index.d.ts

@@ -8,7 +8,7 @@ import * as i1 from '@angular/cdk/drag-drop';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i3 from '@koobiq/components/core';
-import { FocusKeyManager, IFocusableOption, KbqTitleTextRef, KbqOptgroup, KbqOptionActionComponent, KbqPseudoCheckbox, MultipleMode, KbqLine } from '@koobiq/components/core';
+import { FocusKeyManager, IFocusableOption, KbqTitleTextRef, KbqOptgroup, KbqOptionActionComponent, KbqPseudoCheckbox, KbqPseudoCheckboxState, MultipleMode, KbqLine } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject, Observable } from 'rxjs';
@@ -125,6 +125,72 @@ declare class KbqListSelection<T = any> implements AfterContentInit, AfterViewIn
     readonly dropped: _angular_core.OutputEmitterRef<KbqListSelectionDroppedEvent>;
     /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
     readonly selectAllToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether to render the "select all" master checkbox above the options. `multiple="checkbox"` only —
+     * a vertical list, since the row is a full-width heading of the column it governs.
+     *
+     * The row acts on every option the user can toggle, disabled ones excluded. Enabling it also makes
+     * Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox never disagree ({@link selectAllToggle}
+     * is implied).
+     *
+     * Aliased rather than named `selectAll`, which is already taken by the imperative method of that name.
+     */
+    readonly selectAllEnabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Reference to the built-in "select all" row, rendered only while `selectAll` is on.
+     *
+     * Located by template reference rather than by the `KbqListOption` type: that class is declared
+     * below this one in the same file, and a query locator is evaluated while this class is being
+     * defined, which would read it in its temporal dead zone.
+     */
+    readonly selectAllOption: _angular_core.Signal<KbqListOption<T> | undefined>;
+    /**
+     * The options the key manager navigates: the "select all" row first, then the projected ones.
+     *
+     * Kept apart from {@link options} because that query is public API and means "the options the consumer
+     * projected" — a synthetic entry there would corrupt `getSelectedOptionValues`, the drop-indicator
+     * geometry and every consumer tally built on it.
+     * @docs-private
+     */
+    readonly navigableOptions: QueryList<KbqListOption<T>>;
+    /**
+     * The virtual scroller rendering the options, when the consumer projected one.
+     *
+     * A signal query rather than a DOM probe, mirroring `KbqSelect.cdkVirtualForOf`: it resolves on the
+     * server as well as in the browser, and it follows a viewport that appears later behind the
+     * consumer's own `@if`.
+     */
+    private readonly virtualScroll;
+    /**
+     * Whether the "select all" row is currently rendered.
+     *
+     * Suppressed inside a `cdk-virtual-scroll-viewport`: `options` then holds only the options currently
+     * rendered, so the checkbox would report "everything selected" after touching a fraction of the data
+     * — the same reason `kbq-select` refuses the row under `withVirtualScroll`. Suppressed on an empty
+     * list too: a master checkbox over nothing has nothing to say.
+     */
+    protected get showSelectAll(): boolean;
+    /** Label of the "select all" row. Follows the active locale. */
+    protected selectAllText: string;
+    private readonly localeService?;
+    /** Updates locale parameters from the locale service. */
+    private updateLocaleParams;
+    /** Whether every option "select all" can act on is selected. */
+    get allOptionsSelected(): boolean;
+    /** State of the "select all" master checkbox. */
+    get selectAllState(): KbqPseudoCheckboxState;
+    /**
+     * Options "select all" acts on, and the ones its checkbox state is derived from. Read from
+     * {@link options}, so the row it renders itself is never among them.
+     */
+    private get selectAllTargets();
+    /**
+     * Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart.
+     *
+     * Takes the items rather than reading {@link selectAllTargets} itself: the toggle needs that array for
+     * the emitted event anyway, and deriving it here as well would walk the whole option list twice.
+     */
+    private selectAllAdapter;
     multipleMode: MultipleMode | null;
     get multiple(): boolean;
     readonly horizontal: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -179,15 +245,49 @@ declare class KbqListSelection<T = any> implements AfterContentInit, AfterViewIn
     /** Whether a form control has ever written to the list, i.e. whether {@link _value} speaks for a model. */
     private hasWrittenValue;
     constructor();
+    /** Rebuilds {@link navigableOptions}: the "select all" row, when rendered, leads the projected options. */
+    private syncNavigableOptions;
+    /**
+     * Marks the list for check after an option changed something the "select all" row is derived from —
+     * its selection or its `disabled` state.
+     *
+     * An option marking itself only asks its ancestors to traverse down to it; it does not re-evaluate
+     * their own bindings. Without this the row keeps painting a state the options have already left, and
+     * a click on a checkbox showing `indeterminate` over an already-full selection takes the deselect
+     * branch — doing the opposite of what the user was shown.
+     * @docs-private
+     */
+    refreshSelectAllState(): void;
+    /** Whether the option is the built-in "select all" row rather than one the consumer projected. */
+    private isSelectAllRow;
+    /**
+     * Selects every option "select all" can act on, or deselects them all when they are already selected.
+     *
+     * Backs both the master checkbox and Ctrl/Cmd + A, so the two can never disagree. Reports the value
+     * once for the whole batch instead of once per option.
+     */
+    toggleSelectAll(): void;
+    /**
+     * Whether a repeated toggle deselects. Keyed on {@link showSelectAll} rather than on the raw input:
+     * with no row on screen there is no checkbox for the shortcut to agree with, so the attribute must
+     * not quietly change what Ctrl/Cmd + A does.
+     */
+    private get allowSelectAllDeselect();
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(): void;
     /** Clears the active key-manager item (unless an option is still focused) and marks the list as touched. */
     blur(): void;
-    /** Selects every non-disabled option and reports the new value to the `ControlValueAccessor`. */
+    /**
+     * Selects every option and reports the new value to the `ControlValueAccessor`.
+     *
+     * Unlike the `selectAll` attribute and Ctrl/Cmd + A, this acts on disabled options as well — it is
+     * an imperative command, not something the user performed. See {@link toggleSelectAll} for the
+     * behaviour the master checkbox has.
+     */
     selectAll(): void;
-    /** Deselects every option and reports the new value to the `ControlValueAccessor`. */
+    /** Deselects every option, disabled ones included, and reports the new value. See {@link selectAll}. */
     deselectAll(): void;
     updateScrollSize(): void;
     setSelectedOptionsByClick(option: KbqListOption<T>, shiftKey: boolean, ctrlKey: boolean): void;
@@ -235,6 +335,11 @@ declare class KbqListSelection<T = any> implements AfterContentInit, AfterViewIn
     private isValidIndex;
     private getOptionIndex;
     private setupDropListInitialProperties;
+    /**
+     * Says once, in dev mode, why `selectAll` produced no row: the master checkbox could only ever act on
+     * the options the scroller happens to have rendered, so the row is dropped rather than left lying.
+     */
+    private warnOnUnsupportedSelectAllContainer;
     /**
      * `CdkDropList` numbers only the options it has rendered, so inside a virtual scroll the indices
      * `dropped` reports do not address the consumer's backing array and the move silently lands on the
@@ -287,7 +392,7 @@ declare class KbqListSelection<T = any> implements AfterContentInit, AfterViewIn
     private _selectAllHandler;
     private copyActiveOption;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqListSelection<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqListSelection<any>, "kbq-list-selection", ["kbqListSelection"], { "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "connectedTo": { "alias": "connectedTo"; "required": false; "isSignal": true; }; "dragPreview": { "alias": "dragPreview"; "required": false; "isSignal": true; }; "dragCursor": { "alias": "dragCursor"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "dropped": "dropped"; "selectionChange": "selectionChange"; }, ["options"], ["*"], true, [{ directive: typeof i1.CdkDropList; inputs: { "id": "id"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqListSelection<any>, "kbq-list-selection", ["kbqListSelection"], { "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "connectedTo": { "alias": "connectedTo"; "required": false; "isSignal": true; }; "dragPreview": { "alias": "dragPreview"; "required": false; "isSignal": true; }; "dragCursor": { "alias": "dragCursor"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAllEnabled": { "alias": "selectAll"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "dropped": "dropped"; "selectionChange": "selectionChange"; }, ["virtualScroll", "options"], ["*"], true, [{ directive: typeof i1.CdkDropList; inputs: { "id": "id"; }; outputs: {}; }]>;
     static ngAcceptInputType_draggable: unknown;
     static ngAcceptInputType_disabled: unknown;
 }
@@ -335,6 +440,15 @@ declare class KbqListOption<T = any> implements OnDestroy, OnInit, IFocusableOpt
      */
     textElement: ElementRef;
     readonly checkboxPosition: _angular_core.InputSignal<"before" | "after">;
+    /**
+     * Whether this option is the list's "select all" row rather than one the consumer projected.
+     *
+     * Such a row has no `value` and no place in the `SelectionModel`, so everything that would resolve
+     * it against the list's selection is skipped; its checkbox state and its selected look are driven
+     * from the outside instead. It also stays out of the drag-and-drop registry — see the constructor.
+     * @docs-private
+     */
+    readonly selectAllRow: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
      * in the first cycle.
@@ -381,6 +495,13 @@ declare class KbqListOption<T = any> implements OnDestroy, OnInit, IFocusableOpt
     set selected(value: boolean);
     private _selected;
     get tabIndex(): number | null;
+    /** `aria-selected` of the row. The "select all" row reports `aria-checked` instead. */
+    protected get ariaSelected(): boolean | null;
+    /**
+     * Tri-state of the "select all" row, `mixed` included. `null` for an ordinary option, which
+     * reports `aria-selected` instead.
+     */
+    protected get ariaChecked(): string | null;
     protected get externalPseudoCheckbox(): boolean;
     /**
      * Whether the row itself advertises the grab. Gated on `draggable` so that a pinned option inside a
@@ -437,7 +558,7 @@ declare class KbqListOption<T = any> implements OnDestroy, OnInit, IFocusableOpt
     /** The option's host DOM element. */
     getHostElement(): HTMLElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqListOption<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqListOption<any>, "kbq-list-option", ["kbqListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "pseudoCheckbox", "dragHandles", "tooltipTrigger", "dropdownTrigger"], ["kbq-pseudo-checkbox", "[kbq-icon]", "*", "[kbq-list-option-caption]", "kbq-option-action"], true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqListOption<any>, "kbq-list-option", ["kbqListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; "isSignal": true; }; "selectAllRow": { "alias": "selectAllRow"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "pseudoCheckbox", "dragHandles", "tooltipTrigger", "dropdownTrigger"], ["kbq-pseudo-checkbox", "[kbq-icon]", "*", "[kbq-list-option-caption]", "kbq-option-action"], true, [{ directive: typeof i1.CdkDrag; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_draggable: unknown;
     static ngAcceptInputType_selected: unknown;

package/package.json

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

package/schematics/ng-add/index.js

@@ -27,7 +27,7 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^20.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^20.3.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^20.4.0");
         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', "^12.2.0");

package/select/index.d.ts

@@ -54,12 +54,18 @@ declare class KbqOptionTooltip extends KbqTooltipTrigger implements AfterViewIni
     private readonly resizeObserver;
     private readonly contentObserver;
     private readonly isBrowser;
+    private readonly window;
     private readonly debounceInterval;
     private resizeSubscription;
     private contentObserverSubscription;
     private focusMonitorSubscription;
     get textElement(): HTMLElement;
     get isOverflown(): boolean;
+    /**
+     * Whether one of the option's own line boxes is truncating its text. The ellipsis is part of the
+     * condition, so a child clipping for another reason is not read as truncated text.
+     */
+    private hasClippedLine;
     constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/tabs/_tabs-common.scss

@@ -139,14 +139,23 @@
     .kbq-tab-header__pagination {
         @include vendor-prefixes.user-select(none);
 
-        position: relative;
+        // Overlaid on top of the scroll container (rather than a flex sibling reserving its own
+        // space) so the tab list always spans the full width, matching Koobiq React: the button
+        // itself fades away at each scroll bound instead of the tab list resizing around it.
+        position: absolute;
+        inset-block: 0;
         display: none;
         justify-content: center;
         align-items: center;
         z-index: 2;
         -webkit-tap-highlight-color: transparent;
-        touch-action: none;
+        // Not `none`: this element overlays live scroll-container edge, so `none` also blocks a
+        // touch swipe that starts in that band from panning the strip at all. `manipulation` still
+        // suppresses double-tap-to-zoom, which is all this was here for.
+        touch-action: manipulation;
         padding: 0 var(--kbq-size-m);
+        opacity: 1;
+        visibility: visible;
 
         .kbq-tab-header__pagination-controls_enabled & {
             display: flex;
@@ -155,6 +164,106 @@
         &:not(.kbq-disabled) {
             cursor: pointer;
         }
+
+        &.kbq-disabled {
+            opacity: 0;
+            visibility: hidden;
+            pointer-events: none;
+        }
+    }
+
+    .kbq-tab-header__pagination_before {
+        inset-inline-start: 0;
+    }
+
+    .kbq-tab-header__pagination_after {
+        inset-inline-end: 0;
+    }
+
+    .kbq-tab-header__scroll-container {
+        @include vendor-prefixes.user-select(none);
+
+        // Matches `.kbq-tab-header__pagination`'s real rendered width (its horizontal padding
+        // twice, plus the 16px arrow icon) rather than an unrelated constant — otherwise the label
+        // underneath fades in for a few pixels *before* it clears the paginator it's still hidden
+        // behind, which is a band that's visible but can't be clicked (the paginator, not the
+        // label, is what's on top there).
+        --mask-size: calc(var(--kbq-size-m) * 2 + 16px);
+
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        // `kbq-tab-group_vertical` sits on an ancestor either way: the `<kbq-tab-group>` wrapping a
+        // `kbq-tab-header`, or the `[kbqTabNavBar]` host itself — so one descendant selector covers
+        // both `KbqPaginatedTabHeader` subclasses instead of the two disagreeing on the scrollbar.
+        .kbq-tab-group_vertical & {
+            overflow-x: hidden;
+            overflow-y: auto;
+            scrollbar-width: auto;
+
+            &::-webkit-scrollbar {
+                display: block;
+            }
+        }
+
+        .kbq-tab-header__pagination-controls_enabled & {
+            cursor: grab;
+        }
+
+        &.kbq-tab-header__scroll-container_dragging {
+            cursor: grabbing;
+        }
+
+        &.kbq-tab-header__scroll-container_overflow-before {
+            mask-image: linear-gradient(to right, transparent var(--mask-size), #000 calc(var(--mask-size) * 1.5));
+        }
+
+        &.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to right,
+                #000 calc(100% - var(--mask-size) * 1.5),
+                transparent calc(100% - var(--mask-size))
+            );
+        }
+
+        &.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to right,
+                transparent var(--mask-size),
+                #000 calc(var(--mask-size) * 1.5),
+                #000 calc(100% - var(--mask-size) * 1.5),
+                transparent calc(100% - var(--mask-size))
+            );
+        }
+
+        .kbq-tab-header_rtl &.kbq-tab-header__scroll-container_overflow-before {
+            mask-image: linear-gradient(to left, transparent var(--mask-size), #000 calc(var(--mask-size) * 1.5));
+        }
+
+        .kbq-tab-header_rtl &.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to left,
+                #000 calc(100% - var(--mask-size) * 1.5),
+                transparent calc(100% - var(--mask-size))
+            );
+        }
+
+        .kbq-tab-header_rtl
+            &.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to left,
+                transparent var(--mask-size),
+                #000 calc(var(--mask-size) * 1.5),
+                #000 calc(100% - var(--mask-size) * 1.5),
+                transparent calc(100% - var(--mask-size))
+            );
+        }
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {