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

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

@@ -1,15 +1,19 @@
 export * from '@ng-doc/app/components/api-list';
 export * from '@ng-doc/app/components/breadcrumb';
 export * from '@ng-doc/app/components/code';
+export * from '@ng-doc/app/components/command-palette';
 export * from '@ng-doc/app/components/copy-button';
 export * from '@ng-doc/app/components/demo';
 export * from '@ng-doc/app/components/demo-displayer';
+export * from '@ng-doc/app/components/demo-frame';
 export * from '@ng-doc/app/components/demo-pane';
 export * from '@ng-doc/app/components/fullscreen-button';
+export * from '@ng-doc/app/components/fullscreen-toggle';
 export * from '@ng-doc/app/components/heading-anchor';
 export * from '@ng-doc/app/components/image-viewer';
 export * from '@ng-doc/app/components/kind-icon';
 export * from '@ng-doc/app/components/link';
+export * from '@ng-doc/app/components/members';
 export * from '@ng-doc/app/components/mermaid-viewer';
 export * from '@ng-doc/app/components/navbar';
 export * from '@ng-doc/app/components/page';
@@ -20,7 +24,6 @@ export * from '@ng-doc/app/components/page-wrapper';
 export * from '@ng-doc/app/components/playground';
 export * from '@ng-doc/app/components/root';
 export * from '@ng-doc/app/components/search';
-export * from '@ng-doc/app/components/search-dialog';
 export * from '@ng-doc/app/components/search-result';
 export * from '@ng-doc/app/components/sidebar';
 export * from '@ng-doc/app/components/tabs';

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components.mjs","sources":["../../../../libs/app/components/ng-doc-app-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}
+{"version":3,"file":"ng-doc-app-components.mjs","sources":["../../../../libs/app/components/ng-doc-app-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG"}

package/fesm2022/ng-doc-app-defaults-default-processors.mjs

@@ -1,4 +1,4 @@
-import { linkProcessor, iconProcessor, headingAnchorProcessor, blockquoteProcessor, tooltipProcessor, mermaidProcessor, codeProcessor, demoProcessor, demoPaneProcessor, playgroundProcessor, tabsProcessor, imageProcessor } from '@ng-doc/app/processors/processors';
+import { linkProcessor, iconProcessor, headingAnchorProcessor, blockquoteProcessor, tooltipProcessor, mermaidProcessor, codeProcessor, demoProcessor, demoPaneProcessor, playgroundProcessor, tabsProcessor, imageProcessor, membersProcessor } from '@ng-doc/app/processors/processors';
 
 const NG_DOC_DEFAULT_PAGE_PROCESSORS = [
     /**
@@ -17,6 +17,7 @@ const NG_DOC_DEFAULT_PAGE_PROCESSORS = [
     playgroundProcessor,
     tabsProcessor,
     imageProcessor,
+    membersProcessor,
 ];
 
 /**

package/fesm2022/ng-doc-app-defaults-default-processors.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-defaults-default-processors.mjs","sources":["../../../../libs/app/defaults/default-processors/default-processors.ts","../../../../libs/app/defaults/default-processors/ng-doc-app-defaults-default-processors.ts"],"sourcesContent":["import { NgDocPageProcessor } from '@ng-doc/app/interfaces';\nimport {\n  blockquoteProcessor,\n  codeProcessor,\n  demoPaneProcessor,\n  demoProcessor,\n  headingAnchorProcessor,\n  iconProcessor,\n  imageProcessor,\n  linkProcessor,\n  mermaidProcessor,\n  playgroundProcessor,\n  tabsProcessor,\n  tooltipProcessor,\n} from '@ng-doc/app/processors/processors';\n\nexport const NG_DOC_DEFAULT_PAGE_PROCESSORS: NgDocPageProcessor[] = [\n  /**\n   * The order of the directives is important.\n   * The higher the directive is in the list, the earlier it will be run.\n   */\n  linkProcessor,\n  iconProcessor,\n  headingAnchorProcessor,\n  blockquoteProcessor,\n  tooltipProcessor,\n  mermaidProcessor,\n  codeProcessor,\n  demoProcessor,\n  demoPaneProcessor,\n  playgroundProcessor,\n  tabsProcessor,\n  imageProcessor,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAgBO,MAAM,8BAA8B,GAAyB;AAClE;;;AAGG;IACH,aAAa;IACb,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,gBAAgB;IAChB,gBAAgB;IAChB,aAAa;IACb,aAAa;IACb,iBAAiB;IACjB,mBAAmB;IACnB,aAAa;IACb,cAAc;;;AChChB;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-defaults-default-processors.mjs","sources":["../../../../libs/app/defaults/default-processors/default-processors.ts","../../../../libs/app/defaults/default-processors/ng-doc-app-defaults-default-processors.ts"],"sourcesContent":["import { NgDocPageProcessor } from '@ng-doc/app/interfaces';\nimport {\n  blockquoteProcessor,\n  codeProcessor,\n  demoPaneProcessor,\n  demoProcessor,\n  headingAnchorProcessor,\n  iconProcessor,\n  imageProcessor,\n  linkProcessor,\n  membersProcessor,\n  mermaidProcessor,\n  playgroundProcessor,\n  tabsProcessor,\n  tooltipProcessor,\n} from '@ng-doc/app/processors/processors';\n\nexport const NG_DOC_DEFAULT_PAGE_PROCESSORS: NgDocPageProcessor[] = [\n  /**\n   * The order of the directives is important.\n   * The higher the directive is in the list, the earlier it will be run.\n   */\n  linkProcessor,\n  iconProcessor,\n  headingAnchorProcessor,\n  blockquoteProcessor,\n  tooltipProcessor,\n  mermaidProcessor,\n  codeProcessor,\n  demoProcessor,\n  demoPaneProcessor,\n  playgroundProcessor,\n  tabsProcessor,\n  imageProcessor,\n  membersProcessor,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAiBO,MAAM,8BAA8B,GAAyB;AAClE;;;AAGG;IACH,aAAa;IACb,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,gBAAgB;IAChB,gBAAgB;IAChB,aAAa;IACb,aAAa;IACb,iBAAiB;IACjB,mBAAmB;IACnB,aAAa;IACb,cAAc;IACd,gBAAgB;;;AClClB;;AAEG;;;;"}

package/fesm2022/ng-doc-app-demo-app.mjs

@@ -0,0 +1,176 @@
+import { isPlatformBrowser, NgComponentOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, DOCUMENT, DestroyRef, ElementRef, ChangeDetectionStrategy, Component, provideZoneChangeDetection, provideZonelessChangeDetection } from '@angular/core';
+import { RouterOutlet, ActivatedRoute, provideRouter } from '@angular/router';
+import { NG_DOC_STORE_THEME_KEY } from '@ng-doc/app/constants';
+import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser';
+
+/**
+ * The `source` of every message the demo application sends to the page that embeds it.
+ * @internal
+ */
+const ɵNG_DOC_DEMO_MESSAGE_SOURCE = 'ng-doc-demo';
+/**
+ * Whether a message is a size message of the demo application.
+ * @param value - The data of a `message` event.
+ * @internal
+ */
+function ɵisNgDocDemoSizeMessage(value) {
+    const message = value;
+    return (typeof message === 'object' &&
+        message !== null &&
+        message.source === ɵNG_DOC_DEMO_MESSAGE_SOURCE &&
+        message.version === 1 &&
+        message.type === 'size' &&
+        typeof message.height === 'number' &&
+        Number.isFinite(message.height) &&
+        message.height >= 0);
+}
+
+/**
+ * The root of the demo application, which shows one demo per page with only Angular and that
+ * demo loaded. In an iframe it reports the height of its content to the page that embeds it (a
+ * `ResizeObserver` on its border box), and it follows the theme the reader picks on the
+ * documentation site, which stores it in `localStorage`.
+ */
+class NgDocDemoAppComponent {
+    constructor() {
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        const document = inject(DOCUMENT);
+        const window = document.defaultView;
+        const destroyRef = inject(DestroyRef);
+        if (!window)
+            return;
+        if (window.parent !== window) {
+            const host = inject(ElementRef).nativeElement;
+            let reported = -1;
+            const observer = new ResizeObserver(() => {
+                const height = Math.ceil(host.getBoundingClientRect().height);
+                if (height === reported)
+                    return;
+                reported = height;
+                const message = {
+                    source: ɵNG_DOC_DEMO_MESSAGE_SOURCE,
+                    version: 1,
+                    type: 'size',
+                    height,
+                };
+                // Only a page of the same origin may receive it: the demo pages are part of the site.
+                window.parent.postMessage(message, window.location.origin);
+            });
+            observer.observe(host, { box: 'border-box' });
+            destroyRef.onDestroy(() => observer.disconnect());
+        }
+        // The documentation page and the demo page share the origin, so a theme the reader picks
+        // reaches this page as a storage event. An empty id is the light theme, as in the restore
+        // script that applies the stored theme before the application starts.
+        const onStorage = (event) => {
+            if (event.key !== NG_DOC_STORE_THEME_KEY || event.newValue === null)
+                return;
+            if (event.newValue) {
+                document.documentElement.setAttribute('data-theme', event.newValue);
+            }
+            else {
+                document.documentElement.removeAttribute('data-theme');
+            }
+        };
+        window.addEventListener('storage', onStorage);
+        destroyRef.onDestroy(() => window.removeEventListener('storage', onStorage));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocDemoAppComponent, isStandalone: true, selector: "ng-doc-demo-app", ngImport: i0, template: '<router-outlet />', isInline: true, styles: [":host{display:flow-root}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoAppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-demo-app', imports: [RouterOutlet], template: '<router-outlet />', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flow-root}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Shows the demo of a demo page: the component in the route's `ngDocDemo` data, with the inputs
+ * of the `inputs` query parameter (the JSON of the `inputs` option of the `demo` action).
+ *
+ * The demo application hydrates its server-rendered page, but not the demo: a demo is the user's
+ * component and need not be hydration-safe, and the server renders it without the inputs of the
+ * query, which only the browser has. So the host skips hydration, as documentation pages do for
+ * their content, and the browser renders the demo again.
+ */
+class NgDocDemoHostComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        /** The demo component, or undefined on the page of a demo that does not exist. */
+        this.demo = this.route.snapshot.data['ngDocDemo'];
+        /** The inputs of the demo. */
+        this.inputs = demoInputs(this.route.snapshot.queryParamMap.get('inputs'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoHostComponent, isStandalone: true, selector: "ng-doc-demo-host", host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: `
+    @if (demo) {
+      <ng-container *ngComponentOutlet="demo; inputs: inputs" />
+    } @else {
+      <p role="alert">This demo does not exist.</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-doc-demo-host',
+                    imports: [NgComponentOutlet],
+                    template: `
+    @if (demo) {
+      <ng-container *ngComponentOutlet="demo; inputs: inputs" />
+    } @else {
+      <p role="alert">This demo does not exist.</p>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { ngSkipHydration: 'true' },
+                }]
+        }] });
+/**
+ * The inputs of the `inputs` query parameter: a JSON object, or none.
+ * @param value - The parameter.
+ */
+function demoInputs(value) {
+    if (!value)
+        return {};
+    try {
+        const parsed = JSON.parse(value);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : {};
+    }
+    catch {
+        return {};
+    }
+}
+
+/**
+ * The configuration of the demo application: change detection, the router with the demo pages
+ * (and a page for unknown demos), hydration, and the providers of `demoProviders`. The generated entries of
+ * the demo application bootstrap `NgDocDemoAppComponent` with it, in the browser and on the server.
+ * @param routes - The generated demo routes.
+ * @param demoProviders - The generated import of the `demoProviders` module, if any.
+ * @param options - How the application starts.
+ * @internal
+ */
+async function ɵngDocDemoApplicationConfig(routes, demoProviders, options = {}) {
+    const providers = demoProviders ? (await demoProviders()).default : [];
+    return {
+        providers: [
+            options.zone ? provideZoneChangeDetection() : provideZonelessChangeDetection(),
+            ...(options.hydration ? [provideClientHydration(withNoIncrementalHydration())] : []),
+            provideRouter([...routes, { path: '**', component: NgDocDemoHostComponent }]),
+            ...providers,
+            ...(options.providers ?? []),
+        ],
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocDemoAppComponent, NgDocDemoHostComponent, ɵNG_DOC_DEMO_MESSAGE_SOURCE, ɵisNgDocDemoSizeMessage, ɵngDocDemoApplicationConfig };
+//# sourceMappingURL=ng-doc-app-demo-app.mjs.map

package/fesm2022/ng-doc-app-demo-app.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ng-doc-app-demo-app.mjs","sources":["../../../../libs/app/demo-app/demo-message.ts","../../../../libs/app/demo-app/demo-app.component.ts","../../../../libs/app/demo-app/demo-host.component.ts","../../../../libs/app/demo-app/demo-application.ts","../../../../libs/app/demo-app/ng-doc-app-demo-app.ts"],"sourcesContent":["/**\n * The `source` of every message the demo application sends to the page that embeds it.\n * @internal\n */\nexport const ɵNG_DOC_DEMO_MESSAGE_SOURCE = 'ng-doc-demo';\n\n/**\n * The message an isolated demo sends to the page that shows it in an iframe whenever the height\n * of its content changes, so that the iframe takes that height.\n * @internal\n */\nexport interface ɵNgDocDemoSizeMessage {\n  readonly source: typeof ɵNG_DOC_DEMO_MESSAGE_SOURCE;\n  readonly version: 1;\n  readonly type: 'size';\n  /** The height of the demo's content, in CSS pixels, rounded up. */\n  readonly height: number;\n}\n\n/**\n * Whether a message is a size message of the demo application.\n * @param value - The data of a `message` event.\n * @internal\n */\nexport function ɵisNgDocDemoSizeMessage(value: unknown): value is ɵNgDocDemoSizeMessage {\n  const message = value as Partial<ɵNgDocDemoSizeMessage> | null;\n  return (\n    typeof message === 'object' &&\n    message !== null &&\n    message.source === ɵNG_DOC_DEMO_MESSAGE_SOURCE &&\n    message.version === 1 &&\n    message.type === 'size' &&\n    typeof message.height === 'number' &&\n    Number.isFinite(message.height) &&\n    message.height >= 0\n  );\n}\n","import { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  DOCUMENT,\n  ElementRef,\n  inject,\n  PLATFORM_ID,\n} from '@angular/core';\nimport { RouterOutlet } from '@angular/router';\nimport { NG_DOC_STORE_THEME_KEY } from '@ng-doc/app/constants';\n\nimport { ɵNG_DOC_DEMO_MESSAGE_SOURCE, ɵNgDocDemoSizeMessage } from './demo-message';\n\n/**\n * The root of the demo application, which shows one demo per page with only Angular and that\n * demo loaded. In an iframe it reports the height of its content to the page that embeds it (a\n * `ResizeObserver` on its border box), and it follows the theme the reader picks on the\n * documentation site, which stores it in `localStorage`.\n */\n@Component({\n  selector: 'ng-doc-demo-app',\n  imports: [RouterOutlet],\n  template: '<router-outlet />',\n  // `flow-root`: the margins of the demo stay inside the measured box.\n  styles: ':host { display: flow-root; }',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocDemoAppComponent {\n  constructor() {\n    if (!isPlatformBrowser(inject(PLATFORM_ID))) return;\n    const document = inject(DOCUMENT);\n    const window = document.defaultView;\n    const destroyRef = inject(DestroyRef);\n\n    if (!window) return;\n    if (window.parent !== window) {\n      const host: HTMLElement = inject(ElementRef).nativeElement;\n      let reported = -1;\n      const observer = new ResizeObserver(() => {\n        const height = Math.ceil(host.getBoundingClientRect().height);\n\n        if (height === reported) return;\n        reported = height;\n        const message: ɵNgDocDemoSizeMessage = {\n          source: ɵNG_DOC_DEMO_MESSAGE_SOURCE,\n          version: 1,\n          type: 'size',\n          height,\n        };\n        // Only a page of the same origin may receive it: the demo pages are part of the site.\n        window.parent.postMessage(message, window.location.origin);\n      });\n\n      observer.observe(host, { box: 'border-box' });\n      destroyRef.onDestroy(() => observer.disconnect());\n    }\n\n    // The documentation page and the demo page share the origin, so a theme the reader picks\n    // reaches this page as a storage event. An empty id is the light theme, as in the restore\n    // script that applies the stored theme before the application starts.\n    const onStorage = (event: StorageEvent) => {\n      if (event.key !== NG_DOC_STORE_THEME_KEY || event.newValue === null) return;\n      if (event.newValue) {\n        document.documentElement.setAttribute('data-theme', event.newValue);\n      } else {\n        document.documentElement.removeAttribute('data-theme');\n      }\n    };\n\n    window.addEventListener('storage', onStorage);\n    destroyRef.onDestroy(() => window.removeEventListener('storage', onStorage));\n  }\n}\n","import { NgComponentOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, Type } from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\n\n/**\n * Shows the demo of a demo page: the component in the route's `ngDocDemo` data, with the inputs\n * of the `inputs` query parameter (the JSON of the `inputs` option of the `demo` action).\n *\n * The demo application hydrates its server-rendered page, but not the demo: a demo is the user's\n * component and need not be hydration-safe, and the server renders it without the inputs of the\n * query, which only the browser has. So the host skips hydration, as documentation pages do for\n * their content, and the browser renders the demo again.\n */\n@Component({\n  selector: 'ng-doc-demo-host',\n  imports: [NgComponentOutlet],\n  template: `\n    @if (demo) {\n      <ng-container *ngComponentOutlet=\"demo; inputs: inputs\" />\n    } @else {\n      <p role=\"alert\">This demo does not exist.</p>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { ngSkipHydration: 'true' },\n})\nexport class NgDocDemoHostComponent {\n  private readonly route = inject(ActivatedRoute);\n\n  /** The demo component, or undefined on the page of a demo that does not exist. */\n  protected readonly demo: Type<unknown> | undefined = this.route.snapshot.data['ngDocDemo'];\n\n  /** The inputs of the demo. */\n  protected readonly inputs: Record<string, unknown> = demoInputs(\n    this.route.snapshot.queryParamMap.get('inputs'),\n  );\n}\n\n/**\n * The inputs of the `inputs` query parameter: a JSON object, or none.\n * @param value - The parameter.\n */\nfunction demoInputs(value: string | null): Record<string, unknown> {\n  if (!value) return {};\n  try {\n    const parsed: unknown = JSON.parse(value);\n\n    return parsed && typeof parsed === 'object' && !Array.isArray(parsed)\n      ? (parsed as Record<string, unknown>)\n      : {};\n  } catch {\n    return {};\n  }\n}\n","import {\n  ApplicationConfig,\n  EnvironmentProviders,\n  Provider,\n  provideZoneChangeDetection,\n  provideZonelessChangeDetection,\n} from '@angular/core';\nimport { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser';\nimport { provideRouter, Routes } from '@angular/router';\nimport type { NgDocDemoProvidersImport } from '@ng-doc/core/interfaces';\n\nimport { NgDocDemoHostComponent } from './demo-host.component';\n\n/**\n * How the demo application starts.\n * @internal\n */\nexport interface ɵNgDocDemoApplicationOptions {\n  /** Change detection with zone.js, when the application's polyfills load it. */\n  readonly zone?: boolean;\n  /**\n   * Hydration of the server-rendered page: always on the server, which then writes the hydration\n   * data, and in the browser only for a page the server rendered (a page without it, such as the\n   * page of a demo that failed to prerender or the development server's, has nothing to hydrate).\n   */\n  readonly hydration?: boolean;\n  /** Providers added after the others, for example server rendering. */\n  readonly providers?: Array<Provider | EnvironmentProviders>;\n}\n\n/**\n * The configuration of the demo application: change detection, the router with the demo pages\n * (and a page for unknown demos), hydration, and the providers of `demoProviders`. The generated entries of\n * the demo application bootstrap `NgDocDemoAppComponent` with it, in the browser and on the server.\n * @param routes - The generated demo routes.\n * @param demoProviders - The generated import of the `demoProviders` module, if any.\n * @param options - How the application starts.\n * @internal\n */\nexport async function ɵngDocDemoApplicationConfig(\n  routes: Routes,\n  demoProviders: NgDocDemoProvidersImport | undefined,\n  options: ɵNgDocDemoApplicationOptions = {},\n): Promise<ApplicationConfig> {\n  const providers = demoProviders ? (await demoProviders()).default : [];\n\n  return {\n    providers: [\n      options.zone ? provideZoneChangeDetection() : provideZonelessChangeDetection(),\n      ...(options.hydration ? [provideClientHydration(withNoIncrementalHydration())] : []),\n      provideRouter([...routes, { path: '**', component: NgDocDemoHostComponent }]),\n      ...providers,\n      ...(options.providers ?? []),\n    ],\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;;;AAGG;AACI,MAAM,2BAA2B,GAAG;AAe3C;;;;AAIG;AACG,SAAU,uBAAuB,CAAC,KAAc,EAAA;IACpD,MAAM,OAAO,GAAG,KAA8C;AAC9D,IAAA,QACE,OAAO,OAAO,KAAK,QAAQ;AAC3B,QAAA,OAAO,KAAK,IAAI;QAChB,OAAO,CAAC,MAAM,KAAK,2BAA2B;QAC9C,OAAO,CAAC,OAAO,KAAK,CAAC;QACrB,OAAO,CAAC,IAAI,KAAK,MAAM;AACvB,QAAA,OAAO,OAAO,CAAC,MAAM,KAAK,QAAQ;AAClC,QAAA,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC;AAC/B,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC;AAEvB;;ACrBA;;;;;AAKG;MASU,qBAAqB,CAAA;AAChC,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YAAE;AAC7C,QAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AACjC,QAAA,MAAM,MAAM,GAAG,QAAQ,CAAC,WAAW;AACnC,QAAA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAErC,QAAA,IAAI,CAAC,MAAM;YAAE;AACb,QAAA,IAAI,MAAM,CAAC,MAAM,KAAK,MAAM,EAAE;YAC5B,MAAM,IAAI,GAAgB,MAAM,CAAC,UAAU,CAAC,CAAC,aAAa;AAC1D,YAAA,IAAI,QAAQ,GAAG,CAAC,CAAC;AACjB,YAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAK;AACvC,gBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;gBAE7D,IAAI,MAAM,KAAK,QAAQ;oBAAE;gBACzB,QAAQ,GAAG,MAAM;AACjB,gBAAA,MAAM,OAAO,GAA0B;AACrC,oBAAA,MAAM,EAAE,2BAA2B;AACnC,oBAAA,OAAO,EAAE,CAAC;AACV,oBAAA,IAAI,EAAE,MAAM;oBACZ,MAAM;iBACP;;AAED,gBAAA,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC5D,YAAA,CAAC,CAAC;YAEF,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC;YAC7C,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,UAAU,EAAE,CAAC;QACnD;;;;AAKA,QAAA,MAAM,SAAS,GAAG,CAAC,KAAmB,KAAI;YACxC,IAAI,KAAK,CAAC,GAAG,KAAK,sBAAsB,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI;gBAAE;AACrE,YAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAClB,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC;YACrE;iBAAO;AACL,gBAAA,QAAQ,CAAC,eAAe,CAAC,eAAe,CAAC,YAAY,CAAC;YACxD;AACF,QAAA,CAAC;AAED,QAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC;AAC7C,QAAA,UAAU,CAAC,SAAS,CAAC,MAAM,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC9E;8GA5CW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EALtB,mBAAmB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EADnB,YAAY,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMX,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;+BACE,iBAAiB,EAAA,OAAA,EAClB,CAAC,YAAY,CAAC,YACb,mBAAmB,EAAA,eAAA,EAGZ,uBAAuB,CAAC,MAAM,EAAA,MAAA,EAAA,CAAA,4BAAA,CAAA,EAAA;;;ACvBjD;;;;;;;;AAQG;MAcU,sBAAsB,CAAA;AAbnC,IAAA,WAAA,GAAA;AAcmB,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;;QAG5B,IAAA,CAAA,IAAI,GAA8B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC;;AAGvE,QAAA,IAAA,CAAA,MAAM,GAA4B,UAAU,CAC7D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAChD;AACF,IAAA;8GAVY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAVvB;;;;;;AAMT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAPS,iBAAiB,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,yBAAA,EAAA,2BAAA,EAAA,sCAAA,EAAA,0BAAA,EAAA,2BAAA,CAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAWhB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAblC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kBAAkB;oBAC5B,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC5B,oBAAA,QAAQ,EAAE;;;;;;AAMT,EAAA,CAAA;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,IAAI,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE;AAClC,iBAAA;;AAaD;;;AAGG;AACH,SAAS,UAAU,CAAC,KAAoB,EAAA;AACtC,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,IAAI;QACF,MAAM,MAAM,GAAY,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzC,QAAA,OAAO,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;AAClE,cAAG;cACD,EAAE;IACR;AAAE,IAAA,MAAM;AACN,QAAA,OAAO,EAAE;IACX;AACF;;ACvBA;;;;;;;;AAQG;AACI,eAAe,2BAA2B,CAC/C,MAAc,EACd,aAAmD,EACnD,OAAA,GAAwC,EAAE,EAAA;AAE1C,IAAA,MAAM,SAAS,GAAG,aAAa,GAAG,CAAC,MAAM,aAAa,EAAE,EAAE,OAAO,GAAG,EAAE;IAEtE,OAAO;AACL,QAAA,SAAS,EAAE;YACT,OAAO,CAAC,IAAI,GAAG,0BAA0B,EAAE,GAAG,8BAA8B,EAAE;AAC9E,YAAA,IAAI,OAAO,CAAC,SAAS,GAAG,CAAC,sBAAsB,CAAC,0BAA0B,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC;AACpF,YAAA,aAAa,CAAC,CAAC,GAAG,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC,CAAC;AAC7E,YAAA,GAAG,SAAS;AACZ,YAAA,IAAI,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC;AAC7B,SAAA;KACF;AACH;;ACvDA;;AAEG;;;;"}

package/fesm2022/ng-doc-app-directives-code-highlighter.mjs

@@ -3,28 +3,34 @@ import { input, inject, ElementRef, computed, Directive } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { NgDocHighlighterService } from '@ng-doc/app/services';
 
+/**
+ * Renders the given Angular HTML code, highlighted by `NgDocHighlighterService`, into its host
+ * element.
+ */
 class NgDocCodeHighlighterDirective {
     constructor() {
+        /** The code to highlight. */
         this.code = input.required({ ...(ngDevMode ? { debugName: "code" } : /* istanbul ignore next */ {}), alias: 'ngDocHighlighter' });
         this.element = inject((ElementRef)).nativeElement;
         this.highlighter = inject(NgDocHighlighterService);
         this.sanitizer = inject(DomSanitizer);
+        // `highlight` reads the highlighter's `ready` signal, so the code is highlighted again once
+        // Shiki has loaded.
         this.highlightedCode = computed(() => this.sanitizer.bypassSecurityTrustHtml(this.highlighter.highlight(this.code())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "highlightedCode" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: NgDocCodeHighlighterDirective, isStandalone: true, selector: "[ngDocHighlighter]", inputs: { code: { classPropertyName: "code", publicName: "ngDocHighlighter", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "innerHTML": "highlightedCode()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCodeHighlighterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.1", type: NgDocCodeHighlighterDirective, isStandalone: true, selector: "[ngDocHighlighter]", inputs: { code: { classPropertyName: "code", publicName: "ngDocHighlighter", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "innerHTML": "highlightedCode()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocCodeHighlighterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocCodeHighlighterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ngDocHighlighter]',
-                    standalone: true,
                     host: {
                         '[innerHTML]': 'highlightedCode()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngDocHighlighter", required: true }] }] } });
+        }], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngDocHighlighter", required: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/ng-doc-app-directives-code-highlighter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-directives-code-highlighter.mjs","sources":["../../../../libs/app/directives/code-highlighter/code-highlighter.directive.ts","../../../../libs/app/directives/code-highlighter/ng-doc-app-directives-code-highlighter.ts"],"sourcesContent":["import { computed, Directive, ElementRef, inject, input, Signal } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { NgDocHighlighterService } from '@ng-doc/app/services';\n\n@Directive({\n  selector: '[ngDocHighlighter]',\n  standalone: true,\n  host: {\n    '[innerHTML]': 'highlightedCode()',\n  },\n})\nexport class NgDocCodeHighlighterDirective {\n  code = input.required<string>({ alias: 'ngDocHighlighter' });\n\n  protected readonly highlightedCode: Signal<SafeHtml>;\n\n  protected readonly element = inject(ElementRef<HTMLElement>).nativeElement;\n  protected readonly highlighter = inject(NgDocHighlighterService);\n  protected readonly sanitizer = inject(DomSanitizer);\n\n  constructor() {\n    this.highlightedCode = computed(() =>\n      this.sanitizer.bypassSecurityTrustHtml(this.highlighter.highlight(this.code())),\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAWa,6BAA6B,CAAA;AASxC,IAAA,WAAA,GAAA;QARA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,2EAAW,KAAK,EAAE,kBAAkB,EAAA,CAAG;QAIzC,IAAA,CAAA,OAAO,GAAG,MAAM,EAAC,UAAuB,EAAC,CAAC,aAAa;AACvD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,uBAAuB,CAAC;AAC7C,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;QAGjD,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,MAC9B,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;4FAChF;IACH;8GAbW,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA7B,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA7B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAPzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,aAAa,EAAE,mBAAmB;AACnC,qBAAA;AACF,iBAAA;;;ACVD;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-directives-code-highlighter.mjs","sources":["../../../../libs/app/directives/code-highlighter/code-highlighter.directive.ts","../../../../libs/app/directives/code-highlighter/ng-doc-app-directives-code-highlighter.ts"],"sourcesContent":["import { computed, Directive, ElementRef, inject, input, Signal } from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { NgDocHighlighterService } from '@ng-doc/app/services';\n\n/**\n * Renders the given Angular HTML code, highlighted by `NgDocHighlighterService`, into its host\n * element.\n */\n@Directive({\n  selector: '[ngDocHighlighter]',\n  host: {\n    '[innerHTML]': 'highlightedCode()',\n  },\n})\nexport class NgDocCodeHighlighterDirective {\n  /** The code to highlight. */\n  readonly code = input.required<string>({ alias: 'ngDocHighlighter' });\n\n  protected readonly element = inject(ElementRef<HTMLElement>).nativeElement;\n  protected readonly highlighter = inject(NgDocHighlighterService);\n  protected readonly sanitizer = inject(DomSanitizer);\n\n  // `highlight` reads the highlighter's `ready` signal, so the code is highlighted again once\n  // Shiki has loaded.\n  protected readonly highlightedCode: Signal<SafeHtml> = computed(() =>\n    this.sanitizer.bypassSecurityTrustHtml(this.highlighter.highlight(this.code())),\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;;AAGG;MAOU,6BAA6B,CAAA;AAN1C,IAAA,WAAA,GAAA;;QAQW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,2EAAW,KAAK,EAAE,kBAAkB,EAAA,CAAG;QAElD,IAAA,CAAA,OAAO,GAAG,MAAM,EAAC,UAAuB,EAAC,CAAC,aAAa;AACvD,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,uBAAuB,CAAC;AAC7C,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,YAAY,CAAC;;;QAIhC,IAAA,CAAA,eAAe,GAAqB,QAAQ,CAAC,MAC9D,IAAI,CAAC,SAAS,CAAC,uBAAuB,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;4FAChF;AACF,IAAA;8GAbY,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA7B,6BAA6B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAA7B,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBANzC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,IAAI,EAAE;AACJ,wBAAA,aAAa,EAAE,mBAAmB;AACnC,qBAAA;AACF,iBAAA;;;ACbD;;AAEG;;;;"}

package/fesm2022/ng-doc-app-directives-members-filter.mjs

@@ -0,0 +1,276 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, signal, DestroyRef, NgZone, DOCUMENT, afterNextRender, untracked, createComponent, EnvironmentInjector, ApplicationRef, Directive } from '@angular/core';
+import { NgDocShortcutsService } from '@ng-doc/app/services/shortcuts';
+import { NgDocSelectionHostDirective, NgDocSelectionComponent } from '@ng-doc/ui-kit/components/selection';
+
+const TAB = '[data-ng-doc-members-tab]';
+const FILTER = 'input[data-ng-doc-members-filter]';
+const MEMBER = '.ng-doc-member[data-group]';
+const GROUP = '.ng-doc-members-group[data-group]';
+const EXPAND = '.ng-doc-member-expand[aria-controls]';
+const COUNT = '.ng-doc-members-count';
+const EMPTY = '.ng-doc-members-empty';
+const ALL = 'all';
+const INHERITED = 'inherited';
+/**
+ * Adds the member tabs, the name filter and the expandable method rows to the members table of
+ * an API page. The page renders every member, so the table reads well without it (on the server
+ * and before hydration); the directive only hides rows.
+ *
+ * It reads this markup inside its host: tab buttons with a data-ng-doc-members-tab attribute
+ * ("all", "inherited" or a group name, each with an optional .ng-doc-members-count), a text input
+ * with a data-ng-doc-members-filter attribute, group rows (.ng-doc-members-group with data-group)
+ * and member rows (.ng-doc-member with data-group, data-name and, for inherited members,
+ * data-inherited). A .ng-doc-member-expand button in a member row shows and hides the detail row
+ * its aria-controls names, and an optional .ng-doc-members-empty element shows when no member
+ * matches. F focuses the filter while single-key shortcuts are on.
+ *
+ * In the browser it inserts an `ng-doc-selection` as the first child of the row of tabs, the
+ * highlight that slides to the selected tab as in the code-block tabs. Until it is placed, the
+ * selected tab draws its own background, so the server-rendered page looks the same.
+ */
+class NgDocMembersFilterDirective {
+    constructor() {
+        this.host = inject(ElementRef).nativeElement;
+        // The tabs are plain HTML, so no element can carry ngDocSelectionOrigin: the directive selects
+        // the tab on the host of the highlight itself.
+        this.selectionInjector = Injector.create({
+            providers: [NgDocSelectionHostDirective],
+            parent: inject(Injector),
+        });
+        this.selection = this.selectionInjector.get(NgDocSelectionHostDirective);
+        this.selectedTab = signal(ALL, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+        this.filterQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterQuery" }] : /* istanbul ignore next */ []));
+        this.ready = false;
+        /** The selected tab: "all", "inherited" or a group name. */
+        this.tab = this.selectedTab.asReadonly();
+        /** The text the member names are filtered by. */
+        this.query = this.filterQuery.asReadonly();
+        const destroyRef = inject(DestroyRef);
+        const ngZone = inject(NgZone);
+        const window = inject(DOCUMENT).defaultView;
+        const removeShortcut = inject(NgDocShortcutsService).register({
+            key: 'f',
+            handler: () => this.host.querySelector(FILTER)?.focus(),
+        });
+        destroyRef.onDestroy(removeShortcut);
+        // The markup is rendered by the page, so the directive only starts working in the browser.
+        afterNextRender(() => {
+            this.ready = true;
+            // The counts change the width of the tabs, so they are final before the highlight measures.
+            this.countTabs();
+            const highlight = this.createHighlight();
+            destroyRef.onDestroy(() => {
+                highlight?.destroy();
+                highlight?.location.nativeElement.remove();
+            });
+            const selected = this.tabs().find((tab) => tab.getAttribute('aria-selected') === 'true');
+            this.select(selected?.dataset['ngDocMembersTab'] ?? ALL);
+            // Rows of tabs that scroll inside themselves fade on the edge that still hides tabs.
+            const fade = () => this.fade();
+            const onScroll = (event) => {
+                if (event.target instanceof Element && event.target.querySelector(TAB)) {
+                    this.fade();
+                }
+            };
+            ngZone.runOutsideAngular(() => {
+                this.host.addEventListener('scroll', onScroll, true);
+                window?.addEventListener('resize', fade);
+            });
+            destroyRef.onDestroy(() => {
+                this.host.removeEventListener('scroll', onScroll, true);
+                window?.removeEventListener('resize', fade);
+            });
+            this.fade();
+        });
+    }
+    /**
+     * Shows the members of a tab.
+     * @param tab - "all", "inherited" or a group name.
+     */
+    select(tab) {
+        untracked(() => {
+            this.selectedTab.set(tab);
+            const button = this.tabs().find((candidate) => candidate.dataset['ngDocMembersTab'] === tab);
+            for (const candidate of this.tabs()) {
+                candidate.setAttribute('aria-selected', String(candidate === button));
+                candidate.tabIndex = candidate === button ? 0 : -1;
+            }
+            this.selection.select(button);
+            this.apply();
+        });
+    }
+    /**
+     * Shows the members whose name contains the text.
+     * @param query - The text; case is ignored.
+     */
+    filter(query) {
+        untracked(() => {
+            this.filterQuery.set(query);
+            const input = this.host.querySelector(FILTER);
+            if (input && input.value !== query) {
+                input.value = query;
+            }
+            this.apply();
+        });
+    }
+    onClick(event) {
+        const target = event.target instanceof Element ? event.target : null;
+        const tab = target?.closest(TAB);
+        const expand = target?.closest(EXPAND);
+        if (tab && this.host.contains(tab) && !tab.hasAttribute('disabled')) {
+            this.select(tab.dataset['ngDocMembersTab'] ?? ALL);
+        }
+        else if (expand && this.host.contains(expand)) {
+            expand.setAttribute('aria-expanded', String(expand.getAttribute('aria-expanded') !== 'true'));
+            this.apply();
+        }
+    }
+    onInput(event) {
+        if (event.target instanceof HTMLInputElement && event.target.matches(FILTER)) {
+            this.filter(event.target.value);
+        }
+    }
+    onKeydown(event) {
+        const tab = event.target instanceof Element ? event.target.closest(TAB) : null;
+        if (!tab) {
+            return;
+        }
+        const tabs = this.tabs().filter((button) => !button.hasAttribute('disabled'));
+        const index = tabs.indexOf(tab);
+        const next = event.key === 'ArrowRight'
+            ? tabs[(index + 1) % tabs.length]
+            : event.key === 'ArrowLeft'
+                ? tabs[(index - 1 + tabs.length) % tabs.length]
+                : event.key === 'Home'
+                    ? tabs[0]
+                    : event.key === 'End'
+                        ? tabs[tabs.length - 1]
+                        : undefined;
+        if (next) {
+            event.preventDefault();
+            next.focus();
+            this.select(next.dataset['ngDocMembersTab'] ?? ALL);
+        }
+    }
+    /**
+     * Inserts the highlight of the selected tab into the row of tabs. It is the same component as in
+     * the code-block tabs, so it measures, follows resizes and animates the same way; the row is its
+     * offset parent, so it scrolls with the tabs.
+     */
+    createHighlight() {
+        const row = this.tabs()[0]?.parentElement;
+        if (!row) {
+            return undefined;
+        }
+        const hostElement = this.host.ownerDocument.createElement('ng-doc-selection');
+        row.prepend(hostElement);
+        const highlight = createComponent(NgDocSelectionComponent, {
+            environmentInjector: this.selectionInjector.get(EnvironmentInjector),
+            elementInjector: this.selectionInjector,
+            hostElement,
+        });
+        highlight.setInput('align', null);
+        this.selectionInjector.get(ApplicationRef).attachView(highlight.hostView);
+        return highlight;
+    }
+    tabs() {
+        return Array.from(this.host.querySelectorAll(TAB));
+    }
+    members() {
+        return Array.from(this.host.querySelectorAll(MEMBER));
+    }
+    countTabs() {
+        const members = this.members();
+        for (const button of this.tabs()) {
+            const tab = button.dataset['ngDocMembersTab'] ?? ALL;
+            const count = members.filter((member) => inTab(member, tab)).length;
+            const counter = button.querySelector(COUNT);
+            if (counter) {
+                counter.textContent = String(count);
+            }
+            button.toggleAttribute('disabled', tab !== ALL && count === 0);
+        }
+    }
+    apply() {
+        if (!this.ready) {
+            return;
+        }
+        const tab = this.selectedTab();
+        const query = this.filterQuery().trim().toLowerCase();
+        const visible = new Map();
+        for (const member of this.members()) {
+            const group = member.dataset['group'] ?? '';
+            const name = (member.dataset['name'] ?? member.textContent ?? '').toLowerCase();
+            const shown = inTab(member, tab) && (!query || name.includes(query));
+            member.hidden = !shown;
+            visible.set(group, (visible.get(group) ?? 0) + (shown ? 1 : 0));
+            for (const expand of Array.from(member.querySelectorAll(EXPAND))) {
+                const detail = this.host.ownerDocument.getElementById(expand.getAttribute('aria-controls') ?? '');
+                if (detail && this.host.contains(detail)) {
+                    detail.hidden = !shown || expand.getAttribute('aria-expanded') !== 'true';
+                }
+            }
+        }
+        for (const group of Array.from(this.host.querySelectorAll(GROUP))) {
+            const count = visible.get(group.dataset['group'] ?? '') ?? 0;
+            const counter = group.querySelector(COUNT);
+            group.hidden = count === 0;
+            if (counter) {
+                counter.textContent = String(count);
+            }
+        }
+        const empty = this.host.querySelector(EMPTY);
+        if (empty) {
+            empty.hidden = this.members().some((member) => !member.hidden);
+        }
+    }
+    fade() {
+        const list = this.tabs()[0]?.parentElement;
+        if (!list) {
+            return;
+        }
+        const max = list.scrollWidth - list.clientWidth;
+        const edges = [
+            ...(max > 1 && list.scrollLeft > 1 ? ['start'] : []),
+            ...(max > 1 && list.scrollLeft < max - 1 ? ['end'] : []),
+        ];
+        if (edges.length) {
+            list.dataset['fade'] = edges.join(' ');
+        }
+        else {
+            delete list.dataset['fade'];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMembersFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.1", type: NgDocMembersFilterDirective, isStandalone: true, selector: "[ngDocMembersFilter]", host: { listeners: { "click": "onClick($event)", "input": "onInput($event)", "keydown": "onKeydown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMembersFilterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngDocMembersFilter]',
+                    host: {
+                        '(click)': 'onClick($event)',
+                        '(input)': 'onInput($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Whether a member row belongs to a tab.
+ * @param member - The member row.
+ * @param tab - "all", "inherited" or a group name.
+ */
+function inTab(member, tab) {
+    return (tab === ALL ||
+        (tab === INHERITED ? member.hasAttribute('data-inherited') : member.dataset['group'] === tab));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocMembersFilterDirective };
+//# sourceMappingURL=ng-doc-app-directives-members-filter.mjs.map