@ng-doc/ui-kit 22.0.0-beta.2 → 22.1.0

package/types/ng-doc-ui-kit-classes-base-input.d.ts

@@ -4,17 +4,28 @@ import { DIControl } from 'di-controls';
 import { DIControlConfig } from 'di-controls/controls';
 import { Subject } from 'rxjs';
 
+/**
+ * Base class of the directives that turn a native `input` into a UI Kit control
+ * (`ngDocInputString`, `ngDocInputNumber`). Input wrappers and comboboxes query it to read the
+ * state of their input.
+ */
 declare abstract class NgDocBaseInput<T> extends DIControl<T> {
     readonly elementRef: ElementRef<HTMLInputElement>;
+    /** Emits after the input updates its model from a user edit. */
     readonly changes: Subject<void>;
     protected readonly document: Document;
     protected constructor(config?: DIControlConfig<T, T>);
-    get hostClasses(): string;
+    /** Placeholder of the native input. */
     get placeholder(): string;
+    /** Whether the native input has focus. */
     get isFocused(): boolean;
+    /** Whether the native input is read-only. */
     get isReadonly(): boolean;
+    /** Current text of the native input. */
     get value(): string;
+    /** Focuses the native input. */
     focus(): void;
+    /** Replays the `-blink` animation class on the native input. */
     blink(): void;
     updateModel(value: T | null): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocBaseInput<any>, never>;

package/types/ng-doc-ui-kit-classes-overlay-ref.d.ts

@@ -1,20 +1,34 @@
 import { OverlayRef, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
 import { Location } from '@angular/common';
-import { NgZone } from '@angular/core';
+import { Injector } from '@angular/core';
 import { Router } from '@angular/router';
 import { NgDocOverlayContainer, NgDocOverlayConfig } from '@ng-doc/ui-kit/interfaces';
 import { Observable } from 'rxjs';
 
+/**
+ * A handle to an opened overlay (a dropdown, a tooltip or a dialog).
+ *
+ * `NgDocOverlayService.open()` creates it, and the overlay content can inject it to close itself.
+ */
 declare class NgDocOverlayRef<T = unknown> {
     readonly overlayRef: OverlayRef;
     private readonly overlayConfig;
     readonly overlayContainer: NgDocOverlayContainer;
-    private readonly ngZone;
+    private readonly injector;
     private readonly router?;
     private readonly location?;
     private overlayResult;
     private opened;
-    constructor(overlayRef: OverlayRef, overlayConfig: NgDocOverlayConfig, overlayContainer: NgDocOverlayContainer, ngZone: NgZone, router?: Router | undefined, location?: Location | undefined);
+    /**
+     * @param overlayRef - The CDK overlay that hosts the container.
+     * @param overlayConfig - The configuration the overlay was opened with.
+     * @param overlayContainer - The container component rendered inside the overlay.
+     * @param injector - Injector the overlay uses to follow application renders. It must be able to
+     * inject NgZone; the component or environment injector of the opener is enough.
+     * @param router - Closes the overlay after a navigation when `disposeOnRouteNavigation` is set.
+     * @param location - Closes the overlay on a location change when `disposeOnNavigation` is set.
+     */
+    constructor(overlayRef: OverlayRef, overlayConfig: NgDocOverlayConfig, overlayContainer: NgDocOverlayContainer, injector: Injector, router?: Router | undefined, location?: Location | undefined);
     /** Sets focus to overlay */
     focus(): void;
     /** Overlay has focus */
@@ -25,7 +39,7 @@ declare class NgDocOverlayRef<T = unknown> {
     get hasAttached(): boolean;
     /**
      * Closes overlay
-     * @param closeResult
+     * @param closeResult - The value `beforeClose()` and `afterClose()` emit.
      */
     close(closeResult?: T): void;
     beforeOpen(): Observable<void>;
@@ -33,6 +47,15 @@ declare class NgDocOverlayRef<T = unknown> {
     beforeClose(): Observable<T | null>;
     afterClose(): Observable<T | null>;
     positionChanges(): Observable<ConnectedOverlayPositionChange>;
+    /**
+     * Repositions the overlay when its origin moves or resizes.
+     *
+     * The origin is measured after application renders rather than when the zone becomes stable,
+     * which never happens in a zoneless application. The debounce timer starts outside the Angular zone so that it
+     * does not trigger another change detection (and another render) in a zone.js application.
+     * @param origin - The element the overlay is connected to.
+     */
+    private followOrigin;
     private outsideClickChecker;
 }
 

package/types/ng-doc-ui-kit-components-blockquote.d.ts

@@ -1,11 +1,28 @@
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
 import { NgDocBlockquoteType } from '@ng-doc/ui-kit/types';
-import * as i0 from '@angular/core';
 
+/**
+ * A callout. A Markdown blockquote whose first word is a bold type name, such as Note, renders
+ * as this component.
+ *
+ * The `note`, `warning`, `alert` and `success` types show their icon and their name as a title
+ * ("Note", "Warning", ...). A callout with a custom `icon` shows no type title, only its `label`
+ * when it has one. The `default` type has neither an icon nor a title.
+ */
 declare class NgDocBlockquoteComponent {
-    type: NgDocBlockquoteType;
-    icon?: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocBlockquoteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocBlockquoteComponent, "blockquote[ng-doc-blockquote]", never, { "type": { "alias": "type"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["*"], true, never>;
+    /** Callout type; it selects the colour, the icon and the title. */
+    readonly type: _angular_core.InputSignal<NgDocBlockquoteType>;
+    /** Name of an icon that replaces the type's icon; the type title is not shown then. */
+    readonly icon: _angular_core.InputSignal<string | undefined>;
+    /** A title that replaces the type title, for example "Deprecated". */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** The icon that is shown, if any. */
+    protected readonly iconName: Signal<string | undefined>;
+    /** The title that is shown, if any. */
+    protected readonly title: Signal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocBlockquoteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocBlockquoteComponent, "blockquote[ng-doc-blockquote]", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocBlockquoteComponent };

package/types/ng-doc-ui-kit-components-button-icon.d.ts

@@ -1,11 +1,29 @@
+import * as _angular_core from '@angular/core';
 import { NgDocSize } from '@ng-doc/ui-kit/types';
-import * as i0 from '@angular/core';
 
+/**
+ * A square button that holds a single icon.
+ *
+ * The `large` size is the 36px header button. Set `[rounded]="false"` for the rounded-square
+ * shape of the NgDoc header.
+ * @example
+ * ```html
+ * <button ng-doc-button-icon size="large" [rounded]="false" aria-label="Open menu">
+ *   <ng-doc-icon icon="menu" />
+ * </button>
+ * ```
+ */
 declare class NgDocButtonIconComponent {
-    size: NgDocSize;
-    rounded: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocButtonIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocButtonIconComponent, "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", never, { "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, {}, never, ["*"], true, never>;
+    /**
+     * Size of the button: `small` (24px), `medium` (32px) or `large` (36px).
+     */
+    readonly size: _angular_core.InputSignal<NgDocSize>;
+    /**
+     * Whether the button is a circle. When `false`, it is a rounded square.
+     */
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocButtonIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocButtonIconComponent, "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocButtonIconComponent };

package/types/ng-doc-ui-kit-components-button-toggle.d.ts

@@ -1,9 +1,13 @@
 import { DIStateControl } from 'di-controls';
 import * as i0 from '@angular/core';
 
+/**
+ * Button that checks its `value` in the host control (for example `ngDocRadioGroup`) when
+ * clicked, and unchecks it when clicked again.
+ */
 declare class NgDocButtonToggleComponent<T> extends DIStateControl<T> {
     constructor();
-    clickEvent(): void;
+    protected clickEvent(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocButtonToggleComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocButtonToggleComponent<any>, "[ng-doc-button-toggle]", never, {}, {}, never, ["*"], true, never>;
 }

package/types/ng-doc-ui-kit-components-button.d.ts

@@ -1,5 +1,5 @@
+import * as _angular_core from '@angular/core';
 import { NgDocSize, NgDocColor } from '@ng-doc/ui-kit/types';
-import * as i0 from '@angular/core';
 
 /**
  * `NgDocButtonComponent` is a reusable button component with customizable properties.
@@ -14,19 +14,19 @@ declare class NgDocButtonComponent {
      * Size of the button. Can be 'small', 'medium', or 'large'.
      * Default is 'small'.
      */
-    size: NgDocSize;
+    readonly size: _angular_core.InputSignal<NgDocSize>;
     /**
      * Color of the button. Can be 'primary', 'secondary', etc.
      * Default is 'primary'.
      */
-    color: NgDocColor;
+    readonly color: _angular_core.InputSignal<NgDocColor>;
     /**
      * Whether the button is rounded or not.
      * Default is false.
      */
-    rounded: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocButtonComponent, "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", never, { "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, {}, never, ["*"], true, never>;
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocButtonComponent, "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocButtonComponent };

package/types/ng-doc-ui-kit-components-checkbox.d.ts

@@ -1,12 +1,14 @@
+import * as i0 from '@angular/core';
 import { NgDocColor } from '@ng-doc/ui-kit/types';
 import { DIStateControl } from 'di-controls';
-import * as i0 from '@angular/core';
 
+/** A checkbox control; project its label. */
 declare class NgDocCheckboxComponent<T> extends DIStateControl<T> {
-    color: NgDocColor;
+    /** Colour of the checked box. */
+    readonly color: i0.InputSignal<NgDocColor>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocCheckboxComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocCheckboxComponent<any>, "ng-doc-checkbox", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["ng-doc-icon", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocCheckboxComponent<any>, "ng-doc-checkbox", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, ["ng-doc-icon", "*"], true, never>;
 }
 
 export { NgDocCheckboxComponent };

package/types/ng-doc-ui-kit-components-clear-control.d.ts

@@ -3,11 +3,18 @@ import { AfterContentInit } from '@angular/core';
 import { NgDocInputHost } from '@ng-doc/ui-kit/classes/input-host';
 import { DIControl } from 'di-controls';
 
+/**
+ * Button that clears the value of its host control and of the input of the surrounding input
+ * host. It is shown only while there is a value to clear.
+ */
 declare class NgDocClearControlComponent<T> extends DIControl<T> implements AfterContentInit {
     protected readonly inputHost: NgDocInputHost<T> | null;
+    private readonly clearControlDestroyRef;
     constructor();
     ngAfterContentInit(): void;
+    /** Whether there is a value to clear. */
     get isVisible(): boolean;
+    /** Clears the value. */
     clear(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocClearControlComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocClearControlComponent<any>, "ng-doc-clear-control", never, {}, {}, never, never, true, never>;

package/types/ng-doc-ui-kit-components-combobox.d.ts

@@ -1,21 +1,31 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { NgDocListHost } from '@ng-doc/ui-kit/classes/list-host';
 import { NgDocContextWithImplicit } from '@ng-doc/ui-kit/interfaces';
 import { NgDocContent } from '@ng-doc/ui-kit/types';
 import { DIControl } from 'di-controls';
 
+/**
+ * A select with an optional text field. Its options are an `ng-doc-list` in a template marked
+ * with the `ngDocData` directive.
+ */
 declare class NgDocComboboxComponent<T> extends DIControl<T> implements NgDocListHost {
-    readonly: boolean;
-    placeholder: string;
-    clearButton: boolean;
-    rightContent: NgDocContent;
-    valueContent: NgDocContent<NgDocContextWithImplicit<T | null>>;
-    data: TemplateRef<never> | null;
+    /** Whether the text field is read-only: the value is picked from the list only. */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /** Placeholder of the text field. */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Whether the clear button is shown. */
+    readonly clearButton: _angular_core.InputSignal<boolean>;
+    /** Content shown at the right of the field. */
+    readonly rightContent: _angular_core.InputSignal<NgDocContent>;
+    /** Content that shows the value while the field is not being edited. */
+    readonly valueContent: _angular_core.InputSignal<NgDocContent<NgDocContextWithImplicit<T | null>>>;
+    /** The template of the options, marked with the `ngDocData` directive. */
+    readonly data: _angular_core.Signal<TemplateRef<any> | undefined>;
     constructor();
     get listHostOrigin(): HTMLElement;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocComboboxComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocComboboxComponent<any>, "ng-doc-combobox", never, { "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "rightContent": { "alias": "rightContent"; "required": false; }; "valueContent": { "alias": "valueContent"; "required": false; }; }, {}, ["data"], never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocComboboxComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocComboboxComponent<any>, "ng-doc-combobox", never, { "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearButton": { "alias": "clearButton"; "required": false; "isSignal": true; }; "rightContent": { "alias": "rightContent"; "required": false; "isSignal": true; }; "valueContent": { "alias": "valueContent"; "required": false; "isSignal": true; }; }, {}, ["data"], never, true, never>;
 }
 
 export { NgDocComboboxComponent };

package/types/ng-doc-ui-kit-components-data-list-group.d.ts

@@ -1,18 +1,23 @@
-import * as i0 from '@angular/core';
-import { OnChanges, SimpleChanges } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
 import { NgDocDataListComponent } from '@ng-doc/ui-kit/components/data-list';
 import { NgDocContextWithImplicit } from '@ng-doc/ui-kit/interfaces';
 import { NgDocGroupFn, NgDocContent } from '@ng-doc/ui-kit/types';
 
-declare class NgDocDataListGroupComponent<T, G> extends NgDocDataListComponent<T> implements OnChanges {
-    itemGroupFn?: NgDocGroupFn<T, G>;
-    groupContent: NgDocContent<NgDocContextWithImplicit<G>>;
-    groups: Map<G, T[]>;
-    groupItems: G[];
-    getGroupContext($implicit: G): NgDocContextWithImplicit<G>;
-    ngOnChanges({ items, itemGroupFn }: SimpleChanges): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDataListGroupComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDataListGroupComponent<any, any>, "ng-doc-data-list-group", never, { "itemGroupFn": { "alias": "itemGroupFn"; "required": false; }; "groupContent": { "alias": "groupContent"; "required": false; }; }, {}, never, never, true, never>;
+/**
+ * Data list whose options are grouped by `itemGroupFn`, with a header per group.
+ */
+declare class NgDocDataListGroupComponent<T, G> extends NgDocDataListComponent<T> {
+    /** Returns the group of an item. Without it, no option is shown. */
+    readonly itemGroupFn: _angular_core.InputSignal<NgDocGroupFn<T, G> | undefined>;
+    /** Content of a group header; its context is the group. */
+    readonly groupContent: _angular_core.InputSignal<NgDocContent<NgDocContextWithImplicit<G>>>;
+    /** Items by group, in the order in which the groups first appear. */
+    readonly groups: Signal<Map<G, T[]>>;
+    /** The groups, in the order in which they first appear. */
+    readonly groupItems: Signal<G[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocDataListGroupComponent<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocDataListGroupComponent<any, any>, "ng-doc-data-list-group", never, { "itemGroupFn": { "alias": "itemGroupFn"; "required": false; "isSignal": true; }; "groupContent": { "alias": "groupContent"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocDataListGroupComponent };

package/types/ng-doc-ui-kit-components-data-list.d.ts

@@ -1,20 +1,30 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { TrackByFunction } from '@angular/core';
 import { NgDocContextWithImplicit } from '@ng-doc/ui-kit/interfaces';
 import { NgDocContent, NgDocBooleanHandler, NgDocDefineValueFunction } from '@ng-doc/ui-kit/types';
 
+/**
+ * Keyboard-navigable list of options built from `items`.
+ */
 declare class NgDocDataListComponent<T> {
-    autofocus: boolean;
-    items: readonly T[] | null;
-    itemContent: NgDocContent<NgDocContextWithImplicit<T>>;
-    emptyContent: NgDocContent;
-    itemDisabledFn: NgDocBooleanHandler<T>;
-    defineValueFn: NgDocDefineValueFunction<unknown, unknown>;
-    trackByFn: TrackByFunction<T>;
-    getContext($implicit: T): NgDocContextWithImplicit<T>;
+    /** Whether the list takes focus when it opens. */
+    readonly autofocus: _angular_core.InputSignal<boolean>;
+    /** Items to show. */
+    readonly items: _angular_core.InputSignal<readonly T[] | null>;
+    /** Content of an option; its context is the item. */
+    readonly itemContent: _angular_core.InputSignal<NgDocContent<NgDocContextWithImplicit<T>>>;
+    /** Content shown when there are no items. */
+    readonly emptyContent: _angular_core.InputSignal<NgDocContent>;
+    /** Returns `true` for items whose option is disabled. */
+    readonly itemDisabledFn: _angular_core.InputSignal<NgDocBooleanHandler<T>>;
+    /** Maps an item to the value its option selects. */
+    readonly defineValueFn: _angular_core.InputSignal<NgDocDefineValueFunction<unknown, unknown>>;
+    /** Identifies items across changes of `items`. */
+    readonly trackByFn: _angular_core.InputSignal<TrackByFunction<T>>;
+    /** Returns the items as an array. */
     getItems(): T[];
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDataListComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDataListComponent<any>, "ng-doc-data-list", never, { "autofocus": { "alias": "autofocus"; "required": false; }; "items": { "alias": "items"; "required": false; }; "itemContent": { "alias": "itemContent"; "required": false; }; "emptyContent": { "alias": "emptyContent"; "required": false; }; "itemDisabledFn": { "alias": "itemDisabledFn"; "required": false; }; "defineValueFn": { "alias": "defineValueFn"; "required": false; }; "trackByFn": { "alias": "trackByFn"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocDataListComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocDataListComponent<any>, "ng-doc-data-list", never, { "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "itemContent": { "alias": "itemContent"; "required": false; "isSignal": true; }; "emptyContent": { "alias": "emptyContent"; "required": false; "isSignal": true; }; "itemDisabledFn": { "alias": "itemDisabledFn"; "required": false; "isSignal": true; }; "defineValueFn": { "alias": "defineValueFn"; "required": false; "isSignal": true; }; "trackByFn": { "alias": "trackByFn"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocDataListComponent };

package/types/ng-doc-ui-kit-components-dialog-outlet.d.ts

@@ -1,21 +1,26 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { AfterContentInit, TemplateRef, DestroyRef } from '@angular/core';
 import { RouterOutlet, Router, ActivatedRoute } from '@angular/router';
 import { NgDocOverlayRef } from '@ng-doc/ui-kit/classes/overlay-ref';
 import { NgDocDialogConfig, NgDocDialogService } from '@ng-doc/ui-kit/services/dialog';
 
+/**
+ * Shows the projected router outlet in a dialog while one of its routes is active, and navigates
+ * back to the parent route when the dialog closes.
+ */
 declare class DialogOutletComponent implements AfterContentInit {
-    config?: NgDocDialogConfig;
-    outletContent: TemplateRef<never>;
-    routerOutlet?: RouterOutlet;
+    /** Options of the dialog. */
+    readonly config: _angular_core.InputSignal<NgDocDialogConfig<unknown> | undefined>;
+    readonly outletContent: _angular_core.Signal<TemplateRef<never>>;
+    readonly routerOutlet: _angular_core.Signal<RouterOutlet | undefined>;
     dialogRef?: NgDocOverlayRef;
     protected readonly router: Router;
     protected readonly route: ActivatedRoute;
     protected readonly dialogService: NgDocDialogService;
     protected readonly destroyRef: DestroyRef;
     ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DialogOutletComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogOutletComponent, "ng-doc-dialog-outlet", never, { "config": { "alias": "config"; "required": false; }; }, {}, ["routerOutlet"], ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DialogOutletComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DialogOutletComponent, "ng-doc-dialog-outlet", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, ["routerOutlet"], ["*"], true, never>;
 }
 
 export { DialogOutletComponent };

package/types/ng-doc-ui-kit-components-dot.d.ts

@@ -1,11 +1,16 @@
+import * as _angular_core from '@angular/core';
 import { NgDocColor, NgDocSize } from '@ng-doc/ui-kit/types';
-import * as i0 from '@angular/core';
 
+/**
+ * A small coloured dot, for example to mark a state next to a label.
+ */
 declare class NgDocDotComponent {
-    color?: NgDocColor;
-    size?: NgDocSize;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDotComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDotComponent, "ng-doc-dot", never, { "color": { "alias": "color"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+    /** Colour of the dot. */
+    readonly color: _angular_core.InputSignal<NgDocColor | undefined>;
+    /** Size of the dot: 4px (`small`), 8px (`medium`) or 16px (`large`). */
+    readonly size: _angular_core.InputSignal<NgDocSize | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocDotComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocDotComponent, "ng-doc-dot", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocDotComponent };

package/types/ng-doc-ui-kit-components-dropdown.d.ts

@@ -1,44 +1,56 @@
+import * as _angular_core from '@angular/core';
+import { OnChanges, OnDestroy, ChangeDetectorRef, ViewContainerRef, SimpleChanges } from '@angular/core';
 import { Point } from '@angular/cdk/drag-drop';
 import { CdkOverlayOrigin } from '@angular/cdk/overlay';
-import * as i0 from '@angular/core';
-import { OnChanges, OnDestroy, ChangeDetectorRef, ViewContainerRef, NgZone, EventEmitter, SimpleChanges } from '@angular/core';
 import { NgDocOverlayHost } from '@ng-doc/ui-kit/classes/overlay-host';
 import { NgDocOverlayRef } from '@ng-doc/ui-kit/classes/overlay-ref';
 import { NgDocOverlayProperties } from '@ng-doc/ui-kit/interfaces';
 import { NgDocOverlayService } from '@ng-doc/ui-kit/services/overlay';
 import { NgDocContent, NgDocOverlayPosition } from '@ng-doc/ui-kit/types';
 
+/**
+ * Renders its content in an overlay connected to an origin: the `origin` input, or the
+ * surrounding `ngDocDropdownOrigin`.
+ */
 declare class NgDocDropdownComponent implements OnChanges, OnDestroy {
     protected changeDetectorRef: ChangeDetectorRef;
     protected overlayService: NgDocOverlayService;
     protected viewContainerRef: ViewContainerRef;
-    protected ngZone: NgZone;
     protected overlayHost: NgDocOverlayHost | null;
-    content: NgDocContent;
-    origin: CdkOverlayOrigin | Point | null;
-    closeIfOutsideClick: boolean;
-    closeIfInnerClick: boolean;
-    withArrow: boolean;
-    borderOffset: number;
-    panelClass: string | string[];
-    contactBorder: boolean;
-    hasBackdrop: boolean;
-    positions: NgDocOverlayPosition | NgDocOverlayPosition[];
-    minHeight: number | string;
-    maxHeight: number | string;
-    height: number | string;
-    minWidth: number | string;
-    maxWidth: number | string;
-    width: number | string;
-    beforeOpen: EventEmitter<void>;
-    afterOpen: EventEmitter<void>;
-    beforeClose: EventEmitter<void>;
-    afterClose: EventEmitter<void>;
+    private readonly destroyRef;
+    /** What the dropdown renders: a string, a template or a component. */
+    readonly content: _angular_core.InputSignal<NgDocContent>;
+    /**
+     * The origin to connect to. When it changes to `null`, the dropdown stays connected to the
+     * previous origin.
+     */
+    readonly origin: _angular_core.InputSignal<CdkOverlayOrigin | Point | null>;
+    readonly closeIfOutsideClick: _angular_core.InputSignal<boolean>;
+    readonly closeIfInnerClick: _angular_core.InputSignal<boolean>;
+    readonly withArrow: _angular_core.InputSignal<boolean>;
+    readonly borderOffset: _angular_core.InputSignal<number>;
+    readonly panelClass: _angular_core.InputSignal<string | string[]>;
+    readonly contactBorder: _angular_core.InputSignal<boolean>;
+    readonly hasBackdrop: _angular_core.InputSignal<boolean>;
+    readonly positions: _angular_core.InputSignal<NgDocOverlayPosition | NgDocOverlayPosition[]>;
+    readonly minHeight: _angular_core.InputSignal<string | number>;
+    readonly maxHeight: _angular_core.InputSignal<string | number>;
+    readonly height: _angular_core.InputSignal<string | number>;
+    readonly minWidth: _angular_core.InputSignal<string | number>;
+    readonly maxWidth: _angular_core.InputSignal<string | number>;
+    readonly width: _angular_core.InputSignal<string | number>;
+    /** Emits when the dropdown starts opening. */
+    readonly beforeOpen: _angular_core.OutputEmitterRef<void>;
+    /** Emits when the open animation has finished. */
+    readonly afterOpen: _angular_core.OutputEmitterRef<void>;
+    /** Emits when the dropdown starts closing. */
+    readonly beforeClose: _angular_core.OutputEmitterRef<void>;
+    /** Emits when the dropdown has closed. */
+    readonly afterClose: _angular_core.OutputEmitterRef<void>;
     overlay: NgDocOverlayRef | null;
+    private readonly lastOrigin;
     overlayProperties: NgDocOverlayProperties;
-    constructor();
     ngOnChanges({ origin }: SimpleChanges): void;
-    get tabIndex(): number;
     focus(): void;
     get isFocused(): boolean;
     open(): void;
@@ -51,8 +63,8 @@ declare class NgDocDropdownComponent implements OnChanges, OnDestroy {
     private getConfig;
     private getOverlayProperties;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDropdownComponent, "ng-doc-dropdown", never, { "content": { "alias": "content"; "required": false; }; "origin": { "alias": "origin"; "required": false; }; "closeIfOutsideClick": { "alias": "closeIfOutsideClick"; "required": false; }; "closeIfInnerClick": { "alias": "closeIfInnerClick"; "required": false; }; "withArrow": { "alias": "withArrow"; "required": false; }; "borderOffset": { "alias": "borderOffset"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "contactBorder": { "alias": "contactBorder"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "positions": { "alias": "positions"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "height": { "alias": "height"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, { "beforeOpen": "beforeOpen"; "afterOpen": "afterOpen"; "beforeClose": "beforeClose"; "afterClose": "afterClose"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocDropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocDropdownComponent, "ng-doc-dropdown", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "origin": { "alias": "origin"; "required": false; "isSignal": true; }; "closeIfOutsideClick": { "alias": "closeIfOutsideClick"; "required": false; "isSignal": true; }; "closeIfInnerClick": { "alias": "closeIfInnerClick"; "required": false; "isSignal": true; }; "withArrow": { "alias": "withArrow"; "required": false; "isSignal": true; }; "borderOffset": { "alias": "borderOffset"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "contactBorder": { "alias": "contactBorder"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "positions": { "alias": "positions"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "beforeOpen": "beforeOpen"; "afterOpen": "afterOpen"; "beforeClose": "beforeClose"; "afterClose": "afterClose"; }, never, never, true, never>;
 }
 
 export { NgDocDropdownComponent };

package/types/ng-doc-ui-kit-components-expander.d.ts

@@ -1,19 +1,21 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { AnimationCallbackEvent } from '@angular/core';
 import { NgDocContent } from '@ng-doc/ui-kit/types';
 
 /** Component helps to expand or collapse content */
 declare class NgDocExpanderComponent {
-    /** Change expand state */
-    expanded: boolean;
+    /** Whether the content is shown. */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
     /** Expander content */
-    content: NgDocContent;
-    collapseMod: 'remove' | 'hide';
+    readonly content: _angular_core.InputSignal<NgDocContent>;
+    /** `remove` removes the collapsed content from the DOM; `hide` keeps it, inert and hidden. */
+    readonly collapseMod: _angular_core.InputSignal<"remove" | "hide">;
+    /** Shows or hides the content. */
     toggle(): void;
     protected enter(container: HTMLElement, event: AnimationCallbackEvent): void;
     protected leave(container: HTMLElement, event: AnimationCallbackEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocExpanderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocExpanderComponent, "ng-doc-expander", never, { "expanded": { "alias": "expanded"; "required": false; }; "content": { "alias": "content"; "required": true; }; "collapseMod": { "alias": "collapseMod"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocExpanderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocExpanderComponent, "ng-doc-expander", never, { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": true; "isSignal": true; }; "collapseMod": { "alias": "collapseMod"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, never, true, never>;
 }
 
 export { NgDocExpanderComponent };

package/types/ng-doc-ui-kit-components-floated-content.d.ts

@@ -1,13 +1,15 @@
+import * as _angular_core from '@angular/core';
 import { BaseElement, NgDocHorizontalAlign } from '@ng-doc/ui-kit/types';
-import * as i0 from '@angular/core';
 
+/** Content that floats over the edge of its container, aligned to one side. */
 declare class NgDocFloatedContentComponent {
-    bindTo?: BaseElement<HTMLElement>;
-    propertyName: string;
-    alignTo: NgDocHorizontalAlign;
+    readonly bindTo: _angular_core.InputSignal<BaseElement<HTMLElement> | undefined>;
+    readonly propertyName: _angular_core.InputSignal<string>;
+    /** The side the content is aligned to. */
+    readonly alignTo: _angular_core.InputSignal<NgDocHorizontalAlign>;
     readonly element: HTMLElement;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocFloatedContentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocFloatedContentComponent, "[ng-doc-floated-content]", never, { "bindTo": { "alias": "bindTo"; "required": false; }; "propertyName": { "alias": "propertyName"; "required": false; }; "alignTo": { "alias": "alignTo"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocFloatedContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocFloatedContentComponent, "[ng-doc-floated-content]", never, { "bindTo": { "alias": "bindTo"; "required": false; "isSignal": true; }; "propertyName": { "alias": "propertyName"; "required": false; "isSignal": true; }; "alignTo": { "alias": "alignTo"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocFloatedContentComponent };

package/types/ng-doc-ui-kit-components-focus-control.d.ts

@@ -1,13 +1,19 @@
 import * as i0 from '@angular/core';
 
+/**
+ * Surrounds its content with two focus traps. Tabbing out of the content moves the focus to the
+ * element before or after `focusHost` in the document, instead of leaving it on the traps.
+ */
 declare class NgDocFocusControlComponent {
-    private documentRef;
-    focusHost: HTMLElement | null;
-    constructor();
+    private readonly documentRef;
+    /** Element from which the focus moves on when it leaves the content. */
+    readonly focusHost: i0.InputSignal<HTMLElement | null>;
+    /** Focuses the focusable element before `focusHost`. */
     focusPrev(): void;
+    /** Focuses the focusable element after `focusHost`. */
     focusNext(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocFocusControlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocFocusControlComponent, "ng-doc-focus-control", never, { "focusHost": { "alias": "focusHost"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocFocusControlComponent, "ng-doc-focus-control", never, { "focusHost": { "alias": "focusHost"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocFocusControlComponent };