@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>
71 lines (67 loc) • 9.03 kB
JavaScript
import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, HostBinding, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
import { NgDocCodeComponent } from '@ng-doc/app/components/code';
import { NgDocDemoDisplayerComponent } from '@ng-doc/app/components/demo-displayer';
import { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';
import { asArray } from '@ng-doc/core/helpers/as-array';
import { NgDocTabGroupComponent, NgDocTabComponent, NgDocIconComponent, NgDocExecutePipe } from '@ng-doc/ui-kit';
class NgDocDemoComponent {
constructor() {
this.rootPage = inject(NgDocRootPage);
this.options = {};
this.assets = [];
}
get classes() {
return this.options.class ?? '';
}
ngOnInit() {
this.demo = this.getDemo();
this.assets = this.getAssets();
}
getOpenedAssetId(assets) {
return assets.find((asset) => asset.opened)?.title;
}
getDemo() {
if (this.componentName) {
return this.rootPage.page?.demos && this.rootPage.page.demos[this.componentName];
}
return undefined;
}
getAssets() {
if (this.componentName) {
return ((this.rootPage.demoAssets && this.rootPage.demoAssets[this.componentName]) ??
[]).filter((asset) => !this.options.tabs?.length || asArray(this.options.tabs).includes(asset.title));
}
return [];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocDemoComponent, isStandalone: true, selector: "ng-doc-demo", inputs: { componentName: "componentName", options: "options" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "@if (options.container ?? true) {\n <ng-doc-demo-displayer [codeContent]=\"codeContent\" [expanded]=\"!!options.expanded\">\n <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n <ng-template #codeContent>\n @if (assets.length === 1) {\n @for (asset of assets; track asset) {\n <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n }\n }\n @if (assets.length > 1) {\n <ng-doc-tab-group [openedTab]=\"(getOpenedAssetId | execute: assets) ?? options.defaultTab\">\n @for (asset of assets; track asset) {\n <ng-doc-tab [id]=\"asset.title\" [label]=\"label\" [content]=\"assetContent\">\n <ng-template #label>\n @if (asset.icon) {\n <ng-doc-icon [customIcon]=\"asset.icon\"></ng-doc-icon>\n }\n {{ asset.title }}\n </ng-template>\n <ng-template #assetContent>\n <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n </ng-template>\n </ng-doc-tab>\n }\n </ng-doc-tab-group>\n }\n </ng-template>\n </ng-doc-demo-displayer>\n} @else {\n @if (options.fullscreenRoute) {\n <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n } @else if (demo) {\n <ng-container *ngComponentOutlet=\"demo; inputs: options.inputs\"></ng-container>\n }\n}\n\n<ng-template #demoTemplate>\n @if (options.fullscreenRoute) {\n <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n } @else if (demo) {\n <ng-container *ngComponentOutlet=\"demo; inputs: options.inputs\"></ng-container>\n }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);--ng-doc-tab-group-background: var(--ng-doc-code-background);--ng-doc-tab-group-tabs-background: var(--ng-doc-base-2);--ng-doc-tab-group-border-radius: 0;--ng-doc-tab-group-border: none;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host .ng-doc-example{padding:calc(var(--ng-doc-base-gutter) * 3)}:host ng-doc-icon{margin-right:calc(var(--ng-doc-base-gutter) / 2)}:host ng-doc-tab-group{border-top:1px solid var(--ng-doc-border-color)}\n"], dependencies: [{ kind: "component", type: NgDocDemoDisplayerComponent, selector: "ng-doc-demo-displayer", inputs: ["codeContent", "code", "language", "container", "border", "expanded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgDocCodeComponent, selector: "ng-doc-code", inputs: ["html", "copyButton", "name", "icon"] }, { kind: "component", type: NgDocTabGroupComponent, selector: "ng-doc-tab-group", inputs: ["openedTab"] }, { kind: "component", type: NgDocTabComponent, selector: "ng-doc-tab, a[ng-doc-tab]", inputs: ["label", "id", "content"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "pipe", type: NgDocExecutePipe, name: "execute" }, { kind: "component", type: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocDemoComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-demo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocDemoDisplayerComponent,
NgTemplateOutlet,
NgDocCodeComponent,
NgDocTabGroupComponent,
NgDocTabComponent,
NgDocIconComponent,
NgDocExecutePipe,
NgDocFullscreenButtonComponent,
NgComponentOutlet,
], template: "@if (options.container ?? true) {\n <ng-doc-demo-displayer [codeContent]=\"codeContent\" [expanded]=\"!!options.expanded\">\n <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n <ng-template #codeContent>\n @if (assets.length === 1) {\n @for (asset of assets; track asset) {\n <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n }\n }\n @if (assets.length > 1) {\n <ng-doc-tab-group [openedTab]=\"(getOpenedAssetId | execute: assets) ?? options.defaultTab\">\n @for (asset of assets; track asset) {\n <ng-doc-tab [id]=\"asset.title\" [label]=\"label\" [content]=\"assetContent\">\n <ng-template #label>\n @if (asset.icon) {\n <ng-doc-icon [customIcon]=\"asset.icon\"></ng-doc-icon>\n }\n {{ asset.title }}\n </ng-template>\n <ng-template #assetContent>\n <ng-doc-code [html]=\"asset.code\"></ng-doc-code>\n </ng-template>\n </ng-doc-tab>\n }\n </ng-doc-tab-group>\n }\n </ng-template>\n </ng-doc-demo-displayer>\n} @else {\n @if (options.fullscreenRoute) {\n <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n } @else if (demo) {\n <ng-container *ngComponentOutlet=\"demo; inputs: options.inputs\"></ng-container>\n }\n}\n\n<ng-template #demoTemplate>\n @if (options.fullscreenRoute) {\n <ng-doc-fullscreen-button [route]=\"options.fullscreenRoute!\"></ng-doc-fullscreen-button>\n } @else if (demo) {\n <ng-container *ngComponentOutlet=\"demo; inputs: options.inputs\"></ng-container>\n }\n</ng-template>\n", styles: [":host{display:block;margin:var(--ng-doc-demo-margin);--ng-doc-tab-group-background: var(--ng-doc-code-background);--ng-doc-tab-group-tabs-background: var(--ng-doc-base-2);--ng-doc-tab-group-border-radius: 0;--ng-doc-tab-group-border: none;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host .ng-doc-example{padding:calc(var(--ng-doc-base-gutter) * 3)}:host ng-doc-icon{margin-right:calc(var(--ng-doc-base-gutter) / 2)}:host ng-doc-tab-group{border-top:1px solid var(--ng-doc-border-color)}\n"] }]
}], ctorParameters: () => [], propDecorators: { componentName: [{
type: Input
}], options: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocDemoComponent };
//# sourceMappingURL=ng-doc-app-components-demo.mjs.map