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

package/fesm2022/ng-doc-app-components-api-list.mjs

@@ -1,95 +1,199 @@
-import { HttpClient } from '@angular/common/http';
+import { httpResource } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, input, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i1 from '@angular/forms';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { input, inject, signal, viewChild, computed, untracked, effect, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { form, FormField } from '@angular/forms/signals';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
-import { NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';
+import { ngDocKindLabel, NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';
+import { NgDocApiListIndexService } from '@ng-doc/app/services';
+import { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';
 import { asArray } from '@ng-doc/core/helpers/as-array';
-import { NgDocTextComponent, NgDocInputWrapperComponent, NgDocIconComponent, NgDocInputStringDirective, NgDocAutofocusDirective, NgDocTooltipDirective, NgDocRadioGroupDirective, NgDocButtonToggleComponent } from '@ng-doc/ui-kit';
+import { NgDocSelectionComponent, NgDocSelectionHostDirective, NgDocSelectionOriginDirective } from '@ng-doc/ui-kit/components/selection';
 import { NG_REQUEST_BASE_PATH } from '@ng-doc/ui-kit/tokens';
-import { startWith } from 'rxjs/operators';
 
+/**
+ * Orders kinds and names in English whatever the locale: `localeCompare` without a locale follows
+ * the process locale, so a prerendered index would depend on the machine that built it, and the
+ * browser would order a hydrated index differently from its prerendered HTML.
+ */
+const NAME_ORDER = new Intl.Collator('en');
+/**
+ * The index of API declarations: a filter that matches names and descriptions, grouping by kind
+ * or by scope, and a kind filter with counts. The filter, kind, scope and grouping are kept in
+ * the query parameters (filter, type, scope and group), so a filtered index can be linked.
+ */
 class NgDocApiListComponent {
     constructor() {
-        this.baseUrl = inject(NG_REQUEST_BASE_PATH);
+        /** The title of the page. */
         this.title = input('API References', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** The segment of the API list data, when the site has more than one API list. */
         this.segment = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "segment" }] : /* istanbul ignore next */ []));
-        this.apiList = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "apiList" }] : /* istanbul ignore next */ []));
-        this.formBuilder = inject(FormBuilder);
+        this.shortcuts = inject(NgDocShortcutsService);
+        this.model = signal({ filter: '' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        this.filterForm = form(this.model);
+        this.kind = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        this.scope = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
+        this.groupBy = signal('kind', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
         this.route = inject(ActivatedRoute);
         this.router = inject(Router);
-        this.httpClient = inject(HttpClient);
-        this.formGroup = this.formBuilder.group({
-            filter: [''],
-            scope: [''],
-            type: [''],
-        });
-        this.filter = toSignal(this.formGroup.valueChanges.pipe(startWith(this.formGroup.value)), {
-            initialValue: this.formGroup.value,
-        });
-        this.scopes = computed(() => asArray(new Set(this.apiList().flatMap((api) => api.title))).sort(), /* @ts-ignore */
+        this.basePath = inject(NG_REQUEST_BASE_PATH);
+        this.filterInput = viewChild('filterInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterInput" }] : /* istanbul ignore next */ []));
+        this.apiList = httpResource(() => this.basePath + asArray('assets/ng-doc', this.segment(), 'api-list.json').join('/'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "apiList" }] : /* istanbul ignore next */ []));
+        this.declarations = computed(() => this.apiList.hasValue()
+            ? (this.apiList.value() ?? []).flatMap((scope) => scope.items.map((item) => ({ ...item, scope: scope.title })))
+            : [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "declarations" }] : /* istanbul ignore next */ []));
+        this.scopes = computed(() => [...new Set(this.declarations().map(({ scope }) => scope))].sort(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scopes" }] : /* istanbul ignore next */ []));
-        this.types = computed(() => asArray(new Set(this.apiList()
-            .flatMap((api) => api.items)
-            .flatMap((item) => item.type))).sort(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "types" }] : /* istanbul ignore next */ []));
-        this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((paramMap) => this.formGroup.setValue({
-            filter: paramMap.get('filter') || null,
-            scope: paramMap.get('scope') || null,
-            type: paramMap.get('type') || null,
-        }));
-        this.formGroup.valueChanges
-            .pipe(takeUntilDestroyed())
-            .subscribe((formValue) => this.router.navigate([], {
-            relativeTo: this.route,
-            queryParams: formValue,
-            queryParamsHandling: 'merge',
-        }));
-        this.filteredApiList = computed(() => {
-            const { filter, scope, type } = this.filter();
-            return this.apiList()
-                .filter((api) => !scope || api.title === scope)
-                .map((api) => ({
-                ...api,
-                items: api.items
-                    .filter((item) => item.name.toLowerCase().includes(filter?.toLowerCase() ?? '') &&
-                    (!type || item.type === type))
-                    .sort((a, b) => a.type.localeCompare(b.type) || a.name.localeCompare(b.name)),
+        this.hasDescriptions = computed(() => this.declarations().some(({ description }) => !!description), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasDescriptions" }] : /* istanbul ignore next */ []));
+        /** Declarations in the selected scope, before the text and kind filters. */
+        this.inScope = computed(() => this.declarations().filter(({ scope }) => !this.scope() || scope === this.scope()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inScope" }] : /* istanbul ignore next */ []));
+        this.kinds = computed(() => {
+            const counts = new Map();
+            for (const { type } of this.inScope()) {
+                counts.set(type, (counts.get(type) ?? 0) + 1);
+            }
+            return [...counts]
+                .map(([kind, count]) => ({ kind, label: ngDocKindLabel(kind), count }))
+                .sort((a, b) => NAME_ORDER.compare(a.label, b.label));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kinds" }] : /* istanbul ignore next */ []));
+        this.visible = computed(() => {
+            const needle = this.model().filter.trim().toLowerCase();
+            const kind = this.kind();
+            return this.inScope().filter((item) => (!kind || item.type === kind) &&
+                (!needle ||
+                    item.name.toLowerCase().includes(needle) ||
+                    !!item.description?.toLowerCase().includes(needle)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.groups = computed(() => {
+            const byName = (a, b) => NAME_ORDER.compare(a.name, b.name);
+            if (this.groupBy() === 'scope') {
+                return this.scopes()
+                    .map((scope) => ({
+                    id: `scope-${slug(scope)}`,
+                    label: scope,
+                    items: this.visible()
+                        .filter((item) => item.scope === scope)
+                        .sort((a, b) => NAME_ORDER.compare(ngDocKindLabel(a.type), ngDocKindLabel(b.type)) || byName(a, b)),
+                }))
+                    .filter((group) => group.items.length);
+            }
+            return this.kinds()
+                .map(({ kind, label }) => ({
+                id: `kind-${slug(kind)}`,
+                kind,
+                label,
+                items: this.visible()
+                    .filter((item) => item.type === kind)
+                    .sort(byName),
             }))
-                .filter((api) => api.items.length);
+                .filter((group) => group.items.length);
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "filteredApiList" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.loaded = computed(() => this.apiList.hasValue(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+        this.failed = computed(() => this.apiList.status() === 'error', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []));
+        this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((params) => {
+            const filter = params.get('filter') ?? '';
+            if (untracked(this.model).filter !== filter) {
+                this.model.set({ filter });
+            }
+            this.kind.set(params.get('type') ?? '');
+            this.scope.set(params.get('scope') ?? '');
+            this.groupBy.set(params.get('group') === 'scope' ? 'scope' : 'kind');
+        });
+        // Writes the state back to the query parameters. It navigates only when they differ, so the
+        // navigation it causes does not run it again.
+        effect(() => {
+            const wanted = {
+                filter: this.model().filter || null,
+                type: this.kind() || null,
+                scope: this.scope() || null,
+                group: this.groupBy() === 'scope' ? 'scope' : null,
+            };
+            untracked(() => {
+                const current = this.route.snapshot.queryParamMap;
+                const changed = Object.keys(wanted).some((key) => (current.get(key) ?? null) !== wanted[key]);
+                if (changed) {
+                    void this.router.navigate([], {
+                        relativeTo: this.route,
+                        queryParams: wanted,
+                        queryParamsHandling: 'merge',
+                        replaceUrl: true,
+                    });
+                }
+            });
+        });
+        // The search palette reuses the list this page loaded instead of requesting it again.
+        const apiLists = inject(NgDocApiListIndexService);
+        effect(() => {
+            if (this.apiList.hasValue()) {
+                const list = this.apiList.value();
+                const segment = this.segment() ?? '';
+                untracked(() => apiLists.remember(segment, list ?? []));
+            }
+        });
+        const removeShortcut = this.shortcuts.register({
+            key: 'f',
+            handler: () => this.filterInput()?.nativeElement.focus(),
+        });
+        inject(DestroyRef).onDestroy(removeShortcut);
+    }
+    /**
+     * Shows only the declarations of a kind, or of every kind.
+     * @param kind - The kind, or an empty string for every kind.
+     */
+    selectKind(kind) {
+        this.kind.set(kind);
     }
-    ngOnInit() {
-        this.httpClient
-            .get(this.baseUrl + asArray('assets/ng-doc', this.segment(), 'api-list.json').join('/'))
-            .subscribe((apiList) => this.apiList.set(apiList));
+    /**
+     * Groups the declarations by kind or by scope.
+     * @param groupBy - The grouping.
+     */
+    selectGroupBy(groupBy) {
+        this.groupBy.set(groupBy);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocApiListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocApiListComponent, isStandalone: true, selector: "ng-doc-api-list", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, segment: { classPropertyName: "segment", publicName: "segment", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h1 ng-doc-text>{{ title() }}</h1>\n<div class=\"ng-doc-api-list-wrapper\">\n  <form [formGroup]=\"formGroup\">\n    @if (types().length) {\n      <h3>Declaration types</h3>\n      <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"type\">\n        @for (type of types(); track type) {\n          <li>\n            <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"type\">\n              <ng-doc-kind-icon [kind]=\"type\" size=\"medium\"></ng-doc-kind-icon>\n              {{ type }}\n            </button>\n          </li>\n        }\n      </ul>\n    }\n\n    @if (scopes().length) {\n      <h3>Scopes</h3>\n      <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"scope\">\n        @for (scope of scopes(); track scope) {\n          <li>\n            <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"scope\">\n              {{ scope }}\n            </button>\n          </li>\n        }\n      </ul>\n    }\n\n    <h3>Filter</h3>\n    <ng-doc-input-wrapper class=\"ng-doc-api-list-filter-input\">\n      <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n      <input\n        ngDocInputString\n        formControlName=\"filter\"\n        placeholder=\"Declaration name...\"\n        ngDocAutofocus />\n    </ng-doc-input-wrapper>\n  </form>\n\n  <div class=\"ng-doc-api-list\">\n    @for (scope of filteredApiList(); track scope) {\n      <div class=\"ng-doc-api-scope\">\n        <h3 class=\"ng-doc-scope-title\" ng-doc-text>{{ scope.title }}</h3>\n        @if (scope.items.length) {\n          <ul class=\"ng-doc-scope-items\">\n            @for (apiReference of scope.items; track apiReference) {\n              <li class=\"ng-doc-scope-item\">\n                <a class=\"ng-doc-scope-item-link\" [routerLink]=\"[apiReference.route]\">\n                  <ng-doc-kind-icon\n                    [kind]=\"apiReference.type\"\n                    size=\"medium\"\n                    [ngDocTooltip]=\"apiReference.type\">\n                  </ng-doc-kind-icon>\n                  {{ apiReference.name }}\n                </a>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host h1{margin-top:0}:host .ng-doc-filter-list{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--ng-doc-base-gutter);list-style:none;padding:0}@container api-list-wrapper (max-width: 775px){:host .ng-doc-filter-list{grid-template-columns:repeat(4,1fr)}}@container api-list-wrapper (max-width: 600px){:host .ng-doc-filter-list{grid-template-columns:repeat(3,1fr)}}@container api-list-wrapper (max-width: 500px){:host .ng-doc-filter-list{grid-template-columns:repeat(2,1fr)}}@container api-list-wrapper (max-width: 350px){:host .ng-doc-filter-list{grid-template-columns:repeat(1,1fr)}}:host .ng-doc-filter-list .ng-doc-filter-button{justify-content:flex-start;text-wrap:nowrap;width:100%}:host .ng-doc-filter-list .ng-doc-filter-button ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter)}:host .ng-doc-api-list-filter-input{max-width:450px}:host .ng-doc-api-list-wrapper{container:api-list-wrapper/inline-size}:host .ng-doc-api-list-wrapper .ng-doc-api-filter{display:flex;margin-top:calc(var(--ng-doc-base-gutter) * 3);flex-wrap:wrap;gap:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-api-list-wrapper .ng-doc-api-filter .ng-doc-api-filter-item{width:200px}:host .ng-doc-api-list-wrapper .ng-doc-api-list{margin-top:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope{display:flex;flex-direction:column}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items{margin-top:calc(var(--ng-doc-base-gutter) * 3);list-style:none;padding:0}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item{float:left;width:33%;overflow:hidden;min-width:330px;text-overflow:ellipsis;white-space:nowrap}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link{display:flex;align-items:center;border-left:1px solid var(--ng-doc-border-color);padding:var(--ng-doc-base-gutter);color:var(--ng-doc-text);background:color-mix(in srgb,var(--ng-doc-scope-item-link-background),transparent 90%);text-decoration:none}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link:hover{color:var(--ng-doc-heading-color);border-left-color:var(--ng-doc-primary);--ng-doc-scope-item-link-background: var(--ng-doc-primary)}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter);text-decoration:none!important}:host ng-doc-input-wrapper ng-doc-icon{--ng-doc-icon-color: var(--ng-doc-text-muted)}\n"], dependencies: [{ kind: "component", type: NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: NgDocInputWrapperComponent, selector: "ng-doc-input-wrapper", inputs: ["blurContent", "blurContext", "align"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "directive", type: NgDocInputStringDirective, selector: "input[ngDocInputString]" }, { kind: "directive", type: NgDocAutofocusDirective, selector: "[ngDocAutofocus]", inputs: ["selectAll"] }, { kind: "component", type: NgDocKindIconComponent, selector: "ng-doc-kind-icon", inputs: ["kind", "type", "size"] }, { kind: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgDocRadioGroupDirective, selector: "[ngDocRadioGroup]" }, { kind: "component", type: NgDocButtonToggleComponent, selector: "[ng-doc-button-toggle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** Shows the declarations of every scope. */
+    clearScope() {
+        this.scope.set('');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocApiListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocApiListComponent, isStandalone: true, selector: "ng-doc-api-list", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, segment: { classPropertyName: "segment", publicName: "segment", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<h1 class=\"ng-doc-api-list-title\">{{ title() }}</h1>\n@if (loaded()) {\n  <p class=\"ng-doc-api-list-lead\">\n    {{ declarations().length }} declarations in {{ scopes().length }}\n    {{ scopes().length === 1 ? 'scope' : 'scopes' }}.\n  </p>\n}\n\n<div class=\"ng-doc-api-list-tools\">\n  <label class=\"ng-doc-api-list-filter\">\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.8\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\">\n      <path d=\"M3 5h18l-7 8.5V19l-4 2v-7.5z\" />\n    </svg>\n    <input\n      #filterInput\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [placeholder]=\"hasDescriptions() ? 'Filter by name or description' : 'Filter by name'\"\n      [attr.aria-label]=\"\n        hasDescriptions()\n          ? 'Filter declarations by name or description'\n          : 'Filter declarations by name'\n      \"\n      [attr.aria-keyshortcuts]=\"shortcuts.enabled() ? 'F' : null\"\n      [formField]=\"filterForm.filter\" />\n    @if (shortcuts.enabled()) {\n      <kbd class=\"ng-doc-api-list-kbd\">F</kbd>\n    }\n  </label>\n  <div class=\"ng-doc-api-list-group-by\">\n    <span id=\"ng-doc-api-list-group-by\">Group by</span>\n    <div\n      class=\"ng-doc-api-list-segments\"\n      role=\"group\"\n      aria-labelledby=\"ng-doc-api-list-group-by\"\n      ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      <button\n        type=\"button\"\n        [attr.aria-pressed]=\"groupBy() === 'kind'\"\n        [ngDocSelectionOrigin]=\"groupBy() === 'kind'\"\n        (click)=\"selectGroupBy('kind')\">\n        Kind\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-pressed]=\"groupBy() === 'scope'\"\n        [ngDocSelectionOrigin]=\"groupBy() === 'scope'\"\n        (click)=\"selectGroupBy('scope')\">\n        Scope\n      </button>\n    </div>\n  </div>\n</div>\n\n@if (kinds().length) {\n  <div class=\"ng-doc-api-list-kinds\" role=\"group\" aria-label=\"Filter by kind\">\n    <button type=\"button\" [attr.aria-pressed]=\"!kind()\" (click)=\"selectKind('')\">\n      All <span class=\"ng-doc-api-list-count\">{{ inScope().length }}</span>\n    </button>\n    @for (item of kinds(); track item.kind) {\n      <button\n        type=\"button\"\n        [attr.data-ng-doc-kind]=\"item.kind\"\n        [attr.aria-pressed]=\"kind() === item.kind\"\n        (click)=\"selectKind(item.kind)\">\n        <span class=\"ng-doc-api-list-dot\" [attr.data-ng-doc-kind]=\"item.kind\"></span>\n        {{ item.label }}\n        <span class=\"ng-doc-api-list-count\">{{ item.count }}</span>\n      </button>\n    }\n  </div>\n}\n\n@if (scope()) {\n  <p class=\"ng-doc-api-list-scope-note\">\n    Showing {{ scope() }} only.\n    <button type=\"button\" (click)=\"clearScope()\">Show every scope</button>\n  </p>\n}\n\n@for (group of groups(); track group.id) {\n  <section class=\"ng-doc-api-list-group\" [id]=\"group.id\">\n    <h2 class=\"ng-doc-api-list-group-title\">\n      @if (group.kind) {\n        <ng-doc-kind-icon [kind]=\"group.kind\" size=\"medium\"></ng-doc-kind-icon>\n      } @else {\n        {{ group.label }}\n      }\n      <span class=\"ng-doc-api-list-count\">{{ group.items.length }}</span>\n    </h2>\n    <ul class=\"ng-doc-api-list-index\" [class.ng-doc-api-list-described]=\"hasDescriptions()\">\n      @for (item of group.items; track item.route) {\n        <li>\n          <a [routerLink]=\"item.route\">\n            <span class=\"ng-doc-api-list-name\">{{ item.name }}</span>\n            @if (hasDescriptions()) {\n              @if (item.description) {\n                <span class=\"ng-doc-api-list-description\" [title]=\"item.description\">{{\n                  item.description\n                }}</span>\n              } @else {\n                <span class=\"ng-doc-api-list-description ng-doc-api-list-none\">No description</span>\n              }\n            }\n            @if (group.kind) {\n              <span class=\"ng-doc-api-list-scope\">{{ item.scope }}</span>\n            } @else {\n              <ng-doc-kind-icon class=\"ng-doc-api-list-scope\" [kind]=\"item.type\"></ng-doc-kind-icon>\n            }\n          </a>\n        </li>\n      }\n    </ul>\n  </section>\n} @empty {\n  @if (loaded()) {\n    <p class=\"ng-doc-api-list-empty\">No declarations match.</p>\n  } @else if (failed()) {\n    <p class=\"ng-doc-api-list-empty\">The API list could not be loaded.</p>\n  }\n}\n", styles: [":host{display:block;max-width:var(--ng-doc-api-content-max-width);font-family:var(--ng-doc-font-family);color:var(--ng-doc-text)}.ng-doc-api-list-title{margin-top:0}.ng-doc-api-list-lead{margin:var(--ng-doc-space-2) 0 0;font-size:var(--ng-doc-font-size);color:var(--ng-doc-text-muted)}.ng-doc-api-list-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ng-doc-space-3);margin:var(--ng-doc-space-6) 0 var(--ng-doc-space-3)}.ng-doc-api-list-filter{display:flex;flex:1 1 280px;align-items:center;gap:var(--ng-doc-space-2);max-width:420px;height:36px;padding:0 var(--ng-doc-space-2) 0 var(--ng-doc-space-3);border:var(--ng-doc-input-border);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-input-background-color, var(--ng-doc-background));color:var(--ng-doc-text-muted);cursor:text}.ng-doc-api-list-filter:hover{border:var(--ng-doc-input-border-hover)}.ng-doc-api-list-filter:focus-within{box-shadow:var(--ng-doc-focus-ring)}.ng-doc-api-list-filter svg{flex:none}.ng-doc-api-list-filter input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;font:400 14px/20px var(--ng-doc-font-family);color:var(--ng-doc-heading-color)}.ng-doc-api-list-filter input::placeholder{color:var(--ng-doc-text-muted);opacity:1}.ng-doc-api-list-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--ng-doc-kbd-border-color);border-radius:var(--ng-doc-radius-xs);background:var(--ng-doc-kbd-background);font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted)}.ng-doc-api-list-group-by{display:flex;align-items:center;gap:var(--ng-doc-space-2);margin-left:auto;font-size:13px;color:var(--ng-doc-text-muted)}.ng-doc-api-list-segments{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2)}.ng-doc-api-list-segments ng-doc-selection,.ng-doc-api-list-segments ng-doc-selection:not([data-ng-doc-placed])~button[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-api-list-segments button{position:relative;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:500 13px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);cursor:pointer}.ng-doc-api-list-segments button:hover,.ng-doc-api-list-segments button[aria-pressed=true]{color:var(--ng-doc-heading-color)}:host-context([data-theme=dark]) .ng-doc-api-list-segments ng-doc-selection,:host-context([data-theme=dark]) .ng-doc-api-list-segments ng-doc-selection:not([data-ng-doc-placed])~button[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) .ng-doc-api-list-segments ng-doc-selection,:host-context([data-theme=auto]) .ng-doc-api-list-segments ng-doc-selection:not([data-ng-doc-placed])~button[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-api-list-kinds{display:flex;flex-wrap:wrap;gap:2px var(--ng-doc-space-1);margin:0 0 var(--ng-doc-space-2);padding-bottom:var(--ng-doc-space-3);border-bottom:1px solid var(--ng-doc-border-color)}.ng-doc-api-list-kinds button{display:inline-flex;flex:none;align-items:center;gap:7px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-md);background:none;font:500 13px/1 var(--ng-doc-font-family);color:var(--ng-doc-text);white-space:nowrap;cursor:pointer}.ng-doc-api-list-kinds button:hover{background:var(--ng-doc-hover-background);color:var(--ng-doc-heading-color)}.ng-doc-api-list-kinds button[aria-pressed=true]{background:var(--ng-doc-primary-soft);color:var(--ng-doc-primary-strong);font-weight:600}.ng-doc-api-list-kinds button[aria-pressed=true] .ng-doc-api-list-count{color:var(--ng-doc-primary-strong)}.ng-doc-api-list-count{font-size:12px;font-weight:400;color:var(--ng-doc-text-muted);font-variant-numeric:tabular-nums}.ng-doc-api-list-dot{--_hue: var(--ng-doc-hue-neutral);display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--_hue)}.ng-doc-api-list-dot[data-ng-doc-kind=Class]{--_hue: var(--ng-doc-class-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Interface]{--_hue: var(--ng-doc-interface-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Enum]{--_hue: var(--ng-doc-enum-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Variable]{--_hue: var(--ng-doc-variable-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Function]{--_hue: var(--ng-doc-function-background)}.ng-doc-api-list-dot[data-ng-doc-kind=TypeAlias]{--_hue: var(--ng-doc-type-alias-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Component]{--_hue: var(--ng-doc-component-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Directive]{--_hue: var(--ng-doc-directive-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Injectable]{--_hue: var(--ng-doc-injectable-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Pipe]{--_hue: var(--ng-doc-pipe-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=NgModule]{--_hue: var(--ng-doc-ng-module-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=ng-doc-tag-selector]{--_hue: var(--ng-doc-selector-background)}.ng-doc-api-list-scope-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ng-doc-space-2);margin:var(--ng-doc-space-3) 0 0;font-size:14px;color:var(--ng-doc-text-muted)}.ng-doc-api-list-scope-note button{padding:0;border:0;background:none;font:inherit;color:var(--ng-doc-link-color);cursor:pointer}.ng-doc-api-list-group{margin-top:var(--ng-doc-space-8);scroll-margin-top:calc(var(--ng-doc-navbar-height) + 16px)}.ng-doc-api-list-group-title{display:flex;align-items:center;gap:var(--ng-doc-space-2);margin:0 0 var(--ng-doc-space-2);padding:0;border:0;font-family:var(--ng-doc-heading-font-family);font-size:17px;line-height:26px;font-weight:600;color:var(--ng-doc-heading-color)}.ng-doc-api-list-group-title .ng-doc-api-list-count{font-family:var(--ng-doc-font-family);font-size:13px}.ng-doc-api-list-index{margin:0;padding:0;list-style:none;border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-lg);overflow:hidden}.ng-doc-api-list-index li{margin:0;padding:0}.ng-doc-api-list-index li+li{border-top:1px solid var(--ng-doc-base-2)}.ng-doc-api-list-index a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ng-doc-space-4);min-height:44px;padding:8px var(--ng-doc-space-4);font-size:14px;line-height:20px;color:var(--ng-doc-text);text-decoration:none}.ng-doc-api-list-index a:hover{background:var(--ng-doc-scope-item-link-background, var(--ng-doc-row-hover-background))}.ng-doc-api-list-index a:hover .ng-doc-api-list-name{color:var(--ng-doc-link-color)}.ng-doc-api-list-index a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}.ng-doc-api-list-index.ng-doc-api-list-described a{grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto}.ng-doc-api-list-name{min-width:0;overflow-wrap:anywhere;font:500 13px/20px var(--ng-doc-code-font);color:var(--ng-doc-heading-color)}.ng-doc-api-list-description{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-api-list-none{color:var(--ng-doc-text-muted)}.ng-doc-api-list-scope{justify-self:end;font-size:12px;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-api-list-empty{padding:var(--ng-doc-space-5) var(--ng-doc-space-4);text-align:center;font-size:14px;color:var(--ng-doc-text-muted)}@media(max-width:900px){.ng-doc-api-list-index.ng-doc-api-list-described a{grid-template-columns:minmax(0,16rem) minmax(0,1fr)}.ng-doc-api-list-index.ng-doc-api-list-described a .ng-doc-api-list-scope{display:none}}@media(max-width:640px){.ng-doc-api-list-filter{flex-basis:100%;max-width:none}.ng-doc-api-list-group-by{margin-left:0}.ng-doc-api-list-kinds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ng-doc-api-list-index.ng-doc-api-list-described a{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px var(--ng-doc-space-3)}}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocApiListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocApiListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-api-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgDocTextComponent,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        NgDocInputWrapperComponent,
-                        NgDocIconComponent,
-                        NgDocInputStringDirective,
-                        NgDocAutofocusDirective,
+                        FormField,
                         NgDocKindIconComponent,
-                        NgDocTooltipDirective,
+                        NgDocSelectionComponent,
+                        NgDocSelectionHostDirective,
+                        NgDocSelectionOriginDirective,
                         RouterLink,
-                        NgDocRadioGroupDirective,
-                        NgDocButtonToggleComponent,
-                    ], template: "<h1 ng-doc-text>{{ title() }}</h1>\n<div class=\"ng-doc-api-list-wrapper\">\n  <form [formGroup]=\"formGroup\">\n    @if (types().length) {\n      <h3>Declaration types</h3>\n      <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"type\">\n        @for (type of types(); track type) {\n          <li>\n            <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"type\">\n              <ng-doc-kind-icon [kind]=\"type\" size=\"medium\"></ng-doc-kind-icon>\n              {{ type }}\n            </button>\n          </li>\n        }\n      </ul>\n    }\n\n    @if (scopes().length) {\n      <h3>Scopes</h3>\n      <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"scope\">\n        @for (scope of scopes(); track scope) {\n          <li>\n            <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"scope\">\n              {{ scope }}\n            </button>\n          </li>\n        }\n      </ul>\n    }\n\n    <h3>Filter</h3>\n    <ng-doc-input-wrapper class=\"ng-doc-api-list-filter-input\">\n      <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n      <input\n        ngDocInputString\n        formControlName=\"filter\"\n        placeholder=\"Declaration name...\"\n        ngDocAutofocus />\n    </ng-doc-input-wrapper>\n  </form>\n\n  <div class=\"ng-doc-api-list\">\n    @for (scope of filteredApiList(); track scope) {\n      <div class=\"ng-doc-api-scope\">\n        <h3 class=\"ng-doc-scope-title\" ng-doc-text>{{ scope.title }}</h3>\n        @if (scope.items.length) {\n          <ul class=\"ng-doc-scope-items\">\n            @for (apiReference of scope.items; track apiReference) {\n              <li class=\"ng-doc-scope-item\">\n                <a class=\"ng-doc-scope-item-link\" [routerLink]=\"[apiReference.route]\">\n                  <ng-doc-kind-icon\n                    [kind]=\"apiReference.type\"\n                    size=\"medium\"\n                    [ngDocTooltip]=\"apiReference.type\">\n                  </ng-doc-kind-icon>\n                  {{ apiReference.name }}\n                </a>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host h1{margin-top:0}:host .ng-doc-filter-list{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--ng-doc-base-gutter);list-style:none;padding:0}@container api-list-wrapper (max-width: 775px){:host .ng-doc-filter-list{grid-template-columns:repeat(4,1fr)}}@container api-list-wrapper (max-width: 600px){:host .ng-doc-filter-list{grid-template-columns:repeat(3,1fr)}}@container api-list-wrapper (max-width: 500px){:host .ng-doc-filter-list{grid-template-columns:repeat(2,1fr)}}@container api-list-wrapper (max-width: 350px){:host .ng-doc-filter-list{grid-template-columns:repeat(1,1fr)}}:host .ng-doc-filter-list .ng-doc-filter-button{justify-content:flex-start;text-wrap:nowrap;width:100%}:host .ng-doc-filter-list .ng-doc-filter-button ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter)}:host .ng-doc-api-list-filter-input{max-width:450px}:host .ng-doc-api-list-wrapper{container:api-list-wrapper/inline-size}:host .ng-doc-api-list-wrapper .ng-doc-api-filter{display:flex;margin-top:calc(var(--ng-doc-base-gutter) * 3);flex-wrap:wrap;gap:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-api-list-wrapper .ng-doc-api-filter .ng-doc-api-filter-item{width:200px}:host .ng-doc-api-list-wrapper .ng-doc-api-list{margin-top:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope{display:flex;flex-direction:column}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items{margin-top:calc(var(--ng-doc-base-gutter) * 3);list-style:none;padding:0}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item{float:left;width:33%;overflow:hidden;min-width:330px;text-overflow:ellipsis;white-space:nowrap}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link{display:flex;align-items:center;border-left:1px solid var(--ng-doc-border-color);padding:var(--ng-doc-base-gutter);color:var(--ng-doc-text);background:color-mix(in srgb,var(--ng-doc-scope-item-link-background),transparent 90%);text-decoration:none}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link:hover{color:var(--ng-doc-heading-color);border-left-color:var(--ng-doc-primary);--ng-doc-scope-item-link-background: var(--ng-doc-primary)}:host .ng-doc-api-list-wrapper .ng-doc-api-list .ng-doc-api-scope .ng-doc-scope-items .ng-doc-scope-item .ng-doc-scope-item-link ng-doc-kind-icon{margin-right:var(--ng-doc-base-gutter);text-decoration:none!important}:host ng-doc-input-wrapper ng-doc-icon{--ng-doc-icon-color: var(--ng-doc-text-muted)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], segment: [{ type: i0.Input, args: [{ isSignal: true, alias: "segment", required: false }] }] } });
+                    ], template: "<h1 class=\"ng-doc-api-list-title\">{{ title() }}</h1>\n@if (loaded()) {\n  <p class=\"ng-doc-api-list-lead\">\n    {{ declarations().length }} declarations in {{ scopes().length }}\n    {{ scopes().length === 1 ? 'scope' : 'scopes' }}.\n  </p>\n}\n\n<div class=\"ng-doc-api-list-tools\">\n  <label class=\"ng-doc-api-list-filter\">\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.8\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\">\n      <path d=\"M3 5h18l-7 8.5V19l-4 2v-7.5z\" />\n    </svg>\n    <input\n      #filterInput\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [placeholder]=\"hasDescriptions() ? 'Filter by name or description' : 'Filter by name'\"\n      [attr.aria-label]=\"\n        hasDescriptions()\n          ? 'Filter declarations by name or description'\n          : 'Filter declarations by name'\n      \"\n      [attr.aria-keyshortcuts]=\"shortcuts.enabled() ? 'F' : null\"\n      [formField]=\"filterForm.filter\" />\n    @if (shortcuts.enabled()) {\n      <kbd class=\"ng-doc-api-list-kbd\">F</kbd>\n    }\n  </label>\n  <div class=\"ng-doc-api-list-group-by\">\n    <span id=\"ng-doc-api-list-group-by\">Group by</span>\n    <div\n      class=\"ng-doc-api-list-segments\"\n      role=\"group\"\n      aria-labelledby=\"ng-doc-api-list-group-by\"\n      ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      <button\n        type=\"button\"\n        [attr.aria-pressed]=\"groupBy() === 'kind'\"\n        [ngDocSelectionOrigin]=\"groupBy() === 'kind'\"\n        (click)=\"selectGroupBy('kind')\">\n        Kind\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-pressed]=\"groupBy() === 'scope'\"\n        [ngDocSelectionOrigin]=\"groupBy() === 'scope'\"\n        (click)=\"selectGroupBy('scope')\">\n        Scope\n      </button>\n    </div>\n  </div>\n</div>\n\n@if (kinds().length) {\n  <div class=\"ng-doc-api-list-kinds\" role=\"group\" aria-label=\"Filter by kind\">\n    <button type=\"button\" [attr.aria-pressed]=\"!kind()\" (click)=\"selectKind('')\">\n      All <span class=\"ng-doc-api-list-count\">{{ inScope().length }}</span>\n    </button>\n    @for (item of kinds(); track item.kind) {\n      <button\n        type=\"button\"\n        [attr.data-ng-doc-kind]=\"item.kind\"\n        [attr.aria-pressed]=\"kind() === item.kind\"\n        (click)=\"selectKind(item.kind)\">\n        <span class=\"ng-doc-api-list-dot\" [attr.data-ng-doc-kind]=\"item.kind\"></span>\n        {{ item.label }}\n        <span class=\"ng-doc-api-list-count\">{{ item.count }}</span>\n      </button>\n    }\n  </div>\n}\n\n@if (scope()) {\n  <p class=\"ng-doc-api-list-scope-note\">\n    Showing {{ scope() }} only.\n    <button type=\"button\" (click)=\"clearScope()\">Show every scope</button>\n  </p>\n}\n\n@for (group of groups(); track group.id) {\n  <section class=\"ng-doc-api-list-group\" [id]=\"group.id\">\n    <h2 class=\"ng-doc-api-list-group-title\">\n      @if (group.kind) {\n        <ng-doc-kind-icon [kind]=\"group.kind\" size=\"medium\"></ng-doc-kind-icon>\n      } @else {\n        {{ group.label }}\n      }\n      <span class=\"ng-doc-api-list-count\">{{ group.items.length }}</span>\n    </h2>\n    <ul class=\"ng-doc-api-list-index\" [class.ng-doc-api-list-described]=\"hasDescriptions()\">\n      @for (item of group.items; track item.route) {\n        <li>\n          <a [routerLink]=\"item.route\">\n            <span class=\"ng-doc-api-list-name\">{{ item.name }}</span>\n            @if (hasDescriptions()) {\n              @if (item.description) {\n                <span class=\"ng-doc-api-list-description\" [title]=\"item.description\">{{\n                  item.description\n                }}</span>\n              } @else {\n                <span class=\"ng-doc-api-list-description ng-doc-api-list-none\">No description</span>\n              }\n            }\n            @if (group.kind) {\n              <span class=\"ng-doc-api-list-scope\">{{ item.scope }}</span>\n            } @else {\n              <ng-doc-kind-icon class=\"ng-doc-api-list-scope\" [kind]=\"item.type\"></ng-doc-kind-icon>\n            }\n          </a>\n        </li>\n      }\n    </ul>\n  </section>\n} @empty {\n  @if (loaded()) {\n    <p class=\"ng-doc-api-list-empty\">No declarations match.</p>\n  } @else if (failed()) {\n    <p class=\"ng-doc-api-list-empty\">The API list could not be loaded.</p>\n  }\n}\n", styles: [":host{display:block;max-width:var(--ng-doc-api-content-max-width);font-family:var(--ng-doc-font-family);color:var(--ng-doc-text)}.ng-doc-api-list-title{margin-top:0}.ng-doc-api-list-lead{margin:var(--ng-doc-space-2) 0 0;font-size:var(--ng-doc-font-size);color:var(--ng-doc-text-muted)}.ng-doc-api-list-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ng-doc-space-3);margin:var(--ng-doc-space-6) 0 var(--ng-doc-space-3)}.ng-doc-api-list-filter{display:flex;flex:1 1 280px;align-items:center;gap:var(--ng-doc-space-2);max-width:420px;height:36px;padding:0 var(--ng-doc-space-2) 0 var(--ng-doc-space-3);border:var(--ng-doc-input-border);border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-input-background-color, var(--ng-doc-background));color:var(--ng-doc-text-muted);cursor:text}.ng-doc-api-list-filter:hover{border:var(--ng-doc-input-border-hover)}.ng-doc-api-list-filter:focus-within{box-shadow:var(--ng-doc-focus-ring)}.ng-doc-api-list-filter svg{flex:none}.ng-doc-api-list-filter input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;font:400 14px/20px var(--ng-doc-font-family);color:var(--ng-doc-heading-color)}.ng-doc-api-list-filter input::placeholder{color:var(--ng-doc-text-muted);opacity:1}.ng-doc-api-list-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--ng-doc-kbd-border-color);border-radius:var(--ng-doc-radius-xs);background:var(--ng-doc-kbd-background);font:500 12px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted)}.ng-doc-api-list-group-by{display:flex;align-items:center;gap:var(--ng-doc-space-2);margin-left:auto;font-size:13px;color:var(--ng-doc-text-muted)}.ng-doc-api-list-segments{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:var(--ng-doc-radius-md);background:var(--ng-doc-base-2)}.ng-doc-api-list-segments ng-doc-selection,.ng-doc-api-list-segments ng-doc-selection:not([data-ng-doc-placed])~button[aria-pressed=true]{border-radius:var(--ng-doc-radius-sm);background:var(--ng-doc-background);box-shadow:var(--ng-doc-shadow-xs)}.ng-doc-api-list-segments button{position:relative;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-sm);background:none;font:500 13px/1 var(--ng-doc-font-family);color:var(--ng-doc-text-muted);cursor:pointer}.ng-doc-api-list-segments button:hover,.ng-doc-api-list-segments button[aria-pressed=true]{color:var(--ng-doc-heading-color)}:host-context([data-theme=dark]) .ng-doc-api-list-segments ng-doc-selection,:host-context([data-theme=dark]) .ng-doc-api-list-segments ng-doc-selection:not([data-ng-doc-placed])~button[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}@media(prefers-color-scheme:dark){:host-context([data-theme=auto]) .ng-doc-api-list-segments ng-doc-selection,:host-context([data-theme=auto]) .ng-doc-api-list-segments ng-doc-selection:not([data-ng-doc-placed])~button[aria-pressed=true]{box-shadow:var(--ng-doc-shadow-xs),inset 0 0 0 1px var(--ng-doc-base-4)}}.ng-doc-api-list-kinds{display:flex;flex-wrap:wrap;gap:2px var(--ng-doc-space-1);margin:0 0 var(--ng-doc-space-2);padding-bottom:var(--ng-doc-space-3);border-bottom:1px solid var(--ng-doc-border-color)}.ng-doc-api-list-kinds button{display:inline-flex;flex:none;align-items:center;gap:7px;height:28px;padding:0 10px;border:0;border-radius:var(--ng-doc-radius-md);background:none;font:500 13px/1 var(--ng-doc-font-family);color:var(--ng-doc-text);white-space:nowrap;cursor:pointer}.ng-doc-api-list-kinds button:hover{background:var(--ng-doc-hover-background);color:var(--ng-doc-heading-color)}.ng-doc-api-list-kinds button[aria-pressed=true]{background:var(--ng-doc-primary-soft);color:var(--ng-doc-primary-strong);font-weight:600}.ng-doc-api-list-kinds button[aria-pressed=true] .ng-doc-api-list-count{color:var(--ng-doc-primary-strong)}.ng-doc-api-list-count{font-size:12px;font-weight:400;color:var(--ng-doc-text-muted);font-variant-numeric:tabular-nums}.ng-doc-api-list-dot{--_hue: var(--ng-doc-hue-neutral);display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--_hue)}.ng-doc-api-list-dot[data-ng-doc-kind=Class]{--_hue: var(--ng-doc-class-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Interface]{--_hue: var(--ng-doc-interface-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Enum]{--_hue: var(--ng-doc-enum-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Variable]{--_hue: var(--ng-doc-variable-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Function]{--_hue: var(--ng-doc-function-background)}.ng-doc-api-list-dot[data-ng-doc-kind=TypeAlias]{--_hue: var(--ng-doc-type-alias-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Component]{--_hue: var(--ng-doc-component-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Directive]{--_hue: var(--ng-doc-directive-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Injectable]{--_hue: var(--ng-doc-injectable-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=Pipe]{--_hue: var(--ng-doc-pipe-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=NgModule]{--_hue: var(--ng-doc-ng-module-decorator-background)}.ng-doc-api-list-dot[data-ng-doc-kind=ng-doc-tag-selector]{--_hue: var(--ng-doc-selector-background)}.ng-doc-api-list-scope-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ng-doc-space-2);margin:var(--ng-doc-space-3) 0 0;font-size:14px;color:var(--ng-doc-text-muted)}.ng-doc-api-list-scope-note button{padding:0;border:0;background:none;font:inherit;color:var(--ng-doc-link-color);cursor:pointer}.ng-doc-api-list-group{margin-top:var(--ng-doc-space-8);scroll-margin-top:calc(var(--ng-doc-navbar-height) + 16px)}.ng-doc-api-list-group-title{display:flex;align-items:center;gap:var(--ng-doc-space-2);margin:0 0 var(--ng-doc-space-2);padding:0;border:0;font-family:var(--ng-doc-heading-font-family);font-size:17px;line-height:26px;font-weight:600;color:var(--ng-doc-heading-color)}.ng-doc-api-list-group-title .ng-doc-api-list-count{font-family:var(--ng-doc-font-family);font-size:13px}.ng-doc-api-list-index{margin:0;padding:0;list-style:none;border:1px solid var(--ng-doc-border-color);border-radius:var(--ng-doc-radius-lg);overflow:hidden}.ng-doc-api-list-index li{margin:0;padding:0}.ng-doc-api-list-index li+li{border-top:1px solid var(--ng-doc-base-2)}.ng-doc-api-list-index a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ng-doc-space-4);min-height:44px;padding:8px var(--ng-doc-space-4);font-size:14px;line-height:20px;color:var(--ng-doc-text);text-decoration:none}.ng-doc-api-list-index a:hover{background:var(--ng-doc-scope-item-link-background, var(--ng-doc-row-hover-background))}.ng-doc-api-list-index a:hover .ng-doc-api-list-name{color:var(--ng-doc-link-color)}.ng-doc-api-list-index a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ng-doc-primary)}.ng-doc-api-list-index.ng-doc-api-list-described a{grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto}.ng-doc-api-list-name{min-width:0;overflow-wrap:anywhere;font:500 13px/20px var(--ng-doc-code-font);color:var(--ng-doc-heading-color)}.ng-doc-api-list-description{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ng-doc-api-list-none{color:var(--ng-doc-text-muted)}.ng-doc-api-list-scope{justify-self:end;font-size:12px;color:var(--ng-doc-text-muted);white-space:nowrap}.ng-doc-api-list-empty{padding:var(--ng-doc-space-5) var(--ng-doc-space-4);text-align:center;font-size:14px;color:var(--ng-doc-text-muted)}@media(max-width:900px){.ng-doc-api-list-index.ng-doc-api-list-described a{grid-template-columns:minmax(0,16rem) minmax(0,1fr)}.ng-doc-api-list-index.ng-doc-api-list-described a .ng-doc-api-list-scope{display:none}}@media(max-width:640px){.ng-doc-api-list-filter{flex-basis:100%;max-width:none}.ng-doc-api-list-group-by{margin-left:0}.ng-doc-api-list-kinds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ng-doc-api-list-index.ng-doc-api-list-described a{grid-template-columns:minmax(0,1fr);gap:2px;padding:10px var(--ng-doc-space-3)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], segment: [{ type: i0.Input, args: [{ isSignal: true, alias: "segment", required: false }] }], filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }] } });
+/**
+ * An id fragment for a kind or a scope.
+ * @param value - The kind or the scope.
+ */
+function slug(value) {
+    return value
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+}
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-app-components-api-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-api-list.mjs","sources":["../../../../libs/app/components/api-list/api-list.component.ts","../../../../libs/app/components/api-list/api-list.component.html","../../../../libs/app/components/api-list/ng-doc-app-components-api-list.ts"],"sourcesContent":["import { HttpClient } from '@angular/common/http';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n  OnInit,\n  Signal,\n  signal,\n  WritableSignal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport {\n  FormBuilder,\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { ActivatedRoute, ParamMap, Router, RouterLink } from '@angular/router';\nimport { NgDocKindIconComponent } from '@ng-doc/app/components/kind-icon';\nimport { NgDocFormPartialValue } from '@ng-doc/app/types';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport { NgDocApiList, NgDocApiListItem } from '@ng-doc/core/interfaces';\nimport {\n  NgDocAutofocusDirective,\n  NgDocButtonToggleComponent,\n  NgDocIconComponent,\n  NgDocInputStringDirective,\n  NgDocInputWrapperComponent,\n  NgDocRadioGroupDirective,\n  NgDocTextComponent,\n  NgDocTooltipDirective,\n} from '@ng-doc/ui-kit';\nimport { NG_REQUEST_BASE_PATH } from '@ng-doc/ui-kit/tokens';\nimport { startWith } from 'rxjs/operators';\n\ninterface ApiFilterForm {\n  filter: FormControl<string | null>;\n  scope: FormControl<string | null>;\n  type: FormControl<string | null>;\n}\n\n@Component({\n  selector: 'ng-doc-api-list',\n  templateUrl: './api-list.component.html',\n  styleUrls: ['./api-list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgDocTextComponent,\n    FormsModule,\n    ReactiveFormsModule,\n    NgDocInputWrapperComponent,\n    NgDocIconComponent,\n    NgDocInputStringDirective,\n    NgDocAutofocusDirective,\n    NgDocKindIconComponent,\n    NgDocTooltipDirective,\n    RouterLink,\n    NgDocRadioGroupDirective,\n    NgDocButtonToggleComponent,\n  ],\n})\nexport class NgDocApiListComponent implements OnInit {\n  private readonly baseUrl = inject(NG_REQUEST_BASE_PATH);\n\n  title = input<string>('API References');\n  segment = input<string>();\n\n  apiList: WritableSignal<NgDocApiList[]> = signal([]);\n  filteredApiList: Signal<NgDocApiList[]>;\n  filter: Signal<any>;\n  scopes: Signal<string[]>;\n  types: Signal<string[]>;\n\n  protected formGroup: FormGroup<ApiFilterForm>;\n\n  private readonly formBuilder = inject(FormBuilder);\n  private readonly route = inject(ActivatedRoute);\n  private readonly router = inject(Router);\n  private readonly httpClient = inject(HttpClient);\n\n  constructor() {\n    this.formGroup = this.formBuilder.group({\n      filter: [''],\n      scope: [''],\n      type: [''],\n    });\n\n    this.filter = toSignal(this.formGroup.valueChanges.pipe(startWith(this.formGroup.value)), {\n      initialValue: this.formGroup.value,\n    });\n\n    this.scopes = computed(() =>\n      asArray(new Set(this.apiList().flatMap((api: NgDocApiList) => api.title))).sort(),\n    );\n\n    this.types = computed(() =>\n      asArray(\n        new Set(\n          this.apiList()\n            .flatMap((api: NgDocApiList) => api.items)\n            .flatMap((item: NgDocApiListItem) => item.type),\n        ),\n      ).sort(),\n    );\n\n    this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((paramMap: ParamMap) =>\n      this.formGroup.setValue({\n        filter: paramMap.get('filter') || null,\n        scope: paramMap.get('scope') || null,\n        type: paramMap.get('type') || null,\n      }),\n    );\n\n    this.formGroup.valueChanges\n      .pipe(takeUntilDestroyed())\n      .subscribe((formValue: NgDocFormPartialValue<typeof this.formGroup>) =>\n        this.router.navigate([], {\n          relativeTo: this.route,\n          queryParams: formValue,\n          queryParamsHandling: 'merge',\n        }),\n      );\n\n    this.filteredApiList = computed(() => {\n      const { filter, scope, type } = this.filter();\n\n      return this.apiList()\n        .filter((api: NgDocApiList) => !scope || api.title === scope)\n        .map((api: NgDocApiList) => ({\n          ...api,\n          items: api.items\n            .filter(\n              (item: NgDocApiListItem) =>\n                item.name.toLowerCase().includes(filter?.toLowerCase() ?? '') &&\n                (!type || item.type === type),\n            )\n            .sort(\n              (a: NgDocApiListItem, b: NgDocApiListItem) =>\n                a.type.localeCompare(b.type) || a.name.localeCompare(b.name),\n            ),\n        }))\n        .filter((api: NgDocApiList) => api.items.length);\n    });\n  }\n\n  ngOnInit(): void {\n    this.httpClient\n      .get<\n        NgDocApiList[]\n      >(this.baseUrl + asArray('assets/ng-doc', this.segment(), 'api-list.json').join('/'))\n      .subscribe((apiList) => this.apiList.set(apiList));\n  }\n}\n","<h1 ng-doc-text>{{ title() }}</h1>\n<div class=\"ng-doc-api-list-wrapper\">\n  <form [formGroup]=\"formGroup\">\n    @if (types().length) {\n      <h3>Declaration types</h3>\n      <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"type\">\n        @for (type of types(); track type) {\n          <li>\n            <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"type\">\n              <ng-doc-kind-icon [kind]=\"type\" size=\"medium\"></ng-doc-kind-icon>\n              {{ type }}\n            </button>\n          </li>\n        }\n      </ul>\n    }\n\n    @if (scopes().length) {\n      <h3>Scopes</h3>\n      <ul class=\"ng-doc-filter-list\" ngDocRadioGroup formControlName=\"scope\">\n        @for (scope of scopes(); track scope) {\n          <li>\n            <button class=\"ng-doc-filter-button\" ng-doc-button-toggle [value]=\"scope\">\n              {{ scope }}\n            </button>\n          </li>\n        }\n      </ul>\n    }\n\n    <h3>Filter</h3>\n    <ng-doc-input-wrapper class=\"ng-doc-api-list-filter-input\">\n      <ng-doc-icon icon=\"search\" ngDocInputWrapperLeft></ng-doc-icon>\n      <input\n        ngDocInputString\n        formControlName=\"filter\"\n        placeholder=\"Declaration name...\"\n        ngDocAutofocus />\n    </ng-doc-input-wrapper>\n  </form>\n\n  <div class=\"ng-doc-api-list\">\n    @for (scope of filteredApiList(); track scope) {\n      <div class=\"ng-doc-api-scope\">\n        <h3 class=\"ng-doc-scope-title\" ng-doc-text>{{ scope.title }}</h3>\n        @if (scope.items.length) {\n          <ul class=\"ng-doc-scope-items\">\n            @for (apiReference of scope.items; track apiReference) {\n              <li class=\"ng-doc-scope-item\">\n                <a class=\"ng-doc-scope-item-link\" [routerLink]=\"[apiReference.route]\">\n                  <ng-doc-kind-icon\n                    [kind]=\"apiReference.type\"\n                    size=\"medium\"\n                    [ngDocTooltip]=\"apiReference.type\">\n                  </ng-doc-kind-icon>\n                  {{ apiReference.name }}\n                </a>\n              </li>\n            }\n          </ul>\n        }\n      </div>\n    }\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-api-list.mjs","sources":["../../../../libs/app/components/api-list/api-list.component.ts","../../../../libs/app/components/api-list/api-list.component.html","../../../../libs/app/components/api-list/ng-doc-app-components-api-list.ts"],"sourcesContent":["import { httpResource } from '@angular/common/http';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  Signal,\n  signal,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { form, FormField } from '@angular/forms/signals';\nimport { ActivatedRoute, ParamMap, Params, Router, RouterLink } from '@angular/router';\nimport { NgDocKindIconComponent, ngDocKindLabel } from '@ng-doc/app/components/kind-icon';\nimport { NgDocApiListIndexService } from '@ng-doc/app/services';\nimport { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';\nimport { asArray } from '@ng-doc/core/helpers/as-array';\nimport type { NgDocApiList, NgDocApiListItem } from '@ng-doc/core/interfaces';\nimport {\n  NgDocSelectionComponent,\n  NgDocSelectionHostDirective,\n  NgDocSelectionOriginDirective,\n} from '@ng-doc/ui-kit/components/selection';\nimport { NG_REQUEST_BASE_PATH } from '@ng-doc/ui-kit/tokens';\n\n/**\n * Orders kinds and names in English whatever the locale: `localeCompare` without a locale follows\n * the process locale, so a prerendered index would depend on the machine that built it, and the\n * browser would order a hydrated index differently from its prerendered HTML.\n */\nconst NAME_ORDER = new Intl.Collator('en');\n\n/** How the API index groups declarations. */\ntype GroupBy = 'kind' | 'scope';\n\n/**\n * A declaration of the API list. The generated list may carry a one-line description; the index\n * filters by it and shows it when it is present.\n */\ninterface Declaration extends NgDocApiListItem {\n  description?: string;\n  scope: string;\n}\n\ninterface Group {\n  id: string;\n  kind?: string;\n  label: string;\n  items: Declaration[];\n}\n\ninterface KindFilter {\n  kind: string;\n  label: string;\n  count: number;\n}\n\n/**\n * The index of API declarations: a filter that matches names and descriptions, grouping by kind\n * or by scope, and a kind filter with counts. The filter, kind, scope and grouping are kept in\n * the query parameters (filter, type, scope and group), so a filtered index can be linked.\n */\n@Component({\n  selector: 'ng-doc-api-list',\n  templateUrl: './api-list.component.html',\n  styleUrls: ['./api-list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    FormField,\n    NgDocKindIconComponent,\n    NgDocSelectionComponent,\n    NgDocSelectionHostDirective,\n    NgDocSelectionOriginDirective,\n    RouterLink,\n  ],\n})\nexport class NgDocApiListComponent {\n  /** The title of the page. */\n  readonly title = input<string>('API References');\n  /** The segment of the API list data, when the site has more than one API list. */\n  readonly segment = input<string>();\n\n  protected readonly shortcuts = inject(NgDocShortcutsService);\n  protected readonly model = signal({ filter: '' });\n  protected readonly filterForm = form(this.model);\n  protected readonly kind = signal('');\n  protected readonly scope = signal('');\n  protected readonly groupBy = signal<GroupBy>('kind');\n\n  private readonly route = inject(ActivatedRoute);\n  private readonly router = inject(Router);\n  private readonly basePath = inject(NG_REQUEST_BASE_PATH);\n  private readonly filterInput = viewChild<ElementRef<HTMLInputElement>>('filterInput');\n\n  private readonly apiList = httpResource<NgDocApiList[]>(\n    () => this.basePath + asArray('assets/ng-doc', this.segment(), 'api-list.json').join('/'),\n  );\n\n  protected readonly declarations: Signal<Declaration[]> = computed(() =>\n    this.apiList.hasValue()\n      ? (this.apiList.value() ?? []).flatMap((scope: NgDocApiList) =>\n          scope.items.map((item: NgDocApiListItem) => ({ ...item, scope: scope.title })),\n        )\n      : [],\n  );\n\n  protected readonly scopes = computed(() =>\n    [...new Set(this.declarations().map(({ scope }: Declaration) => scope))].sort(),\n  );\n\n  protected readonly hasDescriptions = computed(() =>\n    this.declarations().some(({ description }: Declaration) => !!description),\n  );\n\n  /** Declarations in the selected scope, before the text and kind filters. */\n  protected readonly inScope = computed(() =>\n    this.declarations().filter(({ scope }: Declaration) => !this.scope() || scope === this.scope()),\n  );\n\n  protected readonly kinds: Signal<KindFilter[]> = computed(() => {\n    const counts = new Map<string, number>();\n\n    for (const { type } of this.inScope()) {\n      counts.set(type, (counts.get(type) ?? 0) + 1);\n    }\n\n    return [...counts]\n      .map(([kind, count]: [string, number]) => ({ kind, label: ngDocKindLabel(kind), count }))\n      .sort((a: KindFilter, b: KindFilter) => NAME_ORDER.compare(a.label, b.label));\n  });\n\n  protected readonly visible = computed(() => {\n    const needle = this.model().filter.trim().toLowerCase();\n    const kind = this.kind();\n\n    return this.inScope().filter(\n      (item: Declaration) =>\n        (!kind || item.type === kind) &&\n        (!needle ||\n          item.name.toLowerCase().includes(needle) ||\n          !!item.description?.toLowerCase().includes(needle)),\n    );\n  });\n\n  protected readonly groups: Signal<Group[]> = computed(() => {\n    const byName = (a: Declaration, b: Declaration) => NAME_ORDER.compare(a.name, b.name);\n\n    if (this.groupBy() === 'scope') {\n      return this.scopes()\n        .map((scope: string) => ({\n          id: `scope-${slug(scope)}`,\n          label: scope,\n          items: this.visible()\n            .filter((item: Declaration) => item.scope === scope)\n            .sort(\n              (a: Declaration, b: Declaration) =>\n                NAME_ORDER.compare(ngDocKindLabel(a.type), ngDocKindLabel(b.type)) || byName(a, b),\n            ),\n        }))\n        .filter((group: Group) => group.items.length);\n    }\n\n    return this.kinds()\n      .map(({ kind, label }: KindFilter) => ({\n        id: `kind-${slug(kind)}`,\n        kind,\n        label,\n        items: this.visible()\n          .filter((item: Declaration) => item.type === kind)\n          .sort(byName),\n      }))\n      .filter((group: Group) => group.items.length);\n  });\n\n  protected readonly loaded = computed(() => this.apiList.hasValue());\n  protected readonly failed = computed(() => this.apiList.status() === 'error');\n\n  constructor() {\n    this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((params: ParamMap) => {\n      const filter = params.get('filter') ?? '';\n\n      if (untracked(this.model).filter !== filter) {\n        this.model.set({ filter });\n      }\n      this.kind.set(params.get('type') ?? '');\n      this.scope.set(params.get('scope') ?? '');\n      this.groupBy.set(params.get('group') === 'scope' ? 'scope' : 'kind');\n    });\n\n    // Writes the state back to the query parameters. It navigates only when they differ, so the\n    // navigation it causes does not run it again.\n    effect(() => {\n      const wanted: Params = {\n        filter: this.model().filter || null,\n        type: this.kind() || null,\n        scope: this.scope() || null,\n        group: this.groupBy() === 'scope' ? 'scope' : null,\n      };\n\n      untracked(() => {\n        const current = this.route.snapshot.queryParamMap;\n        const changed = Object.keys(wanted).some(\n          (key: string) => (current.get(key) ?? null) !== wanted[key],\n        );\n\n        if (changed) {\n          void this.router.navigate([], {\n            relativeTo: this.route,\n            queryParams: wanted,\n            queryParamsHandling: 'merge',\n            replaceUrl: true,\n          });\n        }\n      });\n    });\n\n    // The search palette reuses the list this page loaded instead of requesting it again.\n    const apiLists = inject(NgDocApiListIndexService);\n\n    effect(() => {\n      if (this.apiList.hasValue()) {\n        const list = this.apiList.value();\n        const segment = this.segment() ?? '';\n\n        untracked(() => apiLists.remember(segment, list ?? []));\n      }\n    });\n\n    const removeShortcut = this.shortcuts.register({\n      key: 'f',\n      handler: () => this.filterInput()?.nativeElement.focus(),\n    });\n\n    inject(DestroyRef).onDestroy(removeShortcut);\n  }\n\n  /**\n   * Shows only the declarations of a kind, or of every kind.\n   * @param kind - The kind, or an empty string for every kind.\n   */\n  protected selectKind(kind: string): void {\n    this.kind.set(kind);\n  }\n\n  /**\n   * Groups the declarations by kind or by scope.\n   * @param groupBy - The grouping.\n   */\n  protected selectGroupBy(groupBy: GroupBy): void {\n    this.groupBy.set(groupBy);\n  }\n\n  /** Shows the declarations of every scope. */\n  protected clearScope(): void {\n    this.scope.set('');\n  }\n}\n\n/**\n * An id fragment for a kind or a scope.\n * @param value - The kind or the scope.\n */\nfunction slug(value: string): string {\n  return value\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '-')\n    .replace(/^-|-$/g, '');\n}\n","<h1 class=\"ng-doc-api-list-title\">{{ title() }}</h1>\n@if (loaded()) {\n  <p class=\"ng-doc-api-list-lead\">\n    {{ declarations().length }} declarations in {{ scopes().length }}\n    {{ scopes().length === 1 ? 'scope' : 'scopes' }}.\n  </p>\n}\n\n<div class=\"ng-doc-api-list-tools\">\n  <label class=\"ng-doc-api-list-filter\">\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.8\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\">\n      <path d=\"M3 5h18l-7 8.5V19l-4 2v-7.5z\" />\n    </svg>\n    <input\n      #filterInput\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [placeholder]=\"hasDescriptions() ? 'Filter by name or description' : 'Filter by name'\"\n      [attr.aria-label]=\"\n        hasDescriptions()\n          ? 'Filter declarations by name or description'\n          : 'Filter declarations by name'\n      \"\n      [attr.aria-keyshortcuts]=\"shortcuts.enabled() ? 'F' : null\"\n      [formField]=\"filterForm.filter\" />\n    @if (shortcuts.enabled()) {\n      <kbd class=\"ng-doc-api-list-kbd\">F</kbd>\n    }\n  </label>\n  <div class=\"ng-doc-api-list-group-by\">\n    <span id=\"ng-doc-api-list-group-by\">Group by</span>\n    <div\n      class=\"ng-doc-api-list-segments\"\n      role=\"group\"\n      aria-labelledby=\"ng-doc-api-list-group-by\"\n      ngDocSelectionHost>\n      <ng-doc-selection [align]=\"null\" />\n      <button\n        type=\"button\"\n        [attr.aria-pressed]=\"groupBy() === 'kind'\"\n        [ngDocSelectionOrigin]=\"groupBy() === 'kind'\"\n        (click)=\"selectGroupBy('kind')\">\n        Kind\n      </button>\n      <button\n        type=\"button\"\n        [attr.aria-pressed]=\"groupBy() === 'scope'\"\n        [ngDocSelectionOrigin]=\"groupBy() === 'scope'\"\n        (click)=\"selectGroupBy('scope')\">\n        Scope\n      </button>\n    </div>\n  </div>\n</div>\n\n@if (kinds().length) {\n  <div class=\"ng-doc-api-list-kinds\" role=\"group\" aria-label=\"Filter by kind\">\n    <button type=\"button\" [attr.aria-pressed]=\"!kind()\" (click)=\"selectKind('')\">\n      All <span class=\"ng-doc-api-list-count\">{{ inScope().length }}</span>\n    </button>\n    @for (item of kinds(); track item.kind) {\n      <button\n        type=\"button\"\n        [attr.data-ng-doc-kind]=\"item.kind\"\n        [attr.aria-pressed]=\"kind() === item.kind\"\n        (click)=\"selectKind(item.kind)\">\n        <span class=\"ng-doc-api-list-dot\" [attr.data-ng-doc-kind]=\"item.kind\"></span>\n        {{ item.label }}\n        <span class=\"ng-doc-api-list-count\">{{ item.count }}</span>\n      </button>\n    }\n  </div>\n}\n\n@if (scope()) {\n  <p class=\"ng-doc-api-list-scope-note\">\n    Showing {{ scope() }} only.\n    <button type=\"button\" (click)=\"clearScope()\">Show every scope</button>\n  </p>\n}\n\n@for (group of groups(); track group.id) {\n  <section class=\"ng-doc-api-list-group\" [id]=\"group.id\">\n    <h2 class=\"ng-doc-api-list-group-title\">\n      @if (group.kind) {\n        <ng-doc-kind-icon [kind]=\"group.kind\" size=\"medium\"></ng-doc-kind-icon>\n      } @else {\n        {{ group.label }}\n      }\n      <span class=\"ng-doc-api-list-count\">{{ group.items.length }}</span>\n    </h2>\n    <ul class=\"ng-doc-api-list-index\" [class.ng-doc-api-list-described]=\"hasDescriptions()\">\n      @for (item of group.items; track item.route) {\n        <li>\n          <a [routerLink]=\"item.route\">\n            <span class=\"ng-doc-api-list-name\">{{ item.name }}</span>\n            @if (hasDescriptions()) {\n              @if (item.description) {\n                <span class=\"ng-doc-api-list-description\" [title]=\"item.description\">{{\n                  item.description\n                }}</span>\n              } @else {\n                <span class=\"ng-doc-api-list-description ng-doc-api-list-none\">No description</span>\n              }\n            }\n            @if (group.kind) {\n              <span class=\"ng-doc-api-list-scope\">{{ item.scope }}</span>\n            } @else {\n              <ng-doc-kind-icon class=\"ng-doc-api-list-scope\" [kind]=\"item.type\"></ng-doc-kind-icon>\n            }\n          </a>\n        </li>\n      }\n    </ul>\n  </section>\n} @empty {\n  @if (loaded()) {\n    <p class=\"ng-doc-api-list-empty\">No declarations match.</p>\n  } @else if (failed()) {\n    <p class=\"ng-doc-api-list-empty\">The API list could not be loaded.</p>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,20 +1,23 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgDocIconComponent } from '@ng-doc/ui-kit';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 
+/**
+ * The breadcrumbs of a page: a navigation landmark that lists the categories above the page and
+ * marks the page itself as the current one.
+ */
 class NgDocBreadcrumbComponent {
     constructor() {
-        this.breadcrumbs = [];
+        /** Titles from the top category down to the page. */
+        this.breadcrumbs = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocBreadcrumbComponent, isStandalone: true, selector: "ng-doc-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, ngImport: i0, template: "@for (item of breadcrumbs; track item) {\n  @if (!$first) {\n    <ng-doc-icon icon=\"chevron-right\"></ng-doc-icon>\n  }\n  {{ item }}\n}\n", styles: [":host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ng-doc-base-gutter);margin-bottom:calc(var(--ng-doc-base-gutter) * 2);opacity:.9}:host .ng-doc-breadcrumb{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocBreadcrumbComponent, isStandalone: true, selector: "ng-doc-breadcrumb", inputs: { breadcrumbs: { classPropertyName: "breadcrumbs", publicName: "breadcrumbs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav aria-label=\"Breadcrumb\">\n  <ol class=\"ng-doc-breadcrumbs\">\n    @for (item of breadcrumbs(); track $index; let last = $last) {\n      <li class=\"ng-doc-breadcrumb\" [attr.aria-current]=\"last ? 'page' : null\">{{ item }}</li>\n      @if (!last) {\n        <li class=\"ng-doc-breadcrumb-separator\" aria-hidden=\"true\">\u203A</li>\n      }\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block;margin-bottom:var(--ng-doc-space-2);padding-right:100px}.ng-doc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:32px;margin:0;padding:0;list-style:none;color:var(--ng-doc-text-muted);font-family:var(--ng-doc-font-family);font-size:13px;line-height:18px}.ng-doc-breadcrumb{display:inline-flex;align-items:center;min-height:24px;margin:0}.ng-doc-breadcrumb-separator{margin:0;opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-breadcrumb', imports: [NgDocIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (item of breadcrumbs; track item) {\n  @if (!$first) {\n    <ng-doc-icon icon=\"chevron-right\"></ng-doc-icon>\n  }\n  {{ item }}\n}\n", styles: [":host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ng-doc-base-gutter);margin-bottom:calc(var(--ng-doc-base-gutter) * 2);opacity:.9}:host .ng-doc-breadcrumb{font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight);display:flex;align-items:center}\n"] }]
-        }], propDecorators: { breadcrumbs: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ng-doc-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav aria-label=\"Breadcrumb\">\n  <ol class=\"ng-doc-breadcrumbs\">\n    @for (item of breadcrumbs(); track $index; let last = $last) {\n      <li class=\"ng-doc-breadcrumb\" [attr.aria-current]=\"last ? 'page' : null\">{{ item }}</li>\n      @if (!last) {\n        <li class=\"ng-doc-breadcrumb-separator\" aria-hidden=\"true\">\u203A</li>\n      }\n    }\n  </ol>\n</nav>\n", styles: [":host{display:block;margin-bottom:var(--ng-doc-space-2);padding-right:100px}.ng-doc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:32px;margin:0;padding:0;list-style:none;color:var(--ng-doc-text-muted);font-family:var(--ng-doc-font-family);font-size:13px;line-height:18px}.ng-doc-breadcrumb{display:inline-flex;align-items:center;min-height:24px;margin:0}.ng-doc-breadcrumb-separator{margin:0;opacity:.5}\n"] }]
+        }], propDecorators: { breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-breadcrumb.mjs","sources":["../../../../libs/app/components/breadcrumb/breadcrumb.component.ts","../../../../libs/app/components/breadcrumb/breadcrumb.component.html","../../../../libs/app/components/breadcrumb/ng-doc-app-components-breadcrumb.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { NgDocPageBreadcrumbs } from '@ng-doc/app/interfaces';\nimport { NgDocIconComponent } from '@ng-doc/ui-kit';\n\n@Component({\n  selector: 'ng-doc-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrls: ['./breadcrumb.component.scss'],\n  imports: [NgDocIconComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocBreadcrumbComponent implements NgDocPageBreadcrumbs {\n  @Input()\n  breadcrumbs: string[] = [];\n}\n","@for (item of breadcrumbs; track item) {\n  @if (!$first) {\n    <ng-doc-icon icon=\"chevron-right\"></ng-doc-icon>\n  }\n  {{ item }}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAWa,wBAAwB,CAAA;AAPrC,IAAA,WAAA,GAAA;QASE,IAAA,CAAA,WAAW,GAAa,EAAE;AAC3B,IAAA;8GAHY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECXrC,6IAMA,EAAA,MAAA,EAAA,CAAA,qZAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDEY,kBAAkB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,YAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGjB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAPpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,WAGpB,CAAC,kBAAkB,CAAC,EAAA,eAAA,EACZ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6IAAA,EAAA,MAAA,EAAA,CAAA,qZAAA,CAAA,EAAA;;sBAG9C;;;AEZH;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-components-breadcrumb.mjs","sources":["../../../../libs/app/components/breadcrumb/breadcrumb.component.ts","../../../../libs/app/components/breadcrumb/breadcrumb.component.html","../../../../libs/app/components/breadcrumb/ng-doc-app-components-breadcrumb.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { NgDocPageBreadcrumbs } from '@ng-doc/app/interfaces';\n\n/**\n * The breadcrumbs of a page: a navigation landmark that lists the categories above the page and\n * marks the page itself as the current one.\n */\n@Component({\n  selector: 'ng-doc-breadcrumb',\n  templateUrl: './breadcrumb.component.html',\n  styleUrls: ['./breadcrumb.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocBreadcrumbComponent implements NgDocPageBreadcrumbs {\n  /** Titles from the top category down to the page. */\n  readonly breadcrumbs = input<string[]>([]);\n}\n","<nav aria-label=\"Breadcrumb\">\n  <ol class=\"ng-doc-breadcrumbs\">\n    @for (item of breadcrumbs(); track $index; let last = $last) {\n      <li class=\"ng-doc-breadcrumb\" [attr.aria-current]=\"last ? 'page' : null\">{{ item }}</li>\n      @if (!last) {\n        <li class=\"ng-doc-breadcrumb-separator\" aria-hidden=\"true\">›</li>\n      }\n    }\n  </ol>\n</nav>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAGA;;;AAGG;MAOU,wBAAwB,CAAA;AANrC,IAAA,WAAA,GAAA;;QAQW,IAAA,CAAA,WAAW,GAAG,KAAK,CAAW,EAAE;wFAAC;AAC3C,IAAA;8GAHY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,mOCbrC,0XAUA,EAAA,MAAA,EAAA,CAAA,ubAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDGa,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBANpC,SAAS;+BACE,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,0XAAA,EAAA,MAAA,EAAA,CAAA,ubAAA,CAAA,EAAA;;;AEXjD;;AAEG;;;;"}