@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>
61 lines (57 loc) • 8.76 kB
JavaScript
import { NgIf, NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
import { NgDocCodeComponent } from '@ng-doc/app/components/code';
import { NgDocCopyButtonComponent } from '@ng-doc/app/components/copy-button';
import { NgDocCodeHighlighterDirective } from '@ng-doc/app/directives/code-highlighter';
import { NgDocButtonIconComponent, NgDocTooltipDirective, NgDocSmoothResizeComponent, NgDocIconComponent, NgDocExpanderComponent } from '@ng-doc/ui-kit';
class NgDocDemoDisplayerComponent {
constructor() {
this.codeContent = '';
this.code = '';
this.language = 'typescript';
this.container = true;
this.border = true;
this.expanded = false;
}
get expandTooltipText() {
return this.expanded ? 'Collapse' : 'Expand';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocDemoDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: NgDocDemoDisplayerComponent, isStandalone: true, selector: "ng-doc-demo-displayer", inputs: { codeContent: "codeContent", code: "code", language: "language", container: "container", border: "border", expanded: "expanded" }, host: { properties: { "attr.data-ng-doc-border": "this.border" } }, ngImport: i0, template: "<div class=\"ng-doc-demo-wrapper\" *ngIf=\"container; else demoTemplate\">\n <div class=\"ng-doc-demo-container\">\n <div class=\"ng-doc-demo\">\n <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n </div>\n <div class=\"ng-doc-demo-controls\">\n <ng-doc-copy-button *ngIf=\"!codeContent\" [text]=\"code\">\n <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n </ng-doc-copy-button>\n <button\n ng-doc-button-icon\n [rounded]=\"false\"\n (click)=\"expanded = !expanded\"\n [ngDocTooltip]=\"tooltipContent\">\n <ng-template #tooltipContent>\n <ng-doc-smooth-resize [trigger]=\"expandTooltipText\">\n {{ expandTooltipText }}\n </ng-doc-smooth-resize>\n </ng-template>\n <ng-doc-icon icon=\"code\"></ng-doc-icon>\n </button>\n </div>\n </div>\n <ng-doc-expander [content]=\"codeContent ? codeContent : expanderContent\" [expanded]=\"expanded\">\n <ng-template #expanderContent>\n <ng-doc-code [copyButton]=\"false\">\n <div [ngDocHighlighter]=\"code\"></div>\n </ng-doc-code>\n </ng-template>\n </ng-doc-expander>\n</div>\n\n<ng-template #demoTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-border=true]{border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius)}:host .ng-doc-demo-wrapper{overflow:hidden}:host .ng-doc-demo-wrapper .ng-doc-demo-container{display:flex;justify-content:flex-start;width:100%;padding:calc(var(--ng-doc-base-gutter) * 2);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-base-0))}:host .ng-doc-demo-wrapper .ng-doc-demo-container .ng-doc-demo{overflow:hidden;width:100%}:host .ng-doc-demo-wrapper .ng-doc-demo-container .ng-doc-demo-controls{flex-shrink:0;margin-left:auto}:host ng-doc-code{border-top:1px solid var(--ng-doc-border-color)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: NgDocSmoothResizeComponent, selector: "ng-doc-smooth-resize", inputs: ["trigger", "animateOpacity"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }, { kind: "component", type: NgDocExpanderComponent, selector: "ng-doc-expander", inputs: ["expanded", "content", "collapseMod", "from"] }, { kind: "component", type: NgDocCodeComponent, selector: "ng-doc-code", inputs: ["html", "copyButton", "name", "icon"] }, { kind: "directive", type: NgDocCodeHighlighterDirective, selector: "[ngDocHighlighter]", inputs: ["ngDocHighlighter"] }, { kind: "component", type: NgDocCopyButtonComponent, selector: "ng-doc-copy-button", inputs: ["text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgDocDemoDisplayerComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-demo-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
NgTemplateOutlet,
NgDocButtonIconComponent,
NgDocTooltipDirective,
NgDocSmoothResizeComponent,
NgDocIconComponent,
NgDocExpanderComponent,
NgDocCodeComponent,
NgDocCodeHighlighterDirective,
NgDocCopyButtonComponent,
], template: "<div class=\"ng-doc-demo-wrapper\" *ngIf=\"container; else demoTemplate\">\n <div class=\"ng-doc-demo-container\">\n <div class=\"ng-doc-demo\">\n <ng-container *ngTemplateOutlet=\"demoTemplate\"></ng-container>\n </div>\n <div class=\"ng-doc-demo-controls\">\n <ng-doc-copy-button *ngIf=\"!codeContent\" [text]=\"code\">\n <ng-doc-icon icon=\"copy\"></ng-doc-icon>\n </ng-doc-copy-button>\n <button\n ng-doc-button-icon\n [rounded]=\"false\"\n (click)=\"expanded = !expanded\"\n [ngDocTooltip]=\"tooltipContent\">\n <ng-template #tooltipContent>\n <ng-doc-smooth-resize [trigger]=\"expandTooltipText\">\n {{ expandTooltipText }}\n </ng-doc-smooth-resize>\n </ng-template>\n <ng-doc-icon icon=\"code\"></ng-doc-icon>\n </button>\n </div>\n </div>\n <ng-doc-expander [content]=\"codeContent ? codeContent : expanderContent\" [expanded]=\"expanded\">\n <ng-template #expanderContent>\n <ng-doc-code [copyButton]=\"false\">\n <div [ngDocHighlighter]=\"code\"></div>\n </ng-doc-code>\n </ng-template>\n </ng-doc-expander>\n</div>\n\n<ng-template #demoTemplate>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;overflow:hidden;--ng-doc-code-margin: 0;--ng-doc-code-border-radius: 0;--ng-doc-code-border: none}:host[data-ng-doc-border=true]{border:var(--ng-doc-demo-displayer-border);border-radius:var(--ng-doc-demo-displayer-border-radius)}:host .ng-doc-demo-wrapper{overflow:hidden}:host .ng-doc-demo-wrapper .ng-doc-demo-container{display:flex;justify-content:flex-start;width:100%;padding:calc(var(--ng-doc-base-gutter) * 2);background:var(--ng-doc-demo-displayer-background, var(--ng-doc-base-0))}:host .ng-doc-demo-wrapper .ng-doc-demo-container .ng-doc-demo{overflow:hidden;width:100%}:host .ng-doc-demo-wrapper .ng-doc-demo-container .ng-doc-demo-controls{flex-shrink:0;margin-left:auto}:host ng-doc-code{border-top:1px solid var(--ng-doc-border-color)}\n"] }]
}], propDecorators: { codeContent: [{
type: Input
}], code: [{
type: Input
}], language: [{
type: Input
}], container: [{
type: Input
}], border: [{
type: Input
}, {
type: HostBinding,
args: ['attr.data-ng-doc-border']
}], expanded: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocDemoDisplayerComponent };
//# sourceMappingURL=ng-doc-app-components-demo-displayer.mjs.map