@ng-doc/app 22.0.0 → 22.1.0

package/fesm2022/ng-doc-app-type-controls-type-alias-control.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-type-controls-type-alias-control.mjs","sources":["../../../../libs/app/type-controls/type-alias-control/type-alias-control.component.ts","../../../../libs/app/type-controls/type-alias-control/type-alias-control.component.html","../../../../libs/app/type-controls/type-alias-control/ng-doc-app-type-controls-type-alias-control.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgDocTypeControl } from '@ng-doc/app/interfaces';\nimport { NgDocExtractValuePipe } from '@ng-doc/app/pipes/extract-value';\nimport {\n  NgDocButtonIconComponent,\n  NgDocComboboxComponent,\n  NgDocDataDirective,\n  NgDocFocusableDirective,\n  NgDocIconComponent,\n  NgDocListComponent,\n  NgDocOptionComponent,\n} from '@ng-doc/ui-kit';\nimport { DIControl } from 'di-controls';\n\n/**\n * The playground control of union type aliases: a select that shows the value and whether it is\n * the default. The inspector shows the value type under the input's name.\n */\n@Component({\n  selector: 'ng-doc-type-alias-control',\n  templateUrl: './type-alias-control.component.html',\n  styleUrls: ['./type-alias-control.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgDocComboboxComponent,\n    FormsModule,\n    NgDocDataDirective,\n    NgDocListComponent,\n    NgDocOptionComponent,\n    NgTemplateOutlet,\n    NgDocButtonIconComponent,\n    NgDocFocusableDirective,\n    NgDocIconComponent,\n    NgDocExtractValuePipe,\n  ],\n})\nexport class NgDocTypeAliasControlComponent<T> extends DIControl<T> implements NgDocTypeControl<T> {\n  /** Default value of the input; clearing the selection returns to it. */\n  readonly default = input<T | undefined>(undefined);\n\n  /** Values the input accepts: literal source text, or plain values when `isManual` is set. */\n  readonly options = input<string[] | undefined>(undefined);\n\n  /** Whether `options` are values the user listed in the playground config. */\n  readonly isManual = input<boolean | undefined>(undefined);\n\n  constructor() {\n    super();\n  }\n\n  typeOf(value: unknown): string {\n    return typeof value;\n  }\n\n  changeModel(value: T | null): void {\n    const defaultValue: T | undefined = this.default();\n\n    this.updateModel(value === null && defaultValue ? defaultValue : value);\n  }\n}\n","<ng-doc-combobox\n  [ngModel]=\"model()\"\n  [readonly]=\"true\"\n  [valueContent]=\"valueTemplate\"\n  [clearButton]=\"false\"\n  [rightContent]=\"rightContent\"\n  (ngModelChange)=\"changeModel($event)\">\n  <ng-doc-list *ngDocData>\n    @for (option of options(); track option) {\n      @if (isManual() ? option : (option | ngDocExtractValue); as value) {\n        <ng-doc-option [value]=\"value\">\n          <ng-container\n            *ngTemplateOutlet=\"valueTemplate; context: { $implicit: value }\"></ng-container>\n        </ng-doc-option>\n      }\n    }\n  </ng-doc-list>\n  <ng-template let-value #valueTemplate>\n    <div class=\"ng-doc-type-alias-value\">\n      <span class=\"ng-doc-type-alias-value-text\">{{ value }}</span>\n      @if (value === default()) {\n        <span class=\"ng-doc-type-alias-default\">default</span>\n      }\n    </div>\n  </ng-template>\n  <ng-template #rightContent>\n    @if (model() && model() !== default()) {\n      <button\n        ng-doc-button-icon-transparent\n        size=\"large\"\n        aria-label=\"Reset to the default value\"\n        [ngDocFocusable]=\"false\"\n        [disabled]=\"disabled\"\n        [rounded]=\"false\"\n        (click)=\"updateModel(default() ?? null)\"\n        (focusout)=\"touch()\">\n        <ng-doc-icon icon=\"x\"></ng-doc-icon>\n      </button>\n    }\n  </ng-template>\n</ng-doc-combobox>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-type-controls-type-alias-control.mjs","sources":["../../../../libs/app/type-controls/type-alias-control/type-alias-control.component.ts","../../../../libs/app/type-controls/type-alias-control/type-alias-control.component.html","../../../../libs/app/type-controls/type-alias-control/ng-doc-app-type-controls-type-alias-control.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgDocResolvedPlaygroundOption, resolvePlaygroundOption } from '@ng-doc/app/helpers';\nimport { NgDocTypeControl } from '@ng-doc/app/interfaces';\nimport { NgDocPlaygroundOption } from '@ng-doc/core/interfaces';\nimport {\n  NgDocButtonIconComponent,\n  NgDocComboboxComponent,\n  NgDocDataDirective,\n  NgDocFocusableDirective,\n  NgDocIconComponent,\n  NgDocListComponent,\n  NgDocOptionComponent,\n} from '@ng-doc/ui-kit';\nimport { DIControl } from 'di-controls';\n\n/**\n * The playground control of union type aliases and enums: a select that shows the value (or the\n * name of an enum member) and whether it is the default. The inspector shows the value type under\n * the input's name.\n */\n@Component({\n  selector: 'ng-doc-type-alias-control',\n  templateUrl: './type-alias-control.component.html',\n  styleUrls: ['./type-alias-control.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgDocComboboxComponent,\n    FormsModule,\n    NgDocDataDirective,\n    NgDocListComponent,\n    NgDocOptionComponent,\n    NgTemplateOutlet,\n    NgDocButtonIconComponent,\n    NgDocFocusableDirective,\n    NgDocIconComponent,\n  ],\n})\nexport class NgDocTypeAliasControlComponent<T> extends DIControl<T> implements NgDocTypeControl<T> {\n  /** Default value of the input; clearing the selection returns to it. */\n  readonly default = input<T | undefined>(undefined);\n\n  /**\n   * Values the input accepts: literal source text, plain values when `isManual` is set, or the\n   * names and values of enum members.\n   */\n  readonly options = input<Array<string | NgDocPlaygroundOption> | undefined>(undefined);\n\n  /** Whether `options` are values the user listed in the playground config. */\n  readonly isManual = input<boolean | undefined>(undefined);\n\n  /**\n   * The options of the select. `undefined` and `null` get no option: clearing the selection\n   * returns to the default value instead.\n   */\n  protected readonly items: Signal<NgDocResolvedPlaygroundOption[]> = computed(() => {\n    const isManual: boolean | undefined = this.isManual();\n\n    return (this.options() ?? []).flatMap((option: string | NgDocPlaygroundOption) => {\n      try {\n        const item: NgDocResolvedPlaygroundOption = resolvePlaygroundOption(option, isManual);\n\n        return item.value === undefined || item.value === null ? [] : [item];\n      } catch {\n        return [];\n      }\n    });\n  });\n\n  constructor() {\n    super();\n  }\n\n  typeOf(value: unknown): string {\n    return typeof value;\n  }\n\n  /**\n   * The text of a value: the name of its option, such as the name of an enum member.\n   * @param value - A value of the input.\n   */\n  labelOf(value: unknown): string {\n    return (\n      this.items().find((item: NgDocResolvedPlaygroundOption) => item.value === value)?.label ??\n      String(value ?? '')\n    );\n  }\n\n  /**\n   * Whether the reset button is shown: a value other than the default is selected.\n   * @param value - The selected value.\n   */\n  protected canReset(value: T | null): boolean {\n    return value !== undefined && value !== null && value !== this.default();\n  }\n\n  changeModel(value: T | null): void {\n    const defaultValue: T | undefined = this.default();\n\n    this.updateModel(value === null && defaultValue ? defaultValue : value);\n  }\n}\n","<ng-doc-combobox\n  [ngModel]=\"model()\"\n  [readonly]=\"true\"\n  [valueContent]=\"valueTemplate\"\n  [clearButton]=\"false\"\n  [rightContent]=\"rightContent\"\n  (ngModelChange)=\"changeModel($event)\">\n  <ng-doc-list *ngDocData>\n    @for (item of items(); track $index) {\n      <ng-doc-option [value]=\"item.value\">\n        <ng-container\n          *ngTemplateOutlet=\"valueTemplate; context: { $implicit: item.value }\"></ng-container>\n      </ng-doc-option>\n    }\n  </ng-doc-list>\n  <ng-template let-value #valueTemplate>\n    <div class=\"ng-doc-type-alias-value\">\n      <span class=\"ng-doc-type-alias-value-text\">{{ labelOf(value) }}</span>\n      @if (value === default()) {\n        <span class=\"ng-doc-type-alias-default\">default</span>\n      }\n    </div>\n  </ng-template>\n  <ng-template #rightContent>\n    @if (canReset(model())) {\n      <button\n        ng-doc-button-icon-transparent\n        size=\"large\"\n        aria-label=\"Reset to the default value\"\n        [ngDocFocusable]=\"false\"\n        [disabled]=\"disabled\"\n        [rounded]=\"false\"\n        (click)=\"updateModel(default() ?? null)\"\n        (focusout)=\"touch()\">\n        <ng-doc-icon icon=\"x\"></ng-doc-icon>\n      </button>\n    }\n  </ng-template>\n</ng-doc-combobox>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;AAiBA;;;;AAIG;AAkBG,MAAO,8BAAkC,SAAQ,SAAY,CAAA;AA+BjE,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE;;QA9BA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAgB,SAAS;oFAAC;AAElD;;;AAGG;QACM,IAAA,CAAA,OAAO,GAAG,KAAK,CAAoD,SAAS;oFAAC;;QAG7E,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAsB,SAAS;qFAAC;AAEzD;;;AAGG;AACgB,QAAA,IAAA,CAAA,KAAK,GAA4C,QAAQ,CAAC,MAAK;AAChF,YAAA,MAAM,QAAQ,GAAwB,IAAI,CAAC,QAAQ,EAAE;AAErD,YAAA,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,CAAC,MAAsC,KAAI;AAC/E,gBAAA,IAAI;oBACF,MAAM,IAAI,GAAkC,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC;oBAErF,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC;gBACtE;AAAE,gBAAA,MAAM;AACN,oBAAA,OAAO,EAAE;gBACX;AACF,YAAA,CAAC,CAAC;QACJ,CAAC;kFAAC;IAIF;AAEA,IAAA,MAAM,CAAC,KAAc,EAAA;QACnB,OAAO,OAAO,KAAK;IACrB;AAEA;;;AAGG;AACH,IAAA,OAAO,CAAC,KAAc,EAAA;QACpB,QACE,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAC,IAAmC,KAAK,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK;AACvF,YAAA,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC;IAEvB;AAEA;;;AAGG;AACO,IAAA,QAAQ,CAAC,KAAe,EAAA;AAChC,QAAA,OAAO,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,CAAC,OAAO,EAAE;IAC1E;AAEA,IAAA,WAAW,CAAC,KAAe,EAAA;AACzB,QAAA,MAAM,YAAY,GAAkB,IAAI,CAAC,OAAO,EAAE;AAElD,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,KAAK,IAAI,IAAI,YAAY,GAAG,YAAY,GAAG,KAAK,CAAC;IACzE;8GA9DW,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA9B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,8BAA8B,qfCvC3C,2wCAuCA,EAAA,MAAA,EAAA,CAAA,0eAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDXI,sBAAsB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,aAAA,EAAA,cAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACtB,WAAW,+VACX,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,oBAAoB,0DACpB,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,wBAAwB,EAAA,QAAA,EAAA,+LAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACxB,uBAAuB,uHACvB,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGT,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAjB1C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,EAAA,eAAA,EAGpB,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;wBACP,sBAAsB;wBACtB,WAAW;wBACX,kBAAkB;wBAClB,kBAAkB;wBAClB,oBAAoB;wBACpB,gBAAgB;wBAChB,wBAAwB;wBACxB,uBAAuB;wBACvB,kBAAkB;AACnB,qBAAA,EAAA,QAAA,EAAA,2wCAAA,EAAA,MAAA,EAAA,CAAA,0eAAA,CAAA,EAAA;;;AErCH;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-doc/app",
-  "version": "22.0.0",
+  "version": "22.1.0",
   "description": "The NgDoc documentation site: layout, navigation, search, demos, playgrounds and API pages.",
   "keywords": [
     "angular",
@@ -32,11 +32,12 @@
   },
   "dependencies": {
     "tslib": "^2.6.2",
-    "@ng-doc/core": "22.0.0",
-    "@ng-doc/ui-kit": "22.0.0",
+    "@ng-doc/core": "22.1.0",
+    "@ng-doc/ui-kit": "22.1.0",
     "@orama/plugin-match-highlight": "2.0.17",
     "@orama/stemmers": "2.0.17",
-    "mermaid": "10.9.8"
+    "mermaid": "10.9.8",
+    "shiki": "4.5.0"
   },
   "publishConfig": {
     "access": "public"
@@ -114,6 +115,10 @@
       "types": "./types/ng-doc-app-components-demo-displayer.d.ts",
       "default": "./fesm2022/ng-doc-app-components-demo-displayer.mjs"
     },
+    "./components/demo-frame": {
+      "types": "./types/ng-doc-app-components-demo-frame.d.ts",
+      "default": "./fesm2022/ng-doc-app-components-demo-frame.mjs"
+    },
     "./components/demo-pane": {
       "types": "./types/ng-doc-app-components-demo-pane.d.ts",
       "default": "./fesm2022/ng-doc-app-components-demo-pane.mjs"
@@ -222,6 +227,10 @@
       "types": "./types/ng-doc-app-defaults-default-skeleton.d.ts",
       "default": "./fesm2022/ng-doc-app-defaults-default-skeleton.mjs"
     },
+    "./demo-app": {
+      "types": "./types/ng-doc-app-demo-app.d.ts",
+      "default": "./fesm2022/ng-doc-app-demo-app.mjs"
+    },
     "./directives": {
       "types": "./types/ng-doc-app-directives.d.ts",
       "default": "./fesm2022/ng-doc-app-directives.mjs"
@@ -310,6 +319,10 @@
       "types": "./types/ng-doc-app-providers-search-engine.d.ts",
       "default": "./fesm2022/ng-doc-app-providers-search-engine.mjs"
     },
+    "./providers/title": {
+      "types": "./types/ng-doc-app-providers-title.d.ts",
+      "default": "./fesm2022/ng-doc-app-providers-title.mjs"
+    },
     "./providers/type-control": {
       "types": "./types/ng-doc-app-providers-type-control.d.ts",
       "default": "./fesm2022/ng-doc-app-providers-type-control.mjs"

package/styles/global.css

@@ -176,6 +176,9 @@ pre.shiki code {
 }
 pre.shiki code span {
   background-color: var(--ng-doc-code-background, inherit) !important;
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  text-decoration: var(--shiki-light-text-decoration);
 }
 
 *:not(pre) > code.ngde {

package/styles/main.css

@@ -176,6 +176,9 @@ pre.shiki code {
 }
 pre.shiki code span {
   background-color: var(--ng-doc-code-background, inherit) !important;
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  text-decoration: var(--shiki-light-text-decoration);
 }
 
 *:not(pre) > code.ngde {

package/styles/themes/dark.css

@@ -44,6 +44,11 @@
   :root[data-theme=auto] .shiki span {
     color: var(--shiki-dark) !important;
   }
+  :root[data-theme=auto] .shiki span {
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
 }
 
 :root[data-theme=dark] {
@@ -91,3 +96,8 @@
 :root[data-theme=dark] .shiki span {
   color: var(--shiki-dark) !important;
 }
+:root[data-theme=dark] .shiki span {
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}

package/types/ng-doc-app-classes-root-page.d.ts

@@ -35,6 +35,14 @@ declare abstract class NgDocRootPage {
      * The page demo assets that have code examples of the demo components
      */
     readonly demoAssets?: NgDocDemoAssets;
+    /**
+     * The path of the page's demo pages, relative to the base href, when the Vite engine built them:
+     * the demo `X` has its page at `<base href><demoRoute>/X`. Isolated demos show it in an iframe,
+     * and the demo toolbar opens it in a new tab.
+     */
+    readonly demoRoute?: string;
+    /** Whether the page's demos are isolated unless their `demo` action says otherwise (`isolatedDemos`). */
+    readonly isolatedDemos?: boolean;
 }
 
 export { NgDocRootPage };

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.d.ts

@@ -11,18 +11,36 @@ type NgDocDemoPreviewWidth = 'full' | '480' | '280';
  * shows the stage fullscreen with the browser Fullscreen API; it is hidden where the browser does
  * not support it.
  *
- * The preview widths set the width of the demo's container; they do not emulate a device, so
- * media queries inside the demo do not respond to them.
+ * 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;
     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[]>;
     /**

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

@@ -64,14 +64,19 @@ declare class NgDocPlaygroundComponent<T extends NgDocPlaygroundProperties = NgD
     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>;
+    /**
+     * Whether the demo is created again each time a value changes. It starts from the `recreate`
+     * option; the reader can change it unless the option is `'always'`.
+     */
+    readonly recreateDemo: WritableSignal<boolean>;
+    /** Whether the Recreate setting is fixed on, and hidden, by the `'always'` option. */
+    readonly recreateLocked: Signal<boolean>;
     private defaultProperties;
     private defaultContent;
     ngAfterViewInit(): void;
@@ -155,12 +160,19 @@ declare class NgDocPlaygroundPropertiesComponent<P extends NgDocPlaygroundProper
     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;
     /**
@@ -173,7 +185,12 @@ declare class NgDocPlaygroundPropertiesComponent<P extends NgDocPlaygroundProper
     private getControlForType;
     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; }; "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 +216,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();

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.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-demo-app.d.ts

@@ -0,0 +1,89 @@
+import * as i0 from '@angular/core';
+import { Provider, EnvironmentProviders, ApplicationConfig, Type } from '@angular/core';
+import { Routes } from '@angular/router';
+import { NgDocDemoProvidersImport } from '@ng-doc/core/interfaces';
+
+/**
+ * The root of the demo application, which shows one demo per page with only Angular and that
+ * demo loaded. In an iframe it reports the height of its content to the page that embeds it (a
+ * `ResizeObserver` on its border box), and it follows the theme the reader picks on the
+ * documentation site, which stores it in `localStorage`.
+ */
+declare class NgDocDemoAppComponent {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDemoAppComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoAppComponent, "ng-doc-demo-app", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * How the demo application starts.
+ * @internal
+ */
+interface ɵNgDocDemoApplicationOptions {
+    /** Change detection with zone.js, when the application's polyfills load it. */
+    readonly zone?: boolean;
+    /**
+     * Hydration of the server-rendered page: always on the server, which then writes the hydration
+     * data, and in the browser only for a page the server rendered (a page without it, such as the
+     * page of a demo that failed to prerender or the development server's, has nothing to hydrate).
+     */
+    readonly hydration?: boolean;
+    /** Providers added after the others, for example server rendering. */
+    readonly providers?: Array<Provider | EnvironmentProviders>;
+}
+/**
+ * The configuration of the demo application: change detection, the router with the demo pages
+ * (and a page for unknown demos), hydration, and the providers of `demoProviders`. The generated entries of
+ * the demo application bootstrap `NgDocDemoAppComponent` with it, in the browser and on the server.
+ * @param routes - The generated demo routes.
+ * @param demoProviders - The generated import of the `demoProviders` module, if any.
+ * @param options - How the application starts.
+ * @internal
+ */
+declare function ɵngDocDemoApplicationConfig(routes: Routes, demoProviders: NgDocDemoProvidersImport | undefined, options?: ɵNgDocDemoApplicationOptions): Promise<ApplicationConfig>;
+
+/**
+ * Shows the demo of a demo page: the component in the route's `ngDocDemo` data, with the inputs
+ * of the `inputs` query parameter (the JSON of the `inputs` option of the `demo` action).
+ *
+ * The demo application hydrates its server-rendered page, but not the demo: a demo is the user's
+ * component and need not be hydration-safe, and the server renders it without the inputs of the
+ * query, which only the browser has. So the host skips hydration, as documentation pages do for
+ * their content, and the browser renders the demo again.
+ */
+declare class NgDocDemoHostComponent {
+    private readonly route;
+    /** The demo component, or undefined on the page of a demo that does not exist. */
+    protected readonly demo: Type<unknown> | undefined;
+    /** The inputs of the demo. */
+    protected readonly inputs: Record<string, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDemoHostComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoHostComponent, "ng-doc-demo-host", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * The `source` of every message the demo application sends to the page that embeds it.
+ * @internal
+ */
+declare const ɵNG_DOC_DEMO_MESSAGE_SOURCE = "ng-doc-demo";
+/**
+ * The message an isolated demo sends to the page that shows it in an iframe whenever the height
+ * of its content changes, so that the iframe takes that height.
+ * @internal
+ */
+interface ɵNgDocDemoSizeMessage {
+    readonly source: typeof ɵNG_DOC_DEMO_MESSAGE_SOURCE;
+    readonly version: 1;
+    readonly type: 'size';
+    /** The height of the demo's content, in CSS pixels, rounded up. */
+    readonly height: number;
+}
+/**
+ * Whether a message is a size message of the demo application.
+ * @param value - The data of a `message` event.
+ * @internal
+ */
+declare function ɵisNgDocDemoSizeMessage(value: unknown): value is ɵNgDocDemoSizeMessage;
+
+export { NgDocDemoAppComponent, NgDocDemoHostComponent, ɵNG_DOC_DEMO_MESSAGE_SOURCE, ɵisNgDocDemoSizeMessage, ɵngDocDemoApplicationConfig };
+export type { ɵNgDocDemoApplicationOptions, ɵNgDocDemoSizeMessage };

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

@@ -1,6 +1,6 @@
 import { InjectionToken, ApplicationRef, ViewContainerRef, Type } from '@angular/core';
 import { Route } from '@angular/router';
-import { NgDocContentSource, NgDocContentModule, NgDocPlaygroundProperty } from '@ng-doc/core/interfaces';
+import { NgDocContentSource, NgDocContentModule, NgDocPlaygroundProperty, NgDocPlaygroundOption } from '@ng-doc/core/interfaces';
 import { NgDocTocItem } from '@ng-doc/app/interfaces';
 import { LocationStrategy } from '@angular/common';
 
@@ -166,5 +166,23 @@ declare function ɵngDocRouteUrl(locationStrategy: LocationStrategy, documentUrl
  */
 declare function ɵngDocPageUrl(locationStrategy: LocationStrategy, location: Pick<Location, 'href' | 'origin' | 'pathname'>, fragment?: string): string;
 
-export { asBoolean, createComponent, formatHtml, generateToc, isDarkOsTheme, isExternalLink, isPlaygroundProperty, withNgDocContentReady, ɵNG_DOC_ASYNC_CONTENT_ATTRIBUTE, ɵNG_DOC_CONTENT_WAIT, ɵcaptureNgDocHydrationSnapshots, ɵforgetNgDocContent, ɵngDocPageUrl, ɵngDocRouteContentSources, ɵngDocRouteUrl, ɵpeekNgDocContent, ɵpendingNgDocContent, ɵpreloadNgDocContent, ɵrestoreNgDocHydrationSnapshot, ɵwithNgDocContent };
-export type { NgDocBootstrap };
+/** An option of a playground property, resolved to the value it sets and the text it shows. */
+interface NgDocResolvedPlaygroundOption {
+    /** The text shown for the option. */
+    label: string;
+    /** The value the option sets. */
+    value: unknown;
+}
+/**
+ * Resolves an option of a playground property. A named option (an enum member) carries its
+ * value; a plain value from the playground's `controls` is the value itself; any other option is
+ * the source text of a union member, such as `'small'`, and is evaluated; it throws when that
+ * text can't be evaluated.
+ * @param option - The option.
+ * @param isManual - Whether the options come from the playground's `controls`.
+ * @returns The value of the option and the text that shows it.
+ */
+declare function resolvePlaygroundOption(option: string | NgDocPlaygroundOption, isManual?: boolean): NgDocResolvedPlaygroundOption;
+
+export { asBoolean, createComponent, formatHtml, generateToc, isDarkOsTheme, isExternalLink, isPlaygroundProperty, resolvePlaygroundOption, withNgDocContentReady, ɵNG_DOC_ASYNC_CONTENT_ATTRIBUTE, ɵNG_DOC_CONTENT_WAIT, ɵcaptureNgDocHydrationSnapshots, ɵforgetNgDocContent, ɵngDocPageUrl, ɵngDocRouteContentSources, ɵngDocRouteUrl, ɵpeekNgDocContent, ɵpendingNgDocContent, ɵpreloadNgDocContent, ɵrestoreNgDocHydrationSnapshot, ɵwithNgDocContent };
+export type { NgDocBootstrap, NgDocResolvedPlaygroundOption };

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

@@ -1,4 +1,4 @@
-import { NgDocBaseEntity, JSDocMetadata, NgDocPageIndex } from '@ng-doc/core/interfaces';
+import { NgDocBaseEntity, JSDocMetadata, NgDocPlaygroundOption, NgDocPageIndex } from '@ng-doc/core/interfaces';
 import { Type, Injector, Signal } from '@angular/core';
 import { InputType } from '@ng-doc/core';
 import { Constructor } from '@ng-doc/core/types/constructor';
@@ -174,7 +174,8 @@ type NgDocTypeControlField<T> = T | Signal<T | undefined>;
  */
 interface NgDocTypeControl<T = unknown> extends ControlValueAccessor {
     /**
-     * The name of the input for which it is created
+     * The name of the input for which it is created, or the `label` that the playground's
+     * `controls` give it
      */
     name?: NgDocTypeControlField<string>;
     /**
@@ -186,9 +187,12 @@ interface NgDocTypeControl<T = unknown> extends ControlValueAccessor {
      */
     default?: NgDocTypeControlField<T>;
     /**
-     * The list of possible values, it usually works only for Type Aliases which has several values
+     * The list of possible values, it usually works only for Type Aliases which has several values.
+     * An option is the source text of a union member (such as `'small'`), a plain value when
+     * `isManual` is set, or the name and value of an enum member (`resolvePlaygroundOption` reads
+     * all three)
      */
-    options?: NgDocTypeControlField<string[]>;
+    options?: NgDocTypeControlField<Array<string | NgDocPlaygroundOption>>;
     /**
      * Determines if the property is manually added by the user using `controls` property in playground config
      */
@@ -210,6 +214,13 @@ interface NgDocTypeControlProviderOptions {
      * NgDoc's own controls use 10 (type aliases), 20 (`string`), 30 (`number`) and 40 (`boolean`)
      */
     order?: number;
+    /**
+     * Whether the row of the control is a `<label>` that wraps the control (the default). A label
+     * forwards clicks on its content to the first form control inside it, which a control with
+     * several interactive parts, such as a list or a dialog, doesn't want. With `false`, the row is
+     * a `<div>` whose caption names the control through `aria-labelledby`.
+     */
+    labelWrapper?: boolean;
 }
 
 interface NgDocProvidedTypeControl {

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

@@ -33,6 +33,11 @@ declare const mermaidProcessor: NgDocPageProcessor<NgDocMermaidViewerComponent>;
 
 declare const playgroundProcessor: NgDocPageProcessor<NgDocPlaygroundComponent>;
 
+/**
+ * Turns the `<ng-doc-tab group="…" name="…">` elements of a page into tabs: every tab of a group
+ * becomes one `NgDocTabsComponent`, where the first tab of the group was. Code groups are made of
+ * them, and Markdown can wrap any content in them.
+ */
 declare const tabsProcessor: NgDocPageProcessor<NgDocTabsComponent>;
 
 export { blockquoteProcessor, codeProcessor, demoPaneProcessor, demoProcessor, headingAnchorProcessor, iconProcessor, imageProcessor, membersProcessor, mermaidProcessor, playgroundProcessor, tabsProcessor };

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

@@ -22,7 +22,7 @@ interface NgDocApplicationConfig {
      */
     uiKit?: NgDocUiConfig;
     /**
-     * Shiki theme.
+     * Extra Shiki themes and languages for the code that the browser highlights.
      */
     shiki?: NgDocHighlighterConfig;
     /**

package/types/ng-doc-app-providers-title.d.ts

@@ -0,0 +1,59 @@
+import { EnvironmentProviders } from '@angular/core';
+import { RouterStateSnapshot } from '@angular/router';
+
+/**
+ * The parts of the current route that `provideNgDocTitle` passes to its function.
+ *
+ * Outside the documentation (a landing page, for example), `categories` is empty and `page`,
+ * `tab` and `api` are not set.
+ */
+interface NgDocTitleContext {
+    /**
+     * The title Angular sets by default: the title of the deepest route that has one. It is not set
+     * when no route of the navigation has a title.
+     */
+    readonly title: string | undefined;
+    /** Titles of the categories that contain the page, the outermost category first. */
+    readonly categories: readonly string[];
+    /**
+     * Title of the guide or the API list. A title in the page's own route replaces it. Not set on
+     * an API page, which sets `api` instead.
+     */
+    readonly page: string | undefined;
+    /**
+     * Title of the active tab, when the page has more than one tab. Not set on a tab titled like
+     * the page, usually its first one.
+     */
+    readonly tab: string | undefined;
+    /** Name of the API declaration, on an API page. */
+    readonly api: string | undefined;
+    /** The router state the title is for. */
+    readonly snapshot: RouterStateSnapshot;
+}
+/**
+ * Builds the browser tab title from the parts of the current route. It runs in an injection
+ * context, so it can call `inject()`. When it returns `undefined`, the title stays as it is.
+ */
+type NgDocTitleFn = (context: NgDocTitleContext) => string | undefined;
+/**
+ * Builds the browser tab title of every navigation with a function that receives the categories,
+ * the page, the tab and the API declaration of the route, so titles like
+ * "Installation · Getting started | NgDoc" need no parsing of route titles.
+ *
+ * Without it, Angular sets the title of the deepest route: the page's (or its tab's) title.
+ * @param titleFn - Builds the title; `undefined` keeps the current title.
+ * @example
+ * ```ts
+ * provideNgDocTitle(({ categories, page, tab, api, title }) => {
+ *   const name = api ?? page;
+ *
+ *   return name
+ *     ? [tab, name, ...[...categories].reverse()].filter(Boolean).join(' · ') + ' | My library'
+ *     : (title ?? 'My library');
+ * });
+ * ```
+ */
+declare function provideNgDocTitle(titleFn: NgDocTitleFn): EnvironmentProviders;
+
+export { provideNgDocTitle };
+export type { NgDocTitleContext, NgDocTitleFn };

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

@@ -3,4 +3,5 @@ export * from '@ng-doc/app/providers/ng-doc-app';
 export * from '@ng-doc/app/providers/page-skeleton';
 export * from '@ng-doc/app/providers/playground-demo';
 export * from '@ng-doc/app/providers/search-engine';
+export * from '@ng-doc/app/providers/title';
 export * from '@ng-doc/app/providers/type-control';