@ng-doc/app 22.0.0-beta.2 → 22.1.0

package/types/ng-doc-app-components-playground.d.ts

@@ -1,34 +1,45 @@
-import * as i0 from '@angular/core';
-import { OnInit, Type, ViewContainerRef, ChangeDetectorRef, OnChanges, AfterViewInit, SimpleChanges, OnDestroy, Injector, DestroyRef, EventEmitter } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal, ViewContainerRef, InputSignal, ChangeDetectorRef, AfterViewInit, WritableSignal, OnChanges, OnDestroy, Injector, DestroyRef, SimpleChanges } from '@angular/core';
 import { NgDocPlaygroundConfig, NgDocPlaygroundProperties, NgDocPlaygroundOptions, NgDocPlaygroundProperty, NgDocPlaygroundContent } from '@ng-doc/core/interfaces';
 import { Constructor } from '@ng-doc/core/types';
 import { Observable } from 'rxjs';
 import { FormGroup, FormControl } from '@angular/forms';
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { NgDocProvidedTypeControl, NgDocTypeControlProviderOptions } from '@ng-doc/app/interfaces';
 
 /**
- * Base class for playgrounds components.
+ * Base class of the playground classes the builder generates, one per playground and selector.
+ * A generated class renders the playground template with the target's inputs bound to
+ * `properties()`, and queries the target with `viewChild()`.
  */
 declare abstract class NgDocBasePlayground implements Pick<NgDocPlaygroundConfig, 'data'>, OnInit {
-    private playgroundInstance?;
     static readonly selector: string;
-    abstract readonly playground?: Type<any>;
-    abstract readonly viewContainerRef?: ViewContainerRef;
+    /** The class the playground shows: a component, a directive or a pipe. */
+    abstract readonly target: Constructor<unknown>;
+    /** The instance of the target in the playground template; a pipe has none. */
+    abstract readonly playground: Signal<unknown>;
+    /** The view container of the target in the playground template; a pipe has none. */
+    abstract readonly viewContainerRef: Signal<ViewContainerRef | undefined>;
+    /** The `data` of the playground configuration. */
     abstract readonly configData: Record<string, unknown>;
-    properties: Record<string, any>;
-    actionData: Record<string, unknown>;
-    content: any;
+    /** Values of the target's inputs, by property name. */
+    readonly properties: InputSignal<Record<string, any>>;
+    /** The `data` given to the playground action; it extends the configuration's `data`. */
+    readonly actionData: InputSignal<Record<string, unknown>>;
+    /** Whether each content slot is shown, by slot name. */
+    readonly content: InputSignal<Record<string, any>>;
+    /** The default values of the target's inputs, read before the template binds them. */
     defaultValues: Record<string, unknown>;
-    private reattached;
-    private playgroundContainer;
-    protected changeDetectorRef: ChangeDetectorRef;
-    protected constructor(playgroundInstance?: Constructor<unknown> | undefined);
+    private readonly reattached;
+    private readonly playgroundContainer;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    constructor();
+    /** Emits once, after the view is attached again and checks the template's bindings. */
     get onReattached(): Observable<void>;
-    ngOnInit(): void;
+    /** The playground `data`: the configuration's data extended by the action's data. */
     get data(): any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocBasePlayground, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocBasePlayground, never, never, { "properties": { "alias": "properties"; "required": false; }; "actionData": { "alias": "actionData"; "required": false; }; "content": { "alias": "content"; "required": false; }; }, {}, never, never, true, never>;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocBasePlayground, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgDocBasePlayground, never, never, { "properties": { "alias": "properties"; "required": false; "isSignal": true; }; "actionData": { "alias": "actionData"; "required": false; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface NgDocPlaygroundForm {
@@ -36,46 +47,77 @@ interface NgDocPlaygroundForm {
     content: FormGroup<Record<string, FormControl<boolean>>>;
 }
 
-declare class NgDocPlaygroundComponent<T extends NgDocPlaygroundProperties = NgDocPlaygroundProperties> implements OnChanges, AfterViewInit {
+/**
+ * A playground: an inspector with a control per input and content slot of its target, and a demo
+ * per selector (or the pipe) rendered with the chosen values.
+ */
+declare class NgDocPlaygroundComponent<T extends NgDocPlaygroundProperties = NgDocPlaygroundProperties> implements AfterViewInit {
     private readonly rootPage;
     private readonly formBuilder;
-    id: string;
-    pipeName: string;
-    selectors: string[];
-    properties?: T;
-    options: NgDocPlaygroundOptions;
-    recreateDemo: boolean;
-    formGroup: FormGroup<NgDocPlaygroundForm>;
-    defaultValues?: Record<string, unknown>;
-    configuration: NgDocPlaygroundConfig;
+    /** The name of the playground in the page configuration. */
+    readonly id: InputSignal<string>;
+    /** The name of the pipe, when the target is a pipe. */
+    readonly pipeName: InputSignal<string>;
+    /** The selectors of the target to render a demo for. */
+    readonly selectors: InputSignal<string[]>;
+    /** The inputs of the target. */
+    readonly properties: InputSignal<T | undefined>;
+    /** Options of the playground action; they extend the playground configuration. */
+    readonly options: InputSignal<NgDocPlaygroundOptions>;
+    /** The values of the inputs and content slots. */
+    readonly formGroup: WritableSignal<FormGroup<NgDocPlaygroundForm> | undefined>;
+    /** The default values of the target's inputs, reported by the first demo. */
+    readonly defaultValues: WritableSignal<Record<string, unknown> | undefined>;
+    /** The playground configuration of the page, extended by the options. */
+    readonly configuration: Signal<NgDocPlaygroundConfig>;
+    /**
+     * Whether the demo is created again each time a value changes. It starts from the `recreate`
+     * option; the reader can change it unless the option is `'always'`.
+     */
+    readonly recreateDemo: WritableSignal<boolean>;
+    /** Whether the Recreate setting is fixed on, and hidden, by the `'always'` option. */
+    readonly recreateLocked: Signal<boolean>;
     private defaultProperties;
     private defaultContent;
-    constructor();
-    ngOnChanges({ options }: SimpleChanges): void;
     ngAfterViewInit(): void;
     protected isDefaultState(): boolean;
     private getPropertiesFormValues;
     private getContentFormValues;
+    /** Sets every input and content slot back to its default value. */
     resetForm(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPlaygroundComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPlaygroundComponent<any>, "ng-doc-playground", never, { "id": { "alias": "id"; "required": true; }; "pipeName": { "alias": "pipeName"; "required": false; }; "selectors": { "alias": "selectors"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPlaygroundComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPlaygroundComponent<any>, "ng-doc-playground", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "pipeName": { "alias": "pipeName"; "required": false; "isSignal": true; }; "selectors": { "alias": "selectors"; "required": false; "isSignal": true; }; "properties": { "alias": "properties"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * One demo of a playground: it creates the generated playground class of its selector (or pipe),
+ * passes it the form's values and shows the code of the current state.
+ */
 declare class NgDocPlaygroundDemoComponent<T extends NgDocPlaygroundProperties = NgDocPlaygroundProperties> implements OnChanges, OnDestroy {
-    id: string;
-    pipeName: string;
-    selector: string;
-    configuration?: NgDocPlaygroundConfig;
-    properties?: T;
-    recreateDemo: boolean;
-    form: FormGroup<NgDocPlaygroundForm>;
-    expanded: boolean;
-    demoOutlet?: ViewContainerRef;
+    /** The name of the playground in the page configuration. */
+    readonly id: InputSignal<string>;
+    /** The name of the pipe, when the target is a pipe. */
+    readonly pipeName: InputSignal<string>;
+    /** The selector of the target this demo renders. */
+    readonly selector: InputSignal<string>;
+    /** The playground configuration, extended by the action's options. */
+    readonly configuration: InputSignal<NgDocPlaygroundConfig | undefined>;
+    /** The inputs of the target. */
+    readonly properties: InputSignal<T | undefined>;
+    /** Whether the demo is created again each time a value changes. */
+    readonly recreateDemo: InputSignal<boolean>;
+    /** The values of the inputs and content slots. */
+    readonly form: InputSignal<FormGroup<NgDocPlaygroundForm> | undefined>;
+    /** Whether the code of the demo is shown. */
+    readonly expanded: InputSignal<boolean>;
+    /** Where the playground class is created. */
+    readonly demoOutlet: Signal<ViewContainerRef | undefined>;
+    /** The generated playground class of this demo's selector or pipe. */
     playgroundDemo?: typeof NgDocBasePlayground;
-    protected code: string;
+    protected readonly code: _angular_core.WritableSignal<string>;
     protected readonly injector: Injector;
-    protected readonly changeDetectorRef: ChangeDetectorRef;
     protected readonly destroyRef: DestroyRef;
+    private readonly pendingTasks;
     private demoRef?;
     private readonly unsubscribe$;
     ngOnChanges({ form, id }: SimpleChanges): Promise<void>;
@@ -86,8 +128,8 @@ declare class NgDocPlaygroundDemoComponent<T extends NgDocPlaygroundProperties =
     private getActiveInputs;
     private getPipeActiveInputs;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPlaygroundDemoComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPlaygroundDemoComponent<any>, "ng-doc-playground-demo", never, { "id": { "alias": "id"; "required": false; }; "pipeName": { "alias": "pipeName"; "required": false; }; "selector": { "alias": "selector"; "required": false; }; "configuration": { "alias": "configuration"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "recreateDemo": { "alias": "recreateDemo"; "required": false; }; "form": { "alias": "form"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPlaygroundDemoComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPlaygroundDemoComponent<any>, "ng-doc-playground-demo", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "pipeName": { "alias": "pipeName"; "required": false; "isSignal": true; }; "selector": { "alias": "selector"; "required": false; "isSignal": true; }; "configuration": { "alias": "configuration"; "required": false; "isSignal": true; }; "properties": { "alias": "properties"; "required": false; "isSignal": true; }; "recreateDemo": { "alias": "recreateDemo"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface NgDocPlaygroundPropertyControl {
@@ -96,47 +138,94 @@ interface NgDocPlaygroundPropertyControl {
     typeControl: NgDocProvidedTypeControl;
 }
 
-declare class NgDocPlaygroundPropertiesComponent<P extends NgDocPlaygroundProperties, C extends Record<string, NgDocPlaygroundContent>> implements OnChanges {
-    protected readonly breakpointObserver: BreakpointObserver;
-    private injector;
-    form: FormGroup<NgDocPlaygroundForm>;
-    properties?: P;
-    ignoreInputs?: string[];
-    dynamicContent?: C;
-    defaultValues?: Record<string, unknown>;
-    hideSidePanel: boolean;
-    recreateDemo: boolean;
-    showResetButton: boolean;
-    recreateDemoChange: EventEmitter<boolean>;
-    resetForm: EventEmitter<void>;
-    readonly breakpoints: string[];
-    readonly observer: Observable<boolean>;
-    protected propertyControls: NgDocPlaygroundPropertyControl[];
-    protected contentTypeControl?: NgDocProvidedTypeControl;
-    constructor();
-    ngOnChanges({ properties }: SimpleChanges): void;
+/**
+ * The playground inspector: the demos, and beside them (below them in a container narrower than
+ * 640px) the Recreate setting and a control per input and content slot.
+ */
+declare class NgDocPlaygroundPropertiesComponent<P extends NgDocPlaygroundProperties, C extends Record<string, NgDocPlaygroundContent>> {
+    private readonly injector;
+    /** The form of the playground. */
+    readonly form: _angular_core.InputSignal<FormGroup<NgDocPlaygroundForm>>;
+    /** The inputs of the playground's target. */
+    readonly properties: _angular_core.InputSignal<P | undefined>;
+    /** Inputs that get no control. */
+    readonly ignoreInputs: _angular_core.InputSignal<string[] | undefined>;
+    /** Content slots of the playground. */
+    readonly dynamicContent: _angular_core.InputSignal<C | undefined>;
+    /** Default values of the inputs; the inspector renders once they are known. */
+    readonly defaultValues: _angular_core.InputSignal<Record<string, unknown> | undefined>;
+    /** Whether the inspector is hidden, leaving the demos only. */
+    readonly hideSidePanel: _angular_core.InputSignal<boolean>;
+    /** Where the inspector goes: right of the demos, or below them at full width. */
+    readonly inspectorPosition: _angular_core.InputSignal<"right" | "bottom">;
+    /** Whether the demo is recreated each time an input changes. */
+    readonly recreateDemo: _angular_core.ModelSignal<boolean>;
+    /** Whether the Recreate setting is fixed by the playground's options and hidden. */
+    readonly recreateLocked: _angular_core.InputSignal<boolean>;
+    /** Whether the Reset button is shown. */
+    readonly showResetButton: _angular_core.InputSignal<boolean>;
+    /** Emits when the reader resets the form. */
+    readonly resetForm: _angular_core.OutputEmitterRef<void>;
+    /** The control of each input, in display order. */
+    protected readonly propertyControls: Signal<NgDocPlaygroundPropertyControl[]>;
+    /**
+     * The controls in sections: the inputs without a group first, then a section per group, in the
+     * order of the group's first input.
+     */
+    protected readonly propertySections: Signal<NgDocPlaygroundPropertySection[]>;
+    /** The control of content slots. */
+    protected readonly contentTypeControl?: NgDocProvidedTypeControl;
+    /**
+     * The form control of an input or a content slot.
+     * @param controlType - `properties` or `content`.
+     * @param key - Name of the input or slot.
+     */
     getFormControl(controlType: keyof NgDocPlaygroundForm, key: string): FormControl;
     private getTypeControl;
     private getControlForType;
     private getControlForTypeAlias;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPlaygroundPropertiesComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPlaygroundPropertiesComponent<any, any>, "ng-doc-playground-properties", never, { "form": { "alias": "form"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "ignoreInputs": { "alias": "ignoreInputs"; "required": false; }; "dynamicContent": { "alias": "dynamicContent"; "required": false; }; "defaultValues": { "alias": "defaultValues"; "required": false; }; "hideSidePanel": { "alias": "hideSidePanel"; "required": false; }; "recreateDemo": { "alias": "recreateDemo"; "required": false; }; "showResetButton": { "alias": "showResetButton"; "required": false; }; }, { "recreateDemoChange": "recreateDemoChange"; "resetForm": "resetForm"; }, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPlaygroundPropertiesComponent<any, any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPlaygroundPropertiesComponent<any, any>, "ng-doc-playground-properties", never, { "form": { "alias": "form"; "required": true; "isSignal": true; }; "properties": { "alias": "properties"; "required": false; "isSignal": true; }; "ignoreInputs": { "alias": "ignoreInputs"; "required": false; "isSignal": true; }; "dynamicContent": { "alias": "dynamicContent"; "required": false; "isSignal": true; }; "defaultValues": { "alias": "defaultValues"; "required": false; "isSignal": true; }; "hideSidePanel": { "alias": "hideSidePanel"; "required": false; "isSignal": true; }; "inspectorPosition": { "alias": "inspectorPosition"; "required": false; "isSignal": true; }; "recreateDemo": { "alias": "recreateDemo"; "required": false; "isSignal": true; }; "recreateLocked": { "alias": "recreateLocked"; "required": false; "isSignal": true; }; "showResetButton": { "alias": "showResetButton"; "required": false; "isSignal": true; }; }, { "recreateDemo": "recreateDemoChange"; "resetForm": "resetForm"; }, never, ["*"], true, never>;
+}
+/** A titled list of controls in the inspector. */
+interface NgDocPlaygroundPropertySection {
+    title: string;
+    controls: NgDocPlaygroundPropertyControl[];
 }
 
-declare class NgDocPlaygroundPropertyComponent implements OnChanges {
-    name: string;
-    property?: NgDocPlaygroundProperty | NgDocPlaygroundContent;
-    typeControl?: NgDocProvidedTypeControl;
-    control?: FormControl;
-    defaultValue?: unknown;
-    propertyOutlet?: ViewContainerRef;
-    protected option?: NgDocTypeControlProviderOptions;
+/**
+ * One row of the playground inspector: the input's name with its type chip, and the type
+ * control that edits it, bound to the input's form control.
+ */
+declare class NgDocPlaygroundPropertyComponent {
+    /** Name of the input. */
+    readonly name: _angular_core.InputSignal<string>;
+    /** The input, or the content slot. */
+    readonly property: _angular_core.InputSignal<NgDocPlaygroundProperty | NgDocPlaygroundContent | undefined>;
+    /** The type control that edits the input. */
+    readonly typeControl: _angular_core.InputSignal<NgDocProvidedTypeControl | undefined>;
+    /** Form control of the input. */
+    readonly control: _angular_core.InputSignal<FormControl<any> | undefined>;
+    /** Default value of the input. */
+    readonly defaultValue: _angular_core.InputSignal<unknown>;
+    /** Whether a type control is rendered. */
+    readonly hasPropertyControl: _angular_core.WritableSignal<boolean>;
+    /** Description of the input, shown in the tooltip of its name. */
+    protected readonly tooltipContent: Signal<string>;
+    /** Options of the type control provider. */
+    protected readonly option: Signal<NgDocTypeControlProviderOptions | undefined>;
+    /** The value type shown as a chip under the name, or an empty string. */
+    protected readonly typeChip: Signal<string>;
+    /** Whether the row is a `<label>` around the control, unless its provider opts out. */
+    protected readonly labelWrapper: Signal<boolean>;
+    /** ID of the caption that names the control of a row without the `<label>`. */
+    protected readonly captionId: string;
+    private readonly propertyOutlet;
     private propertyTypeControl?;
-    ngOnChanges({ property, control, typeControl, defaultValue }: SimpleChanges): void;
-    get hasPropertyControl(): boolean;
-    get tooltipContent(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPlaygroundPropertyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPlaygroundPropertyComponent, "ng-doc-playground-property", never, { "name": { "alias": "name"; "required": false; }; "property": { "alias": "property"; "required": false; }; "typeControl": { "alias": "typeControl"; "required": false; }; "control": { "alias": "control"; "required": false; }; "defaultValue": { "alias": "defaultValue"; "required": false; }; }, {}, never, never, true, never>;
+    constructor();
+    private createControl;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPlaygroundPropertyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPlaygroundPropertyComponent, "ng-doc-playground-property", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "property": { "alias": "property"; "required": false; "isSignal": true; }; "typeControl": { "alias": "typeControl"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocBasePlayground, NgDocPlaygroundComponent, NgDocPlaygroundDemoComponent, NgDocPlaygroundPropertiesComponent, NgDocPlaygroundPropertyComponent };

package/types/ng-doc-app-components-root.d.ts

@@ -1,6 +1,7 @@
-import { NgDocSidebarService } from '@ng-doc/app/services';
-import { NgDocContent, NgDocSidenavComponent } from '@ng-doc/ui-kit';
 import * as i0 from '@angular/core';
+import { NgDocFullscreenRouteService } from '@ng-doc/app/services/fullscreen-route';
+import { NgDocSidebarService } from '@ng-doc/app/services/sidebar';
+import { NgDocContent, NgDocSidenavComponent } from '@ng-doc/ui-kit';
 
 /**
  * Directive uses for providing custom navbar, you should mark element with this directive
@@ -36,25 +37,45 @@ declare class NgDocCustomSidebarDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocCustomSidebarDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocCustomSidebarDirective, "[ngDocCustomSidebar]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Root layout of the NgDoc application: the navbar, the sidebar, the page and the footer.
+ *
+ * Its first focusable element is a "Skip to content" link, shown only while it has focus, that
+ * moves keyboard focus past the navbar and the sidebar to the page.
+ *
+ * While a page shows one of its fullscreen routes (`NgDocFullscreenRouteService`), only the page
+ * is shown: the navbar, the sidebar, the footer and the skip link are hidden.
+ */
 declare class NgDocRootComponent {
     /**
      * If `true` then the sidebar will be shown
      * You can use it for example for landing page to hide sidebar
      */
-    sidebar: boolean;
+    readonly sidebar: i0.InputSignalWithTransform<boolean, unknown>;
     /**
      * Content for footer
      */
-    footerContent: NgDocContent;
+    readonly footerContent: i0.InputSignal<NgDocContent>;
     /**
      * If `true` then page will be shown without width limit.
      * You can use it for example for landing page
      */
-    noWidthLimit: boolean;
-    sidenav?: NgDocSidenavComponent;
+    readonly noWidthLimit: i0.InputSignalWithTransform<boolean, unknown>;
     protected readonly sidebarService: NgDocSidebarService;
+    protected readonly fullscreenRoute: NgDocFullscreenRouteService;
+    private readonly document;
+    private readonly sidenavQuery;
+    /**
+     * The sidenav that holds the sidebar and the page.
+     */
+    get sidenav(): NgDocSidenavComponent | undefined;
+    /**
+     * Moves keyboard focus to the page content, as the skip link does.
+     * @param event - The click on the skip link; its navigation to a fragment is cancelled.
+     */
+    skipToContent(event?: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocRootComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocRootComponent, "ng-doc-root", never, { "sidebar": { "alias": "sidebar"; "required": false; }; "footerContent": { "alias": "footerContent"; "required": false; }; "noWidthLimit": { "alias": "noWidthLimit"; "required": false; }; }, {}, never, ["ng-doc-navbar", "[ngDocCustomNavbar]", "ng-doc-sidebar", "[ngDocCustomSidebar]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocRootComponent, "ng-doc-root", never, { "sidebar": { "alias": "sidebar"; "required": false; "isSignal": true; }; "footerContent": { "alias": "footerContent"; "required": false; "isSignal": true; }; "noWidthLimit": { "alias": "noWidthLimit"; "required": false; "isSignal": true; }; }, {}, never, ["ng-doc-navbar", "[ngDocCustomNavbar]", "ng-doc-sidebar", "[ngDocCustomSidebar]", "*"], true, never>;
 }
 
 export { NgDocCustomNavbarDirective, NgDocCustomSidebarDirective, NgDocRootComponent };

package/types/ng-doc-app-components-search-result.d.ts

@@ -1,14 +1,22 @@
 import * as i0 from '@angular/core';
-import { OnChanges, SimpleChanges } from '@angular/core';
+import { Signal } from '@angular/core';
 import { NgDocPageInfo } from '@ng-doc/core/interfaces';
 
-declare class NgDocSearchResultComponent implements OnChanges {
-    result: NgDocPageInfo[] | null;
-    groupedResult: Record<string, NgDocPageInfo[]>;
-    ngOnChanges({ result }: SimpleChanges): void;
+/**
+ * A list of pages grouped by their type (guides and API).
+ */
+declare class NgDocSearchResultComponent {
+    /** The pages to list. */
+    readonly result: i0.InputSignal<NgDocPageInfo[] | null>;
+    /** The pages grouped by their type. */
+    readonly groupedResult: Signal<Record<string, NgDocPageInfo[]>>;
+    /**
+     * Returns the heading of a group.
+     * @param type - The page type of the group.
+     */
     typeToLabel(type: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocSearchResultComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocSearchResultComponent, "ng-doc-search-result", never, { "result": { "alias": "result"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocSearchResultComponent, "ng-doc-search-result", never, { "result": { "alias": "result"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocSearchResultComponent };

package/types/ng-doc-app-components-search.d.ts

@@ -1,16 +1,28 @@
-import { NgDocSearchEngine } from '@ng-doc/app/classes';
-import { NgDocSearchResult } from '@ng-doc/app/interfaces';
-import { StatedObservable, NgDocDialogService } from '@ng-doc/ui-kit';
-import { BehaviorSubject } from 'rxjs';
 import * as i0 from '@angular/core';
+import { NgDocSearchEngine } from '@ng-doc/app/classes';
+import { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';
+import { NgDocDialogService } from '@ng-doc/ui-kit';
 
+/**
+ * The search button of the navbar. It opens the search palette on click, with Command+K
+ * (Control+K) and, while single-key shortcuts are on, with the slash key. Wide screens show a
+ * search field with the key hint; narrow screens show an icon button.
+ */
 declare class NgDocSearchComponent {
-    protected readonly query: BehaviorSubject<string>;
-    protected readonly searchResults: StatedObservable<NgDocSearchResult[]>;
     protected readonly dialog: NgDocDialogService;
     protected readonly searchEngine: NgDocSearchEngine | null;
+    protected readonly shortcuts: NgDocShortcutsService;
+    /** The chord that opens the search, as the reader's platform labels it. */
+    protected readonly chord: i0.WritableSignal<string>;
+    private readonly document;
+    private readonly browser;
+    private dialogRef?;
     constructor();
-    open(): void;
+    /**
+     * Opens the search palette. Focus returns to the element that had it when the palette closes.
+     * @param query - The text the search field starts with.
+     */
+    open(query?: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocSearchComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocSearchComponent, "ng-doc-search", never, {}, {}, never, never, true, never>;
 }

package/types/ng-doc-app-components-tabs.d.ts

@@ -1,12 +1,31 @@
-import { NgDocTab } from '@ng-doc/app/interfaces';
 import * as i0 from '@angular/core';
+import { OnInit, Signal } from '@angular/core';
+import { NgDocTab } from '@ng-doc/app/interfaces';
 
-declare class NgDocTabsComponent {
-    tabs: NgDocTab[];
-    getActiveIndex(tabs: NgDocTab[]): number;
+/**
+ * Tabs of a page: grouped code blocks, or any content that Markdown wraps in
+ * `<ng-doc-tab group="…" name="…">` elements.
+ */
+declare class NgDocTabsComponent implements OnInit {
+    /** The tabs; their content is moved into the open panel. */
+    readonly tabs: i0.InputSignal<NgDocTab[]>;
+    /** Index of the tab that opens first: the one marked active, or the first. */
+    protected readonly activeIndex: Signal<number>;
+    /**
+     * Whether the tabs hold page content rather than a code group. A code group has one code block
+     * per tab and is drawn as one framed code surface; content tabs are only a tab bar over their
+     * content, so a framed demo or code block inside them doesn't sit in a second frame.
+     */
+    protected readonly contentTabs: Signal<boolean>;
+    ngOnInit(): void;
+    /**
+     * Moves a tab's content into its panel.
+     * @param element - Content of the tab.
+     * @param parent - The panel element.
+     */
     appendElement(element: Element, parent: Element): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocTabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocTabsComponent, "ng-doc-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocTabsComponent, "ng-doc-tabs", never, { "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocTabsComponent };

package/types/ng-doc-app-components-theme-toggle.d.ts

@@ -1,16 +1,29 @@
-import { NgDocThemeService } from '@ng-doc/app/services/theme';
 import * as i0 from '@angular/core';
+import { Signal } from '@angular/core';
+import { NgDocThemeService } from '@ng-doc/app/services/theme';
 
 interface ToggleTheme {
     name: string;
     theme: string | null;
 }
+/**
+ * Button that switches the theme in turn: Auto (follows the system), Light and Dark.
+ *
+ * It shows the current theme and follows theme changes made elsewhere through the theme service.
+ */
 declare class NgDocThemeToggleComponent {
-    protected readonly themes: ToggleTheme[];
-    protected readonly documentElement: HTMLElement;
     protected readonly themeService: NgDocThemeService;
-    get currentTheme(): ToggleTheme;
-    get nextTheme(): ToggleTheme;
+    /**
+     * The current theme. A custom theme id counts as Auto, because the toggle does not offer it.
+     */
+    protected readonly currentTheme: Signal<ToggleTheme>;
+    /**
+     * The theme the next press switches to.
+     */
+    protected readonly nextTheme: Signal<ToggleTheme>;
+    /**
+     * Switches to the next theme.
+     */
     toggleTheme(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocThemeToggleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocThemeToggleComponent, "ng-doc-theme-toggle", never, {}, {}, never, never, true, never>;