npm - @ng-doc/app - Versions diffs - 19.3.0 → 20.0.0-beta.2 - Mend

@ng-doc/app 19.3.0 → 20.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (285) hide show

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

@@ -1,6 +1,5 @@
-import { NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, ElementRef, Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { inject, ChangeDetectorRef, ElementRef, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { NgDocPageWrapperComponent } from '@ng-doc/app/components/page-wrapper';
@@ -27,18 +26,17 @@ class NgDocPageComponent {
             this.changeDetectorRef.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocPageComponent, isStandalone: true, selector: "ng-doc-page", host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocPageComponent, isStandalone: true, selector: "ng-doc-page", host: { attributes: { "ngSkipHydration": "true" } }, providers: [
             provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 }),
             provideTypeControl('string', NgDocStringControlComponent, { order: 20 }),
             provideTypeControl('number', NgDocNumberControlComponent, { order: 30 }),
             provideTypeControl('boolean', NgDocBooleanControlComponent, { hideLabel: true, order: 40 }),
-        ], viewQueries: [{ propertyName: "pageContainer", first: true, predicate: ["pageContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "childOutlet", first: true, predicate: ["childOutlet"], descendants: true }], ngImport: i0, template: "<div class=\"ng-doc-page-controls\">\n  <a\n    ng-doc-button-icon\n    *ngIf=\"rootPage.editSourceFileUrl\"\n    [href]=\"rootPage.editSourceFileUrl\"\n    target=\"_blank\"\n    ngDocTooltip=\"Suggest Edits\">\n    <ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n  </a>\n  <a\n    ng-doc-button-icon\n    *ngIf=\"rootPage.viewSourceFileUrl\"\n    [href]=\"rootPage.viewSourceFileUrl\"\n    target=\"_blank\"\n    ngDocTooltip=\"View Source\">\n    <ng-doc-icon icon=\"code\"></ng-doc-icon>\n  </a>\n</div>\n\n<div\n  class=\"ng-doc-page-wrapper\"\n  [ngDocPageProcessor]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n  (afterRender)=\"createToc()\"\n  #pageContainer></div>\n\n<ng-doc-dialog-outlet\n  *ngIf=\"!rootPage.page?.disableFullscreenRoutes\"\n  [config]=\"{ width: '100vw', height: '100vh' }\">\n  <div class=\"ng-doc-fullscreen-wrapper\">\n    <router-outlet></router-outlet>\n  </div>\n</ng-doc-dialog-outlet>\n", styles: [":host{display:flex;flex-direction:column}:host .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}.ng-doc-fullscreen-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\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], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", 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: "component", type: NgDocPageProcessorComponent, selector: "[ngDocPageProcessor]", inputs: ["ngDocPageProcessor"], outputs: ["afterRender"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: DialogOutletComponent, selector: "ng-doc-dialog-outlet", inputs: ["config"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "pageContainer", first: true, predicate: ["pageContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "childOutlet", first: true, predicate: ["childOutlet"], descendants: true }], ngImport: i0, template: "<div class=\"ng-doc-page-controls\">\n  @if (rootPage.editSourceFileUrl) {\n    <a\n      ng-doc-button-icon\n      [href]=\"rootPage.editSourceFileUrl\"\n      target=\"_blank\"\n      ngDocTooltip=\"Suggest Edits\">\n      <ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n    </a>\n  }\n  @if (rootPage.viewSourceFileUrl) {\n    <a\n      ng-doc-button-icon\n      [href]=\"rootPage.viewSourceFileUrl\"\n      target=\"_blank\"\n      ngDocTooltip=\"View Source\">\n      <ng-doc-icon icon=\"code\"></ng-doc-icon>\n    </a>\n  }\n</div>\n\n<div\n  class=\"ng-doc-page-wrapper\"\n  [ngDocPageProcessor]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n  (afterRender)=\"createToc()\"\n  #pageContainer></div>\n\n@if (!rootPage.page?.disableFullscreenRoutes) {\n  <ng-doc-dialog-outlet [config]=\"{ width: '100vw', height: '100vh' }\">\n    <div class=\"ng-doc-fullscreen-wrapper\">\n      <router-outlet></router-outlet>\n    </div>\n  </ng-doc-dialog-outlet>\n}\n", styles: [":host{display:flex;flex-direction:column}:host .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}.ng-doc-fullscreen-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", 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: "component", type: NgDocPageProcessorComponent, selector: "[ngDocPageProcessor]", inputs: ["ngDocPageProcessor"], outputs: ["afterRender"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: DialogOutletComponent, selector: "ng-doc-dialog-outlet", inputs: ["config"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
                         NgDocButtonIconComponent,
                         NgDocTooltipDirective,
                         NgDocIconComponent,
@@ -51,7 +49,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         provideTypeControl('string', NgDocStringControlComponent, { order: 20 }),
                         provideTypeControl('number', NgDocNumberControlComponent, { order: 30 }),
                         provideTypeControl('boolean', NgDocBooleanControlComponent, { hideLabel: true, order: 40 }),
-                    ], host: { ngSkipHydration: 'true' }, template: "<div class=\"ng-doc-page-controls\">\n  <a\n    ng-doc-button-icon\n    *ngIf=\"rootPage.editSourceFileUrl\"\n    [href]=\"rootPage.editSourceFileUrl\"\n    target=\"_blank\"\n    ngDocTooltip=\"Suggest Edits\">\n    <ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n  </a>\n  <a\n    ng-doc-button-icon\n    *ngIf=\"rootPage.viewSourceFileUrl\"\n    [href]=\"rootPage.viewSourceFileUrl\"\n    target=\"_blank\"\n    ngDocTooltip=\"View Source\">\n    <ng-doc-icon icon=\"code\"></ng-doc-icon>\n  </a>\n</div>\n\n<div\n  class=\"ng-doc-page-wrapper\"\n  [ngDocPageProcessor]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n  (afterRender)=\"createToc()\"\n  #pageContainer></div>\n\n<ng-doc-dialog-outlet\n  *ngIf=\"!rootPage.page?.disableFullscreenRoutes\"\n  [config]=\"{ width: '100vw', height: '100vh' }\">\n  <div class=\"ng-doc-fullscreen-wrapper\">\n    <router-outlet></router-outlet>\n  </div>\n</ng-doc-dialog-outlet>\n", styles: [":host{display:flex;flex-direction:column}:host .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}.ng-doc-fullscreen-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+                    ], host: { ngSkipHydration: 'true' }, template: "<div class=\"ng-doc-page-controls\">\n  @if (rootPage.editSourceFileUrl) {\n    <a\n      ng-doc-button-icon\n      [href]=\"rootPage.editSourceFileUrl\"\n      target=\"_blank\"\n      ngDocTooltip=\"Suggest Edits\">\n      <ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n    </a>\n  }\n  @if (rootPage.viewSourceFileUrl) {\n    <a\n      ng-doc-button-icon\n      [href]=\"rootPage.viewSourceFileUrl\"\n      target=\"_blank\"\n      ngDocTooltip=\"View Source\">\n      <ng-doc-icon icon=\"code\"></ng-doc-icon>\n    </a>\n  }\n</div>\n\n<div\n  class=\"ng-doc-page-wrapper\"\n  [ngDocPageProcessor]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n  (afterRender)=\"createToc()\"\n  #pageContainer></div>\n\n@if (!rootPage.page?.disableFullscreenRoutes) {\n  <ng-doc-dialog-outlet [config]=\"{ width: '100vw', height: '100vh' }\">\n    <div class=\"ng-doc-fullscreen-wrapper\">\n      <router-outlet></router-outlet>\n    </div>\n  </ng-doc-dialog-outlet>\n}\n", styles: [":host{display:flex;flex-direction:column}:host .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}.ng-doc-fullscreen-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
         }], propDecorators: { pageContainer: [{
                 type: ViewChild,
                 args: ['pageContainer', { read: ElementRef, static: true }]

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

	@@ -1 +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 {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n inject,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { NgDocRootPage } from '@ng-doc/app/classes/root-page';\nimport { NgDocPageWrapperComponent } from '@ng-doc/app/components/page-wrapper';\nimport { createComponent, generateToc } from '@ng-doc/app/helpers';\nimport { NgDocPageSkeleton } from '@ng-doc/app/interfaces';\nimport { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';\nimport { NgDocPageProcessorComponent } from '@ng-doc/app/processors';\nimport { provideTypeControl } from '@ng-doc/app/providers/type-control';\nimport { NG_DOC_PAGE_SKELETON } from '@ng-doc/app/tokens';\nimport {\n NgDocBooleanControlComponent,\n NgDocNumberControlComponent,\n NgDocStringControlComponent,\n NgDocTypeAliasControlComponent,\n} from '@ng-doc/app/type-controls';\nimport {\n DialogOutletComponent,\n NgDocButtonIconComponent,\n NgDocIconComponent,\n NgDocTooltipDirective,\n} from '@ng-doc/ui-kit';\n\n@Component({\n selector: 'ng-doc-page',\n templateUrl: './page.component.html',\n styleUrls: ['./page.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n NgIf,\n NgDocButtonIconComponent,\n NgDocTooltipDirective,\n NgDocIconComponent,\n NgDocPageProcessorComponent,\n RouterOutlet,\n DialogOutletComponent,\n NgDocSanitizeHtmlPipe,\n ],\n providers: [\n provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 }),\n provideTypeControl('string', NgDocStringControlComponent, { order: 20 }),\n provideTypeControl('number', NgDocNumberControlComponent, { order: 30 }),\n provideTypeControl('boolean', NgDocBooleanControlComponent, { hideLabel: true, order: 40 }),\n ],\n host: { ngSkipHydration: 'true' },\n})\nexport class NgDocPageComponent {\n @ViewChild('pageContainer', { read: ElementRef, static: true })\n pageContainer!: ElementRef<HTMLElement>;\n\n @ViewChild('childOutlet')\n childOutlet?: TemplateRef<never>;\n\n protected rootPage: NgDocRootPage = inject(NgDocRootPage);\n protected skeleton: NgDocPageSkeleton = inject(NG_DOC_PAGE_SKELETON);\n protected changeDetectorRef = inject(ChangeDetectorRef);\n\n protected pageWrapper: NgDocPageWrapperComponent = inject(NgDocPageWrapperComponent);\n\n createToc(): void {\n if (this.pageWrapper.pageToc && this.skeleton.toc) {\n createComponent(this.pageWrapper.pageToc, this.skeleton.toc, {\n tableOfContent: generateToc(this.pageContainer.nativeElement) ?? [],\n });\n\n this.changeDetectorRef.detectChanges();\n }\n }\n}\n","<div class=\"ng-doc-page-controls\">\n <a\n ng-doc-button-icon\n ngIf=\"rootPage.editSourceFileUrl\"\n [href]=\"rootPage.editSourceFileUrl\"\n target=\"_blank\"\n ngDocTooltip=\"Suggest Edits\">\n <ng-doc-icon icon=\"edit-2\"></ng-doc-icon>\n </a>\n <a\n ng-doc-button-icon\n ngIf=\"rootPage.viewSourceFileUrl\"\n [href]=\"rootPage.viewSourceFileUrl\"\n target=\"_blank\"\n ngDocTooltip=\"View Source\">\n <ng-doc-icon icon=\"code\"></ng-doc-icon>\n </a>\n</div>\n\n<div\n class=\"ng-doc-page-wrapper\"\n [ngDocPageProcessor]=\"rootPage.pageContent \| ngDocSanitizeHtml\"\n (afterRender)=\"createToc()\"\n #pageContainer></div>\n\n<ng-doc-dialog-outlet\n ngIf=\"!rootPage.page?.disableFullscreenRoutes\"\n [config]=\"{ width: '100vw', height: '100vh' }\">\n <div class=\"ng-doc-fullscreen-wrapper\">\n <router-outlet></router-outlet>\n </div>\n</ng-doc-dialog-outlet>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ng-doc-app-components-page.mjs","sources":["../tmp-esm2022/components/page/page.component.js","../tmp-esm2022/components/page/ng-doc-app-components-page.js"],"sourcesContent":["import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, inject, TemplateRef, ViewChild, } from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { NgDocRootPage } from '@ng-doc/app/classes/root-page';\nimport { NgDocPageWrapperComponent } from '@ng-doc/app/components/page-wrapper';\nimport { createComponent, generateToc } from '@ng-doc/app/helpers';\nimport { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';\nimport { NgDocPageProcessorComponent } from '@ng-doc/app/processors';\nimport { provideTypeControl } from '@ng-doc/app/providers/type-control';\nimport { NG_DOC_PAGE_SKELETON } from '@ng-doc/app/tokens';\nimport { NgDocBooleanControlComponent, NgDocNumberControlComponent, NgDocStringControlComponent, NgDocTypeAliasControlComponent, } from '@ng-doc/app/type-controls';\nimport { DialogOutletComponent, NgDocButtonIconComponent, NgDocIconComponent, NgDocTooltipDirective, } from '@ng-doc/ui-kit';\nimport * as i0 from \"@angular/core\";\nexport class NgDocPageComponent {\n constructor() {\n this.rootPage = inject(NgDocRootPage);\n this.skeleton = inject(NG_DOC_PAGE_SKELETON);\n this.changeDetectorRef = inject(ChangeDetectorRef);\n this.pageWrapper = inject(NgDocPageWrapperComponent);\n }\n createToc() {\n if (this.pageWrapper.pageToc && this.skeleton.toc) {\n createComponent(this.pageWrapper.pageToc, this.skeleton.toc, {\n tableOfContent: generateToc(this.pageContainer.nativeElement) ?? [],\n });\n this.changeDetectorRef.detectChanges();\n }\n }\n static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.0.3\", ngImport: i0, type: NgDocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }\n static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"20.0.3\", type: NgDocPageComponent, isStandalone: true, selector: \"ng-doc-page\", host: { attributes: { \"ngSkipHydration\": \"true\" } }, providers: [\n provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 }),\n provideTypeControl('string', NgDocStringControlComponent, { order: 20 }),\n provideTypeControl('number', NgDocNumberControlComponent, { order: 30 }),\n provideTypeControl('boolean', NgDocBooleanControlComponent, { hideLabel: true, order: 40 }),\n ], viewQueries: [{ propertyName: \"pageContainer\", first: true, predicate: [\"pageContainer\"], descendants: true, read: ElementRef, static: true }, { propertyName: \"childOutlet\", first: true, predicate: [\"childOutlet\"], descendants: true }], ngImport: i0, template: \"<div class=\\\"ng-doc-page-controls\\\">\\n @if (rootPage.editSourceFileUrl) {\\n <a\\n ng-doc-button-icon\\n [href]=\\\"rootPage.editSourceFileUrl\\\"\\n target=\\\"_blank\\\"\\n ngDocTooltip=\\\"Suggest Edits\\\">\\n <ng-doc-icon icon=\\\"edit-2\\\"></ng-doc-icon>\\n </a>\\n }\\n @if (rootPage.viewSourceFileUrl) {\\n <a\\n ng-doc-button-icon\\n [href]=\\\"rootPage.viewSourceFileUrl\\\"\\n target=\\\"_blank\\\"\\n ngDocTooltip=\\\"View Source\\\">\\n <ng-doc-icon icon=\\\"code\\\"></ng-doc-icon>\\n </a>\\n }\\n</div>\\n\\n<div\\n class=\\\"ng-doc-page-wrapper\\\"\\n [ngDocPageProcessor]=\\\"rootPage.pageContent \| ngDocSanitizeHtml\\\"\\n (afterRender)=\\\"createToc()\\\"\\n #pageContainer></div>\\n\\n@if (!rootPage.page?.disableFullscreenRoutes) {\\n <ng-doc-dialog-outlet [config]=\\\"{ width: '100vw', height: '100vh' }\\\">\\n <div class=\\\"ng-doc-fullscreen-wrapper\\\">\\n <router-outlet></router-outlet>\\n </div>\\n </ng-doc-dialog-outlet>\\n}\\n\", styles: [\":host{display:flex;flex-direction:column}:host .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}.ng-doc-fullscreen-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\\n\"], dependencies: [{ kind: \"component\", type: NgDocButtonIconComponent, selector: \"button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]\", 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: \"component\", type: NgDocPageProcessorComponent, selector: \"[ngDocPageProcessor]\", inputs: [\"ngDocPageProcessor\"], outputs: [\"afterRender\"] }, { kind: \"directive\", type: RouterOutlet, selector: \"router-outlet\", inputs: [\"name\", \"routerOutletData\"], outputs: [\"activate\", \"deactivate\", \"attach\", \"detach\"], exportAs: [\"outlet\"] }, { kind: \"component\", type: DialogOutletComponent, selector: \"ng-doc-dialog-outlet\", inputs: [\"config\"] }, { kind: \"pipe\", type: NgDocSanitizeHtmlPipe, name: \"ngDocSanitizeHtml\" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.0.3\", ngImport: i0, type: NgDocPageComponent, decorators: [{\n type: Component,\n args: [{ selector: 'ng-doc-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [\n NgDocButtonIconComponent,\n NgDocTooltipDirective,\n NgDocIconComponent,\n NgDocPageProcessorComponent,\n RouterOutlet,\n DialogOutletComponent,\n NgDocSanitizeHtmlPipe,\n ], providers: [\n provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 }),\n provideTypeControl('string', NgDocStringControlComponent, { order: 20 }),\n provideTypeControl('number', NgDocNumberControlComponent, { order: 30 }),\n provideTypeControl('boolean', NgDocBooleanControlComponent, { hideLabel: true, order: 40 }),\n ], host: { ngSkipHydration: 'true' }, template: \"<div class=\\\"ng-doc-page-controls\\\">\\n @if (rootPage.editSourceFileUrl) {\\n <a\\n ng-doc-button-icon\\n [href]=\\\"rootPage.editSourceFileUrl\\\"\\n target=\\\"_blank\\\"\\n ngDocTooltip=\\\"Suggest Edits\\\">\\n <ng-doc-icon icon=\\\"edit-2\\\"></ng-doc-icon>\\n </a>\\n }\\n @if (rootPage.viewSourceFileUrl) {\\n <a\\n ng-doc-button-icon\\n [href]=\\\"rootPage.viewSourceFileUrl\\\"\\n target=\\\"_blank\\\"\\n ngDocTooltip=\\\"View Source\\\">\\n <ng-doc-icon icon=\\\"code\\\"></ng-doc-icon>\\n </a>\\n }\\n</div>\\n\\n<div\\n class=\\\"ng-doc-page-wrapper\\\"\\n [ngDocPageProcessor]=\\\"rootPage.pageContent \| ngDocSanitizeHtml\\\"\\n (afterRender)=\\\"createToc()\\\"\\n #pageContainer></div>\\n\\n@if (!rootPage.page?.disableFullscreenRoutes) {\\n <ng-doc-dialog-outlet [config]=\\\"{ width: '100vw', height: '100vh' }\\\">\\n <div class=\\\"ng-doc-fullscreen-wrapper\\\">\\n <router-outlet></router-outlet>\\n </div>\\n </ng-doc-dialog-outlet>\\n}\\n\", styles: [\":host{display:flex;flex-direction:column}:host .ng-doc-page-controls{position:absolute;display:flex;grid-gap:var(--ng-doc-base-gutter);top:0;right:0}.ng-doc-fullscreen-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\\n\"] }]\n }], propDecorators: { pageContainer: [{\n type: ViewChild,\n args: ['pageContainer', { read: ElementRef, static: true }]\n }], childOutlet: [{\n type: ViewChild,\n args: ['childOutlet']\n }] } });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FwcC9jb21wb25lbnRzL3BhZ2UvcGFnZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FwcC9jb21wb25lbnRzL3BhZ2UvcGFnZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixTQUFTLEVBQ1QsVUFBVSxFQUNWLE1BQU0sRUFDTixXQUFXLEVBQ1gsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFDOUQsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0scUNBQXFDLENBQUM7QUFDaEYsT0FBTyxFQUFFLGVBQWUsRUFBRSxXQUFXLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUVuRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUNyRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN4RSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUMxRCxPQUFPLEVBQ0wsNEJBQTRCLEVBQzVCLDJCQUEyQixFQUMzQiwyQkFBMkIsRUFDM0IsOEJBQThCLEdBQy9CLE1BQU0sMkJBQTJCLENBQUM7QUFDbkMsT0FBTyxFQUNMLHFCQUFxQixFQUNyQix3QkFBd0IsRUFDeEIsa0JBQWtCLEVBQ2xCLHFCQUFxQixHQUN0QixNQUFNLGdCQUFnQixDQUFDOztBQXdCeEIsTUFBTSxPQUFPLGtCQUFrQjtJQXRCL0I7UUE2QlksYUFBUSxHQUFrQixNQUFNLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDaEQsYUFBUSxHQUFzQixNQUFNLENBQUMsb0JBQW9CLENBQUMsQ0FBQztRQUMzRCxzQkFBaUIsR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUU5QyxnQkFBVyxHQUE4QixNQUFNLENBQUMseUJBQXlCLENBQUMsQ0FBQztLQVd0RjtJQVRDLFNBQVM7UUFDUCxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDbEQsZUFBZSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxFQUFFO2dCQUMzRCxjQUFjLEVBQUUsV0FBVyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRTthQUNwRSxDQUFDLENBQUM7WUFFSCxJQUFJLENBQUMsaUJBQWlCLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDekMsQ0FBQztJQUNILENBQUM7OEdBckJVLGtCQUFrQjtrR0FBbEIsa0JBQWtCLCtHQVJsQjtZQUNULGtCQUFrQixDQUFDLGdCQUFnQixFQUFFLDhCQUE4QixFQUFFLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxDQUFDO1lBQ25GLGtCQUFrQixDQUFDLFFBQVEsRUFBRSwyQkFBMkIsRUFBRSxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsQ0FBQztZQUN4RSxrQkFBa0IsQ0FBQyxRQUFRLEVBQUUsMkJBQTJCLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLENBQUM7WUFDeEUsa0JBQWtCLENBQUMsU0FBUyxFQUFFLDRCQUE0QixFQUFFLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLENBQUM7U0FDNUYscUhBSW1DLFVBQVUsd0lDdERoRCxnOEJBa0NBLDBUREdJLHdCQUF3Qix1UUFDeEIscUJBQXFCLDBVQUNyQixrQkFBa0IsZ0dBQ2xCLDJCQUEyQiwySEFDM0IsWUFBWSwrS0FDWixxQkFBcUIsZ0ZBQ3JCLHFCQUFxQjs7MkZBVVosa0JBQWtCO2tCQXRCOUIsU0FBUzsrQkFDRSxhQUFhLG1CQUdOLHVCQUF1QixDQUFDLE1BQU0sV0FDdEM7d0JBQ1Asd0JBQXdCO3dCQUN4QixxQkFBcUI7d0JBQ3JCLGtCQUFrQjt3QkFDbEIsMkJBQTJCO3dCQUMzQixZQUFZO3dCQUNaLHFCQUFxQjt3QkFDckIscUJBQXFCO3FCQUN0QixhQUNVO3dCQUNULGtCQUFrQixDQUFDLGdCQUFnQixFQUFFLDhCQUE4QixFQUFFLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRSxDQUFDO3dCQUNuRixrQkFBa0IsQ0FBQyxRQUFRLEVBQUUsMkJBQTJCLEVBQUUsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLENBQUM7d0JBQ3hFLGtCQUFrQixDQUFDLFFBQVEsRUFBRSwyQkFBMkIsRUFBRSxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUUsQ0FBQzt3QkFDeEUsa0JBQWtCLENBQUMsU0FBUyxFQUFFLDRCQUE0QixFQUFFLEVBQUUsU0FBUyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFLENBQUM7cUJBQzVGLFFBQ0ssRUFBRSxlQUFlLEVBQUUsTUFBTSxFQUFFOzhCQUlqQyxhQUFhO3NCQURaLFNBQVM7dUJBQUMsZUFBZSxFQUFFLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO2dCQUk5RCxXQUFXO3NCQURWLFNBQVM7dUJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBpbmplY3QsXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUm91dGVyT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IE5nRG9jUm9vdFBhZ2UgfSBmcm9tICdAbmctZG9jL2FwcC9jbGFzc2VzL3Jvb3QtcGFnZSc7XG5pbXBvcnQgeyBOZ0RvY1BhZ2VXcmFwcGVyQ29tcG9uZW50IH0gZnJvbSAnQG5nLWRvYy9hcHAvY29tcG9uZW50cy9wYWdlLXdyYXBwZXInO1xuaW1wb3J0IHsgY3JlYXRlQ29tcG9uZW50LCBnZW5lcmF0ZVRvYyB9IGZyb20gJ0BuZy1kb2MvYXBwL2hlbHBlcnMnO1xuaW1wb3J0IHsgTmdEb2NQYWdlU2tlbGV0b24gfSBmcm9tICdAbmctZG9jL2FwcC9pbnRlcmZhY2VzJztcbmltcG9ydCB7IE5nRG9jU2FuaXRpemVIdG1sUGlwZSB9IGZyb20gJ0BuZy1kb2MvYXBwL3BpcGVzJztcbmltcG9ydCB7IE5nRG9jUGFnZVByb2Nlc3NvckNvbXBvbmVudCB9IGZyb20gJ0BuZy1kb2MvYXBwL3Byb2Nlc3NvcnMnO1xuaW1wb3J0IHsgcHJvdmlkZVR5cGVDb250cm9sIH0gZnJvbSAnQG5nLWRvYy9hcHAvcHJvdmlkZXJzL3R5cGUtY29udHJvbCc7XG5pbXBvcnQgeyBOR19ET0NfUEFHRV9TS0VMRVRPTiB9IGZyb20gJ0BuZy1kb2MvYXBwL3Rva2Vucyc7XG5pbXBvcnQge1xuICBOZ0RvY0Jvb2xlYW5Db250cm9sQ29tcG9uZW50LFxuICBOZ0RvY051bWJlckNvbnRyb2xDb21wb25lbnQsXG4gIE5nRG9jU3RyaW5nQ29udHJvbENvbXBvbmVudCxcbiAgTmdEb2NUeXBlQWxpYXNDb250cm9sQ29tcG9uZW50LFxufSBmcm9tICdAbmctZG9jL2FwcC90eXBlLWNvbnRyb2xzJztcbmltcG9ydCB7XG4gIERpYWxvZ091dGxldENvbXBvbmVudCxcbiAgTmdEb2NCdXR0b25JY29uQ29tcG9uZW50LFxuICBOZ0RvY0ljb25Db21wb25lbnQsXG4gIE5nRG9jVG9vbHRpcERpcmVjdGl2ZSxcbn0gZnJvbSAnQG5nLWRvYy91aS1raXQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZy1kb2MtcGFnZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9wYWdlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGFnZS5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW1xuICAgIE5nRG9jQnV0dG9uSWNvbkNvbXBvbmVudCxcbiAgICBOZ0RvY1Rvb2x0aXBEaXJlY3RpdmUsXG4gICAgTmdEb2NJY29uQ29tcG9uZW50LFxuICAgIE5nRG9jUGFnZVByb2Nlc3NvckNvbXBvbmVudCxcbiAgICBSb3V0ZXJPdXRsZXQsXG4gICAgRGlhbG9nT3V0bGV0Q29tcG9uZW50LFxuICAgIE5nRG9jU2FuaXRpemVIdG1sUGlwZSxcbiAgXSxcbiAgcHJvdmlkZXJzOiBbXG4gICAgcHJvdmlkZVR5cGVDb250cm9sKCdOZ0RvY1R5cGVBbGlhcycsIE5nRG9jVHlwZUFsaWFzQ29udHJvbENvbXBvbmVudCwgeyBvcmRlcjogMTAgfSksXG4gICAgcHJvdmlkZVR5cGVDb250cm9sKCdzdHJpbmcnLCBOZ0RvY1N0cmluZ0NvbnRyb2xDb21wb25lbnQsIHsgb3JkZXI6IDIwIH0pLFxuICAgIHByb3ZpZGVUeXBlQ29udHJvbCgnbnVtYmVyJywgTmdEb2NOdW1iZXJDb250cm9sQ29tcG9uZW50LCB7IG9yZGVyOiAzMCB9KSxcbiAgICBwcm92aWRlVHlwZUNvbnRyb2woJ2Jvb2xlYW4nLCBOZ0RvY0Jvb2xlYW5Db250cm9sQ29tcG9uZW50LCB7IGhpZGVMYWJlbDogdHJ1ZSwgb3JkZXI6IDQwIH0pLFxuICBdLFxuICBob3N0OiB7IG5nU2tpcEh5ZHJhdGlvbjogJ3RydWUnIH0sXG59KVxuZXhwb3J0IGNsYXNzIE5nRG9jUGFnZUNvbXBvbmVudCB7XG4gIEBWaWV3Q2hpbGQoJ3BhZ2VDb250YWluZXInLCB7IHJlYWQ6IEVsZW1lbnRSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICBwYWdlQ29udGFpbmVyITogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XG5cbiAgQFZpZXdDaGlsZCgnY2hpbGRPdXRsZXQnKVxuICBjaGlsZE91dGxldD86IFRlbXBsYXRlUmVmPG5ldmVyPjtcblxuICBwcm90ZWN0ZWQgcm9vdFBhZ2U6IE5nRG9jUm9vdFBhZ2UgPSBpbmplY3QoTmdEb2NSb290UGFnZSk7XG4gIHByb3RlY3RlZCBza2VsZXRvbjogTmdEb2NQYWdlU2tlbGV0b24gPSBpbmplY3QoTkdfRE9DX1BBR0VfU0tFTEVUT04pO1xuICBwcm90ZWN0ZWQgY2hhbmdlRGV0ZWN0b3JSZWYgPSBpbmplY3QoQ2hhbmdlRGV0ZWN0b3JSZWYpO1xuXG4gIHByb3RlY3RlZCBwYWdlV3JhcHBlcjogTmdEb2NQYWdlV3JhcHBlckNvbXBvbmVudCA9IGluamVjdChOZ0RvY1BhZ2VXcmFwcGVyQ29tcG9uZW50KTtcblxuICBjcmVhdGVUb2MoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucGFnZVdyYXBwZXIucGFnZVRvYyAmJiB0aGlzLnNrZWxldG9uLnRvYykge1xuICAgICAgY3JlYXRlQ29tcG9uZW50KHRoaXMucGFnZVdyYXBwZXIucGFnZVRvYywgdGhpcy5za2VsZXRvbi50b2MsIHtcbiAgICAgICAgdGFibGVPZkNvbnRlbnQ6IGdlbmVyYXRlVG9jKHRoaXMucGFnZUNvbnRhaW5lci5uYXRpdmVFbGVtZW50KSA/PyBbXSxcbiAgICAgIH0pO1xuXG4gICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGVjdENoYW5nZXMoKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJuZy1kb2MtcGFnZS1jb250cm9sc1wiPlxuICBAaWYgKHJvb3RQYWdlLmVkaXRTb3VyY2VGaWxlVXJsKSB7XG4gICAgPGFcbiAgICAgIG5nLWRvYy1idXR0b24taWNvblxuICAgICAgW2hyZWZdPVwicm9vdFBhZ2UuZWRpdFNvdXJjZUZpbGVVcmxcIlxuICAgICAgdGFyZ2V0PVwiX2JsYW5rXCJcbiAgICAgIG5nRG9jVG9vbHRpcD1cIlN1Z2dlc3QgRWRpdHNcIj5cbiAgICAgIDxuZy1kb2MtaWNvbiBpY29uPVwiZWRpdC0yXCI+PC9uZy1kb2MtaWNvbj5cbiAgICA8L2E+XG4gIH1cbiAgQGlmIChyb290UGFnZS52aWV3U291cmNlRmlsZVVybCkge1xuICAgIDxhXG4gICAgICBuZy1kb2MtYnV0dG9uLWljb25cbiAgICAgIFtocmVmXT1cInJvb3RQYWdlLnZpZXdTb3VyY2VGaWxlVXJsXCJcbiAgICAgIHRhcmdldD1cIl9ibGFua1wiXG4gICAgICBuZ0RvY1Rvb2x0aXA9XCJWaWV3IFNvdXJjZVwiPlxuICAgICAgPG5nLWRvYy1pY29uIGljb249XCJjb2RlXCI+PC9uZy1kb2MtaWNvbj5cbiAgICA8L2E+XG4gIH1cbjwvZGl2PlxuXG48ZGl2XG4gIGNsYXNzPVwibmctZG9jLXBhZ2Utd3JhcHBlclwiXG4gIFtuZ0RvY1BhZ2VQcm9jZXNzb3JdPVwicm9vdFBhZ2UucGFnZUNvbnRlbnQgfCBuZ0RvY1Nhbml0aXplSHRtbFwiXG4gIChhZnRlclJlbmRlcik9XCJjcmVhdGVUb2MoKVwiXG4gICNwYWdlQ29udGFpbmVyPjwvZGl2PlxuXG5AaWYgKCFyb290UGFnZS5wYWdlPy5kaXNhYmxlRnVsbHNjcmVlblJvdXRlcykge1xuICA8bmctZG9jLWRpYWxvZy1vdXRsZXQgW2NvbmZpZ109XCJ7IHdpZHRoOiAnMTAwdncnLCBoZWlnaHQ6ICcxMDB2aCcgfVwiPlxuICAgIDxkaXYgY2xhc3M9XCJuZy1kb2MtZnVsbHNjcmVlbi13cmFwcGVyXCI+XG4gICAgICA8cm91dGVyLW91dGxldD48L3JvdXRlci1vdXRsZXQ+XG4gICAgPC9kaXY+XG4gIDwvbmctZG9jLWRpYWxvZy1vdXRsZXQ+XG59XG4iXX0=","/*\n Generated bundle index. Do not edit.\n /\nexport from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctZG9jLWFwcC1jb21wb25lbnRzLXBhZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FwcC9jb21wb25lbnRzL3BhZ2UvbmctZG9jLWFwcC1jb21wb25lbnRzLXBhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0="],"names":[],"mappings":"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"}

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

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, Injector, ChangeDetectorRef, DestroyRef, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, EventEmitter, isDevMode, Output, Directive } from '@angular/core';
+import { inject, Injector, ChangeDetectorRef, DestroyRef, ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, Component, HostBinding, EventEmitter, isDevMode, Output, Directive } from '@angular/core';
 import { extractFunctionDefaults } from '@ng-doc/core/helpers/extract-function-defaults';
 import { Subject, take } from 'rxjs';
-import { NgIf, NgFor, AsyncPipe, KeyValuePipe } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i1$1 from '@ng-doc/app/classes/root-page';
+import * as i1 from '@angular/forms';
+import { FormsModule, FormBuilder } from '@angular/forms';
+import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { isSameObject } from '@ng-doc/core/helpers/is-same-object';
 import { objectKeys } from '@ng-doc/core/helpers/object-keys';
 import { NgDocSmoothResizeComponent, NgDocLabelComponent, NgDocTooltipDirective, NgDocTextComponent, NgDocButtonComponent, NgDocCheckboxComponent, NgDocIconComponent, NgDocTextRightDirective, NgDocBindPipe, NgDocExecutePipe, NgDocAsArrayPipe } from '@ng-doc/ui-kit';
@@ -16,8 +15,8 @@ import { getPlaygroundDemoToken } from '@ng-doc/app/providers/playground-demo';
 import { buildPlaygroundDemoPipeTemplate, buildPlaygroundDemoTemplate } from '@ng-doc/core/helpers/build-playground-demo-template';
 import { stringify } from '@ng-doc/core/helpers/stringify';
 import { takeUntil, startWith, map } from 'rxjs/operators';
-import * as i1 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
+import { AsyncPipe, KeyValuePipe } from '@angular/common';
 import { getTokenForType } from '@ng-doc/app/providers/type-control';
 import { extractValueOrThrow } from '@ng-doc/core/helpers/extract-value';
 import { isPresent } from '@ng-doc/core/helpers/is-present';
@@ -121,10 +120,10 @@ class NgDocPlaygroundDemoComponent {
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPlaygroundDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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 [trigger]=\"code\">\n  <ng-doc-demo-displayer\n    [code]=\"code\"\n    [border]=\"false\"\n    [expanded]=\"expanded\"\n    language=\"angular-html\">\n    <ng-container #demoOutlet></ng-container>\n  </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: "component", type: NgDocSmoothResizeComponent, selector: "ng-doc-smooth-resize", inputs: ["trigger", "animateOpacity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPlaygroundDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", 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 [trigger]=\"code\">\n  <ng-doc-demo-displayer\n    [code]=\"code\"\n    [border]=\"false\"\n    [expanded]=\"expanded\"\n    language=\"angular-html\">\n    <ng-container #demoOutlet></ng-container>\n  </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: "component", type: NgDocSmoothResizeComponent, selector: "ng-doc-smooth-resize", inputs: ["trigger", "animateOpacity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPlaygroundDemoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPlaygroundDemoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-playground-demo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocDemoDisplayerComponent, NgDocSmoothResizeComponent], template: "<ng-doc-smooth-resize [trigger]=\"code\">\n  <ng-doc-demo-displayer\n    [code]=\"code\"\n    [border]=\"false\"\n    [expanded]=\"expanded\"\n    language=\"angular-html\">\n    <ng-container #demoOutlet></ng-container>\n  </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"] }]
         }], propDecorators: { id: [{
@@ -185,10 +184,10 @@ class NgDocPlaygroundPropertyComponent {
             ? this.property.description ?? ''
             : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", 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: "19.0.3", ngImport: i0, type: NgDocPlaygroundPropertyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPlaygroundPropertyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, 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: [{
@@ -210,9 +209,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             }] } });
 class NgDocPlaygroundPropertiesComponent {
-    constructor(breakpointObserver, injector) {
-        this.breakpointObserver = breakpointObserver;
-        this.injector = injector;
+    constructor() {
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.injector = inject(Injector);
         this.ignoreInputs = [];
         this.hideSidePanel = false;
         this.recreateDemo = false;
@@ -296,10 +295,10 @@ class NgDocPlaygroundPropertiesComponent {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", 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: "19.0.3", type: NgDocPlaygroundPropertiesComponent, isStandalone: true, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", ignoreInputs: "ignoreInputs", dynamicContent: "dynamicContent", defaultValues: "defaultValues", hideSidePanel: "hideSidePanel", recreateDemo: "recreateDemo", showResetButton: "showResetButton" }, 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=\"alert\" (click)=\"resetForm.emit()\" *ngIf=\"showResetButton\">\n\t\t\t\tReset\n\t\t\t</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;align-items:flex-start;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{position:sticky;display:flex;flex-direction:column;width:100%;min-width:0;z-index:4;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter))}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;align-self:normal;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);border:1px solid var(--ng-doc-border-color)}: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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocPlaygroundPropertiesComponent, isStandalone: true, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", ignoreInputs: "ignoreInputs", dynamicContent: "dynamicContent", defaultValues: "defaultValues", hideSidePanel: "hideSidePanel", recreateDemo: "recreateDemo", showResetButton: "showResetButton" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, usesOnChanges: true, ngImport: i0, template: "@if (defaultValues) {\n  <div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n    <div class=\"ng-doc-playground-demos\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideSidePanel) {\n      <div class=\"ng-doc-playground-properties\">\n        <div class=\"ng-doc-playground-header\">\n          <h4 ng-doc-text>Playground</h4>\n          @if (showResetButton) {\n            <button ng-doc-button color=\"alert\" (click)=\"resetForm.emit()\">Reset</button>\n          }\n        </div>\n        <div class=\"ng-doc-playground-setting\">\n          <ng-doc-checkbox\n            [(ngModel)]=\"recreateDemo\"\n            (ngModelChange)=\"recreateDemoChange.emit($event)\">\n            <span\n              ng-doc-text\n              [ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n              [positions]=\"['bottom-right', 'left-center']\">\n              Recreate\n              <ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n            </span>\n          </ng-doc-checkbox>\n        </div>\n        <div class=\"ng-doc-playground-divider\"></div>\n        @if (propertyControls.length) {\n          <h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n          @for (propertyControl of propertyControls; track propertyControl) {\n            <ng-doc-playground-property\n              [name]=\"propertyControl.property.inputName\"\n              [property]=\"propertyControl.property\"\n              [typeControl]=\"propertyControl.typeControl\"\n              [defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n              [control]=\"\n                getFormControl | bind: this | execute: 'properties' : propertyControl.propertyName\n              \">\n            </ng-doc-playground-property>\n          }\n        }\n        @if ((dynamicContent | keyvalue)?.length) {\n          <h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n          @for (content of dynamicContent | keyvalue; track content) {\n            <ng-doc-playground-property\n              [name]=\"content.value.label\"\n              [property]=\"content.value\"\n              [typeControl]=\"contentTypeControl\"\n              [control]=\"getFormControl | bind: this | execute: 'content' : content.key\">\n            </ng-doc-playground-property>\n          }\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex;align-items:flex-start;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{position:sticky;display:flex;flex-direction:column;width:100%;min-width:0;z-index:4;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter))}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;align-self:normal;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);border:1px solid var(--ng-doc-border-color)}: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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: "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: "19.0.3", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-playground-properties', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgDocTextComponent,
@@ -309,15 +308,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         NgDocTooltipDirective,
                         NgDocIconComponent,
                         NgDocTextRightDirective,
-                        NgIf,
-                        NgFor,
                         NgDocPlaygroundPropertyComponent,
                         AsyncPipe,
                         KeyValuePipe,
                         NgDocBindPipe,
                         NgDocExecutePipe,
-                    ], 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=\"alert\" (click)=\"resetForm.emit()\" *ngIf=\"showResetButton\">\n\t\t\t\tReset\n\t\t\t</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;align-items:flex-start;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{position:sticky;display:flex;flex-direction:column;width:100%;min-width:0;z-index:4;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter))}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;align-self:normal;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);border:1px solid var(--ng-doc-border-color)}: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: () => [{ type: i1.BreakpointObserver }, { type: i0.Injector }], propDecorators: { form: [{
+                    ], template: "@if (defaultValues) {\n  <div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n    <div class=\"ng-doc-playground-demos\">\n      <ng-content></ng-content>\n    </div>\n    @if (!hideSidePanel) {\n      <div class=\"ng-doc-playground-properties\">\n        <div class=\"ng-doc-playground-header\">\n          <h4 ng-doc-text>Playground</h4>\n          @if (showResetButton) {\n            <button ng-doc-button color=\"alert\" (click)=\"resetForm.emit()\">Reset</button>\n          }\n        </div>\n        <div class=\"ng-doc-playground-setting\">\n          <ng-doc-checkbox\n            [(ngModel)]=\"recreateDemo\"\n            (ngModelChange)=\"recreateDemoChange.emit($event)\">\n            <span\n              ng-doc-text\n              [ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n              [positions]=\"['bottom-right', 'left-center']\">\n              Recreate\n              <ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n            </span>\n          </ng-doc-checkbox>\n        </div>\n        <div class=\"ng-doc-playground-divider\"></div>\n        @if (propertyControls.length) {\n          <h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n          @for (propertyControl of propertyControls; track propertyControl) {\n            <ng-doc-playground-property\n              [name]=\"propertyControl.property.inputName\"\n              [property]=\"propertyControl.property\"\n              [typeControl]=\"propertyControl.typeControl\"\n              [defaultValue]=\"defaultValues[propertyControl.propertyName]\"\n              [control]=\"\n                getFormControl | bind: this | execute: 'properties' : propertyControl.propertyName\n              \">\n            </ng-doc-playground-property>\n          }\n        }\n        @if ((dynamicContent | keyvalue)?.length) {\n          <h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n          @for (content of dynamicContent | keyvalue; track content) {\n            <ng-doc-playground-property\n              [name]=\"content.value.label\"\n              [property]=\"content.value\"\n              [typeControl]=\"contentTypeControl\"\n              [control]=\"getFormControl | bind: this | execute: 'content' : content.key\">\n            </ng-doc-playground-property>\n          }\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex;align-items:flex-start;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{position:sticky;display:flex;flex-direction:column;width:100%;min-width:0;z-index:4;top:calc(var(--ng-doc-page-sticky-offset) + var(--ng-doc-base-gutter))}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;align-self:normal;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);border:1px solid var(--ng-doc-border-color)}: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: () => [], propDecorators: { form: [{
                 type: Input
             }], properties: [{
                 type: Input
@@ -340,9 +337,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             }] } });
 class NgDocPlaygroundComponent {
-    constructor(rootPage, formBuilder) {
-        this.rootPage = rootPage;
-        this.formBuilder = formBuilder;
+    constructor() {
+        this.rootPage = inject(NgDocRootPage);
+        this.formBuilder = inject(FormBuilder);
         this.id = '';
         this.pipeName = '';
         this.selectors = [];
@@ -403,19 +400,13 @@ class NgDocPlaygroundComponent {
             content: this.defaultContent,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", 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: "19.0.3", 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  <ng-doc-playground-properties\n    [form]=\"formGroup\"\n    [properties]=\"properties\"\n    [ignoreInputs]=\"configuration.hiddenInputs\"\n    [dynamicContent]=\"configuration.content\"\n    [hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n    [defaultValues]=\"defaultValues\"\n    [showResetButton]=\"!isDefaultState()\"\n    [(recreateDemo)]=\"recreateDemo\"\n    (resetForm)=\"resetForm()\">\n    <ng-doc-playground-demo\n      *ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n      [id]=\"id\"\n      [selector]=\"selector\"\n      [properties]=\"properties\"\n      [configuration]=\"configuration\"\n      [recreateDemo]=\"recreateDemo\"\n      [form]=\"formGroup\"\n      [expanded]=\"configuration.expanded ?? false\">\n    </ng-doc-playground-demo>\n\n    <ng-doc-playground-demo\n      *ngIf=\"pipeName\"\n      [id]=\"id\"\n      [pipeName]=\"pipeName\"\n      [properties]=\"properties\"\n      [configuration]=\"configuration\"\n      [recreateDemo]=\"recreateDemo\"\n      [form]=\"formGroup\">\n    </ng-doc-playground-demo>\n  </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", "showResetButton"], 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPlaygroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocPlaygroundComponent, isStandalone: true, selector: "ng-doc-playground", inputs: { id: "id", pipeName: "pipeName", selectors: "selectors", properties: "properties", options: "options" }, usesOnChanges: true, ngImport: i0, template: "@if (configuration) {\n  <ng-doc-playground-properties\n    [form]=\"formGroup\"\n    [properties]=\"properties\"\n    [ignoreInputs]=\"configuration.hiddenInputs\"\n    [dynamicContent]=\"configuration.content\"\n    [hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n    [defaultValues]=\"defaultValues\"\n    [showResetButton]=\"!isDefaultState()\"\n    [(recreateDemo)]=\"recreateDemo\"\n    (resetForm)=\"resetForm()\">\n    @for (selector of configuration.selectors ?? selectors | asArray; track selector) {\n      <ng-doc-playground-demo\n        [id]=\"id\"\n        [selector]=\"selector\"\n        [properties]=\"properties\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo\"\n        [form]=\"formGroup\"\n        [expanded]=\"configuration.expanded ?? false\">\n      </ng-doc-playground-demo>\n    }\n    @if (pipeName) {\n      <ng-doc-playground-demo\n        [id]=\"id\"\n        [pipeName]=\"pipeName\"\n        [properties]=\"properties\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo\"\n        [form]=\"formGroup\">\n      </ng-doc-playground-demo>\n    }\n  </ng-doc-playground-properties>\n}\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}\n"], dependencies: [{ kind: "component", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: ["form", "properties", "ignoreInputs", "dynamicContent", "defaultValues", "hideSidePanel", "recreateDemo", "showResetButton"], outputs: ["recreateDemoChange", "resetForm"] }, { 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: "19.0.3", ngImport: i0, type: NgDocPlaygroundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocPlaygroundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
-                        NgDocPlaygroundPropertiesComponent,
-                        NgFor,
-                        NgDocPlaygroundDemoComponent,
-                        NgDocAsArrayPipe,
-                    ], template: "<ng-container *ngIf=\"configuration\">\n  <ng-doc-playground-properties\n    [form]=\"formGroup\"\n    [properties]=\"properties\"\n    [ignoreInputs]=\"configuration.hiddenInputs\"\n    [dynamicContent]=\"configuration.content\"\n    [hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n    [defaultValues]=\"defaultValues\"\n    [showResetButton]=\"!isDefaultState()\"\n    [(recreateDemo)]=\"recreateDemo\"\n    (resetForm)=\"resetForm()\">\n    <ng-doc-playground-demo\n      *ngFor=\"let selector of configuration.selectors ?? selectors | asArray\"\n      [id]=\"id\"\n      [selector]=\"selector\"\n      [properties]=\"properties\"\n      [configuration]=\"configuration\"\n      [recreateDemo]=\"recreateDemo\"\n      [form]=\"formGroup\"\n      [expanded]=\"configuration.expanded ?? false\">\n    </ng-doc-playground-demo>\n\n    <ng-doc-playground-demo\n      *ngIf=\"pipeName\"\n      [id]=\"id\"\n      [pipeName]=\"pipeName\"\n      [properties]=\"properties\"\n      [configuration]=\"configuration\"\n      [recreateDemo]=\"recreateDemo\"\n      [form]=\"formGroup\">\n    </ng-doc-playground-demo>\n  </ng-doc-playground-properties>\n</ng-container>\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.NgDocRootPage }, { type: i2.FormBuilder }], propDecorators: { id: [{
+            args: [{ selector: 'ng-doc-playground', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocPlaygroundPropertiesComponent, NgDocPlaygroundDemoComponent, NgDocAsArrayPipe], template: "@if (configuration) {\n  <ng-doc-playground-properties\n    [form]=\"formGroup\"\n    [properties]=\"properties\"\n    [ignoreInputs]=\"configuration.hiddenInputs\"\n    [dynamicContent]=\"configuration.content\"\n    [hideSidePanel]=\"configuration.hideSidePanel ?? false\"\n    [defaultValues]=\"defaultValues\"\n    [showResetButton]=\"!isDefaultState()\"\n    [(recreateDemo)]=\"recreateDemo\"\n    (resetForm)=\"resetForm()\">\n    @for (selector of configuration.selectors ?? selectors | asArray; track selector) {\n      <ng-doc-playground-demo\n        [id]=\"id\"\n        [selector]=\"selector\"\n        [properties]=\"properties\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo\"\n        [form]=\"formGroup\"\n        [expanded]=\"configuration.expanded ?? false\">\n      </ng-doc-playground-demo>\n    }\n    @if (pipeName) {\n      <ng-doc-playground-demo\n        [id]=\"id\"\n        [pipeName]=\"pipeName\"\n        [properties]=\"properties\"\n        [configuration]=\"configuration\"\n        [recreateDemo]=\"recreateDemo\"\n        [form]=\"formGroup\">\n      </ng-doc-playground-demo>\n    }\n  </ng-doc-playground-properties>\n}\n", styles: [":host{display:block;margin:var(--ng-doc-playground-margin)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{
                 type: Input,
                 args: [{ required: true }]
             }], pipeName: [{
@@ -497,10 +488,10 @@ class NgDocBasePlayground {
     get data() {
         return Object.assign({}, this.configData, this.actionData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocBasePlayground, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: NgDocBasePlayground, isStandalone: true, inputs: { properties: "properties", actionData: "actionData", content: "content" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocBasePlayground, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.3", type: NgDocBasePlayground, isStandalone: true, inputs: { properties: "properties", actionData: "actionData", content: "content" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocBasePlayground, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocBasePlayground, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: undefined }], propDecorators: { properties: [{
                 type: Input