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

package/fesm2022/ng-doc-app-components-search-result.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-search-result.mjs","sources":["../../../../libs/app/components/search-result/search-result.component.ts","../../../../libs/app/components/search-result/search-result.component.html","../../../../libs/app/components/search-result/ng-doc-app-components-search-result.ts"],"sourcesContent":["import { KeyValuePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';\nimport { NgDocPageInfo } from '@ng-doc/core/interfaces';\nimport { NgDocTextComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';\n\n@Component({\n  selector: 'ng-doc-search-result',\n  templateUrl: './search-result.component.html',\n  styleUrls: ['./search-result.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgDocTextComponent,\n    RouterLink,\n    NgDocKindIconComponent,\n    NgDocTooltipDirective,\n    KeyValuePipe,\n  ],\n})\nexport class NgDocSearchResultComponent implements OnChanges {\n  @Input()\n  result: NgDocPageInfo[] | null = [];\n\n  groupedResult: Record<string, NgDocPageInfo[]> = {};\n\n  ngOnChanges({ result }: SimpleChanges): void {\n    if (result && this.result) {\n      this.groupedResult = this.result.reduce(\n        (grouped: Record<string, NgDocPageInfo[]>, item: NgDocPageInfo) => {\n          if (!grouped[item.type]) {\n            grouped[item.type] = [];\n          }\n\n          grouped[item.type].push(item);\n\n          return grouped;\n        },\n        {},\n      );\n    }\n  }\n\n  typeToLabel(type: string): string {\n    switch (type) {\n      case 'api':\n        return 'API';\n      case 'guide':\n        return 'Guides';\n      default:\n        return 'Unknown';\n    }\n  }\n}\n","@if (groupedResult | keyvalue; as results) {\n  <div class=\"ng-doc-search-result-wrapper\">\n    @if (results.length) {\n      @for (item of results; track item) {\n        <div class=\"ng-doc-search-result-category\">\n          <h4 class=\"ng-doc-search-result-title\" ng-doc-text>{{ typeToLabel(item.key) }}</h4>\n          <ul class=\"ng-doc-search-result-pages\">\n            @for (page of item.value; track page) {\n              <li class=\"ng-doc-search-result-page\">\n                <a class=\"ng-doc-search-result-page-link\" [routerLink]=\"[page.route]\">\n                  @if (page.kind) {\n                    <ng-doc-kind-icon\n                      [kind]=\"page.kind\"\n                      [ngDocTooltip]=\"page.kind\"></ng-doc-kind-icon>\n                  }\n                  {{ page.title }}\n                </a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n    } @else {\n      <div ng-doc-text color=\"muted\">Nothing was found...</div>\n    }\n  </div>\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-search-result.mjs","sources":["../../../../libs/app/components/search-result/search-result.component.ts","../../../../libs/app/components/search-result/search-result.component.html","../../../../libs/app/components/search-result/ng-doc-app-components-search-result.ts"],"sourcesContent":["import { KeyValuePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';\nimport { NgDocPageInfo } from '@ng-doc/core/interfaces';\nimport { NgDocTextComponent, NgDocTooltipDirective } from '@ng-doc/ui-kit';\n\n/**\n * A list of pages grouped by their type (guides and API).\n */\n@Component({\n  selector: 'ng-doc-search-result',\n  templateUrl: './search-result.component.html',\n  styleUrls: ['./search-result.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgDocTextComponent,\n    RouterLink,\n    NgDocKindIconComponent,\n    NgDocTooltipDirective,\n    KeyValuePipe,\n  ],\n})\nexport class NgDocSearchResultComponent {\n  /** The pages to list. */\n  readonly result = input<NgDocPageInfo[] | null>([]);\n\n  /** The pages grouped by their type. */\n  readonly groupedResult: Signal<Record<string, NgDocPageInfo[]>> = computed(() =>\n    (this.result() ?? []).reduce(\n      (grouped: Record<string, NgDocPageInfo[]>, item: NgDocPageInfo) => {\n        (grouped[item.type] ??= []).push(item);\n\n        return grouped;\n      },\n      {},\n    ),\n  );\n\n  /**\n   * Returns the heading of a group.\n   * @param type - The page type of the group.\n   */\n  typeToLabel(type: string): string {\n    switch (type) {\n      case 'api':\n        return 'API';\n      case 'guide':\n        return 'Guides';\n      default:\n        return 'Unknown';\n    }\n  }\n}\n","@if (groupedResult() | keyvalue; as results) {\n  <div class=\"ng-doc-search-result-wrapper\">\n    @if (results.length) {\n      @for (item of results; track item) {\n        <div class=\"ng-doc-search-result-category\">\n          <h4 class=\"ng-doc-search-result-title\" ng-doc-text>{{ typeToLabel(item.key) }}</h4>\n          <ul class=\"ng-doc-search-result-pages\">\n            @for (page of item.value; track page) {\n              <li class=\"ng-doc-search-result-page\">\n                <a class=\"ng-doc-search-result-page-link\" [routerLink]=\"[page.route]\">\n                  @if (page.kind) {\n                    <ng-doc-kind-icon\n                      [kind]=\"page.kind\"\n                      [ngDocTooltip]=\"page.kind\"></ng-doc-kind-icon>\n                  }\n                  {{ page.title }}\n                </a>\n              </li>\n            }\n          </ul>\n        </div>\n      }\n    } @else {\n      <div ng-doc-text color=\"muted\">Nothing was found...</div>\n    }\n  </div>\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-search.mjs

@@ -1,53 +1,84 @@
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
+import { inject, signal, DOCUMENT, PLATFORM_ID, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocSearchEngine } from '@ng-doc/app/classes';
-import { NgDocSearchDialogComponent } from '@ng-doc/app/components/search-dialog';
-import { NgDocDialogService, observableState, NgDocComponentContent, NgDocButtonIconComponent, NgDocDropdownOriginDirective, NgDocIconComponent, NgDocInputWrapperComponent, NgDocInputStringDirective, NgDocHotkeyDirective, NgDocTagComponent } from '@ng-doc/ui-kit';
-import { BehaviorSubject, NEVER } from 'rxjs';
-import { skip, switchMap, shareReplay } from 'rxjs/operators';
+import { NgDocCommandPaletteComponent } from '@ng-doc/app/components/command-palette';
+import { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';
+import { NgDocDialogService, NgDocComponentContent, NgDocButtonIconComponent } from '@ng-doc/ui-kit';
 
+/**
+ * The search button of the navbar. It opens the search palette on click, with Command+K
+ * (Control+K) and, while single-key shortcuts are on, with the slash key. Wide screens show a
+ * search field with the key hint; narrow screens show an icon button.
+ */
 class NgDocSearchComponent {
     constructor() {
-        this.query = new BehaviorSubject('');
         this.dialog = inject(NgDocDialogService);
         this.searchEngine = inject(NgDocSearchEngine, { optional: true });
+        this.shortcuts = inject(NgDocShortcutsService);
+        /** The chord that opens the search, as the reader's platform labels it. */
+        this.chord = signal('⌘K', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chord" }] : /* istanbul ignore next */ []));
+        this.document = inject(DOCUMENT);
+        this.browser = isPlatformBrowser(inject(PLATFORM_ID));
         if (!this.searchEngine) {
             throw new Error(`NgDoc: Search engine is not provided,
-			please check this article: https://ng-doc.com/docs/getting-started/installation#configuring-application
+			please check this article: https://ng-doc.com/docs/get-started/installation#4-add-the-providers
 			to learn how to provide it.`);
         }
-        this.searchResults = this.query.pipe(skip(1), switchMap((term) => this.searchEngine?.search(term).pipe(observableState()) ?? NEVER), shareReplay(1), takeUntilDestroyed());
+        const removeSlash = this.shortcuts.register({ key: '/', handler: () => this.open() });
+        const removeChord = this.shortcuts.register({
+            key: 'k',
+            chord: true,
+            handler: () => (this.dialogRef ? this.dialogRef.close() : this.open()),
+        });
+        inject(DestroyRef).onDestroy(() => {
+            removeSlash();
+            removeChord();
+            this.dialogRef?.close();
+        });
+        // The platform is known only in the browser; the server renders the macOS label.
+        afterNextRender(() => {
+            if (!/Mac|iPhone|iPad/i.test(this.document.defaultView?.navigator.platform ?? '')) {
+                this.chord.set('Ctrl K');
+            }
+        });
     }
-    open() {
-        this.dialog.open(new NgDocComponentContent(NgDocSearchDialogComponent), {
+    /**
+     * Opens the search palette. Focus returns to the element that had it when the palette closes.
+     * @param query - The text the search field starts with.
+     */
+    open(query = '') {
+        if (this.dialogRef || !this.browser) {
+            return;
+        }
+        const opener = this.document.activeElement;
+        const narrow = !!this.document.defaultView?.matchMedia?.('(max-width: 640px)').matches;
+        const data = { query };
+        const dialogRef = this.dialog.open(new NgDocComponentContent(NgDocCommandPaletteComponent), {
             hasBackdrop: true,
-            backdropClass: 'ng-doc-blur-backdrop',
-            panelClass: 'ng-doc-transparent-dialog',
-            positionStrategy: this.dialog.positionStrategy().centerHorizontally().top('5vh'),
-            data: {
-                term: this.query.value,
-                search: (query) => this.query.next(query),
-                searchResults: this.searchResults,
-            },
+            backdropClass: 'ng-doc-command-palette-backdrop',
+            panelClass: ['ng-doc-transparent-dialog', 'ng-doc-command-palette-pane'],
+            positionStrategy: this.dialog
+                .positionStrategy()
+                .centerHorizontally()
+                .top(narrow ? '8px' : '10vh'),
+            data,
+        });
+        this.dialogRef = dialogRef;
+        dialogRef.afterClose().subscribe(() => {
+            this.dialogRef = undefined;
+            if (opener instanceof HTMLElement && opener.isConnected && opener !== this.document.body) {
+                opener.focus({ preventScroll: true });
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: NgDocSearchComponent, isStandalone: true, selector: "ng-doc-search", ngImport: i0, template: "<ng-container\n  [ngDocHotkey]=\"{ ctrlKey: false, altKey: false, shiftKey: false, code: 'Slash' }\"\n  (ngDocHotkey)=\"open()\">\n  <button ng-doc-button-icon size=\"large\" (click)=\"open()\" ngDocDropdownOrigin>\n    <ng-doc-icon icon=\"search\" [size]=\"24\"></ng-doc-icon>\n  </button>\n\n  <ng-doc-input-wrapper ngDocDropdownOrigin>\n    <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n    <input ngDocInputString readonly placeholder=\"Search...\" (click)=\"open()\" />\n    <ng-doc-tag class=\"search-hotkey\" ngDocInputWrapperRight>/</ng-doc-tag>\n  </ng-doc-input-wrapper>\n</ng-container>\n", styles: [":host{--ng-doc-floated-border-radius: var(--ng-doc-base-gutter);--ng-doc-input-background-color: var(--ng-doc-base-1);--ng-doc-input-border: none;--ng-doc-input-border-hover: none;--ng-doc-icon-color: var(--ng-doc-base-7)}:host ng-doc-input-wrapper{cursor:pointer}:host ng-doc-input-wrapper ng-doc-icon,:host ng-doc-input-wrapper ng-doc-tag{cursor:pointer}@media(max-width:1024px){:host ng-doc-input-wrapper{display:none}}@media(min-width:1024px){:host{width:240px}:host button[ng-doc-button-icon]{display:none}}.search-hotkey{display:flex;align-items:center;justify-content:center;width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3);margin-right:var(--ng-doc-base-gutter);--ng-doc-tag-border: 1px solid var(--ng-doc-base-6);--ng-doc-tag-color: var(--ng-doc-base-6);--ng-doc-tag-background: transparent}\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: NgDocDropdownOriginDirective, selector: "[ngDocDropdownOrigin]", exportAs: ["ngDocDropdownOrigin"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocInputWrapperComponent, selector: "ng-doc-input-wrapper", inputs: ["blurContent", "blurContext", "align"] }, { kind: "directive", type: NgDocInputStringDirective, selector: "input[ngDocInputString]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgDocHotkeyDirective, selector: "[ngDocHotkey]", inputs: ["ngDocHotkey"], outputs: ["ngDocHotkey"] }, { kind: "component", type: NgDocTagComponent, selector: "ng-doc-tag", inputs: ["color", "size", "mod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocSearchComponent, isStandalone: true, selector: "ng-doc-search", ngImport: i0, template: "<button\n  class=\"ng-doc-search-field\"\n  type=\"button\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-label]=\"'Search (' + chord() + ')'\"\n  aria-keyshortcuts=\"Meta+K Control+K\"\n  (click)=\"open()\">\n  <svg\n    width=\"16\"\n    height=\"16\"\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    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </svg>\n  <span class=\"ng-doc-search-placeholder\">Search docs\u2026</span>\n  <kbd>{{ chord() }}</kbd>\n</button>\n<button\n  class=\"ng-doc-search-button\"\n  type=\"button\"\n  ng-doc-button-icon\n  size=\"large\"\n  [rounded]=\"false\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-label]=\"'Search (' + chord() + ')'\"\n  aria-keyshortcuts=\"Meta+K Control+K\"\n  (click)=\"open()\">\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    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </svg>\n</button>\n", styles: [":host{display:flex;align-items:center}.ng-doc-search-field{display:flex;align-items:center;gap:var(--ng-doc-space-2);width:220px;height:36px;padding:0 var(--ng-doc-space-2) 0 var(--ng-doc-space-3);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-1);color:var(--ng-doc-text-muted);font:400 var(--ng-doc-text-sm-size)/20px var(--ng-doc-font-family);text-align:left;cursor:pointer;transition:border-color var(--ng-doc-transition)}.ng-doc-search-field:hover{border-color:var(--ng-doc-border-hover-color)}.ng-doc-search-field:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-search-field svg{flex:none}.ng-doc-search-field kbd{margin-left:auto;padding:0 6px;border:1px solid var(--ng-doc-kbd-border-color);border-radius:var(--ng-doc-radius-xs);background:var(--ng-doc-kbd-background);font:500 11px/18px var(--ng-doc-font-family);color:var(--ng-doc-text-muted)}.ng-doc-search-placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-search-button{display:none!important}@media(max-width:1024px){.ng-doc-search-field{display:none}.ng-doc-search-button{display:inline-flex!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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-search', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgDocButtonIconComponent,
-                        NgDocDropdownOriginDirective,
-                        NgDocIconComponent,
-                        NgDocInputWrapperComponent,
-                        NgDocInputStringDirective,
-                        FormsModule,
-                        NgDocHotkeyDirective,
-                        NgDocTagComponent,
-                    ], template: "<ng-container\n  [ngDocHotkey]=\"{ ctrlKey: false, altKey: false, shiftKey: false, code: 'Slash' }\"\n  (ngDocHotkey)=\"open()\">\n  <button ng-doc-button-icon size=\"large\" (click)=\"open()\" ngDocDropdownOrigin>\n    <ng-doc-icon icon=\"search\" [size]=\"24\"></ng-doc-icon>\n  </button>\n\n  <ng-doc-input-wrapper ngDocDropdownOrigin>\n    <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n    <input ngDocInputString readonly placeholder=\"Search...\" (click)=\"open()\" />\n    <ng-doc-tag class=\"search-hotkey\" ngDocInputWrapperRight>/</ng-doc-tag>\n  </ng-doc-input-wrapper>\n</ng-container>\n", styles: [":host{--ng-doc-floated-border-radius: var(--ng-doc-base-gutter);--ng-doc-input-background-color: var(--ng-doc-base-1);--ng-doc-input-border: none;--ng-doc-input-border-hover: none;--ng-doc-icon-color: var(--ng-doc-base-7)}:host ng-doc-input-wrapper{cursor:pointer}:host ng-doc-input-wrapper ng-doc-icon,:host ng-doc-input-wrapper ng-doc-tag{cursor:pointer}@media(max-width:1024px){:host ng-doc-input-wrapper{display:none}}@media(min-width:1024px){:host{width:240px}:host button[ng-doc-button-icon]{display:none}}.search-hotkey{display:flex;align-items:center;justify-content:center;width:calc(var(--ng-doc-base-gutter) * 3);height:calc(var(--ng-doc-base-gutter) * 3);margin-right:var(--ng-doc-base-gutter);--ng-doc-tag-border: 1px solid var(--ng-doc-base-6);--ng-doc-tag-color: var(--ng-doc-base-6);--ng-doc-tag-background: transparent}\n"] }]
+            args: [{ selector: 'ng-doc-search', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocButtonIconComponent], template: "<button\n  class=\"ng-doc-search-field\"\n  type=\"button\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-label]=\"'Search (' + chord() + ')'\"\n  aria-keyshortcuts=\"Meta+K Control+K\"\n  (click)=\"open()\">\n  <svg\n    width=\"16\"\n    height=\"16\"\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    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </svg>\n  <span class=\"ng-doc-search-placeholder\">Search docs\u2026</span>\n  <kbd>{{ chord() }}</kbd>\n</button>\n<button\n  class=\"ng-doc-search-button\"\n  type=\"button\"\n  ng-doc-button-icon\n  size=\"large\"\n  [rounded]=\"false\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-label]=\"'Search (' + chord() + ')'\"\n  aria-keyshortcuts=\"Meta+K Control+K\"\n  (click)=\"open()\">\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    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </svg>\n</button>\n", styles: [":host{display:flex;align-items:center}.ng-doc-search-field{display:flex;align-items:center;gap:var(--ng-doc-space-2);width:220px;height:36px;padding:0 var(--ng-doc-space-2) 0 var(--ng-doc-space-3);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-1);color:var(--ng-doc-text-muted);font:400 var(--ng-doc-text-sm-size)/20px var(--ng-doc-font-family);text-align:left;cursor:pointer;transition:border-color var(--ng-doc-transition)}.ng-doc-search-field:hover{border-color:var(--ng-doc-border-hover-color)}.ng-doc-search-field:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-search-field svg{flex:none}.ng-doc-search-field kbd{margin-left:auto;padding:0 6px;border:1px solid var(--ng-doc-kbd-border-color);border-radius:var(--ng-doc-radius-xs);background:var(--ng-doc-kbd-background);font:500 11px/18px var(--ng-doc-font-family);color:var(--ng-doc-text-muted)}.ng-doc-search-placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-search-button{display:none!important}@media(max-width:1024px){.ng-doc-search-field{display:none}.ng-doc-search-button{display:inline-flex!important}}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-search.mjs","sources":["../../../../libs/app/components/search/search.component.ts","../../../../libs/app/components/search/search.component.html","../../../../libs/app/components/search/ng-doc-app-components-search.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { NgDocSearchEngine } from '@ng-doc/app/classes';\nimport {\n  NgDocSearchDialogComponent,\n  NgDocSearchDialogData,\n} from '@ng-doc/app/components/search-dialog';\nimport { NgDocSearchResult } from '@ng-doc/app/interfaces';\nimport {\n  NgDocButtonIconComponent,\n  NgDocComponentContent,\n  NgDocDialogService,\n  NgDocDropdownOriginDirective,\n  NgDocHotkeyDirective,\n  NgDocIconComponent,\n  NgDocInputStringDirective,\n  NgDocInputWrapperComponent,\n  NgDocTagComponent,\n  observableState,\n  StatedObservable,\n} from '@ng-doc/ui-kit';\nimport { BehaviorSubject, NEVER } from 'rxjs';\nimport { shareReplay, skip, switchMap } from 'rxjs/operators';\n\n@Component({\n  selector: 'ng-doc-search',\n  templateUrl: './search.component.html',\n  styleUrls: ['./search.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgDocButtonIconComponent,\n    NgDocDropdownOriginDirective,\n    NgDocIconComponent,\n    NgDocInputWrapperComponent,\n    NgDocInputStringDirective,\n    FormsModule,\n    NgDocHotkeyDirective,\n    NgDocTagComponent,\n  ],\n})\nexport class NgDocSearchComponent {\n  protected readonly query: BehaviorSubject<string> = new BehaviorSubject<string>('');\n  protected readonly searchResults: StatedObservable<NgDocSearchResult[]>;\n  protected readonly dialog = inject(NgDocDialogService);\n  protected readonly searchEngine = inject(NgDocSearchEngine, { optional: true });\n\n  constructor() {\n    if (!this.searchEngine) {\n      throw new Error(`NgDoc: Search engine is not provided,\n\t\t\tplease check this article: https://ng-doc.com/docs/getting-started/installation#configuring-application\n\t\t\tto learn how to provide it.`);\n    }\n\n    this.searchResults = this.query.pipe(\n      skip(1),\n      switchMap((term: string) => this.searchEngine?.search(term).pipe(observableState()) ?? NEVER),\n      shareReplay(1),\n      takeUntilDestroyed(),\n    );\n  }\n\n  open(): void {\n    this.dialog.open<NgDocSearchDialogData>(new NgDocComponentContent(NgDocSearchDialogComponent), {\n      hasBackdrop: true,\n      backdropClass: 'ng-doc-blur-backdrop',\n      panelClass: 'ng-doc-transparent-dialog',\n      positionStrategy: this.dialog.positionStrategy().centerHorizontally().top('5vh'),\n      data: {\n        term: this.query.value,\n        search: (query: string) => this.query.next(query),\n        searchResults: this.searchResults,\n      },\n    });\n  }\n}\n","<ng-container\n  [ngDocHotkey]=\"{ ctrlKey: false, altKey: false, shiftKey: false, code: 'Slash' }\"\n  (ngDocHotkey)=\"open()\">\n  <button ng-doc-button-icon size=\"large\" (click)=\"open()\" ngDocDropdownOrigin>\n    <ng-doc-icon icon=\"search\" [size]=\"24\"></ng-doc-icon>\n  </button>\n\n  <ng-doc-input-wrapper ngDocDropdownOrigin>\n    <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n    <input ngDocInputString readonly placeholder=\"Search...\" (click)=\"open()\" />\n    <ng-doc-tag class=\"search-hotkey\" ngDocInputWrapperRight>/</ng-doc-tag>\n  </ng-doc-input-wrapper>\n</ng-container>\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-search.mjs","sources":["../../../../libs/app/components/search/search.component.ts","../../../../libs/app/components/search/search.component.html","../../../../libs/app/components/search/ng-doc-app-components-search.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  DOCUMENT,\n  inject,\n  PLATFORM_ID,\n  signal,\n} from '@angular/core';\nimport { NgDocSearchEngine } from '@ng-doc/app/classes';\nimport {\n  NgDocCommandPaletteComponent,\n  NgDocCommandPaletteData,\n} from '@ng-doc/app/components/command-palette';\nimport { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';\nimport {\n  NgDocButtonIconComponent,\n  NgDocComponentContent,\n  NgDocDialogService,\n} from '@ng-doc/ui-kit';\nimport { NgDocOverlayRef } from '@ng-doc/ui-kit/classes';\n\n/**\n * The search button of the navbar. It opens the search palette on click, with Command+K\n * (Control+K) and, while single-key shortcuts are on, with the slash key. Wide screens show a\n * search field with the key hint; narrow screens show an icon button.\n */\n@Component({\n  selector: 'ng-doc-search',\n  templateUrl: './search.component.html',\n  styleUrls: ['./search.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgDocButtonIconComponent],\n})\nexport class NgDocSearchComponent {\n  protected readonly dialog = inject(NgDocDialogService);\n  protected readonly searchEngine = inject(NgDocSearchEngine, { optional: true });\n  protected readonly shortcuts = inject(NgDocShortcutsService);\n  /** The chord that opens the search, as the reader's platform labels it. */\n  protected readonly chord = signal('⌘K');\n\n  private readonly document = inject(DOCUMENT);\n  private readonly browser = isPlatformBrowser(inject(PLATFORM_ID));\n  private dialogRef?: NgDocOverlayRef;\n\n  constructor() {\n    if (!this.searchEngine) {\n      throw new Error(`NgDoc: Search engine is not provided,\n\t\t\tplease check this article: https://ng-doc.com/docs/get-started/installation#4-add-the-providers\n\t\t\tto learn how to provide it.`);\n    }\n\n    const removeSlash = this.shortcuts.register({ key: '/', handler: () => this.open() });\n    const removeChord = this.shortcuts.register({\n      key: 'k',\n      chord: true,\n      handler: () => (this.dialogRef ? this.dialogRef.close() : this.open()),\n    });\n\n    inject(DestroyRef).onDestroy(() => {\n      removeSlash();\n      removeChord();\n      this.dialogRef?.close();\n    });\n\n    // The platform is known only in the browser; the server renders the macOS label.\n    afterNextRender(() => {\n      if (!/Mac|iPhone|iPad/i.test(this.document.defaultView?.navigator.platform ?? '')) {\n        this.chord.set('Ctrl K');\n      }\n    });\n  }\n\n  /**\n   * Opens the search palette. Focus returns to the element that had it when the palette closes.\n   * @param query - The text the search field starts with.\n   */\n  open(query: string = ''): void {\n    if (this.dialogRef || !this.browser) {\n      return;\n    }\n\n    const opener = this.document.activeElement;\n    const narrow = !!this.document.defaultView?.matchMedia?.('(max-width: 640px)').matches;\n    const data: NgDocCommandPaletteData = { query };\n    const dialogRef = this.dialog.open(new NgDocComponentContent(NgDocCommandPaletteComponent), {\n      hasBackdrop: true,\n      backdropClass: 'ng-doc-command-palette-backdrop',\n      panelClass: ['ng-doc-transparent-dialog', 'ng-doc-command-palette-pane'],\n      positionStrategy: this.dialog\n        .positionStrategy()\n        .centerHorizontally()\n        .top(narrow ? '8px' : '10vh'),\n      data,\n    });\n\n    this.dialogRef = dialogRef;\n    dialogRef.afterClose().subscribe(() => {\n      this.dialogRef = undefined;\n\n      if (opener instanceof HTMLElement && opener.isConnected && opener !== this.document.body) {\n        opener.focus({ preventScroll: true });\n      }\n    });\n  }\n}\n","<button\n  class=\"ng-doc-search-field\"\n  type=\"button\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-label]=\"'Search (' + chord() + ')'\"\n  aria-keyshortcuts=\"Meta+K Control+K\"\n  (click)=\"open()\">\n  <svg\n    width=\"16\"\n    height=\"16\"\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    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </svg>\n  <span class=\"ng-doc-search-placeholder\">Search docs…</span>\n  <kbd>{{ chord() }}</kbd>\n</button>\n<button\n  class=\"ng-doc-search-button\"\n  type=\"button\"\n  ng-doc-button-icon\n  size=\"large\"\n  [rounded]=\"false\"\n  aria-haspopup=\"dialog\"\n  [attr.aria-label]=\"'Search (' + chord() + ')'\"\n  aria-keyshortcuts=\"Meta+K Control+K\"\n  (click)=\"open()\">\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    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </svg>\n</button>\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-sidebar.mjs

@@ -1,93 +1,120 @@
 import { Location, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, Input, HostBinding, ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
+import { input, booleanAttribute, linkedSignal, inject, ChangeDetectionStrategy, Component, computed } from '@angular/core';
 import { NG_DOC_CONTEXT } from '@ng-doc/app/tokens';
-import { NgDocDotComponent, NgDocTextComponent, NgDocIconComponent, NgDocTextLeftDirective, NgDocRotatorDirective, NgDocExpanderComponent, NgDocTagComponent, NgDocExecutePipe, NgDocBindPipe } from '@ng-doc/ui-kit';
-import { NgDocRouteActiveDirective } from '@ng-doc/app/directives/route-active';
+import { NgDocExpanderComponent, NgDocExecutePipe, NgDocBindPipe } from '@ng-doc/ui-kit';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd, RouterLinkActive, RouterLink } from '@angular/router';
 import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { RouterLinkActive, RouterLink } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
+let nextId = 0;
+/**
+ * A category of the sidebar: a header row that expands and collapses the pages below it.
+ *
+ * An expandable category opens by itself when the reader navigates to one of its pages.
+ */
 class NgDocSidebarCategoryComponent {
     constructor() {
-        this.isRoot = false;
-        this.content = '';
-        this.expandable = true;
-        this.expanded = true;
-        this.location = inject(Location);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.location.onUrlChange(() => {
-            if (this.location.path().includes(this.category.route ?? '', 0)) {
+        /** The category. */
+        this.category = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
+        /** Whether the category sits at the top level of the sidebar. */
+        this.isRoot = input(false, { ...(ngDevMode ? { debugName: "isRoot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** The pages and categories inside the category. */
+        this.content = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        /** Whether the reader can collapse the category. A category that cannot is always open. */
+        this.expandable = input(true, { ...(ngDevMode ? { debugName: "expandable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the category starts open. */
+        this.expanded = input(true, { ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Whether the category is open: it starts from `expanded` and follows the reader. */
+        this.isExpanded = linkedSignal(() => this.expanded() || !this.expandable(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+        /** Id of the element that holds the pages, for the header's `aria-controls`. */
+        this.childrenId = `ng-doc-sidebar-category-${nextId++}`;
+        const router = inject(Router);
+        router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
+            .subscribe(() => {
+            const route = this.category().route ?? '';
+            if (router.url.includes(route)) {
                 this.expand();
             }
         });
     }
+    /** Opens the category if it is open, or closes it otherwise. */
     toggle() {
-        this.expanded ? this.collapse() : this.expand();
+        this.isExpanded() ? this.collapse() : this.expand();
     }
+    /** Opens the category. */
     expand() {
-        if (this.category?.expandable) {
-            this.expanded = true;
-            this.changeDetectorRef.markForCheck();
+        if (this.expandable()) {
+            this.isExpanded.set(true);
         }
     }
+    /** Closes the category, unless it cannot be collapsed. */
     collapse() {
-        if (this.category?.expandable) {
-            this.expanded = false;
-            this.changeDetectorRef.markForCheck();
+        if (this.expandable()) {
+            this.isExpanded.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSidebarCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocSidebarCategoryComponent, isStandalone: true, selector: "ng-doc-sidebar-category", inputs: { category: "category", isRoot: "isRoot", content: "content", expandable: "expandable", expanded: "expanded" }, host: { properties: { "attr.data-ng-doc-is-root": "this.isRoot", "attr.data-ng-doc-expandable": "this.expandable" } }, ngImport: i0, template: "<div class=\"ng-doc-sidebar-category-wrapper\">\n  <button class=\"ng-doc-sidebar-category-button\" (click)=\"toggle()\">\n    <div class=\"ng-doc-sidebar-category\" [ngDocRouteActive]=\"category.route\" activeClass=\"active\">\n      @if (!expandable) {\n        <ng-doc-dot></ng-doc-dot>\n      }\n      <span ng-doc-text>\n        @if (category.expandable) {\n          <ng-doc-icon icon=\"chevron-right\" [ngDocRotator]=\"expanded\" ngDocTextLeft> </ng-doc-icon>\n        }\n        {{ category.title }}\n      </span>\n    </div>\n    <!--\t\t<div ng-doc-text color=\"muted\" size=\"small\">Some description</div>-->\n  </button>\n  <ng-doc-expander [expanded]=\"expanded\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n  <ng-template #contentTemplate>\n    <div class=\"ng-doc-sidebar-category-children\">\n      <!--We wrap content via ng-template to save state of the child components -->\n      <ng-content></ng-content>\n      <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;--ng-doc-sidebar-category-indent: calc( var(--ng-doc-sidebar-item-indent) + calc(var(--ng-doc-base-gutter) * 2) );--ng-doc-icon-color: var(--ng-doc-text)}:host[data-ng-doc-expandable=false] .ng-doc-sidebar-category-button{padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-base-gutter) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent)}:host[data-ng-doc-expandable=true] .ng-doc-sidebar-category-button{padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-base-gutter) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent);cursor:pointer;border-radius:var(--ng-doc-base-gutter)}:host[data-ng-doc-expandable=true] .ng-doc-sidebar-category-button:hover{background-color:var(--ng-doc-base-1)}:host .ng-doc-sidebar-category-button{display:flex;flex-direction:column;border:unset;background-color:unset;width:100%}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category{display:flex;align-items:center;--ng-doc-dot-background: var(--ng-doc-base-4);--ng-doc-text: var(--ng-doc-heading-color)}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category ng-doc-dot{margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category.active{--ng-doc-font-weight: 600;--ng-doc-dot-background: var(--ng-doc-primary)}:host .ng-doc-sidebar-category-button span[ng-doc-text]{flex-shrink:0;margin-right:var(--ng-doc-base-gutter)}:host .ng-doc-sidebar-category-children{padding-bottom:calc(var(--ng-doc-base-gutter) * 2);--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-category-indent)}\n"], dependencies: [{ kind: "directive", type: NgDocRouteActiveDirective, selector: "[ngDocRouteActive]", inputs: ["ngDocRouteActive", "activeClass", "matchOptions"] }, { kind: "component", type: NgDocDotComponent, selector: "ng-doc-dot", inputs: ["color", "size"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: NgDocTextLeftDirective, selector: "[ngDocTextLeft]" }, { kind: "directive", type: NgDocRotatorDirective, selector: "[ngDocRotator]", inputs: ["ngDocRotator", "from", "to"] }, { kind: "component", type: NgDocExpanderComponent, selector: "ng-doc-expander", inputs: ["expanded", "content", "collapseMod"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocSidebarCategoryComponent, isStandalone: true, selector: "ng-doc-sidebar-category", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, isRoot: { classPropertyName: "isRoot", publicName: "isRoot", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-is-root": "isRoot()", "attr.data-ng-doc-expandable": "expandable()", "attr.data-ng-doc-expanded": "isExpanded()" } }, ngImport: i0, template: "@if (expandable()) {\n  <button\n    type=\"button\"\n    class=\"ng-doc-sidebar-category-button\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"childrenId\"\n    (click)=\"toggle()\">\n    <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n    <svg\n      class=\"ng-doc-sidebar-category-chevron\"\n      width=\"16\"\n      height=\"16\"\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=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n} @else {\n  <div class=\"ng-doc-sidebar-category-button\">\n    <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n  </div>\n}\n<ng-doc-expander [expanded]=\"isExpanded()\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n<ng-template #contentTemplate>\n  <!-- The content comes through a template, so the child components keep their state. -->\n  <div class=\"ng-doc-sidebar-category-children\" [id]=\"childrenId\">\n    <ng-content></ng-content>\n    <ng-container *polymorpheusOutlet=\"content() as text\">{{ text }}</ng-container>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;--ng-doc-sidebar-category-indent: calc(var(--ng-doc-sidebar-item-indent) + var(--ng-doc-space-3))}.ng-doc-sidebar-category-button{display:flex;align-items:center;gap:var(--ng-doc-space-2);width:100%;min-height:32px;padding:var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-space-2) var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-sidebar-item-indent);border:0;border-radius:var(--ng-doc-radius-md);background:none;color:var(--ng-doc-heading-color);font:inherit;font-weight:600;text-align:left}button.ng-doc-sidebar-category-button{cursor:pointer;transition:background var(--ng-doc-transition)}button.ng-doc-sidebar-category-button:hover{background:var(--ng-doc-hover-background)}button.ng-doc-sidebar-category-button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}.ng-doc-sidebar-category-title{min-width:0;overflow-wrap:anywhere}.ng-doc-sidebar-category-chevron{flex:none;margin-left:auto;color:var(--ng-doc-text-muted);transform:rotate(-90deg);transition:transform var(--ng-doc-transition) var(--ng-doc-easing)}[aria-expanded=true]>.ng-doc-sidebar-category-chevron{transform:none}.ng-doc-sidebar-category-children{display:grid;gap:1px;padding-top:2px;--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-category-indent)}@media(prefers-reduced-motion:reduce){.ng-doc-sidebar-category-chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: NgDocExpanderComponent, selector: "ng-doc-expander", inputs: ["expanded", "content", "collapseMod"], outputs: ["expandedChange"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSidebarCategoryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-sidebar-category', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgDocRouteActiveDirective,
-                        NgDocDotComponent,
-                        NgDocTextComponent,
-                        NgDocIconComponent,
-                        NgDocTextLeftDirective,
-                        NgDocRotatorDirective,
-                        NgDocExpanderComponent,
-                        PolymorpheusOutlet,
-                    ], template: "<div class=\"ng-doc-sidebar-category-wrapper\">\n  <button class=\"ng-doc-sidebar-category-button\" (click)=\"toggle()\">\n    <div class=\"ng-doc-sidebar-category\" [ngDocRouteActive]=\"category.route\" activeClass=\"active\">\n      @if (!expandable) {\n        <ng-doc-dot></ng-doc-dot>\n      }\n      <span ng-doc-text>\n        @if (category.expandable) {\n          <ng-doc-icon icon=\"chevron-right\" [ngDocRotator]=\"expanded\" ngDocTextLeft> </ng-doc-icon>\n        }\n        {{ category.title }}\n      </span>\n    </div>\n    <!--\t\t<div ng-doc-text color=\"muted\" size=\"small\">Some description</div>-->\n  </button>\n  <ng-doc-expander [expanded]=\"expanded\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n  <ng-template #contentTemplate>\n    <div class=\"ng-doc-sidebar-category-children\">\n      <!--We wrap content via ng-template to save state of the child components -->\n      <ng-content></ng-content>\n      <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:flex;flex-direction:column;--ng-doc-sidebar-category-indent: calc( var(--ng-doc-sidebar-item-indent) + calc(var(--ng-doc-base-gutter) * 2) );--ng-doc-icon-color: var(--ng-doc-text)}:host[data-ng-doc-expandable=false] .ng-doc-sidebar-category-button{padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-base-gutter) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent)}:host[data-ng-doc-expandable=true] .ng-doc-sidebar-category-button{padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-base-gutter) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent);cursor:pointer;border-radius:var(--ng-doc-base-gutter)}:host[data-ng-doc-expandable=true] .ng-doc-sidebar-category-button:hover{background-color:var(--ng-doc-base-1)}:host .ng-doc-sidebar-category-button{display:flex;flex-direction:column;border:unset;background-color:unset;width:100%}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category{display:flex;align-items:center;--ng-doc-dot-background: var(--ng-doc-base-4);--ng-doc-text: var(--ng-doc-heading-color)}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category ng-doc-dot{margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-sidebar-category-button .ng-doc-sidebar-category.active{--ng-doc-font-weight: 600;--ng-doc-dot-background: var(--ng-doc-primary)}:host .ng-doc-sidebar-category-button span[ng-doc-text]{flex-shrink:0;margin-right:var(--ng-doc-base-gutter)}:host .ng-doc-sidebar-category-children{padding-bottom:calc(var(--ng-doc-base-gutter) * 2);--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-category-indent)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { category: [{
-                type: Input,
-                args: [{ required: true }]
-            }], isRoot: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-is-root']
-            }], content: [{
-                type: Input
-            }], expandable: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-expandable']
-            }], expanded: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ng-doc-sidebar-category', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocExpanderComponent, PolymorpheusOutlet], host: {
+                        '[attr.data-ng-doc-is-root]': 'isRoot()',
+                        '[attr.data-ng-doc-expandable]': 'expandable()',
+                        '[attr.data-ng-doc-expanded]': 'isExpanded()',
+                    }, template: "@if (expandable()) {\n  <button\n    type=\"button\"\n    class=\"ng-doc-sidebar-category-button\"\n    [attr.aria-expanded]=\"isExpanded()\"\n    [attr.aria-controls]=\"childrenId\"\n    (click)=\"toggle()\">\n    <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n    <svg\n      class=\"ng-doc-sidebar-category-chevron\"\n      width=\"16\"\n      height=\"16\"\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=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n} @else {\n  <div class=\"ng-doc-sidebar-category-button\">\n    <span class=\"ng-doc-sidebar-category-title\">{{ category().title }}</span>\n  </div>\n}\n<ng-doc-expander [expanded]=\"isExpanded()\" [content]=\"contentTemplate\" collapseMod=\"hide\" />\n<ng-template #contentTemplate>\n  <!-- The content comes through a template, so the child components keep their state. -->\n  <div class=\"ng-doc-sidebar-category-children\" [id]=\"childrenId\">\n    <ng-content></ng-content>\n    <ng-container *polymorpheusOutlet=\"content() as text\">{{ text }}</ng-container>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;--ng-doc-sidebar-category-indent: calc(var(--ng-doc-sidebar-item-indent) + var(--ng-doc-space-3))}.ng-doc-sidebar-category-button{display:flex;align-items:center;gap:var(--ng-doc-space-2);width:100%;min-height:32px;padding:var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-space-2) var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-sidebar-item-indent);border:0;border-radius:var(--ng-doc-radius-md);background:none;color:var(--ng-doc-heading-color);font:inherit;font-weight:600;text-align:left}button.ng-doc-sidebar-category-button{cursor:pointer;transition:background var(--ng-doc-transition)}button.ng-doc-sidebar-category-button:hover{background:var(--ng-doc-hover-background)}button.ng-doc-sidebar-category-button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}.ng-doc-sidebar-category-title{min-width:0;overflow-wrap:anywhere}.ng-doc-sidebar-category-chevron{flex:none;margin-left:auto;color:var(--ng-doc-text-muted);transform:rotate(-90deg);transition:transform var(--ng-doc-transition) var(--ng-doc-easing)}[aria-expanded=true]>.ng-doc-sidebar-category-chevron{transform:none}.ng-doc-sidebar-category-children{display:grid;gap:1px;padding-top:2px;--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-category-indent)}@media(prefers-reduced-motion:reduce){.ng-doc-sidebar-category-chevron{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], isRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRoot", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }] } });
 
+/**
+ * A page link in the sidebar, with the status badges of the page.
+ */
 class NgDocSidebarItemComponent {
     constructor() {
-        this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+        /** The page. */
+        this.item = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+        /** Whether the page sits at the top level of the sidebar, beside the categories. */
+        this.isRoot = input(false, { ...(ngDevMode ? { debugName: "isRoot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The badges of the page: one per JSDoc status tag, in the tag's colour (green without one)
+         * and with its text in sentence case.
+         */
         this.statuses = computed(() => {
             const statuses = this.item().metadata?.tags['status'] ?? [];
             return statuses.map((status) => {
-                const [type, text] = status.split(/\s+(.+)/);
-                return { type: type.replace(/^:/, ''), text };
+                // The tag reads `:<colour> <text>`; a tag without the colour is all text.
+                const [type, text = ''] = status.startsWith(':')
+                    ? status.slice(1).split(/\s+(.+)/)
+                    : ['', status];
+                return { type: (type || 'success'), text: sentenceCase(text) };
             });
-        }, ...(ngDevMode ? [{ debugName: "statuses" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statuses" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocSidebarItemComponent, isStandalone: true, selector: "ng-doc-sidebar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<a class=\"ng-doc-sidebar-link\" [routerLink]=\"[item().route]\" routerLinkActive=\"active\">\n  <ng-doc-dot></ng-doc-dot>\n  <span ng-doc-text [absoluteContent]=\"true\">\n    {{ item().title }}\n    @for (status of statuses(); track status) {\n      <ng-doc-tag size=\"small\" [color]=\"status.type || 'success'\" mod=\"light\">{{\n        status.text\n      }}</ng-doc-tag>\n    }\n  </span>\n</a>\n", styles: [":host{display:block}.ng-doc-sidebar-link{font-family:var(--ng-doc-heading-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;align-items:center;gap:var(--ng-doc-base-gutter);padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-horizontal-padding) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent);text-decoration:inherit;cursor:pointer;border-radius:var(--ng-doc-base-gutter);--ng-doc-icon-color: var(--ng-doc-text);--ng-doc-dot-background: var(--ng-doc-base-4);--ng-doc-font-weight: 400}.ng-doc-sidebar-link ng-doc-dot{margin-right:var(--ng-doc-base-gutter);z-index:1}.ng-doc-sidebar-link:hover:not(.active){background:var(--ng-doc-base-1)}.ng-doc-sidebar-link.active{background:color-mix(in srgb,var(--ng-doc-primary) 7%,transparent);--ng-doc-text: var(--ng-doc-primary);--ng-doc-dot-background: var(--ng-doc-primary)}.ng-doc-sidebar-link.active ng-doc-dot{animation:animation .5s ease-out}@keyframes animation{0%{transform:scale(1)}50%{transform:scale(2)}to{transform:scale(1)}}.ng-doc-sidebar-link ng-doc-tag{vertical-align:middle;margin-left:var(--ng-doc-base-gutter);font-weight:600}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: NgDocDotComponent, selector: "ng-doc-dot", inputs: ["color", "size"] }, { kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "component", type: NgDocTagComponent, selector: "ng-doc-tag", inputs: ["color", "size", "mod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocSidebarItemComponent, isStandalone: true, selector: "ng-doc-sidebar-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, isRoot: { classPropertyName: "isRoot", publicName: "isRoot", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-is-root": "isRoot()" } }, ngImport: i0, template: "<a\n  class=\"ng-doc-sidebar-link\"\n  [routerLink]=\"[item().route]\"\n  routerLinkActive=\"active\"\n  ariaCurrentWhenActive=\"page\">\n  <span class=\"ng-doc-sidebar-link-title\">{{ item().title }}</span>\n  @for (status of statuses(); track $index) {\n    <span class=\"ng-doc-sidebar-status\" [attr.data-ng-doc-color]=\"status.type\">{{\n      status.text\n    }}</span>\n  }\n</a>\n", styles: [":host{display:block}.ng-doc-sidebar-link{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:32px;padding:var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-space-2) var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-sidebar-item-indent);border-radius:var(--ng-doc-radius-md);color:var(--ng-doc-text);font-weight:400;text-decoration:none;transition:background var(--ng-doc-transition),color var(--ng-doc-transition)}.ng-doc-sidebar-link:hover{background:var(--ng-doc-hover-background);color:var(--ng-doc-heading-color)}.ng-doc-sidebar-link.active{background:var(--ng-doc-primary-soft);color:var(--ng-doc-primary-strong);font-weight:600}.ng-doc-sidebar-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}:host([data-ng-doc-is-root=true]) .ng-doc-sidebar-link:not(.active){color:var(--ng-doc-heading-color);font-weight:600}.ng-doc-sidebar-link-title{min-width:0;overflow-wrap:anywhere}.ng-doc-sidebar-status{--_status-hue: var(--ng-doc-success);display:inline-flex;flex:none;align-items:center;height:18px;margin-left:auto;padding:0 6px;border-radius:var(--ng-doc-radius-full);color:color-mix(in oklab,var(--_status-hue) var(--ng-doc-mix-strong),var(--ng-doc-heading-color));background:color-mix(in oklab,var(--_status-hue) var(--ng-doc-mix-chip),var(--ng-doc-background));font-size:11px;line-height:1;font-weight:500;white-space:nowrap}.ng-doc-sidebar-status+.ng-doc-sidebar-status{margin-left:var(--ng-doc-space-1)}.ng-doc-sidebar-status[data-ng-doc-color=primary]{--_status-hue: var(--ng-doc-primary)}.ng-doc-sidebar-status[data-ng-doc-color=info]{--_status-hue: var(--ng-doc-info)}.ng-doc-sidebar-status[data-ng-doc-color=warning]{--_status-hue: var(--ng-doc-warning)}.ng-doc-sidebar-status[data-ng-doc-color=alert]{--_status-hue: var(--ng-doc-alert)}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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: "21.0.6", ngImport: i0, type: NgDocSidebarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-sidebar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink, NgDocDotComponent, NgDocTextComponent, NgDocTagComponent], template: "<a class=\"ng-doc-sidebar-link\" [routerLink]=\"[item().route]\" routerLinkActive=\"active\">\n  <ng-doc-dot></ng-doc-dot>\n  <span ng-doc-text [absoluteContent]=\"true\">\n    {{ item().title }}\n    @for (status of statuses(); track status) {\n      <ng-doc-tag size=\"small\" [color]=\"status.type || 'success'\" mod=\"light\">{{\n        status.text\n      }}</ng-doc-tag>\n    }\n  </span>\n</a>\n", styles: [":host{display:block}.ng-doc-sidebar-link{font-family:var(--ng-doc-heading-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;align-items:center;gap:var(--ng-doc-base-gutter);padding:var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-horizontal-padding) var(--ng-doc-sidebar-vetical-padding) var(--ng-doc-sidebar-item-indent);text-decoration:inherit;cursor:pointer;border-radius:var(--ng-doc-base-gutter);--ng-doc-icon-color: var(--ng-doc-text);--ng-doc-dot-background: var(--ng-doc-base-4);--ng-doc-font-weight: 400}.ng-doc-sidebar-link ng-doc-dot{margin-right:var(--ng-doc-base-gutter);z-index:1}.ng-doc-sidebar-link:hover:not(.active){background:var(--ng-doc-base-1)}.ng-doc-sidebar-link.active{background:color-mix(in srgb,var(--ng-doc-primary) 7%,transparent);--ng-doc-text: var(--ng-doc-primary);--ng-doc-dot-background: var(--ng-doc-primary)}.ng-doc-sidebar-link.active ng-doc-dot{animation:animation .5s ease-out}@keyframes animation{0%{transform:scale(1)}50%{transform:scale(2)}to{transform:scale(1)}}.ng-doc-sidebar-link ng-doc-tag{vertical-align:middle;margin-left:var(--ng-doc-base-gutter);font-weight:600}\n"] }]
-        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
+            args: [{ selector: 'ng-doc-sidebar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLinkActive, RouterLink], host: {
+                        '[attr.data-ng-doc-is-root]': 'isRoot()',
+                    }, template: "<a\n  class=\"ng-doc-sidebar-link\"\n  [routerLink]=\"[item().route]\"\n  routerLinkActive=\"active\"\n  ariaCurrentWhenActive=\"page\">\n  <span class=\"ng-doc-sidebar-link-title\">{{ item().title }}</span>\n  @for (status of statuses(); track $index) {\n    <span class=\"ng-doc-sidebar-status\" [attr.data-ng-doc-color]=\"status.type\">{{\n      status.text\n    }}</span>\n  }\n</a>\n", styles: [":host{display:block}.ng-doc-sidebar-link{display:flex;align-items:center;gap:var(--ng-doc-space-2);min-height:32px;padding:var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-space-2) var(--ng-doc-sidebar-vertical-padding, var(--ng-doc-sidebar-vetical-padding)) var(--ng-doc-sidebar-item-indent);border-radius:var(--ng-doc-radius-md);color:var(--ng-doc-text);font-weight:400;text-decoration:none;transition:background var(--ng-doc-transition),color var(--ng-doc-transition)}.ng-doc-sidebar-link:hover{background:var(--ng-doc-hover-background);color:var(--ng-doc-heading-color)}.ng-doc-sidebar-link.active{background:var(--ng-doc-primary-soft);color:var(--ng-doc-primary-strong);font-weight:600}.ng-doc-sidebar-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}:host([data-ng-doc-is-root=true]) .ng-doc-sidebar-link:not(.active){color:var(--ng-doc-heading-color);font-weight:600}.ng-doc-sidebar-link-title{min-width:0;overflow-wrap:anywhere}.ng-doc-sidebar-status{--_status-hue: var(--ng-doc-success);display:inline-flex;flex:none;align-items:center;height:18px;margin-left:auto;padding:0 6px;border-radius:var(--ng-doc-radius-full);color:color-mix(in oklab,var(--_status-hue) var(--ng-doc-mix-strong),var(--ng-doc-heading-color));background:color-mix(in oklab,var(--_status-hue) var(--ng-doc-mix-chip),var(--ng-doc-background));font-size:11px;line-height:1;font-weight:500;white-space:nowrap}.ng-doc-sidebar-status+.ng-doc-sidebar-status{margin-left:var(--ng-doc-space-1)}.ng-doc-sidebar-status[data-ng-doc-color=primary]{--_status-hue: var(--ng-doc-primary)}.ng-doc-sidebar-status[data-ng-doc-color=info]{--_status-hue: var(--ng-doc-info)}.ng-doc-sidebar-status[data-ng-doc-color=warning]{--_status-hue: var(--ng-doc-warning)}.ng-doc-sidebar-status[data-ng-doc-color=alert]{--_status-hue: var(--ng-doc-alert)}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isRoot: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRoot", required: false }] }] } });
+/**
+ * Writes a badge text in sentence case ("NEW STYLES" becomes "New styles").
+ * @param text - The text of the status tag.
+ * @returns The text in sentence case.
+ */
+function sentenceCase(text) {
+    const lower = text.trim().toLowerCase();
+    return lower.charAt(0).toUpperCase() + lower.slice(1);
+}
 
 class NgDocSidebarComponent {
     constructor() {
@@ -100,10 +127,10 @@ class NgDocSidebarComponent {
     matchRoute(route) {
         return this.location.path().includes(route ?? '', 0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocSidebarComponent, isStandalone: true, selector: "ng-doc-sidebar", ngImport: i0, template: "<div class=\"ng-doc-side-bar-wrapper\">\n  @for (item of getNavigation | bind: this | execute; track item) {\n    <ng-container\n      *ngTemplateOutlet=\"sidebarTemplate; context: { item: item, root: true }\"></ng-container>\n  }\n\n  <ng-template let-item=\"item\" let-root=\"root\" #sidebarTemplate>\n    @if (item.children?.length) {\n      @if (!item.hidden) {\n        <ng-doc-sidebar-category\n          [category]=\"item\"\n          [expandable]=\"!!item?.expandable\"\n          [expanded]=\"\n            !!item?.expanded || !item?.expandable || (matchRoute | bind: this | execute: item.route)\n          \"\n          [isRoot]=\"!!root\"\n          [content]=\"categoryContent\">\n        </ng-doc-sidebar-category>\n      }\n      <ng-template #categoryContent>\n        @for (child of getNavigation | bind: this | execute: item; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              sidebarTemplate;\n              context: { item: child, root: false }\n            \"></ng-container>\n        }\n      </ng-template>\n    } @else {\n      @if (!item.hidden) {\n        <ng-doc-sidebar-item [item]=\"item\"></ng-doc-sidebar-item>\n      }\n    }\n  </ng-template>\n</div>\n", styles: [":host{display:block;height:calc(100vh - var(--ng-doc-navbar-height));width:100%;overflow:hidden;padding:var(--ng-doc-sidebar-padding) 0;background:var(--ng-doc-sidebar-background);box-shadow:var(--ng-doc-sidebar-shadow);--ng-doc-sidebar-category-indent: var(--ng-doc-sidebar-horizontal-padding);--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-horizontal-padding)}:host .ng-doc-side-bar-wrapper{position:relative;overflow:auto;max-height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocSidebarCategoryComponent, selector: "ng-doc-sidebar-category", inputs: ["category", "isRoot", "content", "expandable", "expanded"] }, { kind: "component", type: NgDocSidebarItemComponent, selector: "ng-doc-sidebar-item", inputs: ["item"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocSidebarComponent, isStandalone: true, selector: "ng-doc-sidebar", ngImport: i0, template: "<nav class=\"ng-doc-side-bar-wrapper\" aria-label=\"Documentation\">\n  @for (item of getNavigation | bind: this | execute; track item) {\n    <ng-container\n      *ngTemplateOutlet=\"sidebarTemplate; context: { item: item, root: true }\"></ng-container>\n  }\n\n  <ng-template let-item=\"item\" let-root=\"root\" #sidebarTemplate>\n    @if (item.children?.length) {\n      @if (!item.hidden) {\n        <ng-doc-sidebar-category\n          [category]=\"item\"\n          [expandable]=\"!!item?.expandable\"\n          [expanded]=\"\n            !!item?.expanded || !item?.expandable || (matchRoute | bind: this | execute: item.route)\n          \"\n          [isRoot]=\"!!root\"\n          [content]=\"categoryContent\">\n        </ng-doc-sidebar-category>\n      }\n      <ng-template #categoryContent>\n        @for (child of getNavigation | bind: this | execute: item; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              sidebarTemplate;\n              context: { item: child, root: false }\n            \"></ng-container>\n        }\n      </ng-template>\n    } @else {\n      @if (!item.hidden) {\n        <ng-doc-sidebar-item [item]=\"item\" [isRoot]=\"!!root\"></ng-doc-sidebar-item>\n      }\n    }\n  </ng-template>\n</nav>\n", styles: [":host{display:block;height:calc(100vh - var(--ng-doc-navbar-height));width:100%;overflow:hidden;background:var(--ng-doc-sidebar-background);border-right:1px solid var(--ng-doc-border-color);box-shadow:var(--ng-doc-sidebar-shadow);font-family:var(--ng-doc-font-family);font-size:var(--ng-doc-text-sm-size);line-height:20px;--ng-doc-sidebar-item-indent: var(--ng-doc-space-2)}.ng-doc-side-bar-wrapper{position:relative;overflow:auto;max-height:100%;padding:calc(var(--ng-doc-sidebar-padding) + var(--ng-doc-space-1)) calc(var(--ng-doc-sidebar-horizontal-padding) / 2) calc(var(--ng-doc-sidebar-padding) * 2.5)}.ng-doc-side-bar-wrapper>*+*,ng-doc-sidebar-category+ng-doc-sidebar-category{margin-top:2px}.ng-doc-side-bar-wrapper ng-doc-sidebar-category[data-ng-doc-expanded=true]+*,.ng-doc-side-bar-wrapper *+ng-doc-sidebar-category[data-ng-doc-expanded=true]{margin-top:var(--ng-doc-space-2)}.ng-doc-side-bar-wrapper ng-doc-sidebar-category ng-doc-sidebar-item+ng-doc-sidebar-item{margin-top:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocSidebarCategoryComponent, selector: "ng-doc-sidebar-category", inputs: ["category", "isRoot", "content", "expandable", "expanded"] }, { kind: "component", type: NgDocSidebarItemComponent, selector: "ng-doc-sidebar-item", inputs: ["item", "isRoot"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }, { kind: "pipe", type: NgDocBindPipe, name: "bind" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
@@ -111,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         NgDocSidebarItemComponent,
                         NgDocExecutePipe,
                         NgDocBindPipe,
-                    ], template: "<div class=\"ng-doc-side-bar-wrapper\">\n  @for (item of getNavigation | bind: this | execute; track item) {\n    <ng-container\n      *ngTemplateOutlet=\"sidebarTemplate; context: { item: item, root: true }\"></ng-container>\n  }\n\n  <ng-template let-item=\"item\" let-root=\"root\" #sidebarTemplate>\n    @if (item.children?.length) {\n      @if (!item.hidden) {\n        <ng-doc-sidebar-category\n          [category]=\"item\"\n          [expandable]=\"!!item?.expandable\"\n          [expanded]=\"\n            !!item?.expanded || !item?.expandable || (matchRoute | bind: this | execute: item.route)\n          \"\n          [isRoot]=\"!!root\"\n          [content]=\"categoryContent\">\n        </ng-doc-sidebar-category>\n      }\n      <ng-template #categoryContent>\n        @for (child of getNavigation | bind: this | execute: item; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              sidebarTemplate;\n              context: { item: child, root: false }\n            \"></ng-container>\n        }\n      </ng-template>\n    } @else {\n      @if (!item.hidden) {\n        <ng-doc-sidebar-item [item]=\"item\"></ng-doc-sidebar-item>\n      }\n    }\n  </ng-template>\n</div>\n", styles: [":host{display:block;height:calc(100vh - var(--ng-doc-navbar-height));width:100%;overflow:hidden;padding:var(--ng-doc-sidebar-padding) 0;background:var(--ng-doc-sidebar-background);box-shadow:var(--ng-doc-sidebar-shadow);--ng-doc-sidebar-category-indent: var(--ng-doc-sidebar-horizontal-padding);--ng-doc-sidebar-item-indent: var(--ng-doc-sidebar-horizontal-padding)}:host .ng-doc-side-bar-wrapper{position:relative;overflow:auto;max-height:100%}\n"] }]
+                    ], template: "<nav class=\"ng-doc-side-bar-wrapper\" aria-label=\"Documentation\">\n  @for (item of getNavigation | bind: this | execute; track item) {\n    <ng-container\n      *ngTemplateOutlet=\"sidebarTemplate; context: { item: item, root: true }\"></ng-container>\n  }\n\n  <ng-template let-item=\"item\" let-root=\"root\" #sidebarTemplate>\n    @if (item.children?.length) {\n      @if (!item.hidden) {\n        <ng-doc-sidebar-category\n          [category]=\"item\"\n          [expandable]=\"!!item?.expandable\"\n          [expanded]=\"\n            !!item?.expanded || !item?.expandable || (matchRoute | bind: this | execute: item.route)\n          \"\n          [isRoot]=\"!!root\"\n          [content]=\"categoryContent\">\n        </ng-doc-sidebar-category>\n      }\n      <ng-template #categoryContent>\n        @for (child of getNavigation | bind: this | execute: item; track child) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              sidebarTemplate;\n              context: { item: child, root: false }\n            \"></ng-container>\n        }\n      </ng-template>\n    } @else {\n      @if (!item.hidden) {\n        <ng-doc-sidebar-item [item]=\"item\" [isRoot]=\"!!root\"></ng-doc-sidebar-item>\n      }\n    }\n  </ng-template>\n</nav>\n", styles: [":host{display:block;height:calc(100vh - var(--ng-doc-navbar-height));width:100%;overflow:hidden;background:var(--ng-doc-sidebar-background);border-right:1px solid var(--ng-doc-border-color);box-shadow:var(--ng-doc-sidebar-shadow);font-family:var(--ng-doc-font-family);font-size:var(--ng-doc-text-sm-size);line-height:20px;--ng-doc-sidebar-item-indent: var(--ng-doc-space-2)}.ng-doc-side-bar-wrapper{position:relative;overflow:auto;max-height:100%;padding:calc(var(--ng-doc-sidebar-padding) + var(--ng-doc-space-1)) calc(var(--ng-doc-sidebar-horizontal-padding) / 2) calc(var(--ng-doc-sidebar-padding) * 2.5)}.ng-doc-side-bar-wrapper>*+*,ng-doc-sidebar-category+ng-doc-sidebar-category{margin-top:2px}.ng-doc-side-bar-wrapper ng-doc-sidebar-category[data-ng-doc-expanded=true]+*,.ng-doc-side-bar-wrapper *+ng-doc-sidebar-category[data-ng-doc-expanded=true]{margin-top:var(--ng-doc-space-2)}.ng-doc-side-bar-wrapper ng-doc-sidebar-category ng-doc-sidebar-item+ng-doc-sidebar-item{margin-top:0}\n"] }]
         }] });
 
 /**