@ng-doc/app 16.2.1 → 16.3.0-beta.1

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

@@ -1,27 +1,23 @@
 import * as i0 from '@angular/core';
-import { Directive, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, EventEmitter, isDevMode, Output, ChangeDetectorRef, Injector, NgModule } from '@angular/core';
-import * as i3 from '@angular/forms';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import * as i1$2 from '@ng-doc/app/classes/root-page';
+import { Directive, ChangeDetectorRef, ViewContainerRef, Injector, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, EventEmitter, isDevMode, Output } from '@angular/core';
+import { AsyncPipe, NgIf, NgFor, KeyValuePipe } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$1 from '@ng-doc/app/classes/root-page';
 import { extractValue } from '@ng-doc/core/helpers/extract-value';
-import { objectKeys as objectKeys$1 } from '@ng-doc/core/helpers/object-keys';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
-import { isPlaygroundProperty, getTokenForType, getPlaygroundDemoToken } from '@ng-doc/app/helpers';
-import { objectKeys, isPresent, extractValueOrThrow } from '@ng-doc/core';
-import { pluck, takeUntil } from 'rxjs/operators';
-import * as i4 from '@ng-doc/ui-kit';
-import { NgDocLabelModule, NgDocTooltipModule, NgDocAsArrayModule, NgDocButtonIconModule, NgDocIconModule, NgDocTextModule, NgDocCheckboxModule, NgDocButtonModule, NgDocBindModule, NgDocRunModule } from '@ng-doc/ui-kit';
+import { objectKeys } from '@ng-doc/core/helpers/object-keys';
+import { NgDocLabelComponent, NgDocTooltipDirective, NgDocTextComponent, NgDocButtonComponent, NgDocCheckboxComponent, NgDocIconComponent, NgDocTextRightDirective, NgDocBindPipe, NgDocRunPipe, NgDocAsArrayPipe } from '@ng-doc/ui-kit';
 import { __decorate, __metadata } from 'tslib';
+import { NgDocDemoDisplayerComponent } from '@ng-doc/app/components/demo-displayer';
+import { getPlaygroundDemoToken, isPlaygroundProperty, getTokenForType } from '@ng-doc/app/helpers';
 import { buildPlaygroundDemoTemplate } from '@ng-doc/core/helpers/build-playground-demo-template';
 import { formatHtml } from '@ng-doc/core/helpers/format-html';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { of, Subject } from 'rxjs';
-import * as i1$1 from '@ng-doc/app/components/demo-displayer';
-import { NgDocDemoDisplayerModule } from '@ng-doc/app/components/demo-displayer';
-import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import { takeUntil, pluck } from 'rxjs/operators';
+import * as i1 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import { objectKeys as objectKeys$1, isPresent, extractValueOrThrow } from '@ng-doc/core';
 
 /**
  * Base class for playgrounds components.
@@ -39,6 +35,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             type: Directive
         }] });
 
+let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
+    constructor(injector) {
+        this.injector = injector;
+        this.id = '';
+        this.selector = '';
+        this.recreateDemo = false;
+        this.code = of('');
+        this.unsubscribe$ = new Subject();
+    }
+    ngOnChanges({ form, id }) {
+        if (form && id) {
+            this.unsubscribe$.next();
+            const demoInjector = getPlaygroundDemoToken(this.id);
+            if (demoInjector) {
+                const demos = this.injector.get(demoInjector, []);
+                this.playgroundDemo = demos.find((demo) => demo.selector === this.selector);
+            }
+            this.updateDemo();
+            this.form?.valueChanges
+                .pipe(takeUntil(this.unsubscribe$), untilDestroyed(this))
+                .subscribe((data) => this.updateDemo(data));
+        }
+    }
+    updateDemo(data) {
+        if (this.recreateDemo || !this.demoRef) {
+            this.renderDemo();
+        }
+        if (data) {
+            Object.assign(this.demoRef?.instance.playground ?? {}, data.properties);
+            Object.assign(this.demoRef?.instance.content ?? {}, data.content);
+            this.demoRef?.instance?.viewContainerRef?.injector.get(ChangeDetectorRef)?.markForCheck();
+        }
+        this.updateCodeView();
+    }
+    renderDemo() {
+        if (this.playgroundDemo) {
+            this.demoRef?.destroy();
+            if (this.playgroundDemo) {
+                this.demoRef = this.demoOutlet?.createComponent(this.playgroundDemo);
+            }
+            this.demoRef?.changeDetectorRef.markForCheck();
+        }
+    }
+    updateCodeView() {
+        const template = buildPlaygroundDemoTemplate(this.configuration?.template ?? '', this.selector, this.getActiveContent(), this.getActiveInputs());
+        this.code = formatHtml(template);
+    }
+    getActiveContent() {
+        const formData = this.form?.controls.content.value ?? {};
+        return objectKeys(formData).reduce((result, key) => {
+            result[key] = formData[key] ? this.configuration?.content?.[key].template ?? '' : '';
+            return result;
+        }, {});
+    }
+    getActiveInputs() {
+        const formData = this.form?.controls.properties.value ?? {};
+        return objectKeys(formData).reduce((result, key) => {
+            const property = this.properties?.[key];
+            if (property) {
+                const value = formData[key];
+                const isString = typeof value === 'string';
+                const inputValue = isString ? `'${value}'` : `${JSON.stringify(value)}`;
+                if ((property.default ?? '') !== inputValue) {
+                    result[property.name] = inputValue;
+                }
+            }
+            return result;
+        }, {});
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundDemoComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundDemoComponent, isStandalone: true, selector: "ng-doc-playground-demo", inputs: { id: "id", selector: "selector", configuration: "configuration", properties: "properties", recreateDemo: "recreateDemo", form: "form" }, viewQueries: [{ propertyName: "demoOutlet", first: true, predicate: ["demoOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-doc-demo-displayer [code]=\"(code | async) ?? ''\" [border]=\"false\" language=\"html\">\n\t<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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+NgDocPlaygroundDemoComponent = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [Injector])
+], NgDocPlaygroundDemoComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-playground-demo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgDocDemoDisplayerComponent, AsyncPipe], template: "<ng-doc-demo-displayer [code]=\"(code | async) ?? ''\" [border]=\"false\" language=\"html\">\n\t<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"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { id: [{
+                type: Input
+            }], selector: [{
+                type: Input
+            }], configuration: [{
+                type: Input
+            }], properties: [{
+                type: Input
+            }], recreateDemo: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], demoOutlet: [{
+                type: ViewChild,
+                args: ['demoOutlet', { static: true, read: ViewContainerRef }]
+            }] } });
+
 class NgDocPlaygroundPropertyComponent {
     constructor() {
         this.name = '';
@@ -74,11 +170,11 @@ class NgDocPlaygroundPropertyComponent {
         return this.property && isPlaygroundProperty(this.property) ? this.property.description ?? '' : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", typeControl: "typeControl", control: "control" }, 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 [ngDocTooltip]=\"tooltipContent\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\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: i4.NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: i4.NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundPropertyComponent, isStandalone: true, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", typeControl: "typeControl", control: "control" }, 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]=\"tooltipContent\"\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</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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundPropertyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span [ngDocTooltip]=\"tooltipContent\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\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"] }]
+            args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgDocLabelComponent, NgDocTooltipDirective], template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span\n\t\t\t[ngDocTooltip]=\"tooltipContent\"\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</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: [{
@@ -109,7 +205,7 @@ class NgDocPlaygroundPropertiesComponent {
     }
     ngOnChanges({ properties }) {
         if (properties && this.properties) {
-            this.propertyControls = objectKeys(this.properties)
+            this.propertyControls = objectKeys$1(this.properties)
                 .map((key) => {
                 if (this.properties) {
                     const property = this.properties[key];
@@ -175,11 +271,26 @@ class NgDocPlaygroundPropertiesComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", dynamicContent: "dynamicContent", recreateDemo: "recreateDemo" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"propertyControls.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let propertyControl of propertyControls\"\n\t\t\t\t[name]=\"propertyControl.property.name\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'properties': propertyControl.propertyName\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[typeControl]=\"contentTypeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'content': content.key\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}: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{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;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)}: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: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: i4.NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "size"] }, { kind: "component", type: i4.NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: i4.NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "component", type: i4.NgDocCheckboxComponent, selector: "ng-doc-checkbox", inputs: ["color"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.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: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i4.NgDocBindPipe, name: "ngDocBind" }, { kind: "pipe", type: i4.NgDocRunPipe, name: "ngDocRun" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundPropertiesComponent, isStandalone: true, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", dynamicContent: "dynamicContent", recreateDemo: "recreateDemo" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"propertyControls.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let propertyControl of propertyControls\"\n\t\t\t\t[name]=\"propertyControl.property.name\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'properties': propertyControl.propertyName\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[typeControl]=\"contentTypeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'content': content.key\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}: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{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;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)}: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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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", "size"] }, { kind: "directive", type: NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: NgDocBindPipe, name: "ngDocBind" }, { kind: "pipe", type: NgDocRunPipe, name: "ngDocRun" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground-properties', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"propertyControls.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let propertyControl of propertyControls\"\n\t\t\t\t[name]=\"propertyControl.property.name\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'properties': propertyControl.propertyName\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[typeControl]=\"contentTypeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'content': content.key\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}: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{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;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)}: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"] }]
+            args: [{ selector: 'ng-doc-playground-properties', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgDocTextComponent,
+                        NgDocButtonComponent,
+                        NgDocCheckboxComponent,
+                        FormsModule,
+                        NgDocTooltipDirective,
+                        NgDocIconComponent,
+                        NgDocTextRightDirective,
+                        NgIf,
+                        NgFor,
+                        NgDocPlaygroundPropertyComponent,
+                        AsyncPipe,
+                        KeyValuePipe,
+                        NgDocBindPipe,
+                        NgDocRunPipe,
+                    ], template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"propertyControls.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let propertyControl of propertyControls\"\n\t\t\t\t[name]=\"propertyControl.property.name\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'properties': propertyControl.propertyName\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[typeControl]=\"contentTypeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'content': content.key\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}: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{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;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)}: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: function () { return [{ type: i1.BreakpointObserver }, { type: i0.Injector }]; }, propDecorators: { form: [{
                 type: Input
             }], properties: [{
@@ -194,106 +305,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Output
             }] } });
 
-let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
-    constructor(injector) {
-        this.injector = injector;
-        this.id = '';
-        this.selector = '';
-        this.recreateDemo = false;
-        this.code = of('');
-        this.unsubscribe$ = new Subject();
-    }
-    ngOnChanges({ form, id }) {
-        if (form && id) {
-            this.unsubscribe$.next();
-            const demoInjector = getPlaygroundDemoToken(this.id);
-            if (demoInjector) {
-                const demos = this.injector.get(demoInjector, []);
-                this.playgroundDemo = demos.find((demo) => demo.selector === this.selector);
-            }
-            this.updateDemo();
-            this.form?.valueChanges
-                .pipe(takeUntil(this.unsubscribe$), untilDestroyed(this))
-                .subscribe((data) => this.updateDemo(data));
-        }
-    }
-    updateDemo(data) {
-        if (this.recreateDemo || !this.demoRef) {
-            this.renderDemo();
-        }
-        if (data) {
-            Object.assign(this.demoRef?.instance.playground ?? {}, data.properties);
-            Object.assign(this.demoRef?.instance.content ?? {}, data.content);
-            this.demoRef?.instance?.viewContainerRef?.injector.get(ChangeDetectorRef)?.markForCheck();
-        }
-        this.updateCodeView();
-    }
-    renderDemo() {
-        if (this.playgroundDemo) {
-            this.demoRef?.destroy();
-            if (this.playgroundDemo) {
-                this.demoRef = this.demoOutlet?.createComponent(this.playgroundDemo);
-            }
-            this.demoRef?.changeDetectorRef.markForCheck();
-        }
-    }
-    updateCodeView() {
-        const template = buildPlaygroundDemoTemplate(this.configuration?.template ?? '', this.selector, this.getActiveContent(), this.getActiveInputs());
-        this.code = formatHtml(template);
-    }
-    getActiveContent() {
-        const formData = this.form?.controls.content.value ?? {};
-        return objectKeys$1(formData).reduce((result, key) => {
-            result[key] = formData[key] ? this.configuration?.content?.[key].template ?? '' : '';
-            return result;
-        }, {});
-    }
-    getActiveInputs() {
-        const formData = this.form?.controls.properties.value ?? {};
-        return objectKeys$1(formData).reduce((result, key) => {
-            const property = this.properties?.[key];
-            if (property) {
-                const value = formData[key];
-                const isString = typeof value === 'string';
-                const inputValue = isString ? `'${value}'` : `${JSON.stringify(value)}`;
-                if ((property.default ?? '') !== inputValue) {
-                    result[property.name] = inputValue;
-                }
-            }
-            return result;
-        }, {});
-    }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundDemoComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundDemoComponent, selector: "ng-doc-playground-demo", inputs: { id: "id", selector: "selector", configuration: "configuration", properties: "properties", recreateDemo: "recreateDemo", form: "form" }, viewQueries: [{ propertyName: "demoOutlet", first: true, predicate: ["demoOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-doc-demo-displayer [code]=\"(code | async) ?? ''\" [border]=\"false\" language=\"html\">\n\t<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: i1$1.NgDocDemoDisplayerComponent, selector: "ng-doc-demo-displayer", inputs: ["codeContent", "code", "language", "container", "border", "expanded"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-NgDocPlaygroundDemoComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [Injector])
-], NgDocPlaygroundDemoComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundDemoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng-doc-playground-demo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-doc-demo-displayer [code]=\"(code | async) ?? ''\" [border]=\"false\" language=\"html\">\n\t<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"] }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { id: [{
-                type: Input
-            }], selector: [{
-                type: Input
-            }], configuration: [{
-                type: Input
-            }], properties: [{
-                type: Input
-            }], recreateDemo: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], demoOutlet: [{
-                type: ViewChild,
-                args: ['demoOutlet', { static: true, read: ViewContainerRef }]
-            }] } });
-
 class NgDocPlaygroundComponent {
     constructor(rootPage, formBuilder) {
         this.rootPage = rootPage;
@@ -311,10 +322,10 @@ class NgDocPlaygroundComponent {
         });
     }
     get configuration() {
-        return this.rootPage.dependencies?.playgrounds?.[this.id];
+        return this.rootPage.page?.playgrounds?.[this.id];
     }
     getPropertiesFormValues() {
-        return objectKeys$1(this.properties ?? {}).reduce((controls, key) => {
+        return objectKeys(this.properties ?? {}).reduce((controls, key) => {
             if (this.properties) {
                 controls[key] = extractValue(this.properties[key]?.default ?? 'undefined');
             }
@@ -322,7 +333,7 @@ class NgDocPlaygroundComponent {
         }, {});
     }
     getContentFormValues() {
-        return objectKeys$1(this.configuration?.content ?? {}).reduce((controls, key) => {
+        return objectKeys(this.configuration?.content ?? {}).reduce((controls, key) => {
             if (this.configuration?.content) {
                 controls[key] = false;
             }
@@ -336,91 +347,17 @@ class NgDocPlaygroundComponent {
             content: this.getContentFormValues(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundComponent, deps: [{ token: i1$2.NgDocRootPage }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundComponent, selector: "ng-doc-playground", ngImport: i0, template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties\n\t\t[form]=\"formGroup\"\n\t\t[properties]=\"properties\"\n\t\t[dynamicContent]=\"configuration.content\"\n\t\t[(recreateDemo)]=\"recreateDemo\"\n\t\t(resetForm)=\"resetForm()\"\n\t>\n\t\t<ng-doc-playground-demo\n\t\t\t*ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n\t\t\t[id]=\"id\"\n\t\t\t[selector]=\"selector\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t>\n\t\t</ng-doc-playground-demo>\n\t</ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "dynamicContent", "recreateDemo"], outputs: ["recreateDemoChange", "resetForm"] }, { kind: "component", type: NgDocPlaygroundDemoComponent, selector: "ng-doc-playground-demo", inputs: ["id", "selector", "configuration", "properties", "recreateDemo", "form"] }, { kind: "pipe", type: i4.NgDocAsArrayPipe, name: "asArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundComponent, deps: [{ token: i1$1.NgDocRootPage }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundComponent, isStandalone: true, selector: "ng-doc-playground", ngImport: i0, template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties\n\t\t[form]=\"formGroup\"\n\t\t[properties]=\"properties\"\n\t\t[dynamicContent]=\"configuration.content\"\n\t\t[(recreateDemo)]=\"recreateDemo\"\n\t\t(resetForm)=\"resetForm()\"\n\t>\n\t\t<ng-doc-playground-demo\n\t\t\t*ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n\t\t\t[id]=\"id\"\n\t\t\t[selector]=\"selector\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t>\n\t\t</ng-doc-playground-demo>\n\t</ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "dynamicContent", "recreateDemo"], outputs: ["recreateDemoChange", "resetForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NgDocPlaygroundDemoComponent, selector: "ng-doc-playground-demo", inputs: ["id", "selector", "configuration", "properties", "recreateDemo", "form"] }, { kind: "pipe", type: NgDocAsArrayPipe, name: "asArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties\n\t\t[form]=\"formGroup\"\n\t\t[properties]=\"properties\"\n\t\t[dynamicContent]=\"configuration.content\"\n\t\t[(recreateDemo)]=\"recreateDemo\"\n\t\t(resetForm)=\"resetForm()\"\n\t>\n\t\t<ng-doc-playground-demo\n\t\t\t*ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n\t\t\t[id]=\"id\"\n\t\t\t[selector]=\"selector\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t>\n\t\t</ng-doc-playground-demo>\n\t</ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.NgDocRootPage }, { type: i3.FormBuilder }]; } });
-
-class NgDocPlaygroundModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundModule, declarations: [NgDocPlaygroundComponent,
-            NgDocPlaygroundPropertyComponent,
-            NgDocPlaygroundPropertiesComponent,
-            NgDocPlaygroundDemoComponent], imports: [CommonModule,
-            ReactiveFormsModule,
-            NgDocLabelModule,
-            NgDocTooltipModule,
-            PolymorpheusModule,
-            NgDocAsArrayModule,
-            NgDocButtonIconModule,
-            NgDocIconModule,
-            NgDocTextModule,
-            NgDocCheckboxModule,
-            FormsModule,
-            NgDocButtonModule,
-            NgDocDemoDisplayerModule,
-            NgDocBindModule,
-            NgDocRunModule], exports: [NgDocPlaygroundComponent,
-            NgDocPlaygroundPropertyComponent,
-            NgDocPlaygroundPropertiesComponent,
-            NgDocPlaygroundDemoComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundModule, imports: [CommonModule,
-            ReactiveFormsModule,
-            NgDocLabelModule,
-            NgDocTooltipModule,
-            PolymorpheusModule,
-            NgDocAsArrayModule,
-            NgDocButtonIconModule,
-            NgDocIconModule,
-            NgDocTextModule,
-            NgDocCheckboxModule,
-            FormsModule,
-            NgDocButtonModule,
-            NgDocDemoDisplayerModule,
-            NgDocBindModule,
-            NgDocRunModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        NgDocPlaygroundComponent,
-                        NgDocPlaygroundPropertyComponent,
-                        NgDocPlaygroundPropertiesComponent,
-                        NgDocPlaygroundDemoComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        NgDocLabelModule,
-                        NgDocTooltipModule,
-                        PolymorpheusModule,
-                        NgDocAsArrayModule,
-                        NgDocButtonIconModule,
-                        NgDocIconModule,
-                        NgDocTextModule,
-                        NgDocCheckboxModule,
-                        FormsModule,
-                        NgDocButtonModule,
-                        NgDocDemoDisplayerModule,
-                        NgDocBindModule,
-                        NgDocRunModule,
-                    ],
-                    exports: [
-                        NgDocPlaygroundComponent,
-                        NgDocPlaygroundPropertyComponent,
-                        NgDocPlaygroundPropertiesComponent,
-                        NgDocPlaygroundDemoComponent,
-                    ],
-                }]
-        }] });
+            args: [{ selector: 'ng-doc-playground', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgDocPlaygroundPropertiesComponent, NgFor, NgDocPlaygroundDemoComponent, NgDocAsArrayPipe], template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties\n\t\t[form]=\"formGroup\"\n\t\t[properties]=\"properties\"\n\t\t[dynamicContent]=\"configuration.content\"\n\t\t[(recreateDemo)]=\"recreateDemo\"\n\t\t(resetForm)=\"resetForm()\"\n\t>\n\t\t<ng-doc-playground-demo\n\t\t\t*ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n\t\t\t[id]=\"id\"\n\t\t\t[selector]=\"selector\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t>\n\t\t</ng-doc-playground-demo>\n\t</ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.NgDocRootPage }, { type: i2.FormBuilder }]; } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgDocBasePlayground, NgDocPlaygroundComponent, NgDocPlaygroundDemoComponent, NgDocPlaygroundModule, NgDocPlaygroundPropertiesComponent, NgDocPlaygroundPropertyComponent };
+export { NgDocBasePlayground, NgDocPlaygroundComponent, NgDocPlaygroundDemoComponent, NgDocPlaygroundPropertiesComponent, NgDocPlaygroundPropertyComponent };
 //# sourceMappingURL=ng-doc-app-components-playground.mjs.map