@ng-doc/app 15.0.0-beta.32 → 15.0.0-beta.34

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

@@ -1,24 +1,268 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@ng-doc/app/classes';
-import { objectKeys, extractValue } from '@ng-doc/core';
-import * as i3 from '@angular/common';
+import { Directive, isDevMode, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, EventEmitter, Output, ChangeDetectorRef, Injector, NgModule } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i1$1 from '@ng-doc/app/classes/root-page';
+import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
+import { extractValueOrThrow, extractValue } from '@ng-doc/core/helpers/extract-value';
+import { objectKeys } from '@ng-doc/core/helpers/object-keys';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@ng-doc/app/components/playground-demo';
-import { NgDocPlaygroundDemoModule } from '@ng-doc/app/components/playground-demo';
-import * as i5 from '@ng-doc/app/components/playground-properties';
-import { NgDocPlaygroundPropertiesModule } from '@ng-doc/app/components/playground-properties';
-import * as i6 from '@ng-doc/ui-kit';
-import { NgDocAsArrayModule } from '@ng-doc/ui-kit';
+import * as i1 from '@angular/cdk/layout';
+import { Breakpoints } from '@angular/cdk/layout';
+import { pluck, takeUntil } from 'rxjs/operators';
+import * as i4 from '@ng-doc/ui-kit';
+import { NgDocLabelModule, NgDocTooltipModule, NgDocAsArrayModule, NgDocButtonIconModule, NgDocIconModule, NgDocTextModule, NgDocCheckboxModule, NgDocButtonModule } from '@ng-doc/ui-kit';
+import { isPlaygroundProperty } from '@ng-doc/app/helpers/is-playground-property';
+import { getTokenForType } from '@ng-doc/app/helpers/provide-type-control';
+import { __decorate, __metadata } from 'tslib';
+import { getPlaygroundDemoToken } from '@ng-doc/app/helpers/provide-playground-demo';
+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 i2$1 from '@ng-doc/app/components/demo-displayer';
+import { NgDocDemoDisplayerModule } from '@ng-doc/app/components/demo-displayer';
+import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+
+/**
+ * Base class for playgrounds components.
+ */
+class NgDocBasePlayground {
+    constructor() {
+        this.data = {};
+        this.content = {};
+    }
+}
+NgDocBasePlayground.selector = 'unknown';
+NgDocBasePlayground.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocBasePlayground, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+NgDocBasePlayground.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.3", type: NgDocBasePlayground, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocBasePlayground, decorators: [{
+            type: Directive
+        }] });
+
+class NgDocPlaygroundPropertyComponent {
+    constructor(injector) {
+        this.injector = injector;
+        this.name = '';
+    }
+    ngOnChanges({ property, control }) {
+        if (property && this.property) {
+            this.propertyControl?.destroy();
+            this.propertyControl = undefined;
+            const type = isPlaygroundProperty(this.property) ? this.property.type : 'boolean';
+            const typeControl = this.getControlForType(type) ??
+                this.getControlForTypeAlias(isPlaygroundProperty(this.property) ? this.property.options : undefined);
+            if (typeControl && this.propertyOutlet) {
+                this.propertyControl = this.propertyOutlet.createComponent(typeControl.control);
+                this.propertyControl.instance.name = this.name;
+                this.propertyControl.instance.description = this.tooltipContent;
+                this.propertyControl.instance.options = isPlaygroundProperty(this.property)
+                    ? this.property.options
+                    : undefined;
+                this.propertyControl.instance.default = isPlaygroundProperty(this.property)
+                    ? this.property.default
+                    : undefined;
+                this.propertyControl.instance.writeValue(this.control?.value);
+                this.option = typeControl.options;
+            }
+            else if (isDevMode()) {
+                console.warn(`NgDocPlayground didn't find the control for the @Input "${this.name}", the type "${type}" was not recognized'`);
+            }
+        }
+        if (control) {
+            this.control?.registerOnChange((value) => this.propertyControl?.instance?.writeValue(value));
+            this.propertyControl?.instance.registerOnChange((value) => this.control?.setValue(value));
+            this.propertyControl?.instance.registerOnTouched(() => this.control?.markAsTouched());
+        }
+    }
+    get hasPropertyControl() {
+        return !!this.propertyControl;
+    }
+    get tooltipContent() {
+        return this.property && isPlaygroundProperty(this.property) ? this.property.description ?? '' : '';
+    }
+    getControlForType(type) {
+        const token = getTokenForType(type);
+        return token ? this.injector.get(token) : undefined;
+    }
+    getControlForTypeAlias(options) {
+        if (options && options.length) {
+            let optionsIsValid = true;
+            try {
+                // checking that all values are extractable
+                options.forEach((item) => extractValueOrThrow(item));
+            }
+            catch {
+                optionsIsValid = false;
+            }
+            if (optionsIsValid) {
+                const token = getTokenForType('NgDocTypeAlias');
+                return token ? this.injector.get(token) : undefined;
+            }
+        }
+        return undefined;
+    }
+}
+NgDocPlaygroundPropertyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NgDocPlaygroundPropertyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", 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: 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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", 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\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"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { name: [{
+                type: Input
+            }], property: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], propertyOutlet: [{
+                type: ViewChild,
+                args: ['propertyOutlet', { read: ViewContainerRef, static: true }]
+            }], hasPropertyControl: [{
+                type: HostBinding,
+                args: ['attr.data-has-property-control']
+            }] } });
+
+class NgDocPlaygroundPropertiesComponent {
+    constructor(breakpointObserver) {
+        this.breakpointObserver = breakpointObserver;
+        this.recreateDemo = false;
+        this.recreateDemoChange = new EventEmitter();
+        this.resetForm = new EventEmitter();
+        this.breakpoints = [Breakpoints.XSmall];
+        this.observer = this.breakpointObserver.observe(this.breakpoints).pipe(pluck('matches'));
+    }
+    getFormControl(controlType, key) {
+        return this.form.get(controlType)?.get(key);
+    }
+}
+NgDocPlaygroundPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
+NgDocPlaygroundPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", dynamicContent: "dynamicContent", recreateDemo: "recreateDemo" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, 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=\"(properties | keyvalue)?.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 property of properties | keyvalue\"\n\t\t\t\t[name]=\"property.value.name\"\n\t\t\t\t[property]=\"property.value\"\n\t\t\t\t[control]=\"getFormControl('properties', property.key)\"\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[control]=\"getFormControl('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", "control"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", 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=\"(properties | keyvalue)?.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 property of properties | keyvalue\"\n\t\t\t\t[name]=\"property.value.name\"\n\t\t\t\t[property]=\"property.value\"\n\t\t\t\t[control]=\"getFormControl('properties', property.key)\"\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[control]=\"getFormControl('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 }]; }, propDecorators: { form: [{
+                type: Input
+            }], properties: [{
+                type: Input
+            }], dynamicContent: [{
+                type: Input
+            }], recreateDemo: [{
+                type: Input
+            }], recreateDemoChange: [{
+                type: Output
+            }], resetForm: [{
+                type: Output
+            }] } });
+
+let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
+    constructor(rootPage, injector) {
+        this.rootPage = rootPage;
+        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();
+    }
+};
+NgDocPlaygroundDemoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundDemoComponent, deps: [{ token: i1$1.NgDocRootPage }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NgDocPlaygroundDemoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", 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: i2$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", [NgDocRootPage, Injector])
+], NgDocPlaygroundDemoComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", 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: i1$1.NgDocRootPage }, { 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;
         this.formBuilder = formBuilder;
+        this.id = '';
         this.selectors = [];
-        this.reinitializeDemo = false;
+        this.recreateDemo = false;
     }
     ngOnInit() {
         const propertiesForm = this.formBuilder.group(this.getPropertiesFormValues());
@@ -27,10 +271,9 @@ class NgDocPlaygroundComponent {
             properties: propertiesForm,
             content: contentForm,
         });
-        console.log(this.rootPage.playground, this.id, this.properties);
     }
     get configuration() {
-        return this.id && this.rootPage.playground ? this.rootPage.playground[this.id] : undefined;
+        return this.rootPage.dependencies?.playgrounds?.[this.id];
     }
     getPropertiesFormValues() {
         return objectKeys(this.properties ?? {}).reduce((controls, key) => {
@@ -41,12 +284,13 @@ class NgDocPlaygroundComponent {
         }, {});
     }
     getContentFormValues() {
-        return objectKeys(this.configuration?.dynamicContent ?? {}).reduce((controls, key) => {
-            if (this.configuration?.dynamicContent) {
+        return objectKeys(this.configuration?.content ?? {}).reduce((controls, key) => {
+            if (this.configuration?.content) {
                 controls[key] = false;
             }
             return controls;
         }, {});
+        return {};
     }
     resetForm() {
         this.formGroup?.reset({
@@ -55,38 +299,78 @@ class NgDocPlaygroundComponent {
         });
     }
 }
-NgDocPlaygroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundComponent, deps: [{ token: i1.NgDocRootPage }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-NgDocPlaygroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", type: NgDocPlaygroundComponent, selector: "ng-doc-playground", ngImport: i0, template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties [form]=\"formGroup\" [properties]=\"properties\"\n\t\t\t\t\t\t\t\t  [dynamicContent]=\"configuration.dynamicContent\"\n\t\t\t\t\t\t\t\t  [(reinitializeDemo)]=\"reinitializeDemo\"\n\t\t\t\t\t\t\t\t  (resetForm)=\"resetForm()\">\n\t\t<ng-doc-playground-demo *ngFor=\"let selector of (configuration.selectors ?? selectors) | asArray\"\n\t\t\t\t\t\t\t\t[target]=\"configuration.target\"\n\t\t\t\t\t\t\t\t[selector]=\"selector\"\n\t\t\t\t\t\t\t\t[template]=\"configuration.template\"\n\t\t\t\t\t\t\t\t[properties]=\"properties\"\n\t\t\t\t\t\t\t\t[data]=\"configuration.data\"\n\t\t\t\t\t\t\t\t[dynamicContent]=\"configuration.dynamicContent\"\n\t\t\t\t\t\t\t\t[reinitializeDemo]=\"reinitializeDemo\"\n\t\t\t\t\t\t\t\t[form]=\"formGroup\">\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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.NgDocPlaygroundDemoComponent, selector: "ng-doc-playground-demo", inputs: ["target", "selector", "template", "properties", "dynamicContent", "data", "reinitializeDemo", "form"] }, { kind: "component", type: i5.NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "dynamicContent", "reinitializeDemo"], outputs: ["reinitializeDemoChange", "resetForm"] }, { kind: "pipe", type: i6.NgDocAsArrayPipe, name: "asArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgDocPlaygroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundComponent, deps: [{ token: i1$1.NgDocRootPage }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+NgDocPlaygroundComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.3", 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", 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 [form]=\"formGroup\" [properties]=\"properties\"\n\t\t\t\t\t\t\t\t  [dynamicContent]=\"configuration.dynamicContent\"\n\t\t\t\t\t\t\t\t  [(reinitializeDemo)]=\"reinitializeDemo\"\n\t\t\t\t\t\t\t\t  (resetForm)=\"resetForm()\">\n\t\t<ng-doc-playground-demo *ngFor=\"let selector of (configuration.selectors ?? selectors) | asArray\"\n\t\t\t\t\t\t\t\t[target]=\"configuration.target\"\n\t\t\t\t\t\t\t\t[selector]=\"selector\"\n\t\t\t\t\t\t\t\t[template]=\"configuration.template\"\n\t\t\t\t\t\t\t\t[properties]=\"properties\"\n\t\t\t\t\t\t\t\t[data]=\"configuration.data\"\n\t\t\t\t\t\t\t\t[dynamicContent]=\"configuration.dynamicContent\"\n\t\t\t\t\t\t\t\t[reinitializeDemo]=\"reinitializeDemo\"\n\t\t\t\t\t\t\t\t[form]=\"formGroup\">\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.NgDocRootPage }, { type: i2.FormBuilder }]; } });
+            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$1.NgDocRootPage }, { type: i3.FormBuilder }]; } });
 
 class NgDocPlaygroundModule {
 }
 NgDocPlaygroundModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-NgDocPlaygroundModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundModule, declarations: [NgDocPlaygroundComponent], imports: [CommonModule,
+NgDocPlaygroundModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundModule, declarations: [NgDocPlaygroundComponent,
+        NgDocPlaygroundPropertyComponent,
+        NgDocPlaygroundPropertiesComponent,
+        NgDocPlaygroundDemoComponent], imports: [CommonModule,
         ReactiveFormsModule,
+        NgDocLabelModule,
+        NgDocTooltipModule,
+        PolymorpheusModule,
         NgDocAsArrayModule,
-        NgDocPlaygroundDemoModule,
-        NgDocPlaygroundPropertiesModule], exports: [NgDocPlaygroundComponent] });
+        NgDocButtonIconModule,
+        NgDocIconModule,
+        NgDocTextModule,
+        NgDocCheckboxModule,
+        FormsModule,
+        NgDocButtonModule,
+        NgDocDemoDisplayerModule], exports: [NgDocPlaygroundComponent,
+        NgDocPlaygroundPropertyComponent,
+        NgDocPlaygroundPropertiesComponent,
+        NgDocPlaygroundDemoComponent] });
 NgDocPlaygroundModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundModule, imports: [CommonModule,
         ReactiveFormsModule,
+        NgDocLabelModule,
+        NgDocTooltipModule,
+        PolymorpheusModule,
         NgDocAsArrayModule,
-        NgDocPlaygroundDemoModule,
-        NgDocPlaygroundPropertiesModule] });
+        NgDocButtonIconModule,
+        NgDocIconModule,
+        NgDocTextModule,
+        NgDocCheckboxModule,
+        FormsModule,
+        NgDocButtonModule,
+        NgDocDemoDisplayerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImport: i0, type: NgDocPlaygroundModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NgDocPlaygroundComponent],
+                    declarations: [
+                        NgDocPlaygroundComponent,
+                        NgDocPlaygroundPropertyComponent,
+                        NgDocPlaygroundPropertiesComponent,
+                        NgDocPlaygroundDemoComponent,
+                    ],
                     imports: [
                         CommonModule,
                         ReactiveFormsModule,
+                        NgDocLabelModule,
+                        NgDocTooltipModule,
+                        PolymorpheusModule,
                         NgDocAsArrayModule,
-                        NgDocPlaygroundDemoModule,
-                        NgDocPlaygroundPropertiesModule,
+                        NgDocButtonIconModule,
+                        NgDocIconModule,
+                        NgDocTextModule,
+                        NgDocCheckboxModule,
+                        FormsModule,
+                        NgDocButtonModule,
+                        NgDocDemoDisplayerModule,
+                    ],
+                    exports: [
+                        NgDocPlaygroundComponent,
+                        NgDocPlaygroundPropertyComponent,
+                        NgDocPlaygroundPropertiesComponent,
+                        NgDocPlaygroundDemoComponent,
                     ],
-                    exports: [NgDocPlaygroundComponent],
                 }]
         }] });
 
@@ -94,5 +378,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgDocPlaygroundComponent, NgDocPlaygroundModule };
+export { NgDocBasePlayground, NgDocPlaygroundComponent, NgDocPlaygroundDemoComponent, NgDocPlaygroundModule, NgDocPlaygroundPropertiesComponent, NgDocPlaygroundPropertyComponent };
 //# sourceMappingURL=ng-doc-app-components-playground.mjs.map