@ng-doc/app 22.0.0 → 22.2.0

package/fesm2022/ng-doc-app-components-playground.mjs

@@ -1,30 +1,124 @@
 import * as i0 from '@angular/core';
-import { input, viewChild, ViewContainerRef, signal, inject, Injector, DestroyRef, PendingTasks, ChangeDetectionStrategy, Component, computed, effect, untracked, reflectComponentType, model, output, isDevMode, ChangeDetectorRef, Directive } from '@angular/core';
+import { InjectionToken, input, inject, ChangeDetectorRef, Directive, output, model, viewChild, computed, ViewContainerRef, signal, Injector, DestroyRef, PendingTasks, ChangeDetectionStrategy, Component, effect, untracked, reflectComponentType, isDevMode, linkedSignal, PLATFORM_ID, DOCUMENT, afterNextRender } from '@angular/core';
 import { extractFunctionDefaults } from '@ng-doc/core/helpers/extract-function-defaults';
 import { Subject, take } from 'rxjs';
+import { NgTemplateOutlet, KeyValuePipe, PlatformLocation, APP_BASE_HREF, isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule, FormBuilder } from '@angular/forms';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
+import { ɵwithDemoTheme as _withDemoTheme, ɵplaygroundStateToFragment as _playgroundStateToFragment, ɵdecodePlaygroundValue as _decodePlaygroundValue, ɵencodePlaygroundValue as _encodePlaygroundValue, ɵplaygroundStateFromFragment as _playgroundStateFromFragment, ɵNG_DOC_DEMO_MESSAGE_SOURCE as _NG_DOC_DEMO_MESSAGE_SOURCE } from '@ng-doc/app/demo-app';
+import { getTokenForType } from '@ng-doc/app/providers/type-control';
+import { NG_DOC_TEXTS } from '@ng-doc/app/tokens';
 import { isSameObject } from '@ng-doc/core/helpers/is-same-object';
 import { objectKeys } from '@ng-doc/core/helpers/object-keys';
+import { ɵplaygroundTargetSlugs as _playgroundTargetSlugs } from '@ng-doc/core/helpers/playground-target-slugs';
 import { NgDocLabelComponent, NgDocTooltipDirective, NgDocCheckboxComponent, NgDocIconComponent, NgDocBindPipe, NgDocExecutePipe, NgDocAsArrayPipe } from '@ng-doc/ui-kit';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgDocDemoDisplayerComponent } from '@ng-doc/app/components/demo-displayer';
-import { formatHtml, isPlaygroundProperty } from '@ng-doc/app/helpers';
+import { NgDocDemoFrameComponent, NgDocDemoThemeButtonComponent } from '@ng-doc/app/components/demo-frame';
+import { formatHtml, isPlaygroundProperty, resolvePlaygroundOption } from '@ng-doc/app/helpers';
 import { getPlaygroundDemoToken } from '@ng-doc/app/providers/playground-demo';
 import { buildPlaygroundDemoPipeTemplate, buildPlaygroundDemoTemplate } from '@ng-doc/core/helpers/build-playground-demo-template';
 import { stringify } from '@ng-doc/core/helpers/stringify';
 import { startWith, takeUntil } from 'rxjs/operators';
-import { KeyValuePipe } from '@angular/common';
-import { getTokenForType } from '@ng-doc/app/providers/type-control';
-import { extractValueOrThrow } from '@ng-doc/core/helpers/extract-value';
 import { isPresent } from '@ng-doc/core/helpers/is-present';
 import { NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';
 import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';
+import { ActivatedRoute } from '@angular/router';
+
+/**
+ * The playground that shows a generated playground class.
+ * @internal
+ */
+const ɵNG_DOC_PLAYGROUND_CONTAINER = new InjectionToken('NG_DOC_PLAYGROUND_CONTAINER');
+
+/**
+ * Base class of the playground classes the builder generates, one per playground and selector.
+ * A generated class renders the playground template with the target's inputs bound to
+ * `properties()`, and queries the target with `viewChild()`.
+ */
+class NgDocBasePlayground {
+    static { this.selector = 'unknown'; }
+    constructor() {
+        /** Values of the target's inputs, by property name. */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.properties = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []));
+        /** The `data` given to the playground action; it extends the configuration's `data`. */
+        this.actionData = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionData" }] : /* istanbul ignore next */ []));
+        /** Whether each content slot is shown, by slot name. */
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.content = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        /** The default values of the target's inputs, read before the template binds them. */
+        this.defaultValues = {};
+        this.reattached = new Subject();
+        this.playgroundContainer = inject(ɵNG_DOC_PLAYGROUND_CONTAINER);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        // The view is not checked until the default values of the target are read, so the
+        // template's bindings cannot overwrite them first.
+        this.changeDetectorRef.detach();
+    }
+    /** Emits once, after the view is attached again and checks the template's bindings. */
+    get onReattached() {
+        return this.reattached.pipe(take(1));
+    }
+    /** The playground `data`: the configuration's data extended by the action's data. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    get data() {
+        return Object.assign({}, this.configData, this.actionData());
+    }
+    ngOnInit() {
+        // The target is created with the view, but the view has not been checked yet, so its inputs
+        // still hold their defaults. Signal inputs are read by calling them.
+        const playground = this.playground();
+        if (playground) {
+            this.defaultValues = Object.keys(playground).reduce((values, key) => {
+                try {
+                    const value = playground[key];
+                    values[key] = typeof value === 'function' ? value.call(playground) : value;
+                }
+                catch {
+                    // Some properties are getters or functions that throw without their context.
+                }
+                return values;
+            }, {});
+        }
+        else if (this.target) {
+            // A pipe: the defaults of its `transform` parameters after the value itself.
+            const defaults = extractFunctionDefaults(this.target.prototype.transform);
+            this.defaultValues = Object.keys(this.playgroundContainer.properties() ?? {}).reduce((values, key, i) => {
+                values[key] = defaults[i + 1];
+                return values;
+            }, {});
+        }
+        else {
+            throw new Error('Playground is not defined or initialized');
+        }
+        if (!this.playgroundContainer.defaultValues()) {
+            this.playgroundContainer.defaultValues.set(this.defaultValues);
+        }
+        // The demo sets the playground's inputs right after it creates this view; the view is
+        // attached again once they are set, so its first check renders the playground's values.
+        Promise.resolve().then(() => {
+            this.changeDetectorRef.reattach();
+            this.changeDetectorRef.markForCheck();
+            this.reattached.next();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBasePlayground, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: NgDocBasePlayground, isStandalone: true, inputs: { properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBasePlayground, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], actionData: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionData", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 
 /**
  * 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.
  */
 class NgDocPlaygroundDemoComponent {
     constructor() {
@@ -52,6 +146,42 @@ class NgDocPlaygroundDemoComponent {
         /** Whether the code of the demo is shown. */
         this.expanded = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /** The iframe of an isolated playground; without it, the class is created in the page. */
+        this.frame = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
+        /** The defaults of the target's inputs that the iframe reported, for the code view. */
+        this.frameDefaults = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameDefaults" }] : /* istanbul ignore next */ []));
+        /** The messages of the iframe of an isolated playground. */
+        this.frameMessage = output();
+        /** The iframe's page loaded but did not report the target in time. */
+        this.frameSilent = output();
+        /** The theme of the iframe, which the theme button beside the demo changes. */
+        this.frameTheme = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameTheme" }] : /* istanbul ignore next */ []));
+        /** The `theme` option of the playground, which the theme button offers too. */
+        this.configuredTheme = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "configuredTheme" }] : /* istanbul ignore next */ []));
+        /** The iframe of an isolated playground, while it is shown. */
+        this.frameComponent = viewChild(NgDocDemoFrameComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameComponent" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.
+         */
+        this.canvasBackground = computed(() => this.frame() && this.frameTheme() !== undefined
+            ? this.frameComponent()?.background()
+            : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canvasBackground" }] : /* istanbul ignore next */ []));
+        /** The dots of the canvas while the iframe shows a theme of its own, in that theme's color. */
+        this.canvasDots = computed(() => this.canvasBackground() ? this.frameComponent()?.dots() : undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canvasDots" }] : /* istanbul ignore next */ []));
+        /** The iframe's page with the current state, which the toolbar opens in a new tab. */
+        this.frameUrl = computed(() => {
+            const frame = this.frame();
+            return frame ? `${frame.url}#${frame.fragment}` : undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameUrl" }] : /* istanbul ignore next */ []));
         /** Where the playground class is created. */
         this.demoOutlet = viewChild('demoOutlet', { ...(ngDevMode ? { debugName: "demoOutlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
         this.code = signal('', /* @ts-ignore */
@@ -61,7 +191,11 @@ class NgDocPlaygroundDemoComponent {
         this.pendingTasks = inject(PendingTasks);
         this.unsubscribe$ = new Subject();
     }
-    async ngOnChanges({ form, id }) {
+    async ngOnChanges({ form, id, frame }) {
+        // A playground that falls back from its iframe to the page creates its class in the page.
+        if (frame && !frame.firstChange && !this.frame()) {
+            await this.updateDemo(this.form()?.value);
+        }
         if (form || id) {
             this.unsubscribe$.next();
             const demoInjector = getPlaygroundDemoToken(this.id());
@@ -69,14 +203,25 @@ class NgDocPlaygroundDemoComponent {
                 const demos = this.injector.get(demoInjector, []);
                 this.playgroundDemo = demos.find((demo) => demo.selector === this.selector() || demo.selector === this.pipeName());
             }
-            await this.updateDemo();
             const form = this.form();
-            form?.valueChanges
+            if (!form) {
+                // No values yet: the class is created so that it reports the target's defaults.
+                await this.updateDemo();
+                return;
+            }
+            // The form's values reach the class synchronously, in this check: the class may already be
+            // attached again, and checked with no values its target would get `undefined` for every
+            // input instead of its default.
+            form.valueChanges
                 .pipe(startWith(form.value), takeUntil(this.unsubscribe$), takeUntilDestroyed(this.destroyRef))
                 .subscribe((data) => this.updateDemo(data));
         }
     }
     async updateDemo(data) {
+        if (this.frame()) {
+            await this.updateCodeView();
+            return;
+        }
         if (this.recreateDemo() || !this.demoRef) {
             this.createDemo();
         }
@@ -125,7 +270,7 @@ class NgDocPlaygroundDemoComponent {
         return objectKeys(formData).reduce((result, key) => {
             const inputName = this.properties()?.[key]?.inputName ?? key;
             const value = formData[key];
-            const property = this.demoRef?.instance?.defaultValues[key];
+            const property = this.defaultValue(key);
             if (property !== value) {
                 result[inputName] = stringify(value).replace(/"/g, `'`);
             }
@@ -138,7 +283,7 @@ class NgDocPlaygroundDemoComponent {
         return objectKeys(formData)
             .map((key, i) => {
             const value = formData[key];
-            const defaultValue = this.demoRef?.instance?.defaultValues[key];
+            const defaultValue = this.defaultValue(key);
             if (defaultValue !== value) {
                 changedInputIndex = i;
             }
@@ -154,16 +299,176 @@ class NgDocPlaygroundDemoComponent {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
+    /**
+     * The default of an input: from the class in the page, or as the iframe reported it.
+     * @param key
+     */
+    defaultValue(key) {
+        return this.frame() ? this.frameDefaults()?.[key] : this.demoRef?.instance?.defaultValues[key];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.2.1", type: NgDocPlaygroundDemoComponent, isStandalone: true, selector: "ng-doc-playground-demo", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, pipeName: { classPropertyName: "pipeName", publicName: "pipeName", isSignal: true, isRequired: false, transformFunction: null }, selector: { classPropertyName: "selector", publicName: "selector", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, recreateDemo: { classPropertyName: "recreateDemo", publicName: "recreateDemo", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "demoOutlet", first: true, predicate: ["demoOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-doc-demo-displayer\n  [code]=\"code()\"\n  [border]=\"false\"\n  [expanded]=\"expanded()\"\n  language=\"angular-html\">\n  <ng-container #demoOutlet></ng-container>\n</ng-doc-demo-displayer>\n", styles: [":host{display:flex;flex-direction:column}ng-doc-demo-displayer{flex:1 1 auto}\n"], dependencies: [{ kind: "component", type: NgDocDemoDisplayerComponent, selector: "ng-doc-demo-displayer", inputs: ["codeContent", "code", "language", "container", "border", "expanded"], outputs: ["expandedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPlaygroundDemoComponent, isStandalone: true, selector: "ng-doc-playground-demo", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, pipeName: { classPropertyName: "pipeName", publicName: "pipeName", isSignal: true, isRequired: false, transformFunction: null }, selector: { classPropertyName: "selector", publicName: "selector", isSignal: true, isRequired: false, transformFunction: null }, configuration: { classPropertyName: "configuration", publicName: "configuration", isSignal: true, isRequired: false, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, recreateDemo: { classPropertyName: "recreateDemo", publicName: "recreateDemo", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, frame: { classPropertyName: "frame", publicName: "frame", isSignal: true, isRequired: false, transformFunction: null }, frameDefaults: { classPropertyName: "frameDefaults", publicName: "frameDefaults", isSignal: true, isRequired: false, transformFunction: null }, frameTheme: { classPropertyName: "frameTheme", publicName: "frameTheme", isSignal: true, isRequired: false, transformFunction: null }, configuredTheme: { classPropertyName: "configuredTheme", publicName: "configuredTheme", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { frameMessage: "frameMessage", frameSilent: "frameSilent", frameTheme: "frameThemeChange" }, viewQueries: [{ propertyName: "frameComponent", first: true, predicate: NgDocDemoFrameComponent, descendants: true, isSignal: true }, { propertyName: "demoOutlet", first: true, predicate: ["demoOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-doc-demo-displayer\n  [code]=\"code()\"\n  [border]=\"false\"\n  [expanded]=\"expanded()\"\n  [newTabUrl]=\"frameUrl()\"\n  [canvasBackground]=\"canvasBackground()\"\n  [canvasDots]=\"canvasDots()\"\n  language=\"angular-html\">\n  @if (frame()) {\n    <ng-doc-demo-theme-button\n      ngDocDemoControl\n      [(theme)]=\"frameTheme\"\n      [configured]=\"configuredTheme()\" />\n  }\n  @if (frame(); as frame) {\n    <ng-doc-demo-frame\n      [src]=\"frame.url\"\n      [fragment]=\"frame.fragment\"\n      [playground]=\"true\"\n      [frameTitle]=\"frame.title\"\n      (playgroundMessage)=\"frameMessage.emit($event)\"\n      (playgroundSilent)=\"frameSilent.emit()\" />\n  }\n  <!-- Static, so the class can be created before the first check (in ngOnChanges). An isolated\n       playground leaves it empty. -->\n  <ng-container #demoOutlet></ng-container>\n</ng-doc-demo-displayer>\n", styles: [":host{display:flex;flex-direction:column}ng-doc-demo-displayer{flex:1 1 auto}\n"], dependencies: [{ kind: "component", type: NgDocDemoDisplayerComponent, selector: "ng-doc-demo-displayer", inputs: ["codeContent", "code", "language", "container", "canvasBackground", "canvasDots", "border", "expanded", "newTabUrl"], outputs: ["expandedChange"] }, { kind: "component", type: NgDocDemoFrameComponent, selector: "ng-doc-demo-frame", inputs: ["src", "frameTitle", "fill", "fragment", "playground"], outputs: ["playgroundMessage", "playgroundSilent"] }, { kind: "component", type: NgDocDemoThemeButtonComponent, selector: "ng-doc-demo-theme-button", inputs: ["theme", "configured"], outputs: ["themeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground-demo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocDemoDisplayerComponent], template: "<ng-doc-demo-displayer\n  [code]=\"code()\"\n  [border]=\"false\"\n  [expanded]=\"expanded()\"\n  language=\"angular-html\">\n  <ng-container #demoOutlet></ng-container>\n</ng-doc-demo-displayer>\n", styles: [":host{display:flex;flex-direction:column}ng-doc-demo-displayer{flex:1 1 auto}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], pipeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "pipeName", required: false }] }], selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], recreateDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "recreateDemo", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], demoOutlet: [{ type: i0.ViewChild, args: ['demoOutlet', { ...{
+            args: [{ selector: 'ng-doc-playground-demo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocDemoDisplayerComponent, NgDocDemoFrameComponent, NgDocDemoThemeButtonComponent], template: "<ng-doc-demo-displayer\n  [code]=\"code()\"\n  [border]=\"false\"\n  [expanded]=\"expanded()\"\n  [newTabUrl]=\"frameUrl()\"\n  [canvasBackground]=\"canvasBackground()\"\n  [canvasDots]=\"canvasDots()\"\n  language=\"angular-html\">\n  @if (frame()) {\n    <ng-doc-demo-theme-button\n      ngDocDemoControl\n      [(theme)]=\"frameTheme\"\n      [configured]=\"configuredTheme()\" />\n  }\n  @if (frame(); as frame) {\n    <ng-doc-demo-frame\n      [src]=\"frame.url\"\n      [fragment]=\"frame.fragment\"\n      [playground]=\"true\"\n      [frameTitle]=\"frame.title\"\n      (playgroundMessage)=\"frameMessage.emit($event)\"\n      (playgroundSilent)=\"frameSilent.emit()\" />\n  }\n  <!-- Static, so the class can be created before the first check (in ngOnChanges). An isolated\n       playground leaves it empty. -->\n  <ng-container #demoOutlet></ng-container>\n</ng-doc-demo-displayer>\n", styles: [":host{display:flex;flex-direction:column}ng-doc-demo-displayer{flex:1 1 auto}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], pipeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "pipeName", required: false }] }], selector: [{ type: i0.Input, args: [{ isSignal: true, alias: "selector", required: false }] }], configuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuration", required: false }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], recreateDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "recreateDemo", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }], frame: [{ type: i0.Input, args: [{ isSignal: true, alias: "frame", required: false }] }], frameDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "frameDefaults", required: false }] }], frameMessage: [{ type: i0.Output, args: ["frameMessage"] }], frameSilent: [{ type: i0.Output, args: ["frameSilent"] }], frameTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "frameTheme", required: false }] }, { type: i0.Output, args: ["frameThemeChange"] }], configuredTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "configuredTheme", required: false }] }], frameComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgDocDemoFrameComponent), { isSignal: true }] }], demoOutlet: [{ type: i0.ViewChild, args: ['demoOutlet', { ...{
                             read: ViewContainerRef,
                         }, isSignal: true }] }] } });
 
+/**
+ * Reading an input type as an array type, which the inspector uses to choose the control of an
+ * array input and the property row to leave out the type chip of one. Shared inside the playground
+ * entry point only; not public API.
+ */
+/**
+ * The type that the control of array types without a control of their own is registered for.
+ * NgDoc registers its JSON field for it, and `controls` can name it for an input.
+ * @internal
+ */
+const ARRAY_CONTROL_TYPE = 'NgDocArray';
+/**
+ * The type that the control of arrays of a union of literals (arrays whose `options` the builder
+ * lists) is registered for. NgDoc registers its multi-select for it, as it registers the select
+ * of a union for `NgDocTypeAlias`, and `controls` can name it for an input.
+ * @internal
+ */
+const UNION_ARRAY_CONTROL_TYPE = 'NgDocTypeAlias[]';
+/** The item types whose arrays get the control registered for `<item>[]`, a chip field by default. */
+const LIST_ITEM_TYPES = new Set(['string', 'number']);
+/** Keywords that make a type ending in `[]` another type than an array, as in `keyof Item[]`. */
+const TYPE_OPERATOR = /^(?:keyof|typeof|unique|infer|asserts|new)\s/;
+/**
+ * Reads an input type as an array type: `T[]` (as both engines print an array), `Array<T>`,
+ * `readonly T[]`, `ReadonlyArray<T>` or a tuple such as `[string, number]`, alone or in a union
+ * with `undefined` or `null` (an optional or nullable input). An array of strings or numbers gets
+ * the control of `string[]` or `number[]`, so a control registered for that type replaces the
+ * built-in list for every spelling; any other array gets the control of `NgDocArray`, the JSON
+ * field. A type alias of an array (`type Tags = string[]`) is printed by its name and is not
+ * recognized: register a control for the name.
+ * @param type - The input type as the builder printed it.
+ * @returns What the array type is, or `undefined` when the type is not one.
+ * @internal
+ */
+function arrayType(type) {
+    const members = splitTopLevel(type);
+    const rest = members.filter((member) => member !== 'undefined' && member !== 'null');
+    if (rest.length !== 1) {
+        return undefined;
+    }
+    const written = unwrapParentheses(rest[0]).replace(/^readonly\s+/, '');
+    const item = arrayItem(written);
+    if (item !== undefined) {
+        return LIST_ITEM_TYPES.has(item) ? { list: `${item}[]` } : {};
+    }
+    return written.startsWith('[') && written.endsWith(']') && isBalanced(written.slice(1, -1))
+        ? {}
+        : undefined;
+}
+/**
+ * The item type of `T[]`, `Array<T>` or `ReadonlyArray<T>`.
+ * @param type - A type that is not a union.
+ */
+function arrayItem(type) {
+    const generic = /^(?:Readonly)?Array<([\s\S]*)>$/.exec(type);
+    if (generic) {
+        return isBalanced(generic[1]) ? unwrapParentheses(generic[1].trim()) : undefined;
+    }
+    if (!type.endsWith('[]') || TYPE_OPERATOR.test(type)) {
+        return undefined;
+    }
+    const item = type.slice(0, -2).trim();
+    // `() => string[]` is a function, and `A extends B ? C[] : D[]` a conditional type.
+    const text = item ? topLevelText(item) : undefined;
+    return text !== undefined && !/=>|\?/.test(text) ? unwrapParentheses(item) : undefined;
+}
+/**
+ * Splits a type at the `|` of its top-level union, outside brackets and string literals.
+ * @param type - The type.
+ */
+function splitTopLevel(type) {
+    const text = topLevelText(type);
+    if (text === undefined) {
+        return [type.trim()];
+    }
+    const members = [];
+    let start = 0;
+    for (let index = 0; index < text.length; index++) {
+        if (text[index] === '|') {
+            members.push(type.slice(start, index).trim());
+            start = index + 1;
+        }
+    }
+    return [...members, type.slice(start).trim()];
+}
+/**
+ * Removes the parentheses around a whole type, such as those of `(string | number)`.
+ * @param type - The type.
+ */
+function unwrapParentheses(type) {
+    let result = type.trim();
+    while (result.startsWith('(') && result.endsWith(')') && isBalanced(result.slice(1, -1))) {
+        result = result.slice(1, -1).trim();
+    }
+    return result;
+}
+/**
+ * Whether every bracket and string literal of a type is closed in it.
+ * @param type - The type.
+ */
+function isBalanced(type) {
+    return topLevelText(type) !== undefined;
+}
+/**
+ * The type with every character inside brackets or a string literal replaced by a space, so that
+ * the operators of the type itself can be found by position; `undefined` when a bracket or a string
+ * is not closed. The `>` of an arrow (`=>`) closes no bracket.
+ * @param type - The type.
+ */
+function topLevelText(type) {
+    let depth = 0;
+    let quote;
+    let text = '';
+    for (let index = 0; index < type.length; index++) {
+        const char = type[index];
+        if (quote) {
+            if (char === '\\') {
+                index++;
+                text += '  ';
+                continue;
+            }
+            if (char === quote) {
+                quote = undefined;
+            }
+            text += ' ';
+            continue;
+        }
+        if (char === "'" || char === '"' || char === '`') {
+            quote = char;
+            text += ' ';
+        }
+        else if ('([{<'.includes(char)) {
+            depth++;
+            text += ' ';
+        }
+        else if (char === '>' && type[index - 1] === '=') {
+            text += depth ? ' ' : char;
+        }
+        else if (')]}>'.includes(char)) {
+            depth--;
+            text += ' ';
+            if (depth < 0) {
+                return undefined;
+            }
+        }
+        else {
+            text += depth ? ' ' : char;
+        }
+    }
+    return depth === 0 && !quote ? text : undefined;
+}
+
+let nextId = 0;
 /** Value types that have a chip colour. */
 const CHIP_TYPES = new Set([
     'string',
@@ -209,25 +514,35 @@ class NgDocPlaygroundPropertyComponent {
         /** The value type shown as a chip under the name, or an empty string. */
         this.typeChip = computed(() => valueType(this.property()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "typeChip" }] : /* istanbul ignore next */ []));
-        this.propertyOutlet = viewChild.required('propertyOutlet', { ...(ngDevMode ? { debugName: "propertyOutlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        /** Whether the row is a `<label>` around the control, unless its provider opts out. */
+        this.labelWrapper = computed(() => this.option()?.labelWrapper !== false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelWrapper" }] : /* istanbul ignore next */ []));
+        /** ID of the caption that names the control of a row without the `<label>`. */
+        this.captionId = `ng-doc-playground-property-caption-${nextId++}`;
+        // The outlet is in the `<label>` or in the `<div>` of the row, so the query follows the branch.
+        this.propertyOutlet = viewChild('propertyOutlet', { ...(ngDevMode ? { debugName: "propertyOutlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
         // A plain effect, not an after-render hook: it runs during change detection on the server
-        // too, so server-rendered and prerendered pages include the controls. The outlet is a static
-        // node of this view, so it exists by then. It runs again only when an input it reads changes.
+        // too, so server-rendered and prerendered pages include the controls. The outlet is inside
+        // the row's `@if` branch, so the query reports it once the branch renders, and the effect
+        // runs again then. It also runs again when an input it reads changes.
         effect(() => {
+            const outlet = this.propertyOutlet();
             const property = this.property();
             const typeControl = this.typeControl();
             const control = this.control();
             const defaultValue = this.defaultValue();
-            untracked(() => this.createControl(property, typeControl, control, defaultValue));
+            if (outlet) {
+                untracked(() => this.createControl(outlet, property, typeControl, control, defaultValue));
+            }
         });
         inject(DestroyRef).onDestroy(() => this.propertyTypeControl?.destroy());
     }
-    createControl(property, typeControl, formControl, defaultValue) {
+    createControl(outlet, property, typeControl, formControl, defaultValue) {
         if (!property || !typeControl) {
             return;
         }
         this.propertyTypeControl?.destroy();
-        const control = this.propertyOutlet().createComponent(typeControl.control);
+        const control = outlet.createComponent(typeControl.control);
         this.propertyTypeControl = control;
         setTypeControlField(control, 'name', this.name());
         setTypeControlField(control, 'description', this.tooltipContent());
@@ -243,7 +558,7 @@ class NgDocPlaygroundPropertyComponent {
         this.hasPropertyControl.set(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPlaygroundPropertyComponent, isStandalone: true, selector: "ng-doc-playground-property", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null }, typeControl: { classPropertyName: "typeControl", publicName: "typeControl", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-has-property-control": "hasPropertyControl()" } }, viewQueries: [{ propertyName: "propertyOutlet", first: true, predicate: ["propertyOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<label\n  class=\"ng-doc-playground-property-label\"\n  [class.with-label]=\"!option()?.hideLabel\"\n  [ng-doc-label]=\"option()?.hideLabel ? '' : labelContent\">\n  <ng-template #labelContent>\n    <span\n      class=\"ng-doc-playground-property-name\"\n      [ngDocTooltip]=\"tooltipTemplate\"\n      [canOpen]=\"!!tooltipContent()\"\n      [positions]=\"['left-center', 'top-right', 'bottom-right']\"\n      >{{ name() }}</span\n    >\n    @if (typeChip(); as type) {\n      <ng-doc-kind-icon [kind]=\"type\" type=\"type\"></ng-doc-kind-icon>\n    }\n    <ng-template #tooltipTemplate>\n      <div [innerHTML]=\"tooltipContent() | ngDocSanitizeHtml\"></div>\n    </ng-template>\n  </ng-template>\n  <ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}.ng-doc-playground-property-label.with-label{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:var(--ng-doc-space-3)}.ng-doc-playground-property-label.with-label ::ng-deep>.ng-doc-label{display:grid;justify-items:start;gap:var(--ng-doc-space-1);min-width:0;margin:0}.ng-doc-playground-property-label.with-label ::ng-deep>.ng-doc-content{width:100%;min-width:0}.ng-doc-playground-property-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:var(--ng-doc-code-font);font-size:13px;line-height:18px;font-weight:500;color:var(--ng-doc-heading-color)}\n"], dependencies: [{ kind: "component", type: NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocKindIconComponent, selector: "ng-doc-kind-icon", inputs: ["kind", "type", "size"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPlaygroundPropertyComponent, isStandalone: true, selector: "ng-doc-playground-property", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, property: { classPropertyName: "property", publicName: "property", isSignal: true, isRequired: false, transformFunction: null }, typeControl: { classPropertyName: "typeControl", publicName: "typeControl", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-has-property-control": "hasPropertyControl()" } }, viewQueries: [{ propertyName: "propertyOutlet", first: true, predicate: ["propertyOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (labelWrapper()) {\n  <label\n    class=\"ng-doc-playground-property-label\"\n    [class.with-label]=\"!option()?.hideLabel\"\n    [ng-doc-label]=\"option()?.hideLabel ? '' : labelContent\">\n    <ng-container #propertyOutlet></ng-container>\n  </label>\n} @else {\n  <!-- A control with several interactive parts: a label would forward clicks on them to the first\n       of them, so the caption names the control through aria-labelledby instead. -->\n  <div\n    class=\"ng-doc-playground-property-label ng-doc-playground-property-group\"\n    role=\"group\"\n    [class.with-label]=\"!option()?.hideLabel\"\n    [attr.aria-labelledby]=\"option()?.hideLabel ? null : captionId\">\n    @if (!option()?.hideLabel) {\n      <span class=\"ng-doc-label\" [id]=\"captionId\">\n        <ng-container [ngTemplateOutlet]=\"labelContent\"></ng-container>\n      </span>\n    }\n    <span class=\"ng-doc-content\">\n      <ng-container #propertyOutlet></ng-container>\n    </span>\n  </div>\n}\n<ng-template #labelContent>\n  <span\n    class=\"ng-doc-playground-property-name\"\n    [ngDocTooltip]=\"tooltipTemplate\"\n    [canOpen]=\"!!tooltipContent()\"\n    [positions]=\"['left-center', 'top-right', 'bottom-right']\"\n    >{{ name() }}</span\n  >\n  @if (typeChip(); as type) {\n    <ng-doc-kind-icon [kind]=\"type\" type=\"type\"></ng-doc-kind-icon>\n  }\n  <ng-template #tooltipTemplate>\n    <div [innerHTML]=\"tooltipContent() | ngDocSanitizeHtml\"></div>\n  </ng-template>\n</ng-template>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}.ng-doc-playground-property-group{display:flex;flex-direction:column;align-items:flex-start}.ng-doc-playground-property-group>.ng-doc-content{display:flex;flex-direction:column;align-items:flex-start;width:100%}.ng-doc-playground-property-label.with-label{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:var(--ng-doc-space-3)}.ng-doc-playground-property-label.with-label ::ng-deep>.ng-doc-label{display:grid;justify-items:start;gap:var(--ng-doc-space-1);min-width:0;margin:0}.ng-doc-playground-property-label.with-label ::ng-deep>.ng-doc-content{width:100%;min-width:0}.ng-doc-playground-property-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:var(--ng-doc-code-font);font-size:13px;line-height:18px;font-weight:500;color:var(--ng-doc-heading-color)}\n"], dependencies: [{ kind: "component", type: NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocKindIconComponent, selector: "ng-doc-kind-icon", inputs: ["kind", "type", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundPropertyComponent, decorators: [{
             type: Component,
@@ -252,15 +567,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                         NgDocTooltipDirective,
                         NgDocSanitizeHtmlPipe,
                         NgDocKindIconComponent,
+                        NgTemplateOutlet,
                     ], host: {
                         '[attr.data-has-property-control]': 'hasPropertyControl()',
-                    }, template: "<label\n  class=\"ng-doc-playground-property-label\"\n  [class.with-label]=\"!option()?.hideLabel\"\n  [ng-doc-label]=\"option()?.hideLabel ? '' : labelContent\">\n  <ng-template #labelContent>\n    <span\n      class=\"ng-doc-playground-property-name\"\n      [ngDocTooltip]=\"tooltipTemplate\"\n      [canOpen]=\"!!tooltipContent()\"\n      [positions]=\"['left-center', 'top-right', 'bottom-right']\"\n      >{{ name() }}</span\n    >\n    @if (typeChip(); as type) {\n      <ng-doc-kind-icon [kind]=\"type\" type=\"type\"></ng-doc-kind-icon>\n    }\n    <ng-template #tooltipTemplate>\n      <div [innerHTML]=\"tooltipContent() | ngDocSanitizeHtml\"></div>\n    </ng-template>\n  </ng-template>\n  <ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}.ng-doc-playground-property-label.with-label{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:var(--ng-doc-space-3)}.ng-doc-playground-property-label.with-label ::ng-deep>.ng-doc-label{display:grid;justify-items:start;gap:var(--ng-doc-space-1);min-width:0;margin:0}.ng-doc-playground-property-label.with-label ::ng-deep>.ng-doc-content{width:100%;min-width:0}.ng-doc-playground-property-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:var(--ng-doc-code-font);font-size:13px;line-height:18px;font-weight:500;color:var(--ng-doc-heading-color)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: false }] }], typeControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeControl", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], propertyOutlet: [{ type: i0.ViewChild, args: ['propertyOutlet', { ...{
-                            read: ViewContainerRef,
-                        }, isSignal: true }] }] } });
+                    }, template: "@if (labelWrapper()) {\n  <label\n    class=\"ng-doc-playground-property-label\"\n    [class.with-label]=\"!option()?.hideLabel\"\n    [ng-doc-label]=\"option()?.hideLabel ? '' : labelContent\">\n    <ng-container #propertyOutlet></ng-container>\n  </label>\n} @else {\n  <!-- A control with several interactive parts: a label would forward clicks on them to the first\n       of them, so the caption names the control through aria-labelledby instead. -->\n  <div\n    class=\"ng-doc-playground-property-label ng-doc-playground-property-group\"\n    role=\"group\"\n    [class.with-label]=\"!option()?.hideLabel\"\n    [attr.aria-labelledby]=\"option()?.hideLabel ? null : captionId\">\n    @if (!option()?.hideLabel) {\n      <span class=\"ng-doc-label\" [id]=\"captionId\">\n        <ng-container [ngTemplateOutlet]=\"labelContent\"></ng-container>\n      </span>\n    }\n    <span class=\"ng-doc-content\">\n      <ng-container #propertyOutlet></ng-container>\n    </span>\n  </div>\n}\n<ng-template #labelContent>\n  <span\n    class=\"ng-doc-playground-property-name\"\n    [ngDocTooltip]=\"tooltipTemplate\"\n    [canOpen]=\"!!tooltipContent()\"\n    [positions]=\"['left-center', 'top-right', 'bottom-right']\"\n    >{{ name() }}</span\n  >\n  @if (typeChip(); as type) {\n    <ng-doc-kind-icon [kind]=\"type\" type=\"type\"></ng-doc-kind-icon>\n  }\n  <ng-template #tooltipTemplate>\n    <div [innerHTML]=\"tooltipContent() | ngDocSanitizeHtml\"></div>\n  </ng-template>\n</ng-template>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}.ng-doc-playground-property-group{display:flex;flex-direction:column;align-items:flex-start}.ng-doc-playground-property-group>.ng-doc-content{display:flex;flex-direction:column;align-items:flex-start;width:100%}.ng-doc-playground-property-label.with-label{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:var(--ng-doc-space-3)}.ng-doc-playground-property-label.with-label ::ng-deep>.ng-doc-label{display:grid;justify-items:start;gap:var(--ng-doc-space-1);min-width:0;margin:0}.ng-doc-playground-property-label.with-label ::ng-deep>.ng-doc-content{width:100%;min-width:0}.ng-doc-playground-property-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:var(--ng-doc-code-font);font-size:13px;line-height:18px;font-weight:500;color:var(--ng-doc-heading-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], property: [{ type: i0.Input, args: [{ isSignal: true, alias: "property", required: false }] }], typeControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeControl", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], propertyOutlet: [{ type: i0.ViewChild, args: ['propertyOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 /**
  * The value type of an input: its declared type when it is a primitive, else the type of the first
- * value of its type alias. Content slots are booleans.
+ * value of its type alias; none for an array. Content slots are booleans.
  * @param property - The input or the content slot.
  */
 function valueType(property) {
@@ -273,10 +587,15 @@ function valueType(property) {
     if (CHIP_TYPES.has(property.type)) {
         return property.type;
     }
+    // The options of an array are the values of its items, or the members of an optional array's
+    // union (`undefined` first): neither is the type of the input.
+    if (arrayType(property.type)) {
+        return '';
+    }
     const option = property.options?.[0];
     if (option !== undefined) {
         try {
-            const type = typeof (property.isManual ? option : extractValueOrThrow(option));
+            const type = typeof resolvePlaygroundOption(option, property.isManual).value;
             return CHIP_TYPES.has(type) ? type : '';
         }
         catch {
@@ -313,6 +632,7 @@ const INPUT_ORDER = new Intl.Collator('en');
  */
 class NgDocPlaygroundPropertiesComponent {
     constructor() {
+        this.texts = inject(NG_DOC_TEXTS).playground;
         this.injector = inject(Injector);
         /** The form of the playground. */
         this.form = input.required(/* @ts-ignore */
@@ -329,6 +649,12 @@ class NgDocPlaygroundPropertiesComponent {
         /** Default values of the inputs; the inspector renders once they are known. */
         this.defaultValues = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.
+         */
+        this.waitingForDefaults = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "waitingForDefaults" }] : /* istanbul ignore next */ []));
         /** Whether the inspector is hidden, leaving the demos only. */
         this.hideSidePanel = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hideSidePanel" }] : /* istanbul ignore next */ []));
@@ -338,6 +664,9 @@ class NgDocPlaygroundPropertiesComponent {
         /** Whether the demo is recreated each time an input changes. */
         this.recreateDemo = model(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "recreateDemo" }] : /* istanbul ignore next */ []));
+        /** Whether the Recreate setting is fixed by the playground's options and hidden. */
+        this.recreateLocked = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recreateLocked" }] : /* istanbul ignore next */ []));
         /** Whether the Reset button is shown. */
         this.showResetButton = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showResetButton" }] : /* istanbul ignore next */ []));
@@ -358,22 +687,27 @@ class NgDocPlaygroundPropertiesComponent {
                 return typeControl ? { propertyName: String(key), property, typeControl } : null;
             })
                 .filter(isPresent)
-                .sort((a, b) => {
-                const aOrder = a.typeControl.options?.order;
-                const bOrder = b.typeControl.options?.order;
-                if (isPresent(aOrder) && isPresent(bOrder)) {
-                    return aOrder - bOrder;
-                }
-                if (isPresent(aOrder)) {
-                    return -1;
-                }
-                if (isPresent(bOrder)) {
-                    return 1;
-                }
-                return INPUT_ORDER.compare(a.property.inputName, b.property.inputName);
-            });
+                .sort((a, b) => compareOrder(a.property.order, b.property.order) ?? compareByTypeControl(a, b));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "propertyControls" }] : /* istanbul ignore next */ []));
+        /**
+         * The controls in sections: the inputs without a group first, then a section per group, in the
+         * order of the group's first input.
+         */
+        this.propertySections = computed(() => {
+            const sections = new Map([
+                [undefined, []],
+            ]);
+            for (const control of this.propertyControls()) {
+                const group = control.property.group || undefined;
+                sections.set(group, [...(sections.get(group) ?? []), control]);
+            }
+            return Array.from(sections, ([group, controls]) => ({
+                title: group ?? this.texts.settings,
+                controls,
+            })).filter((section) => section.controls.length > 0);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "propertySections" }] : /* istanbul ignore next */ []));
         /** The control of content slots. */
         this.contentTypeControl = this.getControlForType('boolean');
     }
@@ -388,9 +722,19 @@ class NgDocPlaygroundPropertiesComponent {
     getTypeControl(property) {
         const type = property.type;
         const primitive = optionalPrimitive(type);
+        const array = arrayType(type);
+        const options = isPlaygroundProperty(property)
+            ? property.options
+            : undefined;
+        // The options of an array are the values of its items, when they are a union of literals.
         const typeControl = this.getControlForType(type) ??
             (primitive ? this.getControlForType(primitive) : undefined) ??
-            this.getControlForTypeAlias(isPlaygroundProperty(property) ? property.options : undefined, property.isManual);
+            (array?.list ? this.getControlForType(array.list) : undefined) ??
+            (array
+                ? this.getControlForTypeAlias(options, property.isManual, UNION_ARRAY_CONTROL_TYPE)
+                : undefined) ??
+            (array ? this.getControlForType(ARRAY_CONTROL_TYPE) : undefined) ??
+            this.getControlForTypeAlias(options, property.isManual, 'NgDocTypeAlias');
         if (!typeControl && isDevMode()) {
             console.warn(`NgDocPlayground didn't find the control for the @Input "${property.inputName}", the type "${type}" was not recognized'`);
         }
@@ -400,27 +744,38 @@ class NgDocPlaygroundPropertiesComponent {
         const token = getTokenForType(type);
         return token ? this.injector.get(token) : undefined;
     }
-    getControlForTypeAlias(options, isManual) {
-        if (options && options.length) {
-            let optionsIsValid = true;
-            if (!isManual) {
-                try {
-                    // checking that all values are extractable
-                    options.forEach((item) => extractValueOrThrow(item));
-                }
-                catch {
-                    optionsIsValid = false;
-                }
-            }
-            if (optionsIsValid) {
-                const token = getTokenForType('NgDocTypeAlias');
-                return token ? this.injector.get(token) : undefined;
-            }
+    /**
+     * 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.
+     */
+    getControlForTypeAlias(options, isManual, controlType) {
+        if (!options?.length) {
+            return undefined;
         }
-        return undefined;
+        const values = [];
+        try {
+            // checking that all values are extractable
+            options.forEach((item) => values.push(resolvePlaygroundOption(item, isManual).value));
+        }
+        catch {
+            return undefined;
+        }
+        // The items of an array are values: an option that evaluates to an object, such as the text
+        // of a tuple type, means the options are not those of the items.
+        if (controlType === UNION_ARRAY_CONTROL_TYPE &&
+            !(values.every((value) => value === null || ITEM_TYPES.has(typeof value)) &&
+                values.some((value) => value !== null && value !== undefined))) {
+            return undefined;
+        }
+        return this.getControlForType(controlType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPlaygroundPropertiesComponent, isStandalone: true, selector: "ng-doc-playground-properties", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, ignoreInputs: { classPropertyName: "ignoreInputs", publicName: "ignoreInputs", isSignal: true, isRequired: false, transformFunction: null }, dynamicContent: { classPropertyName: "dynamicContent", publicName: "dynamicContent", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, hideSidePanel: { classPropertyName: "hideSidePanel", publicName: "hideSidePanel", isSignal: true, isRequired: false, transformFunction: null }, inspectorPosition: { classPropertyName: "inspectorPosition", publicName: "inspectorPosition", isSignal: true, isRequired: false, transformFunction: null }, recreateDemo: { classPropertyName: "recreateDemo", publicName: "recreateDemo", isSignal: true, isRequired: false, transformFunction: null }, showResetButton: { classPropertyName: "showResetButton", publicName: "showResetButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recreateDemo: "recreateDemoChange", resetForm: "resetForm" }, ngImport: i0, template: "@if (defaultValues(); as defaultValues) {\n  <div\n    class=\"ng-doc-playground-properties-wrapper\"\n    [class.no-side-panel]=\"hideSidePanel()\"\n    [class.inspector-bottom]=\"inspectorPosition() === 'bottom'\">\n    <div class=\"ng-doc-playground-demos\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideSidePanel()) {\n      <div class=\"ng-doc-playground-properties\">\n        <div class=\"ng-doc-playground-header\">\n          <h4>Playground</h4>\n          @if (showResetButton()) {\n            <button type=\"button\" class=\"ng-doc-playground-reset\" (click)=\"resetForm.emit()\">\n              Reset\n            </button>\n          }\n        </div>\n        <div class=\"ng-doc-playground-setting\">\n          <ng-doc-checkbox [ngModel]=\"recreateDemo()\" (ngModelChange)=\"recreateDemo.set($event)\">\n            Recreate\n          </ng-doc-checkbox>\n          <ng-doc-icon\n            class=\"ng-doc-playground-info\"\n            icon=\"info\"\n            role=\"img\"\n            aria-label=\"Recreates the demo every time one of the inputs changes\"\n            [ngDocTooltip]=\"'Recreates the demo every time one of the inputs changes'\"\n            [positions]=\"['bottom-right', 'left-center']\"></ng-doc-icon>\n        </div>\n        <div class=\"ng-doc-playground-divider\"></div>\n        @if (propertyControls().length) {\n          <h5 class=\"ng-doc-title\">Settings</h5>\n          <div class=\"ng-doc-playground-property-list\">\n            @for (propertyControl of propertyControls(); track propertyControl.propertyName) {\n              <ng-doc-playground-property\n                [name]=\"propertyControl.property.inputName\"\n                [property]=\"propertyControl.property\"\n                [typeControl]=\"propertyControl.typeControl\"\n                [defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n                [control]=\"\n                  getFormControl | bind: this | execute: 'properties' : propertyControl.propertyName\n                \">\n              </ng-doc-playground-property>\n            }\n          </div>\n        }\n        @if ((dynamicContent() | keyvalue)?.length) {\n          <h5 class=\"ng-doc-title\">Content</h5>\n          <div class=\"ng-doc-playground-property-list\">\n            @for (content of dynamicContent() | keyvalue; track content.key) {\n              <ng-doc-playground-property\n                [name]=\"content.value.label\"\n                [property]=\"content.value\"\n                [typeControl]=\"contentTypeControl\"\n                [control]=\"getFormControl | bind: this | execute: 'content' : content.key\">\n              </ng-doc-playground-property>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;container:ng-doc-playground/inline-size}.ng-doc-playground-properties-wrapper{display:grid;grid-template-columns:minmax(0,1fr) var(--ng-doc-playground-inspector-width);align-items:stretch;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:clip;background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-playground-properties-wrapper.no-side-panel{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper:not(.no-side-panel):not(.inspector-bottom) .ng-doc-playground-demos{position:sticky;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter));align-self:start;z-index:4}.ng-doc-playground-demos{display:flex;flex-direction:column;min-width:0}.ng-doc-playground-properties-wrapper:not(.no-side-panel):not(.inspector-bottom) .ng-doc-playground-demos{min-height:min(100%,100dvh - var(--ng-doc-page-sticky-offset) - 2 * var(--ng-doc-base-gutter))}.ng-doc-playground-properties{min-width:0;background:var(--ng-doc-base-1);border-left:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px;color:var(--ng-doc-text);--ng-doc-input-height: 36px;--ng-doc-input-border: var(--ng-doc-playground-input-border);--ng-doc-checkbox-border: var(--ng-doc-playground-input-border)}.ng-doc-playground-header{display:flex;align-items:center;gap:var(--ng-doc-space-2);height:52px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4)}.ng-doc-playground-header h4{margin:0;font-family:var(--ng-doc-heading-font-family);font-size:15px;line-height:22px;font-weight:600;letter-spacing:0;color:var(--ng-doc-heading-color)}.ng-doc-playground-reset{display:inline-flex;align-items:center;height:28px;margin-left:auto;padding:0 10px;border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);font:inherit;font-size:12px;font-weight:500;color:var(--ng-doc-heading-color);cursor:pointer}.ng-doc-playground-reset:hover{border-color:var(--ng-doc-border-hover-color)}.ng-doc-playground-reset:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-playground-setting{display:flex;align-items:center;gap:6px;padding:0 var(--ng-doc-space-4) var(--ng-doc-space-3)}.ng-doc-playground-info{--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-playground-divider{height:1px;background:var(--ng-doc-border-color)}h5.ng-doc-title{margin:0;padding:var(--ng-doc-space-3) var(--ng-doc-space-4) var(--ng-doc-space-1);font-family:var(--ng-doc-font-family);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ng-doc-text-muted)}ng-doc-playground-property{padding:var(--ng-doc-space-2) var(--ng-doc-space-4)}ng-doc-playground-property+ng-doc-playground-property{border-top:1px solid var(--ng-doc-base-2)}.ng-doc-playground-property-list:last-child{padding-bottom:var(--ng-doc-space-2)}.ng-doc-playground-properties-wrapper.inspector-bottom{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper.inspector-bottom .ng-doc-playground-properties{border-left:0;border-top:1px solid var(--ng-doc-border-color)}.ng-doc-playground-properties-wrapper.inspector-bottom .ng-doc-playground-property-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));column-gap:var(--ng-doc-space-4)}.ng-doc-playground-properties-wrapper.inspector-bottom ng-doc-playground-property+ng-doc-playground-property{border-top:0}@container ng-doc-playground (max-width: 640px){.ng-doc-playground-properties-wrapper{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper:not(.no-side-panel) .ng-doc-playground-demos{position:static}.ng-doc-playground-properties{border-left:0;border-top:1px solid var(--ng-doc-border-color)}}\n"], dependencies: [{ kind: "component", type: NgDocCheckboxComponent, selector: "ng-doc-checkbox", inputs: ["color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control", "defaultValue"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPlaygroundPropertiesComponent, isStandalone: true, selector: "ng-doc-playground-properties", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, ignoreInputs: { classPropertyName: "ignoreInputs", publicName: "ignoreInputs", isSignal: true, isRequired: false, transformFunction: null }, dynamicContent: { classPropertyName: "dynamicContent", publicName: "dynamicContent", isSignal: true, isRequired: false, transformFunction: null }, defaultValues: { classPropertyName: "defaultValues", publicName: "defaultValues", isSignal: true, isRequired: false, transformFunction: null }, waitingForDefaults: { classPropertyName: "waitingForDefaults", publicName: "waitingForDefaults", isSignal: true, isRequired: false, transformFunction: null }, hideSidePanel: { classPropertyName: "hideSidePanel", publicName: "hideSidePanel", isSignal: true, isRequired: false, transformFunction: null }, inspectorPosition: { classPropertyName: "inspectorPosition", publicName: "inspectorPosition", isSignal: true, isRequired: false, transformFunction: null }, recreateDemo: { classPropertyName: "recreateDemo", publicName: "recreateDemo", isSignal: true, isRequired: false, transformFunction: null }, recreateLocked: { classPropertyName: "recreateLocked", publicName: "recreateLocked", isSignal: true, isRequired: false, transformFunction: null }, showResetButton: { classPropertyName: "showResetButton", publicName: "showResetButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recreateDemo: "recreateDemoChange", resetForm: "resetForm" }, ngImport: i0, template: "@if (defaultValues() || waitingForDefaults()) {\n  <div\n    class=\"ng-doc-playground-properties-wrapper\"\n    [class.no-side-panel]=\"hideSidePanel()\"\n    [class.inspector-bottom]=\"inspectorPosition() === 'bottom'\">\n    <div class=\"ng-doc-playground-demos\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideSidePanel() && defaultValues(); as defaultValues) {\n      <div class=\"ng-doc-playground-properties\">\n        <div class=\"ng-doc-playground-header\">\n          <h4>{{ texts.title }}</h4>\n          @if (showResetButton()) {\n            <button type=\"button\" class=\"ng-doc-playground-reset\" (click)=\"resetForm.emit()\">\n              {{ texts.reset }}\n            </button>\n          }\n        </div>\n        @if (!recreateLocked()) {\n          <div class=\"ng-doc-playground-setting\">\n            <ng-doc-checkbox [ngModel]=\"recreateDemo()\" (ngModelChange)=\"recreateDemo.set($event)\">\n              {{ texts.recreate }}\n            </ng-doc-checkbox>\n            <ng-doc-icon\n              class=\"ng-doc-playground-info\"\n              icon=\"info\"\n              role=\"img\"\n              [attr.aria-label]=\"texts.recreateHint\"\n              [ngDocTooltip]=\"texts.recreateHint\"\n              [positions]=\"['bottom-right', 'left-center']\"></ng-doc-icon>\n          </div>\n        }\n        <div class=\"ng-doc-playground-divider\"></div>\n        @for (section of propertySections(); track $index) {\n          <h5 class=\"ng-doc-title\">{{ section.title }}</h5>\n          <div class=\"ng-doc-playground-property-list\">\n            @for (propertyControl of section.controls; track propertyControl.propertyName) {\n              <ng-doc-playground-property\n                [name]=\"propertyControl.property.label ?? propertyControl.property.inputName\"\n                [property]=\"propertyControl.property\"\n                [typeControl]=\"propertyControl.typeControl\"\n                [defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n                [control]=\"\n                  getFormControl | bind: this | execute: 'properties' : propertyControl.propertyName\n                \">\n              </ng-doc-playground-property>\n            }\n          </div>\n        }\n        @if ((dynamicContent() | keyvalue)?.length) {\n          <h5 class=\"ng-doc-title\">{{ texts.content }}</h5>\n          <div class=\"ng-doc-playground-property-list\">\n            @for (content of dynamicContent() | keyvalue; track content.key) {\n              <ng-doc-playground-property\n                [name]=\"content.value.label\"\n                [property]=\"content.value\"\n                [typeControl]=\"contentTypeControl\"\n                [control]=\"getFormControl | bind: this | execute: 'content' : content.key\">\n              </ng-doc-playground-property>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;container:ng-doc-playground/inline-size}.ng-doc-playground-properties-wrapper{display:grid;grid-template-columns:minmax(0,1fr) var(--ng-doc-playground-inspector-width);align-items:stretch;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:clip;background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-playground-properties-wrapper.no-side-panel{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper:not(.no-side-panel):not(.inspector-bottom) .ng-doc-playground-demos{position:sticky;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter));align-self:start;z-index:4}.ng-doc-playground-demos{display:flex;flex-direction:column;min-width:0}.ng-doc-playground-properties-wrapper:not(.no-side-panel):not(.inspector-bottom) .ng-doc-playground-demos{min-height:min(100%,100dvh - var(--ng-doc-page-sticky-offset) - 2 * var(--ng-doc-base-gutter))}.ng-doc-playground-properties{min-width:0;background:var(--ng-doc-base-1);border-left:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px;color:var(--ng-doc-text);--ng-doc-input-height: 36px;--ng-doc-input-border: var(--ng-doc-playground-input-border);--ng-doc-checkbox-border: var(--ng-doc-playground-input-border)}.ng-doc-playground-header{display:flex;align-items:center;gap:var(--ng-doc-space-2);height:52px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4)}.ng-doc-playground-header h4{margin:0;font-family:var(--ng-doc-heading-font-family);font-size:15px;line-height:22px;font-weight:600;letter-spacing:0;color:var(--ng-doc-heading-color)}.ng-doc-playground-reset{display:inline-flex;align-items:center;height:28px;margin-left:auto;padding:0 10px;border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);font:inherit;font-size:12px;font-weight:500;color:var(--ng-doc-heading-color);cursor:pointer}.ng-doc-playground-reset:hover{border-color:var(--ng-doc-border-hover-color)}.ng-doc-playground-reset:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-playground-setting{display:flex;align-items:center;gap:6px;padding:0 var(--ng-doc-space-4) var(--ng-doc-space-3)}.ng-doc-playground-info{--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-playground-divider{height:1px;background:var(--ng-doc-border-color)}h5.ng-doc-title{margin:0;padding:var(--ng-doc-space-3) var(--ng-doc-space-4) var(--ng-doc-space-1);font-family:var(--ng-doc-font-family);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ng-doc-text-muted)}ng-doc-playground-property{padding:var(--ng-doc-space-2) var(--ng-doc-space-4)}ng-doc-playground-property+ng-doc-playground-property{border-top:1px solid var(--ng-doc-base-2)}.ng-doc-playground-property-list:last-child{padding-bottom:var(--ng-doc-space-2)}.ng-doc-playground-properties-wrapper.inspector-bottom{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper.inspector-bottom .ng-doc-playground-properties{border-left:0;border-top:1px solid var(--ng-doc-border-color)}.ng-doc-playground-properties-wrapper.inspector-bottom .ng-doc-playground-property-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));column-gap:var(--ng-doc-space-4)}.ng-doc-playground-properties-wrapper.inspector-bottom ng-doc-playground-property+ng-doc-playground-property{border-top:0}@container ng-doc-playground (max-width: 640px){.ng-doc-playground-properties-wrapper{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper:not(.no-side-panel) .ng-doc-playground-demos{position:static}.ng-doc-playground-properties{border-left:0;border-top:1px solid var(--ng-doc-border-color)}}\n"], dependencies: [{ kind: "component", type: NgDocCheckboxComponent, selector: "ng-doc-checkbox", inputs: ["color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control", "defaultValue"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, decorators: [{
             type: Component,
@@ -433,17 +788,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                         KeyValuePipe,
                         NgDocBindPipe,
                         NgDocExecutePipe,
-                    ], template: "@if (defaultValues(); as defaultValues) {\n  <div\n    class=\"ng-doc-playground-properties-wrapper\"\n    [class.no-side-panel]=\"hideSidePanel()\"\n    [class.inspector-bottom]=\"inspectorPosition() === 'bottom'\">\n    <div class=\"ng-doc-playground-demos\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideSidePanel()) {\n      <div class=\"ng-doc-playground-properties\">\n        <div class=\"ng-doc-playground-header\">\n          <h4>Playground</h4>\n          @if (showResetButton()) {\n            <button type=\"button\" class=\"ng-doc-playground-reset\" (click)=\"resetForm.emit()\">\n              Reset\n            </button>\n          }\n        </div>\n        <div class=\"ng-doc-playground-setting\">\n          <ng-doc-checkbox [ngModel]=\"recreateDemo()\" (ngModelChange)=\"recreateDemo.set($event)\">\n            Recreate\n          </ng-doc-checkbox>\n          <ng-doc-icon\n            class=\"ng-doc-playground-info\"\n            icon=\"info\"\n            role=\"img\"\n            aria-label=\"Recreates the demo every time one of the inputs changes\"\n            [ngDocTooltip]=\"'Recreates the demo every time one of the inputs changes'\"\n            [positions]=\"['bottom-right', 'left-center']\"></ng-doc-icon>\n        </div>\n        <div class=\"ng-doc-playground-divider\"></div>\n        @if (propertyControls().length) {\n          <h5 class=\"ng-doc-title\">Settings</h5>\n          <div class=\"ng-doc-playground-property-list\">\n            @for (propertyControl of propertyControls(); track propertyControl.propertyName) {\n              <ng-doc-playground-property\n                [name]=\"propertyControl.property.inputName\"\n                [property]=\"propertyControl.property\"\n                [typeControl]=\"propertyControl.typeControl\"\n                [defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n                [control]=\"\n                  getFormControl | bind: this | execute: 'properties' : propertyControl.propertyName\n                \">\n              </ng-doc-playground-property>\n            }\n          </div>\n        }\n        @if ((dynamicContent() | keyvalue)?.length) {\n          <h5 class=\"ng-doc-title\">Content</h5>\n          <div class=\"ng-doc-playground-property-list\">\n            @for (content of dynamicContent() | keyvalue; track content.key) {\n              <ng-doc-playground-property\n                [name]=\"content.value.label\"\n                [property]=\"content.value\"\n                [typeControl]=\"contentTypeControl\"\n                [control]=\"getFormControl | bind: this | execute: 'content' : content.key\">\n              </ng-doc-playground-property>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;container:ng-doc-playground/inline-size}.ng-doc-playground-properties-wrapper{display:grid;grid-template-columns:minmax(0,1fr) var(--ng-doc-playground-inspector-width);align-items:stretch;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:clip;background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-playground-properties-wrapper.no-side-panel{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper:not(.no-side-panel):not(.inspector-bottom) .ng-doc-playground-demos{position:sticky;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter));align-self:start;z-index:4}.ng-doc-playground-demos{display:flex;flex-direction:column;min-width:0}.ng-doc-playground-properties-wrapper:not(.no-side-panel):not(.inspector-bottom) .ng-doc-playground-demos{min-height:min(100%,100dvh - var(--ng-doc-page-sticky-offset) - 2 * var(--ng-doc-base-gutter))}.ng-doc-playground-properties{min-width:0;background:var(--ng-doc-base-1);border-left:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px;color:var(--ng-doc-text);--ng-doc-input-height: 36px;--ng-doc-input-border: var(--ng-doc-playground-input-border);--ng-doc-checkbox-border: var(--ng-doc-playground-input-border)}.ng-doc-playground-header{display:flex;align-items:center;gap:var(--ng-doc-space-2);height:52px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4)}.ng-doc-playground-header h4{margin:0;font-family:var(--ng-doc-heading-font-family);font-size:15px;line-height:22px;font-weight:600;letter-spacing:0;color:var(--ng-doc-heading-color)}.ng-doc-playground-reset{display:inline-flex;align-items:center;height:28px;margin-left:auto;padding:0 10px;border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);font:inherit;font-size:12px;font-weight:500;color:var(--ng-doc-heading-color);cursor:pointer}.ng-doc-playground-reset:hover{border-color:var(--ng-doc-border-hover-color)}.ng-doc-playground-reset:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-playground-setting{display:flex;align-items:center;gap:6px;padding:0 var(--ng-doc-space-4) var(--ng-doc-space-3)}.ng-doc-playground-info{--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-playground-divider{height:1px;background:var(--ng-doc-border-color)}h5.ng-doc-title{margin:0;padding:var(--ng-doc-space-3) var(--ng-doc-space-4) var(--ng-doc-space-1);font-family:var(--ng-doc-font-family);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ng-doc-text-muted)}ng-doc-playground-property{padding:var(--ng-doc-space-2) var(--ng-doc-space-4)}ng-doc-playground-property+ng-doc-playground-property{border-top:1px solid var(--ng-doc-base-2)}.ng-doc-playground-property-list:last-child{padding-bottom:var(--ng-doc-space-2)}.ng-doc-playground-properties-wrapper.inspector-bottom{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper.inspector-bottom .ng-doc-playground-properties{border-left:0;border-top:1px solid var(--ng-doc-border-color)}.ng-doc-playground-properties-wrapper.inspector-bottom .ng-doc-playground-property-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));column-gap:var(--ng-doc-space-4)}.ng-doc-playground-properties-wrapper.inspector-bottom ng-doc-playground-property+ng-doc-playground-property{border-top:0}@container ng-doc-playground (max-width: 640px){.ng-doc-playground-properties-wrapper{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper:not(.no-side-panel) .ng-doc-playground-demos{position:static}.ng-doc-playground-properties{border-left:0;border-top:1px solid var(--ng-doc-border-color)}}\n"] }]
-        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], ignoreInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreInputs", required: false }] }], dynamicContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicContent", required: false }] }], defaultValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValues", required: false }] }], hideSidePanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSidePanel", required: false }] }], inspectorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorPosition", required: false }] }], recreateDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "recreateDemo", required: false }] }, { type: i0.Output, args: ["recreateDemoChange"] }], showResetButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResetButton", required: false }] }], resetForm: [{ type: i0.Output, args: ["resetForm"] }] } });
+                    ], template: "@if (defaultValues() || waitingForDefaults()) {\n  <div\n    class=\"ng-doc-playground-properties-wrapper\"\n    [class.no-side-panel]=\"hideSidePanel()\"\n    [class.inspector-bottom]=\"inspectorPosition() === 'bottom'\">\n    <div class=\"ng-doc-playground-demos\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideSidePanel() && defaultValues(); as defaultValues) {\n      <div class=\"ng-doc-playground-properties\">\n        <div class=\"ng-doc-playground-header\">\n          <h4>{{ texts.title }}</h4>\n          @if (showResetButton()) {\n            <button type=\"button\" class=\"ng-doc-playground-reset\" (click)=\"resetForm.emit()\">\n              {{ texts.reset }}\n            </button>\n          }\n        </div>\n        @if (!recreateLocked()) {\n          <div class=\"ng-doc-playground-setting\">\n            <ng-doc-checkbox [ngModel]=\"recreateDemo()\" (ngModelChange)=\"recreateDemo.set($event)\">\n              {{ texts.recreate }}\n            </ng-doc-checkbox>\n            <ng-doc-icon\n              class=\"ng-doc-playground-info\"\n              icon=\"info\"\n              role=\"img\"\n              [attr.aria-label]=\"texts.recreateHint\"\n              [ngDocTooltip]=\"texts.recreateHint\"\n              [positions]=\"['bottom-right', 'left-center']\"></ng-doc-icon>\n          </div>\n        }\n        <div class=\"ng-doc-playground-divider\"></div>\n        @for (section of propertySections(); track $index) {\n          <h5 class=\"ng-doc-title\">{{ section.title }}</h5>\n          <div class=\"ng-doc-playground-property-list\">\n            @for (propertyControl of section.controls; track propertyControl.propertyName) {\n              <ng-doc-playground-property\n                [name]=\"propertyControl.property.label ?? propertyControl.property.inputName\"\n                [property]=\"propertyControl.property\"\n                [typeControl]=\"propertyControl.typeControl\"\n                [defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n                [control]=\"\n                  getFormControl | bind: this | execute: 'properties' : propertyControl.propertyName\n                \">\n              </ng-doc-playground-property>\n            }\n          </div>\n        }\n        @if ((dynamicContent() | keyvalue)?.length) {\n          <h5 class=\"ng-doc-title\">{{ texts.content }}</h5>\n          <div class=\"ng-doc-playground-property-list\">\n            @for (content of dynamicContent() | keyvalue; track content.key) {\n              <ng-doc-playground-property\n                [name]=\"content.value.label\"\n                [property]=\"content.value\"\n                [typeControl]=\"contentTypeControl\"\n                [control]=\"getFormControl | bind: this | execute: 'content' : content.key\">\n              </ng-doc-playground-property>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;container:ng-doc-playground/inline-size}.ng-doc-playground-properties-wrapper{display:grid;grid-template-columns:minmax(0,1fr) var(--ng-doc-playground-inspector-width);align-items:stretch;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:clip;background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-playground-properties-wrapper.no-side-panel{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper:not(.no-side-panel):not(.inspector-bottom) .ng-doc-playground-demos{position:sticky;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter));align-self:start;z-index:4}.ng-doc-playground-demos{display:flex;flex-direction:column;min-width:0}.ng-doc-playground-properties-wrapper:not(.no-side-panel):not(.inspector-bottom) .ng-doc-playground-demos{min-height:min(100%,100dvh - var(--ng-doc-page-sticky-offset) - 2 * var(--ng-doc-base-gutter))}.ng-doc-playground-properties{min-width:0;background:var(--ng-doc-base-1);border-left:1px solid var(--ng-doc-border-color);font-family:var(--ng-doc-font-family);font-size:14px;line-height:20px;color:var(--ng-doc-text);--ng-doc-input-height: 36px;--ng-doc-input-border: var(--ng-doc-playground-input-border);--ng-doc-checkbox-border: var(--ng-doc-playground-input-border)}.ng-doc-playground-header{display:flex;align-items:center;gap:var(--ng-doc-space-2);height:52px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4)}.ng-doc-playground-header h4{margin:0;font-family:var(--ng-doc-heading-font-family);font-size:15px;line-height:22px;font-weight:600;letter-spacing:0;color:var(--ng-doc-heading-color)}.ng-doc-playground-reset{display:inline-flex;align-items:center;height:28px;margin-left:auto;padding:0 10px;border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);font:inherit;font-size:12px;font-weight:500;color:var(--ng-doc-heading-color);cursor:pointer}.ng-doc-playground-reset:hover{border-color:var(--ng-doc-border-hover-color)}.ng-doc-playground-reset:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-playground-setting{display:flex;align-items:center;gap:6px;padding:0 var(--ng-doc-space-4) var(--ng-doc-space-3)}.ng-doc-playground-info{--ng-doc-icon-color: var(--ng-doc-text-muted)}.ng-doc-playground-divider{height:1px;background:var(--ng-doc-border-color)}h5.ng-doc-title{margin:0;padding:var(--ng-doc-space-3) var(--ng-doc-space-4) var(--ng-doc-space-1);font-family:var(--ng-doc-font-family);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ng-doc-text-muted)}ng-doc-playground-property{padding:var(--ng-doc-space-2) var(--ng-doc-space-4)}ng-doc-playground-property+ng-doc-playground-property{border-top:1px solid var(--ng-doc-base-2)}.ng-doc-playground-property-list:last-child{padding-bottom:var(--ng-doc-space-2)}.ng-doc-playground-properties-wrapper.inspector-bottom{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper.inspector-bottom .ng-doc-playground-properties{border-left:0;border-top:1px solid var(--ng-doc-border-color)}.ng-doc-playground-properties-wrapper.inspector-bottom .ng-doc-playground-property-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));column-gap:var(--ng-doc-space-4)}.ng-doc-playground-properties-wrapper.inspector-bottom ng-doc-playground-property+ng-doc-playground-property{border-top:0}@container ng-doc-playground (max-width: 640px){.ng-doc-playground-properties-wrapper{grid-template-columns:minmax(0,1fr)}.ng-doc-playground-properties-wrapper:not(.no-side-panel) .ng-doc-playground-demos{position:static}.ng-doc-playground-properties{border-left:0;border-top:1px solid var(--ng-doc-border-color)}}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], ignoreInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "ignoreInputs", required: false }] }], dynamicContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicContent", required: false }] }], defaultValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValues", required: false }] }], waitingForDefaults: [{ type: i0.Input, args: [{ isSignal: true, alias: "waitingForDefaults", required: false }] }], hideSidePanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSidePanel", required: false }] }], inspectorPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "inspectorPosition", required: false }] }], recreateDemo: [{ type: i0.Input, args: [{ isSignal: true, alias: "recreateDemo", required: false }] }, { type: i0.Output, args: ["recreateDemoChange"] }], recreateLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "recreateLocked", required: false }] }], showResetButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResetButton", required: false }] }], resetForm: [{ type: i0.Output, args: ["resetForm"] }] } });
+/**
+ * Compares the `order` of two inputs from the playground's `controls`: inputs with one come first,
+ * lowest first.
+ * @param a - The first input's order.
+ * @param b - The second input's order.
+ * @returns The comparison, or `undefined` when neither input has an order or both have the same.
+ */
+function compareOrder(a, b) {
+    if (isPresent(a) && isPresent(b)) {
+        return a - b || undefined;
+    }
+    if (isPresent(a)) {
+        return -1;
+    }
+    if (isPresent(b)) {
+        return 1;
+    }
+    return undefined;
+}
+/**
+ * Compares two inputs by the order of their type controls: controls with an order first, lowest
+ * first (equal orders keep the inputs' order), then the others by name.
+ * @param a - The first input.
+ * @param b - The second input.
+ */
+function compareByTypeControl(a, b) {
+    const aOrder = a.typeControl.options?.order;
+    const bOrder = b.typeControl.options?.order;
+    if (isPresent(aOrder) && isPresent(bOrder)) {
+        return aOrder - bOrder;
+    }
+    if (isPresent(aOrder)) {
+        return -1;
+    }
+    if (isPresent(bOrder)) {
+        return 1;
+    }
+    return INPUT_ORDER.compare(a.property.inputName, b.property.inputName);
+}
+/** The types of the values that an item of the multi-select of a union can have. */
+const ITEM_TYPES = new Set(['string', 'number', 'boolean', 'undefined']);
 /** The types whose control also edits an optional or nullable input of the type. */
 const PRIMITIVE_TYPES = new Set(['string', 'number', 'boolean']);
 /**
  * The primitive of an optional or nullable primitive input type, such as `string` of
  * `string | undefined` (an optional `@Input() label?: string`, `input<string>()` or
  * `model<string>()`) or of `number | null`, so that the input gets the primitive's control.
- * Other types are matched by their exact name only: a custom control registered for `Position`
- * does not receive the `undefined` of a `Position | undefined` input unless it is registered for
- * that type too.
+ * Other types are matched by their exact name only (arrays of strings and numbers aside, see
+ * `arrayType`): a custom control registered for `Position` does not receive the `undefined` of a
+ * `Position | undefined` input unless it is registered for that type too.
  * @param type - The input type as the builder printed it.
  * @returns The primitive, or `undefined` when the type is not one.
  */
@@ -458,11 +854,18 @@ function optionalPrimitive(type) {
 /**
  * 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.
  */
 class NgDocPlaygroundComponent {
     constructor() {
         this.rootPage = inject(NgDocRootPage);
         this.formBuilder = inject(FormBuilder);
+        this.texts = inject(NG_DOC_TEXTS).playground;
         /** The name of the playground in the page configuration. */
         this.id = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
@@ -478,9 +881,6 @@ class NgDocPlaygroundComponent {
         /** Options of the playground action; they extend the playground configuration. */
         this.options = input({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        /** Whether the demo is created again each time a value changes. */
-        this.recreateDemo = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "recreateDemo" }] : /* istanbul ignore next */ []));
         /** The values of the inputs and content slots. */
         this.formGroup = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
@@ -490,13 +890,183 @@ class NgDocPlaygroundComponent {
         /** The playground configuration of the page, extended by the options. */
         this.configuration = computed(() => Object.assign({}, this.rootPage.page?.playgrounds?.[this.id()], this.options()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
+        /**
+         * 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'`.
+         */
+        this.recreateDemo = linkedSignal(() => !!this.configuration().recreate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recreateDemo" }] : /* istanbul ignore next */ []));
+        /** Whether the Recreate setting is fixed on, and hidden, by the `'always'` option. */
+        this.recreateLocked = computed(() => this.configuration().recreate === 'always', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recreateLocked" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.
+         */
+        this.fallback = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []));
+        /** Whether the demos are shown in iframes of their pages in the demo application. */
+        this.isolated = computed(() => !!this.rootPage.demoRoute &&
+            !this.fallback() &&
+            !this.uncloneableControl() &&
+            !this.pagelessSelector() &&
+            (this.configuration().isolated ?? this.rootPage.isolatedPlaygrounds ?? false), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isolated" }] : /* istanbul ignore next */ []));
+        /** The note that says why an isolated playground renders in the page. */
+        this.fallbackNote = computed(() => {
+            const note = this.uncloneableControl() ?? this.pagelessSelector() ?? this.fallback();
+            return note && (this.configuration().isolated ?? this.rootPage.isolatedPlaygrounds)
+                ? note
+                : undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fallbackNote" }] : /* istanbul ignore next */ []));
+        /**
+         * The theme of the iframes: the `theme` option, until the reader picks another with the theme
+         * button beside a demo; `undefined` follows the page.
+         */
+        this.frameTheme = linkedSignal(() => this.configuration().theme, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frameTheme" }] : /* istanbul ignore next */ []));
+        /** The iframe of each target, by selector or pipe name, while the playground is isolated. */
+        this.frames = computed(() => {
+            const encoded = this.fragment();
+            if (!this.isolated() || !encoded.ok)
+                return undefined;
+            const targets = this.targets();
+            const slugs = _playgroundTargetSlugs(targets);
+            return new Map(targets.map((target, index) => [
+                target,
+                {
+                    url: this.pageUrl(slugs[index]),
+                    fragment: _withDemoTheme(encoded.fragment, this.frameTheme()),
+                    title: this.texts.frameTitle({ id: this.id(), target }),
+                },
+            ]));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frames" }] : /* istanbul ignore next */ []));
+        this.injector = inject(Injector);
+        this.platformLocation = inject(PlatformLocation);
+        this.appBaseHref = inject(APP_BASE_HREF, { optional: true });
+        this.formValue = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
         this.defaultProperties = {};
         this.defaultContent = {};
+        this.viewInitialized = false;
+        /** Every target of the playground, in the order of its page's routes: its selectors, or the pipe. */
+        this.targets = computed(() => this.pipeName() ? [this.pipeName()] : this.selectors(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "targets" }] : /* istanbul ignore next */ []));
+        /** The state of the iframes as a URL fragment. */
+        this.fragment = computed(() => {
+            const names = objectKeys(this.properties() ?? {}).map(String);
+            const value = this.formValue();
+            const configuration = this.configuration();
+            // Before the iframe reported the defaults, it gets the playground's own values only.
+            const properties = value.properties ??
+                Object.fromEntries(Object.entries(Object.assign({}, configuration.defaults, configuration.inputs)).filter(([name]) => names.includes(name)));
+            return _playgroundStateToFragment({
+                inputs: names,
+                properties,
+                content: Object.entries(value.content ?? {})
+                    .filter(([, shown]) => shown)
+                    .map(([slot]) => slot),
+                recreate: this.recreateDemo(),
+                data: this.options().data,
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fragment" }] : /* istanbul ignore next */ []));
+        /**
+         * An input whose control is declared not cloneable (`cloneable: false` of `provideTypeControl`):
+         * the playground renders in the page from the start.
+         */
+        this.uncloneableControl = computed(() => {
+            const controls = this.configuration().controls ?? {};
+            for (const [name, property] of Object.entries(this.properties() ?? {})) {
+                const control = controls[name];
+                const type = typeof control === 'string' ? control : control?.type ?? property.type;
+                const token = getTokenForType(type);
+                if (token && this.injector.get(token, null)?.options?.cloneable === false) {
+                    return this.texts.inPageControl({ input: name });
+                }
+            }
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uncloneableControl" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.
+         */
+        this.pagelessSelector = computed(() => {
+            if (this.pipeName())
+                return undefined;
+            const option = this.configuration().selectors;
+            const rendered = option === undefined ? [] : Array.isArray(option) ? option : [option];
+            const selector = rendered.find((item) => !this.selectors().includes(item));
+            return selector === undefined ? undefined : this.texts.inPageSelector({ selector });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pagelessSelector" }] : /* istanbul ignore next */ []));
+        // A value that can't be put in the URL makes the playground render in the page.
+        effect(() => {
+            const encoded = this.fragment();
+            if (!encoded.ok && this.isolated()) {
+                untracked(() => this.fallback.set(encoded.path
+                    ? this.texts.inPageValue({ input: encoded.path, reason: encoded.reason })
+                    : this.texts.inPageTooLong));
+            }
+        });
+        // A playground that fell back before its form existed creates it once a demo in the page has
+        // reported the defaults. A playground in the page from the start creates it in
+        // `ngAfterViewInit`, as before.
+        effect(() => {
+            if (this.fallback() && this.defaultValues() && !this.formGroup() && this.viewInitialized) {
+                untracked(() => this.createForm());
+            }
+        });
+    }
+    /**
+     * 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) {
+        if (message.type === 'playground-error') {
+            this.fallback.set(this.texts.inPageFrameError({ message: message.message }));
+            return;
+        }
+        if (message.type !== 'playground-ready' || this.formGroup())
+            return;
+        if (message.uncloneable.length) {
+            this.fallback.set(this.texts.inPageDefault({ input: message.uncloneable[0] }));
+            return;
+        }
+        this.defaultValues.set(Object.fromEntries(Object.entries(message.defaults).map(([name, value]) => [
+            name,
+            _decodePlaygroundValue(value),
+        ])));
+        this.createForm();
+    }
+    /**
+     * 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() {
+        if (!this.fallback())
+            this.fallback.set(this.texts.inPageFrameSilent);
     }
     ngAfterViewInit() {
+        this.viewInitialized = true;
+        // An isolated playground creates its form once its iframe reported the defaults.
+        if (this.isolated())
+            return;
+        this.createForm();
+    }
+    createForm() {
         this.defaultProperties = this.getPropertiesFormValues();
         this.defaultContent = this.getContentFormValues();
-        const propertiesForm = this.formBuilder.group(this.defaultProperties);
+        // `FormBuilder` reads an array as `[value, validators]`, so each value is wrapped: the default
+        // of an array input is the value of its control.
+        const propertiesForm = this.formBuilder.group(Object.fromEntries(Object.entries(this.defaultProperties).map(([key, value]) => [key, [value]])));
         const contentForm = this.formBuilder.group(this.defaultContent);
         const formGroup = this.formBuilder.group({
             properties: propertiesForm,
@@ -508,6 +1078,30 @@ class NgDocPlaygroundComponent {
             content: this.defaultContent,
         });
         this.formGroup.set(formGroup);
+        formGroup.valueChanges
+            .pipe(takeUntilDestroyed(this.injector.get(DestroyRef)))
+            .subscribe(() => this.formValue.set(formGroup.getRawValue()));
+        this.formValue.set(formGroup.getRawValue());
+    }
+    /**
+     * The URL of a target's page in the demo application, under the document's base href.
+     * @param slug
+     */
+    pageUrl(slug) {
+        const baseHref = (this.appBaseHref ??
+            this.platformLocation.getBaseHrefFromDOM() ??
+            '/').replace(/^\/+|\/+$/g, '');
+        const path = [
+            ...baseHref.split('/'),
+            ...(this.rootPage.demoRoute ?? '').split('/'),
+            'playground',
+            this.id(),
+            slug,
+        ]
+            .filter(Boolean)
+            .map((segment) => encodeURIComponent(segment))
+            .join('/');
+        return `/${path}`;
     }
     isDefaultState() {
         const formGroup = this.formGroup();
@@ -541,98 +1135,201 @@ class NgDocPlaygroundComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPlaygroundComponent, isStandalone: true, selector: "ng-doc-playground", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, pipeName: { classPropertyName: "pipeName", publicName: "pipeName", isSignal: true, isRequired: false, transformFunction: null }, selectors: { classPropertyName: "selectors", publicName: "selectors", isSignal: true, isRequired: false, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (configuration(); as configuration) {\n  <ng-doc-playground-properties\n    [form]=\"formGroup()!\"\n    [properties]=\"properties()\"\n    [ignoreInputs]=\"configuration.hiddenInputs\"\n    [dynamicContent]=\"configuration.content\"\n    [hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n    [inspectorPosition]=\"configuration.inspectorPosition ?? 'right'\"\n    [defaultValues]=\"defaultValues()\"\n    [showResetButton]=\"!isDefaultState()\"\n    [(recreateDemo)]=\"recreateDemo\"\n    (resetForm)=\"resetForm()\">\n    @for (selector of configuration.selectors ?? selectors() | asArray; track selector) {\n      <ng-doc-playground-demo\n        [id]=\"id()\"\n        [selector]=\"selector\"\n        [properties]=\"properties()\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo()\"\n        [form]=\"formGroup()\"\n        [expanded]=\"configuration.expanded ?? false\">\n      </ng-doc-playground-demo>\n    }\n    @if (pipeName()) {\n      <ng-doc-playground-demo\n        [id]=\"id()\"\n        [pipeName]=\"pipeName()\"\n        [properties]=\"properties()\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo()\"\n        [form]=\"formGroup()\">\n      </ng-doc-playground-demo>\n    }\n  </ng-doc-playground-properties>\n}\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}ng-doc-playground-demo:last-child{flex:1 1 auto}ng-doc-playground-demo+ng-doc-playground-demo{border-top:1px solid color-mix(in srgb,var(--ng-doc-border-color) 70%,transparent)}\n"], dependencies: [{ kind: "component", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "ignoreInputs", "dynamicContent", "defaultValues", "hideSidePanel", "inspectorPosition", "recreateDemo", "showResetButton"], outputs: ["recreateDemoChange", "resetForm"] }, { kind: "component", type: NgDocPlaygroundDemoComponent, selector: "ng-doc-playground-demo", inputs: ["id", "pipeName", "selector", "configuration", "properties", "recreateDemo", "form", "expanded"] }, { kind: "pipe", type: NgDocAsArrayPipe, name: "asArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPlaygroundComponent, isStandalone: true, selector: "ng-doc-playground", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, pipeName: { classPropertyName: "pipeName", publicName: "pipeName", isSignal: true, isRequired: false, transformFunction: null }, selectors: { classPropertyName: "selectors", publicName: "selectors", isSignal: true, isRequired: false, transformFunction: null }, properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: ɵNG_DOC_PLAYGROUND_CONTAINER, useExisting: NgDocPlaygroundComponent }], ngImport: i0, template: "@if (configuration(); as configuration) {\n  @if (fallbackNote(); as note) {\n    <p class=\"ng-doc-playground-note\" role=\"note\">{{ note }}</p>\n  }\n  <ng-doc-playground-properties\n    [form]=\"formGroup()!\"\n    [properties]=\"properties()\"\n    [ignoreInputs]=\"configuration.hiddenInputs\"\n    [dynamicContent]=\"configuration.content\"\n    [hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n    [inspectorPosition]=\"configuration.inspectorPosition ?? 'right'\"\n    [defaultValues]=\"defaultValues()\"\n    [waitingForDefaults]=\"isolated()\"\n    [showResetButton]=\"!isDefaultState()\"\n    [(recreateDemo)]=\"recreateDemo\"\n    [recreateLocked]=\"recreateLocked()\"\n    (resetForm)=\"resetForm()\">\n    @for (selector of configuration.selectors ?? selectors() | asArray; track selector) {\n      <ng-doc-playground-demo\n        [id]=\"id()\"\n        [selector]=\"selector\"\n        [properties]=\"properties()\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo()\"\n        [form]=\"formGroup()\"\n        [expanded]=\"configuration.expanded ?? false\"\n        [frame]=\"frames()?.get(selector)\"\n        [frameDefaults]=\"defaultValues()\"\n        [(frameTheme)]=\"frameTheme\"\n        [configuredTheme]=\"configuration.theme\"\n        (frameMessage)=\"onFrameMessage($event)\"\n        (frameSilent)=\"onFrameSilent()\">\n      </ng-doc-playground-demo>\n    }\n    @if (pipeName()) {\n      <ng-doc-playground-demo\n        [id]=\"id()\"\n        [pipeName]=\"pipeName()\"\n        [properties]=\"properties()\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo()\"\n        [form]=\"formGroup()\"\n        [frame]=\"frames()?.get(pipeName())\"\n        [frameDefaults]=\"defaultValues()\"\n        [(frameTheme)]=\"frameTheme\"\n        [configuredTheme]=\"configuration.theme\"\n        (frameMessage)=\"onFrameMessage($event)\"\n        (frameSilent)=\"onFrameSilent()\">\n      </ng-doc-playground-demo>\n    }\n  </ng-doc-playground-properties>\n}\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}ng-doc-playground-demo:last-child{flex:1 1 auto}ng-doc-playground-demo+ng-doc-playground-demo{border-top:1px solid color-mix(in srgb,var(--ng-doc-border-color) 70%,transparent)}.ng-doc-playground-note{margin:0;padding:var(--ng-doc-space-2) var(--ng-doc-space-3);color:var(--ng-doc-text-muted)}\n"], dependencies: [{ kind: "component", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "ignoreInputs", "dynamicContent", "defaultValues", "waitingForDefaults", "hideSidePanel", "inspectorPosition", "recreateDemo", "recreateLocked", "showResetButton"], outputs: ["recreateDemoChange", "resetForm"] }, { kind: "component", type: NgDocPlaygroundDemoComponent, selector: "ng-doc-playground-demo", inputs: ["id", "pipeName", "selector", "configuration", "properties", "recreateDemo", "form", "expanded", "frame", "frameDefaults", "frameTheme", "configuredTheme"], outputs: ["frameMessage", "frameSilent", "frameThemeChange"] }, { kind: "pipe", type: NgDocAsArrayPipe, name: "asArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocPlaygroundPropertiesComponent, NgDocPlaygroundDemoComponent, NgDocAsArrayPipe], template: "@if (configuration(); as configuration) {\n  <ng-doc-playground-properties\n    [form]=\"formGroup()!\"\n    [properties]=\"properties()\"\n    [ignoreInputs]=\"configuration.hiddenInputs\"\n    [dynamicContent]=\"configuration.content\"\n    [hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n    [inspectorPosition]=\"configuration.inspectorPosition ?? 'right'\"\n    [defaultValues]=\"defaultValues()\"\n    [showResetButton]=\"!isDefaultState()\"\n    [(recreateDemo)]=\"recreateDemo\"\n    (resetForm)=\"resetForm()\">\n    @for (selector of configuration.selectors ?? selectors() | asArray; track selector) {\n      <ng-doc-playground-demo\n        [id]=\"id()\"\n        [selector]=\"selector\"\n        [properties]=\"properties()\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo()\"\n        [form]=\"formGroup()\"\n        [expanded]=\"configuration.expanded ?? false\">\n      </ng-doc-playground-demo>\n    }\n    @if (pipeName()) {\n      <ng-doc-playground-demo\n        [id]=\"id()\"\n        [pipeName]=\"pipeName()\"\n        [properties]=\"properties()\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo()\"\n        [form]=\"formGroup()\">\n      </ng-doc-playground-demo>\n    }\n  </ng-doc-playground-properties>\n}\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}ng-doc-playground-demo:last-child{flex:1 1 auto}ng-doc-playground-demo+ng-doc-playground-demo{border-top:1px solid color-mix(in srgb,var(--ng-doc-border-color) 70%,transparent)}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], pipeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "pipeName", required: false }] }], selectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectors", required: false }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+            args: [{ selector: 'ng-doc-playground', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocPlaygroundPropertiesComponent, NgDocPlaygroundDemoComponent, NgDocAsArrayPipe], providers: [{ provide: ɵNG_DOC_PLAYGROUND_CONTAINER, useExisting: NgDocPlaygroundComponent }], template: "@if (configuration(); as configuration) {\n  @if (fallbackNote(); as note) {\n    <p class=\"ng-doc-playground-note\" role=\"note\">{{ note }}</p>\n  }\n  <ng-doc-playground-properties\n    [form]=\"formGroup()!\"\n    [properties]=\"properties()\"\n    [ignoreInputs]=\"configuration.hiddenInputs\"\n    [dynamicContent]=\"configuration.content\"\n    [hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n    [inspectorPosition]=\"configuration.inspectorPosition ?? 'right'\"\n    [defaultValues]=\"defaultValues()\"\n    [waitingForDefaults]=\"isolated()\"\n    [showResetButton]=\"!isDefaultState()\"\n    [(recreateDemo)]=\"recreateDemo\"\n    [recreateLocked]=\"recreateLocked()\"\n    (resetForm)=\"resetForm()\">\n    @for (selector of configuration.selectors ?? selectors() | asArray; track selector) {\n      <ng-doc-playground-demo\n        [id]=\"id()\"\n        [selector]=\"selector\"\n        [properties]=\"properties()\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo()\"\n        [form]=\"formGroup()\"\n        [expanded]=\"configuration.expanded ?? false\"\n        [frame]=\"frames()?.get(selector)\"\n        [frameDefaults]=\"defaultValues()\"\n        [(frameTheme)]=\"frameTheme\"\n        [configuredTheme]=\"configuration.theme\"\n        (frameMessage)=\"onFrameMessage($event)\"\n        (frameSilent)=\"onFrameSilent()\">\n      </ng-doc-playground-demo>\n    }\n    @if (pipeName()) {\n      <ng-doc-playground-demo\n        [id]=\"id()\"\n        [pipeName]=\"pipeName()\"\n        [properties]=\"properties()\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo()\"\n        [form]=\"formGroup()\"\n        [frame]=\"frames()?.get(pipeName())\"\n        [frameDefaults]=\"defaultValues()\"\n        [(frameTheme)]=\"frameTheme\"\n        [configuredTheme]=\"configuration.theme\"\n        (frameMessage)=\"onFrameMessage($event)\"\n        (frameSilent)=\"onFrameSilent()\">\n      </ng-doc-playground-demo>\n    }\n  </ng-doc-playground-properties>\n}\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}ng-doc-playground-demo:last-child{flex:1 1 auto}ng-doc-playground-demo+ng-doc-playground-demo{border-top:1px solid color-mix(in srgb,var(--ng-doc-border-color) 70%,transparent)}.ng-doc-playground-note{margin:0;padding:var(--ng-doc-space-2) var(--ng-doc-space-3);color:var(--ng-doc-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], pipeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "pipeName", required: false }] }], selectors: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectors", required: false }] }], properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+const EMPTY_STATE = {
+    inputs: [],
+    properties: {},
+    content: [],
+    recreate: false,
+};
 /**
- * Base class of the playground classes the builder generates, one per playground and selector.
- * A generated class renders the playground template with the target's inputs bound to
- * `properties()`, and queries the target with `viewChild()`.
+ * 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.
  */
-class NgDocBasePlayground {
-    static { this.selector = 'unknown'; }
+class NgDocPlaygroundHostComponent {
     constructor() {
-        /** Values of the target's inputs, by property name. */
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.properties = input({}, /* @ts-ignore */
+        /** The target's inputs, by name, from the state: a pipe's parameters are positional. */
+        this.properties = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []));
-        /** The `data` given to the playground action; it extends the configuration's `data`. */
-        this.actionData = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "actionData" }] : /* istanbul ignore next */ []));
-        /** Whether each content slot is shown, by slot name. */
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.content = input({}, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
-        /** The default values of the target's inputs, read before the template binds them. */
-        this.defaultValues = {};
-        this.reattached = new Subject();
-        this.playgroundContainer = inject(NgDocPlaygroundComponent);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        // The view is not checked until the default values of the target are read, so the
-        // template's bindings cannot overwrite them first.
-        this.changeDetectorRef.detach();
+        /** The default values of the target's inputs, reported by the generated class. */
+        this.defaultValues = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
+        this.texts = inject(NG_DOC_TEXTS).playground;
+        this.injector = inject(Injector);
+        this.outlet = viewChild.required('outlet', { ...(ngDevMode ? { debugName: "outlet" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        this.window = isPlatformBrowser(inject(PLATFORM_ID))
+            ? inject(DOCUMENT).defaultView
+            : null;
+        const data = inject(ActivatedRoute).snapshot.data['ngDocPlayground'];
+        const target = data?.selector ?? data?.pipeName;
+        const token = data ? getPlaygroundDemoToken(data.id) : undefined;
+        const classes = token ? this.injector.get(token, []) : [];
+        this.playground = classes.find((type) => type.selector === target);
+        this.missing = !this.playground;
+        // The router updates the URL after it activates the route, so the fragment is read after
+        // the first render.
+        afterNextRender(() => this.start(this.readState() ?? EMPTY_STATE));
+        const window = this.window;
+        if (window) {
+            const onHashChange = () => {
+                const state = this.readState();
+                // A malformed fragment is reported and leaves the target as it is.
+                if (state)
+                    this.apply(state);
+            };
+            window.addEventListener('hashchange', onHashChange);
+            inject(DestroyRef).onDestroy(() => window.removeEventListener('hashchange', onHashChange));
+        }
     }
-    /** Emits once, after the view is attached again and checks the template's bindings. */
-    get onReattached() {
-        return this.reattached.pipe(take(1));
+    /**
+     * Creates the target with the first state, and reports its defaults once it has rendered.
+     * @param state
+     */
+    start(state) {
+        this.properties.set(Object.fromEntries(state.inputs.map((name) => [name, true])));
+        if (!this.playground) {
+            this.post({
+                type: 'playground-error',
+                phase: 'create',
+                message: this.texts.missing,
+            });
+            return;
+        }
+        if (!this.create(state))
+            return;
+        // The generated class reads the target's defaults when it is first checked, which the next
+        // render has done.
+        afterNextRender(() => {
+            const defaults = {};
+            const uncloneable = [];
+            for (const [name, value] of Object.entries(this.defaultValues() ?? {})) {
+                const encoded = _encodePlaygroundValue(value);
+                if (encoded.ok)
+                    defaults[name] = encoded.value;
+                else
+                    uncloneable.push(name);
+            }
+            this.post({ type: 'playground-ready', defaults, uncloneable });
+            this.applied();
+        }, { injector: this.injector });
     }
-    /** The playground `data`: the configuration's data extended by the action's data. */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    get data() {
-        return Object.assign({}, this.configData, this.actionData());
+    /**
+     * Creates the target and sets the state; reports a failure instead of throwing.
+     * @param state
+     */
+    create(state) {
+        if (!this.playground)
+            return false;
+        try {
+            this.reference?.destroy();
+            this.reference = this.outlet().createComponent(this.playground);
+            this.setState(state);
+            return true;
+        }
+        catch (error) {
+            this.post({ type: 'playground-error', phase: 'create', message: describe(error) });
+            return false;
+        }
     }
-    ngOnInit() {
-        // The target is created with the view, but the view has not been checked yet, so its inputs
-        // still hold their defaults. Signal inputs are read by calling them.
-        const playground = this.playground();
-        if (playground) {
-            this.defaultValues = Object.keys(playground).reduce((values, key) => {
-                try {
-                    const value = playground[key];
-                    values[key] = typeof value === 'function' ? value.call(playground) : value;
-                }
-                catch {
-                    // Some properties are getters or functions that throw without their context.
-                }
-                return values;
-            }, {});
+    /**
+     * Applies a state to the existing target, or creates it again when the state asks to.
+     * @param state
+     */
+    apply(state) {
+        if (!this.reference)
+            return;
+        if (state.recreate) {
+            if (this.create(state))
+                this.applied();
+            return;
         }
-        else if (this.target) {
-            // A pipe: the defaults of its `transform` parameters after the value itself.
-            const defaults = extractFunctionDefaults(this.target.prototype.transform);
-            this.defaultValues = Object.keys(this.playgroundContainer.properties() ?? {}).reduce((values, key, i) => {
-                values[key] = defaults[i + 1];
-                return values;
-            }, {});
+        try {
+            this.setState(state);
+            this.applied();
         }
-        else {
-            throw new Error('Playground is not defined or initialized');
+        catch (error) {
+            this.post({ type: 'playground-error', phase: 'apply', message: describe(error) });
         }
-        if (!this.playgroundContainer.defaultValues()) {
-            this.playgroundContainer.defaultValues.set(this.defaultValues);
+    }
+    setState(state) {
+        this.reference?.setInput('properties', state.properties);
+        this.reference?.setInput('actionData', state.data ?? {});
+        this.reference?.setInput('content', Object.fromEntries(state.content.map((slot) => [slot, true])));
+        this.reference?.changeDetectorRef.markForCheck();
+    }
+    /** The state of the URL fragment; a malformed one is reported and reads as `undefined`. */
+    readState() {
+        const fragment = this.window?.location.hash ?? '';
+        if (!fragment || fragment === '#')
+            return EMPTY_STATE;
+        try {
+            return _playgroundStateFromFragment(fragment);
         }
-        // The demo sets the playground's inputs right after it creates this view; the view is
-        // attached again once they are set, so its first check renders the playground's values.
-        Promise.resolve().then(() => {
-            this.changeDetectorRef.reattach();
-            this.changeDetectorRef.markForCheck();
-            this.reattached.next();
+        catch (error) {
+            this.post({ type: 'playground-error', phase: 'apply', message: describe(error) });
+            return undefined;
+        }
+    }
+    applied() {
+        this.post({
+            type: 'playground-applied',
+            fragment: (this.window?.location.hash ?? '').replace(/^#/, ''),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBasePlayground, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: NgDocBasePlayground, isStandalone: true, inputs: { properties: { classPropertyName: "properties", publicName: "properties", isSignal: true, isRequired: false, transformFunction: null }, actionData: { classPropertyName: "actionData", publicName: "actionData", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    post(message) {
+        const window = this.window;
+        // Only a page of the same origin may receive it: the demo pages are part of the site.
+        if (window && window.parent !== window) {
+            window.parent.postMessage({ source: _NG_DOC_DEMO_MESSAGE_SOURCE, version: 1, ...message }, window.location.origin);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPlaygroundHostComponent, isStandalone: true, selector: "ng-doc-playground-host", host: { attributes: { "ngSkipHydration": "true" } }, providers: [{ provide: ɵNG_DOC_PLAYGROUND_CONTAINER, useExisting: NgDocPlaygroundHostComponent }], viewQueries: [{ propertyName: "outlet", first: true, predicate: ["outlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    <ng-container #outlet />
+    @if (missing) {
+      <p role="alert">{{ texts.missing }}</p>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-doc-playground-host',
+                    template: `
+    <ng-container #outlet />
+    @if (missing) {
+      <p role="alert">{{ texts.missing }}</p>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { ngSkipHydration: 'true' },
+                    providers: [{ provide: ɵNG_DOC_PLAYGROUND_CONTAINER, useExisting: NgDocPlaygroundHostComponent }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
+/**
+ *
+ * @param error
+ */
+function describe(error) {
+    return error instanceof Error ? error.message : String(error);
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBasePlayground, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [], propDecorators: { properties: [{ type: i0.Input, args: [{ isSignal: true, alias: "properties", required: false }] }], actionData: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionData", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgDocBasePlayground, NgDocPlaygroundComponent, NgDocPlaygroundDemoComponent, NgDocPlaygroundPropertiesComponent, NgDocPlaygroundPropertyComponent };
+export { NgDocBasePlayground, NgDocPlaygroundComponent, NgDocPlaygroundDemoComponent, NgDocPlaygroundHostComponent, NgDocPlaygroundPropertiesComponent, NgDocPlaygroundPropertyComponent, ɵNG_DOC_PLAYGROUND_CONTAINER };
 //# sourceMappingURL=ng-doc-app-components-playground.mjs.map