@ng-doc/app 15.11.3 → 15.13.0

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

@@ -46,15 +46,24 @@ let NgDocNavbarComponent = class NgDocNavbarComponent {
          * Show search input
          */
         this.search = true;
+        /**
+         * Show hamburger button
+         */
+        this.hamburger = true;
+        /**
+         * Use glass effect for navbar
+         */
+        this.glassEffect = true;
         /**
          * Indicates if navbar has shadow
          */
         this.hasShadow = false;
         combineLatest([
             fromEvent(this.window, 'scroll').pipe(map((e) => (e.target?.scrollingElement?.scrollTop ?? 0) > 0), distinctUntilChanged(), startWith(false)),
+            this.sidebarService.isMobileMode(),
             this.sidebarService.isExpanded(),
         ])
-            .pipe(map(([scrolled, sidebarVisible]) => scrolled || sidebarVisible), ngDocZoneOptimize(this.ngZone), untilDestroyed(this))
+            .pipe(map(([scrolled, isMobileMode, isExpanded]) => scrolled || (isMobileMode && isExpanded)), ngDocZoneOptimize(this.ngZone), untilDestroyed(this))
             .subscribe((hasShadow) => {
             this.hasShadow = hasShadow;
             this.changeDetectorRef.markForCheck();
@@ -62,7 +71,7 @@ let NgDocNavbarComponent = class NgDocNavbarComponent {
     }
 };
 NgDocNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocNavbarComponent, deps: [{ token: WINDOW }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.NgDocSidebarService }], target: i0.ɵɵFactoryTarget.Component });
-NgDocNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocNavbarComponent, selector: "ng-doc-navbar", inputs: { leftContent: "leftContent", centerContent: "centerContent", rightContent: "rightContent", search: "search" }, host: { properties: { "class.has-shadow": "this.hasShadow" } }, ngImport: i0, template: "<div class=\"navbar-container\" *ngDocLet=\"sidebarService.isCollapsable() | async as isCollapsable\">\n\t<div class=\"ng-doc-navbar-left\">\n\t\t<ng-container *polymorpheusOutlet=\"leftContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-center\">\n\t\t<ng-doc-search *ngIf=\"search && !isCollapsable\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"centerContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-right\">\n\t\t<ng-doc-search *ngIf=\"search && isCollapsable\" mod=\"icon\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"rightContent\"></ng-container>\n\t\t<button\n\t\t\tclass=\"ng-doc-menu\"\n\t\t\t*ngIf=\"isCollapsable\"\n\t\t\tng-doc-button-icon\n\t\t\tsize=\"large\"\n\t\t\t(click)=\"sidebarService.toggle()\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;transition:var(--ng-doc-transition) box-shadow}:host{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}:host:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ng-doc-navbar-background);opacity:.4}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host.has-shadow{box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;align-items:center;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-center,:host .ng-doc-navbar-right{display:flex}:host .ng-doc-navbar-left{justify-content:flex-start;width:var(--ng-doc-navbar-left-width);flex-shrink:0}:host .ng-doc-navbar-center{padding-left:calc(var(--ng-doc-base-gutter) * 4);justify-content:flex-start;width:100%}:host .ng-doc-navbar-right{justify-content:flex-end}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i4.NgDocSearchComponent, selector: "ng-doc-search", inputs: ["mod"] }, { kind: "component", type: i5.NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon]", inputs: ["size", "rounded"] }, { kind: "component", type: i6.NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "size"] }, { kind: "directive", type: i7.NgDocLetDirective, selector: "[ngDocLet]", inputs: ["ngDocLet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgDocNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocNavbarComponent, selector: "ng-doc-navbar", inputs: { leftContent: "leftContent", centerContent: "centerContent", rightContent: "rightContent", search: "search", hamburger: "hamburger", glassEffect: "glassEffect" }, host: { properties: { "attr.data-glass-effect": "this.glassEffect", "class.has-shadow": "this.hasShadow" } }, ngImport: i0, template: "<div class=\"navbar-container\" *ngDocLet=\"sidebarService.isMobileMode() | async as isMobileMode\">\n\t<div class=\"ng-doc-navbar-left\">\n\t\t<ng-container *polymorpheusOutlet=\"leftContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-center\">\n\t\t<ng-container *polymorpheusOutlet=\"centerContent\"></ng-container>\n\t\t<ng-doc-search *ngIf=\"search && !isMobileMode\"></ng-doc-search>\n\t</div>\n\t<div class=\"ng-doc-navbar-right\">\n\t\t<ng-doc-search *ngIf=\"search && isMobileMode\" mod=\"icon\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"rightContent\"></ng-container>\n\t\t<button\n\t\t\tclass=\"ng-doc-menu\"\n\t\t\t*ngIf=\"isMobileMode && hamburger\"\n\t\t\tng-doc-button-icon\n\t\t\tsize=\"large\"\n\t\t\t(click)=\"sidebarService.toggle()\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;transition:var(--ng-doc-transition) box-shadow}:host:not([data-glass-effect=false]){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}:host:not([data-glass-effect=false]):before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ng-doc-navbar-background);opacity:.4}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host[data-glass-effect=false]{background-color:var(--ng-doc-navbar-background)}:host.has-shadow{box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-center,:host .ng-doc-navbar-right{display:flex;align-items:center}:host .ng-doc-navbar-left{justify-content:flex-start;width:100%;max-width:var(--ng-doc-navbar-left-width)}:host .ng-doc-navbar-center{padding:0 var(--ng-doc-app-horizontal-padding);justify-content:flex-start;max-width:calc(100% - var(--ng-doc-toc-width))}:host .ng-doc-navbar-right{justify-content:flex-end;margin-left:auto}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i4.NgDocSearchComponent, selector: "ng-doc-search", inputs: ["mod"] }, { kind: "component", type: i5.NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon]", inputs: ["size", "rounded"] }, { kind: "component", type: i6.NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "size"] }, { kind: "directive", type: i7.NgDocLetDirective, selector: "[ngDocLet]", inputs: ["ngDocLet"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 NgDocNavbarComponent = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [Window,
@@ -72,7 +81,7 @@ NgDocNavbarComponent = __decorate([
 ], NgDocNavbarComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navbar-container\" *ngDocLet=\"sidebarService.isCollapsable() | async as isCollapsable\">\n\t<div class=\"ng-doc-navbar-left\">\n\t\t<ng-container *polymorpheusOutlet=\"leftContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-center\">\n\t\t<ng-doc-search *ngIf=\"search && !isCollapsable\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"centerContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-right\">\n\t\t<ng-doc-search *ngIf=\"search && isCollapsable\" mod=\"icon\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"rightContent\"></ng-container>\n\t\t<button\n\t\t\tclass=\"ng-doc-menu\"\n\t\t\t*ngIf=\"isCollapsable\"\n\t\t\tng-doc-button-icon\n\t\t\tsize=\"large\"\n\t\t\t(click)=\"sidebarService.toggle()\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;transition:var(--ng-doc-transition) box-shadow}:host{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}:host:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ng-doc-navbar-background);opacity:.4}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host.has-shadow{box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;align-items:center;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-center,:host .ng-doc-navbar-right{display:flex}:host .ng-doc-navbar-left{justify-content:flex-start;width:var(--ng-doc-navbar-left-width);flex-shrink:0}:host .ng-doc-navbar-center{padding-left:calc(var(--ng-doc-base-gutter) * 4);justify-content:flex-start;width:100%}:host .ng-doc-navbar-right{justify-content:flex-end}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}\n"] }]
+            args: [{ selector: 'ng-doc-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navbar-container\" *ngDocLet=\"sidebarService.isMobileMode() | async as isMobileMode\">\n\t<div class=\"ng-doc-navbar-left\">\n\t\t<ng-container *polymorpheusOutlet=\"leftContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-center\">\n\t\t<ng-container *polymorpheusOutlet=\"centerContent\"></ng-container>\n\t\t<ng-doc-search *ngIf=\"search && !isMobileMode\"></ng-doc-search>\n\t</div>\n\t<div class=\"ng-doc-navbar-right\">\n\t\t<ng-doc-search *ngIf=\"search && isMobileMode\" mod=\"icon\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"rightContent\"></ng-container>\n\t\t<button\n\t\t\tclass=\"ng-doc-menu\"\n\t\t\t*ngIf=\"isMobileMode && hamburger\"\n\t\t\tng-doc-button-icon\n\t\t\tsize=\"large\"\n\t\t\t(click)=\"sidebarService.toggle()\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;transition:var(--ng-doc-transition) box-shadow}:host:not([data-glass-effect=false]){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}:host:not([data-glass-effect=false]):before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--ng-doc-navbar-background);opacity:.4}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host[data-glass-effect=false]{background-color:var(--ng-doc-navbar-background)}:host.has-shadow{box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-center,:host .ng-doc-navbar-right{display:flex;align-items:center}:host .ng-doc-navbar-left{justify-content:flex-start;width:100%;max-width:var(--ng-doc-navbar-left-width)}:host .ng-doc-navbar-center{padding:0 var(--ng-doc-app-horizontal-padding);justify-content:flex-start;max-width:calc(100% - var(--ng-doc-toc-width))}:host .ng-doc-navbar-right{justify-content:flex-end;margin-left:auto}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}\n"] }]
         }], ctorParameters: function () { return [{ type: Window, decorators: [{
                     type: Inject,
                     args: [WINDOW]
@@ -84,6 +93,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                 type: Input
             }], search: [{
                 type: Input
+            }], hamburger: [{
+                type: Input
+            }], glassEffect: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-glass-effect']
             }], hasShadow: [{
                 type: HostBinding,
                 args: ['class.has-shadow']

package/fesm2020/ng-doc-app-components-navbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-navbar.mjs","sources":["../../../../libs/app/components/navbar/navbar.component.ts","../../../../libs/app/components/navbar/navbar.component.html","../../../../libs/app/components/navbar/navbar.module.ts","../../../../libs/app/components/navbar/ng-doc-app-components-navbar.ts"],"sourcesContent":["import {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Inject, Input, NgZone} from '@angular/core';\nimport {NgDocSidebarService} from '@ng-doc/app/services';\nimport {NgDocContent, ngDocZoneOptimize} from '@ng-doc/ui-kit';\nimport {WINDOW} from '@ng-web-apis/common';\nimport {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';\nimport {combineLatest, fromEvent} from 'rxjs';\nimport {distinctUntilChanged, map, startWith} from 'rxjs/operators';\n\n/**\n * Navbar component for ng-doc application\n */\n@Component({\n\tselector: 'ng-doc-navbar',\n\ttemplateUrl: './navbar.component.html',\n\tstyleUrls: ['./navbar.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\n@UntilDestroy()\nexport class NgDocNavbarComponent {\n\t/**\n\t * Content for left side of navbar\n\t */\n\t@Input()\n\tleftContent: NgDocContent = '';\n\n\t/**\n\t * Content for center side of navbar\n\t */\n\t@Input()\n\tcenterContent: NgDocContent = '';\n\n\t/**\n\t * Content for right side of navbar\n\t */\n\t@Input()\n\trightContent: NgDocContent = '';\n\n\t/**\n\t * Show search input\n\t */\n\t@Input()\n\tsearch: boolean = true;\n\n\t/**\n\t * Indicates if navbar has shadow\n\t */\n\t@HostBinding('class.has-shadow')\n\thasShadow: boolean = false;\n\n\tconstructor(\n\t\t@Inject(WINDOW)\n\t\tprivate readonly window: Window,\n\t\tprivate readonly ngZone: NgZone,\n\t\tprivate readonly changeDetectorRef: ChangeDetectorRef,\n\t\tprotected readonly sidebarService: NgDocSidebarService,\n\t) {\n\t\tcombineLatest([\n\t\t\tfromEvent(this.window, 'scroll').pipe(\n\t\t\t\tmap((e: Event) => ((e.target as Document)?.scrollingElement?.scrollTop ?? 0) > 0),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\tstartWith(false),\n\t\t\t),\n\t\t\tthis.sidebarService.isExpanded(),\n\t\t])\n\t\t\t.pipe(\n\t\t\t\tmap(([scrolled, sidebarVisible]: [boolean, boolean]) => scrolled || sidebarVisible),\n\t\t\t\tngDocZoneOptimize(this.ngZone),\n\t\t\t\tuntilDestroyed(this),\n\t\t\t)\n\t\t\t.subscribe((hasShadow: boolean) => {\n\t\t\t\tthis.hasShadow = hasShadow;\n\t\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t\t});\n\t}\n}\n","<div class=\"navbar-container\" *ngDocLet=\"sidebarService.isCollapsable() | async as isCollapsable\">\n\t<div class=\"ng-doc-navbar-left\">\n\t\t<ng-container *polymorpheusOutlet=\"leftContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-center\">\n\t\t<ng-doc-search *ngIf=\"search && !isCollapsable\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"centerContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-right\">\n\t\t<ng-doc-search *ngIf=\"search && isCollapsable\" mod=\"icon\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"rightContent\"></ng-container>\n\t\t<button\n\t\t\tclass=\"ng-doc-menu\"\n\t\t\t*ngIf=\"isCollapsable\"\n\t\t\tng-doc-button-icon\n\t\t\tsize=\"large\"\n\t\t\t(click)=\"sidebarService.toggle()\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n\t\t</button>\n\t</div>\n</div>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {NgDocSearchModule} from '@ng-doc/app/components/search';\nimport {NgDocButtonIconModule} from '@ng-doc/ui-kit/components/button-icon';\nimport {NgDocIconModule} from '@ng-doc/ui-kit/components/icon';\nimport {NgDocLetModule} from '@ng-doc/ui-kit/directives/let';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {NgDocNavbarComponent} from './navbar.component';\n\n@NgModule({\n\tdeclarations: [NgDocNavbarComponent],\n\timports: [\n\t\tCommonModule,\n\t\tPolymorpheusModule,\n\t\tNgDocSearchModule,\n\t\tNgDocButtonIconModule,\n\t\tNgDocIconModule,\n\t\tNgDocLetModule,\n\t],\n\texports: [NgDocNavbarComponent],\n})\nexport class NgDocNavbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-navbar.mjs","sources":["../../../../libs/app/components/navbar/navbar.component.ts","../../../../libs/app/components/navbar/navbar.component.html","../../../../libs/app/components/navbar/navbar.module.ts","../../../../libs/app/components/navbar/ng-doc-app-components-navbar.ts"],"sourcesContent":["import {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Inject, Input, NgZone} from '@angular/core';\nimport {NgDocSidebarService} from '@ng-doc/app/services';\nimport {NgDocContent, ngDocZoneOptimize} from '@ng-doc/ui-kit';\nimport {WINDOW} from '@ng-web-apis/common';\nimport {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';\nimport {combineLatest, fromEvent} from 'rxjs';\nimport {distinctUntilChanged, map, startWith} from 'rxjs/operators';\n\n/**\n * Navbar component for ng-doc application\n */\n@Component({\n\tselector: 'ng-doc-navbar',\n\ttemplateUrl: './navbar.component.html',\n\tstyleUrls: ['./navbar.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\n@UntilDestroy()\nexport class NgDocNavbarComponent {\n\t/**\n\t * Content for left side of navbar\n\t */\n\t@Input()\n\tleftContent: NgDocContent = '';\n\n\t/**\n\t * Content for center side of navbar\n\t */\n\t@Input()\n\tcenterContent: NgDocContent = '';\n\n\t/**\n\t * Content for right side of navbar\n\t */\n\t@Input()\n\trightContent: NgDocContent = '';\n\n\t/**\n\t * Show search input\n\t */\n\t@Input()\n\tsearch: boolean = true;\n\n\t/**\n\t * Show hamburger button\n\t */\n\t@Input()\n\thamburger: boolean = true;\n\n\t/**\n\t * Use glass effect for navbar\n\t */\n\t@Input()\n\t@HostBinding('attr.data-glass-effect')\n\tglassEffect: boolean = true;\n\n\t/**\n\t * Indicates if navbar has shadow\n\t */\n\t@HostBinding('class.has-shadow')\n\thasShadow: boolean = false;\n\n\tconstructor(\n\t\t@Inject(WINDOW)\n\t\tprivate readonly window: Window,\n\t\tprivate readonly ngZone: NgZone,\n\t\tprivate readonly changeDetectorRef: ChangeDetectorRef,\n\t\tprotected readonly sidebarService: NgDocSidebarService,\n\t) {\n\t\tcombineLatest([\n\t\t\tfromEvent(this.window, 'scroll').pipe(\n\t\t\t\tmap((e: Event) => ((e.target as Document)?.scrollingElement?.scrollTop ?? 0) > 0),\n\t\t\t\tdistinctUntilChanged(),\n\t\t\t\tstartWith(false),\n\t\t\t),\n\t\t\tthis.sidebarService.isMobileMode(),\n\t\t\tthis.sidebarService.isExpanded(),\n\t\t])\n\t\t\t.pipe(\n\t\t\t\tmap(\n\t\t\t\t\t([scrolled, isMobileMode, isExpanded]: [boolean, boolean, boolean]) =>\n\t\t\t\t\t\tscrolled || (isMobileMode && isExpanded),\n\t\t\t\t),\n\t\t\t\tngDocZoneOptimize(this.ngZone),\n\t\t\t\tuntilDestroyed(this),\n\t\t\t)\n\t\t\t.subscribe((hasShadow: boolean) => {\n\t\t\t\tthis.hasShadow = hasShadow;\n\t\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t\t});\n\t}\n}\n","<div class=\"navbar-container\" *ngDocLet=\"sidebarService.isMobileMode() | async as isMobileMode\">\n\t<div class=\"ng-doc-navbar-left\">\n\t\t<ng-container *polymorpheusOutlet=\"leftContent\"></ng-container>\n\t</div>\n\t<div class=\"ng-doc-navbar-center\">\n\t\t<ng-container *polymorpheusOutlet=\"centerContent\"></ng-container>\n\t\t<ng-doc-search *ngIf=\"search && !isMobileMode\"></ng-doc-search>\n\t</div>\n\t<div class=\"ng-doc-navbar-right\">\n\t\t<ng-doc-search *ngIf=\"search && isMobileMode\" mod=\"icon\"></ng-doc-search>\n\t\t<ng-container *polymorpheusOutlet=\"rightContent\"></ng-container>\n\t\t<button\n\t\t\tclass=\"ng-doc-menu\"\n\t\t\t*ngIf=\"isMobileMode && hamburger\"\n\t\t\tng-doc-button-icon\n\t\t\tsize=\"large\"\n\t\t\t(click)=\"sidebarService.toggle()\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n\t\t</button>\n\t</div>\n</div>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {NgDocSearchModule} from '@ng-doc/app/components/search';\nimport {NgDocButtonIconModule} from '@ng-doc/ui-kit/components/button-icon';\nimport {NgDocIconModule} from '@ng-doc/ui-kit/components/icon';\nimport {NgDocLetModule} from '@ng-doc/ui-kit/directives/let';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\n\nimport {NgDocNavbarComponent} from './navbar.component';\n\n@NgModule({\n\tdeclarations: [NgDocNavbarComponent],\n\timports: [\n\t\tCommonModule,\n\t\tPolymorpheusModule,\n\t\tNgDocSearchModule,\n\t\tNgDocButtonIconModule,\n\t\tNgDocIconModule,\n\t\tNgDocLetModule,\n\t],\n\texports: [NgDocNavbarComponent],\n})\nexport class NgDocNavbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -40,10 +40,10 @@ class NgDocPageComponent {
     }
 }
 NgDocPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPageComponent, deps: [{ token: NG_DOC_CONTEXT }, { token: i1.Router }, { token: i2.NgDocRootPage }], target: i0.ɵɵFactoryTarget.Component });
-NgDocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocPageComponent, selector: "ng-doc-page", ngImport: i0, template: "<article>\n\t<ng-doc-breadcrumb *ngIf=\"rootPage.pageType === 'guide'\"></ng-doc-breadcrumb>\n\t<div class=\"ng-doc-page-controls\">\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.editSourceFileUrl\"\n\t\t\t[href]=\"rootPage.editSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"Suggest Edits\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n\t\t</a>\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.viewSourceFileUrl\"\n\t\t\t[href]=\"rootPage.viewSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"View Source\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"code\"></ng-doc-icon>\n\t\t</a>\n\t</div>\n\n\t<div\n\t\tclass=\"ng-doc-page-wrapper\"\n\t\t[innerHTML]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n\t\tngDocBlockquoteProcessor\n\t\tngDocLinkProcessor\n\t\tngDocCodeProcessor\n\t\tngDocIconProcessor\n\t\tngDocTooltipProcessor\n\t\tngDocDemoProcessor\n\t\tngDocDemoPaneProcessor\n\t\tngDocPlaygroundProcessor\n\t\t#pageContainer\n\t></div>\n\n\t<div class=\"ng-doc-navigation-controls\" *ngIf=\"rootPage.pageType === 'guide'\">\n\t\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\t\tPrevious\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t\t</a>\n\t\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\tNext\n\t\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t\t</a>\n\t</div>\n</article>\n\n<ng-template\n\t[ngDocMediaQuery]=\"[mediaQuery.breakpoints.Large, mediaQuery.breakpoints.XLarge]\"\n\t#mediaQuery=\"ngDocMediaQuery\"\n>\n\t<ng-doc-toc [pageContainer]=\"pageContainer\"></ng-doc-toc>\n</ng-template>\n", styles: [":host{display:flex}:host article{position:relative;width:100%;overflow:hidden}:host article .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}:host ng-doc-toc{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 3);flex-shrink:0}@media screen and (max-width: 1200px){:host ng-doc-toc{display:none}}:host .ng-doc-navigation-controls{display:flex;margin-top:calc(var(--ng-doc-base-gutter) * 12);border-top:1px solid var(--ng-doc-base-2);padding-top:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-navigation-controls a{display:flex;flex-direction:column;text-decoration:unset;transition:var(--ng-doc-transition);--ng-doc-button-hover-background: var(--ng-doc-base-1);--ng-doc-button-active-background: var(--ng-doc-base-2);--ng-doc-text: var(--ng-doc-base-10);--ng-doc-icon-color: var(--ng-doc-text)}:host .ng-doc-navigation-controls a:hover{opacity:.6}:host .ng-doc-navigation-controls a.ng-doc-next-page{margin-left:auto}:host .ng-doc-navigation-controls a.ng-doc-prev-page{align-items:flex-start}:host .ng-doc-navigation-controls a.ng-doc-next-page{align-items:flex-end}:host .ng-doc-navigation-controls a .ng-doc-navigation-page-title{--ng-doc-font-weight: 600;--ng-doc-text: var(--ng-doc-link-color)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgDocDemoProcessorDirective, selector: "[ngDocDemoProcessor]" }, { kind: "directive", type: i4.NgDocIconProcessorDirective, selector: "[ngDocIconProcessor]" }, { kind: "directive", type: i4.NgDocLinkProcessorDirective, selector: "[ngDocLinkProcessor]" }, { kind: "directive", type: i4.NgDocCodeProcessorDirective, selector: "[ngDocCodeProcessor]" }, { kind: "directive", type: i4.NgDocBlockquoteProcessorDirective, selector: "[ngDocBlockquoteProcessor]" }, { kind: "component", type: i5.NgDocTocComponent, selector: "ng-doc-toc", inputs: ["pageContainer"] }, { kind: "directive", type: i6.NgDocMediaQueryDirective, selector: "[ngDocMediaQuery]", inputs: ["ngDocMediaQuery"], exportAs: ["ngDocMediaQuery"] }, { kind: "directive", type: i4.NgDocTooltipProcessorDirective, selector: "[ngDocTooltipProcessor]" }, { kind: "component", type: i6.NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon]", inputs: ["size", "rounded"] }, { kind: "component", type: i6.NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "size"] }, { kind: "directive", type: i6.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: "directive", type: i4.NgDocPlaygroundProcessorDirective, selector: "[ngDocPlaygroundProcessor]" }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: i6.NgDocTextLeftDirective, selector: "[ngDocTextLeft]" }, { kind: "directive", type: i6.NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "directive", type: i4.NgDocDemoPaneProcessorDirective, selector: "[ngDocDemoPaneProcessor]" }, { kind: "component", type: i7.NgDocBreadcrumbComponent, selector: "ng-doc-breadcrumb" }, { kind: "pipe", type: i8.NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgDocPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocPageComponent, selector: "ng-doc-page", ngImport: i0, template: "<article>\n\t<ng-doc-breadcrumb *ngIf=\"rootPage.pageType === 'guide'\"></ng-doc-breadcrumb>\n\t<div class=\"ng-doc-page-controls\">\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.editSourceFileUrl\"\n\t\t\t[href]=\"rootPage.editSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"Suggest Edits\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n\t\t</a>\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.viewSourceFileUrl\"\n\t\t\t[href]=\"rootPage.viewSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"View Source\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"code\"></ng-doc-icon>\n\t\t</a>\n\t</div>\n\n\t<div\n\t\tclass=\"ng-doc-page-wrapper\"\n\t\t[innerHTML]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n\t\tngDocBlockquoteProcessor\n\t\tngDocLinkProcessor\n\t\tngDocCodeProcessor\n\t\tngDocIconProcessor\n\t\tngDocTooltipProcessor\n\t\tngDocDemoProcessor\n\t\tngDocDemoPaneProcessor\n\t\tngDocPlaygroundProcessor\n\t\t#pageContainer\n\t></div>\n\n\t<div class=\"ng-doc-navigation-controls\" *ngIf=\"rootPage.pageType === 'guide'\">\n\t\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\t\tPrevious\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t\t</a>\n\t\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\tNext\n\t\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t\t</a>\n\t</div>\n</article>\n\n<ng-template\n\t[ngDocMediaQuery]=\"[mediaQuery.breakpoints.Large, mediaQuery.breakpoints.XLarge]\"\n\t#mediaQuery=\"ngDocMediaQuery\"\n>\n\t<ng-doc-toc [pageContainer]=\"pageContainer\"></ng-doc-toc>\n</ng-template>\n", styles: [":host{display:flex}:host article{position:relative;width:var(--ng-doc-article-width, 100%);margin-left:auto;margin-right:auto;overflow:hidden}:host article .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}:host ng-doc-toc{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 3);flex-shrink:0}@media screen and (max-width: 1200px){:host ng-doc-toc{display:none}}:host .ng-doc-navigation-controls{display:flex;margin-top:calc(var(--ng-doc-base-gutter) * 12);border-top:1px solid var(--ng-doc-base-2);padding-top:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-navigation-controls a{display:flex;flex-direction:column;text-decoration:unset;transition:var(--ng-doc-transition);--ng-doc-button-hover-background: var(--ng-doc-base-1);--ng-doc-button-active-background: var(--ng-doc-base-2);--ng-doc-text: var(--ng-doc-base-10);--ng-doc-icon-color: var(--ng-doc-text)}:host .ng-doc-navigation-controls a:hover{opacity:.6}:host .ng-doc-navigation-controls a.ng-doc-next-page{margin-left:auto}:host .ng-doc-navigation-controls a.ng-doc-prev-page{align-items:flex-start}:host .ng-doc-navigation-controls a.ng-doc-next-page{align-items:flex-end}:host .ng-doc-navigation-controls a .ng-doc-navigation-page-title{--ng-doc-font-weight: 600;--ng-doc-text: var(--ng-doc-link-color)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgDocDemoProcessorDirective, selector: "[ngDocDemoProcessor]" }, { kind: "directive", type: i4.NgDocIconProcessorDirective, selector: "[ngDocIconProcessor]" }, { kind: "directive", type: i4.NgDocLinkProcessorDirective, selector: "[ngDocLinkProcessor]" }, { kind: "directive", type: i4.NgDocCodeProcessorDirective, selector: "[ngDocCodeProcessor]" }, { kind: "directive", type: i4.NgDocBlockquoteProcessorDirective, selector: "[ngDocBlockquoteProcessor]" }, { kind: "component", type: i5.NgDocTocComponent, selector: "ng-doc-toc", inputs: ["pageContainer"] }, { kind: "directive", type: i6.NgDocMediaQueryDirective, selector: "[ngDocMediaQuery]", inputs: ["ngDocMediaQuery"], exportAs: ["ngDocMediaQuery"] }, { kind: "directive", type: i4.NgDocTooltipProcessorDirective, selector: "[ngDocTooltipProcessor]" }, { kind: "component", type: i6.NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon]", inputs: ["size", "rounded"] }, { kind: "component", type: i6.NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "size"] }, { kind: "directive", type: i6.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: "directive", type: i4.NgDocPlaygroundProcessorDirective, selector: "[ngDocPlaygroundProcessor]" }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: i6.NgDocTextLeftDirective, selector: "[ngDocTextLeft]" }, { kind: "directive", type: i6.NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "directive", type: i4.NgDocDemoPaneProcessorDirective, selector: "[ngDocDemoPaneProcessor]" }, { kind: "component", type: i7.NgDocBreadcrumbComponent, selector: "ng-doc-breadcrumb" }, { kind: "pipe", type: i8.NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article>\n\t<ng-doc-breadcrumb *ngIf=\"rootPage.pageType === 'guide'\"></ng-doc-breadcrumb>\n\t<div class=\"ng-doc-page-controls\">\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.editSourceFileUrl\"\n\t\t\t[href]=\"rootPage.editSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"Suggest Edits\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n\t\t</a>\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.viewSourceFileUrl\"\n\t\t\t[href]=\"rootPage.viewSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"View Source\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"code\"></ng-doc-icon>\n\t\t</a>\n\t</div>\n\n\t<div\n\t\tclass=\"ng-doc-page-wrapper\"\n\t\t[innerHTML]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n\t\tngDocBlockquoteProcessor\n\t\tngDocLinkProcessor\n\t\tngDocCodeProcessor\n\t\tngDocIconProcessor\n\t\tngDocTooltipProcessor\n\t\tngDocDemoProcessor\n\t\tngDocDemoPaneProcessor\n\t\tngDocPlaygroundProcessor\n\t\t#pageContainer\n\t></div>\n\n\t<div class=\"ng-doc-navigation-controls\" *ngIf=\"rootPage.pageType === 'guide'\">\n\t\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\t\tPrevious\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t\t</a>\n\t\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\tNext\n\t\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t\t</a>\n\t</div>\n</article>\n\n<ng-template\n\t[ngDocMediaQuery]=\"[mediaQuery.breakpoints.Large, mediaQuery.breakpoints.XLarge]\"\n\t#mediaQuery=\"ngDocMediaQuery\"\n>\n\t<ng-doc-toc [pageContainer]=\"pageContainer\"></ng-doc-toc>\n</ng-template>\n", styles: [":host{display:flex}:host article{position:relative;width:100%;overflow:hidden}:host article .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}:host ng-doc-toc{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 3);flex-shrink:0}@media screen and (max-width: 1200px){:host ng-doc-toc{display:none}}:host .ng-doc-navigation-controls{display:flex;margin-top:calc(var(--ng-doc-base-gutter) * 12);border-top:1px solid var(--ng-doc-base-2);padding-top:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-navigation-controls a{display:flex;flex-direction:column;text-decoration:unset;transition:var(--ng-doc-transition);--ng-doc-button-hover-background: var(--ng-doc-base-1);--ng-doc-button-active-background: var(--ng-doc-base-2);--ng-doc-text: var(--ng-doc-base-10);--ng-doc-icon-color: var(--ng-doc-text)}:host .ng-doc-navigation-controls a:hover{opacity:.6}:host .ng-doc-navigation-controls a.ng-doc-next-page{margin-left:auto}:host .ng-doc-navigation-controls a.ng-doc-prev-page{align-items:flex-start}:host .ng-doc-navigation-controls a.ng-doc-next-page{align-items:flex-end}:host .ng-doc-navigation-controls a .ng-doc-navigation-page-title{--ng-doc-font-weight: 600;--ng-doc-text: var(--ng-doc-link-color)}\n"] }]
+            args: [{ selector: 'ng-doc-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article>\n\t<ng-doc-breadcrumb *ngIf=\"rootPage.pageType === 'guide'\"></ng-doc-breadcrumb>\n\t<div class=\"ng-doc-page-controls\">\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.editSourceFileUrl\"\n\t\t\t[href]=\"rootPage.editSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"Suggest Edits\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n\t\t</a>\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.viewSourceFileUrl\"\n\t\t\t[href]=\"rootPage.viewSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"View Source\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"code\"></ng-doc-icon>\n\t\t</a>\n\t</div>\n\n\t<div\n\t\tclass=\"ng-doc-page-wrapper\"\n\t\t[innerHTML]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n\t\tngDocBlockquoteProcessor\n\t\tngDocLinkProcessor\n\t\tngDocCodeProcessor\n\t\tngDocIconProcessor\n\t\tngDocTooltipProcessor\n\t\tngDocDemoProcessor\n\t\tngDocDemoPaneProcessor\n\t\tngDocPlaygroundProcessor\n\t\t#pageContainer\n\t></div>\n\n\t<div class=\"ng-doc-navigation-controls\" *ngIf=\"rootPage.pageType === 'guide'\">\n\t\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\t\tPrevious\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t\t</a>\n\t\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\tNext\n\t\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t\t</a>\n\t</div>\n</article>\n\n<ng-template\n\t[ngDocMediaQuery]=\"[mediaQuery.breakpoints.Large, mediaQuery.breakpoints.XLarge]\"\n\t#mediaQuery=\"ngDocMediaQuery\"\n>\n\t<ng-doc-toc [pageContainer]=\"pageContainer\"></ng-doc-toc>\n</ng-template>\n", styles: [":host{display:flex}:host article{position:relative;width:var(--ng-doc-article-width, 100%);margin-left:auto;margin-right:auto;overflow:hidden}:host article .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}:host ng-doc-toc{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 3);flex-shrink:0}@media screen and (max-width: 1200px){:host ng-doc-toc{display:none}}:host .ng-doc-navigation-controls{display:flex;margin-top:calc(var(--ng-doc-base-gutter) * 12);border-top:1px solid var(--ng-doc-base-2);padding-top:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-navigation-controls a{display:flex;flex-direction:column;text-decoration:unset;transition:var(--ng-doc-transition);--ng-doc-button-hover-background: var(--ng-doc-base-1);--ng-doc-button-active-background: var(--ng-doc-base-2);--ng-doc-text: var(--ng-doc-base-10);--ng-doc-icon-color: var(--ng-doc-text)}:host .ng-doc-navigation-controls a:hover{opacity:.6}:host .ng-doc-navigation-controls a.ng-doc-next-page{margin-left:auto}:host .ng-doc-navigation-controls a.ng-doc-prev-page{align-items:flex-start}:host .ng-doc-navigation-controls a.ng-doc-next-page{align-items:flex-end}:host .ng-doc-navigation-controls a .ng-doc-navigation-page-title{--ng-doc-font-weight: 600;--ng-doc-text: var(--ng-doc-link-color)}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [NG_DOC_CONTEXT]

package/fesm2020/ng-doc-app-components-page.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-page.mjs","sources":["../../../../libs/app/components/page/page.component.ts","../../../../libs/app/components/page/page.component.html","../../../../libs/app/components/page/page.module.ts","../../../../libs/app/components/page/ng-doc-app-components-page.ts"],"sourcesContent":["import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';\nimport {Router, UrlTree} from '@angular/router';\nimport {NgDocRootPage} from '@ng-doc/app/classes/root-page';\nimport {NgDocContext, NgDocNavigation} from '@ng-doc/app/interfaces';\nimport {NG_DOC_CONTEXT} from '@ng-doc/app/tokens';\n\n@Component({\n\tselector: 'ng-doc-page',\n\ttemplateUrl: './page.component.html',\n\tstyleUrls: ['./page.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocPageComponent {\n\treadonly prevPage?: NgDocNavigation;\n\treadonly nextPage?: NgDocNavigation;\n\tconstructor(\n\t\t@Inject(NG_DOC_CONTEXT)\n\t\tprivate readonly context: NgDocContext,\n\t\tprivate readonly router: Router,\n\t\treadonly rootPage: NgDocRootPage,\n\t) {\n\t\tconst flatPages = this.flatPages(this.context.navigation);\n\n\t\tthis.prevPage = flatPages[flatPages.findIndex((item: NgDocNavigation) => this.url === item.route) - 1];\n\t\tthis.nextPage = flatPages[flatPages.findIndex((item: NgDocNavigation) => this.url === item.route) + 1];\n\t}\n\n\tprivate flatPages(items: NgDocNavigation[]): NgDocNavigation[] {\n\t\treturn items\n\t\t\t.map((item: NgDocNavigation) => [item.children?.length ? this.flatPages(item.children) : item])\n\t\t\t.flat(2);\n\t}\n\n\tprivate get url(): string {\n\t\tconst urlTree: UrlTree = this.router.parseUrl(this.router.url);\n\n\t\turlTree.queryParams = {};\n\t\turlTree.fragment = null;\n\n\t\treturn urlTree.toString();\n\t}\n}\n","<article>\n\t<ng-doc-breadcrumb *ngIf=\"rootPage.pageType === 'guide'\"></ng-doc-breadcrumb>\n\t<div class=\"ng-doc-page-controls\">\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.editSourceFileUrl\"\n\t\t\t[href]=\"rootPage.editSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"Suggest Edits\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n\t\t</a>\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.viewSourceFileUrl\"\n\t\t\t[href]=\"rootPage.viewSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"View Source\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"code\"></ng-doc-icon>\n\t\t</a>\n\t</div>\n\n\t<div\n\t\tclass=\"ng-doc-page-wrapper\"\n\t\t[innerHTML]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n\t\tngDocBlockquoteProcessor\n\t\tngDocLinkProcessor\n\t\tngDocCodeProcessor\n\t\tngDocIconProcessor\n\t\tngDocTooltipProcessor\n\t\tngDocDemoProcessor\n\t\tngDocDemoPaneProcessor\n\t\tngDocPlaygroundProcessor\n\t\t#pageContainer\n\t></div>\n\n\t<div class=\"ng-doc-navigation-controls\" *ngIf=\"rootPage.pageType === 'guide'\">\n\t\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\t\tPrevious\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t\t</a>\n\t\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\tNext\n\t\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t\t</a>\n\t</div>\n</article>\n\n<ng-template\n\t[ngDocMediaQuery]=\"[mediaQuery.breakpoints.Large, mediaQuery.breakpoints.XLarge]\"\n\t#mediaQuery=\"ngDocMediaQuery\"\n>\n\t<ng-doc-toc [pageContainer]=\"pageContainer\"></ng-doc-toc>\n</ng-template>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {RouterLink} from '@angular/router';\nimport {NgDocBreadcrumbModule} from \"@ng-doc/app/components/breadcrumb\";\nimport {NgDocPageMapModule} from '@ng-doc/app/components/toc';\nimport {NgDocSanitizeHtmlModule} from '@ng-doc/app/pipes/sanitize-html';\nimport {\n\tNgDocBlockquoteProcessorModule,\n\tNgDocCodeProcessorModule,\n\tNgDocDemoPaneProcessorModule,\n\tNgDocDemoProcessorModule,\n\tNgDocIconProcessorModule,\n\tNgDocLinkProcessorModule,\n\tNgDocPlaygroundProcessorModule,\n\tNgDocTooltipProcessorModule,\n} from '@ng-doc/app/processors';\nimport {\n\tNgDocBooleanControlModule,\n\tNgDocNumberControlModule,\n\tNgDocStringControlModule,\n\tNgDocTypeAliasControlModule,\n} from '@ng-doc/app/type-controls';\nimport {\n\tNgDocButtonIconModule,\n\tNgDocButtonModule,\n\tNgDocIconModule,\n\tNgDocMediaQueryModule,\n\tNgDocTextModule,\n\tNgDocTooltipModule,\n} from '@ng-doc/ui-kit';\n\nimport {NgDocPageComponent} from './page.component';\n\n@NgModule({\n\tdeclarations: [NgDocPageComponent],\n\timports: [\n\t\t/* TypeControls */\n\t\tNgDocBooleanControlModule,\n\t\tNgDocNumberControlModule,\n\t\tNgDocStringControlModule,\n\t\tNgDocTypeAliasControlModule,\n\n\t\tCommonModule,\n\t\tNgDocDemoProcessorModule,\n\t\tNgDocIconProcessorModule,\n\t\tNgDocLinkProcessorModule,\n\t\tNgDocCodeProcessorModule,\n\t\tNgDocBlockquoteProcessorModule,\n\t\tNgDocSanitizeHtmlModule,\n\t\tNgDocPageMapModule,\n\t\tNgDocMediaQueryModule,\n\t\tNgDocTooltipProcessorModule,\n\t\tNgDocButtonIconModule,\n\t\tNgDocIconModule,\n\t\tNgDocTooltipModule,\n\t\tNgDocPlaygroundProcessorModule,\n\t\tRouterLink,\n\t\tNgDocButtonModule,\n\t\tNgDocTextModule,\n\t\tNgDocDemoPaneProcessorModule,\n\t\tNgDocBreadcrumbModule,\n\t],\n\texports: [NgDocPageComponent],\n})\nexport class NgDocPageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-page.mjs","sources":["../../../../libs/app/components/page/page.component.ts","../../../../libs/app/components/page/page.component.html","../../../../libs/app/components/page/page.module.ts","../../../../libs/app/components/page/ng-doc-app-components-page.ts"],"sourcesContent":["import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';\nimport {Router, UrlTree} from '@angular/router';\nimport {NgDocRootPage} from '@ng-doc/app/classes/root-page';\nimport {NgDocContext, NgDocNavigation} from '@ng-doc/app/interfaces';\nimport {NG_DOC_CONTEXT} from '@ng-doc/app/tokens';\n\n@Component({\n\tselector: 'ng-doc-page',\n\ttemplateUrl: './page.component.html',\n\tstyleUrls: ['./page.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocPageComponent {\n\treadonly prevPage?: NgDocNavigation;\n\treadonly nextPage?: NgDocNavigation;\n\tconstructor(\n\t\t@Inject(NG_DOC_CONTEXT)\n\t\tprivate readonly context: NgDocContext,\n\t\tprivate readonly router: Router,\n\t\treadonly rootPage: NgDocRootPage,\n\t) {\n\t\tconst flatPages = this.flatPages(this.context.navigation);\n\n\t\tthis.prevPage = flatPages[flatPages.findIndex((item: NgDocNavigation) => this.url === item.route) - 1];\n\t\tthis.nextPage = flatPages[flatPages.findIndex((item: NgDocNavigation) => this.url === item.route) + 1];\n\t}\n\n\tprivate flatPages(items: NgDocNavigation[]): NgDocNavigation[] {\n\t\treturn items\n\t\t\t.map((item: NgDocNavigation) => [item.children?.length ? this.flatPages(item.children) : item])\n\t\t\t.flat(2);\n\t}\n\n\tprivate get url(): string {\n\t\tconst urlTree: UrlTree = this.router.parseUrl(this.router.url);\n\n\t\turlTree.queryParams = {};\n\t\turlTree.fragment = null;\n\n\t\treturn urlTree.toString();\n\t}\n}\n","<article>\n\t<ng-doc-breadcrumb *ngIf=\"rootPage.pageType === 'guide'\"></ng-doc-breadcrumb>\n\t<div class=\"ng-doc-page-controls\">\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.editSourceFileUrl\"\n\t\t\t[href]=\"rootPage.editSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"Suggest Edits\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n\t\t</a>\n\t\t<a\n\t\t\tng-doc-button-icon\n\t\t\t*ngIf=\"rootPage.viewSourceFileUrl\"\n\t\t\t[href]=\"rootPage.viewSourceFileUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tngDocTooltip=\"View Source\"\n\t\t>\n\t\t\t<ng-doc-icon icon=\"code\"></ng-doc-icon>\n\t\t</a>\n\t</div>\n\n\t<div\n\t\tclass=\"ng-doc-page-wrapper\"\n\t\t[innerHTML]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n\t\tngDocBlockquoteProcessor\n\t\tngDocLinkProcessor\n\t\tngDocCodeProcessor\n\t\tngDocIconProcessor\n\t\tngDocTooltipProcessor\n\t\tngDocDemoProcessor\n\t\tngDocDemoPaneProcessor\n\t\tngDocPlaygroundProcessor\n\t\t#pageContainer\n\t></div>\n\n\t<div class=\"ng-doc-navigation-controls\" *ngIf=\"rootPage.pageType === 'guide'\">\n\t\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\t\tPrevious\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t\t</a>\n\t\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t\tNext\n\t\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t\t</div>\n\t\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t\t</a>\n\t</div>\n</article>\n\n<ng-template\n\t[ngDocMediaQuery]=\"[mediaQuery.breakpoints.Large, mediaQuery.breakpoints.XLarge]\"\n\t#mediaQuery=\"ngDocMediaQuery\"\n>\n\t<ng-doc-toc [pageContainer]=\"pageContainer\"></ng-doc-toc>\n</ng-template>\n","import {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {RouterLink} from '@angular/router';\nimport {NgDocBreadcrumbModule} from \"@ng-doc/app/components/breadcrumb\";\nimport {NgDocPageMapModule} from '@ng-doc/app/components/toc';\nimport {NgDocSanitizeHtmlModule} from '@ng-doc/app/pipes/sanitize-html';\nimport {\n\tNgDocBlockquoteProcessorModule,\n\tNgDocCodeProcessorModule,\n\tNgDocDemoPaneProcessorModule,\n\tNgDocDemoProcessorModule,\n\tNgDocIconProcessorModule,\n\tNgDocLinkProcessorModule,\n\tNgDocPlaygroundProcessorModule,\n\tNgDocTooltipProcessorModule,\n} from '@ng-doc/app/processors';\nimport {\n\tNgDocBooleanControlModule,\n\tNgDocNumberControlModule,\n\tNgDocStringControlModule,\n\tNgDocTypeAliasControlModule,\n} from '@ng-doc/app/type-controls';\nimport {\n\tNgDocButtonIconModule,\n\tNgDocButtonModule,\n\tNgDocIconModule,\n\tNgDocMediaQueryModule,\n\tNgDocTextModule,\n\tNgDocTooltipModule,\n} from '@ng-doc/ui-kit';\n\nimport {NgDocPageComponent} from './page.component';\n\n@NgModule({\n\tdeclarations: [NgDocPageComponent],\n\timports: [\n\t\t/* TypeControls */\n\t\tNgDocBooleanControlModule,\n\t\tNgDocNumberControlModule,\n\t\tNgDocStringControlModule,\n\t\tNgDocTypeAliasControlModule,\n\n\t\tCommonModule,\n\t\tNgDocDemoProcessorModule,\n\t\tNgDocIconProcessorModule,\n\t\tNgDocLinkProcessorModule,\n\t\tNgDocCodeProcessorModule,\n\t\tNgDocBlockquoteProcessorModule,\n\t\tNgDocSanitizeHtmlModule,\n\t\tNgDocPageMapModule,\n\t\tNgDocMediaQueryModule,\n\t\tNgDocTooltipProcessorModule,\n\t\tNgDocButtonIconModule,\n\t\tNgDocIconModule,\n\t\tNgDocTooltipModule,\n\t\tNgDocPlaygroundProcessorModule,\n\t\tRouterLink,\n\t\tNgDocButtonModule,\n\t\tNgDocTextModule,\n\t\tNgDocDemoPaneProcessorModule,\n\t\tNgDocBreadcrumbModule,\n\t],\n\texports: [NgDocPageComponent],\n})\nexport class NgDocPageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,19 +1,20 @@
 import * as i0 from '@angular/core';
-import { Directive, isDevMode, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, EventEmitter, Output, ChangeDetectorRef, Injector, NgModule } from '@angular/core';
+import { Directive, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, EventEmitter, isDevMode, Output, ChangeDetectorRef, Injector, NgModule } from '@angular/core';
 import * as i3 from '@angular/forms';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i1$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 { extractValue } from '@ng-doc/core/helpers/extract-value';
+import { objectKeys as objectKeys$1 } from '@ng-doc/core/helpers/object-keys';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
+import { isPlaygroundProperty, getTokenForType, getPlaygroundDemoToken } from '@ng-doc/app/helpers';
+import { objectKeys, isPresent, extractValueOrThrow } from '@ng-doc/core';
 import { pluck, takeUntil } from 'rxjs/operators';
 import * as i4 from '@ng-doc/ui-kit';
-import { NgDocLabelModule, NgDocTooltipModule, NgDocAsArrayModule, NgDocButtonIconModule, NgDocIconModule, NgDocTextModule, NgDocCheckboxModule, NgDocButtonModule } from '@ng-doc/ui-kit';
-import { isPlaygroundProperty, getTokenForType, getPlaygroundDemoToken } from '@ng-doc/app/helpers';
+import { NgDocLabelModule, NgDocTooltipModule, NgDocAsArrayModule, NgDocButtonIconModule, NgDocIconModule, NgDocTextModule, NgDocCheckboxModule, NgDocButtonModule, NgDocBindModule, NgDocRunModule } from '@ng-doc/ui-kit';
 import { __decorate, __metadata } from 'tslib';
 import { buildPlaygroundDemoTemplate } from '@ng-doc/core/helpers/build-playground-demo-template';
 import { formatHtml } from '@ng-doc/core/helpers/format-html';
@@ -44,66 +45,39 @@ class NgDocPlaygroundPropertyComponent {
         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)
+    ngOnChanges({ property, control, typeControl }) {
+        if ((property || control || typeControl) && this.property && this.typeControl) {
+            this.propertyTypeControl?.destroy();
+            this.propertyTypeControl = undefined;
+            if (this.typeControl && this.propertyOutlet) {
+                this.propertyTypeControl = this.propertyOutlet.createComponent(this.typeControl.control);
+                this.propertyTypeControl.instance.name = this.name;
+                this.propertyTypeControl.instance.description = this.tooltipContent;
+                this.propertyTypeControl.instance.options = isPlaygroundProperty(this.property)
                     ? this.property.options
                     : undefined;
-                this.propertyControl.instance.default = isPlaygroundProperty(this.property)
+                this.propertyTypeControl.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'`);
+                this.propertyTypeControl.instance.writeValue(this.control?.value);
+                this.option = this.typeControl.options;
             }
         }
         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());
+            this.control?.registerOnChange((value) => this.propertyTypeControl?.instance?.writeValue(value));
+            this.propertyTypeControl?.instance.registerOnChange((value) => this.control?.setValue(value));
+            this.propertyTypeControl?.instance.registerOnTouched(() => this.control?.markAsTouched());
         }
     }
     get hasPropertyControl() {
-        return !!this.propertyControl;
+        return !!this.propertyTypeControl;
     }
     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.2.4", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NgDocPlaygroundPropertyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", 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 [ngDocTooltip]=\"tooltipContent\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"], dependencies: [{ kind: "component", type: i4.NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: i4.NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgDocPlaygroundPropertyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", typeControl: "typeControl", control: "control" }, host: { properties: { "attr.data-has-property-control": "this.hasPropertyControl" } }, viewQueries: [{ propertyName: "propertyOutlet", first: true, predicate: ["propertyOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span [ngDocTooltip]=\"tooltipContent\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"], dependencies: [{ kind: "component", type: i4.NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: i4.NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundPropertyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span [ngDocTooltip]=\"tooltipContent\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"] }]
@@ -111,6 +85,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                 type: Input
             }], property: [{
                 type: Input
+            }], typeControl: [{
+                type: Input
             }], control: [{
                 type: Input
             }], propertyOutlet: [{
@@ -122,24 +98,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
             }] } });
 
 class NgDocPlaygroundPropertiesComponent {
-    constructor(breakpointObserver) {
+    constructor(breakpointObserver, injector) {
         this.breakpointObserver = breakpointObserver;
+        this.injector = injector;
         this.recreateDemo = false;
         this.recreateDemoChange = new EventEmitter();
         this.resetForm = new EventEmitter();
         this.breakpoints = [Breakpoints.XSmall];
+        this.propertyControls = [];
+        this.contentTypeControl = this.getControlForType('boolean');
         this.observer = this.breakpointObserver.observe(this.breakpoints).pipe(pluck('matches'));
     }
+    ngOnChanges({ properties }) {
+        if (properties && this.properties) {
+            this.propertyControls = objectKeys(this.properties)
+                .map((key) => {
+                if (this.properties) {
+                    const property = this.properties[key];
+                    const typeControl = this.getTypeControl(property);
+                    if (typeControl) {
+                        return {
+                            propertyName: String(key),
+                            property,
+                            typeControl,
+                        };
+                    }
+                }
+                return null;
+            })
+                .filter(isPresent)
+                .sort((a, b) => {
+                const aOrder = a.typeControl.options?.order;
+                const bOrder = b.typeControl.options?.order;
+                if (isPresent(aOrder) && isPresent(bOrder)) {
+                    return aOrder - bOrder;
+                }
+                if (isPresent(aOrder)) {
+                    return -1;
+                }
+                if (isPresent(bOrder)) {
+                    return 1;
+                }
+                return a.property.name.localeCompare(b.property.name);
+            });
+        }
+    }
     getFormControl(controlType, key) {
         return this.form.get(controlType)?.get(key);
     }
+    getTypeControl(property) {
+        const type = property.type;
+        const typeControl = this.getControlForType(type)
+            ?? this.getControlForTypeAlias(isPlaygroundProperty(property) ? property.options : undefined);
+        if (!typeControl && isDevMode()) {
+            console.warn(`NgDocPlayground didn't find the control for the @Input "${property.name}", the type "${type}" was not recognized'`);
+        }
+        return typeControl;
+    }
+    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;
+    }
 }
-NgDocPlaygroundPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-NgDocPlaygroundPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", 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 });
+NgDocPlaygroundPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NgDocPlaygroundPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", dynamicContent: "dynamicContent", recreateDemo: "recreateDemo" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"propertyControls.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let propertyControl of propertyControls\"\n\t\t\t\t[name]=\"propertyControl.property.name\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'properties': propertyControl.propertyName\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[typeControl]=\"contentTypeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'content': content.key\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}:host .ng-doc-playground-properties-wrapper.vertical{flex-direction:column}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-demos{margin-right:0;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-properties{width:100%}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-demos{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: i4.NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "size"] }, { kind: "component", type: i4.NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: i4.NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "component", type: i4.NgDocCheckboxComponent, selector: "ng-doc-checkbox", inputs: ["color"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgDocButtonComponent, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: ["size", "color", "rounded"] }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i4.NgDocBindPipe, name: "ngDocBind" }, { kind: "pipe", type: i4.NgDocRunPipe, name: "ngDocRun" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", 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: [{
+            args: [{ selector: 'ng-doc-playground-properties', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"propertyControls.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let propertyControl of propertyControls\"\n\t\t\t\t[name]=\"propertyControl.property.name\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'properties': propertyControl.propertyName\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[typeControl]=\"contentTypeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'content': content.key\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}:host .ng-doc-playground-properties-wrapper.vertical{flex-direction:column}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-demos{margin-right:0;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-properties{width:100%}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-demos{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.BreakpointObserver }, { type: i0.Injector }]; }, propDecorators: { form: [{
                 type: Input
             }], properties: [{
                 type: Input
@@ -203,14 +246,14 @@ let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
     }
     getActiveContent() {
         const formData = this.form?.controls.content.value ?? {};
-        return objectKeys(formData).reduce((result, key) => {
+        return objectKeys$1(formData).reduce((result, key) => {
             result[key] = formData[key] ? this.configuration?.content?.[key].template ?? '' : '';
             return result;
         }, {});
     }
     getActiveInputs() {
         const formData = this.form?.controls.properties.value ?? {};
-        return objectKeys(formData).reduce((result, key) => {
+        return objectKeys$1(formData).reduce((result, key) => {
             const property = this.properties?.[key];
             if (property) {
                 const value = formData[key];
@@ -274,7 +317,7 @@ class NgDocPlaygroundComponent {
         return this.rootPage.dependencies?.playgrounds?.[this.id];
     }
     getPropertiesFormValues() {
-        return objectKeys(this.properties ?? {}).reduce((controls, key) => {
+        return objectKeys$1(this.properties ?? {}).reduce((controls, key) => {
             if (this.properties) {
                 controls[key] = extractValue(this.properties[key]?.default ?? 'undefined');
             }
@@ -282,7 +325,7 @@ class NgDocPlaygroundComponent {
         }, {});
     }
     getContentFormValues() {
-        return objectKeys(this.configuration?.content ?? {}).reduce((controls, key) => {
+        return objectKeys$1(this.configuration?.content ?? {}).reduce((controls, key) => {
             if (this.configuration?.content) {
                 controls[key] = false;
             }
@@ -322,7 +365,9 @@ NgDocPlaygroundModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         NgDocCheckboxModule,
         FormsModule,
         NgDocButtonModule,
-        NgDocDemoDisplayerModule], exports: [NgDocPlaygroundComponent,
+        NgDocDemoDisplayerModule,
+        NgDocBindModule,
+        NgDocRunModule], exports: [NgDocPlaygroundComponent,
         NgDocPlaygroundPropertyComponent,
         NgDocPlaygroundPropertiesComponent,
         NgDocPlaygroundDemoComponent] });
@@ -338,7 +383,9 @@ NgDocPlaygroundModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         NgDocCheckboxModule,
         FormsModule,
         NgDocButtonModule,
-        NgDocDemoDisplayerModule] });
+        NgDocDemoDisplayerModule,
+        NgDocBindModule,
+        NgDocRunModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundModule, decorators: [{
             type: NgModule,
             args: [{
@@ -362,6 +409,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                         FormsModule,
                         NgDocButtonModule,
                         NgDocDemoDisplayerModule,
+                        NgDocBindModule,
+                        NgDocRunModule,
                     ],
                     exports: [
                         NgDocPlaygroundComponent,