@ng-doc/app 16.12.1 → 16.13.0-beta.1

package/fesm2022/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 {AsyncPipe, NgIf} from '@angular/common';\nimport {ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Inject, Input, NgZone} from '@angular/core';\nimport {NgDocSearchComponent} from '@ng-doc/app/components/search';\nimport {NgDocSidebarService} from '@ng-doc/app/services';\nimport {\n\tNgDocButtonIconComponent,\n\tNgDocContent,\n\tNgDocIconComponent,\n\tNgDocLetDirective,\n\tngDocZoneOptimize,\n} from '@ng-doc/ui-kit';\nimport {WINDOW} from '@ng-web-apis/common';\nimport {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy';\nimport {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';\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\tstandalone: true,\n\timports: [\n\t\tNgDocLetDirective,\n\t\tPolymorpheusModule,\n\t\tNgIf,\n\t\tNgDocSearchComponent,\n\t\tNgDocButtonIconComponent,\n\t\tNgDocIconComponent,\n\t\tAsyncPipe,\n\t],\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 {NgModule} from '@angular/core';\n\nimport {NgDocNavbarComponent} from './navbar.component';\n\n@NgModule({\n\timports: [NgDocNavbarComponent],\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/ng-doc-app-components-navbar.ts"],"sourcesContent":["import { AsyncPipe, NgIf } from '@angular/common';\nimport {\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tHostBinding,\n\tInject,\n\tInput,\n\tNgZone,\n} from '@angular/core';\nimport { NgDocSearchComponent } from '@ng-doc/app/components/search';\nimport { NgDocSidebarService } from '@ng-doc/app/services';\nimport {\n\tNgDocButtonIconComponent,\n\tNgDocContent,\n\tNgDocIconComponent,\n\tNgDocLetDirective,\n\tngDocZoneOptimize,\n} from '@ng-doc/ui-kit';\nimport { WINDOW } from '@ng-web-apis/common';\nimport { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';\nimport { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';\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\tstandalone: true,\n\timports: [\n\t\tNgDocLetDirective,\n\t\tPolymorpheusModule,\n\t\tNgIf,\n\t\tNgDocSearchComponent,\n\t\tNgDocButtonIconComponent,\n\t\tNgDocIconComponent,\n\t\tAsyncPipe,\n\t],\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\t<ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n\t\t</button>\n\t</div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ng-doc-app-components-page-navigation.mjs

@@ -0,0 +1,35 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { NgDocIconComponent, NgDocTextComponent, NgDocTextLeftDirective, NgDocTextRightDirective } from '@ng-doc/ui-kit';
+
+class NgDocPageNavigationComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPageNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPageNavigationComponent, isStandalone: true, selector: "ng-doc-page-navigation", inputs: { prevPage: "prevPage", nextPage: "nextPage" }, ngImport: i0, template: "<div class=\"ng-doc-navigation-controls\">\n\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\tPrevious\n\t\t</div>\n\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t</a>\n\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\tNext\n\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t</div>\n\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t</a>\n</div>\n", styles: [":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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: NgDocTextLeftDirective, selector: "[ngDocTextLeft]" }, { kind: "directive", type: NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPageNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-page-navigation', standalone: true, imports: [
+                        CommonModule,
+                        NgDocIconComponent,
+                        NgDocTextComponent,
+                        NgDocTextLeftDirective,
+                        NgDocTextRightDirective,
+                        RouterLink,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ng-doc-navigation-controls\">\n\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\tPrevious\n\t\t</div>\n\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t</a>\n\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\tNext\n\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t</div>\n\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t</a>\n</div>\n", styles: [":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"] }]
+        }], propDecorators: { prevPage: [{
+                type: Input,
+                args: [{ required: true }]
+            }], nextPage: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocPageNavigationComponent };
+//# sourceMappingURL=ng-doc-app-components-page-navigation.mjs.map

package/fesm2022/ng-doc-app-components-page-navigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-doc-app-components-page-navigation.mjs","sources":["../../../../libs/app/components/page-navigation/page-navigation.component.ts","../../../../libs/app/components/page-navigation/page-navigation.component.html","../../../../libs/app/components/page-navigation/ng-doc-app-components-page-navigation.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { NgDocNavigation, NgDocPageNavigation } from '@ng-doc/app/interfaces';\nimport {\n\tNgDocIconComponent,\n\tNgDocTextComponent,\n\tNgDocTextLeftDirective,\n\tNgDocTextRightDirective,\n} from '@ng-doc/ui-kit';\n\n@Component({\n\tselector: 'ng-doc-page-navigation',\n\tstandalone: true,\n\timports: [\n\t\tCommonModule,\n\t\tNgDocIconComponent,\n\t\tNgDocTextComponent,\n\t\tNgDocTextLeftDirective,\n\t\tNgDocTextRightDirective,\n\t\tRouterLink,\n\t],\n\ttemplateUrl: './page-navigation.component.html',\n\tstyleUrls: ['./page-navigation.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocPageNavigationComponent implements NgDocPageNavigation {\n\t@Input({ required: true })\n\tprevPage?: NgDocNavigation;\n\n\t@Input({ required: true })\n\tnextPage?: NgDocNavigation;\n}\n","<div class=\"ng-doc-navigation-controls\">\n\t<a class=\"ng-doc-prev-page\" *ngIf=\"prevPage\" [routerLink]=\"prevPage.route\">\n\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\t<ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n\t\t\tPrevious\n\t\t</div>\n\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n\t</a>\n\t<a class=\"ng-doc-next-page\" *ngIf=\"nextPage\" [routerLink]=\"nextPage.route\">\n\t\t<div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n\t\t\tNext\n\t\t\t<ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n\t\t</div>\n\t\t<div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n\t</a>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAWA,MAea,4BAA4B,CAAA;8GAA5B,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAA5B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,4BAA4B,EC1BzC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,0vBAgBA,EDDE,MAAA,EAAA,CAAA,+4BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,EACZ,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,kBAAkB,EAClB,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,kBAAkB,EAClB,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,sBAAsB,EACtB,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,uBAAuB,6DACvB,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAMC,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAfxC,SAAS;+BACC,wBAAwB,EAAA,UAAA,EACtB,IAAI,EACP,OAAA,EAAA;wBACR,YAAY;wBACZ,kBAAkB;wBAClB,kBAAkB;wBAClB,sBAAsB;wBACtB,uBAAuB;wBACvB,UAAU;qBACV,EAGgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,0vBAAA,EAAA,MAAA,EAAA,CAAA,+4BAAA,CAAA,EAAA,CAAA;8BAI/C,QAAQ,EAAA,CAAA;sBADP,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAIzB,QAAQ,EAAA,CAAA;sBADP,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;;;AE9B1B;;AAEG;;;;"}

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

@@ -1,29 +1,58 @@
-import { NgIf } from '@angular/common';
+import { NgIf, NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
-import * as i1 from '@angular/router';
-import { RouterLink } from '@angular/router';
-import * as i2 from '@ng-doc/app/classes/root-page';
+import { inject, ElementRef, ViewContainerRef, Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
+import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { NgDocBreadcrumbComponent } from '@ng-doc/app/components/breadcrumb';
 import { NgDocTocComponent } from '@ng-doc/app/components/toc';
-import { provideTypeControl } from '@ng-doc/app/helpers';
+import { createComponent, generateToc } from '@ng-doc/app/helpers';
 import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes/sanitize-html';
 import { NgDocPageProcessorDirective } from '@ng-doc/app/processors';
-import { NG_DOC_CONTEXT } from '@ng-doc/app/tokens';
+import { provideTypeControl } from '@ng-doc/app/providers/type-control';
+import { NG_DOC_PAGE_SKELETON, NG_DOC_CONTEXT } from '@ng-doc/app/tokens';
 import { NgDocTypeAliasControlComponent, NgDocStringControlComponent, NgDocNumberControlComponent, NgDocBooleanControlComponent } from '@ng-doc/app/type-controls';
+import { isPresent } from '@ng-doc/core';
 import { NgDocButtonIconComponent, NgDocTooltipDirective, NgDocIconComponent, NgDocTextComponent, NgDocTextLeftDirective, NgDocTextRightDirective, NgDocMediaQueryDirective } from '@ng-doc/ui-kit';
 
 class NgDocPageComponent {
-    constructor(context, router, rootPage) {
-        this.context = context;
-        this.router = router;
-        this.rootPage = rootPage;
-        const flatPages = this.flatPages(this.context.navigation);
-        this.prevPage = flatPages[flatPages.findIndex((item) => this.url === item.route) - 1];
-        this.nextPage = flatPages[flatPages.findIndex((item) => this.url === item.route) + 1];
+    constructor() {
+        this.rootPage = inject(NgDocRootPage);
+        this.skeleton = inject(NG_DOC_PAGE_SKELETON);
+        this.context = inject(NG_DOC_CONTEXT);
+        this.router = inject(Router);
+        this.breadcrumbs = inject(ActivatedRoute)
+            .pathFromRoot.filter((route) => !route.snapshot.url.length)
+            .map((route) => route.snapshot.title)
+            .filter(isPresent);
     }
-    flatPages(items) {
-        return items.map((item) => [item.children?.length ? this.flatPages(item.children) : item]).flat(2);
+    ngAfterViewInit() {
+        if (this.rootPage.pageType === 'guide') {
+            if (this.skeleton.breadcrumbs) {
+                createComponent(this.pageBreadcrumbs, this.skeleton.breadcrumbs, {
+                    breadcrumbs: this.breadcrumbs,
+                });
+            }
+            if (this.skeleton.navigation) {
+                createComponent(this.pageNavigation, this.skeleton.navigation, this.navigationInputs());
+            }
+        }
+        Promise.resolve().then(() => {
+            if (this.pageToc && this.skeleton.toc) {
+                createComponent(this.pageToc, this.skeleton.toc, {
+                    tableOfContent: generateToc(this.pageContainer.nativeElement),
+                });
+            }
+        });
+    }
+    navigationInputs() {
+        const flatItems = (items) => items
+            .map((item) => [item.children?.length ? flatItems(item.children) : item])
+            .flat(2);
+        const flatPages = flatItems(this.context.navigation);
+        return {
+            prevPage: flatPages[flatPages.findIndex((item) => this.url === item.route) - 1],
+            nextPage: flatPages[flatPages.findIndex((item) => this.url === item.route) + 1],
+        };
     }
     get url() {
         const urlTree = this.router.parseUrl(this.router.url);
@@ -31,13 +60,13 @@ class NgDocPageComponent {
         urlTree.fragment = null;
         return urlTree.toString();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPageComponent, deps: [{ token: NG_DOC_CONTEXT }, { token: i1.Router }, { token: i2.NgDocRootPage }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPageComponent, isStandalone: true, selector: "ng-doc-page", providers: [
             provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 }),
             provideTypeControl('string', NgDocStringControlComponent, { order: 20 }),
             provideTypeControl('number', NgDocNumberControlComponent, { order: 30 }),
             provideTypeControl('boolean', NgDocBooleanControlComponent, { hideLabel: true, order: 40 }),
-        ], 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\tngDocPageProcessor\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgDocBreadcrumbComponent, selector: "ng-doc-breadcrumb" }, { kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: NgDocTextLeftDirective, selector: "[ngDocTextLeft]" }, { kind: "directive", type: NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "directive", type: NgDocMediaQueryDirective, selector: "[ngDocMediaQuery]", inputs: ["ngDocMediaQuery"], exportAs: ["ngDocMediaQuery"] }, { kind: "component", type: NgDocTocComponent, selector: "ng-doc-toc", inputs: ["pageContainer"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }, { kind: "directive", type: NgDocPageProcessorDirective, selector: "[ngDocPageProcessor]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "pageContainer", first: true, predicate: ["pageContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "pageBreadcrumbs", first: true, predicate: ["pageBreadcrumbs"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "pageNavigation", first: true, predicate: ["pageNavigation"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "pageToc", first: true, predicate: ["pageToc"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<article>\n\t<ng-container #pageBreadcrumbs></ng-container>\n\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\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\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\tngDocPageProcessor\n\t\t#pageContainer></div>\n\n\t<ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n", styles: [":host{display:flex;--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 3)}: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}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon]", inputs: ["size", "rounded"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }, { kind: "directive", type: NgDocPageProcessorDirective, selector: "[ngDocPageProcessor]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPageComponent, decorators: [{
             type: Component,
@@ -55,16 +84,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         NgDocTocComponent,
                         NgDocSanitizeHtmlPipe,
                         NgDocPageProcessorDirective,
+                        NgComponentOutlet,
                     ], providers: [
                         provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 }),
                         provideTypeControl('string', NgDocStringControlComponent, { order: 20 }),
                         provideTypeControl('number', NgDocNumberControlComponent, { order: 30 }),
                         provideTypeControl('boolean', NgDocBooleanControlComponent, { hideLabel: true, order: 40 }),
-                    ], 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\tngDocPageProcessor\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]
-                }] }, { type: i1.Router }, { type: i2.NgDocRootPage }]; } });
+                    ], template: "<article>\n\t<ng-container #pageBreadcrumbs></ng-container>\n\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\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\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\tngDocPageProcessor\n\t\t#pageContainer></div>\n\n\t<ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n", styles: [":host{display:flex;--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 3)}: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}\n"] }]
+        }], propDecorators: { pageContainer: [{
+                type: ViewChild,
+                args: ['pageContainer', { read: ElementRef, static: true }]
+            }], pageBreadcrumbs: [{
+                type: ViewChild,
+                args: ['pageBreadcrumbs', { read: ViewContainerRef, static: true }]
+            }], pageNavigation: [{
+                type: ViewChild,
+                args: ['pageNavigation', { read: ViewContainerRef, static: true }]
+            }], pageToc: [{
+                type: ViewChild,
+                args: ['pageToc', { read: ViewContainerRef }]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/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/ng-doc-app-components-page.ts"],"sourcesContent":["import {NgIf} from '@angular/common';\nimport {ChangeDetectionStrategy, Component, Inject} from '@angular/core';\nimport {Router, RouterLink, UrlTree} from '@angular/router';\nimport {NgDocRootPage} from '@ng-doc/app/classes/root-page';\nimport {NgDocBreadcrumbComponent} from '@ng-doc/app/components/breadcrumb';\nimport {NgDocTocComponent} from '@ng-doc/app/components/toc';\nimport {provideTypeControl} from '@ng-doc/app/helpers';\nimport {NgDocContext, NgDocNavigation} from '@ng-doc/app/interfaces';\nimport {NgDocSanitizeHtmlPipe} from '@ng-doc/app/pipes/sanitize-html';\nimport {NgDocPageProcessorDirective} from '@ng-doc/app/processors';\nimport {NG_DOC_CONTEXT} from '@ng-doc/app/tokens';\nimport {\n\tNgDocBooleanControlComponent,\n\tNgDocNumberControlComponent,\n\tNgDocStringControlComponent,\n\tNgDocTypeAliasControlComponent,\n} from '@ng-doc/app/type-controls';\nimport {\n\tNgDocButtonIconComponent,\n\tNgDocIconComponent,\n\tNgDocMediaQueryDirective,\n\tNgDocTextComponent,\n\tNgDocTextLeftDirective,\n\tNgDocTextRightDirective,\n\tNgDocTooltipDirective,\n} from '@ng-doc/ui-kit';\n\n@Component({\n\tselector: 'ng-doc-page',\n\ttemplateUrl: './page.component.html',\n\tstyleUrls: ['./page.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tstandalone: true,\n\timports: [\n\t\tNgIf,\n\t\tNgDocBreadcrumbComponent,\n\t\tNgDocButtonIconComponent,\n\t\tNgDocTooltipDirective,\n\t\tNgDocIconComponent,\n\t\tRouterLink,\n\t\tNgDocTextComponent,\n\t\tNgDocTextLeftDirective,\n\t\tNgDocTextRightDirective,\n\t\tNgDocMediaQueryDirective,\n\t\tNgDocTocComponent,\n\t\tNgDocSanitizeHtmlPipe,\n\t\tNgDocPageProcessorDirective,\n\t],\n\tproviders: [\n\t\tprovideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, {order: 10}),\n\t\tprovideTypeControl('string', NgDocStringControlComponent, {order: 20}),\n\t\tprovideTypeControl('number', NgDocNumberControlComponent, {order: 30}),\n\t\tprovideTypeControl('boolean', NgDocBooleanControlComponent, {hideLabel: true, order: 40}),\n\t],\n})\nexport class NgDocPageComponent {\n\treadonly prevPage?: NgDocNavigation;\n\treadonly nextPage?: NgDocNavigation;\n\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.map((item: NgDocNavigation) => [item.children?.length ? this.flatPages(item.children) : item]).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\tngDocPageProcessor\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","/**\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/ng-doc-app-components-page.ts"],"sourcesContent":["import { NgComponentOutlet, NgIf } from '@angular/common';\nimport {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tComponent,\n\tElementRef,\n\tinject,\n\tViewChild,\n\tViewContainerRef,\n} from '@angular/core';\nimport { ActivatedRoute, Router, RouterLink, UrlTree } from '@angular/router';\nimport { NgDocRootPage } from '@ng-doc/app/classes/root-page';\nimport { NgDocBreadcrumbComponent } from '@ng-doc/app/components/breadcrumb';\nimport { NgDocTocComponent } from '@ng-doc/app/components/toc';\nimport { createComponent, generateToc } from '@ng-doc/app/helpers';\nimport {\n\tNgDocContext,\n\tNgDocNavigation,\n\tNgDocPageNavigation,\n\tNgDocPageSkeleton,\n} from '@ng-doc/app/interfaces';\nimport { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes/sanitize-html';\nimport { NgDocPageProcessorDirective } from '@ng-doc/app/processors';\nimport { provideTypeControl } from '@ng-doc/app/providers/type-control';\nimport { NG_DOC_CONTEXT, NG_DOC_PAGE_SKELETON } from '@ng-doc/app/tokens';\nimport {\n\tNgDocBooleanControlComponent,\n\tNgDocNumberControlComponent,\n\tNgDocStringControlComponent,\n\tNgDocTypeAliasControlComponent,\n} from '@ng-doc/app/type-controls';\nimport { isPresent } from '@ng-doc/core';\nimport {\n\tNgDocButtonIconComponent,\n\tNgDocIconComponent,\n\tNgDocMediaQueryDirective,\n\tNgDocTextComponent,\n\tNgDocTextLeftDirective,\n\tNgDocTextRightDirective,\n\tNgDocTooltipDirective,\n} from '@ng-doc/ui-kit';\n\n@Component({\n\tselector: 'ng-doc-page',\n\ttemplateUrl: './page.component.html',\n\tstyleUrls: ['./page.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tstandalone: true,\n\timports: [\n\t\tNgIf,\n\t\tNgDocBreadcrumbComponent,\n\t\tNgDocButtonIconComponent,\n\t\tNgDocTooltipDirective,\n\t\tNgDocIconComponent,\n\t\tRouterLink,\n\t\tNgDocTextComponent,\n\t\tNgDocTextLeftDirective,\n\t\tNgDocTextRightDirective,\n\t\tNgDocMediaQueryDirective,\n\t\tNgDocTocComponent,\n\t\tNgDocSanitizeHtmlPipe,\n\t\tNgDocPageProcessorDirective,\n\t\tNgComponentOutlet,\n\t],\n\tproviders: [\n\t\tprovideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 }),\n\t\tprovideTypeControl('string', NgDocStringControlComponent, { order: 20 }),\n\t\tprovideTypeControl('number', NgDocNumberControlComponent, { order: 30 }),\n\t\tprovideTypeControl('boolean', NgDocBooleanControlComponent, { hideLabel: true, order: 40 }),\n\t],\n})\nexport class NgDocPageComponent implements AfterViewInit {\n\t@ViewChild('pageContainer', { read: ElementRef, static: true })\n\tpageContainer!: ElementRef<HTMLElement>;\n\n\t@ViewChild('pageBreadcrumbs', { read: ViewContainerRef, static: true })\n\tpageBreadcrumbs!: ViewContainerRef;\n\n\t@ViewChild('pageNavigation', { read: ViewContainerRef, static: true })\n\tpageNavigation!: ViewContainerRef;\n\n\t@ViewChild('pageToc', { read: ViewContainerRef })\n\tpageToc?: ViewContainerRef;\n\n\tprotected rootPage: NgDocRootPage = inject(NgDocRootPage);\n\tprotected skeleton: NgDocPageSkeleton = inject(NG_DOC_PAGE_SKELETON);\n\tprotected context: NgDocContext = inject(NG_DOC_CONTEXT);\n\tprotected router: Router = inject(Router);\n\n\tprivate breadcrumbs: string[] = inject(ActivatedRoute)\n\t\t.pathFromRoot.filter((route: ActivatedRoute) => !route.snapshot.url.length)\n\t\t.map((route: ActivatedRoute) => route.snapshot.title)\n\t\t.filter(isPresent);\n\n\tngAfterViewInit(): void {\n\t\tif (this.rootPage.pageType === 'guide') {\n\t\t\tif (this.skeleton.breadcrumbs) {\n\t\t\t\tcreateComponent(this.pageBreadcrumbs, this.skeleton.breadcrumbs, {\n\t\t\t\t\tbreadcrumbs: this.breadcrumbs,\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif (this.skeleton.navigation) {\n\t\t\t\tcreateComponent(this.pageNavigation, this.skeleton.navigation, this.navigationInputs());\n\t\t\t}\n\t\t}\n\n\t\tPromise.resolve().then(() => {\n\t\t\tif (this.pageToc && this.skeleton.toc) {\n\t\t\t\tcreateComponent(this.pageToc, this.skeleton.toc, {\n\t\t\t\t\ttableOfContent: generateToc(this.pageContainer.nativeElement),\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate navigationInputs(): NgDocPageNavigation {\n\t\tconst flatItems = (items: NgDocNavigation[]): NgDocNavigation[] =>\n\t\t\titems\n\t\t\t\t.map((item: NgDocNavigation) => [item.children?.length ? flatItems(item.children) : item])\n\t\t\t\t.flat(2);\n\t\tconst flatPages: NgDocNavigation[] = flatItems(this.context.navigation);\n\n\t\treturn {\n\t\t\tprevPage:\n\t\t\t\tflatPages[flatPages.findIndex((item: NgDocNavigation) => this.url === item.route) - 1],\n\t\t\tnextPage:\n\t\t\t\tflatPages[flatPages.findIndex((item: NgDocNavigation) => this.url === item.route) + 1],\n\t\t};\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-container #pageBreadcrumbs></ng-container>\n\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\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\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\tngDocPageProcessor\n\t\t#pageContainer></div>\n\n\t<ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -9,13 +9,15 @@ import { objectKeys } from '@ng-doc/core/helpers/object-keys';
 import { NgDocSmoothResizeComponent, NgDocLetDirective, NgDocLabelComponent, NgDocTooltipDirective, NgDocTextComponent, NgDocButtonComponent, NgDocCheckboxComponent, NgDocIconComponent, NgDocTextRightDirective, NgDocBindPipe, NgDocExecutePipe, NgDocAsArrayPipe } from '@ng-doc/ui-kit';
 import { __decorate, __metadata } from 'tslib';
 import { NgDocDemoDisplayerComponent } from '@ng-doc/app/components/demo-displayer';
-import { getPlaygroundDemoToken, formatHtml, isPlaygroundProperty, getTokenForType } from '@ng-doc/app/helpers';
+import { formatHtml, isPlaygroundProperty } from '@ng-doc/app/helpers';
+import { getPlaygroundDemoToken } from '@ng-doc/app/providers/playground-demo';
 import { buildPlaygroundDemoPipeTemplate, buildPlaygroundDemoTemplate } from '@ng-doc/core/helpers/build-playground-demo-template';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { of, Subject, from } from 'rxjs';
 import { takeUntil, startWith, map } from 'rxjs/operators';
 import * as i1 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
+import { getTokenForType } from '@ng-doc/app/providers/type-control';
 import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';
 
 let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
@@ -90,7 +92,7 @@ let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
         this.unsubscribe$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundDemoComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundDemoComponent, isStandalone: true, selector: "ng-doc-playground-demo", inputs: { id: "id", pipeName: "pipeName", selector: "selector", configuration: "configuration", properties: "properties", recreateDemo: "recreateDemo", form: "form", expanded: "expanded" }, viewQueries: [{ propertyName: "demoOutlet", first: true, predicate: ["demoOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-doc-smooth-resize *ngDocLet=\"code | async as codeContent\" [trigger]=\"codeContent\">\n\t<ng-doc-demo-displayer\n\t\t[code]=\"codeContent ?? ''\"\n\t\t[border]=\"false\"\n\t\t[expanded]=\"expanded\"\n\t\tlanguage=\"html\"\n\t>\n\t\t<ng-container #demoOutlet></ng-container>\n\t</ng-doc-demo-displayer>\n</ng-doc-smooth-resize>\n", styles: [":host{display:block;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:hidden}:host:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}\n"], dependencies: [{ kind: "component", type: NgDocDemoDisplayerComponent, selector: "ng-doc-demo-displayer", inputs: ["codeContent", "code", "language", "container", "border", "expanded"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: NgDocSmoothResizeComponent, selector: "ng-doc-smooth-resize", inputs: ["trigger", "animateOpacity"] }, { kind: "directive", type: NgDocLetDirective, selector: "[ngDocLet]", inputs: ["ngDocLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundDemoComponent, isStandalone: true, selector: "ng-doc-playground-demo", inputs: { id: "id", pipeName: "pipeName", selector: "selector", configuration: "configuration", properties: "properties", recreateDemo: "recreateDemo", form: "form", expanded: "expanded" }, viewQueries: [{ propertyName: "demoOutlet", first: true, predicate: ["demoOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-doc-smooth-resize *ngDocLet=\"code | async as codeContent\" [trigger]=\"codeContent\">\n\t<ng-doc-demo-displayer\n\t\t[code]=\"codeContent ?? ''\"\n\t\t[border]=\"false\"\n\t\t[expanded]=\"expanded\"\n\t\tlanguage=\"html\">\n\t\t<ng-container #demoOutlet></ng-container>\n\t</ng-doc-demo-displayer>\n</ng-doc-smooth-resize>\n", styles: [":host{display:block;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:hidden}:host:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}\n"], dependencies: [{ kind: "component", type: NgDocDemoDisplayerComponent, selector: "ng-doc-demo-displayer", inputs: ["codeContent", "code", "language", "container", "border", "expanded"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: NgDocSmoothResizeComponent, selector: "ng-doc-smooth-resize", inputs: ["trigger", "animateOpacity"] }, { kind: "directive", type: NgDocLetDirective, selector: "[ngDocLet]", inputs: ["ngDocLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 NgDocPlaygroundDemoComponent = __decorate([
     UntilDestroy(),
@@ -98,7 +100,7 @@ NgDocPlaygroundDemoComponent = __decorate([
 ], NgDocPlaygroundDemoComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundDemoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground-demo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgDocDemoDisplayerComponent, AsyncPipe, NgDocSmoothResizeComponent, NgDocLetDirective], template: "<ng-doc-smooth-resize *ngDocLet=\"code | async as codeContent\" [trigger]=\"codeContent\">\n\t<ng-doc-demo-displayer\n\t\t[code]=\"codeContent ?? ''\"\n\t\t[border]=\"false\"\n\t\t[expanded]=\"expanded\"\n\t\tlanguage=\"html\"\n\t>\n\t\t<ng-container #demoOutlet></ng-container>\n\t</ng-doc-demo-displayer>\n</ng-doc-smooth-resize>\n", styles: [":host{display:block;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:hidden}:host:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}\n"] }]
+            args: [{ selector: 'ng-doc-playground-demo', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgDocDemoDisplayerComponent, AsyncPipe, NgDocSmoothResizeComponent, NgDocLetDirective], template: "<ng-doc-smooth-resize *ngDocLet=\"code | async as codeContent\" [trigger]=\"codeContent\">\n\t<ng-doc-demo-displayer\n\t\t[code]=\"codeContent ?? ''\"\n\t\t[border]=\"false\"\n\t\t[expanded]=\"expanded\"\n\t\tlanguage=\"html\">\n\t\t<ng-container #demoOutlet></ng-container>\n\t</ng-doc-demo-displayer>\n</ng-doc-smooth-resize>\n", styles: [":host{display:block;border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius);overflow:hidden}:host:not(:last-child){border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}:host:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { id: [{
                 type: Input
             }], pipeName: [{
@@ -153,11 +155,11 @@ class NgDocPlaygroundPropertyComponent {
         return this.property && isPlaygroundProperty(this.property) ? this.property.description ?? '' : '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundPropertyComponent, isStandalone: true, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", typeControl: "typeControl", control: "control", defaultValue: "defaultValue" }, 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]=\"tooltipTemplate\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\n\t\t<ng-template #tooltipTemplate>\n\t\t\t<div [innerHTML]=\"tooltipContent | ngDocSanitizeHtml\"></div>\n\t\t</ng-template>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"], dependencies: [{ kind: "component", type: NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundPropertyComponent, isStandalone: true, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", typeControl: "typeControl", control: "control", defaultValue: "defaultValue" }, host: { properties: { "attr.data-has-property-control": "this.hasPropertyControl" } }, viewQueries: [{ propertyName: "propertyOutlet", first: true, predicate: ["propertyOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span\n\t\t\t[ngDocTooltip]=\"tooltipTemplate\"\n\t\t\t[canOpen]=\"!!tooltipContent\"\n\t\t\t[positions]=\"['left-center', 'top-right', 'bottom-right']\"\n\t\t\t>{{ name }}</span\n\t\t>\n\t\t<ng-template #tooltipTemplate>\n\t\t\t<div [innerHTML]=\"tooltipContent | ngDocSanitizeHtml\"></div>\n\t\t</ng-template>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"], dependencies: [{ kind: "component", type: NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundPropertyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgDocLabelComponent, NgDocTooltipDirective, NgDocSanitizeHtmlPipe], template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span [ngDocTooltip]=\"tooltipTemplate\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\n\t\t<ng-template #tooltipTemplate>\n\t\t\t<div [innerHTML]=\"tooltipContent | ngDocSanitizeHtml\"></div>\n\t\t</ng-template>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"] }]
+            args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgDocLabelComponent, NgDocTooltipDirective, NgDocSanitizeHtmlPipe], template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span\n\t\t\t[ngDocTooltip]=\"tooltipTemplate\"\n\t\t\t[canOpen]=\"!!tooltipContent\"\n\t\t\t[positions]=\"['left-center', 'top-right', 'bottom-right']\"\n\t\t\t>{{ name }}</span\n\t\t>\n\t\t<ng-template #tooltipTemplate>\n\t\t\t<div [innerHTML]=\"tooltipContent | ngDocSanitizeHtml\"></div>\n\t\t</ng-template>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], property: [{
@@ -261,7 +263,7 @@ class NgDocPlaygroundPropertiesComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundPropertiesComponent, isStandalone: true, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", ignoreInputs: "ignoreInputs", dynamicContent: "dynamicContent", defaultValues: "defaultValues", hideSidePanel: "hideSidePanel", recreateDemo: "recreateDemo" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\" *ngIf=\"defaultValues\">\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\" *ngIf=\"!hideSidePanel\">\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.inputName\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n\t\t\t\t[control]=\"getFormControl | bind: this | execute: '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 | bind: this | execute: '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;grid-gap:calc(var(--ng-doc-base-gutter) * 2);gap:calc(var(--ng-doc-base-gutter) * 2)}: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}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"], dependencies: [{ kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocButtonComponent, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: ["size", "color", "rounded"] }, { kind: "component", type: NgDocCheckboxComponent, selector: "ng-doc-checkbox", inputs: ["color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control", "defaultValue"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundPropertiesComponent, isStandalone: true, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", ignoreInputs: "ignoreInputs", dynamicContent: "dynamicContent", defaultValues: "defaultValues", hideSidePanel: "hideSidePanel", recreateDemo: "recreateDemo" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, usesOnChanges: true, ngImport: i0, template: "<div\n\tclass=\"ng-doc-playground-properties-wrapper\"\n\t[class.vertical]=\"observer | async\"\n\t*ngIf=\"defaultValues\">\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\" *ngIf=\"!hideSidePanel\">\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\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.inputName\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n\t\t\t\t[control]=\"\n\t\t\t\t\tgetFormControl | bind: this | execute: 'properties':propertyControl.propertyName\n\t\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 | bind: this | execute: 'content':content.key\">\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;grid-gap:calc(var(--ng-doc-base-gutter) * 2);gap:calc(var(--ng-doc-base-gutter) * 2)}: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}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"], dependencies: [{ kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocButtonComponent, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: ["size", "color", "rounded"] }, { kind: "component", type: NgDocCheckboxComponent, selector: "ng-doc-checkbox", inputs: ["color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control", "defaultValue"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, decorators: [{
             type: Component,
@@ -280,7 +282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                         KeyValuePipe,
                         NgDocBindPipe,
                         NgDocExecutePipe,
-                    ], template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\" *ngIf=\"defaultValues\">\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\" *ngIf=\"!hideSidePanel\">\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.inputName\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n\t\t\t\t[control]=\"getFormControl | bind: this | execute: '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 | bind: this | execute: '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;grid-gap:calc(var(--ng-doc-base-gutter) * 2);gap:calc(var(--ng-doc-base-gutter) * 2)}: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}: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"] }]
+                    ], template: "<div\n\tclass=\"ng-doc-playground-properties-wrapper\"\n\t[class.vertical]=\"observer | async\"\n\t*ngIf=\"defaultValues\">\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\" *ngIf=\"!hideSidePanel\">\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\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.inputName\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n\t\t\t\t[control]=\"\n\t\t\t\t\tgetFormControl | bind: this | execute: 'properties':propertyControl.propertyName\n\t\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 | bind: this | execute: 'content':content.key\">\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;grid-gap:calc(var(--ng-doc-base-gutter) * 2);gap:calc(var(--ng-doc-base-gutter) * 2)}: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}: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: [{
@@ -354,11 +356,11 @@ class NgDocPlaygroundComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundComponent, deps: [{ token: i1$1.NgDocRootPage }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundComponent, isStandalone: true, selector: "ng-doc-playground", inputs: { id: "id", pipeName: "pipeName", selectors: "selectors", properties: "properties", options: "options" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties\n\t\t[form]=\"formGroup\"\n\t\t[properties]=\"properties\"\n\t\t[ignoreInputs]=\"configuration.hiddenInputs\"\n\t\t[dynamicContent]=\"configuration.content\"\n\t\t[hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n\t\t[defaultValues]=\"defaultValues\"\n\t\t[(recreateDemo)]=\"recreateDemo\"\n\t\t(resetForm)=\"resetForm()\"\n\t>\n\t\t<ng-doc-playground-demo\n\t\t\t*ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n\t\t\t[id]=\"id\"\n\t\t\t[selector]=\"selector\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t\t[expanded]=\"configuration.expanded ?? false\"\n\t\t>\n\t\t</ng-doc-playground-demo>\n\n\t\t<ng-doc-playground-demo\n\t\t\t*ngIf=\"pipeName\"\n\t\t\t[id]=\"id\"\n\t\t\t[pipeName]=\"pipeName\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t>\n\t\t</ng-doc-playground-demo>\n\t</ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "ignoreInputs", "dynamicContent", "defaultValues", "hideSidePanel", "recreateDemo"], outputs: ["recreateDemoChange", "resetForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NgDocPlaygroundDemoComponent, selector: "ng-doc-playground-demo", inputs: ["id", "pipeName", "selector", "configuration", "properties", "recreateDemo", "form", "expanded"] }, { kind: "pipe", type: NgDocAsArrayPipe, name: "asArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgDocPlaygroundComponent, isStandalone: true, selector: "ng-doc-playground", inputs: { id: "id", pipeName: "pipeName", selectors: "selectors", properties: "properties", options: "options" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties\n\t\t[form]=\"formGroup\"\n\t\t[properties]=\"properties\"\n\t\t[ignoreInputs]=\"configuration.hiddenInputs\"\n\t\t[dynamicContent]=\"configuration.content\"\n\t\t[hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n\t\t[defaultValues]=\"defaultValues\"\n\t\t[(recreateDemo)]=\"recreateDemo\"\n\t\t(resetForm)=\"resetForm()\">\n\t\t<ng-doc-playground-demo\n\t\t\t*ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n\t\t\t[id]=\"id\"\n\t\t\t[selector]=\"selector\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t\t[expanded]=\"configuration.expanded ?? false\">\n\t\t</ng-doc-playground-demo>\n\n\t\t<ng-doc-playground-demo\n\t\t\t*ngIf=\"pipeName\"\n\t\t\t[id]=\"id\"\n\t\t\t[pipeName]=\"pipeName\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\">\n\t\t</ng-doc-playground-demo>\n\t</ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "ignoreInputs", "dynamicContent", "defaultValues", "hideSidePanel", "recreateDemo"], outputs: ["recreateDemoChange", "resetForm"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NgDocPlaygroundDemoComponent, selector: "ng-doc-playground-demo", inputs: ["id", "pipeName", "selector", "configuration", "properties", "recreateDemo", "form", "expanded"] }, { kind: "pipe", type: NgDocAsArrayPipe, name: "asArray" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgDocPlaygroundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgDocPlaygroundPropertiesComponent, NgFor, NgDocPlaygroundDemoComponent, NgDocAsArrayPipe], template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties\n\t\t[form]=\"formGroup\"\n\t\t[properties]=\"properties\"\n\t\t[ignoreInputs]=\"configuration.hiddenInputs\"\n\t\t[dynamicContent]=\"configuration.content\"\n\t\t[hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n\t\t[defaultValues]=\"defaultValues\"\n\t\t[(recreateDemo)]=\"recreateDemo\"\n\t\t(resetForm)=\"resetForm()\"\n\t>\n\t\t<ng-doc-playground-demo\n\t\t\t*ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n\t\t\t[id]=\"id\"\n\t\t\t[selector]=\"selector\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t\t[expanded]=\"configuration.expanded ?? false\"\n\t\t>\n\t\t</ng-doc-playground-demo>\n\n\t\t<ng-doc-playground-demo\n\t\t\t*ngIf=\"pipeName\"\n\t\t\t[id]=\"id\"\n\t\t\t[pipeName]=\"pipeName\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t>\n\t\t</ng-doc-playground-demo>\n\t</ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'ng-doc-playground', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf, NgDocPlaygroundPropertiesComponent, NgFor, NgDocPlaygroundDemoComponent, NgDocAsArrayPipe], template: "<ng-container *ngIf=\"configuration\">\n\t<ng-doc-playground-properties\n\t\t[form]=\"formGroup\"\n\t\t[properties]=\"properties\"\n\t\t[ignoreInputs]=\"configuration.hiddenInputs\"\n\t\t[dynamicContent]=\"configuration.content\"\n\t\t[hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n\t\t[defaultValues]=\"defaultValues\"\n\t\t[(recreateDemo)]=\"recreateDemo\"\n\t\t(resetForm)=\"resetForm()\">\n\t\t<ng-doc-playground-demo\n\t\t\t*ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n\t\t\t[id]=\"id\"\n\t\t\t[selector]=\"selector\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\"\n\t\t\t[expanded]=\"configuration.expanded ?? false\">\n\t\t</ng-doc-playground-demo>\n\n\t\t<ng-doc-playground-demo\n\t\t\t*ngIf=\"pipeName\"\n\t\t\t[id]=\"id\"\n\t\t\t[pipeName]=\"pipeName\"\n\t\t\t[properties]=\"properties\"\n\t\t\t[configuration]=\"configuration\"\n\t\t\t[recreateDemo]=\"recreateDemo\"\n\t\t\t[form]=\"formGroup\">\n\t\t</ng-doc-playground-demo>\n\t</ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.NgDocRootPage }, { type: i2.FormBuilder }]; }, propDecorators: { id: [{
                 type: Input,
                 args: [{ required: true }]