@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>
67 lines (63 loc) • 7.44 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 { NgDocFullscreenButtonComponent } from '@ng-doc/app/components/fullscreen-button';
import { asArray } from '@ng-doc/core/helpers/as-array';
import { NgDocPaneComponent, NgDocPaneBackDirective, NgDocPaneFrontDirective, NgDocTabGroupComponent, NgDocTabComponent } from '@ng-doc/ui-kit';
class NgDocDemoPaneComponent {
constructor() {
this.rootPage = inject(NgDocRootPage);
this.options = {};
this.assets = [];
}
get classes() {
return this.options.class ?? '';
}
ngOnInit() {
this.demo = this.getDemo();
this.assets = this.getAssets();
}
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: "21.0.6", ngImport: i0, type: NgDocDemoPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocDemoPaneComponent, isStandalone: true, selector: "ng-doc-demo-pane", inputs: { componentName: "componentName", options: "options" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-doc-pane [expanded]=\"options.expanded ?? false\">\n <ng-container *ngTemplateOutlet=\"codeContent\" ngDocPaneBack></ng-container>\n <ng-container *ngTemplateOutlet=\"demoTemplate\" ngDocPaneFront></ng-container>\n</ng-doc-pane>\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\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\n @if (assets.length > 1) {\n <ng-doc-tab-group [openedTab]=\"options.defaultTab\">\n @for (asset of assets; track asset) {\n <ng-doc-tab [id]=\"asset.title\" [label]=\"asset.title\" [content]=\"assetContent\">\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", styles: [":host{display:block;height:var(--ng-doc-demo-pane-height);margin:var(--ng-doc-demo-pane-margin);--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none;--ng-doc-tab-group-tabs-background: var(--ng-doc-base-2);--ng-doc-tab-group-border: none;--ng-doc-tab-group-border-radius: 0}:host ng-doc-tab-group,:host ng-doc-code,:host ng-doc-pane{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgDocPaneComponent, selector: "ng-doc-pane", inputs: ["expanded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgDocPaneBackDirective, selector: "[ngDocPaneBack]" }, { kind: "directive", type: NgDocPaneFrontDirective, selector: "[ngDocPaneFront]" }, { 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: NgDocFullscreenButtonComponent, selector: "ng-doc-fullscreen-button", inputs: ["route"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocDemoPaneComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-demo-pane', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgDocPaneComponent,
NgTemplateOutlet,
NgDocPaneBackDirective,
NgDocPaneFrontDirective,
NgDocCodeComponent,
NgDocTabGroupComponent,
NgDocTabComponent,
NgDocFullscreenButtonComponent,
NgComponentOutlet,
], template: "<ng-doc-pane [expanded]=\"options.expanded ?? false\">\n <ng-container *ngTemplateOutlet=\"codeContent\" ngDocPaneBack></ng-container>\n <ng-container *ngTemplateOutlet=\"demoTemplate\" ngDocPaneFront></ng-container>\n</ng-doc-pane>\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\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\n @if (assets.length > 1) {\n <ng-doc-tab-group [openedTab]=\"options.defaultTab\">\n @for (asset of assets; track asset) {\n <ng-doc-tab [id]=\"asset.title\" [label]=\"asset.title\" [content]=\"assetContent\">\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", styles: [":host{display:block;height:var(--ng-doc-demo-pane-height);margin:var(--ng-doc-demo-pane-margin);--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none;--ng-doc-tab-group-tabs-background: var(--ng-doc-base-2);--ng-doc-tab-group-border: none;--ng-doc-tab-group-border-radius: 0}:host ng-doc-tab-group,:host ng-doc-code,:host ng-doc-pane{width:100%;height:100%}\n"] }]
}], ctorParameters: () => [], propDecorators: { componentName: [{
type: Input
}], options: [{
type: Input
}], classes: [{
type: HostBinding,
args: ['class']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocDemoPaneComponent };
//# sourceMappingURL=ng-doc-app-components-demo-pane.mjs.map