npm - @ng-doc/app - Versions diffs - 22.0.0-beta.1 → 22.0.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (205) hide show

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

@@ -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: "21.0.6", ngImport: i0, type: NgDocKindIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.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: "21.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 CHANGED Viewed

	@@ -1 +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;;;;"}
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, 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 CHANGED Viewed

@@ -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: "21.0.6", ngImport: i0, type: NgDocLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.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", "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: "21.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 CHANGED Viewed

	@@ -1 +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,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;;;;"}
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/*\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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,57 +1,102 @@
-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() {
-        this.graph = input.required(...(ngDevMode ? [{ debugName: "graph" }] : []));
-        this.html = signal('', ...(ngDevMode ? [{ debugName: "html" }] : []));
-        this.pending = signal(true, ...(ngDevMode ? [{ debugName: "pending" }] : []));
-        this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.platform = inject(PLATFORM_ID);
+        /** Source of the Mermaid graph. */
+        this.graph = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "graph" }] : /* istanbul ignore next */ []));
+        this.html = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+        this.pending = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+        this.error = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
         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: "21.0.6", ngImport: i0, type: NgDocMermaidViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.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: "21.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 CHANGED Viewed

	@@ -1 +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":"~~;;;;;;;;AAqBA~~,IAAI,EAAE,GAAG,CAAC;~~MAcG~~,2BAA2B,CAAA;~~AAatC~~,IAAA,WAAA,GAAA~~;AAZA~~,~~QAAA,~~IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ~~,gDAAU~~;~~AAEb~~,~~QAAA,~~IAAA,CAAA,IAAI,GAAG,MAAM,CAAC,EAAE~~,gDAAC~~;~~AACjB~~,~~QAAA,~~IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,IAAI~~,mDAAC~~;~~AACtB~~,~~QAAA,~~IAAA,CAAA,KAAK,GAAG,MAAM,CAAe,IAAI~~,iDAAC~~;AAGlC,QAAA,IAAA,CAAA,~~iBAAiB~~,GAAG,~~MAAM~~,~~CAAC~~,~~iBAAiB~~,CAAC;~~AAC7C~~,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,~~WAAW~~,CAAC;~~AAE9B~~,QAAA,IAAA,CAAA,~~EAAE~~,GAAG,~~CAAA~~,~~sBAAA~~,~~EAAyB~~,~~EAAE,EAAE,EAAE~~;~~AAGrD~~,QAAA,MAAM,OAAO,GAAG,MAAM,CAAC,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAE1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,MAAM,IAAI,KAAK,CACb,+FAA+F,CAChG;QACH;AAEA,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;QAEtB,MAAM,CAAC,~~iBAAiB;AACrB~~,~~aAAA~~,~~YAAY~~;~~aACZ~~,~~SAAS~~,CAAC,~~YAAW~~;~~YACpB~~,MAAM,~~EAAE~~,~~GAAG~~,EAAE,~~GAAG~~,MAAM,IAAI,CAAC,~~OAAO~~,CAAC,~~MAAM~~,CAAC,IAAI,CAAC,~~EAAE~~,EAAE,IAAI,CAAC,KAAK,~~EAAE~~,CAAC;~~AAEhE~~,~~YAAA~~,IAAI,CAAC,IAAI,CAAC,~~GAAG~~,CAAC,GAAG,CAAC;~~AACpB~~,QAAA,CAAC,CAAC;~~IACN;AAEA~~,~~IAAA~~,MAAM,QAAQ,~~GAAA~~;~~AACZ~~,QAAA,IAAI,~~iBAAiB~~,CAAC,IAAI,CAAC,QAAQ,CAAC,~~EAAE~~;~~AACpC~~,~~YAAA~~,IAAI;~~gBACF~~,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,~~EAAE~~,CAAC;~~AAEhE~~,gBAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;AAClB,gBAAA,IAAI,CAAC,~~OAAO~~,CAAC,GAAG,CAAC,~~KAAK~~,CAAC;~~YACzB~~;~~YAAE~~,OAAO,KAAc,EAAE;AACvB,gBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAc,CAAC;AAC9B,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;YACzB;QACF;IACF;~~8GA7CW~~,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~ECnCxC~~,yaAaA,EAAA,MAAA,EAAA,CAAA,~~02BAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EDaI~~,uBAAuB,6DACvB,4BAA4B,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAE5B,qBAAqB,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EADrB,qBAAqB,EAAA,IAAA,EAAA,mBAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAOZ,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAZvC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAAA,OAAA,EACxB;wBACP,uBAAuB;wBACvB,4BAA4B;wBAC5B,qBAAqB;wBACrB,qBAAqB;qBACtB,EAAA,eAAA,EAGgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,yaAAA,EAAA,MAAA,EAAA,CAAA,~~02BAAA~~,CAAA,EAAA;;;~~AEjCjD~~;;AAEG;;;;"}
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 { 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) \|\| /%%\\{\\sinit/.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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"}

package/fesm2022/ng-doc-app-components-navbar.mjs CHANGED Viewed

@@ -1,71 +1,61 @@
 import * as i0 from '@angular/core';
-import { inject, NgZone, ChangeDetectorRef, DestroyRef, afterNextRender, HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, input, booleanAttribute, viewChild, ElementRef, ChangeDetectionStrategy, Component } from '@angular/core';
 import { NgDocSearchComponent } from '@ng-doc/app/components/search';
-import { NgDocSidebarService } from '@ng-doc/app/services';
-import { ngDocZoneOptimize, NgDocButtonIconComponent, NgDocIconComponent } from '@ng-doc/ui-kit';
-import { WA_WINDOW } from '@ng-web-apis/common';
-import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
-import { combineLatest, fromEvent } from 'rxjs';
-import { map, distinctUntilChanged, startWith } from 'rxjs/operators';
+import { NgDocSidebarService } from '@ng-doc/app/services/sidebar';
+import { NgDocButtonIconComponent } from '@ng-doc/ui-kit';
 /**
- * Navbar component for ng-doc application
+ * Navbar of the NgDoc application: the header bar above the sidebar and the page.
+ *
+ * It lays out, from left to right: the menu button (only where the sidebar is an overlay), the
+ * content marked with `ngDocNavbarLeft` (for example the logo), the content marked with
+ * `ngDocNavbarCenter` (for example the section links, hidden at 1024px and below), the search, and
+ * the content marked with `ngDocNavbarRight` (for example the theme toggle).
+ * @example
+ * ```html
+ * <ng-doc-navbar>
+ *   <a ngDocNavbarLeft routerLink="/">My library</a>
+ *   <nav ngDocNavbarCenter aria-label="Primary"><a routerLink="/docs">Guides</a></nav>
+ *   <ng-doc-theme-toggle ngDocNavbarRight />
+ * </ng-doc-navbar>
+ * ```
  */
 class NgDocNavbarComponent {
     constructor() {
-        this.window = inject(WA_WINDOW);
-        this.ngZone = inject(NgZone);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.sidebarService = inject(NgDocSidebarService);
         /**
          * Show search input
          */
-        this.search = true;
+        this.search = input(true, { ...(ngDevMode ? { debugName: "search" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Show hamburger button
+         * Show the menu button that opens the sidebar where it is an overlay (900px and below).
          */
-        this.hamburger = true;
+        this.hamburger = input(true, { ...(ngDevMode ? { debugName: "hamburger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Use glass effect for navbar
          */
-        this.glassEffect = true;
-        /**
-         * Indicates if navbar has border
-         */
-        this.hasBorder = false;
-        const destroyRef = inject(DestroyRef);
-        afterNextRender(() => {
-            combineLatest([
-                fromEvent(this.window, 'scroll').pipe(map((e) => (e.target?.scrollingElement?.scrollTop ?? 0) > 0), distinctUntilChanged(), startWith(false), ngDocZoneOptimize(this.ngZone)),
-                this.sidebarService.isExpanded(),
-            ])
-                .pipe(map(([scrolled, isExpanded]) => scrolled || (isExpanded && this.sidebarService.isMobile)), takeUntilDestroyed(destroyRef))
-                .subscribe((hasShadow) => {
-                this.hasBorder = hasShadow;
-                this.changeDetectorRef.markForCheck();
-            });
-        });
+        this.glassEffect = input(true, { ...(ngDevMode ? { debugName: "glassEffect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.menuButton = viewChild('menuButton', { ...(ngDevMode ? { debugName: "menuButton" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+    }
+    /**
+     * Closes the sidebar overlay and moves focus back to the menu button that opened it.
+     */
+    closeSidebar() {
+        if (this.sidebarService.expandedState() && this.sidebarService.isMobile) {
+            this.sidebarService.hide();
+            this.menuButton()?.nativeElement.focus();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocNavbarComponent, isStandalone: true, selector: "ng-doc-navbar", inputs: { search: "search", hamburger: "hamburger", glassEffect: "glassEffect" }, host: { properties: { "attr.data-glass-effect": "this.glassEffect", "class.has-border": "this.hasBorder" } }, ngImport: i0, template: "<div class=\"navbar-container\">\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n    <button class=\"ng-doc-menu\" ng-doc-button-icon size=\"large\" (click)=\"sidebarService.toggle()\">\n      <ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host:not([data-glass-effect=false]){background:color-mix(in srgb,var(--ng-doc-navbar-background) 60%,transparent);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host[data-glass-effect=false]{background-color:var(--ng-doc-navbar-background)}:host{position:relative;display:flex;justify-content:center;height:100%;border-bottom:1px solid transparent;transition:var(--ng-doc-transition) border}:host.has-border{border-bottom:var(--ng-doc-navbar-border, );box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-right{display:flex;align-items:center}:host .ng-doc-navbar-left{justify-content:flex-start;width:100%;max-width:var(--ng-doc-navbar-left-width)}:host .ng-doc-navbar-right{justify-content:flex-end;margin-left:auto}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}@media(min-width:1024px){:host .ng-doc-menu{display:none}}\n"], dependencies: [{ kind: "component", type: NgDocSearchComponent, selector: "ng-doc-search" }, { kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocNavbarComponent, isStandalone: true, selector: "ng-doc-navbar", inputs: { search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, hamburger: { classPropertyName: "hamburger", publicName: "hamburger", isSignal: true, isRequired: false, transformFunction: null }, glassEffect: { classPropertyName: "glassEffect", publicName: "glassEffect", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown.escape": "closeSidebar()" }, properties: { "attr.data-glass-effect": "glassEffect()" } }, viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menuButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"ng-doc-navbar-container\">\n  @if (hamburger()) {\n    <button\n      type=\"button\"\n      class=\"ng-doc-menu\"\n      ng-doc-button-icon\n      size=\"large\"\n      [rounded]=\"false\"\n      aria-controls=\"ng-doc-sidenav\"\n      [attr.aria-expanded]=\"sidebarService.expandedState()\"\n      [attr.aria-label]=\"sidebarService.expandedState() ? 'Close navigation' : 'Open navigation'\"\n      (click)=\"sidebarService.toggle()\"\n      #menuButton>\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M4 7h16M4 12h16M4 17h16\" />\n      </svg>\n    </button>\n  }\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-center\">\n    <ng-content select=\"[ngDocNavbarCenter]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search()) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;background:color-mix(in srgb,var(--ng-doc-navbar-background) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:var(--ng-doc-navbar-border);--ng-doc-button-color: var(--ng-doc-text-muted);--ng-doc-button-hover-color: var(--ng-doc-heading-color);--ng-doc-button-active-color: var(--ng-doc-heading-color);--ng-doc-button-hover-background: var(--ng-doc-hover-background)}:host[data-glass-effect=false]{background:var(--ng-doc-navbar-background);backdrop-filter:none}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background:var(--ng-doc-navbar-background)}}.ng-doc-navbar-container{display:flex;align-items:center;gap:var(--ng-doc-space-4);width:100%;max-width:var(--ng-doc-app-max-width);height:100%;padding:0 var(--ng-doc-navbar-horizontal-padding)}.ng-doc-navbar-left,.ng-doc-navbar-center,.ng-doc-navbar-right{display:flex;align-items:center;gap:var(--ng-doc-space-4);min-width:0}.ng-doc-navbar-left{flex:none;max-width:var(--ng-doc-navbar-left-width)}.ng-doc-navbar-center{margin-left:auto}.ng-doc-navbar-right ng-doc-search{margin-left:var(--ng-doc-space-6)}@media(max-width:1024px){.ng-doc-navbar-right ng-doc-search{margin-left:0}}.ng-doc-menu{display:none;margin-left:calc(var(--ng-doc-space-2) * -1)}@media(max-width:1024px){.ng-doc-navbar-center{display:none}.ng-doc-navbar-right{margin-left:auto}}@media(max-width:900px){.ng-doc-menu{display:inline-flex}}@media(max-width:640px){.ng-doc-navbar-container{padding:0 var(--ng-doc-space-4)}}\n"], dependencies: [{ kind: "component", type: NgDocSearchComponent, selector: "ng-doc-search" }, { kind: "component", type: NgDocButtonIconComponent, selector: "button[ng-doc-button-icon], a[ng-doc-button-icon], button[ng-doc-button-icon-raised], a[ng-doc-button-icon-raised], button[ng-doc-button-icon-transparent], a[ng-doc-button-icon-transparent]", inputs: ["size", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocNavbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocNavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusOutlet, NgDocSearchComponent, NgDocButtonIconComponent, NgDocIconComponent], template: "<div class=\"navbar-container\">\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n    <button class=\"ng-doc-menu\" ng-doc-button-icon size=\"large\" (click)=\"sidebarService.toggle()\">\n      <ng-doc-icon icon=\"menu\" [size]=\"24\"></ng-doc-icon>\n    </button>\n  </div>\n</div>\n", styles: [":host:not([data-glass-effect=false]){background:color-mix(in srgb,var(--ng-doc-navbar-background) 60%,transparent);backdrop-filter:blur(20px)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background-color:var(--ng-doc-navbar-background)}}:host[data-glass-effect=false]{background-color:var(--ng-doc-navbar-background)}:host{position:relative;display:flex;justify-content:center;height:100%;border-bottom:1px solid transparent;transition:var(--ng-doc-transition) border}:host.has-border{border-bottom:var(--ng-doc-navbar-border, );box-shadow:var(--ng-doc-shadow-color) 0 5px 20px -5px}:host .navbar-container{display:flex;height:100%;width:100%;padding:0 var(--ng-doc-navbar-horizontal-padding);z-index:10;max-width:var(--ng-doc-app-max-width)}:host .ng-doc-navbar-left,:host .ng-doc-navbar-right{display:flex;align-items:center}:host .ng-doc-navbar-left{justify-content:flex-start;width:100%;max-width:var(--ng-doc-navbar-left-width)}:host .ng-doc-navbar-right{justify-content:flex-end;margin-left:auto}:host .ng-doc-menu{margin-left:calc(var(--ng-doc-base-gutter) * 2)}@media(min-width:1024px){:host .ng-doc-menu{display:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { search: [{
-                type: Input
-            }], hamburger: [{
-                type: Input
-            }], glassEffect: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-glass-effect']
-            }], hasBorder: [{
-                type: HostBinding,
-                args: ['class.has-border']
-            }] } });
+            args: [{ selector: 'ng-doc-navbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocSearchComponent, NgDocButtonIconComponent], host: {
+                        '[attr.data-glass-effect]': 'glassEffect()',
+                        '(document:keydown.escape)': 'closeSidebar()',
+                    }, template: "<div class=\"ng-doc-navbar-container\">\n  @if (hamburger()) {\n    <button\n      type=\"button\"\n      class=\"ng-doc-menu\"\n      ng-doc-button-icon\n      size=\"large\"\n      [rounded]=\"false\"\n      aria-controls=\"ng-doc-sidenav\"\n      [attr.aria-expanded]=\"sidebarService.expandedState()\"\n      [attr.aria-label]=\"sidebarService.expandedState() ? 'Close navigation' : 'Open navigation'\"\n      (click)=\"sidebarService.toggle()\"\n      #menuButton>\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\">\n        <path d=\"M4 7h16M4 12h16M4 17h16\" />\n      </svg>\n    </button>\n  }\n  <div class=\"ng-doc-navbar-left\">\n    <ng-content select=\"[ngDocNavbarLeft]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-center\">\n    <ng-content select=\"[ngDocNavbarCenter]\"></ng-content>\n  </div>\n  <div class=\"ng-doc-navbar-right\">\n    @if (search()) {\n      <ng-doc-search></ng-doc-search>\n    }\n    <ng-content select=\"[ngDocNavbarRight]\"></ng-content>\n  </div>\n</div>\n", styles: [":host{position:relative;display:flex;justify-content:center;height:100%;background:color-mix(in srgb,var(--ng-doc-navbar-background) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:var(--ng-doc-navbar-border);--ng-doc-button-color: var(--ng-doc-text-muted);--ng-doc-button-hover-color: var(--ng-doc-heading-color);--ng-doc-button-active-color: var(--ng-doc-heading-color);--ng-doc-button-hover-background: var(--ng-doc-hover-background)}:host[data-glass-effect=false]{background:var(--ng-doc-navbar-background);backdrop-filter:none}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){:host{background:var(--ng-doc-navbar-background)}}.ng-doc-navbar-container{display:flex;align-items:center;gap:var(--ng-doc-space-4);width:100%;max-width:var(--ng-doc-app-max-width);height:100%;padding:0 var(--ng-doc-navbar-horizontal-padding)}.ng-doc-navbar-left,.ng-doc-navbar-center,.ng-doc-navbar-right{display:flex;align-items:center;gap:var(--ng-doc-space-4);min-width:0}.ng-doc-navbar-left{flex:none;max-width:var(--ng-doc-navbar-left-width)}.ng-doc-navbar-center{margin-left:auto}.ng-doc-navbar-right ng-doc-search{margin-left:var(--ng-doc-space-6)}@media(max-width:1024px){.ng-doc-navbar-right ng-doc-search{margin-left:0}}.ng-doc-menu{display:none;margin-left:calc(var(--ng-doc-space-2) * -1)}@media(max-width:1024px){.ng-doc-navbar-center{display:none}.ng-doc-navbar-right{margin-left:auto}}@media(max-width:900px){.ng-doc-menu{display:inline-flex}}@media(max-width:640px){.ng-doc-navbar-container{padding:0 var(--ng-doc-space-4)}}\n"] }]
+        }], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], hamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburger", required: false }] }], glassEffect: [{ type: i0.Input, args: [{ isSignal: true, alias: "glassEffect", required: false }] }], menuButton: [{ type: i0.ViewChild, args: ['menuButton', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 /**
  * Generated bundle index. Do not edit.