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

package/types/ng-doc-app-components-command-palette.d.ts

@@ -0,0 +1,147 @@
+import * as _angular_forms_signals from '@angular/forms/signals';
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';
+
+/**
+ * Data of the search palette dialog.
+ */
+interface NgDocCommandPaletteData {
+    /**
+     * The text the search field starts with.
+     */
+    query?: string;
+}
+/**
+ * The scope the search palette shows results for.
+ */
+type NgDocCommandPaletteScope = 'all' | 'guides' | 'api' | 'actions';
+type RowType = 'api' | 'guide' | 'action';
+interface Segment {
+    text: string;
+    match: boolean;
+}
+interface Row {
+    id: string;
+    type: RowType;
+    label: Segment[];
+    title: string;
+    meta: string;
+    icon: 'symbol' | 'page' | 'section' | 'action';
+    kind?: string;
+    scope?: string;
+    url?: string;
+    text?: string;
+    signature?: string;
+    keys?: string[];
+    action?: Action;
+    /** Whether the row is a declaration whose name starts with the query. */
+    pinned?: boolean;
+}
+interface Section {
+    key: string;
+    type: RowType;
+    title: string;
+    rows: Row[];
+}
+interface Action {
+    name: () => string;
+    keywords: string;
+    keys: string[];
+    keepOpen?: boolean;
+    run: () => void;
+}
+/**
+ * The search palette: a search field with scopes (all, guides, API and actions), a list of
+ * results grouped by type (guides first, then the API), a preview of the selected result and the
+ * switch for single-key shortcuts. The navbar search opens it with Command+K (Control+K) or the
+ * slash key.
+ */
+declare class NgDocCommandPaletteComponent {
+    protected readonly scopes: readonly {
+        id: NgDocCommandPaletteScope;
+        label: string;
+    }[];
+    protected readonly shortcuts: NgDocShortcutsService;
+    private readonly data;
+    private readonly overlayRef;
+    private readonly router;
+    private readonly searchEngine;
+    private readonly apiLists;
+    protected readonly model: _angular_core.WritableSignal<{
+        query: string;
+    }>;
+    protected readonly searchForm: _angular_forms_signals.FieldTree<{
+        query: string;
+    }, string | number, "writable">;
+    protected readonly scope: _angular_core.WritableSignal<NgDocCommandPaletteScope>;
+    protected readonly query: Signal<string>;
+    private readonly input;
+    private readonly list;
+    private readonly results;
+    private readonly hits;
+    private readonly symbols;
+    private readonly symbolsByRoute;
+    private readonly actions;
+    protected readonly sections: Signal<Section[]>;
+    protected readonly rows: Signal<Row[]>;
+    private readonly moved;
+    protected readonly active: _angular_core.WritableSignal<number>;
+    protected readonly selected: Signal<Row>;
+    protected readonly searching: Signal<boolean>;
+    protected readonly failed: Signal<boolean>;
+    protected readonly emptyMessage: Signal<string>;
+    /** What the status region announces: the scope, a running search, no results or a failure. */
+    protected readonly status: Signal<string>;
+    private readonly keyboardMove;
+    private readonly host;
+    constructor();
+    /**
+     * Handles the keys of the search field: the arrow keys move the selection and Enter opens the
+     * selected result. Keys that compose text in an input method editor are left alone.
+     * @param event - The keyboard event of the search field.
+     */
+    protected onKeydown(event: KeyboardEvent): void;
+    /**
+     * Handles the keys of the scope tabs: the arrow keys, Home and End select and focus a scope.
+     * @param event - The keyboard event of a scope tab.
+     */
+    protected onScopeKeydown(event: KeyboardEvent): void;
+    /**
+     * Keeps Tab inside the palette: from its last tab stop focus wraps to the search field, and
+     * Shift+Tab from the search field goes to the last tab stop.
+     * @param event - A keyboard event inside the palette.
+     */
+    protected onTrapKeydown(event: KeyboardEvent): void;
+    /**
+     * Selects a scope by click and returns the focus to the search field.
+     * @param scope - The scope to select.
+     */
+    protected selectScope(scope: NgDocCommandPaletteScope): void;
+    /**
+     * Selects the result under the pointer, without scrolling the list.
+     * @param index - The index of the result.
+     */
+    protected hover(index: number): void;
+    /**
+     * Opens the given result: navigates to a page or runs an action.
+     * @param row - The result to open.
+     */
+    protected activate(row: Row | undefined): void;
+    private move;
+    private close;
+    private apiRows;
+    private guideRows;
+    private actionRows;
+    /**
+     * The hit of a symbol's page that previews it: the record with the declaration's summary (the
+     * new engine puts it on one record of the page), or else any record outside a section.
+     * @param route - The route of the symbol's page.
+     */
+    private hitsFor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocCommandPaletteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocCommandPaletteComponent, "ng-doc-command-palette", never, {}, {}, never, never, true, never>;
+}
+
+export { NgDocCommandPaletteComponent };
+export type { NgDocCommandPaletteData, NgDocCommandPaletteScope };

package/types/ng-doc-app-components-copy-button.d.ts

@@ -1,15 +1,27 @@
+import * as _angular_core from '@angular/core';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { NgDocTooltipDirective } from '@ng-doc/ui-kit';
-import * as i0 from '@angular/core';
 
+/** The text a copy button copies, or a function that reads it when the button is pressed. */
+type NgDocCopyButtonText = string | (() => string);
+/**
+ * An icon button that copies a text to the clipboard and confirms it in a tooltip. Project the
+ * icon into it.
+ */
 declare class NgDocCopyButtonComponent {
-    text: string;
-    tooltip: NgDocTooltipDirective;
-    protected tooltipText: string;
+    /** The text to copy, or a function that returns it when the button is pressed. */
+    readonly text: _angular_core.InputSignal<NgDocCopyButtonText>;
+    /** Accessible name of the button, also shown in its tooltip. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** The tooltip of the button. */
+    readonly tooltip: _angular_core.Signal<NgDocTooltipDirective>;
+    protected readonly tooltipText: _angular_core.WritableSignal<string>;
     protected readonly clipboard: Clipboard;
+    /** Copies the text and shows the confirmation. */
     copy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocCopyButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocCopyButtonComponent, "ng-doc-copy-button", never, { "text": { "alias": "text"; "required": true; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocCopyButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocCopyButtonComponent, "ng-doc-copy-button", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocCopyButtonComponent };
+export type { NgDocCopyButtonText };

package/types/ng-doc-app-components-demo-displayer.d.ts

@@ -1,16 +1,29 @@
+import * as _angular_core from '@angular/core';
 import { NgDocContent } from '@ng-doc/ui-kit';
-import * as i0 from '@angular/core';
 
+/**
+ * A demo on the dot-grid stage with a copy button and a toggle that reveals its code below it
+ * (the rows of a playground use it).
+ */
 declare class NgDocDemoDisplayerComponent {
-    codeContent: NgDocContent;
-    code: string;
-    language: string;
-    container: boolean;
-    border: boolean;
-    expanded: boolean;
-    protected get expandTooltipText(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDemoDisplayerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoDisplayerComponent, "ng-doc-demo-displayer", never, { "codeContent": { "alias": "codeContent"; "required": false; }; "code": { "alias": "code"; "required": false; }; "language": { "alias": "language"; "required": false; }; "container": { "alias": "container"; "required": false; }; "border": { "alias": "border"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, never, ["*", "*"], true, never>;
+    /** Content shown when the code is revealed; when empty, the highlighted `code` is shown. */
+    readonly codeContent: _angular_core.InputSignal<NgDocContent>;
+    /** Code of the demo, copied by the copy button and shown when there is no `codeContent`. */
+    readonly code: _angular_core.InputSignal<string>;
+    /** Language of `code`. */
+    readonly language: _angular_core.InputSignal<string>;
+    /** Whether the demo is shown in the stage with its controls; otherwise it is shown as is. */
+    readonly container: _angular_core.InputSignal<boolean>;
+    /** Whether the displayer draws its border. */
+    readonly border: _angular_core.InputSignal<boolean>;
+    /** Whether the code is revealed. */
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    /** Id of the region that holds the code, for the toggle's `aria-controls`. */
+    protected readonly codeId: string;
+    /** Reveals or hides the code. */
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocDemoDisplayerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocDemoDisplayerComponent, "ng-doc-demo-displayer", never, { "codeContent": { "alias": "codeContent"; "required": false; "isSignal": true; }; "code": { "alias": "code"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "container": { "alias": "container"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*", "*"], true, never>;
 }
 
 export { NgDocDemoDisplayerComponent };

package/types/ng-doc-app-components-demo-frame.d.ts

@@ -0,0 +1,48 @@
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+import { SafeResourceUrl } from '@angular/platform-browser';
+
+/**
+ * Shows a demo page of the demo application in an iframe, as tall as the demo's content: the demo
+ * page reports its height with `postMessage`, and only messages from this iframe's window and
+ * origin are accepted. The iframe is created in the browser after the first render (the server
+ * renders a placeholder with a link to the demo page) and loads lazily. Until the demo reports its
+ * size, a placeholder tells that it is loading; a demo page that loads without reporting it within
+ * 10 seconds is reported as failed, with the link.
+ */
+declare class NgDocDemoFrameComponent {
+    /** The URL of the demo page, relative to the document or absolute on its origin. */
+    readonly src: _angular_core.InputSignal<string>;
+    /** The accessible title of the iframe. */
+    readonly frameTitle: _angular_core.InputSignal<string>;
+    /** Whether the iframe fills its container instead of taking the demo's height (fullscreen). */
+    readonly fill: _angular_core.InputSignal<boolean>;
+    /** The height the demo reported, in pixels. */
+    readonly height: _angular_core.WritableSignal<number | undefined>;
+    /** `loading` until the demo reports its size, then `ready`; `failed` when it never does. */
+    readonly state: Signal<'loading' | 'ready' | 'failed'>;
+    /** Whether the iframe exists: only in the browser, after the first render. */
+    protected readonly created: _angular_core.WritableSignal<boolean>;
+    /** The demo page's URL for the iframe. */
+    protected readonly frameSrc: Signal<SafeResourceUrl>;
+    private readonly sanitizer;
+    private readonly frame;
+    private readonly failed;
+    private timer?;
+    constructor();
+    /**
+     * Waits for the demo's size once its page has loaded.
+     * @internal
+     */
+    protected onLoad(): void;
+    /**
+     * Takes the height a demo page reports, from this iframe only.
+     * @param event - A message to the window.
+     * @internal
+     */
+    protected onMessage(event: MessageEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocDemoFrameComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocDemoFrameComponent, "ng-doc-demo-frame", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "frameTitle": { "alias": "frameTitle"; "required": true; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgDocDemoFrameComponent };

package/types/ng-doc-app-components-demo-pane.d.ts

@@ -1,21 +1,25 @@
-import * as i0 from '@angular/core';
-import { OnInit, Type } from '@angular/core';
+import * as _ng_doc_core from '@ng-doc/core';
+import * as _angular_core from '@angular/core';
+import { Signal, Type } from '@angular/core';
 import { NgDocDemoAsset } from '@ng-doc/app/interfaces';
-import { NgDocDemoPaneActionOptions } from '@ng-doc/core/interfaces';
 
-declare class NgDocDemoPaneComponent implements OnInit {
+/**
+ * Renders a demo of the page in front of its source files, which the reader reveals by dragging
+ * the pane's resizer. The demo sits on the dot-grid canvas of demos, with a control that shows it
+ * fullscreen with the browser Fullscreen API where the browser supports it.
+ */
+declare class NgDocDemoPaneComponent {
     private readonly rootPage;
-    componentName?: string;
-    options: NgDocDemoPaneActionOptions;
-    demo?: Type<unknown>;
-    assets: NgDocDemoAsset[];
-    constructor();
-    protected get classes(): string | string[];
-    ngOnInit(): void;
-    private getDemo;
-    private getAssets;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDemoPaneComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoPaneComponent, "ng-doc-demo-pane", never, { "componentName": { "alias": "componentName"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, true, never>;
+    /** Name of the demo component in the page's `demos`. */
+    readonly componentName: _angular_core.InputSignal<string | undefined>;
+    /** Options of the `demoPane` action. */
+    readonly options: _angular_core.InputSignal<_ng_doc_core.NgDocBaseDemoOptions>;
+    /** The demo component. */
+    readonly demo: Signal<Type<unknown> | undefined>;
+    /** Source files of the demo, filtered by the `tabs` option. */
+    readonly assets: Signal<NgDocDemoAsset[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocDemoPaneComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocDemoPaneComponent, "ng-doc-demo-pane", never, { "componentName": { "alias": "componentName"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocDemoPaneComponent };

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

@@ -1,22 +1,87 @@
-import * as i0 from '@angular/core';
-import { OnInit, Type } from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { Signal, Type } from '@angular/core';
 import { NgDocDemoAsset } from '@ng-doc/app/interfaces';
 import { NgDocDemoActionOptions } from '@ng-doc/core/interfaces';
 
-declare class NgDocDemoComponent implements OnInit {
+/** Widths the demo can be previewed at. */
+type NgDocDemoPreviewWidth = 'full' | '480' | '280';
+/**
+ * Renders a demo of the page in a panel: a toolbar with Preview and source tabs, the preview
+ * width, copy and fullscreen controls, over the demo on a dot-grid stage. The fullscreen control
+ * shows the stage fullscreen with the browser Fullscreen API; it is hidden where the browser does
+ * not support it.
+ *
+ * When the Vite engine built demo pages for the page (`NgDocRootPage.demoRoute`), the toolbar
+ * opens the demo's page in a new tab, and an isolated demo (the `isolated` option, or
+ * `isolatedDemos`) is shown in an iframe of its page: the preview widths are then the width of the
+ * iframe's viewport, so media queries inside the demo respond to them. Otherwise the demo renders
+ * in the page, and the preview widths set the width of its container only.
+ */
+declare class NgDocDemoComponent {
     private readonly rootPage;
-    componentName?: string;
-    options: NgDocDemoActionOptions;
-    demo?: Type<unknown>;
-    assets: NgDocDemoAsset[];
-    constructor();
-    protected get classes(): string | string[];
-    ngOnInit(): void;
-    getOpenedAssetId(assets: NgDocDemoAsset[]): string | undefined;
-    private getDemo;
-    private getAssets;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDemoComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoComponent, "ng-doc-demo", never, { "componentName": { "alias": "componentName"; "required": false; }; "options": { "alias": "options"; "required": false; }; }, {}, never, never, true, never>;
+    private readonly document;
+    private readonly platformLocation;
+    private readonly appBaseHref;
+    /** Name of the demo component in the page's `demos`. */
+    readonly componentName: _angular_core.InputSignal<string | undefined>;
+    /** Options of the `demo` action. */
+    readonly options: _angular_core.InputSignal<NgDocDemoActionOptions>;
+    /** The demo component. */
+    readonly demo: Signal<Type<unknown> | undefined>;
+    /**
+     * The URL of the demo's page, when the page has demo pages and the demo exists: the generated
+     * demo route and the demo's name under the base href, with the `inputs` option as a query
+     * parameter.
+     */
+    readonly demoUrl: Signal<string | undefined>;
+    /** Whether the demo is shown in an iframe of its page. */
+    readonly isolated: Signal<boolean>;
+    /** The accessible title of the demo's iframe. */
+    protected readonly frameTitle: Signal<string>;
+    /** Whether the stage is fullscreen. */
+    protected readonly fullscreen: Signal<boolean>;
+    private readonly stage;
+    /** Source files of the demo, filtered by the `tabs` option. */
+    readonly assets: Signal<NgDocDemoAsset[]>;
+    /**
+     * The open view: `preview`, or the title of a source file. It starts on the preview, or on the
+     * default source file when the `expanded` option is set.
+     */
+    readonly view: _angular_core.WritableSignal<string>;
+    /** The width the demo is previewed at. */
+    readonly previewWidth: _angular_core.WritableSignal<NgDocDemoPreviewWidth>;
+    protected readonly previewWidths: readonly {
+        readonly width: NgDocDemoPreviewWidth;
+        readonly label: string;
+        readonly readout: string;
+    }[];
+    /** Readout of the preview width. */
+    protected readonly widthReadout: Signal<string>;
+    /** The views in tab order: the preview, then the source files. */
+    protected readonly views: Signal<string[]>;
+    /** Prefix of the ids that tie the view tabs to their panels. */
+    protected readonly idPrefix: string;
+    /** Reads the code of the open source file (or the default one) when copy is pressed. */
+    protected readonly copyText: () => string;
+    private readonly viewTabs;
+    /**
+     * The source file that opens first: the snippet marked `opened`, then `defaultTab`, then the
+     * first file (the order the demo has always used).
+     */
+    private readonly defaultAsset;
+    /**
+     * Opens a view.
+     * @param view - `preview` or the title of a source file.
+     */
+    openView(view: string): void;
+    /**
+     * Moves between the view tabs with the keyboard.
+     * @param event - The key press on a view tab.
+     */
+    protected onViewKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocDemoComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocDemoComponent, "ng-doc-demo", never, { "componentName": { "alias": "componentName"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocDemoComponent };
+export type { NgDocDemoPreviewWidth };

package/types/ng-doc-app-components-fullscreen-button.d.ts

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
 
+/** A link that opens a demo's fullscreen route in a new tab. */
 declare class NgDocFullscreenButtonComponent {
-    route: string;
+    /** Route of the fullscreen demo. */
+    readonly route: i0.InputSignal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocFullscreenButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocFullscreenButtonComponent, "ng-doc-fullscreen-button", never, { "route": { "alias": "route"; "required": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocFullscreenButtonComponent, "ng-doc-fullscreen-button", never, { "route": { "alias": "route"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocFullscreenButtonComponent };

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

@@ -0,0 +1,24 @@
+import * as i0 from '@angular/core';
+import { Signal } from '@angular/core';
+import { NgDocFullscreenDirective } from '@ng-doc/ui-kit';
+
+/**
+ * An icon button that shows an element fullscreen with the browser Fullscreen API, or leaves
+ * fullscreen. Its icon, label and tooltip follow the fullscreen state, and it is hidden where the
+ * browser does not support fullscreen and on the server.
+ * @example
+ * ```html
+ * <div ngDocFullscreen #stage="ngDocFullscreen">…</div>
+ * <ng-doc-fullscreen-toggle [target]="stage" />
+ * ```
+ */
+declare class NgDocFullscreenToggleComponent {
+    /** The element to show fullscreen. */
+    readonly target: i0.InputSignal<NgDocFullscreenDirective>;
+    /** Accessible name and tooltip of the button, which follow the fullscreen state. */
+    protected readonly label: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocFullscreenToggleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocFullscreenToggleComponent, "ng-doc-fullscreen-toggle", never, { "target": { "alias": "target"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { NgDocFullscreenToggleComponent };

package/types/ng-doc-app-components-heading-anchor.d.ts

@@ -1,12 +1,31 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
 
-declare class NgDocHeadingAnchorComponent {
-    anchor: string;
-    classes: string[];
+/**
+ * Button next to a heading that copies the link to the heading.
+ */
+declare class NgDocHeadingAnchorComponent implements OnInit {
+    /** Id of the heading. */
+    readonly anchor: _angular_core.InputSignal<string>;
+    /** Classes of the host element. */
+    readonly classes: _angular_core.InputSignal<string[]>;
     protected readonly location: Location;
-    protected get href(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocHeadingAnchorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocHeadingAnchorComponent, "ng-doc-heading-anchor", never, { "anchor": { "alias": "anchor"; "required": true; }; "classes": { "alias": "classes"; "required": false; }; }, {}, never, never, true, never>;
+    private readonly locationStrategy;
+    private readonly host;
+    private readonly renderer;
+    protected readonly href: () => string;
+    /**
+     * Names the heading after its own text: the anchor sits inside the heading, so the button's
+     * label would otherwise end the heading's accessible name ("Installation Copy link to
+     * section"). The heading's other content moves into a span that the heading is labelled by, so
+     * the name follows that content and leaves out whatever it hides from assistive technology.
+     * The processors insert the anchor before its first change detection, on the server as in the
+     * browser, so the heading is its parent here.
+     * @internal
+     */
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocHeadingAnchorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocHeadingAnchorComponent, "ng-doc-heading-anchor", never, { "anchor": { "alias": "anchor"; "required": true; "isSignal": true; }; "classes": { "alias": "classes"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { NgDocHeadingAnchorComponent };

package/types/ng-doc-app-components-image-viewer.d.ts

@@ -1,18 +1,82 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef, ChangeDetectorRef } from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import { NgDocOverlayService } from '@ng-doc/ui-kit';
 import { NgDocOverlayRef } from '@ng-doc/ui-kit/classes';
 
+/** The size of the opened image, in CSS pixels. */
+interface ZoomSize {
+    width: number;
+    height: number;
+}
+/**
+ * Wraps an image of the page: clicking it, or pressing Enter or Space on it, opens the image at
+ * its natural size, scaled down to fit the window.
+ *
+ * An image inside a link keeps the link's behaviour, and an image with an empty `alt` is
+ * decorative: neither becomes a button.
+ */
 declare class NgDocImageViewerComponent {
-    src: _angular_core.InputSignal<string>;
-    alt: _angular_core.InputSignal<string>;
-    protected readonly image: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /** Source of the image. */
+    readonly src: _angular_core.InputSignal<string>;
+    /** Alternative text of the image. */
+    readonly alt: _angular_core.InputSignal<string>;
+    protected readonly image: _angular_core.Signal<TemplateRef<any>>;
     protected readonly overlay: NgDocOverlayService;
-    protected readonly element: any;
-    protected readonly changeDetectorRef: ChangeDetectorRef;
+    protected readonly element: HTMLElement;
+    protected readonly window: Window | null;
+    /** Whether the scaled image is open. */
+    protected readonly opened: _angular_core.WritableSignal<boolean>;
+    /** The size of the opened image. */
+    protected readonly size: _angular_core.WritableSignal<ZoomSize>;
     protected overlayRef?: NgDocOverlayRef;
+    private attempt;
+    private destroyed;
+    constructor();
+    /**
+     * Opens the image at its natural size, scaled down to fit the window, unless the image is not
+     * interactive. The image grows from its place on the page.
+     */
     clickEvent(): void;
-    protected enterContainer(element: HTMLElement): void;
+    /**
+     * Whether the image opens: it has a text alternative and is not inside a link. The page
+     * processor moves the host into place before change detection, so the check reads the DOM
+     * where the image ends up.
+     */
+    protected isInteractive(): boolean;
+    /**
+     * Opens the image on Space without scrolling the page.
+     * @param event - The key press.
+     */
+    protected onSpace(event: Event): void;
+    private open;
+    /**
+     * Waits until the image is decoded, so its natural size is known. Escape cancels the open
+     * meanwhile, as it closes the opened image. A failed decode (a broken or not yet available
+     * image) leaves the sizes that are known.
+     * @param thumbnail - The image on the page.
+     */
+    private decode;
+    /**
+     * The size to scale: the natural size of the image, or the size of the thumbnail for an image
+     * without one (an SVG without dimensions), which may then grow to fill the window.
+     * @param thumbnail - The image on the page.
+     */
+    private sourceSize;
+    /**
+     * The size the image opens at: its natural size, scaled down to fit the viewport with a margin
+     * and never scaled up. An image without a natural size fills the available space with the
+     * proportions of its thumbnail.
+     * @param source - The size to scale.
+     */
+    private fit;
+    /**
+     * The keyframe that puts the opened image over its thumbnail. The overlay centres the image in
+     * the viewport; the frame scales it uniformly to fit the thumbnail's box and centres it there,
+     * so an image whose proportions differ from its box's is not distorted.
+     * @param thumbnail - The image on the page.
+     * @param size - The size of the opened image.
+     */
+    private thumbnailFrame;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocImageViewerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocImageViewerComponent, "ng-doc-image-viewer", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }

package/types/ng-doc-app-components-kind-icon.d.ts

@@ -1,11 +1,32 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
 
+/**
+ * Words the kind chips show for declaration kinds whose name is not already a readable word.
+ * Other kinds (and value types) are shown as they are.
+ */
+declare const NG_DOC_KIND_LABELS: Readonly<Record<string, string>>;
+/**
+ * The label a kind chip shows for a kind.
+ * @param kind - Declaration kind (for example `Class` or `TypeAlias`) or value type (`string`).
+ * @returns The word to show, for example "Type alias".
+ */
+declare function ngDocKindLabel(kind: string): string;
+/**
+ * A word chip for a declaration kind (`Class`, `Component`, `Type alias`, ...) or a value type
+ * (`string`, `boolean`, ...), coloured by the kind.
+ */
 declare class NgDocKindIconComponent {
-    kind: string;
-    type: 'declaration' | 'type';
-    size: 'small' | 'medium';
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocKindIconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocKindIconComponent, "ng-doc-kind-icon", never, { "kind": { "alias": "kind"; "required": false; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
+    /** Declaration kind or value type. */
+    readonly kind: _angular_core.InputSignal<string>;
+    /** Whether `kind` is a declaration kind or a value type; it selects the colours. */
+    readonly type: _angular_core.InputSignal<"declaration" | "type">;
+    /** `small` is the compact chip; `medium` the regular one. */
+    readonly size: _angular_core.InputSignal<"small" | "medium">;
+    /** The word the chip shows. */
+    protected readonly label: Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocKindIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocKindIconComponent, "ng-doc-kind-icon", never, { "kind": { "alias": "kind"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { NgDocKindIconComponent };
+export { NG_DOC_KIND_LABELS, NgDocKindIconComponent, ngDocKindLabel };

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

@@ -1,9 +1,13 @@
 import * as i0 from '@angular/core';
 
+/**
+ * Router link to a path of the application.
+ */
 declare class NgDocLinkComponent {
-    path: string;
+    /** The path to link to. */
+    readonly path: i0.InputSignal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocLinkComponent, "ng-doc-link", never, { "path": { "alias": "path"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocLinkComponent, "ng-doc-link", never, { "path": { "alias": "path"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { NgDocLinkComponent };