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

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

@@ -1,33 +1,43 @@
-import { NgDocSidebarService } from '@ng-doc/app/services';
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { NgDocSidebarService } from '@ng-doc/app/services/sidebar';
 
 /**
- * Navbar component for ng-doc application
+ * Navbar of the NgDoc application: the header bar above the sidebar and the page.
+ *
+ * It lays out, from left to right: the menu button (only where the sidebar is an overlay), the
+ * content marked with `ngDocNavbarLeft` (for example the logo), the content marked with
+ * `ngDocNavbarCenter` (for example the section links, hidden at 1024px and below), the search, and
+ * the content marked with `ngDocNavbarRight` (for example the theme toggle).
+ * @example
+ * ```html
+ * <ng-doc-navbar>
+ *   <a ngDocNavbarLeft routerLink="/">My library</a>
+ *   <nav ngDocNavbarCenter aria-label="Primary"><a routerLink="/docs">Guides</a></nav>
+ *   <ng-doc-theme-toggle ngDocNavbarRight />
+ * </ng-doc-navbar>
+ * ```
  */
 declare class NgDocNavbarComponent {
-    private readonly window;
-    private readonly ngZone;
-    private readonly changeDetectorRef;
     protected readonly sidebarService: NgDocSidebarService;
     /**
      * Show search input
      */
-    search: boolean;
+    readonly search: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
-     * Show hamburger button
+     * Show the menu button that opens the sidebar where it is an overlay (900px and below).
      */
-    hamburger: boolean;
+    readonly hamburger: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Use glass effect for navbar
      */
-    glassEffect: boolean;
+    readonly glassEffect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly menuButton;
     /**
-     * Indicates if navbar has border
+     * Closes the sidebar overlay and moves focus back to the menu button that opened it.
      */
-    hasBorder: boolean;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocNavbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocNavbarComponent, "ng-doc-navbar", never, { "search": { "alias": "search"; "required": false; }; "hamburger": { "alias": "hamburger"; "required": false; }; "glassEffect": { "alias": "glassEffect"; "required": false; }; }, {}, never, ["[ngDocNavbarLeft]", "[ngDocNavbarRight]"], true, never>;
+    protected closeSidebar(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocNavbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocNavbarComponent, "ng-doc-navbar", never, { "search": { "alias": "search"; "required": false; "isSignal": true; }; "hamburger": { "alias": "hamburger"; "required": false; "isSignal": true; }; "glassEffect": { "alias": "glassEffect"; "required": false; "isSignal": true; }; }, {}, never, ["[ngDocNavbarLeft]", "[ngDocNavbarCenter]", "[ngDocNavbarRight]"], true, never>;
 }
 
 export { NgDocNavbarComponent };

package/types/ng-doc-app-components-page-header.d.ts

@@ -1,9 +1,33 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { NgDocContentController } from '@ng-doc/app/classes/content-controller';
+import { NgDocContentSource } from '@ng-doc/core/interfaces';
 
+/**
+ * The header of a documentation page: the rendered header HTML, or the header of an
+ * asynchronous content source.
+ */
 declare class NgDocPageHeaderComponent {
-    headerContent: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPageHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPageHeaderComponent, "ng-doc-page-header", never, { "headerContent": { "alias": "headerContent"; "required": true; }; }, {}, never, never, true, never>;
+    /** The rendered header HTML, used when there is no content source. */
+    readonly headerContent: _angular_core.InputSignal<string>;
+    /** The source of the header content, for pages whose content loads asynchronously. */
+    readonly headerContentSource: _angular_core.InputSignal<NgDocContentSource | undefined>;
+    protected readonly contentController: NgDocContentController;
+    private readonly host;
+    private readonly browser;
+    /** Removes the server-rendered copy shown while asynchronous content loads. */
+    private snapshot?;
+    constructor();
+    /**
+     * Shows the loaded header in place of the server-rendered copy when a pass of it is about to
+     * render, in the same task. The pass of the empty header before the source has loaded keeps
+     * the copy.
+     * @param version - The content version of the pass.
+     * @internal
+     */
+    protected revealLoaded(version: number): void;
+    private releaseSnapshot;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPageHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPageHeaderComponent, "ng-doc-page-header", never, { "headerContent": { "alias": "headerContent"; "required": true; "isSignal": true; }; "headerContentSource": { "alias": "headerContentSource"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocPageHeaderComponent };

package/types/ng-doc-app-components-page-link.d.ts

@@ -1,22 +1,41 @@
-import * as i0 from '@angular/core';
-import { OnInit, OnChanges } from '@angular/core';
-import { Params } from '@angular/router';
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+import { UrlTree, Params } from '@angular/router';
 
-declare class NgDocPageLinkComponent implements OnInit, OnChanges {
-    href: string;
-    classes: string;
-    protected isInCode: boolean;
-    private link;
+/**
+ * A link in the page content. Links inside the application navigate with the router; other links
+ * open in a new tab and, outside code, show an external-link icon.
+ */
+declare class NgDocPageLinkComponent implements OnInit {
+    /**
+     * The link target, as written in the content. It is optional so that a render before the
+     * page processor sets it (auto-detected change detection) does not fail.
+     */
+    readonly href: _angular_core.InputSignal<string>;
+    /** Classes of the link element. */
+    readonly classes: _angular_core.InputSignal<string>;
+    /** Whether the link sits inside a code element. */
+    protected readonly isInCode: _angular_core.WritableSignal<boolean>;
     private readonly location;
+    private readonly locationStrategy;
+    private readonly router;
     private readonly elementRef;
+    private readonly resolved;
+    /** Whether the link navigates with the router. */
+    protected readonly usesRouterLink: _angular_core.Signal<boolean>;
+    /** The router target of an application link. */
+    protected readonly routerLink: _angular_core.Signal<UrlTree | undefined>;
+    /** Whether the link leaves the application's origin. */
+    readonly isExternalLink: _angular_core.Signal<boolean>;
+    /** The path of an application link, or the `href` of any other link. */
+    readonly path: _angular_core.Signal<string>;
+    /** The fragment of the link, without `#`. */
+    readonly fragment: _angular_core.Signal<string | undefined>;
+    /** The query parameters of the link. */
+    readonly queryParams: _angular_core.Signal<Params>;
     ngOnInit(): void;
-    ngOnChanges(): void;
-    get isExternalLink(): boolean;
-    get path(): string;
-    get fragment(): string | undefined;
-    get queryParams(): Params;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPageLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPageLinkComponent, "ng-doc-page-link", never, { "href": { "alias": "href"; "required": true; }; "classes": { "alias": "classes"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPageLinkComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPageLinkComponent, "ng-doc-page-link", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "classes": { "alias": "classes"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocPageLinkComponent };

package/types/ng-doc-app-components-page-navigation.d.ts

@@ -1,11 +1,16 @@
+import * as _angular_core from '@angular/core';
 import { NgDocPageNavigation, NgDocNavigation } from '@ng-doc/app/interfaces';
-import * as i0 from '@angular/core';
 
+/**
+ * Links to the previous and the next page, as two cards at the bottom of a guide.
+ */
 declare class NgDocPageNavigationComponent implements NgDocPageNavigation {
-    prevPage?: NgDocNavigation;
-    nextPage?: NgDocNavigation;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPageNavigationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPageNavigationComponent, "ng-doc-page-navigation", never, { "prevPage": { "alias": "prevPage"; "required": true; }; "nextPage": { "alias": "nextPage"; "required": true; }; }, {}, never, never, true, never>;
+    /** The page before this one in the sidebar. */
+    readonly prevPage: _angular_core.InputSignal<NgDocNavigation | undefined>;
+    /** The page after this one in the sidebar. */
+    readonly nextPage: _angular_core.InputSignal<NgDocNavigation | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPageNavigationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPageNavigationComponent, "ng-doc-page-navigation", never, { "prevPage": { "alias": "prevPage"; "required": false; "isSignal": true; }; "nextPage": { "alias": "nextPage"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocPageNavigationComponent };

package/types/ng-doc-app-components-page-wrapper.d.ts

@@ -1,26 +1,50 @@
 import * as _ng_doc_app_interfaces from '@ng-doc/app/interfaces';
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { OnInit, ViewContainerRef } from '@angular/core';
 import { Routes, Router, ActivatedRoute } from '@angular/router';
+import { NgDocFullscreenRouteService } from '@ng-doc/app/services/fullscreen-route';
+import { NgDocContentSource } from '@ng-doc/core/interfaces';
 import { NgDocPageType } from '@ng-doc/core/types';
 
+/**
+ * Layout of a generated page: the breadcrumbs, the page header, the tabs of a page with several
+ * routes, the page itself, the previous and next page links, and the table of contents beside it.
+ *
+ * The breadcrumbs, the page links and the table of contents are the page skeleton's components,
+ * created in the containers this component exposes.
+ *
+ * While the page shows one of its fullscreen routes (`NgDocFullscreenRouteService`), only the page
+ * is shown.
+ */
 declare class NgDocPageWrapperComponent implements OnInit {
-    routes: Routes;
-    headerContent: string;
-    hasBreadcrumb: boolean;
-    pageType: NgDocPageType;
-    pageBreadcrumbs: ViewContainerRef;
-    pageToc?: ViewContainerRef;
-    pageNavigation: ViewContainerRef;
+    /** Routes of the page; a page with more than one gets tabs. */
+    readonly routes: _angular_core.InputSignal<Routes>;
+    /** HTML of the page header. */
+    readonly headerContent: _angular_core.InputSignal<string>;
+    /** Deferred source of the page header, for generated pages that load it separately. */
+    readonly headerContentSource: _angular_core.InputSignal<NgDocContentSource | undefined>;
+    /** Whether the page shows breadcrumbs. */
+    readonly hasBreadcrumb: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Type of the page: guides get previous and next page links, API pages do not. */
+    readonly pageType: _angular_core.InputSignal<NgDocPageType>;
+    /** Container of the breadcrumbs. */
+    readonly pageBreadcrumbs: _angular_core.Signal<ViewContainerRef>;
+    /** Container of the table of contents. */
+    readonly pageToc: _angular_core.Signal<ViewContainerRef>;
+    /** Container of the previous and next page links. */
+    readonly pageNavigation: _angular_core.Signal<ViewContainerRef>;
     protected skeleton: _ng_doc_app_interfaces.NgDocPageSkeleton;
     protected router: Router;
     protected route: ActivatedRoute;
     protected context: _ng_doc_app_interfaces.NgDocContext;
+    protected readonly fullscreenRoute: NgDocFullscreenRouteService;
     private breadcrumbs;
+    private readonly preloader;
+    private readonly injector;
     ngOnInit(): void;
-    private navigationInputs;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPageWrapperComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPageWrapperComponent, "ng-doc-page-wrapper", never, { "routes": { "alias": "routes"; "required": true; }; "headerContent": { "alias": "headerContent"; "required": true; }; "hasBreadcrumb": { "alias": "hasBreadcrumb"; "required": false; }; "pageType": { "alias": "pageType"; "required": false; }; }, {}, never, never, true, never>;
+    private adjacentPages;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPageWrapperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPageWrapperComponent, "ng-doc-page-wrapper", never, { "routes": { "alias": "routes"; "required": true; "isSignal": true; }; "headerContent": { "alias": "headerContent"; "required": true; "isSignal": true; }; "headerContentSource": { "alias": "headerContentSource"; "required": false; "isSignal": true; }; "hasBreadcrumb": { "alias": "hasBreadcrumb"; "required": false; "isSignal": true; }; "pageType": { "alias": "pageType"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocPageWrapperComponent };

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

@@ -1,19 +1,70 @@
-import * as i0 from '@angular/core';
-import { ElementRef, TemplateRef, ChangeDetectorRef } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { ElementRef, ChangeDetectorRef } from '@angular/core';
+import { NgDocContentController } from '@ng-doc/app/classes/content-controller';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { NgDocPageWrapperComponent } from '@ng-doc/app/components/page-wrapper';
 import { NgDocPageSkeleton } from '@ng-doc/app/interfaces';
 
+/**
+ * A generated page: its rendered content, the page actions (copy link, edit and view the source),
+ * the table of contents it fills in, and the outlet of its fullscreen routes.
+ *
+ * A fullscreen route (a child route of the page, unless the page sets `disableFullscreenRoutes`)
+ * replaces the page: it is shown on its own on the canvas of demos, with a link back to the page,
+ * and `NgDocFullscreenRouteService` tells the root layout and the page wrapper to hide their
+ * chrome.
+ */
 declare class NgDocPageComponent {
-    pageContainer: ElementRef<HTMLElement>;
-    childOutlet?: TemplateRef<never>;
+    /** The element that holds the rendered page content. */
+    readonly pageContainer: _angular_core.Signal<ElementRef<any> | undefined>;
     protected rootPage: NgDocRootPage;
     protected skeleton: NgDocPageSkeleton;
     protected changeDetectorRef: ChangeDetectorRef;
     protected pageWrapper: NgDocPageWrapperComponent;
+    protected readonly contentController: NgDocContentController;
+    /** Whether the link to the page was just copied. */
+    protected readonly linkCopied: _angular_core.WritableSignal<boolean>;
+    /** Whether one of the page's fullscreen routes is shown instead of the page. */
+    protected readonly fullscreenRoute: _angular_core.WritableSignal<boolean>;
+    /** URL of the page, for the link back from a fullscreen route. */
+    protected readonly pageUrl: _angular_core.WritableSignal<string>;
+    private readonly route;
+    private readonly fullscreenRoutes;
+    private readonly contentAnchorController;
+    private readonly clipboard;
+    private readonly ngZone;
+    private readonly location;
+    private readonly locationStrategy;
+    private linkCopiedTimer?;
+    /** Removes the server-rendered copy shown while asynchronous content loads. */
+    private snapshot?;
+    constructor();
+    /**
+     * Shows one of the page's fullscreen routes instead of the page, or the page again. The outlet
+     * of the fullscreen routes calls it when a route opens or closes.
+     * @param shown - Whether a fullscreen route is shown.
+     */
+    protected showFullscreenRoute(shown: boolean): void;
+    /**
+     * Creates the table of contents from the headings of the rendered page.
+     */
     createToc(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPageComponent, "ng-doc-page", never, {}, {}, never, never, true, never>;
+    /**
+     * Shows the page's own content in place of the server-rendered copy when a pass of the loaded
+     * content is about to render, in the same task, so its components render and measure visible.
+     * The pass of the empty content before the source has loaded keeps the copy.
+     * @param version - The content version of the pass.
+     * @internal
+     */
+    protected revealLoaded(version: number): void;
+    /**
+     * Copies the link to the page, without its query and fragment.
+     */
+    copyLink(): void;
+    private connectContent;
+    private releaseSnapshot;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPageComponent, "ng-doc-page", never, {}, {}, never, never, true, never>;
 }
 
 export { NgDocPageComponent };

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,72 @@ 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>;
+    /** Whether the demo is created again each time a value changes. */
+    readonly recreateDemo: WritableSignal<boolean>;
+    /** 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>;
     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 +123,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 +133,78 @@ 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 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 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; }; "showResetButton": { "alias": "showResetButton"; "required": false; "isSignal": true; }; }, { "recreateDemo": "recreateDemoChange"; "resetForm": "resetForm"; }, never, ["*"], true, never>;
 }
 
-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>;
+    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 };