@ng-doc/builder 15.0.0-beta.8 → 15.0.0-beta.9

package/engine/.cache/libs/app/components/page-map/page-map.component.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPageMapComponent = void 0;
+const tslib_1 = require("tslib");
+const common_1 = require("@angular/common");
+const core_1 = require("@angular/core");
+const helpers_1 = require("@ng-doc/app/helpers");
+const ui_kit_1 = require("@ng-doc/ui-kit");
+const until_destroy_1 = require("@ngneat/until-destroy");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const page_map_element_component_1 = require("./page-map-element/page-map-element.component");
+let NgDocPageMapComponent = class NgDocPageMapComponent {
+    constructor(document, ngZone, changeDetectorRef, renderer) {
+        this.document = document;
+        this.ngZone = ngZone;
+        this.changeDetectorRef = changeDetectorRef;
+        this.renderer = renderer;
+        this.elements = new core_1.QueryList();
+        this.map = [];
+    }
+    ngOnChanges() {
+        if (this.pageContainer) {
+            this.map = (0, helpers_1.generatePageMap)(this.pageContainer);
+        }
+    }
+    ngAfterViewInit() {
+        (0, rxjs_1.fromEvent)(this.document, 'scroll')
+            .pipe((0, operators_1.map)((event) => event.target.scrollingElement), (0, operators_1.startWith)(this.document.scrollingElement), (0, operators_1.filter)(() => !!this.map.length), (0, operators_1.map)((target) => {
+            const percentage = (target.scrollTop * 100) / (target.scrollHeight - target.offsetHeight);
+            const selectionLine = target.scrollTop + (target.offsetHeight * percentage) / 100;
+            return this.map.reduce((pTarget, cTarget) => {
+                const pTop = pTarget.element.getBoundingClientRect().top + target.scrollTop;
+                const cTop = cTarget.element.getBoundingClientRect().top + target.scrollTop;
+                return Math.abs(cTop - selectionLine) < Math.abs(pTop - selectionLine) ? cTarget : pTarget;
+            });
+        }), (0, operators_1.distinctUntilChanged)(), (0, ui_kit_1.ngDocZoneOptimize)(this.ngZone), (0, until_destroy_1.untilDestroyed)(this))
+            .subscribe(this.select.bind(this));
+    }
+    select(item) {
+        var _a;
+        const index = this.map.indexOf(item);
+        if (this.selection) {
+            const element = (_a = this.elements.toArray()[index]) === null || _a === void 0 ? void 0 : _a.elementRef.nativeElement;
+            if (element) {
+                this.renderer.setStyle(this.selection.nativeElement, 'top', `${element.offsetTop}px`);
+                this.renderer.setStyle(this.selection.nativeElement, 'height', `${element.offsetHeight}px`);
+            }
+        }
+        this.activeItem = item;
+        this.changeDetectorRef.detectChanges();
+    }
+};
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", HTMLElement)
+], NgDocPageMapComponent.prototype, "pageContainer", void 0);
+tslib_1.__decorate([
+    (0, core_1.ViewChild)('selection', { static: true, read: core_1.ElementRef }),
+    tslib_1.__metadata("design:type", core_1.ElementRef)
+], NgDocPageMapComponent.prototype, "selection", void 0);
+tslib_1.__decorate([
+    (0, core_1.ViewChildren)(page_map_element_component_1.NgDocPageMapElementComponent),
+    tslib_1.__metadata("design:type", core_1.QueryList)
+], NgDocPageMapComponent.prototype, "elements", void 0);
+NgDocPageMapComponent = tslib_1.__decorate([
+    (0, core_1.Component)({
+        selector: 'ng-doc-page-map',
+        templateUrl: './page-map.component.html',
+        styleUrls: ['./page-map.component.scss'],
+        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+    }),
+    (0, until_destroy_1.UntilDestroy)(),
+    tslib_1.__param(0, (0, core_1.Inject)(common_1.DOCUMENT)),
+    tslib_1.__metadata("design:paramtypes", [Document,
+        core_1.NgZone,
+        core_1.ChangeDetectorRef,
+        core_1.Renderer2])
+], NgDocPageMapComponent);
+exports.NgDocPageMapComponent = NgDocPageMapComponent;

package/engine/.cache/libs/app/components/page-map/page-map.module.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPageMapModule = void 0;
+const tslib_1 = require("tslib");
+const common_1 = require("@angular/common");
+const core_1 = require("@angular/core");
+const router_1 = require("@angular/router");
+const ui_kit_1 = require("@ng-doc/ui-kit");
+const page_map_component_1 = require("./page-map.component");
+const page_map_element_component_1 = require("./page-map-element/page-map-element.component");
+let NgDocPageMapModule = class NgDocPageMapModule {
+};
+NgDocPageMapModule = tslib_1.__decorate([
+    (0, core_1.NgModule)({
+        declarations: [page_map_component_1.NgDocPageMapComponent, page_map_element_component_1.NgDocPageMapElementComponent],
+        imports: [common_1.CommonModule, router_1.RouterLinkWithHref, ui_kit_1.NgDocDotModule],
+        exports: [page_map_component_1.NgDocPageMapComponent, page_map_element_component_1.NgDocPageMapElementComponent],
+    })
+], NgDocPageMapModule);
+exports.NgDocPageMapModule = NgDocPageMapModule;

package/engine/.cache/libs/app/components/playground/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./playground.component"), exports);
+tslib_1.__exportStar(require("./playground.module"), exports);

package/engine/.cache/libs/app/components/playground/playground.component.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPlaygroundComponent = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@angular/core");
+const forms_1 = require("@angular/forms");
+const classes_1 = require("@ng-doc/app/classes");
+const core_2 = require("@ng-doc/core");
+let NgDocPlaygroundComponent = class NgDocPlaygroundComponent {
+    constructor(rootPage, formBuilder) {
+        this.rootPage = rootPage;
+        this.formBuilder = formBuilder;
+        this.selectors = [];
+        this.reinitializeDemo = false;
+    }
+    ngOnInit() {
+        const propertiesForm = this.formBuilder.group(this.getPropertiesFormValues());
+        const contentForm = this.formBuilder.group(this.getContentFormValues());
+        this.formGroup = this.formBuilder.group({
+            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;
+    }
+    getPropertiesFormValues() {
+        var _a;
+        return (0, core_2.objectKeys)((_a = this.properties) !== null && _a !== void 0 ? _a : {}).reduce((controls, key) => {
+            var _a, _b;
+            if (this.properties) {
+                controls[key] = (0, core_2.extractValue)((_b = (_a = this.properties[key]) === null || _a === void 0 ? void 0 : _a.default) !== null && _b !== void 0 ? _b : 'undefined');
+            }
+            return controls;
+        }, {});
+    }
+    getContentFormValues() {
+        var _a, _b;
+        return (0, core_2.objectKeys)((_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.dynamicContent) !== null && _b !== void 0 ? _b : {}).reduce((controls, key) => {
+            var _a;
+            if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.dynamicContent) {
+                controls[key] = false;
+            }
+            return controls;
+        }, {});
+    }
+    resetForm() {
+        var _a;
+        (_a = this.formGroup) === null || _a === void 0 ? void 0 : _a.reset({
+            properties: this.getPropertiesFormValues(),
+            content: this.getContentFormValues(),
+        });
+    }
+};
+NgDocPlaygroundComponent = tslib_1.__decorate([
+    (0, core_1.Component)({
+        selector: 'ng-doc-playground',
+        templateUrl: './playground.component.html',
+        styleUrls: ['./playground.component.scss'],
+        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+    }),
+    tslib_1.__metadata("design:paramtypes", [classes_1.NgDocRootPage, forms_1.FormBuilder])
+], NgDocPlaygroundComponent);
+exports.NgDocPlaygroundComponent = NgDocPlaygroundComponent;

package/engine/.cache/libs/app/components/playground/playground.module.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPlaygroundModule = void 0;
+const tslib_1 = require("tslib");
+const common_1 = require("@angular/common");
+const core_1 = require("@angular/core");
+const forms_1 = require("@angular/forms");
+const playground_demo_1 = require("@ng-doc/app/components/playground-demo");
+const playground_properties_1 = require("@ng-doc/app/components/playground-properties");
+const ui_kit_1 = require("@ng-doc/ui-kit");
+const playground_component_1 = require("./playground.component");
+let NgDocPlaygroundModule = class NgDocPlaygroundModule {
+};
+NgDocPlaygroundModule = tslib_1.__decorate([
+    (0, core_1.NgModule)({
+        declarations: [playground_component_1.NgDocPlaygroundComponent],
+        imports: [
+            common_1.CommonModule,
+            forms_1.ReactiveFormsModule,
+            ui_kit_1.NgDocAsArrayModule,
+            playground_demo_1.NgDocPlaygroundDemoModule,
+            playground_properties_1.NgDocPlaygroundPropertiesModule,
+        ],
+        exports: [playground_component_1.NgDocPlaygroundComponent],
+    })
+], NgDocPlaygroundModule);
+exports.NgDocPlaygroundModule = NgDocPlaygroundModule;

package/engine/.cache/libs/app/components/playground-demo/demo/base-demo.component.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocBaseDemoComponent = void 0;
+class NgDocBaseDemoComponent {
+}
+exports.NgDocBaseDemoComponent = NgDocBaseDemoComponent;

package/engine/.cache/libs/app/components/playground-demo/demo/base-demo.module.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocBaseDemoModule = void 0;
+class NgDocBaseDemoModule {
+}
+exports.NgDocBaseDemoModule = NgDocBaseDemoModule;

package/engine/.cache/libs/app/components/playground-demo/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./playground-demo.component"), exports);
+tslib_1.__exportStar(require("./playground-demo.module"), exports);

package/engine/.cache/libs/app/components/playground-demo/playground-demo.component.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPlaygroundDemoComponent = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@angular/core");
+const forms_1 = require("@angular/forms");
+const root_page_1 = require("@ng-doc/app/classes/root-page");
+const helpers_1 = require("@ng-doc/app/helpers");
+const until_destroy_1 = require("@ngneat/until-destroy");
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
+    constructor(rootPage, injector) {
+        this.rootPage = rootPage;
+        this.injector = injector;
+        this.selector = '';
+        this.template = '';
+        this.reinitializeDemo = false;
+        this.code = '';
+        this.unsubscribe$ = new rxjs_1.Subject();
+    }
+    ngOnChanges({ form }) {
+        var _a, _b;
+        if (form) {
+            this.unsubscribe$.next();
+            this.renderDemo((_a = this.form) === null || _a === void 0 ? void 0 : _a.value);
+            this.updateCodeView();
+            (_b = this.form) === null || _b === void 0 ? void 0 : _b.valueChanges.pipe((0, operators_1.takeUntil)(this.unsubscribe$), (0, until_destroy_1.untilDestroyed)(this)).subscribe((data) => this.updateDemo(data));
+        }
+    }
+    updateDemo(data) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (this.reinitializeDemo) {
+            this.renderDemo(data);
+        }
+        else {
+            Object.assign((_b = (_a = this.demoRef) === null || _a === void 0 ? void 0 : _a.instance.demo) !== null && _b !== void 0 ? _b : {}, data.properties);
+            Object.assign((_d = (_c = this.demoRef) === null || _c === void 0 ? void 0 : _c.instance.content) !== null && _d !== void 0 ? _d : {}, data.content);
+            (_h = (_g = (_f = (_e = this.demoRef) === null || _e === void 0 ? void 0 : _e.instance) === null || _f === void 0 ? void 0 : _f.viewContainerRef) === null || _g === void 0 ? void 0 : _g.injector.get(core_1.ChangeDetectorRef)) === null || _h === void 0 ? void 0 : _h.markForCheck();
+        }
+        this.updateCodeView();
+    }
+    renderDemo(data) {
+        var _a;
+        if (this.target && this.properties) {
+            (_a = this.demoRef) === null || _a === void 0 ? void 0 : _a.destroy();
+            const template = (0, helpers_1.compileTemplate)(this.template, this.selector, this.properties, data, this.dynamicContent, this.reinitializeDemo ? 'dynamic' : 'compile');
+            // const compiledModule: ModuleWithComponentFactories<NgDocBaseDemoComponent> =
+            // 	this.compiler.compileModuleAndAllComponentsSync(module);
+            //
+            // const factory: ComponentFactory<NgDocBaseDemoComponent> | undefined =
+            // 	compiledModule.componentFactories.find(
+            // 		(comp: ComponentFactory<NgDocBaseDemoComponent>) => comp.componentType === component,
+            // 	);
+            //
+            // this.demoRef = factory && this.demoOutlet?.createComponent(factory);
+            //
+            // this.demoRef?.changeDetectorRef.markForCheck();
+        }
+    }
+    updateCodeView() {
+        const template = this.properties && this.form
+            ? (0, helpers_1.compileTemplate)(this.template, this.selector, this.properties, this.form.value, this.dynamicContent, 'preview')
+            : '';
+        this.code = (0, helpers_1.formatHtml)(template);
+    }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+};
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", core_1.Type)
+], NgDocPlaygroundDemoComponent.prototype, "target", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", String)
+], NgDocPlaygroundDemoComponent.prototype, "selector", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", String)
+], NgDocPlaygroundDemoComponent.prototype, "template", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", Object)
+], NgDocPlaygroundDemoComponent.prototype, "properties", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", Object)
+], NgDocPlaygroundDemoComponent.prototype, "dynamicContent", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", Object)
+], NgDocPlaygroundDemoComponent.prototype, "data", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", Boolean)
+], NgDocPlaygroundDemoComponent.prototype, "reinitializeDemo", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", forms_1.FormGroup)
+], NgDocPlaygroundDemoComponent.prototype, "form", void 0);
+tslib_1.__decorate([
+    (0, core_1.ViewChild)('demoOutlet', { static: true, read: core_1.ViewContainerRef }),
+    tslib_1.__metadata("design:type", core_1.ViewContainerRef)
+], NgDocPlaygroundDemoComponent.prototype, "demoOutlet", void 0);
+NgDocPlaygroundDemoComponent = tslib_1.__decorate([
+    (0, core_1.Component)({
+        selector: 'ng-doc-playground-demo',
+        templateUrl: './playground-demo.component.html',
+        styleUrls: ['./playground-demo.component.scss'],
+        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+    }),
+    (0, until_destroy_1.UntilDestroy)(),
+    tslib_1.__metadata("design:paramtypes", [root_page_1.NgDocRootPage, core_1.Injector])
+], NgDocPlaygroundDemoComponent);
+exports.NgDocPlaygroundDemoComponent = NgDocPlaygroundDemoComponent;

package/engine/.cache/libs/app/components/playground-demo/playground-demo.module.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPlaygroundDemoModule = void 0;
+const tslib_1 = require("tslib");
+const common_1 = require("@angular/common");
+const core_1 = require("@angular/core");
+const demo_displayer_1 = require("@ng-doc/app/components/demo-displayer");
+const playground_demo_component_1 = require("./playground-demo.component");
+let NgDocPlaygroundDemoModule = class NgDocPlaygroundDemoModule {
+};
+NgDocPlaygroundDemoModule = tslib_1.__decorate([
+    (0, core_1.NgModule)({
+        declarations: [playground_demo_component_1.NgDocPlaygroundDemoComponent],
+        imports: [common_1.CommonModule, demo_displayer_1.NgDocDemoDisplayerModule],
+        exports: [playground_demo_component_1.NgDocPlaygroundDemoComponent],
+    })
+], NgDocPlaygroundDemoModule);
+exports.NgDocPlaygroundDemoModule = NgDocPlaygroundDemoModule;

package/engine/.cache/libs/app/components/playground-properties/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./playground-properties.component"), exports);
+tslib_1.__exportStar(require("./playground-properties.module"), exports);

package/engine/.cache/libs/app/components/playground-properties/playground-properties.component.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPlaygroundPropertiesComponent = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@angular/core");
+const forms_1 = require("@angular/forms");
+let NgDocPlaygroundPropertiesComponent = class NgDocPlaygroundPropertiesComponent {
+    constructor() {
+        this.reinitializeDemo = false;
+        this.reinitializeDemoChange = new core_1.EventEmitter();
+        this.resetForm = new core_1.EventEmitter();
+    }
+    getFormControl(controlType, key) {
+        var _a, _b;
+        return (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(controlType)) === null || _b === void 0 ? void 0 : _b.get(key);
+    }
+};
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", forms_1.FormGroup)
+], NgDocPlaygroundPropertiesComponent.prototype, "form", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", Object)
+], NgDocPlaygroundPropertiesComponent.prototype, "properties", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", Object)
+], NgDocPlaygroundPropertiesComponent.prototype, "dynamicContent", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", Boolean)
+], NgDocPlaygroundPropertiesComponent.prototype, "reinitializeDemo", void 0);
+tslib_1.__decorate([
+    (0, core_1.Output)(),
+    tslib_1.__metadata("design:type", core_1.EventEmitter)
+], NgDocPlaygroundPropertiesComponent.prototype, "reinitializeDemoChange", void 0);
+tslib_1.__decorate([
+    (0, core_1.Output)(),
+    tslib_1.__metadata("design:type", core_1.EventEmitter)
+], NgDocPlaygroundPropertiesComponent.prototype, "resetForm", void 0);
+NgDocPlaygroundPropertiesComponent = tslib_1.__decorate([
+    (0, core_1.Component)({
+        selector: 'ng-doc-playground-properties',
+        templateUrl: './playground-properties.component.html',
+        styleUrls: ['./playground-properties.component.scss'],
+        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+    })
+], NgDocPlaygroundPropertiesComponent);
+exports.NgDocPlaygroundPropertiesComponent = NgDocPlaygroundPropertiesComponent;

package/engine/.cache/libs/app/components/playground-properties/playground-properties.module.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPlaygroundPropertiesModule = void 0;
+const tslib_1 = require("tslib");
+const common_1 = require("@angular/common");
+const core_1 = require("@angular/core");
+const forms_1 = require("@angular/forms");
+const playground_property_1 = require("@ng-doc/app/components/playground-property");
+const ui_kit_1 = require("@ng-doc/ui-kit");
+const playground_properties_component_1 = require("./playground-properties.component");
+let NgDocPlaygroundPropertiesModule = class NgDocPlaygroundPropertiesModule {
+};
+NgDocPlaygroundPropertiesModule = tslib_1.__decorate([
+    (0, core_1.NgModule)({
+        declarations: [playground_properties_component_1.NgDocPlaygroundPropertiesComponent],
+        imports: [
+            common_1.CommonModule,
+            playground_property_1.NgDocPlaygroundPropertyModule,
+            ui_kit_1.NgDocButtonIconModule,
+            ui_kit_1.NgDocIconModule,
+            ui_kit_1.NgDocTooltipModule,
+            ui_kit_1.NgDocTooltipModule,
+            ui_kit_1.NgDocTextModule,
+            ui_kit_1.NgDocCheckboxModule,
+            forms_1.FormsModule,
+            ui_kit_1.NgDocButtonModule,
+        ],
+        exports: [playground_properties_component_1.NgDocPlaygroundPropertiesComponent],
+    })
+], NgDocPlaygroundPropertiesModule);
+exports.NgDocPlaygroundPropertiesModule = NgDocPlaygroundPropertiesModule;

package/engine/.cache/libs/app/components/playground-property/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./playground-property.component"), exports);
+tslib_1.__exportStar(require("./playground-property.module"), exports);

package/engine/.cache/libs/app/components/playground-property/playground-property.component.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPlaygroundPropertyComponent = void 0;
+const tslib_1 = require("tslib");
+const core_1 = require("@angular/core");
+const forms_1 = require("@angular/forms");
+const helpers_1 = require("@ng-doc/app/helpers");
+const core_2 = require("@ng-doc/core");
+let NgDocPlaygroundPropertyComponent = class NgDocPlaygroundPropertyComponent {
+    constructor(injector) {
+        this.injector = injector;
+        this.name = '';
+    }
+    ngOnChanges({ property, control }) {
+        var _a, _b, _c, _d, _e, _f;
+        if (property && this.property) {
+            (_a = this.propertyControl) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.propertyControl = undefined;
+            const type = (0, helpers_1.isPlaygroundProperty)(this.property) ? this.property.type : 'boolean';
+            const typeControl = (_b = this.getControlForType(type)) !== null && _b !== void 0 ? _b : this.getControlForTypeAlias((0, helpers_1.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 = (0, helpers_1.isPlaygroundProperty)(this.property)
+                    ? this.property.options
+                    : undefined;
+                this.propertyControl.instance.default = (0, helpers_1.isPlaygroundProperty)(this.property)
+                    ? this.property.default
+                    : undefined;
+                this.propertyControl.instance.writeValue((_c = this.control) === null || _c === void 0 ? void 0 : _c.value);
+                this.option = typeControl.options;
+            }
+            else if ((0, core_1.isDevMode)()) {
+                console.warn(`NgDocPlayground didn't find the control for the @Input "${this.name}", the type "${type}" was not recognized'`);
+            }
+        }
+        if (control) {
+            (_d = this.control) === null || _d === void 0 ? void 0 : _d.registerOnChange((value) => { var _a, _b; return (_b = (_a = this.propertyControl) === null || _a === void 0 ? void 0 : _a.instance) === null || _b === void 0 ? void 0 : _b.writeValue(value); });
+            (_e = this.propertyControl) === null || _e === void 0 ? void 0 : _e.instance.registerOnChange((value) => { var _a; return (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(value); });
+            (_f = this.propertyControl) === null || _f === void 0 ? void 0 : _f.instance.registerOnTouched(() => { var _a; return (_a = this.control) === null || _a === void 0 ? void 0 : _a.markAsTouched(); });
+        }
+    }
+    get hasPropertyControl() {
+        return !!this.propertyControl;
+    }
+    get tooltipContent() {
+        var _a;
+        return this.property && (0, helpers_1.isPlaygroundProperty)(this.property) ? (_a = this.property.description) !== null && _a !== void 0 ? _a : '' : '';
+    }
+    getControlForType(type) {
+        const token = (0, helpers_1.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) => (0, core_2.extractValueOrThrow)(item));
+            }
+            catch (_a) {
+                optionsIsValid = false;
+            }
+            if (optionsIsValid) {
+                const token = (0, helpers_1.getTokenForType)('NgDocTypeAlias');
+                return token ? this.injector.get(token) : undefined;
+            }
+        }
+        return undefined;
+    }
+};
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", String)
+], NgDocPlaygroundPropertyComponent.prototype, "name", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", Object)
+], NgDocPlaygroundPropertyComponent.prototype, "property", void 0);
+tslib_1.__decorate([
+    (0, core_1.Input)(),
+    tslib_1.__metadata("design:type", forms_1.FormControl)
+], NgDocPlaygroundPropertyComponent.prototype, "control", void 0);
+tslib_1.__decorate([
+    (0, core_1.ViewChild)('propertyOutlet', { read: core_1.ViewContainerRef, static: true }),
+    tslib_1.__metadata("design:type", core_1.ViewContainerRef)
+], NgDocPlaygroundPropertyComponent.prototype, "propertyOutlet", void 0);
+tslib_1.__decorate([
+    (0, core_1.HostBinding)('attr.data-has-property-control'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], NgDocPlaygroundPropertyComponent.prototype, "hasPropertyControl", null);
+NgDocPlaygroundPropertyComponent = tslib_1.__decorate([
+    (0, core_1.Component)({
+        selector: 'ng-doc-playground-property',
+        templateUrl: './playground-property.component.html',
+        styleUrls: ['./playground-property.component.scss'],
+        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
+    }),
+    tslib_1.__metadata("design:paramtypes", [core_1.Injector])
+], NgDocPlaygroundPropertyComponent);
+exports.NgDocPlaygroundPropertyComponent = NgDocPlaygroundPropertyComponent;

package/engine/.cache/libs/app/components/playground-property/playground-property.module.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NgDocPlaygroundPropertyModule = void 0;
+const tslib_1 = require("tslib");
+const common_1 = require("@angular/common");
+const core_1 = require("@angular/core");
+const forms_1 = require("@angular/forms");
+const ui_kit_1 = require("@ng-doc/ui-kit");
+const ng_polymorpheus_1 = require("@tinkoff/ng-polymorpheus");
+const playground_property_component_1 = require("./playground-property.component");
+let NgDocPlaygroundPropertyModule = class NgDocPlaygroundPropertyModule {
+};
+NgDocPlaygroundPropertyModule = tslib_1.__decorate([
+    (0, core_1.NgModule)({
+        declarations: [playground_property_component_1.NgDocPlaygroundPropertyComponent],
+        imports: [common_1.CommonModule, ui_kit_1.NgDocLabelModule, ui_kit_1.NgDocTooltipModule, ng_polymorpheus_1.PolymorpheusModule, forms_1.ReactiveFormsModule],
+        exports: [playground_property_component_1.NgDocPlaygroundPropertyComponent],
+    })
+], NgDocPlaygroundPropertyModule);
+exports.NgDocPlaygroundPropertyModule = NgDocPlaygroundPropertyModule;

package/engine/.cache/libs/app/components/root/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./root.component"), exports);
+tslib_1.__exportStar(require("./root.module"), exports);