@koobiq/components 20.3.1 → 20.4.0

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/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 | {}>;
@@ -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.1",
+    "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.1",
-        "@koobiq/angular-luxon-adapter": "20.3.1",
+        "@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"