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

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-image-viewer.mjs","sources":["../../../../libs/app/components/image-viewer/image-viewer.component.ts","../../../../libs/app/components/image-viewer/image-viewer.component.html","../../../../libs/app/components/image-viewer/ng-doc-app-components-image-viewer.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  TemplateRef,\n  viewChild,\n} from '@angular/core';\nimport { NgDocOverlayContainerComponent, NgDocOverlayService } from '@ng-doc/ui-kit';\nimport { NgDocOverlayRef } from '@ng-doc/ui-kit/classes';\n\n@Component({\n  selector: 'ng-doc-image-viewer',\n  imports: [],\n  templateUrl: './image-viewer.component.html',\n  styleUrl: './image-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-opened]': '!!overlayRef',\n  },\n})\nexport class NgDocImageViewerComponent {\n  src = input.required<string>();\n  alt = input.required<string>();\n\n  protected readonly image = viewChild('image', { read: TemplateRef });\n  protected readonly overlay = inject(NgDocOverlayService);\n  protected readonly element = inject(ElementRef<HTMLElement>).nativeElement;\n  protected readonly changeDetectorRef = inject(ChangeDetectorRef);\n  protected overlayRef?: NgDocOverlayRef;\n\n  @HostListener('click')\n  clickEvent(): void {\n    this.overlayRef?.close();\n\n    const { width, height, top, left } = this.element.getBoundingClientRect();\n    const windowWidth = window.innerWidth;\n    const windowHeight = window.innerHeight;\n    const ratio = Math.min(windowWidth / width, windowHeight / height);\n    const newWidth = width * ratio;\n    const newHeight = height * ratio;\n\n    this.overlayRef = this.overlay.open(this.image(), {\n      overlayContainer: NgDocOverlayContainerComponent,\n      positionStrategy: this.overlay\n        .globalPositionStrategy()\n        .centerHorizontally()\n        .centerVertically(),\n      scrollStrategy: this.overlay.scrollStrategy().block(),\n      hasBackdrop: true,\n      backdropClass: 'ng-doc-blur-backdrop',\n      openAnimation: [\n        [\n          {\n            position: 'fixed',\n            width: `${width}px`,\n            height: `${height}px`,\n            top: `${top}px`,\n            left: `${left}px`,\n            transform: 'translate(0%, 0)',\n          },\n          {\n            position: 'fixed',\n            width: `${newWidth}px`,\n            height: `${newHeight}px`,\n            top: '50%',\n            left: '50%',\n            transform: 'translate(-50%, -50%)',\n          },\n        ],\n        {\n          duration: 300,\n          easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',\n        },\n        //\n        // group([\n        //   animate(\n        //     '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',\n        //     style({\n        //       width: `${newWidth}px`,\n        //       height: `${newHeight}px`,\n        //       top: '50%',\n        //       left: '50%',\n        //       transform: 'translate(-50%, -50%)',\n        //     }),\n        //   ),\n        //   query('.ng-doc-image-container', [\n        //     style({ padding: 0 }),\n        //     animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ padding: '16px' })),\n        //   ]),\n        // ]),\n      ],\n      // closeAnimation: [\n      //   style({\n      //     position: 'fixed',\n      //     width: `${newWidth}px`,\n      //     height: `${newHeight}px`,\n      //     top: '50%',\n      //     left: '50%',\n      //     transform: 'translate(-50%, -50%)',\n      //   }),\n      //   group([\n      //     animate(\n      //       '300ms cubic-bezier(0.25, 0.8, 0.25, 1)',\n      //       style({ width, height, top, left, transform: 'translate(0%, 0)' }),\n      //     ),\n      //     query(\n      //       '.ng-doc-image-container',\n      //       animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ padding: 0 })),\n      //     ),\n      //   ]),\n      // ],\n    });\n\n    this.overlayRef.afterClose().subscribe(() => {\n      this.overlayRef = undefined;\n      this.changeDetectorRef.markForCheck();\n    });\n  }\n\n  protected enterContainer(element: HTMLElement): void {\n    console.log('enterContainer');\n    element.animate([{ padding: 0 }, { padding: '16px' }], {\n      duration: 300,\n      easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',\n    });\n  }\n}\n","<ng-content></ng-content>\n\n<ng-template #image>\n  <div\n    class=\"ng-doc-image-container\"\n    (click)=\"overlayRef?.close()\"\n    (animate.enter)=\"enterContainer(element)\"\n    #element>\n    <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n  </div>\n</ng-template>\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-image-viewer.mjs","sources":["../../../../libs/app/components/image-viewer/image-viewer.component.ts","../../../../libs/app/components/image-viewer/image-viewer.component.html","../../../../libs/app/components/image-viewer/ng-doc-app-components-image-viewer.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  DOCUMENT,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  TemplateRef,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { NgDocOverlayContainerComponent, NgDocOverlayService } from '@ng-doc/ui-kit';\nimport { NgDocOverlayRef } from '@ng-doc/ui-kit/classes';\n\n/** The size of the opened image, in CSS pixels. */\ninterface ZoomSize {\n  width: number;\n  height: number;\n}\n\n/** Easing of the zoom: fast at first, settling into the final size. */\nconst ZOOM_EASING: string = 'cubic-bezier(0.2, 0, 0, 1)';\n\n/**\n * Wraps an image of the page: clicking it, or pressing Enter or Space on it, opens the image at\n * its natural size, scaled down to fit the window.\n *\n * An image inside a link keeps the link's behaviour, and an image with an empty `alt` is\n * decorative: neither becomes a button.\n */\n@Component({\n  selector: 'ng-doc-image-viewer',\n  imports: [],\n  templateUrl: './image-viewer.component.html',\n  styleUrl: './image-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.role]': 'isInteractive() ? \"button\" : null',\n    '[attr.tabindex]': 'isInteractive() ? 0 : null',\n    '[attr.aria-label]': 'isInteractive() ? \"Open image: \" + alt() : null',\n    '[attr.data-interactive]': 'isInteractive()',\n    '[attr.data-opened]': 'opened()',\n    '(click)': 'clickEvent()',\n    '(keydown.enter)': 'clickEvent()',\n    '(keydown.space)': 'onSpace($event)',\n  },\n})\nexport class NgDocImageViewerComponent {\n  /** Source of the image. */\n  readonly src = input.required<string>();\n\n  /** Alternative text of the image. */\n  readonly alt = input.required<string>();\n\n  protected readonly image = viewChild.required('image', { read: TemplateRef });\n  protected readonly overlay = inject(NgDocOverlayService);\n  protected readonly element: HTMLElement = inject(ElementRef<HTMLElement>).nativeElement;\n  protected readonly window: Window | null = inject(DOCUMENT).defaultView;\n\n  /** Whether the scaled image is open. */\n  protected readonly opened = signal<boolean>(false);\n\n  /** The size of the opened image. */\n  protected readonly size = signal<ZoomSize>({ width: 0, height: 0 });\n\n  protected overlayRef?: NgDocOverlayRef;\n\n  private attempt: number = 0;\n  private destroyed: boolean = false;\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => {\n      this.destroyed = true;\n      this.overlayRef?.close();\n    });\n  }\n\n  /**\n   * Opens the image at its natural size, scaled down to fit the window, unless the image is not\n   * interactive. The image grows from its place on the page.\n   */\n  clickEvent(): void {\n    untracked(() => {\n      if (this.isInteractive()) {\n        void this.open();\n      }\n    });\n  }\n\n  /**\n   * Whether the image opens: it has a text alternative and is not inside a link. The page\n   * processor moves the host into place before change detection, so the check reads the DOM\n   * where the image ends up.\n   */\n  protected isInteractive(): boolean {\n    return !!this.alt().trim() && !this.element.parentElement?.closest('a');\n  }\n\n  /**\n   * Opens the image on Space without scrolling the page.\n   * @param event - The key press.\n   */\n  protected onSpace(event: Event): void {\n    if (this.isInteractive()) {\n      event.preventDefault();\n      this.clickEvent();\n    }\n  }\n\n  private async open(): Promise<void> {\n    this.overlayRef?.close();\n\n    const attempt: number = ++this.attempt;\n    const thumbnail: HTMLImageElement | null = this.element.querySelector('img');\n\n    await this.decode(thumbnail);\n\n    // The reader may have opened the image again, pressed Escape or left the page while it\n    // decoded.\n    if (attempt !== this.attempt || this.destroyed) {\n      return;\n    }\n\n    // The size is known before anything moves, so the image grows straight to it.\n    const source: ZoomSize = this.sourceSize(thumbnail);\n    const size: ZoomSize = this.fit(source);\n    const zoomedFrame: Keyframe = { transformOrigin: '0 0', transform: 'none' };\n    // The close animation reads its keyframes when it runs; a refit updates them in place.\n    const closeFrames: Keyframe[] = [zoomedFrame, this.thumbnailFrame(thumbnail, size)];\n    const animate: boolean = !this.window?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n\n    this.size.set(size);\n\n    const overlayRef: NgDocOverlayRef = this.overlay.open(this.image(), {\n      overlayContainer: NgDocOverlayContainerComponent,\n      positionStrategy: this.overlay\n        .globalPositionStrategy()\n        .centerHorizontally()\n        .centerVertically(),\n      scrollStrategy: this.overlay.scrollStrategy().block(),\n      hasBackdrop: true,\n      backdropClass: 'ng-doc-blur-backdrop',\n      width: `${size.width}px`,\n      height: `${size.height}px`,\n      openAnimation: animate\n        ? [[closeFrames[1], zoomedFrame], { duration: 300, easing: ZOOM_EASING }]\n        : undefined,\n      closeAnimation: animate\n        ? [closeFrames, { duration: 200, easing: ZOOM_EASING, fill: 'forwards' }]\n        : undefined,\n    });\n    const listeners: AbortController = new AbortController();\n    // A resized or rotated window fits the image again.\n    const refit = (): void => {\n      const fitted: ZoomSize = this.fit(source);\n\n      this.size.set(fitted);\n      overlayRef.overlayRef.updateSize({\n        width: `${fitted.width}px`,\n        height: `${fitted.height}px`,\n      });\n      closeFrames[1] = this.thumbnailFrame(thumbnail, fitted);\n    };\n\n    this.window?.addEventListener('resize', refit, { signal: listeners.signal });\n    this.window?.addEventListener('orientationchange', refit, { signal: listeners.signal });\n\n    this.overlayRef = overlayRef;\n    this.opened.set(true);\n\n    overlayRef.afterClose().subscribe(() => {\n      listeners.abort();\n\n      if (this.overlayRef === overlayRef) {\n        this.overlayRef = undefined;\n        this.opened.set(false);\n        this.element.focus();\n      }\n    });\n  }\n\n  /**\n   * Waits until the image is decoded, so its natural size is known. Escape cancels the open\n   * meanwhile, as it closes the opened image. A failed decode (a broken or not yet available\n   * image) leaves the sizes that are known.\n   * @param thumbnail - The image on the page.\n   */\n  private async decode(thumbnail: HTMLImageElement | null): Promise<void> {\n    const listeners: AbortController = new AbortController();\n\n    this.window?.document.addEventListener(\n      'keydown',\n      (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          this.attempt++;\n        }\n      },\n      { capture: true, signal: listeners.signal },\n    );\n\n    try {\n      await thumbnail?.decode?.().catch(() => undefined);\n    } finally {\n      listeners.abort();\n    }\n  }\n\n  /**\n   * The size to scale: the natural size of the image, or the size of the thumbnail for an image\n   * without one (an SVG without dimensions), which may then grow to fill the window.\n   * @param thumbnail - The image on the page.\n   */\n  private sourceSize(thumbnail: HTMLImageElement | null): ZoomSize & { natural: boolean } {\n    const naturalWidth: number = thumbnail?.naturalWidth ?? 0;\n    const naturalHeight: number = thumbnail?.naturalHeight ?? 0;\n\n    if (naturalWidth > 0 && naturalHeight > 0) {\n      return { width: naturalWidth, height: naturalHeight, natural: true };\n    }\n\n    const rect: DOMRect = (thumbnail ?? this.element).getBoundingClientRect();\n\n    return { width: rect.width, height: rect.height, natural: false };\n  }\n\n  /**\n   * The size the image opens at: its natural size, scaled down to fit the viewport with a margin\n   * and never scaled up. An image without a natural size fills the available space with the\n   * proportions of its thumbnail.\n   * @param source - The size to scale.\n   */\n  private fit(source: ZoomSize & { natural?: boolean }): ZoomSize {\n    const viewport: HTMLElement | undefined = this.window?.document.documentElement;\n    const viewportWidth: number = viewport?.clientWidth || this.window?.innerWidth || 0;\n    const viewportHeight: number = viewport?.clientHeight || this.window?.innerHeight || 0;\n    const margin: number = viewportWidth <= 640 ? 16 : 48;\n    const maxWidth: number = Math.max(viewportWidth - margin * 2, 1);\n    const maxHeight: number = Math.max(viewportHeight - margin * 2, 1);\n    const width: number = source.width || maxWidth;\n    const height: number = source.height || maxHeight;\n    const scale: number = Math.min(\n      source.natural ? 1 : Number.POSITIVE_INFINITY,\n      maxWidth / width,\n      maxHeight / height,\n    );\n\n    return { width: Math.round(width * scale), height: Math.round(height * scale) };\n  }\n\n  /**\n   * The keyframe that puts the opened image over its thumbnail. The overlay centres the image in\n   * the viewport; the frame scales it uniformly to fit the thumbnail's box and centres it there,\n   * so an image whose proportions differ from its box's is not distorted.\n   * @param thumbnail - The image on the page.\n   * @param size - The size of the opened image.\n   */\n  private thumbnailFrame(thumbnail: HTMLImageElement | null, size: ZoomSize): Keyframe {\n    const from: DOMRect = (thumbnail ?? this.element).getBoundingClientRect();\n    const viewport: HTMLElement | undefined = this.window?.document.documentElement;\n    const left: number = ((viewport?.clientWidth ?? size.width) - size.width) / 2;\n    const top: number = ((viewport?.clientHeight ?? size.height) - size.height) / 2;\n    const scale: number = Math.min(from.width / size.width, from.height / size.height) || 0;\n    const x: number = from.left + (from.width - size.width * scale) / 2 - left;\n    const y: number = from.top + (from.height - size.height * scale) / 2 - top;\n\n    return { transformOrigin: '0 0', transform: `translate(${x}px, ${y}px) scale(${scale})` };\n  }\n}\n","<ng-content></ng-content>\n\n<ng-template #image>\n  <div\n    class=\"ng-doc-image-container\"\n    [style.width.px]=\"size().width\"\n    [style.height.px]=\"size().height\"\n    (click)=\"overlayRef?.close()\">\n    <img class=\"ng-doc-scaled-image\" [src]=\"src()\" [alt]=\"alt()\" />\n  </div>\n</ng-template>\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-kind-icon.mjs

@@ -1,38 +1,55 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 
+/**
+ * Words the kind chips show for declaration kinds whose name is not already a readable word.
+ * Other kinds (and value types) are shown as they are.
+ */
+const NG_DOC_KIND_LABELS = {
+    TypeAlias: 'Type alias',
+};
+/**
+ * The label a kind chip shows for a kind.
+ * @param kind - Declaration kind (for example `Class` or `TypeAlias`) or value type (`string`).
+ * @returns The word to show, for example "Type alias".
+ */
+function ngDocKindLabel(kind) {
+    return NG_DOC_KIND_LABELS[kind] ?? kind;
+}
+/**
+ * A word chip for a declaration kind (`Class`, `Component`, `Type alias`, ...) or a value type
+ * (`string`, `boolean`, ...), coloured by the kind.
+ */
 class NgDocKindIconComponent {
     constructor() {
-        this.kind = '';
-        this.type = 'declaration';
-        this.size = 'small';
+        /** Declaration kind or value type. */
+        this.kind = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        /** Whether `kind` is a declaration kind or a value type; it selects the colours. */
+        this.type = input('declaration', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** `small` is the compact chip; `medium` the regular one. */
+        this.size = input('small', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** The word the chip shows. */
+        this.label = computed(() => ngDocKindLabel(this.kind()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocKindIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocKindIconComponent, isStandalone: true, selector: "ng-doc-kind-icon", inputs: { kind: "kind", type: "type", size: "size" }, host: { properties: { "attr.data-ng-doc-kind": "this.kind", "attr.data-ng-doc-type": "this.type", "attr.data-ng-doc-size": "this.size" } }, ngImport: i0, template: '{{kind[0]}}', isInline: true, styles: [":host{display:inline-block;width:22px;height:22px;border-radius:calc(var(--ng-doc-base-gutter) / 2);font-size:13px;text-align:center;line-height:22px;text-transform:uppercase;flex-shrink:0;font-weight:700;color:var(--ng-doc-kind-icon-background);background:color-mix(in srgb,var(--ng-doc-kind-icon-background) var(--ng-doc-kind-icon-background-opacity, 15%),transparent)}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 2);height:calc(var(--ng-doc-base-gutter) * 2);line-height:calc(var(--ng-doc-base-gutter) * 2)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Class]{--ng-doc-kind-icon-background: var(--ng-doc-class-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Interface]{--ng-doc-kind-icon-background: var(--ng-doc-interface-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Enum]{--ng-doc-kind-icon-background: var(--ng-doc-enum-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Variable]{--ng-doc-kind-icon-background: var(--ng-doc-variable-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Function]{--ng-doc-kind-icon-background: var(--ng-doc-function-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=TypeAlias]{--ng-doc-kind-icon-background: var(--ng-doc-type-alias-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Component]{--ng-doc-kind-icon-background: var(--ng-doc-component-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Directive]{--ng-doc-kind-icon-background: var(--ng-doc-directive-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Injectable]{--ng-doc-kind-icon-background: var(--ng-doc-injectable-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Pipe]{--ng-doc-kind-icon-background: var(--ng-doc-pipe-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=NgModule]{--ng-doc-kind-icon-background: var(--ng-doc-ng-module-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=ng-doc-tag-selector]{--ng-doc-kind-icon-background: var(--ng-doc-selector-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=string]{--ng-doc-kind-icon-background: var(--ng-doc-string-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=number]{--ng-doc-kind-icon-background: var(--ng-doc-number-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=boolean]{--ng-doc-kind-icon-background: var(--ng-doc-boolean-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=null]{--ng-doc-kind-icon-background: var(--ng-doc-null-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=undefined]{--ng-doc-kind-icon-background: var(--ng-doc-undefined-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=object]{--ng-doc-kind-icon-background: var(--ng-doc-object-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocKindIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocKindIconComponent, isStandalone: true, selector: "ng-doc-kind-icon", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-ng-doc-kind": "kind()", "attr.data-ng-doc-type": "type()", "attr.data-ng-doc-size": "size()" } }, ngImport: i0, template: '{{ label() }}', isInline: true, styles: [":host{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 7px;border-radius:var(--ng-doc-radius-sm);font-family:var(--ng-doc-font-family);font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;color:color-mix(in oklab,var(--ng-doc-kind-icon-background, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-strong),var(--ng-doc-heading-color));background:color-mix(in oklab,var(--ng-doc-kind-icon-background, var(--ng-doc-hue-neutral)) var(--ng-doc-kind-icon-background-opacity, var(--ng-doc-mix-chip)),var(--ng-doc-background));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ng-doc-kind-icon-background, var(--ng-doc-hue-neutral)) 24%,transparent)}:host[data-ng-doc-size=small]{height:18px;padding:0 5px;font-size:10.5px}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Class]{--ng-doc-kind-icon-background: var(--ng-doc-class-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Interface]{--ng-doc-kind-icon-background: var(--ng-doc-interface-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Enum]{--ng-doc-kind-icon-background: var(--ng-doc-enum-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Variable]{--ng-doc-kind-icon-background: var(--ng-doc-variable-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Function]{--ng-doc-kind-icon-background: var(--ng-doc-function-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=TypeAlias]{--ng-doc-kind-icon-background: var(--ng-doc-type-alias-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Component]{--ng-doc-kind-icon-background: var(--ng-doc-component-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Directive]{--ng-doc-kind-icon-background: var(--ng-doc-directive-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Injectable]{--ng-doc-kind-icon-background: var(--ng-doc-injectable-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Pipe]{--ng-doc-kind-icon-background: var(--ng-doc-pipe-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=NgModule]{--ng-doc-kind-icon-background: var(--ng-doc-ng-module-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=ng-doc-tag-selector]{--ng-doc-kind-icon-background: var(--ng-doc-selector-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=string]{--ng-doc-kind-icon-background: var(--ng-doc-string-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=number]{--ng-doc-kind-icon-background: var(--ng-doc-number-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=boolean]{--ng-doc-kind-icon-background: var(--ng-doc-boolean-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=null]{--ng-doc-kind-icon-background: var(--ng-doc-null-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=undefined]{--ng-doc-kind-icon-background: var(--ng-doc-undefined-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=object]{--ng-doc-kind-icon-background: var(--ng-doc-object-background)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocKindIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocKindIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-kind-icon', template: '{{kind[0]}}', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:inline-block;width:22px;height:22px;border-radius:calc(var(--ng-doc-base-gutter) / 2);font-size:13px;text-align:center;line-height:22px;text-transform:uppercase;flex-shrink:0;font-weight:700;color:var(--ng-doc-kind-icon-background);background:color-mix(in srgb,var(--ng-doc-kind-icon-background) var(--ng-doc-kind-icon-background-opacity, 15%),transparent)}:host[data-ng-doc-size=small]{width:calc(var(--ng-doc-base-gutter) * 2);height:calc(var(--ng-doc-base-gutter) * 2);line-height:calc(var(--ng-doc-base-gutter) * 2)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Class]{--ng-doc-kind-icon-background: var(--ng-doc-class-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Interface]{--ng-doc-kind-icon-background: var(--ng-doc-interface-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Enum]{--ng-doc-kind-icon-background: var(--ng-doc-enum-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Variable]{--ng-doc-kind-icon-background: var(--ng-doc-variable-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Function]{--ng-doc-kind-icon-background: var(--ng-doc-function-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=TypeAlias]{--ng-doc-kind-icon-background: var(--ng-doc-type-alias-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Component]{--ng-doc-kind-icon-background: var(--ng-doc-component-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Directive]{--ng-doc-kind-icon-background: var(--ng-doc-directive-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Injectable]{--ng-doc-kind-icon-background: var(--ng-doc-injectable-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Pipe]{--ng-doc-kind-icon-background: var(--ng-doc-pipe-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=NgModule]{--ng-doc-kind-icon-background: var(--ng-doc-ng-module-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=ng-doc-tag-selector]{--ng-doc-kind-icon-background: var(--ng-doc-selector-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=string]{--ng-doc-kind-icon-background: var(--ng-doc-string-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=number]{--ng-doc-kind-icon-background: var(--ng-doc-number-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=boolean]{--ng-doc-kind-icon-background: var(--ng-doc-boolean-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=null]{--ng-doc-kind-icon-background: var(--ng-doc-null-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=undefined]{--ng-doc-kind-icon-background: var(--ng-doc-undefined-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=object]{--ng-doc-kind-icon-background: var(--ng-doc-object-background)}\n"] }]
-        }], propDecorators: { kind: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-kind']
-            }], type: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-type']
-            }], size: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-ng-doc-size']
-            }] } });
+            args: [{ selector: 'ng-doc-kind-icon', template: '{{ label() }}', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-ng-doc-kind]': 'kind()',
+                        '[attr.data-ng-doc-type]': 'type()',
+                        '[attr.data-ng-doc-size]': 'size()',
+                    }, styles: [":host{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 7px;border-radius:var(--ng-doc-radius-sm);font-family:var(--ng-doc-font-family);font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;color:color-mix(in oklab,var(--ng-doc-kind-icon-background, var(--ng-doc-hue-neutral)) var(--ng-doc-mix-strong),var(--ng-doc-heading-color));background:color-mix(in oklab,var(--ng-doc-kind-icon-background, var(--ng-doc-hue-neutral)) var(--ng-doc-kind-icon-background-opacity, var(--ng-doc-mix-chip)),var(--ng-doc-background));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ng-doc-kind-icon-background, var(--ng-doc-hue-neutral)) 24%,transparent)}:host[data-ng-doc-size=small]{height:18px;padding:0 5px;font-size:10.5px}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Class]{--ng-doc-kind-icon-background: var(--ng-doc-class-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Interface]{--ng-doc-kind-icon-background: var(--ng-doc-interface-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Enum]{--ng-doc-kind-icon-background: var(--ng-doc-enum-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Variable]{--ng-doc-kind-icon-background: var(--ng-doc-variable-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Function]{--ng-doc-kind-icon-background: var(--ng-doc-function-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=TypeAlias]{--ng-doc-kind-icon-background: var(--ng-doc-type-alias-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Component]{--ng-doc-kind-icon-background: var(--ng-doc-component-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Directive]{--ng-doc-kind-icon-background: var(--ng-doc-directive-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Injectable]{--ng-doc-kind-icon-background: var(--ng-doc-injectable-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=Pipe]{--ng-doc-kind-icon-background: var(--ng-doc-pipe-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=NgModule]{--ng-doc-kind-icon-background: var(--ng-doc-ng-module-decorator-background)}:host[data-ng-doc-type=declaration][data-ng-doc-kind=ng-doc-tag-selector]{--ng-doc-kind-icon-background: var(--ng-doc-selector-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=string]{--ng-doc-kind-icon-background: var(--ng-doc-string-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=number]{--ng-doc-kind-icon-background: var(--ng-doc-number-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=boolean]{--ng-doc-kind-icon-background: var(--ng-doc-boolean-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=null]{--ng-doc-kind-icon-background: var(--ng-doc-null-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=undefined]{--ng-doc-kind-icon-background: var(--ng-doc-undefined-background)}:host[data-ng-doc-type=type][data-ng-doc-kind=object]{--ng-doc-kind-icon-background: var(--ng-doc-object-background)}\n"] }]
+        }], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgDocKindIconComponent };
+export { NG_DOC_KIND_LABELS, NgDocKindIconComponent, ngDocKindLabel };
 //# sourceMappingURL=ng-doc-app-components-kind-icon.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-kind-icon.mjs","sources":["../../../../libs/app/components/kind-icon/kind-icon.component.ts","../../../../libs/app/components/kind-icon/ng-doc-app-components-kind-icon.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n  selector: 'ng-doc-kind-icon',\n  template: '{{kind[0]}}',\n  styleUrls: ['./kind-icon.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n})\nexport class NgDocKindIconComponent {\n  @Input()\n  @HostBinding('attr.data-ng-doc-kind')\n  kind: string = '';\n\n  @Input()\n  @HostBinding('attr.data-ng-doc-type')\n  type: 'declaration' | 'type' = 'declaration';\n\n  @Input()\n  @HostBinding('attr.data-ng-doc-size')\n  size: 'small' | 'medium' = 'small';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MASa,sBAAsB,CAAA;AAPnC,IAAA,WAAA,GAAA;QAUE,IAAA,CAAA,IAAI,GAAW,EAAE;QAIjB,IAAA,CAAA,IAAI,GAA2B,aAAa;QAI5C,IAAA,CAAA,IAAI,GAAuB,OAAO;AACnC,IAAA;8GAZY,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,8QALvB,aAAa,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ixFAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKZ,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAPlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,YAClB,aAAa,EAAA,eAAA,EAEN,uBAAuB,CAAC,MAAM,cACnC,IAAI,EAAA,MAAA,EAAA,CAAA,ixFAAA,CAAA,EAAA;;sBAGf;;sBACA,WAAW;uBAAC,uBAAuB;;sBAGnC;;sBACA,WAAW;uBAAC,uBAAuB;;sBAGnC;;sBACA,WAAW;uBAAC,uBAAuB;;;ACnBtC;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-components-kind-icon.mjs","sources":["../../../../libs/app/components/kind-icon/kind-icon.component.ts","../../../../libs/app/components/kind-icon/ng-doc-app-components-kind-icon.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, Signal } from '@angular/core';\n\n/**\n * Words the kind chips show for declaration kinds whose name is not already a readable word.\n * Other kinds (and value types) are shown as they are.\n */\nexport const NG_DOC_KIND_LABELS: Readonly<Record<string, string>> = {\n  TypeAlias: 'Type alias',\n};\n\n/**\n * The label a kind chip shows for a kind.\n * @param kind - Declaration kind (for example `Class` or `TypeAlias`) or value type (`string`).\n * @returns The word to show, for example \"Type alias\".\n */\nexport function ngDocKindLabel(kind: string): string {\n  return NG_DOC_KIND_LABELS[kind] ?? kind;\n}\n\n/**\n * A word chip for a declaration kind (`Class`, `Component`, `Type alias`, ...) or a value type\n * (`string`, `boolean`, ...), coloured by the kind.\n */\n@Component({\n  selector: 'ng-doc-kind-icon',\n  template: '{{ label() }}',\n  styleUrls: ['./kind-icon.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-ng-doc-kind]': 'kind()',\n    '[attr.data-ng-doc-type]': 'type()',\n    '[attr.data-ng-doc-size]': 'size()',\n  },\n})\nexport class NgDocKindIconComponent {\n  /** Declaration kind or value type. */\n  readonly kind = input<string>('');\n\n  /** Whether `kind` is a declaration kind or a value type; it selects the colours. */\n  readonly type = input<'declaration' | 'type'>('declaration');\n\n  /** `small` is the compact chip; `medium` the regular one. */\n  readonly size = input<'small' | 'medium'>('small');\n\n  /** The word the chip shows. */\n  protected readonly label: Signal<string> = computed(() => ngDocKindLabel(this.kind()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAEA;;;AAGG;AACI,MAAM,kBAAkB,GAAqC;AAClE,IAAA,SAAS,EAAE,YAAY;;AAGzB;;;;AAIG;AACG,SAAU,cAAc,CAAC,IAAY,EAAA;AACzC,IAAA,OAAO,kBAAkB,CAAC,IAAI,CAAC,IAAI,IAAI;AACzC;AAEA;;;AAGG;MAYU,sBAAsB,CAAA;AAXnC,IAAA,WAAA,GAAA;;QAaW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE;iFAAC;;QAGxB,IAAA,CAAA,IAAI,GAAG,KAAK,CAAyB,aAAa;iFAAC;;QAGnD,IAAA,CAAA,IAAI,GAAG,KAAK,CAAqB,OAAO;iFAAC;;AAG/B,QAAA,IAAA,CAAA,KAAK,GAAmB,QAAQ,CAAC,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;kFAAC;AACvF,IAAA;8GAZY,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,0jBATvB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,s+FAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FASd,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAXlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,YAClB,eAAe,EAAA,eAAA,EAER,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,yBAAyB,EAAE,QAAQ;AACnC,wBAAA,yBAAyB,EAAE,QAAQ;AACpC,qBAAA,EAAA,MAAA,EAAA,CAAA,s+FAAA,CAAA,EAAA;;;AChCH;;AAEG;;;;"}

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

@@ -1,20 +1,23 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
+/**
+ * Router link to a path of the application.
+ */
 class NgDocLinkComponent {
     constructor() {
-        this.path = '';
+        /** The path to link to. */
+        this.path = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: NgDocLinkComponent, isStandalone: true, selector: "ng-doc-link", inputs: { path: "path" }, ngImport: i0, template: "<a [routerLink]=\"[path]\">\n\t<ng-content></ng-content>\n</a>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.1", type: NgDocLinkComponent, isStandalone: true, selector: "ng-doc-link", inputs: { path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<a [routerLink]=\"[path()]\">\n  <ng-content></ng-content>\n</a>\n", styles: [""], dependencies: [{ 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: NgDocLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocLinkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<a [routerLink]=\"[path]\">\n\t<ng-content></ng-content>\n</a>\n" }]
-        }], propDecorators: { path: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ng-doc-link', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink], template: "<a [routerLink]=\"[path()]\">\n  <ng-content></ng-content>\n</a>\n" }]
+        }], propDecorators: { path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-link.mjs","sources":["../../../../libs/app/components/link/link.component.ts","../../../../libs/app/components/link/link.component.html","../../../../libs/app/components/link/ng-doc-app-components-link.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\n@Component({\n  selector: 'ng-doc-link',\n  templateUrl: './link.component.html',\n  styleUrls: ['./link.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterLink],\n})\nexport class NgDocLinkComponent {\n  @Input()\n  path: string = '';\n}\n","<a [routerLink]=\"[path]\">\n\t<ng-content></ng-content>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAUa,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;QASE,IAAA,CAAA,IAAI,GAAW,EAAE;AAClB,IAAA;8GAHY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECV/B,kEAGA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDKY,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAET,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,mBAGN,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,UAAU,CAAC,EAAA,QAAA,EAAA,kEAAA,EAAA;;sBAGpB;;;AEXH;;AAEG;;;;"}
+{"version":3,"file":"ng-doc-app-components-link.mjs","sources":["../../../../libs/app/components/link/link.component.ts","../../../../libs/app/components/link/link.component.html","../../../../libs/app/components/link/ng-doc-app-components-link.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\n/**\n * Router link to a path of the application.\n */\n@Component({\n  selector: 'ng-doc-link',\n  templateUrl: './link.component.html',\n  styleUrls: ['./link.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterLink],\n})\nexport class NgDocLinkComponent {\n  /** The path to link to. */\n  readonly path = input<string>('');\n}\n","<a [routerLink]=\"[path()]\">\n  <ng-content></ng-content>\n</a>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAGA;;AAEG;MAQU,kBAAkB,CAAA;AAP/B,IAAA,WAAA,GAAA;;QASW,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE;iFAAC;AAClC,IAAA;8GAHY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECb/B,oEAGA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDQY,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAET,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAP9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,mBAGN,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,UAAU,CAAC,EAAA,QAAA,EAAA,oEAAA,EAAA;;;AEXvB;;AAEG;;;;"}

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

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@ng-doc/app/directives/members-filter';
+import { NgDocMembersFilterDirective } from '@ng-doc/app/directives/members-filter';
+
+/**
+ * The members table of an API page in the symbol view. The builder renders its tabs, filter and
+ * rows as the component's content, and the component adds the member filter to them.
+ */
+class NgDocMembersComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMembersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocMembersComponent, isStandalone: true, selector: "ng-doc-members", host: { classAttribute: "ng-doc-members" }, hostDirectives: [{ directive: i1.NgDocMembersFilterDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMembersComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-doc-members',
+                    template: '<ng-content></ng-content>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [NgDocMembersFilterDirective],
+                    host: { class: 'ng-doc-members' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocMembersComponent };
+//# sourceMappingURL=ng-doc-app-components-members.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ng-doc-app-components-members.mjs","sources":["../../../../libs/app/components/members/members.component.ts","../../../../libs/app/components/members/ng-doc-app-components-members.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { NgDocMembersFilterDirective } from '@ng-doc/app/directives/members-filter';\n\n/**\n * The members table of an API page in the symbol view. The builder renders its tabs, filter and\n * rows as the component's content, and the component adds the member filter to them.\n */\n@Component({\n  selector: 'ng-doc-members',\n  template: '<ng-content></ng-content>',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  hostDirectives: [NgDocMembersFilterDirective],\n  host: { class: 'ng-doc-members' },\n})\nexport class NgDocMembersComponent {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAGA;;;AAGG;MAQU,qBAAqB,CAAA;8GAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,uLALtB,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAK1B,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAPjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,QAAQ,EAAE,2BAA2B;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,cAAc,EAAE,CAAC,2BAA2B,CAAC;AAC7C,oBAAA,IAAI,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE;AAClC,iBAAA;;;ACbD;;AAEG;;;;"}

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

@@ -1,14 +1,25 @@
-import { isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, inject, ChangeDetectorRef, PLATFORM_ID, ChangeDetectionStrategy, Component } from '@angular/core';
+import { input, signal, inject, PLATFORM_ID, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';
 import { NgDocThemeService } from '@ng-doc/app/services/theme';
 import { NG_DOC_MERMAID } from '@ng-doc/app/tokens';
 import { NgDocMagnifierComponent, MagnifierControllerComponent, NgDocSpinnerComponent } from '@ng-doc/ui-kit';
 
 let id = 0;
+/** The init directive that renders one graph with Mermaid's dark theme. */
+const DARK_THEME_DIRECTIVE = '%%{init: {"theme": "dark"}}%%\n';
+/**
+ * Renders a Mermaid graph in a zoomable, pannable viewer. The graph is rendered in the browser
+ * only, again when it changes and when the theme changes.
+ *
+ * In the dark theme (or `auto` with a dark OS theme) the graph uses Mermaid's dark theme, unless
+ * the graph or `provideMermaid` chooses a theme of its own.
+ */
 class NgDocMermaidViewerComponent {
     constructor() {
+        /** Source of the Mermaid graph. */
         this.graph = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "graph" }] : /* istanbul ignore next */ []));
         this.html = signal('', /* @ts-ignore */
@@ -17,45 +28,75 @@ class NgDocMermaidViewerComponent {
         ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
         this.error = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.platform = inject(PLATFORM_ID);
         this.id = `ng-doc-mermaid-viewer-${id++}`;
+        // Renders are asynchronous: only the result of the latest one is shown.
+        this.renderId = 0;
+        this.document = inject(DOCUMENT);
+        this.themeService = inject(NgDocThemeService);
         const mermaid = inject(NG_DOC_MERMAID, { optional: true });
         if (!mermaid) {
             throw new Error('Mermaid is not provided. Make sure that you provided mermaid using "provideMermaid" function.');
         }
         this.mermaid = mermaid;
-        inject(NgDocThemeService)
-            .themeChanges()
-            .subscribe(async () => {
-            const { svg } = await this.mermaid.render(this.id, this.graph());
-            this.html.set(svg);
-        });
+        if (isPlatformBrowser(inject(PLATFORM_ID))) {
+            effect(() => {
+                const graph = this.graph();
+                untracked(() => void this.render(graph));
+            });
+            this.themeService
+                .themeChanges()
+                .pipe(takeUntilDestroyed())
+                .subscribe(() => void this.render(untracked(this.graph)));
+        }
+    }
+    /**
+     * Adds Mermaid's dark theme to the graph when the page is dark. A graph with front matter or an
+     * init directive, and a theme set in `provideMermaid`, are left as they are.
+     * @param graph - The graph source.
+     * @returns The graph to render.
+     */
+    themed(graph) {
+        const theme = this.themeService.currentTheme;
+        const dark = theme === 'dark' ||
+            (theme === 'auto' &&
+                !!this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)').matches);
+        const configuredTheme = this.mermaid.mermaidAPI?.getSiteConfig?.().theme;
+        const ownTheme = /^\s*---/.test(graph) || /%%\{\s*init/.test(graph);
+        return dark && !ownTheme && (!configuredTheme || configuredTheme === 'default')
+            ? DARK_THEME_DIRECTIVE + graph
+            : graph;
     }
-    async ngOnInit() {
-        if (isPlatformBrowser(this.platform)) {
-            try {
-                const { svg } = await this.mermaid.render(this.id, this.graph());
+    async render(graph) {
+        const renderId = ++this.renderId;
+        try {
+            const { svg } = await this.mermaid.render(this.id, this.themed(graph));
+            if (renderId === this.renderId) {
                 this.html.set(svg);
-                this.pending.set(false);
+                this.error.set(null);
             }
-            catch (error) {
+        }
+        catch (error) {
+            if (renderId === this.renderId) {
                 this.error.set(error);
+            }
+        }
+        finally {
+            if (renderId === this.renderId) {
                 this.pending.set(false);
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocMermaidViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: NgDocMermaidViewerComponent, isStandalone: true, selector: "ng-doc-mermaid-viewer", inputs: { graph: { classPropertyName: "graph", publicName: "graph", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n", styles: [":host{position:relative;display:block;border:var(--ng-doc-mermaid-viewer-border, 1px solid var(--ng-doc-border-color));margin:var(--ng-doc-mermaid-viewer-margin, var(--ng-doc-page-block-margin));background:var(--ng-doc-mermaid-viewer-background, var(--ng-doc-base-8));border-radius:var(--ng-doc-mermaid-viewer-border-radius, var(--ng-doc-base-gutter));min-height:150px}:host ng-doc-magnifier-controller{position:absolute;bottom:calc(var(--ng-doc-base-gutter) * 2);right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-container{display:flex;justify-content:center;align-items:center;padding:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-preloader{display:flex;justify-content:center;align-items:center;width:100%;height:120px}:host .ng-doc-mermaid-error{display:flex;justify-content:center;align-items:center;height:120px;color:var(--ng-doc-alert)}\n"], dependencies: [{ kind: "component", type: NgDocMagnifierComponent, selector: "ng-doc-magnifier" }, { kind: "component", type: MagnifierControllerComponent, selector: "ng-doc-magnifier-controller", inputs: ["magnifier"] }, { kind: "component", type: NgDocSpinnerComponent, selector: "ng-doc-spinner", inputs: ["size"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMermaidViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocMermaidViewerComponent, isStandalone: true, selector: "ng-doc-mermaid-viewer", inputs: { graph: { classPropertyName: "graph", publicName: "graph", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n", styles: [":host{position:relative;display:block;border:var(--ng-doc-mermaid-viewer-border, 1px solid var(--ng-doc-border-color));margin:var(--ng-doc-mermaid-viewer-margin, var(--ng-doc-page-block-margin));background:var(--ng-doc-mermaid-viewer-background, var(--ng-doc-code-background));border-radius:var(--ng-doc-mermaid-viewer-border-radius, var(--ng-doc-radius-lg));overflow:hidden;min-height:150px}:host ng-doc-magnifier-controller{position:absolute;bottom:var(--ng-doc-space-4);right:var(--ng-doc-space-4);opacity:0;transition:opacity var(--ng-doc-transition)}@media(prefers-reduced-motion:reduce){:host ng-doc-magnifier-controller{transition:none}}@media(hover:none){:host ng-doc-magnifier-controller{opacity:1}}:host:hover ng-doc-magnifier-controller,:host:focus-within ng-doc-magnifier-controller{opacity:1}:host .ng-doc-mermaid-container{display:flex;justify-content:center;align-items:center;padding:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-preloader{display:flex;justify-content:center;align-items:center;width:100%;height:120px}:host .ng-doc-mermaid-error{display:flex;justify-content:center;align-items:center;height:120px;color:var(--ng-doc-alert)}\n"], dependencies: [{ kind: "component", type: NgDocMagnifierComponent, selector: "ng-doc-magnifier" }, { kind: "component", type: MagnifierControllerComponent, selector: "ng-doc-magnifier-controller", inputs: ["magnifier"] }, { kind: "component", type: NgDocSpinnerComponent, selector: "ng-doc-spinner", inputs: ["size"] }, { kind: "pipe", type: NgDocSanitizeHtmlPipe, name: "ngDocSanitizeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: NgDocMermaidViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocMermaidViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-mermaid-viewer', imports: [
                         NgDocMagnifierComponent,
                         MagnifierControllerComponent,
                         NgDocSanitizeHtmlPipe,
                         NgDocSpinnerComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n", styles: [":host{position:relative;display:block;border:var(--ng-doc-mermaid-viewer-border, 1px solid var(--ng-doc-border-color));margin:var(--ng-doc-mermaid-viewer-margin, var(--ng-doc-page-block-margin));background:var(--ng-doc-mermaid-viewer-background, var(--ng-doc-base-8));border-radius:var(--ng-doc-mermaid-viewer-border-radius, var(--ng-doc-base-gutter));min-height:150px}:host ng-doc-magnifier-controller{position:absolute;bottom:calc(var(--ng-doc-base-gutter) * 2);right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-container{display:flex;justify-content:center;align-items:center;padding:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-preloader{display:flex;justify-content:center;align-items:center;width:100%;height:120px}:host .ng-doc-mermaid-error{display:flex;justify-content:center;align-items:center;height:120px;color:var(--ng-doc-alert)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n", styles: [":host{position:relative;display:block;border:var(--ng-doc-mermaid-viewer-border, 1px solid var(--ng-doc-border-color));margin:var(--ng-doc-mermaid-viewer-margin, var(--ng-doc-page-block-margin));background:var(--ng-doc-mermaid-viewer-background, var(--ng-doc-code-background));border-radius:var(--ng-doc-mermaid-viewer-border-radius, var(--ng-doc-radius-lg));overflow:hidden;min-height:150px}:host ng-doc-magnifier-controller{position:absolute;bottom:var(--ng-doc-space-4);right:var(--ng-doc-space-4);opacity:0;transition:opacity var(--ng-doc-transition)}@media(prefers-reduced-motion:reduce){:host ng-doc-magnifier-controller{transition:none}}@media(hover:none){:host ng-doc-magnifier-controller{opacity:1}}:host:hover ng-doc-magnifier-controller,:host:focus-within ng-doc-magnifier-controller{opacity:1}:host .ng-doc-mermaid-container{display:flex;justify-content:center;align-items:center;padding:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-mermaid-preloader{display:flex;justify-content:center;align-items:center;width:100%;height:120px}:host .ng-doc-mermaid-error{display:flex;justify-content:center;align-items:center;height:120px;color:var(--ng-doc-alert)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { graph: [{ type: i0.Input, args: [{ isSignal: true, alias: "graph", required: true }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"ng-doc-app-components-mermaid-viewer.mjs","sources":["../../../../libs/app/components/mermaid-viewer/mermaid-viewer.component.ts","../../../../libs/app/components/mermaid-viewer/mermaid-viewer.component.html","../../../../libs/app/components/mermaid-viewer/ng-doc-app-components-mermaid-viewer.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  inject,\n  input,\n  OnInit,\n  PLATFORM_ID,\n  signal,\n} from '@angular/core';\nimport { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';\nimport { NgDocThemeService } from '@ng-doc/app/services/theme';\nimport { NG_DOC_MERMAID } from '@ng-doc/app/tokens';\nimport {\n  MagnifierControllerComponent,\n  NgDocMagnifierComponent,\n  NgDocSpinnerComponent,\n} from '@ng-doc/ui-kit';\nimport type { Mermaid } from 'mermaid';\n\nlet id = 0;\n\n@Component({\n  selector: 'ng-doc-mermaid-viewer',\n  imports: [\n    NgDocMagnifierComponent,\n    MagnifierControllerComponent,\n    NgDocSanitizeHtmlPipe,\n    NgDocSpinnerComponent,\n  ],\n  templateUrl: './mermaid-viewer.component.html',\n  styleUrl: './mermaid-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocMermaidViewerComponent implements OnInit {\n  graph = input.required<string>();\n\n  protected readonly html = signal('');\n  protected readonly pending = signal(true);\n  protected readonly error = signal<Error | null>(null);\n  protected readonly mermaid: Mermaid;\n\n  protected readonly changeDetectorRef = inject(ChangeDetectorRef);\n  protected readonly platform = inject(PLATFORM_ID);\n\n  protected readonly id = `ng-doc-mermaid-viewer-${id++}`;\n\n  constructor() {\n    const mermaid = inject(NG_DOC_MERMAID, { optional: true });\n\n    if (!mermaid) {\n      throw new Error(\n        'Mermaid is not provided. Make sure that you provided mermaid using \"provideMermaid\" function.',\n      );\n    }\n\n    this.mermaid = mermaid;\n\n    inject(NgDocThemeService)\n      .themeChanges()\n      .subscribe(async () => {\n        const { svg } = await this.mermaid.render(this.id, this.graph());\n\n        this.html.set(svg);\n      });\n  }\n\n  async ngOnInit(): Promise<void> {\n    if (isPlatformBrowser(this.platform)) {\n      try {\n        const { svg } = await this.mermaid.render(this.id, this.graph());\n\n        this.html.set(svg);\n        this.pending.set(false);\n      } catch (error: unknown) {\n        this.error.set(error as Error);\n        this.pending.set(false);\n      }\n    }\n  }\n}\n","@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ng-doc-app-components-mermaid-viewer.mjs","sources":["../../../../libs/app/components/mermaid-viewer/mermaid-viewer.component.ts","../../../../libs/app/components/mermaid-viewer/mermaid-viewer.component.html","../../../../libs/app/components/mermaid-viewer/ng-doc-app-components-mermaid-viewer.ts"],"sourcesContent":["import { DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  inject,\n  input,\n  PLATFORM_ID,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgDocSanitizeHtmlPipe } from '@ng-doc/app/pipes';\nimport { NgDocThemeService } from '@ng-doc/app/services/theme';\nimport { NG_DOC_MERMAID } from '@ng-doc/app/tokens';\nimport {\n  MagnifierControllerComponent,\n  NgDocMagnifierComponent,\n  NgDocSpinnerComponent,\n} from '@ng-doc/ui-kit';\nimport type { Mermaid } from 'mermaid';\n\nlet id = 0;\n\n/** The init directive that renders one graph with Mermaid's dark theme. */\nconst DARK_THEME_DIRECTIVE = '%%{init: {\"theme\": \"dark\"}}%%\\n';\n\n/**\n * Renders a Mermaid graph in a zoomable, pannable viewer. The graph is rendered in the browser\n * only, again when it changes and when the theme changes.\n *\n * In the dark theme (or `auto` with a dark OS theme) the graph uses Mermaid's dark theme, unless\n * the graph or `provideMermaid` chooses a theme of its own.\n */\n@Component({\n  selector: 'ng-doc-mermaid-viewer',\n  imports: [\n    NgDocMagnifierComponent,\n    MagnifierControllerComponent,\n    NgDocSanitizeHtmlPipe,\n    NgDocSpinnerComponent,\n  ],\n  templateUrl: './mermaid-viewer.component.html',\n  styleUrl: './mermaid-viewer.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NgDocMermaidViewerComponent {\n  /** Source of the Mermaid graph. */\n  readonly graph = input.required<string>();\n\n  protected readonly html = signal('');\n  protected readonly pending = signal(true);\n  protected readonly error = signal<Error | null>(null);\n  protected readonly mermaid: Mermaid;\n\n  protected readonly id = `ng-doc-mermaid-viewer-${id++}`;\n\n  // Renders are asynchronous: only the result of the latest one is shown.\n  private renderId = 0;\n\n  private readonly document = inject(DOCUMENT);\n  private readonly themeService = inject(NgDocThemeService);\n\n  constructor() {\n    const mermaid = inject(NG_DOC_MERMAID, { optional: true });\n\n    if (!mermaid) {\n      throw new Error(\n        'Mermaid is not provided. Make sure that you provided mermaid using \"provideMermaid\" function.',\n      );\n    }\n\n    this.mermaid = mermaid;\n\n    if (isPlatformBrowser(inject(PLATFORM_ID))) {\n      effect(() => {\n        const graph: string = this.graph();\n\n        untracked(() => void this.render(graph));\n      });\n\n      this.themeService\n        .themeChanges()\n        .pipe(takeUntilDestroyed())\n        .subscribe(() => void this.render(untracked(this.graph)));\n    }\n  }\n\n  /**\n   * Adds Mermaid's dark theme to the graph when the page is dark. A graph with front matter or an\n   * init directive, and a theme set in `provideMermaid`, are left as they are.\n   * @param graph - The graph source.\n   * @returns The graph to render.\n   */\n  private themed(graph: string): string {\n    const theme = this.themeService.currentTheme;\n    const dark =\n      theme === 'dark' ||\n      (theme === 'auto' &&\n        !!this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)').matches);\n    const configuredTheme = this.mermaid.mermaidAPI?.getSiteConfig?.().theme;\n    const ownTheme = /^\\s*---/.test(graph) || /%%\\{\\s*init/.test(graph);\n\n    return dark && !ownTheme && (!configuredTheme || configuredTheme === 'default')\n      ? DARK_THEME_DIRECTIVE + graph\n      : graph;\n  }\n\n  private async render(graph: string): Promise<void> {\n    const renderId: number = ++this.renderId;\n\n    try {\n      const { svg } = await this.mermaid.render(this.id, this.themed(graph));\n\n      if (renderId === this.renderId) {\n        this.html.set(svg);\n        this.error.set(null);\n      }\n    } catch (error: unknown) {\n      if (renderId === this.renderId) {\n        this.error.set(error as Error);\n      }\n    } finally {\n      if (renderId === this.renderId) {\n        this.pending.set(false);\n      }\n    }\n  }\n}\n","@if (pending()) {\n  <div class=\"ng-doc-mermaid-preloader\">\n    <ng-doc-spinner></ng-doc-spinner>\n  </div>\n} @else if (error()) {\n  <div class=\"ng-doc-mermaid-error\">{{ error() }}</div>\n} @else {\n  <ng-doc-magnifier #magnifier>\n    <div class=\"ng-doc-mermaid-container\" [innerHTML]=\"html() | ngDocSanitizeHtml\"></div>\n  </ng-doc-magnifier>\n\n  <ng-doc-magnifier-controller [magnifier]=\"magnifier\" />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}