@ng-doc/app 22.1.0 → 22.2.0

package/fesm2022/ng-doc-app-components-command-palette.mjs

@@ -8,16 +8,18 @@ import { NgDocSearchEngine } from '@ng-doc/app/classes/search-engine';
 import { NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';
 import { NgDocApiListIndexService } from '@ng-doc/app/services';
 import { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';
+import { NG_DOC_TEXTS } from '@ng-doc/app/tokens';
 import { NG_DOC_DIALOG_DATA, NgDocSelectionComponent, NgDocSelectionHostDirective, NgDocSelectionOriginDirective, NgDocSpinnerComponent } from '@ng-doc/ui-kit';
 import { NgDocOverlayRef } from '@ng-doc/ui-kit/classes';
 import { timer, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 
+/** The scopes in the order of their tabs, with the text of their label. */
 const SCOPES = [
-    { id: 'all', label: 'All' },
-    { id: 'guides', label: 'Guides' },
-    { id: 'api', label: 'API' },
-    { id: 'actions', label: 'Actions' },
+    { id: 'all', text: 'scopeAll' },
+    { id: 'guides', text: 'scopeGuides' },
+    { id: 'api', text: 'scopeApi' },
+    { id: 'actions', text: 'scopeActions' },
 ];
 /**
  * How many declarations whose name starts with the query rank above the guides, and the shortest
@@ -35,7 +37,8 @@ const SEARCH_DEBOUNCE = 120;
  */
 class NgDocCommandPaletteComponent {
     constructor() {
-        this.scopes = SCOPES;
+        this.texts = inject(NG_DOC_TEXTS).searchPalette;
+        this.scopes = SCOPES.map(({ id, text }) => ({ id, label: this.texts[text] }));
         this.shortcuts = inject(NgDocShortcutsService);
         this.data = inject(NG_DOC_DIALOG_DATA, {
             optional: true,
@@ -74,20 +77,20 @@ class NgDocCommandPaletteComponent {
         ...(ngDevMode ? [{ debugName: "symbolsByRoute" }] : /* istanbul ignore next */ []));
         this.actions = [
             {
-                name: () => 'Toggle dark mode',
-                keywords: 'theme dark light mode',
+                name: () => this.texts.actionToggleTheme,
+                keywords: this.texts.actionToggleThemeKeywords,
                 keys: ['T'],
                 run: () => this.shortcuts.run('t'),
             },
             {
-                name: () => 'Copy link to this page',
-                keywords: 'copy link url share',
+                name: () => this.texts.actionCopyLink,
+                keywords: this.texts.actionCopyLinkKeywords,
                 keys: ['L'],
                 run: () => this.shortcuts.run('l'),
             },
             {
-                name: () => this.shortcuts.enabled() ? 'Turn off single-key shortcuts' : 'Turn on single-key shortcuts',
-                keywords: 'keyboard shortcuts keys single',
+                name: () => this.shortcuts.enabled() ? this.texts.actionShortcutsOff : this.texts.actionShortcutsOn,
+                keywords: this.texts.actionShortcutsKeywords,
                 keys: [],
                 keepOpen: true,
                 run: () => this.shortcuts.toggle(),
@@ -104,24 +107,29 @@ class NgDocCommandPaletteComponent {
             if (scope === 'all' && query) {
                 const pinned = apiRows.filter((row) => row.pinned).slice(0, PINNED_LIMIT);
                 apiRows = apiRows.filter((row) => !pinned.includes(row));
-                sections.push({ key: 'top', type: 'api', title: 'Top matches', rows: pinned });
+                sections.push({
+                    key: 'top',
+                    type: 'api',
+                    title: this.texts.sectionTopMatches,
+                    rows: pinned,
+                });
             }
             if ((scope === 'all' || scope === 'guides') && query) {
                 sections.push({
                     key: 'guide',
                     type: 'guide',
-                    title: 'Guides',
+                    title: this.texts.sectionGuides,
                     rows: this.guideRows(query, scope === 'guides'),
                 });
             }
             if (apiRows.length) {
-                sections.push({ key: 'api', type: 'api', title: 'API', rows: apiRows });
+                sections.push({ key: 'api', type: 'api', title: this.texts.sectionApi, rows: apiRows });
             }
             if (scope === 'all' || scope === 'actions') {
                 sections.push({
                     key: 'action',
                     type: 'action',
-                    title: 'Actions',
+                    title: this.texts.sectionActions,
                     rows: this.actionRows(query),
                 });
             }
@@ -158,31 +166,31 @@ class NgDocCommandPaletteComponent {
         this.emptyMessage = computed(() => {
             const query = this.query();
             if (query) {
-                return `No results for “${query}”`;
+                return this.texts.noResults({ query });
             }
             return this.scope() === 'api'
-                ? 'Type to search the API.'
+                ? this.texts.typeToSearchApi
                 : this.scope() === 'guides'
-                    ? 'Type to search the guides.'
-                    : 'Type to search.';
+                    ? this.texts.typeToSearchGuides
+                    : this.texts.typeToSearch;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
         /** What the status region announces: the scope, a running search, no results or a failure. */
         this.status = computed(() => {
-            const scope = SCOPES.find(({ id }) => id === this.scope())?.label ?? '';
+            const scope = this.scopes.find(({ id }) => id === this.scope())?.label ?? '';
             const count = this.rows().filter((row) => row.type !== 'action').length;
             if (this.failed()) {
-                return 'Search failed.';
+                return this.texts.failedStatus;
             }
             if (this.searching()) {
-                return 'Searching…';
+                return this.texts.searching;
             }
             if (!this.query()) {
-                return `${scope} scope.`;
+                return this.texts.statusScope({ scope });
             }
             return count
-                ? `${scope} scope: ${count} ${count === 1 ? 'result' : 'results'}.`
-                : `${scope} scope: no results for “${this.query()}”.`;
+                ? this.texts.statusResults({ scope, count })
+                : this.texts.statusNoResults({ scope, query: this.query() });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
         // Increments when the selection moves by keyboard, so only those moves scroll the list.
@@ -434,7 +442,7 @@ class NgDocCommandPaletteComponent {
         return (page.find((index) => index.signature !== undefined || !!index.kind) ?? page[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocCommandPaletteComponent, isStandalone: true, selector: "ng-doc-command-palette", host: { attributes: { "animate.enter": "ng-doc-command-palette-enter" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "@let current = selected();\n<div\n  class=\"ng-doc-command-palette\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Search\"\n  (keydown)=\"onTrapKeydown($event)\">\n  <div class=\"ng-doc-command-palette-input\">\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.8\"\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    <input\n      #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-label=\"Search the documentation\"\n      aria-autocomplete=\"list\"\n      aria-expanded=\"true\"\n      aria-controls=\"ng-doc-command-palette-list\"\n      [attr.aria-activedescendant]=\"current?.id ?? null\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      placeholder=\"Search guides, API and actions\u2026\"\n      [formField]=\"searchForm.query\"\n      (keydown)=\"onKeydown($event)\" />\n    <div\n      class=\"ng-doc-command-palette-scopes ng-doc-command-palette-segments\"\n      role=\"tablist\"\n      aria-label=\"Search scope\"\n      ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of scopes; track item.id) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          aria-controls=\"ng-doc-command-palette-list\"\n          [attr.tabindex]=\"scope() === item.id ? 0 : -1\"\n          [attr.aria-selected]=\"scope() === item.id\"\n          [ngDocSelectionOrigin]=\"scope() === item.id\"\n          (mousedown)=\"$event.preventDefault()\"\n          (keydown)=\"onScopeKeydown($event)\"\n          (click)=\"selectScope(item.id)\">\n          {{ item.label }}\n        </button>\n      }\n    </div>\n    <kbd class=\"ng-doc-command-palette-kbd\">Esc</kbd>\n  </div>\n\n  <div class=\"ng-doc-command-palette-body\">\n    <div\n      #list\n      class=\"ng-doc-command-palette-list\"\n      id=\"ng-doc-command-palette-list\"\n      role=\"listbox\"\n      aria-label=\"Results\">\n      @for (section of sections(); track section.key) {\n        <div class=\"ng-doc-command-palette-group\" role=\"group\" [attr.aria-label]=\"section.title\">\n          <div class=\"ng-doc-command-palette-section\" aria-hidden=\"true\">\n            <span>{{ section.title }}</span>\n            <span class=\"ng-doc-command-palette-count\">{{ section.rows.length }}</span>\n          </div>\n          @for (row of section.rows; track row.id) {\n            <div\n              class=\"ng-doc-command-palette-row\"\n              role=\"option\"\n              [id]=\"row.id\"\n              [attr.data-ng-doc-type]=\"row.type\"\n              [attr.data-ng-doc-url]=\"row.url ?? null\"\n              [attr.aria-selected]=\"row.id === current?.id\"\n              (mousedown)=\"$event.preventDefault()\"\n              (mousemove)=\"hover(rows().indexOf(row))\"\n              (click)=\"activate(row)\">\n              <span class=\"ng-doc-command-palette-icon\" aria-hidden=\"true\">\n                <ng-container\n                  [ngTemplateOutlet]=\"icon\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row.icon }\"></ng-container>\n              </span>\n              <span class=\"ng-doc-command-palette-name\" [class.ng-doc-command-palette-mono]=\"row.type === 'api'\">\n                <span class=\"ng-doc-command-palette-label\">\n                  @for (segment of row.label; track $index) {\n                    @if (segment.match) {\n                      <mark>{{ segment.text }}</mark>\n                    } @else {\n                      <span>{{ segment.text }}</span>\n                    }\n                  }\n                </span>\n                @if (row.meta) {\n                  <small>{{ row.meta }}</small>\n                }\n              </span>\n              <span class=\"ng-doc-command-palette-end\">\n                @if (row.kind) {\n                  <ng-doc-kind-icon [kind]=\"row.kind\"></ng-doc-kind-icon>\n                } @else if (row.type === 'api') {\n                  <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"api\">API</span>\n                }\n                @if (row.keys?.length && shortcuts.enabled()) {\n                  @for (key of row.keys; track key) {\n                    <kbd class=\"ng-doc-command-palette-kbd\">{{ key }}</kbd>\n                  }\n                }\n                <svg\n                  class=\"ng-doc-command-palette-return\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\">\n                  <path d=\"M20 5v7a3 3 0 0 1-3 3H5\" />\n                  <path d=\"m9 11-4 4 4 4\" />\n                </svg>\n              </span>\n            </div>\n          }\n        </div>\n      } @empty {\n        <div class=\"ng-doc-command-palette-empty\" role=\"presentation\">\n          @if (searching()) {\n            <ng-doc-spinner size=\"small\"></ng-doc-spinner>\n            Searching\u2026\n          } @else if (failed()) {\n            Search failed. Try again.\n          } @else {\n            {{ emptyMessage() }}\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"ng-doc-command-palette-preview\">\n      @if (current) {\n        <div class=\"ng-doc-command-palette-preview-top\">\n          @switch (current.type) {\n            @case ('api') {\n              @if (current.kind) {\n                <ng-doc-kind-icon [kind]=\"current.kind\"></ng-doc-kind-icon>\n              } @else {\n                <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"api\">API</span>\n              }\n              <span>{{ current.scope }}</span>\n            }\n            @case ('guide') {\n              <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"guide\">Guide</span>\n              <span>{{ current.meta }}</span>\n            }\n            @default {\n              <ng-container\n                [ngTemplateOutlet]=\"icon\"\n                [ngTemplateOutletContext]=\"{ $implicit: 'action' }\"></ng-container>\n              <span>Action</span>\n            }\n          }\n        </div>\n        <h2\n          class=\"ng-doc-command-palette-preview-title\"\n          [class.ng-doc-command-palette-mono]=\"current.type === 'api'\">\n          {{ current.title }}\n        </h2>\n        @if (current.type === 'action') {\n          <p class=\"ng-doc-command-palette-muted\">\n            {{ current.action?.keepOpen ? 'Changes the setting and keeps the search open.' : 'Runs immediately.' }}\n          </p>\n          @if (current.keys?.length && shortcuts.enabled()) {\n            <div class=\"ng-doc-command-palette-hint\">\n              Shortcut\n              @for (key of current.keys; track key) {\n                <kbd class=\"ng-doc-command-palette-kbd\">{{ key }}</kbd>\n              }\n            </div>\n          }\n        } @else {\n          @if (current.text) {\n            <p class=\"ng-doc-command-palette-text\">{{ current.text }}</p>\n          }\n          @if (current.signature) {\n            <pre class=\"ng-doc-command-palette-signature\"><code>{{ current.signature }}</code></pre>\n          }\n          <div class=\"ng-doc-command-palette-hint\">\n            <kbd class=\"ng-doc-command-palette-kbd\">\u21B5</kbd>\n            {{ current.type === 'api' ? 'open symbol page' : 'open' }}\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ng-doc-command-palette-announcer\" role=\"status\">{{ status() }}</div>\n\n  <div class=\"ng-doc-command-palette-footer\">\n    <span>\n      <kbd class=\"ng-doc-command-palette-kbd\">\u2191</kbd>\n      <kbd class=\"ng-doc-command-palette-kbd\">\u2193</kbd>\n      navigate\n    </span>\n    <span class=\"ng-doc-command-palette-wide\"><kbd class=\"ng-doc-command-palette-kbd\">\u21B5</kbd> open</span>\n    <span class=\"ng-doc-command-palette-wide\"\n      ><kbd class=\"ng-doc-command-palette-kbd\">Tab</kbd> scopes and settings</span\n    >\n    @if (shortcuts.enabled()) {\n      <span class=\"ng-doc-command-palette-wide\"\n        ><kbd class=\"ng-doc-command-palette-kbd\">/</kbd> also opens search</span\n      >\n    }\n    <button\n      class=\"ng-doc-command-palette-switch\"\n      type=\"button\"\n      role=\"switch\"\n      [attr.aria-checked]=\"shortcuts.enabled()\"\n      title=\"Single-character shortcuts: / [ ] F L T\"\n      (click)=\"shortcuts.toggle()\">\n      Single-key shortcuts\n      <span class=\"ng-doc-command-palette-track\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n</div>\n\n<ng-template #icon let-name>\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.8\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    @switch (name) {\n      @case ('symbol') {\n        <path d=\"m21 16-9 5-9-5V8l9-5 9 5z\" />\n        <path d=\"m3.3 7.5 8.7 5 8.7-5M12 22V12.5\" />\n      }\n      @case ('section') {\n        <path d=\"M4 9h16M4 15h16M10 3 8 21M16 3l-2 18\" />\n      }\n      @case ('action') {\n        <path d=\"M13 2 3 14h9l-1 8 10-12h-9z\" />\n      }\n      @default {\n        <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z\" />\n        <path d=\"M14 3v5h5M9 13h6M9 17h6\" />\n      }\n    }\n  </svg>\n</ng-template>\n", styles: [".ng-doc-command-palette-backdrop{background:rgb(var(--ng-doc-base-rgb)/.32)}:root[data-theme=dark] .ng-doc-command-palette-backdrop{background:#0000008c}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-backdrop{background:#0000008c}}ng-doc-command-palette{display:block;width:min(var(--ng-doc-search-dialog-width),100vw - 32px);font-family:var(--ng-doc-font-family);color:var(--ng-doc-text)}ng-doc-command-palette.ng-doc-command-palette-enter{animation:ng-doc-command-palette-enter .15s var(--ng-doc-easing, ease-out)}@media(max-width:640px){ng-doc-command-palette{width:calc(100vw - 16px)}}@keyframes ng-doc-command-palette-enter{0%{opacity:0;transform:scale(.98)}}.ng-doc-command-palette{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);max-height:min(600px,82vh);overflow:hidden;background:var(--ng-doc-background);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-search-border-radius, var(--ng-doc-radius-xl));box-shadow:var(--ng-doc-shadow-lg)}@media(max-width:640px){.ng-doc-command-palette{max-height:calc(100vh - 16px)}}.ng-doc-command-palette-announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-command-palette-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);background:var(--ng-doc-kbd-background);border:1px solid var(--ng-doc-kbd-border-color);border-radius:var(--ng-doc-radius-xs)}.ng-doc-command-palette-mono{font-family:var(--ng-doc-code-font)}.ng-doc-command-palette-muted{color:var(--ng-doc-text-muted)}.ng-doc-command-palette-input{display:flex;align-items:center;gap:var(--ng-doc-space-3);height:56px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4);border-bottom:1px solid var(--ng-doc-border-color);color:var(--ng-doc-text-muted)}.ng-doc-command-palette-input svg{flex:none}.ng-doc-command-palette-input input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;font:400 16px/24px var(--ng-doc-font-family);color:var(--ng-doc-heading-color)}.ng-doc-command-palette-input input::placeholder{color:var(--ng-doc-text-muted);opacity:1}.ng-doc-command-palette-segments{position:relative;display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2)}.ng-doc-command-palette-segments ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-command-palette-segments button{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 8px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);cursor:pointer;white-space:nowrap}.ng-doc-command-palette-segments button:hover,.ng-doc-command-palette-segments button[aria-selected=true]{color:var(--ng-doc-heading-color)}.ng-doc-command-palette-segments button:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:root[data-theme=dark] .ng-doc-command-palette-segments ng-doc-selection{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-segments ng-doc-selection{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-command-palette-body{display:grid;grid-template-columns:minmax(0,1fr) var(--ng-doc-search-preview-width);min-height:0}.ng-doc-command-palette-list{min-height:120px;padding:var(--ng-doc-space-2);overflow:auto;overscroll-behavior:contain;container:ng-doc-command-palette-list/inline-size}.ng-doc-command-palette-empty{display:flex;align-items:center;justify-content:center;gap:var(--ng-doc-space-2);font-size:14px;line-height:20px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-empty{padding:var(--ng-doc-space-8) var(--ng-doc-space-3)}.ng-doc-command-palette-section{display:flex;justify-content:space-between;margin:var(--ng-doc-space-4) var(--ng-doc-space-3) var(--ng-doc-space-2);font:600 11px/16px var(--ng-doc-font-family);letter-spacing:.05em;text-transform:uppercase;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-section .ng-doc-command-palette-count{font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums}.ng-doc-command-palette-group:first-child .ng-doc-command-palette-section{margin-top:var(--ng-doc-space-2)}.ng-doc-command-palette-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;column-gap:var(--ng-doc-space-3);min-height:40px;padding:4px var(--ng-doc-space-3);border-radius:var(--ng-doc-radius-md);font-size:14px;line-height:20px;color:var(--ng-doc-text);cursor:pointer}.ng-doc-command-palette-row:hover{background:var(--ng-doc-row-hover-background)}.ng-doc-command-palette-row[aria-selected=true]{background:var(--ng-doc-row-selected-background);box-shadow:inset 0 0 0 1px var(--ng-doc-row-selected-border)}.ng-doc-command-palette-row[aria-selected=true] .ng-doc-command-palette-return{display:block}.ng-doc-command-palette-row mark{background:none;color:var(--ng-doc-primary-strong);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.ng-doc-command-palette-icon{display:grid;place-items:center;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ng-doc-search-result-header-color, var(--ng-doc-heading-color))}.ng-doc-command-palette-name.ng-doc-command-palette-mono{font-size:13px;font-weight:500}.ng-doc-command-palette-name small{margin-left:var(--ng-doc-space-2);font:400 12px var(--ng-doc-font-family);color:var(--ng-doc-text-muted)}.ng-doc-command-palette-end{display:inline-flex;align-items:center;gap:6px;justify-self:end}.ng-doc-command-palette-return{display:none;color:var(--ng-doc-primary-strong)}@container ng-doc-command-palette-list (max-width: 420px){.ng-doc-command-palette-row{column-gap:var(--ng-doc-space-2);padding:4px var(--ng-doc-space-2)}.ng-doc-command-palette-name small{display:none}}.ng-doc-command-palette-preview{padding:var(--ng-doc-space-4);overflow:auto;border-left:1px solid var(--ng-doc-border-color);background:var(--ng-doc-base-1);font-size:13px;line-height:20px}.ng-doc-command-palette-preview p{margin:0 0 var(--ng-doc-space-3)}.ng-doc-command-palette-preview-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ng-doc-space-2);font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-preview-title{margin:var(--ng-doc-space-2) 0 var(--ng-doc-space-1);padding:0;border:0;font:600 15px/22px var(--ng-doc-font-family);letter-spacing:0;color:var(--ng-doc-heading-color);overflow-wrap:anywhere}.ng-doc-command-palette-preview-title.ng-doc-command-palette-mono{font-family:var(--ng-doc-code-font)}.ng-doc-command-palette-text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;color:var(--ng-doc-search-result-color)}.ng-doc-command-palette-type{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:var(--ng-doc-radius-sm);font:600 10.5px/1 var(--ng-doc-font-family);white-space:nowrap}.ng-doc-command-palette-type[data-ng-doc-page-type=api]{color:var(--ng-doc-api-tag-color);background:var(--ng-doc-api-tag-background)}.ng-doc-command-palette-type[data-ng-doc-page-type=guide]{color:var(--ng-doc-guide-tag-color);background:var(--ng-doc-guide-tag-background)}.ng-doc-command-palette-signature{margin:0 0 var(--ng-doc-space-3);padding:var(--ng-doc-space-2) var(--ng-doc-space-3);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);font:400 13px/20px var(--ng-doc-code-font);white-space:pre-wrap;overflow-wrap:anywhere}.ng-doc-command-palette-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-footer{display:flex;align-items:center;gap:var(--ng-doc-space-4);min-height:44px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4);border-top:1px solid var(--ng-doc-border-color);background:var(--ng-doc-base-1);font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-footer>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.ng-doc-command-palette-switch{display:inline-flex;align-items:center;gap:8px;margin:-4px -4px -4px auto;padding:4px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:400 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text);cursor:pointer;white-space:nowrap}.ng-doc-command-palette-switch:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-command-palette-switch .ng-doc-command-palette-track{position:relative;width:28px;height:16px;border-radius:var(--ng-doc-radius-full);background:var(--ng-doc-base-7);transition:background var(--ng-doc-transition)}.ng-doc-command-palette-switch .ng-doc-command-palette-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs);transition:transform var(--ng-doc-transition) var(--ng-doc-easing, ease)}.ng-doc-command-palette-switch[aria-checked=true] .ng-doc-command-palette-track{background:var(--ng-doc-primary)}.ng-doc-command-palette-switch[aria-checked=true] .ng-doc-command-palette-track:after{transform:translate(12px)}:root[data-theme=dark] .ng-doc-command-palette-switch:not([aria-checked=true]) .ng-doc-command-palette-track{background:var(--ng-doc-base-8)}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-switch:not([aria-checked=true]) .ng-doc-command-palette-track{background:var(--ng-doc-base-8)}}@media(max-width:640px){.ng-doc-command-palette-body{grid-template-columns:minmax(0,1fr)}.ng-doc-command-palette-preview,.ng-doc-command-palette-wide{display:none!important}.ng-doc-command-palette-input{flex-wrap:wrap;row-gap:0;height:auto;padding-bottom:var(--ng-doc-space-2)}.ng-doc-command-palette-input input{height:48px}.ng-doc-command-palette-scopes{order:1;flex:1 1 100%}.ng-doc-command-palette-scopes button{flex:1;justify-content:center}.ng-doc-command-palette-footer{gap:var(--ng-doc-space-3);padding-left:var(--ng-doc-space-3)}}@media(prefers-reduced-motion:reduce){ng-doc-command-palette.ng-doc-command-palette-enter{animation:none}.ng-doc-command-palette-switch .ng-doc-command-palette-track,.ng-doc-command-palette-switch .ng-doc-command-palette-track:after{transition:none}}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocKindIconComponent, selector: "ng-doc-kind-icon", inputs: ["kind", "type", "size"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }, { kind: "component", type: NgDocSpinnerComponent, selector: "ng-doc-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocCommandPaletteComponent, isStandalone: true, selector: "ng-doc-command-palette", host: { attributes: { "animate.enter": "ng-doc-command-palette-enter" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"ng-doc-command-palette\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-label]=\"texts.dialogLabel\"\n  (keydown)=\"onTrapKeydown($event)\">\n  <div class=\"ng-doc-command-palette-input\">\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.8\"\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    <input\n      #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      aria-expanded=\"true\"\n      aria-controls=\"ng-doc-command-palette-list\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [attr.aria-label]=\"texts.inputLabel\"\n      [attr.placeholder]=\"texts.inputPlaceholder\"\n      [attr.aria-activedescendant]=\"selected()?.id ?? null\"\n      [formField]=\"searchForm.query\"\n      (keydown)=\"onKeydown($event)\" />\n    <div\n      class=\"ng-doc-command-palette-scopes ng-doc-command-palette-segments\"\n      role=\"tablist\"\n      [attr.aria-label]=\"texts.scopesLabel\"\n      ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of scopes; track item.id) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          aria-controls=\"ng-doc-command-palette-list\"\n          [attr.tabindex]=\"scope() === item.id ? 0 : -1\"\n          [attr.aria-selected]=\"scope() === item.id\"\n          [ngDocSelectionOrigin]=\"scope() === item.id\"\n          (mousedown)=\"$event.preventDefault()\"\n          (keydown)=\"onScopeKeydown($event)\"\n          (click)=\"selectScope(item.id)\">\n          {{ item.label }}\n        </button>\n      }\n    </div>\n    <kbd class=\"ng-doc-command-palette-kbd\">{{ texts.keyEscape }}</kbd>\n  </div>\n\n  <div class=\"ng-doc-command-palette-body\">\n    <div\n      #list\n      class=\"ng-doc-command-palette-list\"\n      id=\"ng-doc-command-palette-list\"\n      role=\"listbox\"\n      [attr.aria-label]=\"texts.resultsLabel\">\n      @for (section of sections(); track section.key) {\n        <div class=\"ng-doc-command-palette-group\" role=\"group\" [attr.aria-label]=\"section.title\">\n          <div class=\"ng-doc-command-palette-section\" aria-hidden=\"true\">\n            <span>{{ section.title }}</span>\n            <span class=\"ng-doc-command-palette-count\">{{ section.rows.length }}</span>\n          </div>\n          @for (row of section.rows; track row.id) {\n            <div\n              class=\"ng-doc-command-palette-row\"\n              role=\"option\"\n              [id]=\"row.id\"\n              [attr.data-ng-doc-type]=\"row.type\"\n              [attr.data-ng-doc-url]=\"row.url ?? null\"\n              [attr.aria-selected]=\"row.id === selected()?.id\"\n              (mousedown)=\"$event.preventDefault()\"\n              (mousemove)=\"hover(rows().indexOf(row))\"\n              (click)=\"activate(row)\">\n              <span class=\"ng-doc-command-palette-icon\" aria-hidden=\"true\">\n                <ng-container\n                  [ngTemplateOutlet]=\"icon\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row.icon }\"></ng-container>\n              </span>\n              <span\n                class=\"ng-doc-command-palette-name\"\n                [class.ng-doc-command-palette-mono]=\"row.type === 'api'\">\n                <span class=\"ng-doc-command-palette-label\">\n                  @for (segment of row.label; track $index) {\n                    @if (segment.match) {\n                      <mark>{{ segment.text }}</mark>\n                    } @else {\n                      <span>{{ segment.text }}</span>\n                    }\n                  }\n                </span>\n                @if (row.meta) {\n                  <small>{{ row.meta }}</small>\n                }\n              </span>\n              <span class=\"ng-doc-command-palette-end\">\n                @if (row.kind) {\n                  <ng-doc-kind-icon [kind]=\"row.kind\"></ng-doc-kind-icon>\n                } @else if (row.type === 'api') {\n                  <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"api\">{{\n                    texts.typeApi\n                  }}</span>\n                }\n                @if (row.keys?.length && shortcuts.enabled()) {\n                  @for (key of row.keys; track key) {\n                    <kbd class=\"ng-doc-command-palette-kbd\">{{ key }}</kbd>\n                  }\n                }\n                <svg\n                  class=\"ng-doc-command-palette-return\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\">\n                  <path d=\"M20 5v7a3 3 0 0 1-3 3H5\" />\n                  <path d=\"m9 11-4 4 4 4\" />\n                </svg>\n              </span>\n            </div>\n          }\n        </div>\n      } @empty {\n        <div class=\"ng-doc-command-palette-empty\" role=\"presentation\">\n          @if (searching()) {\n            <ng-doc-spinner size=\"small\"></ng-doc-spinner>\n            {{ texts.searching }}\n          } @else if (failed()) {\n            {{ texts.failed }}\n          } @else {\n            {{ emptyMessage() }}\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"ng-doc-command-palette-preview\">\n      @if (selected(); as current) {\n        <div class=\"ng-doc-command-palette-preview-top\">\n          @switch (current.type) {\n            @case ('api') {\n              @if (current.kind) {\n                <ng-doc-kind-icon [kind]=\"current.kind\"></ng-doc-kind-icon>\n              } @else {\n                <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"api\">{{\n                  texts.typeApi\n                }}</span>\n              }\n              <span>{{ current.scope }}</span>\n            }\n            @case ('guide') {\n              <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"guide\">{{\n                texts.typeGuide\n              }}</span>\n              <span>{{ current.meta }}</span>\n            }\n            @default {\n              <ng-container\n                [ngTemplateOutlet]=\"icon\"\n                [ngTemplateOutletContext]=\"{ $implicit: 'action' }\"></ng-container>\n              <span>{{ texts.typeAction }}</span>\n            }\n          }\n        </div>\n        <h2\n          class=\"ng-doc-command-palette-preview-title\"\n          [class.ng-doc-command-palette-mono]=\"current.type === 'api'\">\n          {{ current.title }}\n        </h2>\n        @if (current.type === 'action') {\n          <p class=\"ng-doc-command-palette-muted\">\n            {{ current.action?.keepOpen ? texts.actionKeepsOpen : texts.actionRunsImmediately }}\n          </p>\n          @if (current.keys?.length && shortcuts.enabled()) {\n            <div class=\"ng-doc-command-palette-hint\">\n              {{ texts.shortcut }}\n              @for (key of current.keys; track key) {\n                <kbd class=\"ng-doc-command-palette-kbd\">{{ key }}</kbd>\n              }\n            </div>\n          }\n        } @else {\n          @if (current.text) {\n            <p class=\"ng-doc-command-palette-text\">{{ current.text }}</p>\n          }\n          @if (current.signature) {\n            <pre class=\"ng-doc-command-palette-signature\"><code>{{ current.signature }}</code></pre>\n          }\n          <div class=\"ng-doc-command-palette-hint\">\n            <kbd class=\"ng-doc-command-palette-kbd\">\u21B5</kbd>\n            {{ current.type === 'api' ? texts.openSymbolPage : texts.open }}\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ng-doc-command-palette-announcer\" role=\"status\">{{ status() }}</div>\n\n  <div class=\"ng-doc-command-palette-footer\">\n    <span>\n      <kbd class=\"ng-doc-command-palette-kbd\">\u2191</kbd>\n      <kbd class=\"ng-doc-command-palette-kbd\">\u2193</kbd>\n      {{ texts.footerNavigate }}\n    </span>\n    <span class=\"ng-doc-command-palette-wide\"\n      ><kbd class=\"ng-doc-command-palette-kbd\">\u21B5</kbd> {{ texts.open }}</span\n    >\n    <span class=\"ng-doc-command-palette-wide\"\n      ><kbd class=\"ng-doc-command-palette-kbd\">{{ texts.keyTab }}</kbd>\n      {{ texts.footerScopes }}</span\n    >\n    @if (shortcuts.enabled()) {\n      <span class=\"ng-doc-command-palette-wide\"\n        ><kbd class=\"ng-doc-command-palette-kbd\">/</kbd> {{ texts.footerSlash }}</span\n      >\n    }\n    <button\n      class=\"ng-doc-command-palette-switch\"\n      type=\"button\"\n      role=\"switch\"\n      [attr.title]=\"texts.shortcutsSwitchTitle\"\n      [attr.aria-checked]=\"shortcuts.enabled()\"\n      (click)=\"shortcuts.toggle()\">\n      {{ texts.shortcutsSwitch }}\n      <span class=\"ng-doc-command-palette-track\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n</div>\n\n<ng-template #icon let-name>\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.8\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    @switch (name) {\n      @case ('symbol') {\n        <path d=\"m21 16-9 5-9-5V8l9-5 9 5z\" />\n        <path d=\"m3.3 7.5 8.7 5 8.7-5M12 22V12.5\" />\n      }\n      @case ('section') {\n        <path d=\"M4 9h16M4 15h16M10 3 8 21M16 3l-2 18\" />\n      }\n      @case ('action') {\n        <path d=\"M13 2 3 14h9l-1 8 10-12h-9z\" />\n      }\n      @default {\n        <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z\" />\n        <path d=\"M14 3v5h5M9 13h6M9 17h6\" />\n      }\n    }\n  </svg>\n</ng-template>\n", styles: [".ng-doc-command-palette-backdrop{background:rgb(var(--ng-doc-base-rgb)/.32)}:root[data-theme=dark] .ng-doc-command-palette-backdrop{background:#0000008c}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-backdrop{background:#0000008c}}ng-doc-command-palette{display:block;width:min(var(--ng-doc-search-dialog-width),100vw - 32px);font-family:var(--ng-doc-font-family);color:var(--ng-doc-text)}ng-doc-command-palette.ng-doc-command-palette-enter{animation:ng-doc-command-palette-enter .15s var(--ng-doc-easing, ease-out)}@media(max-width:640px){ng-doc-command-palette{width:calc(100vw - 16px)}}@keyframes ng-doc-command-palette-enter{0%{opacity:0;transform:scale(.98)}}.ng-doc-command-palette{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);max-height:min(600px,82vh);overflow:hidden;background:var(--ng-doc-background);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-search-border-radius, var(--ng-doc-radius-xl));box-shadow:var(--ng-doc-shadow-lg)}@media(max-width:640px){.ng-doc-command-palette{max-height:calc(100vh - 16px)}}.ng-doc-command-palette-announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-command-palette-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);background:var(--ng-doc-kbd-background);border:1px solid var(--ng-doc-kbd-border-color);border-radius:var(--ng-doc-radius-xs)}.ng-doc-command-palette-mono{font-family:var(--ng-doc-code-font)}.ng-doc-command-palette-muted{color:var(--ng-doc-text-muted)}.ng-doc-command-palette-input{display:flex;align-items:center;gap:var(--ng-doc-space-3);height:56px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4);border-bottom:1px solid var(--ng-doc-border-color);color:var(--ng-doc-text-muted)}.ng-doc-command-palette-input svg{flex:none}.ng-doc-command-palette-input input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;font:400 16px/24px var(--ng-doc-font-family);color:var(--ng-doc-heading-color)}.ng-doc-command-palette-input input::placeholder{color:var(--ng-doc-text-muted);opacity:1}.ng-doc-command-palette-segments{position:relative;display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2)}.ng-doc-command-palette-segments ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-command-palette-segments button{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 8px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);cursor:pointer;white-space:nowrap}.ng-doc-command-palette-segments button:hover,.ng-doc-command-palette-segments button[aria-selected=true]{color:var(--ng-doc-heading-color)}.ng-doc-command-palette-segments button:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:root[data-theme=dark] .ng-doc-command-palette-segments ng-doc-selection{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-segments ng-doc-selection{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-command-palette-body{display:grid;grid-template-columns:minmax(0,1fr) var(--ng-doc-search-preview-width);min-height:0}.ng-doc-command-palette-list{min-height:120px;padding:var(--ng-doc-space-2);overflow:auto;overscroll-behavior:contain;container:ng-doc-command-palette-list/inline-size}.ng-doc-command-palette-empty{display:flex;align-items:center;justify-content:center;gap:var(--ng-doc-space-2);font-size:14px;line-height:20px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-empty{padding:var(--ng-doc-space-8) var(--ng-doc-space-3)}.ng-doc-command-palette-section{display:flex;justify-content:space-between;margin:var(--ng-doc-space-4) var(--ng-doc-space-3) var(--ng-doc-space-2);font:600 11px/16px var(--ng-doc-font-family);letter-spacing:.05em;text-transform:uppercase;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-section .ng-doc-command-palette-count{font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums}.ng-doc-command-palette-group:first-child .ng-doc-command-palette-section{margin-top:var(--ng-doc-space-2)}.ng-doc-command-palette-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;column-gap:var(--ng-doc-space-3);min-height:40px;padding:4px var(--ng-doc-space-3);border-radius:var(--ng-doc-radius-md);font-size:14px;line-height:20px;color:var(--ng-doc-text);cursor:pointer}.ng-doc-command-palette-row:hover{background:var(--ng-doc-row-hover-background)}.ng-doc-command-palette-row[aria-selected=true]{background:var(--ng-doc-row-selected-background);box-shadow:inset 0 0 0 1px var(--ng-doc-row-selected-border)}.ng-doc-command-palette-row[aria-selected=true] .ng-doc-command-palette-return{display:block}.ng-doc-command-palette-row mark{background:none;color:var(--ng-doc-primary-strong);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.ng-doc-command-palette-icon{display:grid;place-items:center;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ng-doc-search-result-header-color, var(--ng-doc-heading-color))}.ng-doc-command-palette-name.ng-doc-command-palette-mono{font-size:13px;font-weight:500}.ng-doc-command-palette-name small{margin-left:var(--ng-doc-space-2);font:400 12px var(--ng-doc-font-family);color:var(--ng-doc-text-muted)}.ng-doc-command-palette-end{display:inline-flex;align-items:center;gap:6px;justify-self:end}.ng-doc-command-palette-return{display:none;color:var(--ng-doc-primary-strong)}@container ng-doc-command-palette-list (max-width: 420px){.ng-doc-command-palette-row{column-gap:var(--ng-doc-space-2);padding:4px var(--ng-doc-space-2)}.ng-doc-command-palette-name small{display:none}}.ng-doc-command-palette-preview{padding:var(--ng-doc-space-4);overflow:auto;border-left:1px solid var(--ng-doc-border-color);background:var(--ng-doc-base-1);font-size:13px;line-height:20px}.ng-doc-command-palette-preview p{margin:0 0 var(--ng-doc-space-3)}.ng-doc-command-palette-preview-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ng-doc-space-2);font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-preview-title{margin:var(--ng-doc-space-2) 0 var(--ng-doc-space-1);padding:0;border:0;font:600 15px/22px var(--ng-doc-font-family);letter-spacing:0;color:var(--ng-doc-heading-color);overflow-wrap:anywhere}.ng-doc-command-palette-preview-title.ng-doc-command-palette-mono{font-family:var(--ng-doc-code-font)}.ng-doc-command-palette-text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;color:var(--ng-doc-search-result-color)}.ng-doc-command-palette-type{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:var(--ng-doc-radius-sm);font:600 10.5px/1 var(--ng-doc-font-family);white-space:nowrap}.ng-doc-command-palette-type[data-ng-doc-page-type=api]{color:var(--ng-doc-api-tag-color);background:var(--ng-doc-api-tag-background)}.ng-doc-command-palette-type[data-ng-doc-page-type=guide]{color:var(--ng-doc-guide-tag-color);background:var(--ng-doc-guide-tag-background)}.ng-doc-command-palette-signature{margin:0 0 var(--ng-doc-space-3);padding:var(--ng-doc-space-2) var(--ng-doc-space-3);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);font:400 13px/20px var(--ng-doc-code-font);white-space:pre-wrap;overflow-wrap:anywhere}.ng-doc-command-palette-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-footer{display:flex;align-items:center;gap:var(--ng-doc-space-4);min-height:44px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4);border-top:1px solid var(--ng-doc-border-color);background:var(--ng-doc-base-1);font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-footer>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.ng-doc-command-palette-switch{display:inline-flex;align-items:center;gap:8px;margin:-4px -4px -4px auto;padding:4px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:400 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text);cursor:pointer;white-space:nowrap}.ng-doc-command-palette-switch:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-command-palette-switch .ng-doc-command-palette-track{position:relative;width:28px;height:16px;border-radius:var(--ng-doc-radius-full);background:var(--ng-doc-base-7);transition:background var(--ng-doc-transition)}.ng-doc-command-palette-switch .ng-doc-command-palette-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs);transition:transform var(--ng-doc-transition) var(--ng-doc-easing, ease)}.ng-doc-command-palette-switch[aria-checked=true] .ng-doc-command-palette-track{background:var(--ng-doc-primary)}.ng-doc-command-palette-switch[aria-checked=true] .ng-doc-command-palette-track:after{transform:translate(12px)}:root[data-theme=dark] .ng-doc-command-palette-switch:not([aria-checked=true]) .ng-doc-command-palette-track{background:var(--ng-doc-base-8)}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-switch:not([aria-checked=true]) .ng-doc-command-palette-track{background:var(--ng-doc-base-8)}}@media(max-width:640px){.ng-doc-command-palette-body{grid-template-columns:minmax(0,1fr)}.ng-doc-command-palette-preview,.ng-doc-command-palette-wide{display:none!important}.ng-doc-command-palette-input{flex-wrap:wrap;row-gap:0;height:auto;padding-bottom:var(--ng-doc-space-2)}.ng-doc-command-palette-input input{height:48px}.ng-doc-command-palette-scopes{order:1;flex:1 1 100%}.ng-doc-command-palette-scopes button{flex:1;justify-content:center}.ng-doc-command-palette-footer{gap:var(--ng-doc-space-3);padding-left:var(--ng-doc-space-3)}}@media(prefers-reduced-motion:reduce){ng-doc-command-palette.ng-doc-command-palette-enter{animation:none}.ng-doc-command-palette-switch .ng-doc-command-palette-track,.ng-doc-command-palette-switch .ng-doc-command-palette-track:after{transition:none}}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocKindIconComponent, selector: "ng-doc-kind-icon", inputs: ["kind", "type", "size"] }, { kind: "component", type: NgDocSelectionComponent, selector: "ng-doc-selection", inputs: ["align"] }, { kind: "directive", type: NgDocSelectionHostDirective, selector: "[ngDocSelectionHost]" }, { kind: "directive", type: NgDocSelectionOriginDirective, selector: "[ngDocSelectionOrigin]", inputs: ["ngDocSelectionOrigin"] }, { kind: "component", type: NgDocSpinnerComponent, selector: "ng-doc-spinner", inputs: ["size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCommandPaletteComponent, decorators: [{
             type: Component,
@@ -448,7 +456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImpor
                         NgDocSpinnerComponent,
                     ], host: {
                         'animate.enter': 'ng-doc-command-palette-enter',
-                    }, template: "@let current = selected();\n<div\n  class=\"ng-doc-command-palette\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-label=\"Search\"\n  (keydown)=\"onTrapKeydown($event)\">\n  <div class=\"ng-doc-command-palette-input\">\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.8\"\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    <input\n      #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-label=\"Search the documentation\"\n      aria-autocomplete=\"list\"\n      aria-expanded=\"true\"\n      aria-controls=\"ng-doc-command-palette-list\"\n      [attr.aria-activedescendant]=\"current?.id ?? null\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      placeholder=\"Search guides, API and actions\u2026\"\n      [formField]=\"searchForm.query\"\n      (keydown)=\"onKeydown($event)\" />\n    <div\n      class=\"ng-doc-command-palette-scopes ng-doc-command-palette-segments\"\n      role=\"tablist\"\n      aria-label=\"Search scope\"\n      ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of scopes; track item.id) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          aria-controls=\"ng-doc-command-palette-list\"\n          [attr.tabindex]=\"scope() === item.id ? 0 : -1\"\n          [attr.aria-selected]=\"scope() === item.id\"\n          [ngDocSelectionOrigin]=\"scope() === item.id\"\n          (mousedown)=\"$event.preventDefault()\"\n          (keydown)=\"onScopeKeydown($event)\"\n          (click)=\"selectScope(item.id)\">\n          {{ item.label }}\n        </button>\n      }\n    </div>\n    <kbd class=\"ng-doc-command-palette-kbd\">Esc</kbd>\n  </div>\n\n  <div class=\"ng-doc-command-palette-body\">\n    <div\n      #list\n      class=\"ng-doc-command-palette-list\"\n      id=\"ng-doc-command-palette-list\"\n      role=\"listbox\"\n      aria-label=\"Results\">\n      @for (section of sections(); track section.key) {\n        <div class=\"ng-doc-command-palette-group\" role=\"group\" [attr.aria-label]=\"section.title\">\n          <div class=\"ng-doc-command-palette-section\" aria-hidden=\"true\">\n            <span>{{ section.title }}</span>\n            <span class=\"ng-doc-command-palette-count\">{{ section.rows.length }}</span>\n          </div>\n          @for (row of section.rows; track row.id) {\n            <div\n              class=\"ng-doc-command-palette-row\"\n              role=\"option\"\n              [id]=\"row.id\"\n              [attr.data-ng-doc-type]=\"row.type\"\n              [attr.data-ng-doc-url]=\"row.url ?? null\"\n              [attr.aria-selected]=\"row.id === current?.id\"\n              (mousedown)=\"$event.preventDefault()\"\n              (mousemove)=\"hover(rows().indexOf(row))\"\n              (click)=\"activate(row)\">\n              <span class=\"ng-doc-command-palette-icon\" aria-hidden=\"true\">\n                <ng-container\n                  [ngTemplateOutlet]=\"icon\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row.icon }\"></ng-container>\n              </span>\n              <span class=\"ng-doc-command-palette-name\" [class.ng-doc-command-palette-mono]=\"row.type === 'api'\">\n                <span class=\"ng-doc-command-palette-label\">\n                  @for (segment of row.label; track $index) {\n                    @if (segment.match) {\n                      <mark>{{ segment.text }}</mark>\n                    } @else {\n                      <span>{{ segment.text }}</span>\n                    }\n                  }\n                </span>\n                @if (row.meta) {\n                  <small>{{ row.meta }}</small>\n                }\n              </span>\n              <span class=\"ng-doc-command-palette-end\">\n                @if (row.kind) {\n                  <ng-doc-kind-icon [kind]=\"row.kind\"></ng-doc-kind-icon>\n                } @else if (row.type === 'api') {\n                  <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"api\">API</span>\n                }\n                @if (row.keys?.length && shortcuts.enabled()) {\n                  @for (key of row.keys; track key) {\n                    <kbd class=\"ng-doc-command-palette-kbd\">{{ key }}</kbd>\n                  }\n                }\n                <svg\n                  class=\"ng-doc-command-palette-return\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\">\n                  <path d=\"M20 5v7a3 3 0 0 1-3 3H5\" />\n                  <path d=\"m9 11-4 4 4 4\" />\n                </svg>\n              </span>\n            </div>\n          }\n        </div>\n      } @empty {\n        <div class=\"ng-doc-command-palette-empty\" role=\"presentation\">\n          @if (searching()) {\n            <ng-doc-spinner size=\"small\"></ng-doc-spinner>\n            Searching\u2026\n          } @else if (failed()) {\n            Search failed. Try again.\n          } @else {\n            {{ emptyMessage() }}\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"ng-doc-command-palette-preview\">\n      @if (current) {\n        <div class=\"ng-doc-command-palette-preview-top\">\n          @switch (current.type) {\n            @case ('api') {\n              @if (current.kind) {\n                <ng-doc-kind-icon [kind]=\"current.kind\"></ng-doc-kind-icon>\n              } @else {\n                <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"api\">API</span>\n              }\n              <span>{{ current.scope }}</span>\n            }\n            @case ('guide') {\n              <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"guide\">Guide</span>\n              <span>{{ current.meta }}</span>\n            }\n            @default {\n              <ng-container\n                [ngTemplateOutlet]=\"icon\"\n                [ngTemplateOutletContext]=\"{ $implicit: 'action' }\"></ng-container>\n              <span>Action</span>\n            }\n          }\n        </div>\n        <h2\n          class=\"ng-doc-command-palette-preview-title\"\n          [class.ng-doc-command-palette-mono]=\"current.type === 'api'\">\n          {{ current.title }}\n        </h2>\n        @if (current.type === 'action') {\n          <p class=\"ng-doc-command-palette-muted\">\n            {{ current.action?.keepOpen ? 'Changes the setting and keeps the search open.' : 'Runs immediately.' }}\n          </p>\n          @if (current.keys?.length && shortcuts.enabled()) {\n            <div class=\"ng-doc-command-palette-hint\">\n              Shortcut\n              @for (key of current.keys; track key) {\n                <kbd class=\"ng-doc-command-palette-kbd\">{{ key }}</kbd>\n              }\n            </div>\n          }\n        } @else {\n          @if (current.text) {\n            <p class=\"ng-doc-command-palette-text\">{{ current.text }}</p>\n          }\n          @if (current.signature) {\n            <pre class=\"ng-doc-command-palette-signature\"><code>{{ current.signature }}</code></pre>\n          }\n          <div class=\"ng-doc-command-palette-hint\">\n            <kbd class=\"ng-doc-command-palette-kbd\">\u21B5</kbd>\n            {{ current.type === 'api' ? 'open symbol page' : 'open' }}\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ng-doc-command-palette-announcer\" role=\"status\">{{ status() }}</div>\n\n  <div class=\"ng-doc-command-palette-footer\">\n    <span>\n      <kbd class=\"ng-doc-command-palette-kbd\">\u2191</kbd>\n      <kbd class=\"ng-doc-command-palette-kbd\">\u2193</kbd>\n      navigate\n    </span>\n    <span class=\"ng-doc-command-palette-wide\"><kbd class=\"ng-doc-command-palette-kbd\">\u21B5</kbd> open</span>\n    <span class=\"ng-doc-command-palette-wide\"\n      ><kbd class=\"ng-doc-command-palette-kbd\">Tab</kbd> scopes and settings</span\n    >\n    @if (shortcuts.enabled()) {\n      <span class=\"ng-doc-command-palette-wide\"\n        ><kbd class=\"ng-doc-command-palette-kbd\">/</kbd> also opens search</span\n      >\n    }\n    <button\n      class=\"ng-doc-command-palette-switch\"\n      type=\"button\"\n      role=\"switch\"\n      [attr.aria-checked]=\"shortcuts.enabled()\"\n      title=\"Single-character shortcuts: / [ ] F L T\"\n      (click)=\"shortcuts.toggle()\">\n      Single-key shortcuts\n      <span class=\"ng-doc-command-palette-track\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n</div>\n\n<ng-template #icon let-name>\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.8\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    @switch (name) {\n      @case ('symbol') {\n        <path d=\"m21 16-9 5-9-5V8l9-5 9 5z\" />\n        <path d=\"m3.3 7.5 8.7 5 8.7-5M12 22V12.5\" />\n      }\n      @case ('section') {\n        <path d=\"M4 9h16M4 15h16M10 3 8 21M16 3l-2 18\" />\n      }\n      @case ('action') {\n        <path d=\"M13 2 3 14h9l-1 8 10-12h-9z\" />\n      }\n      @default {\n        <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z\" />\n        <path d=\"M14 3v5h5M9 13h6M9 17h6\" />\n      }\n    }\n  </svg>\n</ng-template>\n", styles: [".ng-doc-command-palette-backdrop{background:rgb(var(--ng-doc-base-rgb)/.32)}:root[data-theme=dark] .ng-doc-command-palette-backdrop{background:#0000008c}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-backdrop{background:#0000008c}}ng-doc-command-palette{display:block;width:min(var(--ng-doc-search-dialog-width),100vw - 32px);font-family:var(--ng-doc-font-family);color:var(--ng-doc-text)}ng-doc-command-palette.ng-doc-command-palette-enter{animation:ng-doc-command-palette-enter .15s var(--ng-doc-easing, ease-out)}@media(max-width:640px){ng-doc-command-palette{width:calc(100vw - 16px)}}@keyframes ng-doc-command-palette-enter{0%{opacity:0;transform:scale(.98)}}.ng-doc-command-palette{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);max-height:min(600px,82vh);overflow:hidden;background:var(--ng-doc-background);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-search-border-radius, var(--ng-doc-radius-xl));box-shadow:var(--ng-doc-shadow-lg)}@media(max-width:640px){.ng-doc-command-palette{max-height:calc(100vh - 16px)}}.ng-doc-command-palette-announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-command-palette-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);background:var(--ng-doc-kbd-background);border:1px solid var(--ng-doc-kbd-border-color);border-radius:var(--ng-doc-radius-xs)}.ng-doc-command-palette-mono{font-family:var(--ng-doc-code-font)}.ng-doc-command-palette-muted{color:var(--ng-doc-text-muted)}.ng-doc-command-palette-input{display:flex;align-items:center;gap:var(--ng-doc-space-3);height:56px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4);border-bottom:1px solid var(--ng-doc-border-color);color:var(--ng-doc-text-muted)}.ng-doc-command-palette-input svg{flex:none}.ng-doc-command-palette-input input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;font:400 16px/24px var(--ng-doc-font-family);color:var(--ng-doc-heading-color)}.ng-doc-command-palette-input input::placeholder{color:var(--ng-doc-text-muted);opacity:1}.ng-doc-command-palette-segments{position:relative;display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2)}.ng-doc-command-palette-segments ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-command-palette-segments button{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 8px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);cursor:pointer;white-space:nowrap}.ng-doc-command-palette-segments button:hover,.ng-doc-command-palette-segments button[aria-selected=true]{color:var(--ng-doc-heading-color)}.ng-doc-command-palette-segments button:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:root[data-theme=dark] .ng-doc-command-palette-segments ng-doc-selection{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-segments ng-doc-selection{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-command-palette-body{display:grid;grid-template-columns:minmax(0,1fr) var(--ng-doc-search-preview-width);min-height:0}.ng-doc-command-palette-list{min-height:120px;padding:var(--ng-doc-space-2);overflow:auto;overscroll-behavior:contain;container:ng-doc-command-palette-list/inline-size}.ng-doc-command-palette-empty{display:flex;align-items:center;justify-content:center;gap:var(--ng-doc-space-2);font-size:14px;line-height:20px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-empty{padding:var(--ng-doc-space-8) var(--ng-doc-space-3)}.ng-doc-command-palette-section{display:flex;justify-content:space-between;margin:var(--ng-doc-space-4) var(--ng-doc-space-3) var(--ng-doc-space-2);font:600 11px/16px var(--ng-doc-font-family);letter-spacing:.05em;text-transform:uppercase;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-section .ng-doc-command-palette-count{font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums}.ng-doc-command-palette-group:first-child .ng-doc-command-palette-section{margin-top:var(--ng-doc-space-2)}.ng-doc-command-palette-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;column-gap:var(--ng-doc-space-3);min-height:40px;padding:4px var(--ng-doc-space-3);border-radius:var(--ng-doc-radius-md);font-size:14px;line-height:20px;color:var(--ng-doc-text);cursor:pointer}.ng-doc-command-palette-row:hover{background:var(--ng-doc-row-hover-background)}.ng-doc-command-palette-row[aria-selected=true]{background:var(--ng-doc-row-selected-background);box-shadow:inset 0 0 0 1px var(--ng-doc-row-selected-border)}.ng-doc-command-palette-row[aria-selected=true] .ng-doc-command-palette-return{display:block}.ng-doc-command-palette-row mark{background:none;color:var(--ng-doc-primary-strong);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.ng-doc-command-palette-icon{display:grid;place-items:center;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ng-doc-search-result-header-color, var(--ng-doc-heading-color))}.ng-doc-command-palette-name.ng-doc-command-palette-mono{font-size:13px;font-weight:500}.ng-doc-command-palette-name small{margin-left:var(--ng-doc-space-2);font:400 12px var(--ng-doc-font-family);color:var(--ng-doc-text-muted)}.ng-doc-command-palette-end{display:inline-flex;align-items:center;gap:6px;justify-self:end}.ng-doc-command-palette-return{display:none;color:var(--ng-doc-primary-strong)}@container ng-doc-command-palette-list (max-width: 420px){.ng-doc-command-palette-row{column-gap:var(--ng-doc-space-2);padding:4px var(--ng-doc-space-2)}.ng-doc-command-palette-name small{display:none}}.ng-doc-command-palette-preview{padding:var(--ng-doc-space-4);overflow:auto;border-left:1px solid var(--ng-doc-border-color);background:var(--ng-doc-base-1);font-size:13px;line-height:20px}.ng-doc-command-palette-preview p{margin:0 0 var(--ng-doc-space-3)}.ng-doc-command-palette-preview-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ng-doc-space-2);font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-preview-title{margin:var(--ng-doc-space-2) 0 var(--ng-doc-space-1);padding:0;border:0;font:600 15px/22px var(--ng-doc-font-family);letter-spacing:0;color:var(--ng-doc-heading-color);overflow-wrap:anywhere}.ng-doc-command-palette-preview-title.ng-doc-command-palette-mono{font-family:var(--ng-doc-code-font)}.ng-doc-command-palette-text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;color:var(--ng-doc-search-result-color)}.ng-doc-command-palette-type{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:var(--ng-doc-radius-sm);font:600 10.5px/1 var(--ng-doc-font-family);white-space:nowrap}.ng-doc-command-palette-type[data-ng-doc-page-type=api]{color:var(--ng-doc-api-tag-color);background:var(--ng-doc-api-tag-background)}.ng-doc-command-palette-type[data-ng-doc-page-type=guide]{color:var(--ng-doc-guide-tag-color);background:var(--ng-doc-guide-tag-background)}.ng-doc-command-palette-signature{margin:0 0 var(--ng-doc-space-3);padding:var(--ng-doc-space-2) var(--ng-doc-space-3);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);font:400 13px/20px var(--ng-doc-code-font);white-space:pre-wrap;overflow-wrap:anywhere}.ng-doc-command-palette-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-footer{display:flex;align-items:center;gap:var(--ng-doc-space-4);min-height:44px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4);border-top:1px solid var(--ng-doc-border-color);background:var(--ng-doc-base-1);font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-footer>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.ng-doc-command-palette-switch{display:inline-flex;align-items:center;gap:8px;margin:-4px -4px -4px auto;padding:4px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:400 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text);cursor:pointer;white-space:nowrap}.ng-doc-command-palette-switch:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-command-palette-switch .ng-doc-command-palette-track{position:relative;width:28px;height:16px;border-radius:var(--ng-doc-radius-full);background:var(--ng-doc-base-7);transition:background var(--ng-doc-transition)}.ng-doc-command-palette-switch .ng-doc-command-palette-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs);transition:transform var(--ng-doc-transition) var(--ng-doc-easing, ease)}.ng-doc-command-palette-switch[aria-checked=true] .ng-doc-command-palette-track{background:var(--ng-doc-primary)}.ng-doc-command-palette-switch[aria-checked=true] .ng-doc-command-palette-track:after{transform:translate(12px)}:root[data-theme=dark] .ng-doc-command-palette-switch:not([aria-checked=true]) .ng-doc-command-palette-track{background:var(--ng-doc-base-8)}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-switch:not([aria-checked=true]) .ng-doc-command-palette-track{background:var(--ng-doc-base-8)}}@media(max-width:640px){.ng-doc-command-palette-body{grid-template-columns:minmax(0,1fr)}.ng-doc-command-palette-preview,.ng-doc-command-palette-wide{display:none!important}.ng-doc-command-palette-input{flex-wrap:wrap;row-gap:0;height:auto;padding-bottom:var(--ng-doc-space-2)}.ng-doc-command-palette-input input{height:48px}.ng-doc-command-palette-scopes{order:1;flex:1 1 100%}.ng-doc-command-palette-scopes button{flex:1;justify-content:center}.ng-doc-command-palette-footer{gap:var(--ng-doc-space-3);padding-left:var(--ng-doc-space-3)}}@media(prefers-reduced-motion:reduce){ng-doc-command-palette.ng-doc-command-palette-enter{animation:none}.ng-doc-command-palette-switch .ng-doc-command-palette-track,.ng-doc-command-palette-switch .ng-doc-command-palette-track:after{transition:none}}\n"] }]
+                    }, template: "<div\n  class=\"ng-doc-command-palette\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  [attr.aria-label]=\"texts.dialogLabel\"\n  (keydown)=\"onTrapKeydown($event)\">\n  <div class=\"ng-doc-command-palette-input\">\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.8\"\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    <input\n      #input\n      type=\"text\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      aria-expanded=\"true\"\n      aria-controls=\"ng-doc-command-palette-list\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [attr.aria-label]=\"texts.inputLabel\"\n      [attr.placeholder]=\"texts.inputPlaceholder\"\n      [attr.aria-activedescendant]=\"selected()?.id ?? null\"\n      [formField]=\"searchForm.query\"\n      (keydown)=\"onKeydown($event)\" />\n    <div\n      class=\"ng-doc-command-palette-scopes ng-doc-command-palette-segments\"\n      role=\"tablist\"\n      [attr.aria-label]=\"texts.scopesLabel\"\n      ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      @for (item of scopes; track item.id) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          aria-controls=\"ng-doc-command-palette-list\"\n          [attr.tabindex]=\"scope() === item.id ? 0 : -1\"\n          [attr.aria-selected]=\"scope() === item.id\"\n          [ngDocSelectionOrigin]=\"scope() === item.id\"\n          (mousedown)=\"$event.preventDefault()\"\n          (keydown)=\"onScopeKeydown($event)\"\n          (click)=\"selectScope(item.id)\">\n          {{ item.label }}\n        </button>\n      }\n    </div>\n    <kbd class=\"ng-doc-command-palette-kbd\">{{ texts.keyEscape }}</kbd>\n  </div>\n\n  <div class=\"ng-doc-command-palette-body\">\n    <div\n      #list\n      class=\"ng-doc-command-palette-list\"\n      id=\"ng-doc-command-palette-list\"\n      role=\"listbox\"\n      [attr.aria-label]=\"texts.resultsLabel\">\n      @for (section of sections(); track section.key) {\n        <div class=\"ng-doc-command-palette-group\" role=\"group\" [attr.aria-label]=\"section.title\">\n          <div class=\"ng-doc-command-palette-section\" aria-hidden=\"true\">\n            <span>{{ section.title }}</span>\n            <span class=\"ng-doc-command-palette-count\">{{ section.rows.length }}</span>\n          </div>\n          @for (row of section.rows; track row.id) {\n            <div\n              class=\"ng-doc-command-palette-row\"\n              role=\"option\"\n              [id]=\"row.id\"\n              [attr.data-ng-doc-type]=\"row.type\"\n              [attr.data-ng-doc-url]=\"row.url ?? null\"\n              [attr.aria-selected]=\"row.id === selected()?.id\"\n              (mousedown)=\"$event.preventDefault()\"\n              (mousemove)=\"hover(rows().indexOf(row))\"\n              (click)=\"activate(row)\">\n              <span class=\"ng-doc-command-palette-icon\" aria-hidden=\"true\">\n                <ng-container\n                  [ngTemplateOutlet]=\"icon\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row.icon }\"></ng-container>\n              </span>\n              <span\n                class=\"ng-doc-command-palette-name\"\n                [class.ng-doc-command-palette-mono]=\"row.type === 'api'\">\n                <span class=\"ng-doc-command-palette-label\">\n                  @for (segment of row.label; track $index) {\n                    @if (segment.match) {\n                      <mark>{{ segment.text }}</mark>\n                    } @else {\n                      <span>{{ segment.text }}</span>\n                    }\n                  }\n                </span>\n                @if (row.meta) {\n                  <small>{{ row.meta }}</small>\n                }\n              </span>\n              <span class=\"ng-doc-command-palette-end\">\n                @if (row.kind) {\n                  <ng-doc-kind-icon [kind]=\"row.kind\"></ng-doc-kind-icon>\n                } @else if (row.type === 'api') {\n                  <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"api\">{{\n                    texts.typeApi\n                  }}</span>\n                }\n                @if (row.keys?.length && shortcuts.enabled()) {\n                  @for (key of row.keys; track key) {\n                    <kbd class=\"ng-doc-command-palette-kbd\">{{ key }}</kbd>\n                  }\n                }\n                <svg\n                  class=\"ng-doc-command-palette-return\"\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  aria-hidden=\"true\">\n                  <path d=\"M20 5v7a3 3 0 0 1-3 3H5\" />\n                  <path d=\"m9 11-4 4 4 4\" />\n                </svg>\n              </span>\n            </div>\n          }\n        </div>\n      } @empty {\n        <div class=\"ng-doc-command-palette-empty\" role=\"presentation\">\n          @if (searching()) {\n            <ng-doc-spinner size=\"small\"></ng-doc-spinner>\n            {{ texts.searching }}\n          } @else if (failed()) {\n            {{ texts.failed }}\n          } @else {\n            {{ emptyMessage() }}\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"ng-doc-command-palette-preview\">\n      @if (selected(); as current) {\n        <div class=\"ng-doc-command-palette-preview-top\">\n          @switch (current.type) {\n            @case ('api') {\n              @if (current.kind) {\n                <ng-doc-kind-icon [kind]=\"current.kind\"></ng-doc-kind-icon>\n              } @else {\n                <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"api\">{{\n                  texts.typeApi\n                }}</span>\n              }\n              <span>{{ current.scope }}</span>\n            }\n            @case ('guide') {\n              <span class=\"ng-doc-command-palette-type\" data-ng-doc-page-type=\"guide\">{{\n                texts.typeGuide\n              }}</span>\n              <span>{{ current.meta }}</span>\n            }\n            @default {\n              <ng-container\n                [ngTemplateOutlet]=\"icon\"\n                [ngTemplateOutletContext]=\"{ $implicit: 'action' }\"></ng-container>\n              <span>{{ texts.typeAction }}</span>\n            }\n          }\n        </div>\n        <h2\n          class=\"ng-doc-command-palette-preview-title\"\n          [class.ng-doc-command-palette-mono]=\"current.type === 'api'\">\n          {{ current.title }}\n        </h2>\n        @if (current.type === 'action') {\n          <p class=\"ng-doc-command-palette-muted\">\n            {{ current.action?.keepOpen ? texts.actionKeepsOpen : texts.actionRunsImmediately }}\n          </p>\n          @if (current.keys?.length && shortcuts.enabled()) {\n            <div class=\"ng-doc-command-palette-hint\">\n              {{ texts.shortcut }}\n              @for (key of current.keys; track key) {\n                <kbd class=\"ng-doc-command-palette-kbd\">{{ key }}</kbd>\n              }\n            </div>\n          }\n        } @else {\n          @if (current.text) {\n            <p class=\"ng-doc-command-palette-text\">{{ current.text }}</p>\n          }\n          @if (current.signature) {\n            <pre class=\"ng-doc-command-palette-signature\"><code>{{ current.signature }}</code></pre>\n          }\n          <div class=\"ng-doc-command-palette-hint\">\n            <kbd class=\"ng-doc-command-palette-kbd\">\u21B5</kbd>\n            {{ current.type === 'api' ? texts.openSymbolPage : texts.open }}\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <div class=\"ng-doc-command-palette-announcer\" role=\"status\">{{ status() }}</div>\n\n  <div class=\"ng-doc-command-palette-footer\">\n    <span>\n      <kbd class=\"ng-doc-command-palette-kbd\">\u2191</kbd>\n      <kbd class=\"ng-doc-command-palette-kbd\">\u2193</kbd>\n      {{ texts.footerNavigate }}\n    </span>\n    <span class=\"ng-doc-command-palette-wide\"\n      ><kbd class=\"ng-doc-command-palette-kbd\">\u21B5</kbd> {{ texts.open }}</span\n    >\n    <span class=\"ng-doc-command-palette-wide\"\n      ><kbd class=\"ng-doc-command-palette-kbd\">{{ texts.keyTab }}</kbd>\n      {{ texts.footerScopes }}</span\n    >\n    @if (shortcuts.enabled()) {\n      <span class=\"ng-doc-command-palette-wide\"\n        ><kbd class=\"ng-doc-command-palette-kbd\">/</kbd> {{ texts.footerSlash }}</span\n      >\n    }\n    <button\n      class=\"ng-doc-command-palette-switch\"\n      type=\"button\"\n      role=\"switch\"\n      [attr.title]=\"texts.shortcutsSwitchTitle\"\n      [attr.aria-checked]=\"shortcuts.enabled()\"\n      (click)=\"shortcuts.toggle()\">\n      {{ texts.shortcutsSwitch }}\n      <span class=\"ng-doc-command-palette-track\" aria-hidden=\"true\"></span>\n    </button>\n  </div>\n</div>\n\n<ng-template #icon let-name>\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.8\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    @switch (name) {\n      @case ('symbol') {\n        <path d=\"m21 16-9 5-9-5V8l9-5 9 5z\" />\n        <path d=\"m3.3 7.5 8.7 5 8.7-5M12 22V12.5\" />\n      }\n      @case ('section') {\n        <path d=\"M4 9h16M4 15h16M10 3 8 21M16 3l-2 18\" />\n      }\n      @case ('action') {\n        <path d=\"M13 2 3 14h9l-1 8 10-12h-9z\" />\n      }\n      @default {\n        <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z\" />\n        <path d=\"M14 3v5h5M9 13h6M9 17h6\" />\n      }\n    }\n  </svg>\n</ng-template>\n", styles: [".ng-doc-command-palette-backdrop{background:rgb(var(--ng-doc-base-rgb)/.32)}:root[data-theme=dark] .ng-doc-command-palette-backdrop{background:#0000008c}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-backdrop{background:#0000008c}}ng-doc-command-palette{display:block;width:min(var(--ng-doc-search-dialog-width),100vw - 32px);font-family:var(--ng-doc-font-family);color:var(--ng-doc-text)}ng-doc-command-palette.ng-doc-command-palette-enter{animation:ng-doc-command-palette-enter .15s var(--ng-doc-easing, ease-out)}@media(max-width:640px){ng-doc-command-palette{width:calc(100vw - 16px)}}@keyframes ng-doc-command-palette-enter{0%{opacity:0;transform:scale(.98)}}.ng-doc-command-palette{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);max-height:min(600px,82vh);overflow:hidden;background:var(--ng-doc-background);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-search-border-radius, var(--ng-doc-radius-xl));box-shadow:var(--ng-doc-shadow-lg)}@media(max-width:640px){.ng-doc-command-palette{max-height:calc(100vh - 16px)}}.ng-doc-command-palette-announcer{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.ng-doc-command-palette-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);background:var(--ng-doc-kbd-background);border:1px solid var(--ng-doc-kbd-border-color);border-radius:var(--ng-doc-radius-xs)}.ng-doc-command-palette-mono{font-family:var(--ng-doc-code-font)}.ng-doc-command-palette-muted{color:var(--ng-doc-text-muted)}.ng-doc-command-palette-input{display:flex;align-items:center;gap:var(--ng-doc-space-3);height:56px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4);border-bottom:1px solid var(--ng-doc-border-color);color:var(--ng-doc-text-muted)}.ng-doc-command-palette-input svg{flex:none}.ng-doc-command-palette-input input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;font:400 16px/24px var(--ng-doc-font-family);color:var(--ng-doc-heading-color)}.ng-doc-command-palette-input input::placeholder{color:var(--ng-doc-text-muted);opacity:1}.ng-doc-command-palette-segments{position:relative;display:inline-flex;flex:none;gap:2px;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2)}.ng-doc-command-palette-segments ng-doc-selection{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-command-palette-segments button{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 8px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);cursor:pointer;white-space:nowrap}.ng-doc-command-palette-segments button:hover,.ng-doc-command-palette-segments button[aria-selected=true]{color:var(--ng-doc-heading-color)}.ng-doc-command-palette-segments button:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}:root[data-theme=dark] .ng-doc-command-palette-segments ng-doc-selection{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-segments ng-doc-selection{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-command-palette-body{display:grid;grid-template-columns:minmax(0,1fr) var(--ng-doc-search-preview-width);min-height:0}.ng-doc-command-palette-list{min-height:120px;padding:var(--ng-doc-space-2);overflow:auto;overscroll-behavior:contain;container:ng-doc-command-palette-list/inline-size}.ng-doc-command-palette-empty{display:flex;align-items:center;justify-content:center;gap:var(--ng-doc-space-2);font-size:14px;line-height:20px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-empty{padding:var(--ng-doc-space-8) var(--ng-doc-space-3)}.ng-doc-command-palette-section{display:flex;justify-content:space-between;margin:var(--ng-doc-space-4) var(--ng-doc-space-3) var(--ng-doc-space-2);font:600 11px/16px var(--ng-doc-font-family);letter-spacing:.05em;text-transform:uppercase;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-section .ng-doc-command-palette-count{font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums}.ng-doc-command-palette-group:first-child .ng-doc-command-palette-section{margin-top:var(--ng-doc-space-2)}.ng-doc-command-palette-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;column-gap:var(--ng-doc-space-3);min-height:40px;padding:4px var(--ng-doc-space-3);border-radius:var(--ng-doc-radius-md);font-size:14px;line-height:20px;color:var(--ng-doc-text);cursor:pointer}.ng-doc-command-palette-row:hover{background:var(--ng-doc-row-hover-background)}.ng-doc-command-palette-row[aria-selected=true]{background:var(--ng-doc-row-selected-background);box-shadow:inset 0 0 0 1px var(--ng-doc-row-selected-border)}.ng-doc-command-palette-row[aria-selected=true] .ng-doc-command-palette-return{display:block}.ng-doc-command-palette-row mark{background:none;color:var(--ng-doc-primary-strong);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}.ng-doc-command-palette-icon{display:grid;place-items:center;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ng-doc-search-result-header-color, var(--ng-doc-heading-color))}.ng-doc-command-palette-name.ng-doc-command-palette-mono{font-size:13px;font-weight:500}.ng-doc-command-palette-name small{margin-left:var(--ng-doc-space-2);font:400 12px var(--ng-doc-font-family);color:var(--ng-doc-text-muted)}.ng-doc-command-palette-end{display:inline-flex;align-items:center;gap:6px;justify-self:end}.ng-doc-command-palette-return{display:none;color:var(--ng-doc-primary-strong)}@container ng-doc-command-palette-list (max-width: 420px){.ng-doc-command-palette-row{column-gap:var(--ng-doc-space-2);padding:4px var(--ng-doc-space-2)}.ng-doc-command-palette-name small{display:none}}.ng-doc-command-palette-preview{padding:var(--ng-doc-space-4);overflow:auto;border-left:1px solid var(--ng-doc-border-color);background:var(--ng-doc-base-1);font-size:13px;line-height:20px}.ng-doc-command-palette-preview p{margin:0 0 var(--ng-doc-space-3)}.ng-doc-command-palette-preview-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ng-doc-space-2);font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-preview-title{margin:var(--ng-doc-space-2) 0 var(--ng-doc-space-1);padding:0;border:0;font:600 15px/22px var(--ng-doc-font-family);letter-spacing:0;color:var(--ng-doc-heading-color);overflow-wrap:anywhere}.ng-doc-command-palette-preview-title.ng-doc-command-palette-mono{font-family:var(--ng-doc-code-font)}.ng-doc-command-palette-text{display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;color:var(--ng-doc-search-result-color)}.ng-doc-command-palette-type{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:var(--ng-doc-radius-sm);font:600 10.5px/1 var(--ng-doc-font-family);white-space:nowrap}.ng-doc-command-palette-type[data-ng-doc-page-type=api]{color:var(--ng-doc-api-tag-color);background:var(--ng-doc-api-tag-background)}.ng-doc-command-palette-type[data-ng-doc-page-type=guide]{color:var(--ng-doc-guide-tag-color);background:var(--ng-doc-guide-tag-background)}.ng-doc-command-palette-signature{margin:0 0 var(--ng-doc-space-3);padding:var(--ng-doc-space-2) var(--ng-doc-space-3);border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-background);font:400 13px/20px var(--ng-doc-code-font);white-space:pre-wrap;overflow-wrap:anywhere}.ng-doc-command-palette-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-footer{display:flex;align-items:center;gap:var(--ng-doc-space-4);min-height:44px;padding:0 var(--ng-doc-space-3) 0 var(--ng-doc-space-4);border-top:1px solid var(--ng-doc-border-color);background:var(--ng-doc-base-1);font-size:12px;color:var(--ng-doc-text-muted)}.ng-doc-command-palette-footer>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.ng-doc-command-palette-switch{display:inline-flex;align-items:center;gap:8px;margin:-4px -4px -4px auto;padding:4px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:400 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text);cursor:pointer;white-space:nowrap}.ng-doc-command-palette-switch:focus-visible{outline:none;box-shadow:var(--ng-doc-focus-ring)}.ng-doc-command-palette-switch .ng-doc-command-palette-track{position:relative;width:28px;height:16px;border-radius:var(--ng-doc-radius-full);background:var(--ng-doc-base-7);transition:background var(--ng-doc-transition)}.ng-doc-command-palette-switch .ng-doc-command-palette-track:after{content:\"\";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs);transition:transform var(--ng-doc-transition) var(--ng-doc-easing, ease)}.ng-doc-command-palette-switch[aria-checked=true] .ng-doc-command-palette-track{background:var(--ng-doc-primary)}.ng-doc-command-palette-switch[aria-checked=true] .ng-doc-command-palette-track:after{transform:translate(12px)}:root[data-theme=dark] .ng-doc-command-palette-switch:not([aria-checked=true]) .ng-doc-command-palette-track{background:var(--ng-doc-base-8)}@media(prefers-color-scheme:dark){:root[data-theme=auto] .ng-doc-command-palette-switch:not([aria-checked=true]) .ng-doc-command-palette-track{background:var(--ng-doc-base-8)}}@media(max-width:640px){.ng-doc-command-palette-body{grid-template-columns:minmax(0,1fr)}.ng-doc-command-palette-preview,.ng-doc-command-palette-wide{display:none!important}.ng-doc-command-palette-input{flex-wrap:wrap;row-gap:0;height:auto;padding-bottom:var(--ng-doc-space-2)}.ng-doc-command-palette-input input{height:48px}.ng-doc-command-palette-scopes{order:1;flex:1 1 100%}.ng-doc-command-palette-scopes button{flex:1;justify-content:center}.ng-doc-command-palette-footer{gap:var(--ng-doc-space-3);padding-left:var(--ng-doc-space-3)}}@media(prefers-reduced-motion:reduce){ng-doc-command-palette.ng-doc-command-palette-enter{animation:none}.ng-doc-command-palette-switch .ng-doc-command-palette-track,.ng-doc-command-palette-switch .ng-doc-command-palette-track:after{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
 /**
  * Splits a text around the first case-insensitive occurrence of the query.