@ng-doc/app 22.0.0 → 22.2.0

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

@@ -1,10 +1,11 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, Signal, ViewContainerRef, InputSignal, ChangeDetectorRef, AfterViewInit, WritableSignal, OnChanges, OnDestroy, Injector, DestroyRef, SimpleChanges } from '@angular/core';
+import { OnInit, Signal, ViewContainerRef, InputSignal, ChangeDetectorRef, OnChanges, OnDestroy, Injector, DestroyRef, SimpleChanges, AfterViewInit, WritableSignal, InjectionToken } 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 { NgDocProvidedTypeControl, NgDocTypeControlProviderOptions } from '@ng-doc/app/interfaces';
+import { ɵNgDocPlaygroundFrameMessage as _NgDocPlaygroundFrameMessage } from '@ng-doc/app/demo-app';
+import { NgDocPlaygroundTexts, NgDocProvidedTypeControl, NgDocTypeControlProviderOptions } from '@ng-doc/app/interfaces';
 
 /**
  * Base class of the playground classes the builder generates, one per playground and selector.
@@ -48,45 +49,20 @@ interface NgDocPlaygroundForm {
 }
 
 /**
- * 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.
+ * The iframe an isolated playground shows a target in: the URL of the target's page in the demo
+ * application, the fragment with the current state, and the iframe's accessible title.
+ * @internal
  */
-declare class NgDocPlaygroundComponent<T extends NgDocPlaygroundProperties = NgDocPlaygroundProperties> implements AfterViewInit {
-    private readonly rootPage;
-    private readonly formBuilder;
-    /** 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;
-    ngAfterViewInit(): void;
-    protected isDefaultState(): boolean;
-    private getPropertiesFormValues;
-    private getContentFormValues;
-    /** Sets every input and content slot back to its default value. */
-    resetForm(): void;
-    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>;
+interface ɵNgDocPlaygroundFrame {
+    readonly url: string;
+    readonly fragment: string;
+    readonly title: string;
 }
-
 /**
  * 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.
+ * passes it the form's values and shows the code of the current state. In an isolated playground
+ * the class runs on a page of the demo application in an iframe, which gets the values from its
+ * URL fragment, and reports the target's defaults back for the code view.
  */
 declare class NgDocPlaygroundDemoComponent<T extends NgDocPlaygroundProperties = NgDocPlaygroundProperties> implements OnChanges, OnDestroy {
     /** The name of the playground in the page configuration. */
@@ -105,6 +81,29 @@ declare class NgDocPlaygroundDemoComponent<T extends NgDocPlaygroundProperties =
     readonly form: InputSignal<FormGroup<NgDocPlaygroundForm> | undefined>;
     /** Whether the code of the demo is shown. */
     readonly expanded: InputSignal<boolean>;
+    /** The iframe of an isolated playground; without it, the class is created in the page. */
+    readonly frame: InputSignal<ɵNgDocPlaygroundFrame | undefined>;
+    /** The defaults of the target's inputs that the iframe reported, for the code view. */
+    readonly frameDefaults: InputSignal<Record<string, unknown> | undefined>;
+    /** The messages of the iframe of an isolated playground. */
+    readonly frameMessage: _angular_core.OutputEmitterRef<_NgDocPlaygroundFrameMessage>;
+    /** The iframe's page loaded but did not report the target in time. */
+    readonly frameSilent: _angular_core.OutputEmitterRef<void>;
+    /** The theme of the iframe, which the theme button beside the demo changes. */
+    readonly frameTheme: _angular_core.ModelSignal<string | undefined>;
+    /** The `theme` option of the playground, which the theme button offers too. */
+    readonly configuredTheme: InputSignal<string | undefined>;
+    /** The iframe of an isolated playground, while it is shown. */
+    private readonly frameComponent;
+    /**
+     * The background of the canvas while the iframe shows a theme of its own: the background its
+     * page reported, so the whole canvas reads in that theme.
+     */
+    protected readonly canvasBackground: Signal<string | undefined>;
+    /** The dots of the canvas while the iframe shows a theme of its own, in that theme's color. */
+    protected readonly canvasDots: Signal<string | undefined>;
+    /** The iframe's page with the current state, which the toolbar opens in a new tab. */
+    protected readonly frameUrl: Signal<string | undefined>;
     /** Where the playground class is created. */
     readonly demoOutlet: Signal<ViewContainerRef | undefined>;
     /** The generated playground class of this demo's selector or pipe. */
@@ -115,7 +114,7 @@ declare class NgDocPlaygroundDemoComponent<T extends NgDocPlaygroundProperties =
     private readonly pendingTasks;
     private demoRef?;
     private readonly unsubscribe$;
-    ngOnChanges({ form, id }: SimpleChanges): Promise<void>;
+    ngOnChanges({ form, id, frame }: SimpleChanges): Promise<void>;
     private updateDemo;
     private createDemo;
     private updateCodeView;
@@ -123,8 +122,196 @@ declare class NgDocPlaygroundDemoComponent<T extends NgDocPlaygroundProperties =
     private getActiveInputs;
     private getPipeActiveInputs;
     ngOnDestroy(): void;
+    /**
+     * The default of an input: from the class in the page, or as the iframe reported it.
+     * @param key
+     */
+    private defaultValue;
     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>;
+    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; }; "frame": { "alias": "frame"; "required": false; "isSignal": true; }; "frameDefaults": { "alias": "frameDefaults"; "required": false; "isSignal": true; }; "frameTheme": { "alias": "frameTheme"; "required": false; "isSignal": true; }; "configuredTheme": { "alias": "configuredTheme"; "required": false; "isSignal": true; }; }, { "frameMessage": "frameMessage"; "frameSilent": "frameSilent"; "frameTheme": "frameThemeChange"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ *
+ * An isolated playground (the `isolated` option, or `isolatedPlaygrounds`) shows each demo in an
+ * iframe of its page in the demo application, which the Vite engine builds. The inspector stays
+ * here and passes the values in the iframe's URL fragment; the page reports the target's defaults
+ * back. When a value can't be put in the URL, the playground renders its demos in the page
+ * instead, with a note that names the input.
+ */
+declare class NgDocPlaygroundComponent<T extends NgDocPlaygroundProperties = NgDocPlaygroundProperties> implements AfterViewInit {
+    private readonly rootPage;
+    private readonly formBuilder;
+    private readonly texts;
+    /** 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>;
+    /**
+     * The note that says why the playground renders in the page although it is isolated: the input
+     * whose value can't be sent to its iframes, or what failed. Once set, it stays for the rest of
+     * the visit.
+     */
+    readonly fallback: WritableSignal<string | undefined>;
+    /** Whether the demos are shown in iframes of their pages in the demo application. */
+    readonly isolated: Signal<boolean>;
+    /** The note that says why an isolated playground renders in the page. */
+    readonly fallbackNote: Signal<string | undefined>;
+    /**
+     * The theme of the iframes: the `theme` option, until the reader picks another with the theme
+     * button beside a demo; `undefined` follows the page.
+     */
+    readonly frameTheme: WritableSignal<string | undefined>;
+    /** The iframe of each target, by selector or pipe name, while the playground is isolated. */
+    readonly frames: Signal<Map<string, ɵNgDocPlaygroundFrame> | undefined>;
+    private readonly injector;
+    private readonly platformLocation;
+    private readonly appBaseHref;
+    private readonly formValue;
+    private defaultProperties;
+    private defaultContent;
+    private viewInitialized;
+    /** Every target of the playground, in the order of its page's routes: its selectors, or the pipe. */
+    private readonly targets;
+    /** The state of the iframes as a URL fragment. */
+    private readonly fragment;
+    /**
+     * An input whose control is declared not cloneable (`cloneable: false` of `provideTypeControl`):
+     * the playground renders in the page from the start.
+     */
+    private readonly uncloneableControl;
+    /**
+     * A selector of the `selectors` option that is not one of the target's: it has no page, so the
+     * playground renders in the page from the start.
+     */
+    private readonly pagelessSelector;
+    constructor();
+    /**
+     * Takes a message of a demo's iframe: the target's defaults, which create the form, or a
+     * failure, which makes the playground render in the page.
+     * @param message - The message.
+     * @internal
+     */
+    onFrameMessage(message: _NgDocPlaygroundFrameMessage): void;
+    /**
+     * Makes the playground render in the page when the page in an iframe loaded but did not report
+     * the target, such as a page the build didn't make.
+     * @internal
+     */
+    onFrameSilent(): void;
+    ngAfterViewInit(): void;
+    private createForm;
+    /**
+     * The URL of a target's page in the demo application, under the document's base href.
+     * @param slug
+     */
+    private pageUrl;
+    protected isDefaultState(): boolean;
+    private getPropertiesFormValues;
+    private getContentFormValues;
+    /** Sets every input and content slot back to its default value. */
+    resetForm(): void;
+    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>;
+}
+
+/**
+ * What a generated playground class needs from the playground that shows it: the target's inputs
+ * (the order of a pipe's parameters) and the place to report the target's default input values.
+ * The playground on the documentation page provides it, and so does the page of an isolated
+ * playground in the demo application, which shows the class without the rest of the playground.
+ * @internal
+ */
+interface ɵNgDocPlaygroundContainer {
+    /** The inputs of the target, by name: only the names, in order, are read. */
+    readonly properties: Signal<Readonly<Record<string, unknown>> | undefined>;
+    /** The default values of the target's inputs, reported by the first class created. */
+    readonly defaultValues: WritableSignal<Record<string, unknown> | undefined>;
+}
+/**
+ * The playground that shows a generated playground class.
+ * @internal
+ */
+declare const ɵNG_DOC_PLAYGROUND_CONTAINER: InjectionToken<ɵNgDocPlaygroundContainer>;
+
+/**
+ * The route data of the page of an isolated playground: the playground's name in the page's
+ * `playgrounds`, and the target it shows, a selector or a pipe's name.
+ * @internal
+ */
+interface ɵNgDocPlaygroundRouteData {
+    readonly id: string;
+    readonly selector?: string;
+    readonly pipeName?: string;
+}
+/**
+ * Shows one target of a playground on a page of the demo application, for an isolated playground:
+ * the generated playground class of the route's playground and target, without the inspector,
+ * which stays on the documentation page. The state comes from the URL fragment, and a new
+ * fragment applies a new state without a reload (the documentation page replaces it with
+ * `location.replace`). The page tells the documentation page, with `postMessage`, the target's
+ * default input values once it exists, each state it applied, and what failed.
+ *
+ * Like the demo host, it skips hydration: the server renders the target with its defaults, and
+ * the browser renders it again with the fragment's state, which only the browser has.
+ */
+declare class NgDocPlaygroundHostComponent implements ɵNgDocPlaygroundContainer {
+    /** The target's inputs, by name, from the state: a pipe's parameters are positional. */
+    readonly properties: _angular_core.WritableSignal<Readonly<Record<string, unknown>> | undefined>;
+    /** The default values of the target's inputs, reported by the generated class. */
+    readonly defaultValues: _angular_core.WritableSignal<Record<string, unknown> | undefined>;
+    /** Whether the route names a playground or a target the page doesn't have. */
+    protected readonly missing: boolean;
+    protected readonly texts: NgDocPlaygroundTexts;
+    private readonly injector;
+    private readonly outlet;
+    private readonly window;
+    private readonly playground?;
+    private reference?;
+    constructor();
+    /**
+     * Creates the target with the first state, and reports its defaults once it has rendered.
+     * @param state
+     */
+    private start;
+    /**
+     * Creates the target and sets the state; reports a failure instead of throwing.
+     * @param state
+     */
+    private create;
+    /**
+     * Applies a state to the existing target, or creates it again when the state asks to.
+     * @param state
+     */
+    private apply;
+    private setState;
+    /** The state of the URL fragment; a malformed one is reported and reads as `undefined`. */
+    private readState;
+    private applied;
+    private post;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgDocPlaygroundHostComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgDocPlaygroundHostComponent, "ng-doc-playground-host", never, {}, {}, never, never, true, never>;
 }
 
 interface NgDocPlaygroundPropertyControl {
@@ -138,6 +325,7 @@ interface NgDocPlaygroundPropertyControl {
  * 640px) the Recreate setting and a control per input and content slot.
  */
 declare class NgDocPlaygroundPropertiesComponent<P extends NgDocPlaygroundProperties, C extends Record<string, NgDocPlaygroundContent>> {
+    protected readonly texts: NgDocPlaygroundTexts;
     private readonly injector;
     /** The form of the playground. */
     readonly form: _angular_core.InputSignal<FormGroup<NgDocPlaygroundForm>>;
@@ -149,18 +337,30 @@ declare class NgDocPlaygroundPropertiesComponent<P extends NgDocPlaygroundProper
     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 demos render before the defaults are known: an isolated playground's iframes
+     * report them, so they must render first. The controls render once the defaults are known.
+     */
+    readonly waitingForDefaults: _angular_core.InputSignal<boolean>;
     /** 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;
     /**
@@ -171,9 +371,23 @@ declare class NgDocPlaygroundPropertiesComponent<P extends NgDocPlaygroundProper
     getFormControl(controlType: keyof NgDocPlaygroundForm, key: string): FormControl;
     private getTypeControl;
     private getControlForType;
+    /**
+     * The control of the values of a union, when every option is a value: the select of a union
+     * (`NgDocTypeAlias`) or the multi-select of an array of one (`NgDocTypeAlias[]`). An optional
+     * array input without such options has the members of its own union (`undefined` and the array
+     * type), and the text of an array type is not a value of an item.
+     * @param options - The options of the input.
+     * @param isManual - Whether the options come from the playground's `controls`.
+     * @param controlType - The type the control is registered for.
+     */
     private getControlForTypeAlias;
     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>;
+    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; }; "waitingForDefaults": { "alias": "waitingForDefaults"; "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[];
 }
 
 /**
@@ -199,6 +413,10 @@ declare class NgDocPlaygroundPropertyComponent {
     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?;
     constructor();
@@ -207,5 +425,5 @@ declare class NgDocPlaygroundPropertyComponent {
     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 };
-export type { NgDocPlaygroundForm, NgDocPlaygroundPropertyControl };
+export { NgDocBasePlayground, NgDocPlaygroundComponent, NgDocPlaygroundDemoComponent, NgDocPlaygroundHostComponent, NgDocPlaygroundPropertiesComponent, NgDocPlaygroundPropertyComponent, ɵNG_DOC_PLAYGROUND_CONTAINER };
+export type { NgDocPlaygroundForm, NgDocPlaygroundPropertyControl, ɵNgDocPlaygroundContainer, ɵNgDocPlaygroundFrame, ɵNgDocPlaygroundRouteData };

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

@@ -1,4 +1,5 @@
 import * as i0 from '@angular/core';
+import { NgDocNavigationTexts } from '@ng-doc/app/interfaces';
 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';
@@ -45,8 +46,15 @@ declare class NgDocCustomSidebarDirective {
  *
  * 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.
+ *
+ * While it is shown, the router scrolls anchors below the navbar (the scroll offset of
+ * `ViewportScroller`), and the keyboard shortcuts of the documentation work
+ * (`NgDocShortcutsService`). When it is destroyed, for example when the reader leaves
+ * documentation served under a route, the previous scroll offset comes back and the shortcuts
+ * stop. Without navbar content, it renders no header.
  */
 declare class NgDocRootComponent {
+    protected readonly texts: NgDocNavigationTexts;
     /**
      * If `true` then the sidebar will be shown
      * You can use it for example for landing page to hide sidebar
@@ -64,7 +72,9 @@ declare class NgDocRootComponent {
     protected readonly sidebarService: NgDocSidebarService;
     protected readonly fullscreenRoute: NgDocFullscreenRouteService;
     private readonly document;
+    private readonly host;
     private readonly sidenavQuery;
+    constructor();
     /**
      * The sidenav that holds the sidebar and the page.
      */
@@ -74,6 +84,14 @@ declare class NgDocRootComponent {
      * @param event - The click on the skip link; its navigation to a fragment is cancelled.
      */
     skipToContent(event?: Event): void;
+    /**
+     * Makes the router scroll anchors below the layout's header, and below an application header
+     * that the layout makes room for.
+     * @returns A function that restores the previous offset, unless it was changed since.
+     */
+    private setScrollOffset;
+    /** The layout's top offset in pixels, read from the margin it gives the page area. */
+    private layoutTop;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocRootComponent, 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>;
 }

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

@@ -1,11 +1,13 @@
 import * as i0 from '@angular/core';
 import { Signal } from '@angular/core';
+import { NgDocSearchTexts } from '@ng-doc/app/interfaces';
 import { NgDocPageInfo } from '@ng-doc/core/interfaces';
 
 /**
  * A list of pages grouped by their type (guides and API).
  */
 declare class NgDocSearchResultComponent {
+    protected readonly texts: NgDocSearchTexts;
     /** The pages to list. */
     readonly result: i0.InputSignal<NgDocPageInfo[] | null>;
     /** The pages grouped by their type. */

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

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
 import { NgDocSearchEngine } from '@ng-doc/app/classes';
+import { NgDocSearchTexts } from '@ng-doc/app/interfaces';
 import { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';
 import { NgDocDialogService } from '@ng-doc/ui-kit';
 
@@ -12,6 +13,7 @@ declare class NgDocSearchComponent {
     protected readonly dialog: NgDocDialogService;
     protected readonly searchEngine: NgDocSearchEngine | null;
     protected readonly shortcuts: NgDocShortcutsService;
+    protected readonly texts: NgDocSearchTexts;
     /** The chord that opens the search, as the reader's platform labels it. */
     protected readonly chord: i0.WritableSignal<string>;
     private readonly document;

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

@@ -1,9 +1,10 @@
 import * as _ng_doc_app_interfaces from '@ng-doc/app/interfaces';
-import { NgDocNavigation } from '@ng-doc/app/interfaces';
+import { NgDocNavigationTexts, NgDocNavigation } from '@ng-doc/app/interfaces';
 import { Location } from '@angular/common';
 import * as i0 from '@angular/core';
 
 declare class NgDocSidebarComponent {
+    protected readonly texts: NgDocNavigationTexts;
     protected readonly location: Location;
     protected readonly context: _ng_doc_app_interfaces.NgDocContext;
     getNavigation(nav?: NgDocNavigation): NgDocNavigation[];

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

@@ -1,13 +1,23 @@
 import * as i0 from '@angular/core';
-import { Signal } from '@angular/core';
+import { OnInit, Signal } from '@angular/core';
 import { NgDocTab } from '@ng-doc/app/interfaces';
 
-/** Grouped code blocks of a page, shown as tabs. */
-declare class NgDocTabsComponent {
+/**
+ * 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.

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

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
 import { Signal } from '@angular/core';
+import { NgDocThemeTexts } from '@ng-doc/app/interfaces';
 import { NgDocThemeService } from '@ng-doc/app/services/theme';
 
 interface ToggleTheme {
-    name: string;
+    /** The text of the theme's name. */
+    text: 'auto' | 'light' | 'dark';
     theme: string | null;
 }
 /**
@@ -13,6 +15,7 @@ interface ToggleTheme {
  */
 declare class NgDocThemeToggleComponent {
     protected readonly themeService: NgDocThemeService;
+    protected readonly texts: NgDocThemeTexts;
     /**
      * The current theme. A custom theme id counts as Auto, because the toggle does not offer it.
      */

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

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { Signal, ElementRef } from '@angular/core';
-import { NgDocPageToc, NgDocTocItem } from '@ng-doc/app/interfaces';
+import { NgDocPageToc, NgDocTocTexts, NgDocTocItem } from '@ng-doc/app/interfaces';
 
 /**
  * The "On this page" rail: the headings of the page, the section the reader is in, the reading
@@ -15,6 +15,7 @@ import { NgDocPageToc, NgDocTocItem } from '@ng-doc/app/interfaces';
  * While the rail exists, the L shortcut runs its Copy link action, so the rail confirms the copy.
  */
 declare class NgDocTocComponent implements NgDocPageToc {
+    protected readonly texts: NgDocTocTexts;
     /** The headings of the page. */
     readonly tableOfContent: _angular_core.InputSignal<NgDocTocItem[]>;
     /** URL where the reader can edit the page source. Without it, the rail has no Edit action. */

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

@@ -5,6 +5,7 @@ export * from '@ng-doc/app/components/command-palette';
 export * from '@ng-doc/app/components/copy-button';
 export * from '@ng-doc/app/components/demo';
 export * from '@ng-doc/app/components/demo-displayer';
+export * from '@ng-doc/app/components/demo-frame';
 export * from '@ng-doc/app/components/demo-pane';
 export * from '@ng-doc/app/components/fullscreen-button';
 export * from '@ng-doc/app/components/fullscreen-toggle';

package/types/ng-doc-app-constants.d.ts

@@ -1,3 +1,13 @@
+/**
+ * The window event that the NgDoc development client of the Vite host dispatches when a commit
+ * changed only generated content modules (and the search index). Its `detail` holds the new
+ * `payloads` of the changed content modules and whether the `search` index changed. A page that
+ * applies it calls `preventDefault()`; the client reloads the page when nobody does, so a page
+ * without the NgDoc runtime still shows the new content.
+ * @internal
+ */
+declare const ɵNG_DOC_CONTENT_UPDATE_EVENT = "ng-doc:content-update";
+
 declare const NG_DOC_STORE_THEME_KEY: string;
 
-export { NG_DOC_STORE_THEME_KEY };
+export { NG_DOC_STORE_THEME_KEY, ɵNG_DOC_CONTENT_UPDATE_EVENT };