@ng-doc/app
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
63 lines (59 loc) • 6.38 kB
JavaScript
import { isPlatformBrowser } from '@angular/common';
import * as i0 from '@angular/core';
import { input, signal, inject, ChangeDetectorRef, PLATFORM_ID, ChangeDetectionStrategy, Component } from '@angular/core';
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;
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);
this.id = `ng-doc-mermaid-viewer-${id++}`;
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);
});
}
async ngOnInit() {
if (isPlatformBrowser(this.platform)) {
try {
const { svg } = await this.mermaid.render(this.id, this.graph());
this.html.set(svg);
this.pending.set(false);
}
catch (error) {
this.error.set(error);
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 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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"] }]
}], ctorParameters: () => [], propDecorators: { graph: [{ type: i0.Input, args: [{ isSignal: true, alias: "graph", required: true }] }] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocMermaidViewerComponent };
//# sourceMappingURL=ng-doc-app-components-mermaid-viewer.mjs.map