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

package/assets/themes/ng-doc-dark-purple.css

@@ -0,0 +1,112 @@
+/*!
+  Theme: Hardcore
+  Author: Chris Caller
+  License: ~ MIT (or more permissive) [via base16-schemes-source]
+  Maintainer: @highlightjs/core-team
+  Version: 2021.09.0
+*/
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+.hljs {
+  color: #cdcdcd;
+  background: #212121;
+}
+
+.hljs ::selection, .hljs::selection {
+  background-color: #353535;
+  color: #cdcdcd;
+}
+
+.hljs-comment {
+  color: #4a4a4a;
+}
+
+.hljs-tag {
+  color: #707070;
+}
+
+.hljs-operator, .hljs-punctuation, .hljs-subst {
+  color: #cdcdcd;
+}
+
+.hljs-operator {
+  opacity: 0.7;
+}
+
+.hljs-bullet, .hljs-deletion, .hljs-name, .hljs-selector-tag, .hljs-template-variable, .hljs-variable {
+  color: #f92672;
+}
+
+.hljs-attr, .hljs-link, .hljs-literal, .hljs-number, .hljs-symbol, .hljs-variable.constant_ {
+  color: #fd971f;
+}
+
+.hljs-class .hljs-title, .hljs-title, .hljs-title.class_ {
+  color: #e6db74;
+}
+
+.hljs-strong {
+  font-weight: 700;
+  color: #e6db74;
+}
+
+.hljs-addition, .hljs-code, .hljs-string, .hljs-title.class_.inherited__ {
+  color: #a6e22e;
+}
+
+.hljs-built_in, .hljs-doctag, .hljs-keyword.hljs-atrule, .hljs-quote, .hljs-regexp {
+  color: #708387;
+}
+
+.hljs-attribute, .hljs-function .hljs-title, .hljs-section, .hljs-title.function_, .ruby .hljs-property {
+  color: #66d9ef;
+}
+
+.diff .hljs-meta, .hljs-keyword, .hljs-template-tag, .hljs-type {
+  color: #9e6ffe;
+}
+
+.hljs-emphasis {
+  color: #9e6ffe;
+  font-style: italic;
+}
+
+.hljs-meta, .hljs-meta .hljs-keyword, .hljs-meta .hljs-string {
+  color: #e8b882;
+}
+
+.hljs-meta .hljs-keyword, .hljs-meta-keyword {
+  font-weight: 700;
+}
+
+:root {
+  --ng-doc-base-0: #2a2438;
+  --ng-doc-base-1: #352f44;
+  --ng-doc-base-2: #474057;
+  --ng-doc-base-3: #453d57;
+  --ng-doc-base-4: #5e5474;
+  --ng-doc-base-5: #41365a;
+  --ng-doc-base-6: #5e5474;
+  --ng-doc-base-7: #625c71;
+  --ng-doc-base-8: #a19baf;
+  --ng-doc-base-9: var(--ng-doc-grey-100);
+  --ng-doc-base-10: var(--ng-doc-grey-90);
+  --ng-doc-base-11: var(--ng-doc-grey-80);
+  --ng-doc-text: var(--ng-doc-white);
+  --ng-doc-shadow-color: rgb(var(--ng-doc-grey-rgb));
+  --ng-doc-code-background: #281f2e;
+  --ng-doc-link-color: var(--ng-doc-pink-120);
+  --ng-doc-link-color-rgb: var(--ng-doc-pink-rgb);
+}
+
+pre code.hljs {
+  background-color: #27202e;
+}

package/assets/themes/ng-doc-night.css

@@ -14,4 +14,5 @@
   --ng-doc-text: var(--ng-doc-white);
   --ng-doc-shadow-color: rgb(var(--ng-doc-grey-rgb));
   --ng-doc-link-color: var(--ng-doc-light-blue-100);
+  --ng-doc-link-color-rgb: var(--ng-doc-light-blue-rgb);
 }

package/classes/index.d.ts

@@ -1,3 +1,2 @@
-export * from '@ng-doc/app/classes/html-parser';
 export * from '@ng-doc/app/classes/root-page';
 export * from '@ng-doc/app/classes/search-engine';

package/classes/root-page/root-page.d.ts

@@ -1,10 +1,29 @@
-import { Type } from '@angular/core';
 import { NgDocDemoAssets } from '@ng-doc/app/interfaces';
-import { NgDocPlayground } from '@ng-doc/core';
+import { NgDocPageType } from '@ng-doc/core';
+import { NgDocDependencies } from '@ng-doc/core/interfaces';
+/**
+ * Base class for NgDoc page
+ */
 export declare abstract class NgDocRootPage {
+    abstract readonly pageType: NgDocPageType;
+    /**
+     * Html content of the page
+     */
     abstract readonly pageContent: string;
-    abstract readonly module?: Type<object>;
-    abstract readonly demo?: Record<string, Type<object>>;
+    /**
+     * Edit URL that can be used to edit the page source file in the repository
+     */
+    abstract readonly editSourceFileUrl?: string;
+    /**
+     * View URL that can be used to view the page source file in the repository
+     */
+    abstract readonly viewSourceFileUrl?: string;
+    /**
+     * The page dependencies file
+     */
+    abstract readonly dependencies?: NgDocDependencies;
+    /**
+     * The page demo assets that have code examples of the demo components
+     */
     abstract readonly demoAssets?: NgDocDemoAssets;
-    abstract readonly playground?: NgDocPlayground;
 }

package/classes/search-engine/search-engine.d.ts

@@ -1,4 +1,4 @@
-import { NgDocPageInfo } from '@ng-doc/core';
+import { NgDocPageInfo } from '@ng-doc/core/interfaces';
 import { Observable } from 'rxjs';
 export declare class NgDocSearchEngine {
     private index$;

package/components/api-list/api-list.component.d.ts

@@ -1,10 +1,11 @@
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { NgDocApiList } from '@ng-doc/core';
+import { NgDocApiList } from '@ng-doc/core/interfaces';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 interface ApiFilterForm {
     filter: FormControl<string | null>;
+    scope: FormControl<string | null>;
     type: FormControl<string | null>;
 }
 export declare class NgDocApiListComponent {
@@ -12,12 +13,10 @@ export declare class NgDocApiListComponent {
     private readonly formBuilder;
     private readonly route;
     private readonly router;
-    /**
-     * My comment
-     */
     formGroup: FormGroup<ApiFilterForm>;
     api$: Observable<NgDocApiList[]>;
     constructor(apiList: NgDocApiList[], formBuilder: FormBuilder, route: ActivatedRoute, router: Router);
+    get scopes(): string[];
     get types(): string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocApiListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocApiListComponent, "ng-doc-api-list", never, {}, {}, never, never, false, never>;

package/components/api-list/api-list.module.d.ts

@@ -7,6 +7,6 @@ import * as i5 from "@angular/router";
 import * as i6 from "@angular/forms";
 export declare class NgDocApiListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocApiListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocApiListModule, [typeof i1.NgDocApiListComponent], [typeof i2.CommonModule, typeof i3.NgDocTextModule, typeof i4.NgDocKindIconModule, typeof i3.NgDocTooltipModule, typeof i5.RouterModule, typeof i3.NgDocInputWrapperModule, typeof i3.NgDocInputStringModule, typeof i6.FormsModule, typeof i3.NgDocComboboxModule, typeof i3.NgDocOptionModule, typeof i3.NgDocDataModule, typeof i3.NgDocListModule, typeof i3.NgDocLabelModule, typeof i6.ReactiveFormsModule, typeof i3.NgDocIconModule], [typeof i1.NgDocApiListComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocApiListModule, [typeof i1.NgDocApiListComponent], [typeof i2.CommonModule, typeof i3.NgDocTextModule, typeof i4.NgDocKindIconModule, typeof i3.NgDocTooltipModule, typeof i5.RouterModule, typeof i3.NgDocInputWrapperModule, typeof i3.NgDocInputStringModule, typeof i6.FormsModule, typeof i3.NgDocComboboxModule, typeof i3.NgDocOptionModule, typeof i3.NgDocDataModule, typeof i3.NgDocListModule, typeof i3.NgDocLabelModule, typeof i6.ReactiveFormsModule, typeof i3.NgDocIconModule, typeof i3.NgDocAutofocusModule], [typeof i1.NgDocApiListComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgDocApiListModule>;
 }

package/components/demo/demo.component.d.ts

@@ -1,18 +1,19 @@
 import { OnInit } from '@angular/core';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { NgDocDemoAsset } from '@ng-doc/app/interfaces';
-import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus';
+import { NgDocDemoActionOptions } from '@ng-doc/core/interfaces';
+import { NgDocContent } from '@ng-doc/ui-kit/types';
 import * as i0 from "@angular/core";
 export declare class NgDocDemoComponent implements OnInit {
     private readonly rootPage;
     componentName?: string;
-    container: boolean;
-    demo?: PolymorpheusComponent<object, object>;
+    options: NgDocDemoActionOptions;
+    demo?: NgDocContent<object>;
     assets: NgDocDemoAsset[];
     constructor(rootPage: NgDocRootPage);
     ngOnInit(): void;
     private getDemo;
     private getAssets;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDemoComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoComponent, "ng-doc-demo", never, { "componentName": "componentName"; "container": "container"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoComponent, "ng-doc-demo", never, { "componentName": "componentName"; "options": "options"; }, {}, never, never, false, never>;
 }

package/components/demo-displayer/demo-displayer.component.d.ts

@@ -13,5 +13,5 @@ export declare class NgDocDemoDisplayerComponent {
     constructor(notifyService: NgDocNotifyService, clipboard: Clipboard);
     copyCode(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDemoDisplayerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoDisplayerComponent, "ng-doc-demo-displayer", never, { "codeContent": "codeContent"; "code": "code"; "language": "language"; "container": "container"; "border": "border"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocDemoDisplayerComponent, "ng-doc-demo-displayer", never, { "codeContent": "codeContent"; "code": "code"; "language": "language"; "container": "container"; "border": "border"; "expanded": "expanded"; }, {}, never, ["*"], false, never>;
 }

package/components/demo-displayer/demo-displayer.module.d.ts

@@ -4,8 +4,9 @@ import * as i2 from "@angular/common";
 import * as i3 from "@tinkoff/ng-polymorpheus";
 import * as i4 from "@ng-doc/ui-kit";
 import * as i5 from "@ng-doc/app/components/code";
+import * as i6 from "@ng-doc/app/directives/code-highlighter";
 export declare class NgDocDemoDisplayerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocDemoDisplayerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocDemoDisplayerModule, [typeof i1.NgDocDemoDisplayerComponent], [typeof i2.CommonModule, typeof i3.PolymorpheusModule, typeof i4.NgDocExpanderModule, typeof i5.NgDocCodeModule, typeof i4.NgDocButtonIconModule, typeof i4.NgDocIconModule, typeof i4.NgDocTooltipModule], [typeof i1.NgDocDemoDisplayerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocDemoDisplayerModule, [typeof i1.NgDocDemoDisplayerComponent], [typeof i2.CommonModule, typeof i3.PolymorpheusModule, typeof i4.NgDocExpanderModule, typeof i5.NgDocCodeModule, typeof i4.NgDocButtonIconModule, typeof i4.NgDocIconModule, typeof i4.NgDocTooltipModule, typeof i6.NgDocCodeHighlighterModule], [typeof i1.NgDocDemoDisplayerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgDocDemoDisplayerModule>;
 }

package/components/index.d.ts

@@ -6,6 +6,7 @@ export * from '@ng-doc/app/components/kind-icon';
 export * from '@ng-doc/app/components/link';
 export * from '@ng-doc/app/components/navbar';
 export * from '@ng-doc/app/components/page';
+export * from '@ng-doc/app/components/playground';
 export * from '@ng-doc/app/components/root';
 export * from '@ng-doc/app/components/search';
 export * from '@ng-doc/app/components/search-result';

package/components/navbar/navbar.component.d.ts

@@ -2,15 +2,33 @@ import { ChangeDetectorRef, NgZone } from '@angular/core';
 import { NgDocSidebarService } from '@ng-doc/app/services';
 import { NgDocContent } from '@ng-doc/ui-kit';
 import * as i0 from "@angular/core";
+/**
+ * Navbar component for ng-doc application
+ */
 export declare class NgDocNavbarComponent {
     private readonly window;
     private readonly ngZone;
     private readonly changeDetectorRef;
     protected readonly sidebarService: NgDocSidebarService;
+    /**
+     * Content for left side of navbar
+     */
     leftContent: NgDocContent;
+    /**
+     * Content for center side of navbar
+     */
     centerContent: NgDocContent;
+    /**
+     * Content for right side of navbar
+     */
     rightContent: NgDocContent;
+    /**
+     * Show search input
+     */
     search: boolean;
+    /**
+     * Indicates if navbar has shadow
+     */
     hasShadow: boolean;
     constructor(window: Window, ngZone: NgZone, changeDetectorRef: ChangeDetectorRef, sidebarService: NgDocSidebarService);
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocNavbarComponent, never>;

package/components/navbar/navbar.module.d.ts

@@ -3,9 +3,11 @@ import * as i1 from "./navbar.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@tinkoff/ng-polymorpheus";
 import * as i4 from "@ng-doc/app/components/search";
-import * as i5 from "@ng-doc/ui-kit";
+import * as i5 from "@ng-doc/ui-kit/components/button-icon";
+import * as i6 from "@ng-doc/ui-kit/components/icon";
+import * as i7 from "@ng-doc/ui-kit/directives/let";
 export declare class NgDocNavbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocNavbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocNavbarModule, [typeof i1.NgDocNavbarComponent], [typeof i2.CommonModule, typeof i3.PolymorpheusModule, typeof i4.NgDocSearchModule, typeof i5.NgDocButtonIconModule, typeof i5.NgDocIconModule, typeof i5.NgDocMediaQueryModule, typeof i5.NgDocLetModule], [typeof i1.NgDocNavbarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocNavbarModule, [typeof i1.NgDocNavbarComponent], [typeof i2.CommonModule, typeof i3.PolymorpheusModule, typeof i4.NgDocSearchModule, typeof i5.NgDocButtonIconModule, typeof i6.NgDocIconModule, typeof i7.NgDocLetModule], [typeof i1.NgDocNavbarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgDocNavbarModule>;
 }

package/components/page/page.component.d.ts

@@ -1,8 +1,16 @@
+import { Router } from '@angular/router';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
+import { NgDocContext, NgDocNavigation } from '@ng-doc/app/interfaces';
 import * as i0 from "@angular/core";
 export declare class NgDocPageComponent {
+    private readonly context;
+    private readonly router;
     readonly rootPage: NgDocRootPage;
-    constructor(rootPage: NgDocRootPage);
+    readonly prevPage?: NgDocNavigation;
+    readonly nextPage?: NgDocNavigation;
+    constructor(context: NgDocContext, router: Router, rootPage: NgDocRootPage);
+    private flatPages;
+    private get url();
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPageComponent, "ng-doc-page", never, {}, {}, never, never, false, never>;
 }

package/components/page/page.module.d.ts

@@ -1,12 +1,14 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./page.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@ng-doc/app/processors";
-import * as i4 from "@ng-doc/app/pipes/sanitize-html";
-import * as i5 from "@ng-doc/app/components/toc";
-import * as i6 from "@ng-doc/ui-kit";
+import * as i2 from "@ng-doc/app/type-controls";
+import * as i3 from "@angular/common";
+import * as i4 from "@ng-doc/app/processors";
+import * as i5 from "@ng-doc/app/pipes/sanitize-html";
+import * as i6 from "@ng-doc/app/components/toc";
+import * as i7 from "@ng-doc/ui-kit";
+import * as i8 from "@angular/router";
 export declare class NgDocPageModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPageModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocPageModule, [typeof i1.NgDocPageComponent], [typeof i2.CommonModule, typeof i3.NgDocDemoProcessorModule, typeof i3.NgDocCodeProcessorModule, typeof i3.NgDocBlockquoteProcessorModule, typeof i4.NgDocSanitizeHtmlModule, typeof i3.NgDocIconProcessorModule, typeof i5.NgDocPageMapModule, typeof i6.NgDocMediaQueryModule, typeof i3.NgDocTooltipProcessorModule], [typeof i1.NgDocPageComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocPageModule, [typeof i1.NgDocPageComponent], [typeof i2.NgDocBooleanControlModule, typeof i2.NgDocNumberControlModule, typeof i2.NgDocStringControlModule, typeof i2.NgDocTypeAliasControlModule, typeof i3.CommonModule, typeof i4.NgDocDemoProcessorModule, typeof i4.NgDocCodeProcessorModule, typeof i4.NgDocBlockquoteProcessorModule, typeof i5.NgDocSanitizeHtmlModule, typeof i4.NgDocIconProcessorModule, typeof i6.NgDocPageMapModule, typeof i7.NgDocMediaQueryModule, typeof i4.NgDocTooltipProcessorModule, typeof i7.NgDocButtonIconModule, typeof i7.NgDocIconModule, typeof i7.NgDocTooltipModule, typeof i4.NgDocPlaygroundProcessorModule, typeof i8.RouterLink, typeof i7.NgDocButtonModule, typeof i7.NgDocTextModule], [typeof i1.NgDocPageComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgDocPageModule>;
 }

package/components/playground/base-playground.d.ts

@@ -0,0 +1,15 @@
+import { Type, ViewContainerRef } from '@angular/core';
+import { NgDocPlaygroundConfig } from '@ng-doc/core/interfaces';
+import * as i0 from "@angular/core";
+/**
+ * Base class for playgrounds components.
+ */
+export declare abstract class NgDocBasePlayground implements Pick<NgDocPlaygroundConfig, 'data'> {
+    static readonly selector: string;
+    abstract readonly playground?: Type<unknown>;
+    abstract readonly viewContainerRef?: ViewContainerRef;
+    data: Record<string, unknown>;
+    content: any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocBasePlayground, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocBasePlayground, never, never, {}, {}, never, never, false, never>;
+}

package/components/playground/index.d.ts

@@ -1,2 +1,7 @@
+export * from './base-playground';
 export * from './playground.component';
 export * from './playground.module';
+export * from './playground-demo/playground-demo.component';
+export * from './playground-form';
+export * from './playground-properties/playground-properties.component';
+export * from './playground-property/playground-property.component';

package/components/playground/playground-demo/playground-demo.component.d.ts

@@ -0,0 +1,33 @@
+import { Injector, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
+import { NgDocPlaygroundConfig, NgDocPlaygroundProperties } from '@ng-doc/core/interfaces';
+import { Observable } from 'rxjs';
+import { NgDocBasePlayground } from '../base-playground';
+import { NgDocPlaygroundForm } from '../playground-form';
+import * as i0 from "@angular/core";
+export declare class NgDocPlaygroundDemoComponent<T extends NgDocPlaygroundProperties = NgDocPlaygroundProperties> implements OnChanges, OnDestroy {
+    private readonly rootPage;
+    private readonly injector;
+    id: string;
+    selector: string;
+    configuration?: NgDocPlaygroundConfig;
+    properties?: T;
+    recreateDemo: boolean;
+    form: FormGroup<NgDocPlaygroundForm>;
+    demoOutlet?: ViewContainerRef;
+    playgroundDemo?: typeof NgDocBasePlayground;
+    code: Observable<string>;
+    private demoRef?;
+    private readonly unsubscribe$;
+    constructor(rootPage: NgDocRootPage, injector: Injector);
+    ngOnChanges({ form, id }: SimpleChanges): void;
+    private updateDemo;
+    private renderDemo;
+    private updateCodeView;
+    private getActiveContent;
+    private getActiveInputs;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPlaygroundDemoComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPlaygroundDemoComponent<any>, "ng-doc-playground-demo", never, { "id": "id"; "selector": "selector"; "configuration": "configuration"; "properties": "properties"; "recreateDemo": "recreateDemo"; "form": "form"; }, {}, never, never, false, never>;
+}

package/components/playground/playground-form.d.ts

@@ -0,0 +1,6 @@
+import { FormControl, FormGroup } from '@angular/forms';
+import { NgDocExtractedValue } from '@ng-doc/core/types';
+export interface NgDocPlaygroundForm {
+    properties: FormGroup<Record<string, FormControl<NgDocExtractedValue>>>;
+    content: FormGroup<Record<string, FormControl<boolean>>>;
+}

package/components/playground/playground-properties/playground-properties.component.d.ts

@@ -0,0 +1,22 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { EventEmitter } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { NgDocPlaygroundContent, NgDocPlaygroundProperties } from '@ng-doc/core/interfaces';
+import { Observable } from 'rxjs';
+import { NgDocPlaygroundForm } from '../playground-form';
+import * as i0 from "@angular/core";
+export declare class NgDocPlaygroundPropertiesComponent<P extends NgDocPlaygroundProperties, C extends Record<string, NgDocPlaygroundContent>> {
+    protected readonly breakpointObserver: BreakpointObserver;
+    form: FormGroup<NgDocPlaygroundForm>;
+    properties?: P;
+    dynamicContent?: C;
+    recreateDemo: boolean;
+    recreateDemoChange: EventEmitter<boolean>;
+    resetForm: EventEmitter<void>;
+    readonly breakpoints: string[];
+    readonly observer: Observable<boolean>;
+    constructor(breakpointObserver: BreakpointObserver);
+    getFormControl(controlType: keyof typeof this.form.controls, key: string): FormControl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPlaygroundPropertiesComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocPlaygroundPropertiesComponent<any, any>, "ng-doc-playground-properties", never, { "form": "form"; "properties": "properties"; "dynamicContent": "dynamicContent"; "recreateDemo": "recreateDemo"; }, { "recreateDemoChange": "recreateDemoChange"; "resetForm": "resetForm"; }, never, ["*"], false, never>;
+}

package/components/{playground-property → playground/playground-property}/playground-property.component.d.ts

@@ -1,12 +1,12 @@
 import { Injector, OnChanges, SimpleChanges, ViewContainerRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { NgDocTypeControlProviderOptions } from '@ng-doc/app/interfaces';
-import { NgDocPlaygroundDynamicContent, NgDocPlaygroundProperty } from '@ng-doc/core';
+import { NgDocPlaygroundContent, NgDocPlaygroundProperty } from '@ng-doc/core/interfaces';
 import * as i0 from "@angular/core";
 export declare class NgDocPlaygroundPropertyComponent implements OnChanges {
     private readonly injector;
     name: string;
-    property?: NgDocPlaygroundProperty | NgDocPlaygroundDynamicContent;
+    property?: NgDocPlaygroundProperty | NgDocPlaygroundContent;
     control?: FormControl;
     propertyOutlet?: ViewContainerRef;
     option?: NgDocTypeControlProviderOptions;

package/components/playground/playground.component.d.ts

@@ -1,16 +1,17 @@
 import { OnInit } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { NgDocRootPage } from '@ng-doc/app/classes';
-import { NgDocPlaygroundConfig, NgDocPlaygroundProperties } from '@ng-doc/core';
+import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
+import { NgDocPlaygroundConfig, NgDocPlaygroundProperties } from '@ng-doc/core/interfaces';
+import { NgDocPlaygroundForm } from './playground-form';
 import * as i0 from "@angular/core";
 export declare class NgDocPlaygroundComponent<T extends NgDocPlaygroundProperties = NgDocPlaygroundProperties> implements OnInit {
     private readonly rootPage;
     private readonly formBuilder;
-    id?: string;
+    id: string;
     selectors: string[];
     properties?: T;
-    formGroup?: FormGroup;
-    reinitializeDemo: boolean;
+    formGroup: FormGroup<NgDocPlaygroundForm>;
+    recreateDemo: boolean;
     constructor(rootPage: NgDocRootPage, formBuilder: FormBuilder);
     ngOnInit(): void;
     get configuration(): NgDocPlaygroundConfig | undefined;

package/components/playground/playground.module.d.ts

@@ -1,12 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./playground.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
-import * as i4 from "@ng-doc/ui-kit";
-import * as i5 from "@ng-doc/app/components/playground-demo";
-import * as i6 from "@ng-doc/app/components/playground-properties";
+import * as i2 from "./playground-property/playground-property.component";
+import * as i3 from "./playground-properties/playground-properties.component";
+import * as i4 from "./playground-demo/playground-demo.component";
+import * as i5 from "@angular/common";
+import * as i6 from "@angular/forms";
+import * as i7 from "@ng-doc/ui-kit";
+import * as i8 from "@tinkoff/ng-polymorpheus";
+import * as i9 from "@ng-doc/app/components/demo-displayer";
 export declare class NgDocPlaygroundModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocPlaygroundModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocPlaygroundModule, [typeof i1.NgDocPlaygroundComponent], [typeof i2.CommonModule, typeof i3.ReactiveFormsModule, typeof i4.NgDocAsArrayModule, typeof i5.NgDocPlaygroundDemoModule, typeof i6.NgDocPlaygroundPropertiesModule], [typeof i1.NgDocPlaygroundComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocPlaygroundModule, [typeof i1.NgDocPlaygroundComponent, typeof i2.NgDocPlaygroundPropertyComponent, typeof i3.NgDocPlaygroundPropertiesComponent, typeof i4.NgDocPlaygroundDemoComponent], [typeof i5.CommonModule, typeof i6.ReactiveFormsModule, typeof i7.NgDocLabelModule, typeof i7.NgDocTooltipModule, typeof i8.PolymorpheusModule, typeof i7.NgDocAsArrayModule, typeof i7.NgDocButtonIconModule, typeof i7.NgDocIconModule, typeof i7.NgDocTextModule, typeof i7.NgDocCheckboxModule, typeof i6.FormsModule, typeof i7.NgDocButtonModule, typeof i9.NgDocDemoDisplayerModule], [typeof i1.NgDocPlaygroundComponent, typeof i2.NgDocPlaygroundPropertyComponent, typeof i3.NgDocPlaygroundPropertiesComponent, typeof i4.NgDocPlaygroundDemoComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgDocPlaygroundModule>;
 }

package/components/root/root.component.d.ts

@@ -2,8 +2,42 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { Location } from '@angular/common';
 import { ElementRef, NgZone } from '@angular/core';
 import { Router } from '@angular/router';
-import { NgDocSidebarService } from '@ng-doc/app/services';
+import { NgDocSidebarService } from '@ng-doc/app/services/sidebar';
 import * as i0 from "@angular/core";
+/**
+ * Directive uses for providing custom navbar, you should mark element with this directive
+ * and the `NgDocRootComponent` will use it as a navbar
+ *
+ * ```html
+ * <ng-doc-root>
+ *     <my-custom-navbar ngDocCustomNavbar></my-custom-navbar>
+ *
+ *     <ng-doc-sidebar></ng-doc-sidebar>
+ *     <router-outlet></router-outlet>
+ * </ng-doc-root>
+ * ```
+ */
+export declare class NgDocCustomNavbarDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocCustomNavbarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocCustomNavbarDirective, "[ngDocCustomNavbar]", never, {}, {}, never, never, false, never>;
+}
+/**
+ * Directive uses for providing custom sidebar, you should mark element with this directive
+ * and the `NgDocRootComponent` will use it as a sidebar
+ *
+ * ```html
+ * <ng-doc-root>
+ *     <ng-doc-navbar></ng-doc-sidebar>
+ *
+ *     <my-custom-sidebar ngDocCustomSidebar></my-custom-sidebar>
+ *     <router-outlet></router-outlet>
+ * </ng-doc-root>
+ * ```
+ */
+export declare class NgDocCustomSidebarDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDocCustomSidebarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgDocCustomSidebarDirective, "[ngDocCustomSidebar]", never, {}, {}, never, never, false, never>;
+}
 export declare class NgDocRootComponent {
     private readonly elementRef;
     private readonly ngZone;
@@ -15,5 +49,5 @@ export declare class NgDocRootComponent {
     constructor(elementRef: ElementRef<HTMLElement>, ngZone: NgZone, router: Router, location: Location, breakpointObserver: BreakpointObserver, sidebarService: NgDocSidebarService, window: Window);
     private isPointerEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocRootComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocRootComponent, "ng-doc-root", never, {}, {}, never, ["ng-doc-navbar", "ng-doc-sidebar", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgDocRootComponent, "ng-doc-root", never, {}, {}, never, ["ng-doc-navbar", "[ngDocCustomNavbar]", "ng-doc-sidebar", "[ngDocCustomSidebar]", "*"], false, never>;
 }

package/components/root/root.module.d.ts

@@ -1,9 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./root.component";
 import * as i2 from "@angular/common";
-import * as i3 from "@ng-doc/ui-kit";
+import * as i3 from "@ng-doc/ui-kit/directives/media-query";
 export declare class NgDocRootModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocRootModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocRootModule, [typeof i1.NgDocRootComponent], [typeof i2.CommonModule, typeof i3.NgDocMediaQueryModule], [typeof i1.NgDocRootComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocRootModule, [typeof i1.NgDocRootComponent, typeof i1.NgDocCustomNavbarDirective, typeof i1.NgDocCustomSidebarDirective], [typeof i2.CommonModule, typeof i3.NgDocMediaQueryModule], [typeof i1.NgDocRootComponent, typeof i1.NgDocCustomNavbarDirective, typeof i1.NgDocCustomSidebarDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgDocRootModule>;
 }

package/components/search/search.component.d.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { NgDocSearchEngine } from '@ng-doc/app/classes/search-engine';
-import { NgDocPageInfo } from '@ng-doc/core';
+import { NgDocPageInfo } from '@ng-doc/core/interfaces/page-info';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare class NgDocSearchComponent {

package/components/search/search.module.d.ts

@@ -6,6 +6,6 @@ import * as i4 from "@angular/forms";
 import * as i5 from "@ng-doc/app/components/search-result";
 export declare class NgDocSearchModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NgDocSearchModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocSearchModule, [typeof i1.NgDocSearchComponent], [typeof i2.CommonModule, typeof i3.NgDocInputWrapperModule, typeof i3.NgDocInputStringModule, typeof i3.NgDocDropdownModule, typeof i3.NgDocDropdownOriginModule, typeof i3.NgDocFocusCatcherModule, typeof i4.FormsModule, typeof i5.NgDocSearchResultModule, typeof i3.NgDocIconModule, typeof i3.NgDocButtonIconModule, typeof i3.NgDocAutofocusModule], [typeof i1.NgDocSearchComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDocSearchModule, [typeof i1.NgDocSearchComponent], [typeof i2.CommonModule, typeof i3.NgDocInputWrapperModule, typeof i3.NgDocInputStringModule, typeof i3.NgDocDropdownModule, typeof i3.NgDocDropdownOriginModule, typeof i3.NgDocFocusCatcherModule, typeof i4.FormsModule, typeof i5.NgDocSearchResultModule, typeof i3.NgDocIconModule, typeof i3.NgDocButtonIconModule, typeof i3.NgDocAutofocusModule, typeof i3.NgDocTagModule, typeof i3.NgDocHotkeyModule], [typeof i1.NgDocSearchComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NgDocSearchModule>;
 }

package/components/search-result/search-result.component.d.ts

@@ -1,5 +1,5 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
-import { NgDocPageInfo } from '@ng-doc/core';
+import { NgDocPageInfo } from '@ng-doc/core/interfaces';
 import * as i0 from "@angular/core";
 export declare class NgDocSearchResultComponent implements OnChanges {
     result: NgDocPageInfo[] | null;

package/components/sidebar/sidebar-category/sidebar-category.component.d.ts

@@ -1,14 +1,14 @@
 import { ChangeDetectorRef, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { NgDocNavigation } from '@ng-doc/app/interfaces';
-import { PolymorpheusContent } from '@tinkoff/ng-polymorpheus';
+import { NgDocContent } from '@ng-doc/ui-kit/types';
 import * as i0 from "@angular/core";
 export declare class NgDocSidebarCategoryComponent implements OnInit {
     private readonly router;
     private readonly changeDetectorRef;
     category?: NgDocNavigation;
     isRoot: boolean;
-    content: PolymorpheusContent;
+    content: NgDocContent;
     expandable: boolean;
     expanded: boolean;
     constructor(router: Router, changeDetectorRef: ChangeDetectorRef);