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

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, ChangeDetectorRef, DestroyRef, ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, Component, HostBinding, EventEmitter, isDevMode, Output, Directive } from '@angular/core';
+import { input, viewChild, ViewContainerRef, signal, inject, Injector, DestroyRef, PendingTasks, ChangeDetectionStrategy, Component, computed, effect, untracked, reflectComponentType, model, output, isDevMode, linkedSignal, ChangeDetectorRef, Directive } from '@angular/core';
 import { extractFunctionDefaults } from '@ng-doc/core/helpers/extract-function-defaults';
 import { Subject, take } from 'rxjs';
 import * as i1 from '@angular/forms';
@@ -7,57 +7,83 @@ import { FormsModule, FormBuilder } from '@angular/forms';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { isSameObject } from '@ng-doc/core/helpers/is-same-object';
 import { objectKeys } from '@ng-doc/core/helpers/object-keys';
-import { NgDocLabelComponent, NgDocTooltipDirective, NgDocTextComponent, NgDocButtonComponent, NgDocCheckboxComponent, NgDocIconComponent, NgDocTextRightDirective, NgDocBindPipe, NgDocExecutePipe, NgDocAsArrayPipe } from '@ng-doc/ui-kit';
+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 { 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 { takeUntil, startWith, map } from 'rxjs/operators';
-import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { AsyncPipe, KeyValuePipe } from '@angular/common';
+import { startWith, takeUntil } from 'rxjs/operators';
+import { NgTemplateOutlet, 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';
 
+/**
+ * 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.
+ */
 class NgDocPlaygroundDemoComponent {
     constructor() {
-        this.id = '';
-        this.pipeName = '';
-        this.selector = '';
-        this.recreateDemo = false;
-        this.expanded = false;
-        this.code = '';
+        /** The name of the playground in the page configuration. */
+        this.id = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** The name of the pipe, when the target is a pipe. */
+        this.pipeName = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pipeName" }] : /* istanbul ignore next */ []));
+        /** The selector of the target this demo renders. */
+        this.selector = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selector" }] : /* istanbul ignore next */ []));
+        /** The playground configuration, extended by the action's options. */
+        this.configuration = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "configuration" }] : /* istanbul ignore next */ []));
+        /** The inputs of the target. */
+        this.properties = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []));
+        /** Whether the demo is created again each time a value changes. */
+        this.recreateDemo = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recreateDemo" }] : /* istanbul ignore next */ []));
+        /** The values of the inputs and content slots. */
+        this.form = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        /** Whether the code of the demo is shown. */
+        this.expanded = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* 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 */
+        ...(ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []));
         this.injector = inject(Injector);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.destroyRef = inject(DestroyRef);
+        this.pendingTasks = inject(PendingTasks);
         this.unsubscribe$ = new Subject();
     }
     async ngOnChanges({ form, id }) {
         if (form || id) {
             this.unsubscribe$.next();
-            const demoInjector = getPlaygroundDemoToken(this.id);
+            const demoInjector = getPlaygroundDemoToken(this.id());
             if (demoInjector) {
                 const demos = this.injector.get(demoInjector, []);
-                this.playgroundDemo = demos.find((demo) => demo.selector === this.selector || demo.selector === this.pipeName);
+                this.playgroundDemo = demos.find((demo) => demo.selector === this.selector() || demo.selector === this.pipeName());
             }
             await this.updateDemo();
-            this.form?.valueChanges
-                .pipe(takeUntil(this.unsubscribe$), startWith(this.form?.value), takeUntilDestroyed(this.destroyRef))
+            const form = this.form();
+            form?.valueChanges
+                .pipe(startWith(form.value), takeUntil(this.unsubscribe$), takeUntilDestroyed(this.destroyRef))
                 .subscribe((data) => this.updateDemo(data));
         }
     }
     async updateDemo(data) {
-        if (this.recreateDemo || !this.demoRef) {
+        if (this.recreateDemo() || !this.demoRef) {
             this.createDemo();
         }
         if (data) {
             this.demoRef?.setInput('properties', data.properties ?? {});
             this.demoRef?.setInput('content', data.content ?? {});
-            this.demoRef?.setInput('actionData', this.configuration?.data ?? {});
-            if (this.recreateDemo) {
+            this.demoRef?.setInput('actionData', this.configuration()?.data ?? {});
+            if (this.recreateDemo()) {
                 this.demoRef?.instance.onReattached.subscribe(() => {
                     this.demoRef?.changeDetectorRef.detectChanges();
                 });
@@ -68,28 +94,35 @@ class NgDocPlaygroundDemoComponent {
     createDemo() {
         if (this.playgroundDemo) {
             this.demoRef?.destroy();
-            this.demoRef = this.demoOutlet?.createComponent(this.playgroundDemo);
+            this.demoRef = this.demoOutlet()?.createComponent(this.playgroundDemo);
             this.demoRef?.changeDetectorRef.markForCheck();
         }
     }
     async updateCodeView() {
-        const template = this.pipeName
-            ? buildPlaygroundDemoPipeTemplate(this.configuration?.template ?? '', this.pipeName, this.getActiveContent(), this.getPipeActiveInputs())
-            : buildPlaygroundDemoTemplate(this.configuration?.template ?? '', this.selector, this.getActiveContent(), this.getActiveInputs());
-        this.code = await formatHtml(template);
-        this.changeDetectorRef.markForCheck();
+        const template = this.pipeName()
+            ? buildPlaygroundDemoPipeTemplate(this.configuration()?.template ?? '', this.pipeName(), this.getActiveContent(), this.getPipeActiveInputs())
+            : buildPlaygroundDemoTemplate(this.configuration()?.template ?? '', this.selector(), this.getActiveContent(), this.getActiveInputs());
+        // Formatting loads the formatter asynchronously. Zoneless SSR waits only for pending tasks, so
+        // the page would otherwise be serialized before the code view is filled.
+        const done = this.pendingTasks.add();
+        try {
+            this.code.set(await formatHtml(template));
+        }
+        finally {
+            done();
+        }
     }
     getActiveContent() {
-        const formData = this.form?.controls.content.value ?? {};
+        const formData = this.form()?.controls.content.value ?? {};
         return objectKeys(formData).reduce((result, key) => {
-            result[key] = formData[key] ? this.configuration?.content?.[key].template ?? '' : '';
+            result[key] = formData[key] ? this.configuration()?.content?.[key].template ?? '' : '';
             return result;
         }, {});
     }
     getActiveInputs() {
-        const formData = this.form?.controls.properties.value ?? {};
+        const formData = this.form()?.controls.properties.value ?? {};
         return objectKeys(formData).reduce((result, key) => {
-            const inputName = this.properties?.[key]?.inputName ?? key;
+            const inputName = this.properties()?.[key]?.inputName ?? key;
             const value = formData[key];
             const property = this.demoRef?.instance?.defaultValues[key];
             if (property !== value) {
@@ -99,7 +132,7 @@ class NgDocPlaygroundDemoComponent {
         }, {});
     }
     getPipeActiveInputs() {
-        const formData = this.form?.controls.properties.value ?? {};
+        const formData = this.form()?.controls.properties.value ?? {};
         let changedInputIndex = -1;
         return objectKeys(formData)
             .map((key, i) => {
@@ -120,152 +153,260 @@ class NgDocPlaygroundDemoComponent {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPlaygroundDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocPlaygroundDemoComponent, isStandalone: true, selector: "ng-doc-playground-demo", inputs: { id: "id", pipeName: "pipeName", selector: "selector", configuration: "configuration", properties: "properties", recreateDemo: "recreateDemo", form: "form", expanded: "expanded" }, viewQueries: [{ propertyName: "demoOutlet", first: true, predicate: ["demoOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-doc-demo-displayer [code]=\"code\" [border]=\"false\" [expanded]=\"expanded\" language=\"angular-html\">\n  <ng-container #demoOutlet></ng-container>\n</ng-doc-demo-displayer>\n", styles: [":host{display:block;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:hidden}:host:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}\n"], dependencies: [{ kind: "component", type: NgDocDemoDisplayerComponent, selector: "ng-doc-demo-displayer", inputs: ["codeContent", "code", "language", "container", "border", "expanded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPlaygroundDemoComponent, decorators: [{
+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 [code]=\"code\" [border]=\"false\" [expanded]=\"expanded\" language=\"angular-html\">\n  <ng-container #demoOutlet></ng-container>\n</ng-doc-demo-displayer>\n", styles: [":host{display:block;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:hidden}:host:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], pipeName: [{
-                type: Input
-            }], selector: [{
-                type: Input
-            }], configuration: [{
-                type: Input
-            }], properties: [{
-                type: Input
-            }], recreateDemo: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], expanded: [{
-                type: Input
-            }], demoOutlet: [{
-                type: ViewChild,
-                args: ['demoOutlet', { static: true, read: ViewContainerRef }]
-            }] } });
+            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', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }] } });
 
+let nextId = 0;
+/** Value types that have a chip colour. */
+const CHIP_TYPES = new Set([
+    'string',
+    'number',
+    'boolean',
+    'object',
+    'null',
+    'undefined',
+]);
+/**
+ * One row of the playground inspector: the input's name with its type chip, and the type
+ * control that edits it, bound to the input's form control.
+ */
 class NgDocPlaygroundPropertyComponent {
     constructor() {
-        this.name = '';
-    }
-    ngOnChanges({ property, control, typeControl, defaultValue }) {
-        if ((property || control || typeControl || defaultValue) && this.property && this.typeControl) {
-            this.propertyTypeControl?.destroy();
-            this.propertyTypeControl = undefined;
-            if (this.typeControl && this.propertyOutlet) {
-                this.propertyTypeControl = this.propertyOutlet.createComponent(this.typeControl.control);
-                this.propertyTypeControl.instance.name = this.name;
-                this.propertyTypeControl.instance.description = this.tooltipContent;
-                this.propertyTypeControl.instance.options = isPlaygroundProperty(this.property)
-                    ? this.property.options
-                    : undefined;
-                this.propertyTypeControl.instance.default = this.defaultValue;
-                this.propertyTypeControl.instance.isManual = isPlaygroundProperty(this.property)
-                    ? this.property.isManual
-                    : undefined;
-                this.propertyTypeControl.instance.writeValue(this.control?.value);
-                this.option = this.typeControl.options;
-            }
-            if (this.control) {
-                this.control?.registerOnChange((value) => this.propertyTypeControl?.instance?.writeValue(value));
-                this.propertyTypeControl?.instance.registerOnChange((value) => this.control?.setValue(value));
-                this.propertyTypeControl?.instance.registerOnTouched(() => this.control?.markAsTouched());
+        /** Name of the input. */
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        /** The input, or the content slot. */
+        this.property = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "property" }] : /* istanbul ignore next */ []));
+        /** The type control that edits the input. */
+        this.typeControl = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typeControl" }] : /* istanbul ignore next */ []));
+        /** Form control of the input. */
+        this.control = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        /** Default value of the input. */
+        this.defaultValue = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
+        /** Whether a type control is rendered. */
+        this.hasPropertyControl = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasPropertyControl" }] : /* istanbul ignore next */ []));
+        /** Description of the input, shown in the tooltip of its name. */
+        this.tooltipContent = computed(() => {
+            const property = this.property();
+            return property && isPlaygroundProperty(property) ? property.description ?? '' : '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipContent" }] : /* istanbul ignore next */ []));
+        /** Options of the type control provider. */
+        this.option = computed(() => this.typeControl()?.options, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "option" }] : /* istanbul ignore next */ []));
+        /** 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 */ []));
+        /** 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 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();
+            if (outlet) {
+                untracked(() => this.createControl(outlet, property, typeControl, control, defaultValue));
             }
+        });
+        inject(DestroyRef).onDestroy(() => this.propertyTypeControl?.destroy());
+    }
+    createControl(outlet, property, typeControl, formControl, defaultValue) {
+        if (!property || !typeControl) {
+            return;
         }
+        this.propertyTypeControl?.destroy();
+        const control = outlet.createComponent(typeControl.control);
+        this.propertyTypeControl = control;
+        setTypeControlField(control, 'name', this.name());
+        setTypeControlField(control, 'description', this.tooltipContent());
+        setTypeControlField(control, 'options', isPlaygroundProperty(property) ? property.options : undefined);
+        setTypeControlField(control, 'default', defaultValue);
+        setTypeControlField(control, 'isManual', isPlaygroundProperty(property) ? property.isManual : undefined);
+        control.instance.writeValue(formControl?.value);
+        if (formControl) {
+            formControl.registerOnChange((value) => control.instance.writeValue(value));
+            control.instance.registerOnChange((value) => formControl.setValue(value));
+            control.instance.registerOnTouched(() => formControl.markAsTouched());
+        }
+        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: "@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,
+            args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgDocLabelComponent,
+                        NgDocTooltipDirective,
+                        NgDocSanitizeHtmlPipe,
+                        NgDocKindIconComponent,
+                        NgTemplateOutlet,
+                    ], host: {
+                        '[attr.data-has-property-control]': 'hasPropertyControl()',
+                    }, 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.
+ * @param property - The input or the content slot.
+ */
+function valueType(property) {
+    if (!property) {
+        return '';
+    }
+    if (!isPlaygroundProperty(property)) {
+        return 'boolean';
     }
-    get hasPropertyControl() {
-        return !!this.propertyTypeControl;
+    if (CHIP_TYPES.has(property.type)) {
+        return property.type;
     }
-    get tooltipContent() {
-        return this.property && isPlaygroundProperty(this.property)
-            ? this.property.description ?? ''
-            : '';
+    const option = property.options?.[0];
+    if (option !== undefined) {
+        try {
+            const type = typeof resolvePlaygroundOption(option, property.isManual).value;
+            return CHIP_TYPES.has(type) ? type : '';
+        }
+        catch {
+            return '';
+        }
+    }
+    return '';
+}
+/**
+ * Sets a field of a type control: through `ComponentRef.setInput()` when the control declares it
+ * as an input (a signal input or a decorator input), otherwise by assigning the plain field.
+ * @param control - The created type control.
+ * @param field - Name of the field.
+ * @param value - Value to set.
+ */
+function setTypeControlField(control, field, value) {
+    const input = reflectComponentType(control.componentType)?.inputs.find(({ propName }) => propName === field);
+    if (input) {
+        control.setInput(input.templateName, value);
+    }
+    else {
+        control.instance[field] = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocPlaygroundPropertyComponent, isStandalone: true, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", typeControl: "typeControl", control: "control", defaultValue: "defaultValue" }, host: { properties: { "attr.data-has-property-control": "this.hasPropertyControl" } }, viewQueries: [{ propertyName: "propertyOutlet", first: true, predicate: ["propertyOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span\n\t\t\t[ngDocTooltip]=\"tooltipTemplate\"\n\t\t\t[canOpen]=\"!!tooltipContent\"\n\t\t\t[positions]=\"['left-center', 'top-right', 'bottom-right']\"\n\t\t\t>{{ name }}</span\n\t\t>\n\t\t<ng-template #tooltipTemplate>\n\t\t\t<div [innerHTML]=\"tooltipContent | ngDocSanitizeHtml\"></div>\n\t\t</ng-template>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\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: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPlaygroundPropertyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocLabelComponent, NgDocTooltipDirective, NgDocSanitizeHtmlPipe], template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span\n\t\t\t[ngDocTooltip]=\"tooltipTemplate\"\n\t\t\t[canOpen]=\"!!tooltipContent\"\n\t\t\t[positions]=\"['left-center', 'top-right', 'bottom-right']\"\n\t\t\t>{{ name }}</span\n\t\t>\n\t\t<ng-template #tooltipTemplate>\n\t\t\t<div [innerHTML]=\"tooltipContent | ngDocSanitizeHtml\"></div>\n\t\t</ng-template>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"] }]
-        }], propDecorators: { name: [{
-                type: Input
-            }], property: [{
-                type: Input
-            }], typeControl: [{
-                type: Input
-            }], control: [{
-                type: Input
-            }], defaultValue: [{
-                type: Input
-            }], propertyOutlet: [{
-                type: ViewChild,
-                args: ['propertyOutlet', { read: ViewContainerRef, static: true }]
-            }], hasPropertyControl: [{
-                type: HostBinding,
-                args: ['attr.data-has-property-control']
-            }] } });
 
+/**
+ * Orders inputs without an `order` by name in English whatever the locale, so a prerendered
+ * playground does not depend on the machine that built it.
+ */
+const INPUT_ORDER = new Intl.Collator('en');
+/**
+ * The playground inspector: the demos, and beside them (below them in a container narrower than
+ * 640px) the Recreate setting and a control per input and content slot.
+ */
 class NgDocPlaygroundPropertiesComponent {
     constructor() {
-        this.breakpointObserver = inject(BreakpointObserver);
         this.injector = inject(Injector);
-        this.ignoreInputs = [];
-        this.hideSidePanel = false;
-        this.recreateDemo = false;
-        this.showResetButton = false;
-        this.recreateDemoChange = new EventEmitter();
-        this.resetForm = new EventEmitter();
-        this.breakpoints = [Breakpoints.XSmall];
-        this.propertyControls = [];
-        this.contentTypeControl = this.getControlForType('boolean');
-        this.observer = this.breakpointObserver
-            .observe(this.breakpoints)
-            .pipe(map((state) => state.matches));
-    }
-    ngOnChanges({ properties }) {
-        if (properties && this.properties) {
-            this.propertyControls = objectKeys(this.properties)
-                .filter((key) => this.ignoreInputs?.includes(String(key)) !== true)
+        /** The form of the playground. */
+        this.form = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        /** The inputs of the playground's target. */
+        this.properties = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []));
+        /** Inputs that get no control. */
+        this.ignoreInputs = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ignoreInputs" }] : /* istanbul ignore next */ []));
+        /** Content slots of the playground. */
+        this.dynamicContent = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dynamicContent" }] : /* istanbul ignore next */ []));
+        /** 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 inspector is hidden, leaving the demos only. */
+        this.hideSidePanel = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hideSidePanel" }] : /* istanbul ignore next */ []));
+        /** Where the inspector goes: right of the demos, or below them at full width. */
+        this.inspectorPosition = input('right', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inspectorPosition" }] : /* istanbul ignore next */ []));
+        /** 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 */ []));
+        /** Emits when the reader resets the form. */
+        this.resetForm = output();
+        /** The control of each input, in display order. */
+        this.propertyControls = computed(() => {
+            const properties = this.properties();
+            const ignoreInputs = this.ignoreInputs();
+            if (!properties) {
+                return [];
+            }
+            return objectKeys(properties)
+                .filter((key) => ignoreInputs?.includes(String(key)) !== true)
                 .map((key) => {
-                if (this.properties) {
-                    const property = this.properties[key];
-                    const typeControl = this.getTypeControl(property);
-                    if (typeControl) {
-                        return {
-                            propertyName: String(key),
-                            property,
-                            typeControl,
-                        };
-                    }
-                }
-                return null;
+                const property = properties[key];
+                const typeControl = this.getTypeControl(property);
+                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 a.property.inputName.localeCompare(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 ?? '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');
     }
+    /**
+     * The form control of an input or a content slot.
+     * @param controlType - `properties` or `content`.
+     * @param key - Name of the input or slot.
+     */
     getFormControl(controlType, key) {
-        return this.form.get(controlType)?.get(key);
+        return this.form().get(controlType)?.get(key);
     }
     getTypeControl(property) {
         const type = property.type;
+        const primitive = optionalPrimitive(type);
         const typeControl = this.getControlForType(type) ??
+            (primitive ? this.getControlForType(primitive) : undefined) ??
             this.getControlForTypeAlias(isPlaygroundProperty(property) ? property.options : undefined, property.isManual);
         if (!typeControl && isDevMode()) {
             console.warn(`NgDocPlayground didn't find the control for the @Input "${property.inputName}", the type "${type}" was not recognized'`);
@@ -279,14 +420,12 @@ class NgDocPlaygroundPropertiesComponent {
     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;
-                }
+            try {
+                // checking that all values are extractable
+                options.forEach((item) => resolvePlaygroundOption(item, isManual));
+            }
+            catch {
+                optionsIsValid = false;
             }
             if (optionsIsValid) {
                 const token = getTokenForType('NgDocTypeAlias');
@@ -295,211 +434,263 @@ class NgDocPlaygroundPropertiesComponent {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocPlaygroundPropertiesComponent, isStandalone: true, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", ignoreInputs: "ignoreInputs", dynamicContent: "dynamicContent", defaultValues: "defaultValues", hideSidePanel: "hideSidePanel", recreateDemo: "recreateDemo", showResetButton: "showResetButton" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, usesOnChanges: true, ngImport: i0, template: "@if (defaultValues) {\n  <div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\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 ng-doc-text>Playground</h4>\n          @if (showResetButton) {\n            <button ng-doc-button color=\"alert\" (click)=\"resetForm.emit()\">Reset</button>\n          }\n        </div>\n        <div class=\"ng-doc-playground-setting\">\n          <ng-doc-checkbox\n            [(ngModel)]=\"recreateDemo\"\n            (ngModelChange)=\"recreateDemoChange.emit($event)\">\n            <span\n              ng-doc-text\n              [ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n              [positions]=\"['bottom-right', 'left-center']\">\n              Recreate\n              <ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n            </span>\n          </ng-doc-checkbox>\n        </div>\n        <div class=\"ng-doc-playground-divider\"></div>\n        @if (propertyControls.length) {\n          <h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n          @for (propertyControl of propertyControls; track propertyControl) {\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        }\n        @if ((dynamicContent | keyvalue)?.length) {\n          <h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n          @for (content of dynamicContent | keyvalue; track content) {\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        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex;align-items:flex-start;gap:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical{flex-direction:column}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-demos{margin-right:0;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-properties{width:100%}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-demos{position:sticky;display:flex;flex-direction:column;width:100%;min-width:0;z-index:4;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter))}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;align-self:normal;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter);border:1px solid var(--ng-doc-border-color)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"], dependencies: [{ kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocButtonComponent, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: ["size", "color", "rounded"] }, { 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: "directive", type: NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control", "defaultValue"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }, 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(); 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        @if (!recreateLocked()) {\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        }\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\">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.0.6", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-playground-properties', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgDocTextComponent,
-                        NgDocButtonComponent,
                         NgDocCheckboxComponent,
                         FormsModule,
                         NgDocTooltipDirective,
                         NgDocIconComponent,
-                        NgDocTextRightDirective,
                         NgDocPlaygroundPropertyComponent,
-                        AsyncPipe,
                         KeyValuePipe,
                         NgDocBindPipe,
                         NgDocExecutePipe,
-                    ], template: "@if (defaultValues) {\n  <div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\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 ng-doc-text>Playground</h4>\n          @if (showResetButton) {\n            <button ng-doc-button color=\"alert\" (click)=\"resetForm.emit()\">Reset</button>\n          }\n        </div>\n        <div class=\"ng-doc-playground-setting\">\n          <ng-doc-checkbox\n            [(ngModel)]=\"recreateDemo\"\n            (ngModelChange)=\"recreateDemoChange.emit($event)\">\n            <span\n              ng-doc-text\n              [ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n              [positions]=\"['bottom-right', 'left-center']\">\n              Recreate\n              <ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n            </span>\n          </ng-doc-checkbox>\n        </div>\n        <div class=\"ng-doc-playground-divider\"></div>\n        @if (propertyControls.length) {\n          <h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n          @for (propertyControl of propertyControls; track propertyControl) {\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        }\n        @if ((dynamicContent | keyvalue)?.length) {\n          <h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n          @for (content of dynamicContent | keyvalue; track content) {\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        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex;align-items:flex-start;gap:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical{flex-direction:column}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-demos{margin-right:0;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-properties{width:100%}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-demos{position:sticky;display:flex;flex-direction:column;width:100%;min-width:0;z-index:4;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter))}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;align-self:normal;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter);border:1px solid var(--ng-doc-border-color)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { form: [{
-                type: Input
-            }], properties: [{
-                type: Input
-            }], ignoreInputs: [{
-                type: Input
-            }], dynamicContent: [{
-                type: Input
-            }], defaultValues: [{
-                type: Input
-            }], hideSidePanel: [{
-                type: Input
-            }], recreateDemo: [{
-                type: Input
-            }], showResetButton: [{
-                type: Input
-            }], recreateDemoChange: [{
-                type: Output
-            }], resetForm: [{
-                type: Output
-            }] } });
+                    ], 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        @if (!recreateLocked()) {\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        }\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\">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"] }], 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 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.
+ * @param type - The input type as the builder printed it.
+ * @returns The primitive, or `undefined` when the type is not one.
+ */
+function optionalPrimitive(type) {
+    const members = type.split('|').map((member) => member.trim());
+    const rest = members.filter((member) => member !== 'undefined' && member !== 'null');
+    return rest.length === 1 && rest.length < members.length && PRIMITIVE_TYPES.has(rest[0])
+        ? rest[0]
+        : undefined;
+}
 
+/**
+ * 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.
+ */
 class NgDocPlaygroundComponent {
     constructor() {
         this.rootPage = inject(NgDocRootPage);
         this.formBuilder = inject(FormBuilder);
-        this.id = '';
-        this.pipeName = '';
-        this.selectors = [];
-        this.options = {};
-        this.recreateDemo = false;
+        /** The name of the playground in the page configuration. */
+        this.id = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        /** The name of the pipe, when the target is a pipe. */
+        this.pipeName = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pipeName" }] : /* istanbul ignore next */ []));
+        /** The selectors of the target to render a demo for. */
+        this.selectors = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectors" }] : /* istanbul ignore next */ []));
+        /** The inputs of the target. */
+        this.properties = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "properties" }] : /* istanbul ignore next */ []));
+        /** Options of the playground action; they extend the playground configuration. */
+        this.options = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** The values of the inputs and content slots. */
+        this.formGroup = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        /** The default values of the target's inputs, reported by the first demo. */
+        this.defaultValues = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultValues" }] : /* istanbul ignore next */ []));
+        /** 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 */ []));
         this.defaultProperties = {};
         this.defaultContent = {};
     }
-    ngOnChanges({ options }) {
-        if (options) {
-            // Join configuration with options
-            this.configuration = Object.assign({}, this.rootPage.page?.playgrounds?.[this.id], this.options);
-        }
-    }
     ngAfterViewInit() {
         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);
-        this.formGroup = this.formBuilder.group({
+        const formGroup = this.formBuilder.group({
             properties: propertiesForm,
             content: contentForm,
         });
         // `patchValue` is needed to set `undefined` values, otherwise they will be ignored by the Angular form
-        this.formGroup.patchValue({
-            properties: Object.assign({}, this.defaultProperties, this.configuration.inputs),
+        formGroup.patchValue({
+            properties: Object.assign({}, this.defaultProperties, this.configuration().inputs),
             content: this.defaultContent,
         });
+        this.formGroup.set(formGroup);
     }
     isDefaultState() {
-        if (!this.formGroup) {
+        const formGroup = this.formGroup();
+        if (!formGroup) {
             return false;
         }
-        return (isSameObject(this.formGroup.value.properties ?? {}, this.defaultValues ?? {}) &&
-            isSameObject(this.formGroup.value.content ?? {}, this.defaultContent ?? {}));
+        return (isSameObject(formGroup.value.properties ?? {}, this.defaultValues() ?? {}) &&
+            isSameObject(formGroup.value.content ?? {}, this.defaultContent ?? {}));
     }
     getPropertiesFormValues() {
-        const formValues = objectKeys(this.properties ?? {}).reduce((controls, key) => {
-            if (this.properties) {
-                controls[key] = this.defaultValues ? this.defaultValues[key] : undefined;
-            }
+        const defaultValues = this.defaultValues();
+        const formValues = objectKeys(this.properties() ?? {}).reduce((controls, key) => {
+            controls[key] = defaultValues ? defaultValues[key] : undefined;
             return controls;
         }, {});
-        return Object.assign({}, formValues, this.configuration.defaults);
+        return Object.assign({}, formValues, this.configuration().defaults);
     }
     getContentFormValues() {
-        return objectKeys(this.configuration?.content ?? {}).reduce((controls, key) => {
-            if (this.configuration?.content) {
-                controls[key] = false;
-            }
+        return objectKeys(this.configuration().content ?? {}).reduce((controls, key) => {
+            controls[key] = false;
             return controls;
         }, {});
     }
+    /** Sets every input and content slot back to its default value. */
     resetForm() {
-        this.formGroup.reset({}, { emitEvent: false });
-        this.formGroup?.patchValue({
+        const formGroup = this.formGroup();
+        formGroup?.reset({}, { emitEvent: false });
+        formGroup?.patchValue({
             properties: this.defaultProperties,
             content: this.defaultContent,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocPlaygroundComponent, isStandalone: true, selector: "ng-doc-playground", inputs: { id: "id", pipeName: "pipeName", selectors: "selectors", properties: "properties", options: "options" }, usesOnChanges: true, ngImport: i0, template: "@if (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    [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)}\n"], dependencies: [{ kind: "component", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "ignoreInputs", "dynamicContent", "defaultValues", "hideSidePanel", "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.ɵ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    [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      </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", "recreateLocked", "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPlaygroundComponent, decorators: [{
+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) {\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    [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)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{
-                type: Input,
-                args: [{ required: true }]
-            }], pipeName: [{
-                type: Input
-            }], selectors: [{
-                type: Input
-            }], properties: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }] } });
+            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    [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      </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 }] }] } });
 
 /**
- * Base class for playgrounds components.
+ * Base class of the playground classes the builder generates, one per playground and selector.
+ * A generated class renders the playground template with the target's inputs bound to
+ * `properties()`, and queries the target with `viewChild()`.
  */
 class NgDocBasePlayground {
     static { this.selector = 'unknown'; }
-    constructor(playgroundInstance) {
-        this.playgroundInstance = playgroundInstance;
-        this.properties = {};
-        this.actionData = {};
-        this.content = {};
+    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(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();
     }
+    /** 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() {
-        /*
-         * Extract default values from playground properties. We do this in `ngOnInit` because in this case
-         * input values provided from the template are not initialized yet, and we can read default values instead.
-         */
-        if (this.playground) {
-            this.defaultValues = Object.keys(this.playground).reduce((values, key) => {
-                if (this.playground) {
-                    try {
-                        values[key] =
-                            // @ts-expect-error we do not know the type of the playground
-                            typeof this.playground[key] === 'function'
-                                ? // @ts-expect-error we do not know the type of the playground
-                                    this.playground[key]()
-                                : // @ts-expect-error we do not know the type of the playground
-                                    this.playground[key];
-                    }
-                    catch (e) {
-                        // we do catch here because some of the playground properties can be getters and throw an error
-                    }
+        // 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.playgroundInstance) {
-            const defaults = extractFunctionDefaults(this.playgroundInstance.prototype.transform);
-            this.defaultValues = Object.keys(this.playgroundContainer.properties ?? {}).reduce((def, key, i) => {
-                // we do +1 because the first argument is the `value` of the transform function
-                def[key] = defaults[i + 1];
-                return def;
+        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 = this.defaultValues;
+        if (!this.playgroundContainer.defaultValues()) {
+            this.playgroundContainer.defaultValues.set(this.defaultValues);
         }
-        /*
-                 This is a hack just to wait for the playground container to be initialized and only then
-                 attach the change detector to have correct inputs values.
-             */
+        // 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();
         });
     }
-    get data() {
-        return Object.assign({}, this.configData, this.actionData);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocBasePlayground, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: NgDocBasePlayground, isStandalone: true, inputs: { properties: "properties", actionData: "actionData", content: "content" }, ngImport: i0 }); }
+    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.0.6", ngImport: i0, type: NgDocBasePlayground, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBasePlayground, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: undefined }], propDecorators: { properties: [{
-                type: Input
-            }], actionData: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }] } });
+        }], 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.