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

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

@@ -0,0 +1,498 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, computed, viewChild, linkedSignal, untracked, ElementRef, afterNextRender, afterRenderEffect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { rxResource } from '@angular/core/rxjs-interop';
+import { form, FormField } from '@angular/forms/signals';
+import { Router } from '@angular/router';
+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_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';
+
+const SCOPES = [
+    { id: 'all', label: 'All' },
+    { id: 'guides', label: 'Guides' },
+    { id: 'api', label: 'API' },
+    { id: 'actions', label: 'Actions' },
+];
+/**
+ * How many declarations whose name starts with the query rank above the guides, and the shortest
+ * query that pins them: one or two letters start too many names to single any out.
+ */
+const PINNED_LIMIT = 3;
+const PINNED_MIN_QUERY = 3;
+/** How long typing pauses before the search runs, in milliseconds. */
+const SEARCH_DEBOUNCE = 120;
+/**
+ * The search palette: a search field with scopes (all, guides, API and actions), a list of
+ * results grouped by type (guides first, then the API), a preview of the selected result and the
+ * switch for single-key shortcuts. The navbar search opens it with Command+K (Control+K) or the
+ * slash key.
+ */
+class NgDocCommandPaletteComponent {
+    constructor() {
+        this.scopes = SCOPES;
+        this.shortcuts = inject(NgDocShortcutsService);
+        this.data = inject(NG_DOC_DIALOG_DATA, {
+            optional: true,
+        });
+        this.overlayRef = inject(NgDocOverlayRef, { optional: true });
+        this.router = inject(Router);
+        this.searchEngine = inject(NgDocSearchEngine, { optional: true });
+        this.apiLists = inject(NgDocApiListIndexService);
+        this.model = signal({ query: this.data?.query ?? '' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.searchForm = form(this.model);
+        this.scope = signal('all', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+        this.query = computed(() => this.model().query.trim(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+        this.input = viewChild.required('input', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []));
+        this.list = viewChild.required('list', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+        this.results = rxResource({
+            params: () => this.query() || undefined,
+            stream: ({ params }) => timer(SEARCH_DEBOUNCE).pipe(switchMap(() => this.searchEngine?.search(params) ?? of([]))),
+        });
+        // The last results stay visible while the next query runs, so the list does not flicker.
+        this.hits = linkedSignal({ ...(ngDevMode ? { debugName: "hits" } : /* istanbul ignore next */ {}), source: () => ({
+                query: this.query(),
+                failed: this.results.status() === 'error',
+                hits: this.results.hasValue() ? this.results.value() : undefined,
+            }),
+            // A failed search shows the failure, not the hits of the previous query.
+            computation: (source, previous) => source.query && !source.failed ? source.hits ?? previous?.value ?? [] : [] });
+        // The generated API lists give the kind and scope of every declaration, and let the palette
+        // match declaration names directly. Without them the palette shows search results only.
+        this.symbols = this.apiLists.declarations;
+        this.symbolsByRoute = computed(() => new Map(this.symbols().map((symbol) => [symbol.route, symbol])), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "symbolsByRoute" }] : /* istanbul ignore next */ []));
+        this.actions = [
+            {
+                name: () => 'Toggle dark mode',
+                keywords: 'theme dark light mode',
+                keys: ['T'],
+                run: () => this.shortcuts.run('t'),
+            },
+            {
+                name: () => 'Copy link to this page',
+                keywords: 'copy link url share',
+                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',
+                keys: [],
+                keepOpen: true,
+                run: () => this.shortcuts.toggle(),
+            },
+        ];
+        this.sections = computed(() => {
+            const scope = this.scope();
+            const query = this.query();
+            const sections = [];
+            let apiRows = (scope === 'all' || scope === 'api') && query ? this.apiRows(query, scope === 'api') : [];
+            // Guides rank above the API reference: readers who search a topic usually want the guide
+            // that explains it first. A declaration whose name starts with the query is what the reader
+            // typed, though: it stays on top, so Enter opens it however the guide search ranks.
+            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 });
+            }
+            if ((scope === 'all' || scope === 'guides') && query) {
+                sections.push({
+                    key: 'guide',
+                    type: 'guide',
+                    title: 'Guides',
+                    rows: this.guideRows(query, scope === 'guides'),
+                });
+            }
+            if (apiRows.length) {
+                sections.push({ key: 'api', type: 'api', title: 'API', rows: apiRows });
+            }
+            if (scope === 'all' || scope === 'actions') {
+                sections.push({
+                    key: 'action',
+                    type: 'action',
+                    title: 'Actions',
+                    rows: this.actionRows(query),
+                });
+            }
+            let index = 0;
+            return sections
+                .filter((section) => section.rows.length)
+                .map((section) => ({
+                ...section,
+                rows: section.rows.map((row) => ({ ...row, id: `ng-doc-palette-option-${index++}` })),
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => this.sections().flatMap((section) => section.rows), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        // Whether the reader moved the selection (with the keyboard or the pointer) since the query or
+        // the scope last changed.
+        this.moved = linkedSignal({ ...(ngDevMode ? { debugName: "moved" } : /* istanbul ignore next */ {}), source: () => [this.query(), this.scope()],
+            computation: () => false });
+        // The first result is selected whenever the results change, unless the reader moved the
+        // selection: then it stays on the same result while the other source (the declaration names or
+        // the asynchronous search) adds rows around it.
+        this.active = linkedSignal({ ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), source: this.rows,
+            computation: (rows, previous) => {
+                const kept = previous && untracked(this.moved) ? previous.source[previous.value] : undefined;
+                const index = kept ? rows.findIndex((row) => sameResult(row, kept)) : -1;
+                return Math.max(index, 0);
+            } });
+        this.selected = computed(() => this.rows()[this.active()], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.searching = computed(() => !!this.query() && this.results.isLoading() && !this.hits().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
+        this.failed = computed(() => this.results.status() === 'error', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+        this.emptyMessage = computed(() => {
+            const query = this.query();
+            if (query) {
+                return `No results for “${query}”`;
+            }
+            return this.scope() === 'api'
+                ? 'Type to search the API.'
+                : this.scope() === 'guides'
+                    ? 'Type to search the guides.'
+                    : 'Type to search.';
+        }, /* @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 count = this.rows().filter((row) => row.type !== 'action').length;
+            if (this.failed()) {
+                return 'Search failed.';
+            }
+            if (this.searching()) {
+                return 'Searching…';
+            }
+            if (!this.query()) {
+                return `${scope} scope.`;
+            }
+            return count
+                ? `${scope} scope: ${count} ${count === 1 ? 'result' : 'results'}.`
+                : `${scope} scope: no results for “${this.query()}”.`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+        // Increments when the selection moves by keyboard, so only those moves scroll the list.
+        this.keyboardMove = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyboardMove" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef).nativeElement;
+        void this.apiLists.load();
+        afterNextRender(() => {
+            const input = this.input().nativeElement;
+            input.focus();
+            input.select();
+        });
+        afterRenderEffect(() => {
+            if (!this.keyboardMove()) {
+                return;
+            }
+            const id = untracked(this.selected)?.id;
+            const option = id ? this.list().nativeElement.querySelector(`#${id}`) : null;
+            option?.scrollIntoView?.({ block: 'nearest' });
+        });
+    }
+    /**
+     * Handles the keys of the search field: the arrow keys move the selection and Enter opens the
+     * selected result. Keys that compose text in an input method editor are left alone.
+     * @param event - The keyboard event of the search field.
+     */
+    onKeydown(event) {
+        if (event.isComposing || event.keyCode === 229) {
+            return;
+        }
+        untracked(() => {
+            switch (event.key) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this.move(event.key === 'ArrowDown' ? 1 : -1);
+                    break;
+                case 'Enter':
+                    event.preventDefault();
+                    this.activate(this.selected());
+                    break;
+            }
+        });
+    }
+    /**
+     * Handles the keys of the scope tabs: the arrow keys, Home and End select and focus a scope.
+     * @param event - The keyboard event of a scope tab.
+     */
+    onScopeKeydown(event) {
+        const index = SCOPES.findIndex(({ id }) => id === untracked(this.scope));
+        const next = event.key === 'ArrowRight'
+            ? (index + 1) % SCOPES.length
+            : event.key === 'ArrowLeft'
+                ? (index - 1 + SCOPES.length) % SCOPES.length
+                : event.key === 'Home'
+                    ? 0
+                    : event.key === 'End'
+                        ? SCOPES.length - 1
+                        : -1;
+        if (next < 0) {
+            return;
+        }
+        event.preventDefault();
+        this.scope.set(SCOPES[next].id);
+        this.host.querySelectorAll('[role="tab"]')[next]?.focus();
+    }
+    /**
+     * Keeps Tab inside the palette: from its last tab stop focus wraps to the search field, and
+     * Shift+Tab from the search field goes to the last tab stop.
+     * @param event - A keyboard event inside the palette.
+     */
+    onTrapKeydown(event) {
+        if (event.key !== 'Tab') {
+            return;
+        }
+        const stops = Array.from(this.host.querySelectorAll('input, button:not([tabindex="-1"])'));
+        const first = stops[0];
+        const last = stops[stops.length - 1];
+        if (!event.shiftKey && event.target === last) {
+            event.preventDefault();
+            first?.focus();
+        }
+        else if (event.shiftKey && event.target === first) {
+            event.preventDefault();
+            last?.focus();
+        }
+    }
+    /**
+     * Selects a scope by click and returns the focus to the search field.
+     * @param scope - The scope to select.
+     */
+    selectScope(scope) {
+        this.scope.set(scope);
+        this.input().nativeElement.focus();
+    }
+    /**
+     * Selects the result under the pointer, without scrolling the list.
+     * @param index - The index of the result.
+     */
+    hover(index) {
+        if (untracked(this.active) !== index) {
+            this.active.set(index);
+            this.moved.set(true);
+        }
+    }
+    /**
+     * Opens the given result: navigates to a page or runs an action.
+     * @param row - The result to open.
+     */
+    activate(row) {
+        if (!row) {
+            return;
+        }
+        if (row.action) {
+            if (!row.action.keepOpen) {
+                this.close();
+            }
+            row.action.run();
+            return;
+        }
+        this.close();
+        if (row.url) {
+            void this.router.navigateByUrl(row.url);
+        }
+    }
+    move(step) {
+        const count = this.rows().length;
+        if (count) {
+            this.active.set((this.active() + step + count) % count);
+            this.moved.set(true);
+            this.keyboardMove.update((value) => value + 1);
+        }
+    }
+    close() {
+        this.overlayRef?.close();
+    }
+    apiRows(query, all) {
+        const rows = new Map();
+        const needle = query.toLowerCase();
+        const matches = this.symbols()
+            .filter((symbol) => symbol.name.toLowerCase().includes(needle))
+            .sort((a, b) => a.name.toLowerCase().indexOf(needle) - b.name.toLowerCase().indexOf(needle) ||
+            a.name.length - b.name.length ||
+            a.name.localeCompare(b.name));
+        for (const symbol of matches) {
+            // The summary record of the symbol's page, when the query found it.
+            const hit = this.hitsFor(symbol.route);
+            rows.set(symbol.route, {
+                id: '',
+                type: 'api',
+                pinned: needle.length >= PINNED_MIN_QUERY && symbol.name.toLowerCase().startsWith(needle),
+                title: symbol.name,
+                label: highlight(symbol.name, query),
+                meta: symbol.scope,
+                icon: 'symbol',
+                kind: symbol.kind,
+                scope: symbol.scope,
+                url: `/${symbol.route}`,
+                text: hit?.description ?? symbol.description ?? hit?.content,
+                signature: hit?.signature ?? symbol.signature,
+            });
+        }
+        for (const hit of this.hits()) {
+            const index = hit.index;
+            if (index.pageType !== 'api') {
+                continue;
+            }
+            const key = routeKey(index.route) + (index.fragment ? `#${index.fragment}` : '');
+            if (rows.has(key) || (!index.fragment && rows.has(routeKey(index.route)))) {
+                continue;
+            }
+            const symbol = this.symbolsByRoute().get(routeKey(index.route));
+            const scope = symbol?.scope ?? index.breadcrumbs[1] ?? '';
+            // Only one record of a page carries the declaration's summary: a hit on another record of
+            // the page takes it from that record (when the query found it too) or from the API list.
+            const summary = index.fragment ? undefined : this.hitsFor(routeKey(index.route));
+            rows.set(key, {
+                id: '',
+                type: 'api',
+                title: index.title,
+                label: highlight(index.title, query),
+                meta: index.section ? `${index.section} · ${scope}` : scope,
+                icon: 'symbol',
+                kind: index.kind ?? summary?.kind ?? symbol?.kind,
+                scope,
+                url: pageUrl(index),
+                text: index.fragment
+                    ? index.description ?? index.content
+                    : summary?.description ?? symbol?.description ?? index.content,
+                signature: index.fragment ? index.signature : summary?.signature ?? symbol?.signature,
+            });
+        }
+        return [...rows.values()].slice(0, all ? 12 : 6);
+    }
+    guideRows(query, all) {
+        const rows = new Map();
+        for (const hit of this.hits()) {
+            const index = hit.index;
+            if (index.pageType !== 'guide') {
+                continue;
+            }
+            const key = routeKey(index.route) + (index.fragment ? `#${index.fragment}` : '');
+            if (rows.has(key)) {
+                continue;
+            }
+            const title = index.section || index.title;
+            const path = index.section
+                ? index.breadcrumbs
+                : index.breadcrumbs.slice(0, Math.max(index.breadcrumbs.length - 1, 0));
+            rows.set(key, {
+                id: '',
+                type: 'guide',
+                title,
+                label: highlight(title, query),
+                meta: path.join(' › '),
+                icon: index.fragment ? 'section' : 'page',
+                url: pageUrl(index),
+                text: index.content,
+            });
+        }
+        return [...rows.values()].slice(0, all ? 12 : 5);
+    }
+    actionRows(query) {
+        const needle = query.toLowerCase();
+        return this.actions
+            .filter((action) => !needle ||
+            action.name().toLowerCase().includes(needle) ||
+            action.keywords.split(' ').some((word) => word.startsWith(needle)))
+            .map((action) => ({
+            id: '',
+            type: 'action',
+            title: action.name(),
+            label: highlight(action.name(), query),
+            meta: '',
+            icon: 'action',
+            keys: action.keys,
+            action,
+        }));
+    }
+    /**
+     * The hit of a symbol's page that previews it: the record with the declaration's summary (the
+     * new engine puts it on one record of the page), or else any record outside a section.
+     * @param route - The route of the symbol's page.
+     */
+    hitsFor(route) {
+        const page = this.hits()
+            .map((hit) => hit.index)
+            .filter((index) => routeKey(index.route) === route && !index.section);
+        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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCommandPaletteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-command-palette', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormField,
+                        NgTemplateOutlet,
+                        NgDocKindIconComponent,
+                        NgDocSelectionComponent,
+                        NgDocSelectionHostDirective,
+                        NgDocSelectionOriginDirective,
+                        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"] }]
+        }], 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.
+ * @param text - The text to split.
+ * @param query - The query to find.
+ */
+function highlight(text, query) {
+    const start = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;
+    if (start < 0) {
+        return [{ text, match: false }];
+    }
+    const end = start + query.length;
+    return [
+        { text: text.slice(0, start), match: false },
+        { text: text.slice(start, end), match: true },
+        { text: text.slice(end), match: false },
+    ].filter((segment) => segment.text);
+}
+/**
+ * Whether two rows open the same result.
+ * @param a - A row.
+ * @param b - Another row.
+ */
+function sameResult(a, b) {
+    return a.type === b.type && (a.action ? a.action === b.action : a.url === b.url);
+}
+/**
+ * Normalizes a route to compare search records with the API list.
+ * @param route - A route with or without the leading slash.
+ */
+function routeKey(route) {
+    return route.replace(/^\/+/, '');
+}
+/**
+ * Builds the URL of a search record.
+ * @param index - The search record.
+ */
+function pageUrl(index) {
+    return `/${routeKey(index.route)}${index.fragment ? `#${index.fragment}` : ''}`;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocCommandPaletteComponent };
+//# sourceMappingURL=ng-doc-app-components-command-palette.mjs.map