@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>
73 lines (69 loc) • 8.9 kB
JavaScript
import { NgIf, NgTemplateOutlet, NgFor, NgComponentOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
import * as i1 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(rootPage) {
this.rootPage = rootPage;
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: "19.0.3", ngImport: i0, type: NgDocDemoComponent, deps: [{ token: i1.NgDocRootPage }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: NgDocDemoComponent, isStandalone: true, selector: "ng-doc-demo", inputs: { componentName: "componentName", options: "options" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-container *ngIf=\"options.container ?? true; else demoTemplate\">\n <ng-doc-demo-displayer [codeContent]=\"codeContent\" [expanded]=\"!!options.expanded\">\n <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n <ng-template #codeContent>\n <ng-container *ngIf=\"assets.length === 1\">\n <ng-doc-code *ngFor=\"let asset of assets\" [html]=\"asset.code\"></ng-doc-code>\n </ng-container>\n\n <ng-container *ngIf=\"assets.length > 1\">\n <ng-doc-tab-group [openedTab]=\"(getOpenedAssetId | execute : assets) ?? options.defaultTab\">\n <ng-doc-tab\n *ngFor=\"let asset of assets\"\n [id]=\"asset.title\"\n [label]=\"label\"\n [content]=\"assetContent\">\n <ng-template #label>\n <ng-doc-icon [customIcon]=\"asset.icon\" *ngIf=\"asset.icon\"></ng-doc-icon>\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 </ng-doc-tab-group>\n </ng-container>\n </ng-template>\n </ng-doc-demo-displayer>\n</ng-container>\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocDemoComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-demo', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
NgDocDemoDisplayerComponent,
NgTemplateOutlet,
NgFor,
NgDocCodeComponent,
NgDocTabGroupComponent,
NgDocTabComponent,
NgDocIconComponent,
NgDocExecutePipe,
NgDocFullscreenButtonComponent,
NgComponentOutlet,
], template: "<ng-container *ngIf=\"options.container ?? true; else demoTemplate\">\n <ng-doc-demo-displayer [codeContent]=\"codeContent\" [expanded]=\"!!options.expanded\">\n <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n <ng-template #codeContent>\n <ng-container *ngIf=\"assets.length === 1\">\n <ng-doc-code *ngFor=\"let asset of assets\" [html]=\"asset.code\"></ng-doc-code>\n </ng-container>\n\n <ng-container *ngIf=\"assets.length > 1\">\n <ng-doc-tab-group [openedTab]=\"(getOpenedAssetId | execute : assets) ?? options.defaultTab\">\n <ng-doc-tab\n *ngFor=\"let asset of assets\"\n [id]=\"asset.title\"\n [label]=\"label\"\n [content]=\"assetContent\">\n <ng-template #label>\n <ng-doc-icon [customIcon]=\"asset.icon\" *ngIf=\"asset.icon\"></ng-doc-icon>\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 </ng-doc-tab-group>\n </ng-container>\n </ng-template>\n </ng-doc-demo-displayer>\n</ng-container>\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: () => [{ type: i1.NgDocRootPage }], 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