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

package/fesm2022/ng-doc-app-components-kind-icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-kind-icon.mjs","sources":["../../../../libs/app/components/kind-icon/kind-icon.component.ts","../../../../libs/app/components/kind-icon/ng-doc-app-components-kind-icon.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n  selector: 'ng-doc-kind-icon',\n  template: '{{kind[0]}}',\n  styleUrls: ['./kind-icon.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class NgDocKindIconComponent {\n  @Input()\n  @HostBinding('attr.data-ng-doc-kind')\n  kind: string = '';\n\n  @Input()\n  @HostBinding('attr.data-ng-doc-type')\n  type: 'declaration' | 'type' = 'declaration';\n\n  @Input()\n  @HostBinding('attr.data-ng-doc-size')\n  size: 'small' | 'medium' = 'small';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MASa,sBAAsB,CAAA;AAPnC,IAAA,WAAA,GAAA;QAUE,IAAA,CAAA,IAAI,GAAW,EAAE;QAIjB,IAAA,CAAA,IAAI,GAA2B,aAAa;QAI5C,IAAA,CAAA,IAAI,GAAuB,OAAO;AACnC,IAAA;8GAZY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,8QALvB,aAAa,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ixFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKZ,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,YAClB,aAAa,EAAA,eAAA,EAEN,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,MAAA,EAAA,CAAA,ixFAAA,CAAA,EAAA;;sBAGf;;sBACA,WAAW;uBAAC,uBAAuB;;sBAGnC;;sBACA,WAAW;uBAAC,uBAAuB;;sBAGnC;;sBACA,WAAW;uBAAC,uBAAuB;;;ACnBtC;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-components-kind-icon.mjs","sources":["../../../../libs/app/components/kind-icon/kind-icon.component.ts","../../../../libs/app/components/kind-icon/ng-doc-app-components-kind-icon.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\n\n/**\n * Words the kind chips show for declaration kinds whose name is not already a readable word.\n * Other kinds (and value types) are shown as they are.\n */\nexport const NG_DOC_KIND_LABELS: Readonly<Record<string, string>> = {\n  TypeAlias: 'Type alias',\n};\n\n/**\n * The label a kind chip shows for a kind.\n * @param kind - Declaration kind (for example `Class` or `TypeAlias`) or value type (`string`).\n * @returns The word to show, for example \"Type alias\".\n */\nexport function ngDocKindLabel(kind: string): string {\n  return NG_DOC_KIND_LABELS[kind] ?? kind;\n}\n\n/**\n * A word chip for a declaration kind (`Class`, `Component`, `Type alias`, ...) or a value type\n * (`string`, `boolean`, ...), coloured by the kind.\n */\n@Component({\n  selector: 'ng-doc-kind-icon',\n  template: '{{ label() }}',\n  styleUrls: ['./kind-icon.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-ng-doc-kind]': 'kind()',\n    '[attr.data-ng-doc-type]': 'type()',\n    '[attr.data-ng-doc-size]': 'size()',\n  },\n})\nexport class NgDocKindIconComponent {\n  /** Declaration kind or value type. */\n  readonly kind = input<string>('');\n\n  /** Whether `kind` is a declaration kind or a value type; it selects the colours. */\n  readonly type = input<'declaration' | 'type'>('declaration');\n\n  /** `small` is the compact chip; `medium` the regular one. */\n  readonly size = input<'small' | 'medium'>('small');\n\n  /** The word the chip shows. */\n  protected readonly label: Signal<string> = computed(() => ngDocKindLabel(this.kind()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;AAGG;AACI,MAAM,kBAAkB,GAAqC;AAClE,IAAA,SAAS,EAAE,YAAY;;AAGzB;;;;AAIG;AACG,SAAU,cAAc,CAAC,IAAY,EAAA;AACzC,IAAA,OAAO,kBAAkB,CAAC,IAAI,CAAC,IAAI,IAAI;AACzC;AAEA;;;AAGG;MAYU,sBAAsB,CAAA;AAXnC,IAAA,WAAA,GAAA;;QAaW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE;iFAAC;;QAGxB,IAAA,CAAA,IAAI,GAAG,KAAK,CAAyB,aAAa;iFAAC;;QAGnD,IAAA,CAAA,IAAI,GAAG,KAAK,CAAqB,OAAO;iFAAC;;AAG/B,QAAA,IAAA,CAAA,KAAK,GAAmB,QAAQ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;kFAAC;AACvF,IAAA;8GAZY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,0jBATvB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,s+FAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FASd,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAXlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,YAClB,eAAe,EAAA,eAAA,EAER,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,yBAAyB,EAAE,QAAQ;AACpC,qBAAA,EAAA,MAAA,EAAA,CAAA,s+FAAA,CAAA,EAAA;;;AChCH;;AAEG;;;;"}

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

@@ -1,20 +1,23 @@
 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';
 
+/**
+ * Router link to a path of the application.
+ */
 class NgDocLinkComponent {
     constructor() {
-        this.path = '';
+        /** The path to link to. */
+        this.path = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocLinkComponent, isStandalone: true, selector: "ng-doc-link", inputs: { path: "path" }, ngImport: i0, template: "<a [routerLink]=\"[path]\">\n\t<ng-content></ng-content>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocLinkComponent, isStandalone: true, selector: "ng-doc-link", inputs: { path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a [routerLink]=\"[path()]\">\n  <ng-content></ng-content>\n</a>\n", styles: [""], 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: NgDocLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<a [routerLink]=\"[path]\">\n\t<ng-content></ng-content>\n</a>\n" }]
-        }], propDecorators: { path: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ng-doc-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<a [routerLink]=\"[path()]\">\n  <ng-content></ng-content>\n</a>\n" }]
+        }], propDecorators: { path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-app-components-link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-link.mjs","sources":["../../../../libs/app/components/link/link.component.ts","../../../../libs/app/components/link/link.component.html","../../../../libs/app/components/link/ng-doc-app-components-link.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\n@Component({\n  selector: 'ng-doc-link',\n  templateUrl: './link.component.html',\n  styleUrls: ['./link.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterLink],\n})\nexport class NgDocLinkComponent {\n  @Input()\n  path: string = '';\n}\n","<a [routerLink]=\"[path]\">\n\t<ng-content></ng-content>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAUa,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;QASE,IAAA,CAAA,IAAI,GAAW,EAAE;AAClB,IAAA;8GAHY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECV/B,kEAGA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDKY,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;;2FAET,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,mBAGN,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,UAAU,CAAC,EAAA,QAAA,EAAA,kEAAA,EAAA;;sBAGpB;;;AEXH;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-components-link.mjs","sources":["../../../../libs/app/components/link/link.component.ts","../../../../libs/app/components/link/link.component.html","../../../../libs/app/components/link/ng-doc-app-components-link.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\n/**\n * Router link to a path of the application.\n */\n@Component({\n  selector: 'ng-doc-link',\n  templateUrl: './link.component.html',\n  styleUrls: ['./link.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterLink],\n})\nexport class NgDocLinkComponent {\n  /** The path to link to. */\n  readonly path = input<string>('');\n}\n","<a [routerLink]=\"[path()]\">\n  <ng-content></ng-content>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;AAEG;MAQU,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;;QASW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE;iFAAC;AAClC,IAAA;8GAHY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb/B,oEAGA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,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;;2FAET,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,mBAGN,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,UAAU,CAAC,EAAA,QAAA,EAAA,oEAAA,EAAA;;;AEXvB;;AAEG;;;;"}

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

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ng-doc/app/directives/members-filter';
+import { NgDocMembersFilterDirective } from '@ng-doc/app/directives/members-filter';
+
+/**
+ * The members table of an API page in the symbol view. The builder renders its tabs, filter and
+ * rows as the component's content, and the component adds the member filter to them.
+ */
+class NgDocMembersComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMembersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocMembersComponent, isStandalone: true, selector: "ng-doc-members", host: { classAttribute: "ng-doc-members" }, hostDirectives: [{ directive: i1.NgDocMembersFilterDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMembersComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-doc-members',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [NgDocMembersFilterDirective],
+                    host: { class: 'ng-doc-members' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocMembersComponent };
+//# sourceMappingURL=ng-doc-app-components-members.mjs.map

package/fesm2022/ng-doc-app-components-members.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-doc-app-components-members.mjs","sources":["../../../../libs/app/components/members/members.component.ts","../../../../libs/app/components/members/ng-doc-app-components-members.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { NgDocMembersFilterDirective } from '@ng-doc/app/directives/members-filter';\n\n/**\n * The members table of an API page in the symbol view. The builder renders its tabs, filter and\n * rows as the component's content, and the component adds the member filter to them.\n */\n@Component({\n  selector: 'ng-doc-members',\n  template: '<ng-content></ng-content>',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [NgDocMembersFilterDirective],\n  host: { class: 'ng-doc-members' },\n})\nexport class NgDocMembersComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAGA;;;AAGG;MAQU,qBAAqB,CAAA;8GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,uLALtB,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK1B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,QAAQ,EAAE,2BAA2B;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,cAAc,EAAE,CAAC,2BAA2B,CAAC;AAC7C,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE;AAClC,iBAAA;;;ACbD;;AAEG;;;;"}

package/fesm2022/ng-doc-app-components-mermaid-viewer.mjs

@@ -1,14 +1,25 @@
-import { isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, inject, ChangeDetectorRef, PLATFORM_ID, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, signal, inject, PLATFORM_ID, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';
 import { NgDocThemeService } from '@ng-doc/app/services/theme';
 import { NG_DOC_MERMAID } from '@ng-doc/app/tokens';
 import { NgDocMagnifierComponent, MagnifierControllerComponent, NgDocSpinnerComponent } from '@ng-doc/ui-kit';
 
 let id = 0;
+/** The init directive that renders one graph with Mermaid's dark theme. */
+const DARK_THEME_DIRECTIVE = '%%{init: {"theme": "dark"}}%%\n';
+/**
+ * Renders a Mermaid graph in a zoomable, pannable viewer. The graph is rendered in the browser
+ * only, again when it changes and when the theme changes.
+ *
+ * In the dark theme (or `auto` with a dark OS theme) the graph uses Mermaid's dark theme, unless
+ * the graph or `provideMermaid` chooses a theme of its own.
+ */
 class NgDocMermaidViewerComponent {
     constructor() {
+        /** Source of the Mermaid graph. */
         this.graph = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "graph" }] : /* istanbul ignore next */ []));
         this.html = signal('', /* @ts-ignore */
@@ -17,45 +28,75 @@ class NgDocMermaidViewerComponent {
         ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
         this.error = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.platform = inject(PLATFORM_ID);
         this.id = `ng-doc-mermaid-viewer-${id++}`;
+        // Renders are asynchronous: only the result of the latest one is shown.
+        this.renderId = 0;
+        this.document = inject(DOCUMENT);
+        this.themeService = inject(NgDocThemeService);
         const mermaid = inject(NG_DOC_MERMAID, { optional: true });
         if (!mermaid) {
             throw new Error('Mermaid is not provided. Make sure that you provided mermaid using "provideMermaid" function.');
         }
         this.mermaid = mermaid;
-        inject(NgDocThemeService)
-            .themeChanges()
-            .subscribe(async () => {
-            const { svg } = await this.mermaid.render(this.id, this.graph());
-            this.html.set(svg);
-        });
+        if (isPlatformBrowser(inject(PLATFORM_ID))) {
+            effect(() => {
+                const graph = this.graph();
+                untracked(() => void this.render(graph));
+            });
+            this.themeService
+                .themeChanges()
+                .pipe(takeUntilDestroyed())
+                .subscribe(() => void this.render(untracked(this.graph)));
+        }
+    }
+    /**
+     * Adds Mermaid's dark theme to the graph when the page is dark. A graph with front matter or an
+     * init directive, and a theme set in `provideMermaid`, are left as they are.
+     * @param graph - The graph source.
+     * @returns The graph to render.
+     */
+    themed(graph) {
+        const theme = this.themeService.currentTheme;
+        const dark = theme === 'dark' ||
+            (theme === 'auto' &&
+                !!this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)').matches);
+        const configuredTheme = this.mermaid.mermaidAPI?.getSiteConfig?.().theme;
+        const ownTheme = /^\s*---/.test(graph) || /%%\{\s*init/.test(graph);
+        return dark && !ownTheme && (!configuredTheme || configuredTheme === 'default')
+            ? DARK_THEME_DIRECTIVE + graph
+            : graph;
     }
-    async ngOnInit() {
-        if (isPlatformBrowser(this.platform)) {
-            try {
-                const { svg } = await this.mermaid.render(this.id, this.graph());
+    async render(graph) {
+        const renderId = ++this.renderId;
+        try {
+            const { svg } = await this.mermaid.render(this.id, this.themed(graph));
+            if (renderId === this.renderId) {
                 this.html.set(svg);
-                this.pending.set(false);
+                this.error.set(null);
             }
-            catch (error) {
+        }
+        catch (error) {
+            if (renderId === this.renderId) {
                 this.error.set(error);
+            }
+        }
+        finally {
+            if (renderId === this.renderId) {
                 this.pending.set(false);
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocMermaidViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocMermaidViewerComponent, isStandalone: true, selector: "ng-doc-mermaid-viewer", inputs: { graph: { classPropertyName: "graph", publicName: "graph", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n", styles: [":host{position:relative;display:block;border:var(--ng-doc-mermaid-viewer-border, 1px solid var(--ng-doc-border-color));margin:var(--ng-doc-mermaid-viewer-margin, var(--ng-doc-page-block-margin));background:var(--ng-doc-mermaid-viewer-background, var(--ng-doc-base-8));border-radius:var(--ng-doc-mermaid-viewer-border-radius, var(--ng-doc-base-gutter));min-height:150px}:host ng-doc-magnifier-controller{position:absolute;bottom:calc(var(--ng-doc-base-gutter) * 2);right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-container{display:flex;justify-content:center;align-items:center;padding:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-preloader{display:flex;justify-content:center;align-items:center;width:100%;height:120px}:host .ng-doc-mermaid-error{display:flex;justify-content:center;align-items:center;height:120px;color:var(--ng-doc-alert)}\n"], dependencies: [{ kind: "component", type: NgDocMagnifierComponent, selector: "ng-doc-magnifier" }, { kind: "component", type: MagnifierControllerComponent, selector: "ng-doc-magnifier-controller", inputs: ["magnifier"] }, { kind: "component", type: NgDocSpinnerComponent, selector: "ng-doc-spinner", inputs: ["size"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMermaidViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocMermaidViewerComponent, isStandalone: true, selector: "ng-doc-mermaid-viewer", inputs: { graph: { classPropertyName: "graph", publicName: "graph", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n", styles: [":host{position:relative;display:block;border:var(--ng-doc-mermaid-viewer-border, 1px solid var(--ng-doc-border-color));margin:var(--ng-doc-mermaid-viewer-margin, var(--ng-doc-page-block-margin));background:var(--ng-doc-mermaid-viewer-background, var(--ng-doc-code-background));border-radius:var(--ng-doc-mermaid-viewer-border-radius, var(--ng-doc-radius-lg));overflow:hidden;min-height:150px}:host ng-doc-magnifier-controller{position:absolute;bottom:var(--ng-doc-space-4);right:var(--ng-doc-space-4);opacity:0;transition:opacity var(--ng-doc-transition)}@media(prefers-reduced-motion:reduce){:host ng-doc-magnifier-controller{transition:none}}@media(hover:none){:host ng-doc-magnifier-controller{opacity:1}}:host:hover ng-doc-magnifier-controller,:host:focus-within ng-doc-magnifier-controller{opacity:1}:host .ng-doc-mermaid-container{display:flex;justify-content:center;align-items:center;padding:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-preloader{display:flex;justify-content:center;align-items:center;width:100%;height:120px}:host .ng-doc-mermaid-error{display:flex;justify-content:center;align-items:center;height:120px;color:var(--ng-doc-alert)}\n"], dependencies: [{ kind: "component", type: NgDocMagnifierComponent, selector: "ng-doc-magnifier" }, { kind: "component", type: MagnifierControllerComponent, selector: "ng-doc-magnifier-controller", inputs: ["magnifier"] }, { kind: "component", type: NgDocSpinnerComponent, selector: "ng-doc-spinner", inputs: ["size"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocMermaidViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMermaidViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-mermaid-viewer', imports: [
                         NgDocMagnifierComponent,
                         MagnifierControllerComponent,
                         NgDocSanitizeHtmlPipe,
                         NgDocSpinnerComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n", styles: [":host{position:relative;display:block;border:var(--ng-doc-mermaid-viewer-border, 1px solid var(--ng-doc-border-color));margin:var(--ng-doc-mermaid-viewer-margin, var(--ng-doc-page-block-margin));background:var(--ng-doc-mermaid-viewer-background, var(--ng-doc-base-8));border-radius:var(--ng-doc-mermaid-viewer-border-radius, var(--ng-doc-base-gutter));min-height:150px}:host ng-doc-magnifier-controller{position:absolute;bottom:calc(var(--ng-doc-base-gutter) * 2);right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-container{display:flex;justify-content:center;align-items:center;padding:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-preloader{display:flex;justify-content:center;align-items:center;width:100%;height:120px}:host .ng-doc-mermaid-error{display:flex;justify-content:center;align-items:center;height:120px;color:var(--ng-doc-alert)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n", styles: [":host{position:relative;display:block;border:var(--ng-doc-mermaid-viewer-border, 1px solid var(--ng-doc-border-color));margin:var(--ng-doc-mermaid-viewer-margin, var(--ng-doc-page-block-margin));background:var(--ng-doc-mermaid-viewer-background, var(--ng-doc-code-background));border-radius:var(--ng-doc-mermaid-viewer-border-radius, var(--ng-doc-radius-lg));overflow:hidden;min-height:150px}:host ng-doc-magnifier-controller{position:absolute;bottom:var(--ng-doc-space-4);right:var(--ng-doc-space-4);opacity:0;transition:opacity var(--ng-doc-transition)}@media(prefers-reduced-motion:reduce){:host ng-doc-magnifier-controller{transition:none}}@media(hover:none){:host ng-doc-magnifier-controller{opacity:1}}:host:hover ng-doc-magnifier-controller,:host:focus-within ng-doc-magnifier-controller{opacity:1}:host .ng-doc-mermaid-container{display:flex;justify-content:center;align-items:center;padding:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-preloader{display:flex;justify-content:center;align-items:center;width:100%;height:120px}:host .ng-doc-mermaid-error{display:flex;justify-content:center;align-items:center;height:120px;color:var(--ng-doc-alert)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { graph: [{ type: i0.Input, args: [{ isSignal: true, alias: "graph", required: true }] }] } });
 
 /**

package/fesm2022/ng-doc-app-components-mermaid-viewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-mermaid-viewer.mjs","sources":["../../../../libs/app/components/mermaid-viewer/mermaid-viewer.component.ts","../../../../libs/app/components/mermaid-viewer/mermaid-viewer.component.html","../../../../libs/app/components/mermaid-viewer/ng-doc-app-components-mermaid-viewer.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  inject,\n  input,\n  OnInit,\n  PLATFORM_ID,\n  signal,\n} from '@angular/core';\nimport { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';\nimport { NgDocThemeService } from '@ng-doc/app/services/theme';\nimport { NG_DOC_MERMAID } from '@ng-doc/app/tokens';\nimport {\n  MagnifierControllerComponent,\n  NgDocMagnifierComponent,\n  NgDocSpinnerComponent,\n} from '@ng-doc/ui-kit';\nimport type { Mermaid } from 'mermaid';\n\nlet id = 0;\n\n@Component({\n  selector: 'ng-doc-mermaid-viewer',\n  imports: [\n    NgDocMagnifierComponent,\n    MagnifierControllerComponent,\n    NgDocSanitizeHtmlPipe,\n    NgDocSpinnerComponent,\n  ],\n  templateUrl: './mermaid-viewer.component.html',\n  styleUrl: './mermaid-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocMermaidViewerComponent implements OnInit {\n  graph = input.required<string>();\n\n  protected readonly html = signal('');\n  protected readonly pending = signal(true);\n  protected readonly error = signal<Error | null>(null);\n  protected readonly mermaid: Mermaid;\n\n  protected readonly changeDetectorRef = inject(ChangeDetectorRef);\n  protected readonly platform = inject(PLATFORM_ID);\n\n  protected readonly id = `ng-doc-mermaid-viewer-${id++}`;\n\n  constructor() {\n    const mermaid = inject(NG_DOC_MERMAID, { optional: true });\n\n    if (!mermaid) {\n      throw new Error(\n        'Mermaid is not provided. Make sure that you provided mermaid using \"provideMermaid\" function.',\n      );\n    }\n\n    this.mermaid = mermaid;\n\n    inject(NgDocThemeService)\n      .themeChanges()\n      .subscribe(async () => {\n        const { svg } = await this.mermaid.render(this.id, this.graph());\n\n        this.html.set(svg);\n      });\n  }\n\n  async ngOnInit(): Promise<void> {\n    if (isPlatformBrowser(this.platform)) {\n      try {\n        const { svg } = await this.mermaid.render(this.id, this.graph());\n\n        this.html.set(svg);\n        this.pending.set(false);\n      } catch (error: unknown) {\n        this.error.set(error as Error);\n        this.pending.set(false);\n      }\n    }\n  }\n}\n","@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-mermaid-viewer.mjs","sources":["../../../../libs/app/components/mermaid-viewer/mermaid-viewer.component.ts","../../../../libs/app/components/mermaid-viewer/mermaid-viewer.component.html","../../../../libs/app/components/mermaid-viewer/ng-doc-app-components-mermaid-viewer.ts"],"sourcesContent":["import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n  input,\n  PLATFORM_ID,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';\nimport { NgDocThemeService } from '@ng-doc/app/services/theme';\nimport { NG_DOC_MERMAID } from '@ng-doc/app/tokens';\nimport {\n  MagnifierControllerComponent,\n  NgDocMagnifierComponent,\n  NgDocSpinnerComponent,\n} from '@ng-doc/ui-kit';\nimport type { Mermaid } from 'mermaid';\n\nlet id = 0;\n\n/** The init directive that renders one graph with Mermaid's dark theme. */\nconst DARK_THEME_DIRECTIVE = '%%{init: {\"theme\": \"dark\"}}%%\\n';\n\n/**\n * Renders a Mermaid graph in a zoomable, pannable viewer. The graph is rendered in the browser\n * only, again when it changes and when the theme changes.\n *\n * In the dark theme (or `auto` with a dark OS theme) the graph uses Mermaid's dark theme, unless\n * the graph or `provideMermaid` chooses a theme of its own.\n */\n@Component({\n  selector: 'ng-doc-mermaid-viewer',\n  imports: [\n    NgDocMagnifierComponent,\n    MagnifierControllerComponent,\n    NgDocSanitizeHtmlPipe,\n    NgDocSpinnerComponent,\n  ],\n  templateUrl: './mermaid-viewer.component.html',\n  styleUrl: './mermaid-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocMermaidViewerComponent {\n  /** Source of the Mermaid graph. */\n  readonly graph = input.required<string>();\n\n  protected readonly html = signal('');\n  protected readonly pending = signal(true);\n  protected readonly error = signal<Error | null>(null);\n  protected readonly mermaid: Mermaid;\n\n  protected readonly id = `ng-doc-mermaid-viewer-${id++}`;\n\n  // Renders are asynchronous: only the result of the latest one is shown.\n  private renderId = 0;\n\n  private readonly document = inject(DOCUMENT);\n  private readonly themeService = inject(NgDocThemeService);\n\n  constructor() {\n    const mermaid = inject(NG_DOC_MERMAID, { optional: true });\n\n    if (!mermaid) {\n      throw new Error(\n        'Mermaid is not provided. Make sure that you provided mermaid using \"provideMermaid\" function.',\n      );\n    }\n\n    this.mermaid = mermaid;\n\n    if (isPlatformBrowser(inject(PLATFORM_ID))) {\n      effect(() => {\n        const graph: string = this.graph();\n\n        untracked(() => void this.render(graph));\n      });\n\n      this.themeService\n        .themeChanges()\n        .pipe(takeUntilDestroyed())\n        .subscribe(() => void this.render(untracked(this.graph)));\n    }\n  }\n\n  /**\n   * Adds Mermaid's dark theme to the graph when the page is dark. A graph with front matter or an\n   * init directive, and a theme set in `provideMermaid`, are left as they are.\n   * @param graph - The graph source.\n   * @returns The graph to render.\n   */\n  private themed(graph: string): string {\n    const theme = this.themeService.currentTheme;\n    const dark =\n      theme === 'dark' ||\n      (theme === 'auto' &&\n        !!this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)').matches);\n    const configuredTheme = this.mermaid.mermaidAPI?.getSiteConfig?.().theme;\n    const ownTheme = /^\\s*---/.test(graph) || /%%\\{\\s*init/.test(graph);\n\n    return dark && !ownTheme && (!configuredTheme || configuredTheme === 'default')\n      ? DARK_THEME_DIRECTIVE + graph\n      : graph;\n  }\n\n  private async render(graph: string): Promise<void> {\n    const renderId: number = ++this.renderId;\n\n    try {\n      const { svg } = await this.mermaid.render(this.id, this.themed(graph));\n\n      if (renderId === this.renderId) {\n        this.html.set(svg);\n        this.error.set(null);\n      }\n    } catch (error: unknown) {\n      if (renderId === this.renderId) {\n        this.error.set(error as Error);\n      }\n    } finally {\n      if (renderId === this.renderId) {\n        this.pending.set(false);\n      }\n    }\n  }\n}\n","@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\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-navbar.mjs

@@ -1,71 +1,61 @@
 import * as i0 from '@angular/core';
-import { inject, NgZone, ChangeDetectorRef, DestroyRef, afterNextRender, HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, input, booleanAttribute, viewChild, ElementRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocSearchComponent } from '@ng-doc/app/components/search';
-import { NgDocSidebarService } from '@ng-doc/app/services';
-import { ngDocZoneOptimize, NgDocButtonIconComponent, NgDocIconComponent } from '@ng-doc/ui-kit';
-import { WA_WINDOW } from '@ng-web-apis/common';
-import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { combineLatest, fromEvent } from 'rxjs';
-import { map, distinctUntilChanged, startWith } from 'rxjs/operators';
+import { NgDocSidebarService } from '@ng-doc/app/services/sidebar';
+import { NgDocButtonIconComponent } from '@ng-doc/ui-kit';
 
 /**
- * Navbar component for ng-doc application
+ * Navbar of the NgDoc application: the header bar above the sidebar and the page.
+ *
+ * It lays out, from left to right: the menu button (only where the sidebar is an overlay), the
+ * content marked with `ngDocNavbarLeft` (for example the logo), the content marked with
+ * `ngDocNavbarCenter` (for example the section links, hidden at 1024px and below), the search, and
+ * the content marked with `ngDocNavbarRight` (for example the theme toggle).
+ * @example
+ * ```html
+ * <ng-doc-navbar>
+ *   <a ngDocNavbarLeft routerLink="/">My library</a>
+ *   <nav ngDocNavbarCenter aria-label="Primary"><a routerLink="/docs">Guides</a></nav>
+ *   <ng-doc-theme-toggle ngDocNavbarRight />
+ * </ng-doc-navbar>
+ * ```
  */
 class NgDocNavbarComponent {
     constructor() {
-        this.window = inject(WA_WINDOW);
-        this.ngZone = inject(NgZone);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.sidebarService = inject(NgDocSidebarService);
         /**
          * Show search input
          */
-        this.search = true;
+        this.search = input(true, { ...(ngDevMode ? { debugName: "search" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Show hamburger button
+         * Show the menu button that opens the sidebar where it is an overlay (900px and below).
          */
-        this.hamburger = true;
+        this.hamburger = input(true, { ...(ngDevMode ? { debugName: "hamburger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Use glass effect for navbar
          */
-        this.glassEffect = true;
-        /**
-         * Indicates if navbar has border
-         */
-        this.hasBorder = false;
-        const destroyRef = inject(DestroyRef);
-        afterNextRender(() => {
-            combineLatest([
-                fromEvent(this.window, 'scroll').pipe(map((e) => (e.target?.scrollingElement?.scrollTop ?? 0) > 0), distinctUntilChanged(), startWith(false), ngDocZoneOptimize(this.ngZone)),
-                this.sidebarService.isExpanded(),
-            ])
-                .pipe(map(([scrolled, isExpanded]) => scrolled || (isExpanded && this.sidebarService.isMobile)), takeUntilDestroyed(destroyRef))
-                .subscribe((hasShadow) => {
-                this.hasBorder = hasShadow;
-                this.changeDetectorRef.markForCheck();
-            });
-        });
+        this.glassEffect = input(true, { ...(ngDevMode ? { debugName: "glassEffect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.menuButton = viewChild('menuButton', { ...(ngDevMode ? { debugName: "menuButton" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    }
+    /**
+     * Closes the sidebar overlay and moves focus back to the menu button that opened it.
+     */
+    closeSidebar() {
+        if (this.sidebarService.expandedState() && this.sidebarService.isMobile) {
+            this.sidebarService.hide();
+            this.menuButton()?.nativeElement.focus();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocNavbarComponent, isStandalone: true, selector: "ng-doc-navbar", inputs: { search: "search", hamburger: "hamburger", glassEffect: "glassEffect" }, host: { properties: { "attr.data-glass-effect": "this.glassEffect", "class.has-border": "this.hasBorder" } }, ngImport: i0, template: "<div class=\"navbar-container\">\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n    <button class=\"ng-doc-menu\" ng-doc-button-icon size=\"large\" (click)=\"sidebarService.toggle()\">\n      <ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host:not([data-glass-effect=false]){background:color-mix(in srgb,var(--ng-doc-navbar-background) 60%,transparent);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host[data-glass-effect=false]{background-color:var(--ng-doc-navbar-background)}:host{position:relative;display:flex;justify-content:center;height:100%;border-bottom:1px solid transparent;transition:var(--ng-doc-transition) border}:host.has-border{border-bottom:var(--ng-doc-navbar-border, );box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-right{display:flex;align-items:center}:host .ng-doc-navbar-left{justify-content:flex-start;width:100%;max-width:var(--ng-doc-navbar-left-width)}:host .ng-doc-navbar-right{justify-content:flex-end;margin-left:auto}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}@media(min-width:1024px){:host .ng-doc-menu{display:none}}\n"], dependencies: [{ kind: "component", type: NgDocSearchComponent, selector: "ng-doc-search" }, { 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: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocNavbarComponent, isStandalone: true, selector: "ng-doc-navbar", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, hamburger: { classPropertyName: "hamburger", publicName: "hamburger", isSignal: true, isRequired: false, transformFunction: null }, glassEffect: { classPropertyName: "glassEffect", publicName: "glassEffect", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "closeSidebar()" }, properties: { "attr.data-glass-effect": "glassEffect()" } }, viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"ng-doc-navbar-container\">\n  @if (hamburger()) {\n    <button\n      type=\"button\"\n      class=\"ng-doc-menu\"\n      ng-doc-button-icon\n      size=\"large\"\n      [rounded]=\"false\"\n      aria-controls=\"ng-doc-sidenav\"\n      [attr.aria-expanded]=\"sidebarService.expandedState()\"\n      [attr.aria-label]=\"sidebarService.expandedState() ? 'Close navigation' : 'Open navigation'\"\n      (click)=\"sidebarService.toggle()\"\n      #menuButton>\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M4 7h16M4 12h16M4 17h16\" />\n      </svg>\n    </button>\n  }\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-center\">\n    <ng-content select=\"[ngDocNavbarCenter]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search()) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;background:color-mix(in srgb,var(--ng-doc-navbar-background) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:var(--ng-doc-navbar-border);--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[data-glass-effect=false]{background:var(--ng-doc-navbar-background);backdrop-filter:none}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background:var(--ng-doc-navbar-background)}}.ng-doc-navbar-container{display:flex;align-items:center;gap:var(--ng-doc-space-4);width:100%;max-width:var(--ng-doc-app-max-width);height:100%;padding:0 var(--ng-doc-navbar-horizontal-padding)}.ng-doc-navbar-left,.ng-doc-navbar-center,.ng-doc-navbar-right{display:flex;align-items:center;gap:var(--ng-doc-space-4);min-width:0}.ng-doc-navbar-left{flex:none;max-width:var(--ng-doc-navbar-left-width)}.ng-doc-navbar-center{margin-left:auto}.ng-doc-navbar-right ng-doc-search{margin-left:var(--ng-doc-space-6)}@media(max-width:1024px){.ng-doc-navbar-right ng-doc-search{margin-left:0}}.ng-doc-menu{display:none;margin-left:calc(var(--ng-doc-space-2) * -1)}@media(max-width:1024px){.ng-doc-navbar-center{display:none}.ng-doc-navbar-right{margin-left:auto}}@media(max-width:900px){.ng-doc-menu{display:inline-flex}}@media(max-width:640px){.ng-doc-navbar-container{padding:0 var(--ng-doc-space-4)}}\n"], dependencies: [{ kind: "component", type: NgDocSearchComponent, selector: "ng-doc-search" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusOutlet, NgDocSearchComponent, NgDocButtonIconComponent, NgDocIconComponent], template: "<div class=\"navbar-container\">\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n    <button class=\"ng-doc-menu\" ng-doc-button-icon size=\"large\" (click)=\"sidebarService.toggle()\">\n      <ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host:not([data-glass-effect=false]){background:color-mix(in srgb,var(--ng-doc-navbar-background) 60%,transparent);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host[data-glass-effect=false]{background-color:var(--ng-doc-navbar-background)}:host{position:relative;display:flex;justify-content:center;height:100%;border-bottom:1px solid transparent;transition:var(--ng-doc-transition) border}:host.has-border{border-bottom:var(--ng-doc-navbar-border, );box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-right{display:flex;align-items:center}:host .ng-doc-navbar-left{justify-content:flex-start;width:100%;max-width:var(--ng-doc-navbar-left-width)}:host .ng-doc-navbar-right{justify-content:flex-end;margin-left:auto}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}@media(min-width:1024px){:host .ng-doc-menu{display:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { search: [{
-                type: Input
-            }], hamburger: [{
-                type: Input
-            }], glassEffect: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-glass-effect']
-            }], hasBorder: [{
-                type: HostBinding,
-                args: ['class.has-border']
-            }] } });
+            args: [{ selector: 'ng-doc-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocSearchComponent, NgDocButtonIconComponent], host: {
+                        '[attr.data-glass-effect]': 'glassEffect()',
+                        '(document:keydown.escape)': 'closeSidebar()',
+                    }, template: "<div class=\"ng-doc-navbar-container\">\n  @if (hamburger()) {\n    <button\n      type=\"button\"\n      class=\"ng-doc-menu\"\n      ng-doc-button-icon\n      size=\"large\"\n      [rounded]=\"false\"\n      aria-controls=\"ng-doc-sidenav\"\n      [attr.aria-expanded]=\"sidebarService.expandedState()\"\n      [attr.aria-label]=\"sidebarService.expandedState() ? 'Close navigation' : 'Open navigation'\"\n      (click)=\"sidebarService.toggle()\"\n      #menuButton>\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M4 7h16M4 12h16M4 17h16\" />\n      </svg>\n    </button>\n  }\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-center\">\n    <ng-content select=\"[ngDocNavbarCenter]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search()) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;background:color-mix(in srgb,var(--ng-doc-navbar-background) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:var(--ng-doc-navbar-border);--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[data-glass-effect=false]{background:var(--ng-doc-navbar-background);backdrop-filter:none}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background:var(--ng-doc-navbar-background)}}.ng-doc-navbar-container{display:flex;align-items:center;gap:var(--ng-doc-space-4);width:100%;max-width:var(--ng-doc-app-max-width);height:100%;padding:0 var(--ng-doc-navbar-horizontal-padding)}.ng-doc-navbar-left,.ng-doc-navbar-center,.ng-doc-navbar-right{display:flex;align-items:center;gap:var(--ng-doc-space-4);min-width:0}.ng-doc-navbar-left{flex:none;max-width:var(--ng-doc-navbar-left-width)}.ng-doc-navbar-center{margin-left:auto}.ng-doc-navbar-right ng-doc-search{margin-left:var(--ng-doc-space-6)}@media(max-width:1024px){.ng-doc-navbar-right ng-doc-search{margin-left:0}}.ng-doc-menu{display:none;margin-left:calc(var(--ng-doc-space-2) * -1)}@media(max-width:1024px){.ng-doc-navbar-center{display:none}.ng-doc-navbar-right{margin-left:auto}}@media(max-width:900px){.ng-doc-menu{display:inline-flex}}@media(max-width:640px){.ng-doc-navbar-container{padding:0 var(--ng-doc-space-4)}}\n"] }]
+        }], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], hamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburger", required: false }] }], glassEffect: [{ type: i0.Input, args: [{ isSignal: true, alias: "glassEffect", required: false }] }], menuButton: [{ type: i0.ViewChild, args: ['menuButton', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-navbar.mjs","sources":["../../../../libs/app/components/navbar/navbar.component.ts","../../../../libs/app/components/navbar/navbar.component.html","../../../../libs/app/components/navbar/ng-doc-app-components-navbar.ts"],"sourcesContent":["import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  HostBinding,\n  inject,\n  Input,\n  NgZone,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgDocSearchComponent } from '@ng-doc/app/components/search';\nimport { NgDocSidebarService } from '@ng-doc/app/services';\nimport { NgDocButtonIconComponent, NgDocIconComponent, ngDocZoneOptimize } from '@ng-doc/ui-kit';\nimport { WA_WINDOW } from '@ng-web-apis/common';\nimport { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';\nimport { combineLatest, fromEvent } from 'rxjs';\nimport { distinctUntilChanged, map, startWith } from 'rxjs/operators';\n\n/**\n * Navbar component for ng-doc application\n */\n@Component({\n  selector: 'ng-doc-navbar',\n  templateUrl: './navbar.component.html',\n  styleUrls: ['./navbar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [PolymorpheusOutlet, NgDocSearchComponent, NgDocButtonIconComponent, NgDocIconComponent],\n})\nexport class NgDocNavbarComponent {\n  private readonly window = inject<Window>(WA_WINDOW);\n  private readonly ngZone = inject(NgZone);\n  private readonly changeDetectorRef = inject(ChangeDetectorRef);\n  protected readonly sidebarService = inject(NgDocSidebarService);\n\n  /**\n   * Show search input\n   */\n  @Input()\n  search: boolean = true;\n\n  /**\n   * Show hamburger button\n   */\n  @Input()\n  hamburger: boolean = true;\n\n  /**\n   * Use glass effect for navbar\n   */\n  @Input()\n  @HostBinding('attr.data-glass-effect')\n  glassEffect: boolean = true;\n\n  /**\n   * Indicates if navbar has border\n   */\n  @HostBinding('class.has-border')\n  hasBorder: boolean = false;\n\n  constructor() {\n    const destroyRef = inject(DestroyRef);\n\n    afterNextRender(() => {\n      combineLatest([\n        fromEvent(this.window, 'scroll').pipe(\n          map((e: Event) => ((e.target as Document)?.scrollingElement?.scrollTop ?? 0) > 0),\n          distinctUntilChanged(),\n          startWith(false),\n          ngDocZoneOptimize(this.ngZone),\n        ),\n        this.sidebarService.isExpanded(),\n      ])\n        .pipe(\n          map(\n            ([scrolled, isExpanded]: [boolean, boolean]) =>\n              scrolled || (isExpanded && this.sidebarService.isMobile),\n          ),\n          takeUntilDestroyed(destroyRef),\n        )\n        .subscribe((hasShadow: boolean) => {\n          this.hasBorder = hasShadow;\n          this.changeDetectorRef.markForCheck();\n        });\n    });\n  }\n}\n","<div class=\"navbar-container\">\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n    <button class=\"ng-doc-menu\" ng-doc-button-icon size=\"large\" (click)=\"sidebarService.toggle()\">\n      <ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n    </button>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-navbar.mjs","sources":["../../../../libs/app/components/navbar/navbar.component.ts","../../../../libs/app/components/navbar/navbar.component.html","../../../../libs/app/components/navbar/ng-doc-app-components-navbar.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\nimport { NgDocSearchComponent } from '@ng-doc/app/components/search';\nimport { NgDocSidebarService } from '@ng-doc/app/services/sidebar';\nimport { NgDocButtonIconComponent } from '@ng-doc/ui-kit';\n\n/**\n * Navbar of the NgDoc application: the header bar above the sidebar and the page.\n *\n * It lays out, from left to right: the menu button (only where the sidebar is an overlay), the\n * content marked with `ngDocNavbarLeft` (for example the logo), the content marked with\n * `ngDocNavbarCenter` (for example the section links, hidden at 1024px and below), the search, and\n * the content marked with `ngDocNavbarRight` (for example the theme toggle).\n * @example\n * ```html\n * <ng-doc-navbar>\n *   <a ngDocNavbarLeft routerLink=\"/\">My library</a>\n *   <nav ngDocNavbarCenter aria-label=\"Primary\"><a routerLink=\"/docs\">Guides</a></nav>\n *   <ng-doc-theme-toggle ngDocNavbarRight />\n * </ng-doc-navbar>\n * ```\n */\n@Component({\n  selector: 'ng-doc-navbar',\n  templateUrl: './navbar.component.html',\n  styleUrls: ['./navbar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocSearchComponent, NgDocButtonIconComponent],\n  host: {\n    '[attr.data-glass-effect]': 'glassEffect()',\n    '(document:keydown.escape)': 'closeSidebar()',\n  },\n})\nexport class NgDocNavbarComponent {\n  protected readonly sidebarService = inject(NgDocSidebarService);\n\n  /**\n   * Show search input\n   */\n  readonly search = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n  /**\n   * Show the menu button that opens the sidebar where it is an overlay (900px and below).\n   */\n  readonly hamburger = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n  /**\n   * Use glass effect for navbar\n   */\n  readonly glassEffect = input<boolean, unknown>(true, { transform: booleanAttribute });\n\n  private readonly menuButton = viewChild('menuButton', { read: ElementRef<HTMLButtonElement> });\n\n  /**\n   * Closes the sidebar overlay and moves focus back to the menu button that opened it.\n   */\n  protected closeSidebar(): void {\n    if (this.sidebarService.expandedState() && this.sidebarService.isMobile) {\n      this.sidebarService.hide();\n      this.menuButton()?.nativeElement.focus();\n    }\n  }\n}\n","<div class=\"ng-doc-navbar-container\">\n  @if (hamburger()) {\n    <button\n      type=\"button\"\n      class=\"ng-doc-menu\"\n      ng-doc-button-icon\n      size=\"large\"\n      [rounded]=\"false\"\n      aria-controls=\"ng-doc-sidenav\"\n      [attr.aria-expanded]=\"sidebarService.expandedState()\"\n      [attr.aria-label]=\"sidebarService.expandedState() ? 'Close navigation' : 'Open navigation'\"\n      (click)=\"sidebarService.toggle()\"\n      #menuButton>\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M4 7h16M4 12h16M4 17h16\" />\n      </svg>\n    </button>\n  }\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-center\">\n    <ng-content select=\"[ngDocNavbarCenter]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search()) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,21 +1,84 @@
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, inject, ElementRef, PLATFORM_ID, effect, untracked, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgDocContentController } from '@ng-doc/app/classes/content-controller';
+import { ɵrestoreNgDocHydrationSnapshot as _restoreNgDocHydrationSnapshot } from '@ng-doc/app/helpers';
 import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';
 import { NgDocPageProcessorComponent } from '@ng-doc/app/processors';
 
+/**
+ * The header of a documentation page: the rendered header HTML, or the header of an
+ * asynchronous content source.
+ */
 class NgDocPageHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocPageHeaderComponent, isStandalone: true, selector: "ng-doc-page-header", inputs: { headerContent: "headerContent" }, host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: "<header\n  class=\"ng-doc-page-header ngde\"\n  [ngDocPageProcessor]=\"headerContent | ngDocSanitizeHtml\"></header>\n", styles: [""], dependencies: [{ kind: "component", type: NgDocPageProcessorComponent, selector: "[ngDocPageProcessor]", inputs: ["ngDocPageProcessor"], outputs: ["afterRender"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    constructor() {
+        /** The rendered header HTML, used when there is no content source. */
+        this.headerContent = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerContent" }] : /* istanbul ignore next */ []));
+        /** The source of the header content, for pages whose content loads asynchronously. */
+        this.headerContentSource = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "headerContentSource" }] : /* istanbul ignore next */ []));
+        this.contentController = inject(NgDocContentController);
+        this.host = inject(ElementRef).nativeElement;
+        this.browser = isPlatformBrowser(inject(PLATFORM_ID));
+        // Connects the controller to the current source, before the template renders its content.
+        effect(() => {
+            const source = this.headerContentSource();
+            untracked(() => {
+                if (source) {
+                    // Angular empties this host (it skips hydration) and the header loads asynchronously,
+                    // so the server-rendered header stays visible until the loaded one renders. The copy
+                    // is shown once, for the host's first source.
+                    if (this.browser && !this.snapshot)
+                        this.snapshot = _restoreNgDocHydrationSnapshot(this.host);
+                    this.contentController.connect(source);
+                }
+                else {
+                    this.releaseSnapshot();
+                    this.contentController.disconnect();
+                }
+            });
+        });
+        // A load that needs no new pass (its header is already rendered) or that failed settles
+        // without `revealLoaded`.
+        effect(() => {
+            if (this.contentController.settled())
+                untracked(() => this.releaseSnapshot());
+        });
+        effect(() => {
+            if (this.contentController.error())
+                untracked(() => this.releaseSnapshot());
+        });
+        inject(DestroyRef).onDestroy(() => this.releaseSnapshot());
+    }
+    /**
+     * Shows the loaded header in place of the server-rendered copy when a pass of it is about to
+     * render, in the same task. The pass of the empty header 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();
+    }
+    releaseSnapshot() {
+        const release = this.snapshot;
+        this.snapshot = undefined;
+        release?.();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocPageHeaderComponent, isStandalone: true, selector: "ng-doc-page-header", inputs: { headerContent: { classPropertyName: "headerContent", publicName: "headerContent", isSignal: true, isRequired: true, transformFunction: null }, headerContentSource: { classPropertyName: "headerContentSource", publicName: "headerContentSource", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "ngSkipHydration": "true" }, properties: { "attr.data-ng-doc-async-content": "headerContentSource() ? \"\" : null" } }, providers: [NgDocContentController], ngImport: i0, template: "@if (headerContentSource()) {\n  @if (contentController.error(); as error) {\n    <header class=\"ng-doc-page-header ngde\" role=\"alert\">{{ error.message }}</header>\n  } @else {\n    <header\n      class=\"ng-doc-page-header ngde\"\n      [ngDocPageProcessor]=\"contentController.html() | ngDocSanitizeHtml\"\n      [contentVersion]=\"contentController.version()\"\n      (beforeRender)=\"revealLoaded($event)\"\n      (contentProcessed)=\"contentController.processed($event)\"\n      (processingError)=\"contentController.processingFailed($event)\"></header>\n  }\n} @else {\n  <header\n    class=\"ng-doc-page-header ngde\"\n    [ngDocPageProcessor]=\"headerContent() | ngDocSanitizeHtml\"></header>\n}\n", styles: [":host[data-ng-doc-hydration-snapshot]>:not(.ng-doc-hydration-snapshot){display:none!important}\n"], dependencies: [{ kind: "component", type: NgDocPageProcessorComponent, selector: "[ngDocPageProcessor]", inputs: ["ngDocPageProcessor", "contentVersion"], outputs: ["beforeRender", "afterRender", "contentProcessed", "processingError"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocPageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocPageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-page-header', imports: [NgDocPageProcessorComponent, NgDocSanitizeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'ng-doc-page-header', imports: [NgDocPageProcessorComponent, NgDocSanitizeHtmlPipe], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgDocContentController], host: {
                         ngSkipHydration: 'true',
-                    }, template: "<header\n  class=\"ng-doc-page-header ngde\"\n  [ngDocPageProcessor]=\"headerContent | ngDocSanitizeHtml\"></header>\n" }]
-        }], propDecorators: { headerContent: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+                        // Tells the browser that the server-rendered header must be kept until the loaded one
+                        // renders (ɵNG_DOC_ASYNC_CONTENT_ATTRIBUTE).
+                        '[attr.data-ng-doc-async-content]': 'headerContentSource() ? "" : null',
+                    }, template: "@if (headerContentSource()) {\n  @if (contentController.error(); as error) {\n    <header class=\"ng-doc-page-header ngde\" role=\"alert\">{{ error.message }}</header>\n  } @else {\n    <header\n      class=\"ng-doc-page-header ngde\"\n      [ngDocPageProcessor]=\"contentController.html() | ngDocSanitizeHtml\"\n      [contentVersion]=\"contentController.version()\"\n      (beforeRender)=\"revealLoaded($event)\"\n      (contentProcessed)=\"contentController.processed($event)\"\n      (processingError)=\"contentController.processingFailed($event)\"></header>\n  }\n} @else {\n  <header\n    class=\"ng-doc-page-header ngde\"\n    [ngDocPageProcessor]=\"headerContent() | ngDocSanitizeHtml\"></header>\n}\n", styles: [":host[data-ng-doc-hydration-snapshot]>:not(.ng-doc-hydration-snapshot){display:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { headerContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContent", required: true }] }], headerContentSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerContentSource", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.