npm - @ng-doc/app - Versions diffs - 22.0.0-beta.2 → 22.1.0 - Mend

@ng-doc/app 22.0.0-beta.2 → 22.1.0

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 (215) hide show

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

@@ -1,28 +1,26 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { NgDocIconComponent, NgDocTextComponent, NgDocTextLeftDirective, NgDocTextRightDirective } from '@ng-doc/ui-kit';
+/**
+ * Links to the previous and the next page, as two cards at the bottom of a guide.
+ */
 class NgDocPageNavigationComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPageNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocPageNavigationComponent, isStandalone: true, selector: "ng-doc-page-navigation", inputs: { prevPage: "prevPage", nextPage: "nextPage" }, ngImport: i0, template: "<div class=\"ng-doc-navigation-controls\">\n  @if (prevPage) {\n    <a class=\"ng-doc-prev-page\" [routerLink]=\"prevPage.route\">\n      <div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n        <ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n        Previous\n      </div>\n      <div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n    </a>\n  }\n  @if (nextPage) {\n    <a class=\"ng-doc-next-page\" [routerLink]=\"nextPage.route\">\n      <div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n        Next\n        <ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n      </div>\n      <div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n    </a>\n  }\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-9);--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-text: var(--ng-doc-link-color)}\n"], dependencies: [{ 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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    constructor() {
+        /** The page before this one in the sidebar. */
+        this.prevPage = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "prevPage" }] : /* istanbul ignore next */ []));
+        /** The page after this one in the sidebar. */
+        this.nextPage = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "nextPage" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPageNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPageNavigationComponent, isStandalone: true, selector: "ng-doc-page-navigation", inputs: { prevPage: { classPropertyName: "prevPage", publicName: "prevPage", isSignal: true, isRequired: false, transformFunction: null }, nextPage: { classPropertyName: "nextPage", publicName: "nextPage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (prevPage() || nextPage()) {\n  <nav class=\"ng-doc-navigation-controls\" aria-label=\"Previous and next page\">\n    @if (prevPage(); as page) {\n      <a class=\"ng-doc-prev-page\" [routerLink]=\"page.route\">\n        <span class=\"ng-doc-navigation-page-label\">\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\">\n            <path d=\"M19 12H5m6-6-6 6 6 6\" />\n          </svg>\n          Previous\n        </span>\n        <span class=\"ng-doc-navigation-page-title\">{{ page.title }}</span>\n      </a>\n    }\n    @if (nextPage(); as page) {\n      <a class=\"ng-doc-next-page\" [routerLink]=\"page.route\">\n        <span class=\"ng-doc-navigation-page-label\">\n          Next\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\">\n            <path d=\"M5 12h14m-6-6 6 6-6 6\" />\n          </svg>\n        </span>\n        <span class=\"ng-doc-navigation-page-title\">{{ page.title }}</span>\n      </a>\n    }\n  </nav>\n}\n", styles: [".ng-doc-navigation-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--ng-doc-space-4);margin-top:var(--ng-doc-space-16);font-family:var(--ng-doc-font-family)}.ng-doc-navigation-controls a{display:grid;gap:2px;padding:var(--ng-doc-space-4) var(--ng-doc-space-5);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-lg);text-decoration:none;transition:border-color var(--ng-doc-transition)}.ng-doc-navigation-controls a:hover{border-color:var(--ng-doc-primary)}.ng-doc-navigation-controls a:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-navigation-controls .ng-doc-next-page{grid-column:2;text-align:right}.ng-doc-navigation-controls .ng-doc-next-page .ng-doc-navigation-page-label{justify-content:flex-end}.ng-doc-navigation-page-label{display:flex;align-items:center;gap:6px;color:var(--ng-doc-text-muted);font-size:13px;line-height:18px}.ng-doc-navigation-page-title{color:var(--ng-doc-link-color);font-size:var(--ng-doc-font-size);line-height:24px;font-weight:600;overflow-wrap:anywhere}@media(max-width:640px){.ng-doc-navigation-controls{grid-template-columns:1fr}.ng-doc-navigation-controls .ng-doc-next-page{grid-column:auto}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPageNavigationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPageNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-page-navigation', imports: [
-                        NgDocIconComponent,
-                        NgDocTextComponent,
-                        NgDocTextLeftDirective,
-                        NgDocTextRightDirective,
-                        RouterLink,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ng-doc-navigation-controls\">\n  @if (prevPage) {\n    <a class=\"ng-doc-prev-page\" [routerLink]=\"prevPage.route\">\n      <div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n        <ng-doc-icon icon=\"arrow-left\" ngDocTextLeft></ng-doc-icon>\n        Previous\n      </div>\n      <div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ prevPage.title }}</div>\n    </a>\n  }\n  @if (nextPage) {\n    <a class=\"ng-doc-next-page\" [routerLink]=\"nextPage.route\">\n      <div class=\"ng-doc-navigation-page-label\" ng-doc-text size=\"small\">\n        Next\n        <ng-doc-icon icon=\"arrow-right\" ngDocTextRight></ng-doc-icon>\n      </div>\n      <div class=\"ng-doc-navigation-page-title\" ng-doc-text>{{ nextPage.title }}</div>\n    </a>\n  }\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-9);--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-text: var(--ng-doc-link-color)}\n"] }]
-        }], propDecorators: { prevPage: [{
-                type: Input,
-                args: [{ required: true }]
-            }], nextPage: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+            args: [{ selector: 'ng-doc-page-navigation', imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (prevPage() || nextPage()) {\n  <nav class=\"ng-doc-navigation-controls\" aria-label=\"Previous and next page\">\n    @if (prevPage(); as page) {\n      <a class=\"ng-doc-prev-page\" [routerLink]=\"page.route\">\n        <span class=\"ng-doc-navigation-page-label\">\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\">\n            <path d=\"M19 12H5m6-6-6 6 6 6\" />\n          </svg>\n          Previous\n        </span>\n        <span class=\"ng-doc-navigation-page-title\">{{ page.title }}</span>\n      </a>\n    }\n    @if (nextPage(); as page) {\n      <a class=\"ng-doc-next-page\" [routerLink]=\"page.route\">\n        <span class=\"ng-doc-navigation-page-label\">\n          Next\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\">\n            <path d=\"M5 12h14m-6-6 6 6-6 6\" />\n          </svg>\n        </span>\n        <span class=\"ng-doc-navigation-page-title\">{{ page.title }}</span>\n      </a>\n    }\n  </nav>\n}\n", styles: [".ng-doc-navigation-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--ng-doc-space-4);margin-top:var(--ng-doc-space-16);font-family:var(--ng-doc-font-family)}.ng-doc-navigation-controls a{display:grid;gap:2px;padding:var(--ng-doc-space-4) var(--ng-doc-space-5);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-lg);text-decoration:none;transition:border-color var(--ng-doc-transition)}.ng-doc-navigation-controls a:hover{border-color:var(--ng-doc-primary)}.ng-doc-navigation-controls a:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-navigation-controls .ng-doc-next-page{grid-column:2;text-align:right}.ng-doc-navigation-controls .ng-doc-next-page .ng-doc-navigation-page-label{justify-content:flex-end}.ng-doc-navigation-page-label{display:flex;align-items:center;gap:6px;color:var(--ng-doc-text-muted);font-size:13px;line-height:18px}.ng-doc-navigation-page-title{color:var(--ng-doc-link-color);font-size:var(--ng-doc-font-size);line-height:24px;font-weight:600;overflow-wrap:anywhere}@media(max-width:640px){.ng-doc-navigation-controls{grid-template-columns:1fr}.ng-doc-navigation-controls .ng-doc-next-page{grid-column:auto}}\n"] }]
+        }], propDecorators: { prevPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevPage", required: false }] }], nextPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextPage", required: false }] }] } });
 /**
  * Generated bundle index. Do not edit.

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

	@@ -1 +1 @@
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 { ChangeDetectionStrategy, Component, ~~Input~~ } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { NgDocNavigation, NgDocPageNavigation } from '@ng-doc/app/interfaces';\~~nimport {~~\n ~~NgDocIconComponent,\~~n ~~NgDocTextComponent,\n NgDocTextLeftDirective,\n NgDocTextRightDirective,\n}~~ ~~from~~ ~~'@ng-doc/ui-kit';\~~n\n@Component({\n selector: 'ng-doc-page-navigation',\n imports: [~~\n NgDocIconComponent,\n NgDocTextComponent,\n NgDocTextLeftDirective,\n NgDocTextRightDirective,\n~~ RouterLink~~,\n~~ ],\n templateUrl: './page-navigation.component.html',\n styleUrls: ['./page-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocPageNavigationComponent implements NgDocPageNavigation {\n ~~@Input({~~ ~~required:~~ ~~true~~ ~~})\~~n prevPage?: NgDocNavigation;\n\n ~~@Input({~~ ~~required:~~ ~~true~~ ~~})\~~n nextPage?: NgDocNavigation;\n}\n","<~~div~~ class=\"ng-doc-navigation-controls\">\n @if (prevPage) {\n <a class=\"ng-doc-prev-page\" [routerLink]=\"~~prevPage~~.route\">\n <~~div~~ class=\"ng-doc-navigation-page-label\" ng-~~doc~~-~~text size~~=\"~~small~~\">\n <~~ng-doc-icon~~ ~~icon~~=\"~~arrow~~-~~left~~\" ~~ngDocTextLeft></ng-doc-icon~~>\n Previous\n </~~div~~>\n <~~div~~ class=\"ng-doc-navigation-page-title\" ~~ng-doc-text~~>{{ ~~prevPage~~.title }}</~~div~~>\n </a>\n }\n @if (nextPage) {\n <a class=\"ng-doc-next-page\" [routerLink]=\"~~nextPage~~.route\">\n <~~div~~ class=\"ng-doc-navigation-page-label\" ~~ng-doc-text~~ ~~size~~=\"~~small~~\">\n ~~Next~~\n ~~<ng~~-~~doc~~-~~icon icon~~=\"~~arrow~~-~~right~~\" ~~ngDocTextRight></ng~~-~~doc~~-~~icon~~>\n </~~div~~>\n <~~div~~ class=\"ng-doc-navigation-page-title\" ~~ng-doc-text~~>{{ ~~nextPage~~.title }}</~~div~~>\n </a>\n }\n</~~div~~>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"~~;;;;;MAuBa~~,4BAA4B,CAAA;~~8GAA5B~~,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA5B,4BAA4B,EAAA,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,~~ECvBzC,kyBAoBA,~~EAAA,~~MAAA~~,EAAA,~~CAAA~~,~~o3BAAA,CAAA,~~EAAA,~~YAAA~~,EAAA,~~CAAA~~,EAAA,IAAA,EAAA,~~WAAA,~~EAAA,~~IAAA,EDPI,kBAAkB,EAAA,~~QAAA,EAAA,~~aAAA,~~EAAA,~~MAAA~~,EAAA,~~CAAA~~,~~MAAA,~~EAAA,~~YAAA~~,EAAA,~~MAAA~~,~~CAAA,~~EAAA,~~EAAA~~,EAAA,IAAA,EAAA,~~WAAA~~,EAAA,~~IAAA~~,~~EAClB,kBAAkB,~~EAAA,~~QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,~~iBAAA,~~CAAA,~~EAAA,~~EAAA,EAAA,~~IAAA,EAAA,~~WAAA,~~EAAA,~~IAAA,EAClB,sBAAsB,~~EAAA,QAAA,EAAA,~~iBAAA,~~EAAA,EAAA,~~EAAA~~,~~IAAA~~,EAAA,~~WAAA~~,EAAA,~~IAAA~~,~~EACtB~~,~~uBAAuB~~,EAAA,~~QAAA~~,EAAA,~~kBAAA~~,EAAA,~~EAAA,EAAA,~~IAAA,EAAA,WAAA,EAAA,IAAA,~~EACvB~~,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;~~2FAMD~~,4BAA4B,EAAA,UAAA,EAAA,CAAA;~~kBAbxC~~,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,~~EAAA~~,~~OAAA~~,~~EACzB;wBACP~~,~~kBAAkB;wBAClB~~,~~kBAAkB;wBAClB,sBAAsB;wBACtB,uBAAuB;wBACvB,UAAU;qBACX,~~EAAA,eAAA,~~EAGgB~~,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,~~kyBAAA~~,EAAA,MAAA,EAAA,CAAA,~~o3BAAA~~,CAAA,EAAA~~;;sBAG9C,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;sBAGxB,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE~~;;;~~AE3B3B~~;;AAEG;;;;"}
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 { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { NgDocNavigation, NgDocPageNavigation } from '@ng-doc/app/interfaces';\n\n/*\n Links to the previous and the next page, as two cards at the bottom of a guide.\n /\n@Component({\n selector: 'ng-doc-page-navigation',\n imports: [RouterLink],\n templateUrl: './page-navigation.component.html',\n styleUrls: ['./page-navigation.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocPageNavigationComponent implements NgDocPageNavigation {\n /* The page before this one in the sidebar. /\n readonly prevPage = input<NgDocNavigation>();\n\n /* The page after this one in the sidebar. /\n readonly nextPage = input<NgDocNavigation>();\n}\n","@if (prevPage() \|\| nextPage()) {\n <nav class=\"ng-doc-navigation-controls\" aria-label=\"Previous and next page\">\n @if (prevPage(); as page) {\n <a class=\"ng-doc-prev-page\" [routerLink]=\"page.route\">\n <span class=\"ng-doc-navigation-page-label\">\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <path d=\"M19 12H5m6-6-6 6 6 6\" />\n </svg>\n Previous\n </span>\n <span class=\"ng-doc-navigation-page-title\">{{ page.title }}</span>\n </a>\n }\n @if (nextPage(); as page) {\n <a class=\"ng-doc-next-page\" [routerLink]=\"page.route\">\n <span class=\"ng-doc-navigation-page-label\">\n Next\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <path d=\"M5 12h14m-6-6 6 6-6 6\" />\n </svg>\n </span>\n <span class=\"ng-doc-navigation-page-title\">{{ page.title }}</span>\n </a>\n }\n </nav>\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;AAIA;;AAEG;MAQU,4BAA4B,CAAA;AAPzC,IAAA,WAAA,GAAA;;AASW,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK;gGAAmB;;AAGnC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK;gGAAmB;AAC7C,IAAA;8GANY,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA5B,4BAA4B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdzC,w7CA4CA,EAAA,MAAA,EAAA,CAAA,4qCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnCY,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKT,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAPxC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,WACzB,CAAC,UAAU,CAAC,EAAA,eAAA,EAGJ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,w7CAAA,EAAA,MAAA,EAAA,CAAA,4qCAAA,CAAA,EAAA;;;AEZjD;;AAEG;;;;"}

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

@@ -1,38 +1,77 @@
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, ViewChild, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, booleanAttribute, viewChild, ViewContainerRef, inject, Injector, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router, ActivatedRoute, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
 import { NgDocPageHeaderComponent } from '@ng-doc/app/components/page-header';
 import { createComponent } from '@ng-doc/app/helpers';
+import { NgDocFullscreenRouteService } from '@ng-doc/app/services/fullscreen-route';
+import { NgDocRoutePreloader } from '@ng-doc/app/services/route-preloader';
 import { NG_DOC_PAGE_SKELETON, NG_DOC_CONTEXT } from '@ng-doc/app/tokens';
 import { isPresent } from '@ng-doc/core/helpers/is-present';
 import { NgDocTabRouteComponent, NgDocTabRoutesGroupComponent, NgDocIconComponent } from '@ng-doc/ui-kit';
+/**
+ * Layout of a generated page: the breadcrumbs, the page header, the tabs of a page with several
+ * routes, the page itself, the previous and next page links, and the table of contents beside it.
+ *
+ * The breadcrumbs, the page links and the table of contents are the page skeleton's components,
+ * created in the containers this component exposes.
+ *
+ * While the page shows one of its fullscreen routes (`NgDocFullscreenRouteService`), only the page
+ * is shown.
+ */
 class NgDocPageWrapperComponent {
     constructor() {
-        this.hasBreadcrumb = true;
-        this.pageType = 'guide';
+        /** Routes of the page; a page with more than one gets tabs. */
+        this.routes = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routes" }] : /* istanbul ignore next */ []));
+        /** HTML of the page header. */
+        this.headerContent = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerContent" }] : /* istanbul ignore next */ []));
+        /** Deferred source of the page header, for generated pages that load it separately. */
+        this.headerContentSource = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "headerContentSource" }] : /* istanbul ignore next */ []));
+        /** Whether the page shows breadcrumbs. */
+        this.hasBreadcrumb = input(true, { ...(ngDevMode ? { debugName: "hasBreadcrumb" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Type of the page: guides get previous and next page links, API pages do not. */
+        this.pageType = input('guide', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageType" }] : /* istanbul ignore next */ []));
+        /** Container of the breadcrumbs. */
+        this.pageBreadcrumbs = viewChild.required('pageBreadcrumbs', { ...(ngDevMode ? { debugName: "pageBreadcrumbs" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        /** Container of the table of contents. */
+        this.pageToc = viewChild.required('pageToc', { ...(ngDevMode ? { debugName: "pageToc" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+        /** Container of the previous and next page links. */
+        this.pageNavigation = viewChild.required('pageNavigation', { ...(ngDevMode ? { debugName: "pageNavigation" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
         this.skeleton = inject(NG_DOC_PAGE_SKELETON);
         this.router = inject(Router);
         this.route = inject(ActivatedRoute);
         this.context = inject(NG_DOC_CONTEXT);
+        this.fullscreenRoute = inject(NgDocFullscreenRouteService);
         this.breadcrumbs = inject(ActivatedRoute)
             .pathFromRoot.filter((route) => !!route.snapshot.url.length)
             .map((route) => route.snapshot.title)
             .filter(isPresent);
+        this.preloader = inject(NgDocRoutePreloader);
+        this.injector = inject(Injector);
     }
     ngOnInit() {
-        if (this.skeleton.breadcrumbs && this.hasBreadcrumb) {
-            createComponent(this.pageBreadcrumbs, this.skeleton.breadcrumbs, {
+        if (this.skeleton.breadcrumbs && this.hasBreadcrumb()) {
+            createComponent(this.pageBreadcrumbs(), this.skeleton.breadcrumbs, {
                 breadcrumbs: this.breadcrumbs,
             });
         }
-        if (this.pageType === 'guide') {
-            if (this.skeleton.navigation) {
-                createComponent(this.pageNavigation, this.skeleton.navigation, this.navigationInputs());
-            }
+        if (this.pageType() === 'guide' && this.skeleton.navigation) {
+            createComponent(this.pageNavigation(), this.skeleton.navigation, this.adjacentPages());
         }
+        // Readers often go on to the previous or next guide, so both are preloaded once the browser
+        // is idle after this one has rendered. Render hooks never run on the server.
+        afterNextRender(() => {
+            if (this.pageType() !== 'guide')
+                return;
+            const { prevPage, nextPage } = this.adjacentPages();
+            this.preloader.preloadWhenIdle([prevPage?.route, nextPage?.route]);
+        }, { injector: this.injector });
     }
-    navigationInputs() {
+    adjacentPages() {
         const url = '/' +
             this.route.pathFromRoot
                 .map((route) => route.snapshot.url)
@@ -47,10 +86,10 @@ class NgDocPageWrapperComponent {
             nextPage: flatPages[flatPages.findIndex((item) => url === item.route) + 1],
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPageWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocPageWrapperComponent, isStandalone: true, selector: "ng-doc-page-wrapper", inputs: { routes: "routes", headerContent: "headerContent", hasBreadcrumb: "hasBreadcrumb", pageType: "pageType" }, host: { properties: { "attr.data-ng-doc-page-tabs": "routes.length > 1" } }, viewQueries: [{ propertyName: "pageBreadcrumbs", first: true, predicate: ["pageBreadcrumbs"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "pageToc", first: true, predicate: ["pageToc"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "pageNavigation", first: true, predicate: ["pageNavigation"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<article class=\"ngde\">\n  <ng-container #pageBreadcrumbs></ng-container>\n\n  <ng-doc-page-header [headerContent]=\"headerContent\" />\n\n  @if (routes.length > 1) {\n    <ng-doc-tab-routes-group>\n      @for (route of routes; track route) {\n        <a\n          ng-doc-tab-route\n          [routerLink]=\"['./' + route.path]\"\n          routerLinkActive\n          [routerLinkActiveOptions]=\"{ exact: true }\"\n          #rla=\"routerLinkActive\"\n          [isActive]=\"rla.isActive\">\n          @if (route.data?.['icon']; as icon) {\n            <ng-doc-icon [customIcon]=\"icon\" />\n          }\n          {{ route.title }}\n        </a>\n      }\n    </ng-doc-tab-routes-group>\n  }\n\n  <router-outlet></router-outlet>\n\n  <ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n", styles: [":host{display:flex;justify-content:space-between;--ng-doc-page-sticky-offset: var(--ng-doc-navbar-height)}:host[data-ng-doc-page-tabs=true]{--ng-doc-page-sticky-offset: calc( var(--ng-doc-navbar-height) + var(--ng-doc-page-wrapper-tabs-height) )}:host{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 5)}:host article{position:relative;width:var(--ng-doc-article-width, 100%);margin-left:auto;margin-right:auto;min-width:0}:host header ::ng-deep h1{margin-top:0}:host ng-doc-tab-routes-group{position:sticky!important;top:var(--ng-doc-navbar-height);margin:calc(var(--ng-doc-base-gutter) * 2) 0;background:var(--ng-doc-navbar-background);z-index:5;height:var(--ng-doc-page-wrapper-tabs-height)}:host .ng-doc-page-header{margin-bottom:calc(var(--ng-doc-base-gutter) * 3)}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NgDocTabRouteComponent, selector: "a[ng-doc-tab-route]", inputs: ["isActive"] }, { kind: "component", type: NgDocTabRoutesGroupComponent, selector: "ng-doc-tab-routes-group" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocPageHeaderComponent, selector: "ng-doc-page-header", inputs: ["headerContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPageWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPageWrapperComponent, isStandalone: true, selector: "ng-doc-page-wrapper", inputs: { routes: { classPropertyName: "routes", publicName: "routes", isSignal: true, isRequired: true, transformFunction: null }, headerContent: { classPropertyName: "headerContent", publicName: "headerContent", isSignal: true, isRequired: true, transformFunction: null }, headerContentSource: { classPropertyName: "headerContentSource", publicName: "headerContentSource", isSignal: true, isRequired: false, transformFunction: null }, hasBreadcrumb: { classPropertyName: "hasBreadcrumb", publicName: "hasBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, pageType: { classPropertyName: "pageType", publicName: "pageType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-page-tabs": "routes().length > 1", "attr.data-ng-doc-fullscreen-route": "fullscreenRoute.active()" } }, viewQueries: [{ propertyName: "pageBreadcrumbs", first: true, predicate: ["pageBreadcrumbs"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "pageToc", first: true, predicate: ["pageToc"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "pageNavigation", first: true, predicate: ["pageNavigation"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<article class=\"ngde\">\n  <ng-container #pageBreadcrumbs></ng-container>\n\n  <ng-doc-page-header\n    [headerContent]=\"headerContent()\"\n    [headerContentSource]=\"headerContentSource()\" />\n\n  @if (routes().length > 1) {\n    <ng-doc-tab-routes-group>\n      @for (route of routes(); track route) {\n        <a\n          ng-doc-tab-route\n          [routerLink]=\"['./' + route.path]\"\n          routerLinkActive\n          [routerLinkActiveOptions]=\"{ exact: true }\"\n          #rla=\"routerLinkActive\"\n          [isActive]=\"rla.isActive\">\n          @if (route.data?.['icon']; as icon) {\n            <ng-doc-icon [customIcon]=\"icon\" />\n          }\n          {{ route.title }}\n        </a>\n      }\n    </ng-doc-tab-routes-group>\n  }\n\n  <router-outlet></router-outlet>\n\n  <ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n", styles: [":host{display:flex;justify-content:space-between;--ng-doc-page-sticky-offset: var(--ng-doc-navbar-height)}:host[data-ng-doc-page-tabs=true]{--ng-doc-page-sticky-offset: calc( var(--ng-doc-navbar-height) + var(--ng-doc-page-wrapper-tabs-height) )}:host{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 5)}:host article{position:relative;width:var(--ng-doc-article-width, 100%);max-width:var(--ng-doc-article-width, var(--ng-doc-content-max-width));margin-left:auto;margin-right:auto;min-width:0}:host article:has(.ng-doc-page-tags),:host article:has(ng-doc-api-list){max-width:var(--ng-doc-article-width, var(--ng-doc-api-content-max-width))}:host header ::ng-deep h1{margin-top:0}:host ng-doc-tab-routes-group{position:sticky!important;top:var(--ng-doc-navbar-height);margin:calc(var(--ng-doc-base-gutter) * 2) 0;background:var(--ng-doc-navbar-background);z-index:5;height:var(--ng-doc-page-wrapper-tabs-height)}:host .ng-doc-page-header{margin-bottom:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-fullscreen-route=true]{display:block}:host[data-ng-doc-fullscreen-route=true] article{width:100%;max-width:none}:host[data-ng-doc-fullscreen-route=true] ::ng-deep>:not(article),:host[data-ng-doc-fullscreen-route=true] ::ng-deep article>:not(router-outlet+*){display:none}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: NgDocTabRouteComponent, selector: "a[ng-doc-tab-route]", inputs: ["isActive"] }, { kind: "component", type: NgDocTabRoutesGroupComponent, selector: "ng-doc-tab-routes-group" }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocPageHeaderComponent, selector: "ng-doc-page-header", inputs: ["headerContent", "headerContentSource"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPageWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPageWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-page-wrapper', imports: [
                         RouterOutlet,
@@ -61,28 +100,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         NgDocIconComponent,
                         NgDocPageHeaderComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.data-ng-doc-page-tabs]': 'routes.length > 1',
-                    }, template: "<article class=\"ngde\">\n  <ng-container #pageBreadcrumbs></ng-container>\n\n  <ng-doc-page-header [headerContent]=\"headerContent\" />\n\n  @if (routes.length > 1) {\n    <ng-doc-tab-routes-group>\n      @for (route of routes; track route) {\n        <a\n          ng-doc-tab-route\n          [routerLink]=\"['./' + route.path]\"\n          routerLinkActive\n          [routerLinkActiveOptions]=\"{ exact: true }\"\n          #rla=\"routerLinkActive\"\n          [isActive]=\"rla.isActive\">\n          @if (route.data?.['icon']; as icon) {\n            <ng-doc-icon [customIcon]=\"icon\" />\n          }\n          {{ route.title }}\n        </a>\n      }\n    </ng-doc-tab-routes-group>\n  }\n\n  <router-outlet></router-outlet>\n\n  <ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n", styles: [":host{display:flex;justify-content:space-between;--ng-doc-page-sticky-offset: var(--ng-doc-navbar-height)}:host[data-ng-doc-page-tabs=true]{--ng-doc-page-sticky-offset: calc( var(--ng-doc-navbar-height) + var(--ng-doc-page-wrapper-tabs-height) )}:host{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 5)}:host article{position:relative;width:var(--ng-doc-article-width, 100%);margin-left:auto;margin-right:auto;min-width:0}:host header ::ng-deep h1{margin-top:0}:host ng-doc-tab-routes-group{position:sticky!important;top:var(--ng-doc-navbar-height);margin:calc(var(--ng-doc-base-gutter) * 2) 0;background:var(--ng-doc-navbar-background);z-index:5;height:var(--ng-doc-page-wrapper-tabs-height)}:host .ng-doc-page-header{margin-bottom:calc(var(--ng-doc-base-gutter) * 3)}\n"] }]
-        }], propDecorators: { routes: [{
-                type: Input,
-                args: [{ required: true }]
-            }], headerContent: [{
-                type: Input,
-                args: [{ required: true }]
-            }], hasBreadcrumb: [{
-                type: Input
-            }], pageType: [{
-                type: Input
-            }], pageBreadcrumbs: [{
-                type: ViewChild,
-                args: ['pageBreadcrumbs', { read: ViewContainerRef, static: true }]
-            }], pageToc: [{
-                type: ViewChild,
-                args: ['pageToc', { read: ViewContainerRef, static: true }]
-            }], pageNavigation: [{
-                type: ViewChild,
-                args: ['pageNavigation', { read: ViewContainerRef, static: true }]
-            }] } });
+                        '[attr.data-ng-doc-page-tabs]': 'routes().length > 1',
+                        '[attr.data-ng-doc-fullscreen-route]': 'fullscreenRoute.active()',
+                    }, template: "<article class=\"ngde\">\n  <ng-container #pageBreadcrumbs></ng-container>\n\n  <ng-doc-page-header\n    [headerContent]=\"headerContent()\"\n    [headerContentSource]=\"headerContentSource()\" />\n\n  @if (routes().length > 1) {\n    <ng-doc-tab-routes-group>\n      @for (route of routes(); track route) {\n        <a\n          ng-doc-tab-route\n          [routerLink]=\"['./' + route.path]\"\n          routerLinkActive\n          [routerLinkActiveOptions]=\"{ exact: true }\"\n          #rla=\"routerLinkActive\"\n          [isActive]=\"rla.isActive\">\n          @if (route.data?.['icon']; as icon) {\n            <ng-doc-icon [customIcon]=\"icon\" />\n          }\n          {{ route.title }}\n        </a>\n      }\n    </ng-doc-tab-routes-group>\n  }\n\n  <router-outlet></router-outlet>\n\n  <ng-container #pageNavigation></ng-container>\n</article>\n\n<ng-container #pageToc></ng-container>\n", styles: [":host{display:flex;justify-content:space-between;--ng-doc-page-sticky-offset: var(--ng-doc-navbar-height)}:host[data-ng-doc-page-tabs=true]{--ng-doc-page-sticky-offset: calc( var(--ng-doc-navbar-height) + var(--ng-doc-page-wrapper-tabs-height) )}:host{--ng-doc-toc-margin: calc(var(--ng-doc-base-gutter) * 5)}:host article{position:relative;width:var(--ng-doc-article-width, 100%);max-width:var(--ng-doc-article-width, var(--ng-doc-content-max-width));margin-left:auto;margin-right:auto;min-width:0}:host article:has(.ng-doc-page-tags),:host article:has(ng-doc-api-list){max-width:var(--ng-doc-article-width, var(--ng-doc-api-content-max-width))}:host header ::ng-deep h1{margin-top:0}:host ng-doc-tab-routes-group{position:sticky!important;top:var(--ng-doc-navbar-height);margin:calc(var(--ng-doc-base-gutter) * 2) 0;background:var(--ng-doc-navbar-background);z-index:5;height:var(--ng-doc-page-wrapper-tabs-height)}:host .ng-doc-page-header{margin-bottom:calc(var(--ng-doc-base-gutter) * 3)}:host[data-ng-doc-fullscreen-route=true]{display:block}:host[data-ng-doc-fullscreen-route=true] article{width:100%;max-width:none}:host[data-ng-doc-fullscreen-route=true] ::ng-deep>:not(article),:host[data-ng-doc-fullscreen-route=true] ::ng-deep article>:not(router-outlet+*){display:none}\n"] }]
+        }], propDecorators: { routes: [{ type: i0.Input, args: [{ isSignal: true, alias: "routes", required: true }] }], headerContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContent", required: true }] }], headerContentSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContentSource", required: false }] }], hasBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBreadcrumb", required: false }] }], pageType: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageType", required: false }] }], pageBreadcrumbs: [{ type: i0.ViewChild, args: ['pageBreadcrumbs', { ...{ read: ViewContainerRef }, isSignal: true }] }], pageToc: [{ type: i0.ViewChild, args: ['pageToc', { ...{ read: ViewContainerRef }, isSignal: true }] }], pageNavigation: [{ type: i0.ViewChild, args: ['pageNavigation', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ng-doc-app-components-page-wrapper.mjs","sources":["../../../../libs/app/components/page-wrapper/page-wrapper.component.ts","../../../../libs/app/components/page-wrapper/page-wrapper.component.html","../../../../libs/app/components/page-wrapper/ng-doc-app-components-page-wrapper.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n inject,\n Input,\n OnInit,\n ViewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport {\n ActivatedRoute,\n Router,\n RouterLink,\n RouterLinkActive,\n RouterOutlet,\n Routes,\n} from '@angular/router';\nimport { NgDocPageHeaderComponent } from '@ng-doc/app/components/page-header';\nimport { createComponent } from '@ng-doc/app/helpers';\nimport { NgDocNavigation, NgDocPageNavigation } from '@ng-doc/app/interfaces';\nimport { NG_DOC_CONTEXT, NG_DOC_PAGE_SKELETON } from '@ng-doc/app/tokens';\nimport { isPresent } from '@ng-doc/core/helpers/is-present';\nimport { NgDocPageType } from '@ng-doc/core/types';\nimport {\n NgDocIconComponent,\n NgDocTabRouteComponent,\n NgDocTabRoutesGroupComponent,\n} from '@ng-doc/ui-kit';\n\n@Component({\n selector: 'ng-doc-page-wrapper',\n imports: [\n RouterOutlet,\n RouterLink,\n NgDocTabRouteComponent,\n NgDocTabRoutesGroupComponent,\n RouterLinkActive,\n NgDocIconComponent,\n NgDocPageHeaderComponent,\n ],\n templateUrl: './page-wrapper.component.html',\n styleUrl: './page-wrapper.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.data-ng-doc-page-tabs]': 'routes.length > 1',\n },\n})\nexport class NgDocPageWrapperComponent implements OnInit {\n @Input({ required: true })\n routes!: Routes;\n\n @Input({ required: true })\n headerContent!: string;\n\n @Input()\n hasBreadcrumb = true;\n\n @Input()\n pageType: NgDocPageType = 'guide';\n\n @ViewChild('pageBreadcrumbs', { read: ViewContainerRef, static: true })\n pageBreadcrumbs!: ViewContainerRef;\n\n @ViewChild('pageToc', { read: ViewContainerRef, static: true })\n pageToc?: ViewContainerRef;\n\n @ViewChild('pageNavigation', { read: ViewContainerRef, static: true })\n pageNavigation!: ViewContainerRef;\n\n protected skeleton = inject(NG_DOC_PAGE_SKELETON);\n protected router = inject(Router);\n protected route = inject(ActivatedRoute);\n protected context = inject(NG_DOC_CONTEXT);\n\n private breadcrumbs: string[] = inject(ActivatedRoute)\n .pathFromRoot.filter((route: ActivatedRoute) => !!route.snapshot.url.length)\n .map((route: ActivatedRoute) => route.snapshot.title)\n .filter(isPresent);\n\n ngOnInit(): void {\n if (this.skeleton.breadcrumbs && this.hasBreadcrumb) {\n createComponent(this.pageBreadcrumbs, this.skeleton.breadcrumbs, {\n breadcrumbs: this.breadcrumbs,\n });\n }\n\n if (this.pageType === 'guide') {\n if (this.skeleton.navigation) {\n createComponent(this.pageNavigation, this.skeleton.navigation, this.navigationInputs());\n }\n }\n }\n\n private navigationInputs(): NgDocPageNavigation {\n const url =\n '/' +\n this.route.pathFromRoot\n .map((route: ActivatedRoute) => route.snapshot.url)\n .flat()\n .join('/');\n const flatItems = (items: NgDocNavigation[]): NgDocNavigation[] =>\n items\n .map((item: NgDocNavigation) => [item.children?.length ? flatItems(item.children) : item])\n .flat(2);\n const flatPages: NgDocNavigation[] = flatItems(this.context.navigation);\n\n return {\n prevPage: flatPages[flatPages.findIndex((item: NgDocNavigation) => url === item.route) - 1],\n nextPage: flatPages[flatPages.findIndex((item: NgDocNavigation) => url === item.route) + 1],\n };\n }\n}\n","<article class=\"ngde\">\n <ng-container #pageBreadcrumbs></ng-container>\n\n <ng-doc-page-header [headerContent]=\"headerContent\" />\n\n @if (routes.length > 1) {\n <ng-doc-tab-routes-group>\n @for (route of routes; track route) {\n <a\n ng-doc-tab-route\n [routerLink]=\"['./' + route.path]\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #rla=\"routerLinkActive\"\n [isActive]=\"rla.isActive\">\n @if (route.data?.['icon']; as icon) {\n <ng-doc-icon [customIcon]=\"icon\" />\n }\n {{ route.title }}\n </a>\n }\n </ng-doc-tab-routes-group>\n }\n\n <router-outlet></router-outlet>\n\n <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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"}
1	+ {"version":3,"file":"ng-doc-app-components-page-wrapper.mjs","sources":["../../../../libs/app/components/page-wrapper/page-wrapper.component.ts","../../../../libs/app/components/page-wrapper/page-wrapper.component.html","../../../../libs/app/components/page-wrapper/ng-doc-app-components-page-wrapper.ts"],"sourcesContent":["import {\n afterNextRender,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n inject,\n Injector,\n input,\n OnInit,\n viewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport {\n ActivatedRoute,\n Router,\n RouterLink,\n RouterLinkActive,\n RouterOutlet,\n Routes,\n} from '@angular/router';\nimport { NgDocPageHeaderComponent } from '@ng-doc/app/components/page-header';\nimport { createComponent } from '@ng-doc/app/helpers';\nimport { NgDocNavigation } from '@ng-doc/app/interfaces';\nimport { NgDocFullscreenRouteService } from '@ng-doc/app/services/fullscreen-route';\nimport { NgDocRoutePreloader } from '@ng-doc/app/services/route-preloader';\nimport { NG_DOC_CONTEXT, NG_DOC_PAGE_SKELETON } from '@ng-doc/app/tokens';\nimport { isPresent } from '@ng-doc/core/helpers/is-present';\nimport type { NgDocContentSource } from '@ng-doc/core/interfaces';\nimport { NgDocPageType } from '@ng-doc/core/types';\nimport {\n NgDocIconComponent,\n NgDocTabRouteComponent,\n NgDocTabRoutesGroupComponent,\n} from '@ng-doc/ui-kit';\n\n/*\n Layout of a generated page: the breadcrumbs, the page header, the tabs of a page with several\n * routes, the page itself, the previous and next page links, and the table of contents beside it.\n \n The breadcrumbs, the page links and the table of contents are the page skeleton's components,\n * created in the containers this component exposes.\n \n While the page shows one of its fullscreen routes (`NgDocFullscreenRouteService`), only the page\n * is shown.\n /\n@Component({\n selector: 'ng-doc-page-wrapper',\n imports: [\n RouterOutlet,\n RouterLink,\n NgDocTabRouteComponent,\n NgDocTabRoutesGroupComponent,\n RouterLinkActive,\n NgDocIconComponent,\n NgDocPageHeaderComponent,\n ],\n templateUrl: './page-wrapper.component.html',\n styleUrl: './page-wrapper.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.data-ng-doc-page-tabs]': 'routes().length > 1',\n '[attr.data-ng-doc-fullscreen-route]': 'fullscreenRoute.active()',\n },\n})\nexport class NgDocPageWrapperComponent implements OnInit {\n /* Routes of the page; a page with more than one gets tabs. /\n readonly routes = input.required<Routes>();\n\n /* HTML of the page header. /\n readonly headerContent = input.required<string>();\n\n /* Deferred source of the page header, for generated pages that load it separately. /\n readonly headerContentSource = input<NgDocContentSource>();\n\n /* Whether the page shows breadcrumbs. /\n readonly hasBreadcrumb = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n /* Type of the page: guides get previous and next page links, API pages do not. /\n readonly pageType = input<NgDocPageType>('guide');\n\n /* Container of the breadcrumbs. /\n readonly pageBreadcrumbs = viewChild.required('pageBreadcrumbs', { read: ViewContainerRef });\n\n /* Container of the table of contents. /\n readonly pageToc = viewChild.required('pageToc', { read: ViewContainerRef });\n\n /* Container of the previous and next page links. /\n readonly pageNavigation = viewChild.required('pageNavigation', { read: ViewContainerRef });\n\n protected skeleton = inject(NG_DOC_PAGE_SKELETON);\n protected router = inject(Router);\n protected route = inject(ActivatedRoute);\n protected context = inject(NG_DOC_CONTEXT);\n protected readonly fullscreenRoute = inject(NgDocFullscreenRouteService);\n\n private breadcrumbs: string[] = inject(ActivatedRoute)\n .pathFromRoot.filter((route: ActivatedRoute) => !!route.snapshot.url.length)\n .map((route: ActivatedRoute) => route.snapshot.title)\n .filter(isPresent);\n\n private readonly preloader = inject(NgDocRoutePreloader);\n private readonly injector = inject(Injector);\n\n ngOnInit(): void {\n if (this.skeleton.breadcrumbs && this.hasBreadcrumb()) {\n createComponent(this.pageBreadcrumbs(), this.skeleton.breadcrumbs, {\n breadcrumbs: this.breadcrumbs,\n });\n }\n\n if (this.pageType() === 'guide' && this.skeleton.navigation) {\n createComponent(this.pageNavigation(), this.skeleton.navigation, this.adjacentPages());\n }\n\n // Readers often go on to the previous or next guide, so both are preloaded once the browser\n // is idle after this one has rendered. Render hooks never run on the server.\n afterNextRender(\n () => {\n if (this.pageType() !== 'guide') return;\n\n const { prevPage, nextPage } = this.adjacentPages();\n\n this.preloader.preloadWhenIdle([prevPage?.route, nextPage?.route]);\n },\n { injector: this.injector },\n );\n }\n\n private adjacentPages(): { prevPage?: NgDocNavigation; nextPage?: NgDocNavigation } {\n const url =\n '/' +\n this.route.pathFromRoot\n .map((route: ActivatedRoute) => route.snapshot.url)\n .flat()\n .join('/');\n const flatItems = (items: NgDocNavigation[]): NgDocNavigation[] =>\n items\n .map((item: NgDocNavigation) => [item.children?.length ? flatItems(item.children) : item])\n .flat(2);\n const flatPages: NgDocNavigation[] = flatItems(this.context.navigation);\n\n return {\n prevPage: flatPages[flatPages.findIndex((item: NgDocNavigation) => url === item.route) - 1],\n nextPage: flatPages[flatPages.findIndex((item: NgDocNavigation) => url === item.route) + 1],\n };\n }\n}\n","<article class=\"ngde\">\n <ng-container #pageBreadcrumbs></ng-container>\n\n <ng-doc-page-header\n [headerContent]=\"headerContent()\"\n [headerContentSource]=\"headerContentSource()\" />\n\n @if (routes().length > 1) {\n <ng-doc-tab-routes-group>\n @for (route of routes(); track route) {\n <a\n ng-doc-tab-route\n [routerLink]=\"['./' + route.path]\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #rla=\"routerLinkActive\"\n [isActive]=\"rla.isActive\">\n @if (route.data?.['icon']; as icon) {\n <ng-doc-icon [customIcon]=\"icon\" />\n }\n {{ route.title }}\n </a>\n }\n </ng-doc-tab-routes-group>\n }\n\n <router-outlet></router-outlet>\n\n <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-page.mjs CHANGED Viewed

@@ -1,62 +1,206 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { LocationStrategy, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, ElementRef, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { viewChild, ElementRef, inject, ChangeDetectorRef, signal, NgZone, PLATFORM_ID, effect, untracked, DestroyRef, reflectComponentType, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';
+import { NgDocContentAnchorController } from '@ng-doc/app/classes/content-anchor-controller';
+import { NgDocContentController } from '@ng-doc/app/classes/content-controller';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import { NgDocPageWrapperComponent } from '@ng-doc/app/components/page-wrapper';
-import { createComponent, generateToc } from '@ng-doc/app/helpers';
+import { ɵrestoreNgDocHydrationSnapshot as _restoreNgDocHydrationSnapshot, generateToc, createComponent, ɵngDocPageUrl as _ngDocPageUrl } from '@ng-doc/app/helpers';
 import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';
 import { NgDocPageProcessorComponent } from '@ng-doc/app/processors';
 import { provideTypeControl } from '@ng-doc/app/providers/type-control';
+import { NgDocFullscreenRouteService } from '@ng-doc/app/services/fullscreen-route';
 import { NG_DOC_PAGE_SKELETON } from '@ng-doc/app/tokens';
 import { NgDocTypeAliasControlComponent, NgDocStringControlComponent, NgDocNumberControlComponent, NgDocBooleanControlComponent } from '@ng-doc/app/type-controls';
-import { NgDocButtonIconComponent, NgDocTooltipDirective, NgDocIconComponent, DialogOutletComponent } from '@ng-doc/ui-kit';
+import { NgDocButtonIconComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';
+import { WA_LOCATION } from '@ng-web-apis/common';
+/**
+ * A generated page: its rendered content, the page actions (copy link, edit and view the source),
+ * the table of contents it fills in, and the outlet of its fullscreen routes.
+ *
+ * A fullscreen route (a child route of the page, unless the page sets `disableFullscreenRoutes`)
+ * replaces the page: it is shown on its own on the canvas of demos, with a link back to the page,
+ * and `NgDocFullscreenRouteService` tells the root layout and the page wrapper to hide their
+ * chrome.
+ */
 class NgDocPageComponent {
     constructor() {
+        /** The element that holds the rendered page content. */
+        this.pageContainer = viewChild('pageContainer', { ...(ngDevMode ? { debugName: "pageContainer" } : /* istanbul ignore next */ {}), read: (ElementRef) });
         this.rootPage = inject(NgDocRootPage);
         this.skeleton = inject(NG_DOC_PAGE_SKELETON);
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.pageWrapper = inject(NgDocPageWrapperComponent);
+        this.contentController = inject(NgDocContentController);
+        /** Whether the link to the page was just copied. */
+        this.linkCopied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkCopied" }] : /* istanbul ignore next */ []));
+        /** Whether one of the page's fullscreen routes is shown instead of the page. */
+        this.fullscreenRoute = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fullscreenRoute" }] : /* istanbul ignore next */ []));
+        /** URL of the page, for the link back from a fullscreen route. */
+        this.pageUrl = signal('/', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageUrl" }] : /* istanbul ignore next */ []));
+        this.route = inject(ActivatedRoute);
+        this.fullscreenRoutes = inject(NgDocFullscreenRouteService);
+        this.contentAnchorController = inject(NgDocContentAnchorController);
+        this.clipboard = inject(Clipboard);
+        this.ngZone = inject(NgZone);
+        this.location = inject(WA_LOCATION);
+        this.locationStrategy = inject(LocationStrategy);
+        // The router state is complete when the page is created, so a fullscreen route opened
+        // directly (a new tab) is known before the first render and the page content never renders.
+        this.showFullscreenRoute(!!this.route.firstChild);
+        const source = this.rootPage.pageContentSource;
+        if (source && !this.fullscreenRoute()) {
+            // Angular empties this host (it skips hydration) and the content loads asynchronously, so
+            // the server-rendered page stays visible until the loaded content renders.
+            if (isPlatformBrowser(inject(PLATFORM_ID))) {
+                this.snapshot = _restoreNgDocHydrationSnapshot(inject(ElementRef).nativeElement);
+            }
+            this.connectContent(source);
+        }
+        // A page opened on a fullscreen route loads its content only when the reader goes back to
+        // it, because pending content holds the application unstable until it renders. An effect,
+        // so a page that is leaving (its route closes as it is destroyed) loads nothing.
+        effect(() => {
+            if (source && !this.fullscreenRoute())
+                untracked(() => this.connectContent(source));
+        });
+        // A load that needs no new pass (its content is already rendered, for example an empty body)
+        // or that failed settles without `revealLoaded`.
+        effect(() => {
+            if (this.contentController.settled())
+                untracked(() => this.releaseSnapshot());
+        });
+        effect(() => {
+            if (this.contentController.error()) {
+                untracked(() => {
+                    this.releaseSnapshot();
+                    this.pageWrapper.pageToc().clear();
+                    this.contentAnchorController.contentFailed();
+                });
+            }
+        });
+        inject(DestroyRef).onDestroy(() => {
+            clearTimeout(this.linkCopiedTimer);
+            this.releaseSnapshot();
+            this.fullscreenRoutes.set(this, false);
+        });
+    }
+    /**
+     * Shows one of the page's fullscreen routes instead of the page, or the page again. The outlet
+     * of the fullscreen routes calls it when a route opens or closes.
+     * @param shown - Whether a fullscreen route is shown.
+     */
+    showFullscreenRoute(shown) {
+        // Pages that disable fullscreen routes render their child routes themselves.
+        const fullscreen = shown && !this.rootPage.page?.disableFullscreenRoutes;
+        if (fullscreen) {
+            this.pageUrl.set('/' +
+                this.route.pathFromRoot
+                    .flatMap((route) => route.snapshot.url)
+                    .map((segment) => segment.path)
+                    .join('/'));
+        }
+        this.fullscreenRoute.set(fullscreen);
+        this.fullscreenRoutes.set(this, fullscreen);
     }
+    /**
+     * Creates the table of contents from the headings of the rendered page.
+     */
     createToc() {
-        if (this.pageWrapper.pageToc && this.skeleton.toc) {
-            createComponent(this.pageWrapper.pageToc, this.skeleton.toc, {
-                tableOfContent: generateToc(this.pageContainer.nativeElement) ?? [],
-            });
+        const container = this.pageContainer();
+        const pageToc = this.pageWrapper.pageToc();
+        pageToc.clear();
+        if (container && this.skeleton.toc) {
+            const inputs = {
+                tableOfContent: generateToc(container.nativeElement) ?? [],
+            };
+            // Only components that declare the input get it: a custom table of contents may not.
+            const declared = reflectComponentType(this.skeleton.toc)?.inputs ?? [];
+            if (declared.some(({ templateName }) => templateName === 'editSourceFileUrl')) {
+                inputs['editSourceFileUrl'] = this.rootPage.editSourceFileUrl;
+            }
+            // API pages carry their symbol details for the rail, hidden in the content.
+            const details = container.nativeElement.querySelector('[data-ng-doc-rail-details]');
+            if (details && declared.some(({ templateName }) => templateName === 'details')) {
+                details.removeAttribute('hidden');
+                inputs['details'] = details;
+            }
+            createComponent(pageToc, this.skeleton.toc, inputs);
             this.changeDetectorRef.detectChanges();
         }
+        if (this.rootPage.pageContentSource)
+            this.contentAnchorController.contentProcessed();
+    }
+    /**
+     * Shows the page's own content in place of the server-rendered copy when a pass of the loaded
+     * content is about to render, in the same task, so its components render and measure visible.
+     * The pass of the empty content before the source has loaded keeps the copy.
+     * @param version - The content version of the pass.
+     * @internal
+     */
+    revealLoaded(version) {
+        if (version === this.contentController.loadedVersion())
+            this.releaseSnapshot();
+    }
+    /**
+     * Copies the link to the page, without its query and fragment.
+     */
+    copyLink() {
+        this.clipboard.copy(_ngDocPageUrl(this.locationStrategy, this.location));
+        this.linkCopied.set(true);
+        clearTimeout(this.linkCopiedTimer);
+        // The label timer must not hold the application unstable, so it runs outside the zone.
+        this.linkCopiedTimer = this.ngZone.runOutsideAngular(() => setTimeout(() => this.linkCopied.set(false), 1400));
+    }
+    connectContent(source) {
+        // Both calls do nothing once the source is connected.
+        this.contentAnchorController.activate();
+        this.contentController.connect(source);
+    }
+    releaseSnapshot() {
+        const release = this.snapshot;
+        this.snapshot = undefined;
+        release?.();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocPageComponent, isStandalone: true, selector: "ng-doc-page", host: { attributes: { "ngSkipHydration": "true" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPageComponent, isStandalone: true, selector: "ng-doc-page", host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.data-ng-doc-async-content": "rootPage.pageContentSource && !fullscreenRoute() ? \"\" : null" } }, providers: [
+            NgDocContentAnchorController,
+            NgDocContentController,
             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  @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 }); }
+            provideTypeControl('boolean', NgDocBooleanControlComponent, { order: 40 }),
+        ], viewQueries: [{ propertyName: "pageContainer", first: true, predicate: ["pageContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (!fullscreenRoute()) {\n  <div class=\"ng-doc-page-controls\">\n    <button\n      type=\"button\"\n      ng-doc-button-icon\n      [rounded]=\"false\"\n      [attr.aria-label]=\"linkCopied() ? 'Link copied' : 'Copy link to this page'\"\n      [ngDocTooltip]=\"linkCopied() ? 'Copied' : 'Copy link'\"\n      [attr.data-ng-doc-copied]=\"linkCopied()\"\n      (click)=\"copyLink()\">\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.8\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7\" />\n        <path d=\"M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7\" />\n      </svg>\n    </button>\n    @if (rootPage.editSourceFileUrl) {\n      <a\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"rootPage.editSourceFileUrl\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"Edit this page\"\n        ngDocTooltip=\"Edit this page\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <path d=\"M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4Z\" />\n        </svg>\n      </a>\n    }\n    @if (rootPage.viewSourceFileUrl) {\n      <a\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"rootPage.viewSourceFileUrl\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"View the page source\"\n        ngDocTooltip=\"View source\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <path d=\"m8 7-5 5 5 5m8-10 5 5-5 5\" />\n        </svg>\n      </a>\n    }\n  </div>\n\n  @if (rootPage.pageContentSource) {\n    @if (contentController.error(); as error) {\n      <div class=\"ng-doc-page-wrapper\" role=\"alert\">{{ error.message }}</div>\n    } @else {\n      <div\n        class=\"ng-doc-page-wrapper\"\n        [ngDocPageProcessor]=\"contentController.html() | ngDocSanitizeHtml\"\n        [contentVersion]=\"contentController.version()\"\n        (beforeRender)=\"revealLoaded($event)\"\n        (contentProcessed)=\"contentController.processed($event)\"\n        (processingError)=\"contentController.processingFailed($event)\"\n        (afterRender)=\"createToc()\"\n        #pageContainer></div>\n    }\n  } @else {\n    <div\n      class=\"ng-doc-page-wrapper\"\n      [ngDocPageProcessor]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n      (afterRender)=\"createToc()\"\n      #pageContainer></div>\n  }\n}\n\n<!-- A fullscreen route replaces the page; the outlet stays, so it can open and close in place. -->\n@if (!rootPage.page?.disableFullscreenRoutes) {\n  <div class=\"ng-doc-fullscreen-route\" [hidden]=\"!fullscreenRoute()\">\n    @if (fullscreenRoute()) {\n      <a\n        class=\"ng-doc-fullscreen-route-back\"\n        [routerLink]=\"pageUrl()\"\n        [attr.aria-label]=\"'Back to ' + (rootPage.page?.title ?? 'the page')\"\n        [ngDocTooltip]=\"'Back to ' + (rootPage.page?.title ?? 'the page')\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M19 12H5m7 7-7-7 7-7\" />\n        </svg>\n        <span class=\"ng-doc-fullscreen-route-back-label\">{{ rootPage.page?.title ?? 'Back' }}</span>\n      </a>\n    }\n    <router-outlet\n      (activate)=\"showFullscreenRoute(true)\"\n      (deactivate)=\"showFullscreenRoute(false)\" />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host .ng-doc-page-controls{position:absolute;top:0;right:0;display:flex;gap:2px;--ng-doc-button-color: var(--ng-doc-text-muted);--ng-doc-button-hover-color: var(--ng-doc-heading-color);--ng-doc-button-active-color: var(--ng-doc-heading-color);--ng-doc-button-hover-background: var(--ng-doc-hover-background)}:host .ng-doc-page-controls [data-ng-doc-copied=true]{--ng-doc-button-color: var(--ng-doc-success-strong)}.ng-doc-fullscreen-route{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:var(--ng-doc-space-16) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-fullscreen-route[hidden]{display:none}.ng-doc-fullscreen-route>router-outlet{display:none}.ng-doc-fullscreen-route-back{position:fixed;top:var(--ng-doc-space-4);left:var(--ng-doc-space-4);z-index:1;display:inline-flex;align-items:center;gap:var(--ng-doc-space-2);max-width:calc(100% - var(--ng-doc-space-8));height:32px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-xs);color:var(--ng-doc-text-muted);font-family:var(--ng-doc-font-family);font-size:13px;font-weight:500;line-height:18px;text-decoration:none}.ng-doc-fullscreen-route-back:hover{color:var(--ng-doc-heading-color)}.ng-doc-fullscreen-route-back:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-fullscreen-route-back svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ng-doc-fullscreen-route-back-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host[data-ng-doc-hydration-snapshot]>:not(.ng-doc-hydration-snapshot){display:none!important}\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: NgDocPageProcessorComponent, selector: "[ngDocPageProcessor]", inputs: ["ngDocPageProcessor", "contentVersion"], outputs: ["beforeRender", "afterRender", "contentProcessed", "processingError"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgDocButtonIconComponent,
                         NgDocTooltipDirective,
-                        NgDocIconComponent,
                         NgDocPageProcessorComponent,
+                        RouterLink,
                         RouterOutlet,
-                        DialogOutletComponent,
                         NgDocSanitizeHtmlPipe,
                     ], providers: [
+                        NgDocContentAnchorController,
+                        NgDocContentController,
                         provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 }),
                         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  @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 }]
-            }], childOutlet: [{
-                type: ViewChild,
-                args: ['childOutlet']
-            }] } });
+                        provideTypeControl('boolean', NgDocBooleanControlComponent, { order: 40 }),
+                    ], host: {
+                        ngSkipHydration: 'true',
+                        // Tells the browser that the server-rendered content must be kept until the loaded content
+                        // renders (ɵNG_DOC_ASYNC_CONTENT_ATTRIBUTE).
+                        '[attr.data-ng-doc-async-content]': 'rootPage.pageContentSource && !fullscreenRoute() ? "" : null',
+                    }, template: "@if (!fullscreenRoute()) {\n  <div class=\"ng-doc-page-controls\">\n    <button\n      type=\"button\"\n      ng-doc-button-icon\n      [rounded]=\"false\"\n      [attr.aria-label]=\"linkCopied() ? 'Link copied' : 'Copy link to this page'\"\n      [ngDocTooltip]=\"linkCopied() ? 'Copied' : 'Copy link'\"\n      [attr.data-ng-doc-copied]=\"linkCopied()\"\n      (click)=\"copyLink()\">\n      <svg\n        width=\"16\"\n        height=\"16\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.8\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7\" />\n        <path d=\"M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7\" />\n      </svg>\n    </button>\n    @if (rootPage.editSourceFileUrl) {\n      <a\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"rootPage.editSourceFileUrl\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"Edit this page\"\n        ngDocTooltip=\"Edit this page\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <path d=\"M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4Z\" />\n        </svg>\n      </a>\n    }\n    @if (rootPage.viewSourceFileUrl) {\n      <a\n        ng-doc-button-icon\n        [rounded]=\"false\"\n        [href]=\"rootPage.viewSourceFileUrl\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        aria-label=\"View the page source\"\n        ngDocTooltip=\"View source\">\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.8\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <path d=\"m8 7-5 5 5 5m8-10 5 5-5 5\" />\n        </svg>\n      </a>\n    }\n  </div>\n\n  @if (rootPage.pageContentSource) {\n    @if (contentController.error(); as error) {\n      <div class=\"ng-doc-page-wrapper\" role=\"alert\">{{ error.message }}</div>\n    } @else {\n      <div\n        class=\"ng-doc-page-wrapper\"\n        [ngDocPageProcessor]=\"contentController.html() | ngDocSanitizeHtml\"\n        [contentVersion]=\"contentController.version()\"\n        (beforeRender)=\"revealLoaded($event)\"\n        (contentProcessed)=\"contentController.processed($event)\"\n        (processingError)=\"contentController.processingFailed($event)\"\n        (afterRender)=\"createToc()\"\n        #pageContainer></div>\n    }\n  } @else {\n    <div\n      class=\"ng-doc-page-wrapper\"\n      [ngDocPageProcessor]=\"rootPage.pageContent | ngDocSanitizeHtml\"\n      (afterRender)=\"createToc()\"\n      #pageContainer></div>\n  }\n}\n\n<!-- A fullscreen route replaces the page; the outlet stays, so it can open and close in place. -->\n@if (!rootPage.page?.disableFullscreenRoutes) {\n  <div class=\"ng-doc-fullscreen-route\" [hidden]=\"!fullscreenRoute()\">\n    @if (fullscreenRoute()) {\n      <a\n        class=\"ng-doc-fullscreen-route-back\"\n        [routerLink]=\"pageUrl()\"\n        [attr.aria-label]=\"'Back to ' + (rootPage.page?.title ?? 'the page')\"\n        [ngDocTooltip]=\"'Back to ' + (rootPage.page?.title ?? 'the page')\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M19 12H5m7 7-7-7 7-7\" />\n        </svg>\n        <span class=\"ng-doc-fullscreen-route-back-label\">{{ rootPage.page?.title ?? 'Back' }}</span>\n      </a>\n    }\n    <router-outlet\n      (activate)=\"showFullscreenRoute(true)\"\n      (deactivate)=\"showFullscreenRoute(false)\" />\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column}:host .ng-doc-page-controls{position:absolute;top:0;right:0;display:flex;gap:2px;--ng-doc-button-color: var(--ng-doc-text-muted);--ng-doc-button-hover-color: var(--ng-doc-heading-color);--ng-doc-button-active-color: var(--ng-doc-heading-color);--ng-doc-button-hover-background: var(--ng-doc-hover-background)}:host .ng-doc-page-controls [data-ng-doc-copied=true]{--ng-doc-button-color: var(--ng-doc-success-strong)}.ng-doc-fullscreen-route{background-image:radial-gradient(color-mix(in srgb,var(--ng-doc-base-5) 55%,transparent) 1px,transparent 1px);background-size:16px 16px;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:var(--ng-doc-space-16) var(--ng-doc-space-4);background-color:var(--ng-doc-demo-displayer-background, var(--ng-doc-background))}.ng-doc-fullscreen-route[hidden]{display:none}.ng-doc-fullscreen-route>router-outlet{display:none}.ng-doc-fullscreen-route-back{position:fixed;top:var(--ng-doc-space-4);left:var(--ng-doc-space-4);z-index:1;display:inline-flex;align-items:center;gap:var(--ng-doc-space-2);max-width:calc(100% - var(--ng-doc-space-8));height:32px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-2);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);box-shadow:0 0 0 1px var(--ng-doc-border-color),var(--ng-doc-shadow-xs);color:var(--ng-doc-text-muted);font-family:var(--ng-doc-font-family);font-size:13px;font-weight:500;line-height:18px;text-decoration:none}.ng-doc-fullscreen-route-back:hover{color:var(--ng-doc-heading-color)}.ng-doc-fullscreen-route-back:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-fullscreen-route-back svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ng-doc-fullscreen-route-back-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host[data-ng-doc-hydration-snapshot]>:not(.ng-doc-hydration-snapshot){display:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pageContainer: [{ type: i0.ViewChild, args: ['pageContainer', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.