UNPKG

4.33 kBJavaScriptView Raw
1import { Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, Input, NgModule } from '@angular/core';
2import { FormsModule } from '@angular/forms';
3import { CommonModule } from '@angular/common';
4import { DomHandler } from 'primeng/dom';
5import { Subject } from 'rxjs';
6
7class TerminalService {
8 constructor() {
9 this.commandSource = new Subject();
10 this.responseSource = new Subject();
11 this.commandHandler = this.commandSource.asObservable();
12 this.responseHandler = this.responseSource.asObservable();
13 }
14 sendCommand(command) {
15 if (command) {
16 this.commandSource.next(command);
17 }
18 }
19 sendResponse(response) {
20 if (response) {
21 this.responseSource.next(response);
22 }
23 }
24}
25TerminalService.decorators = [
26 { type: Injectable }
27];
28
29class Terminal {
30 constructor(el, terminalService, cd) {
31 this.el = el;
32 this.terminalService = terminalService;
33 this.cd = cd;
34 this.commands = [];
35 this.subscription = terminalService.responseHandler.subscribe(response => {
36 this.commands[this.commands.length - 1].response = response;
37 this.commandProcessed = true;
38 });
39 }
40 ngAfterViewInit() {
41 this.container = DomHandler.find(this.el.nativeElement, '.p-terminal')[0];
42 }
43 ngAfterViewChecked() {
44 if (this.commandProcessed) {
45 this.container.scrollTop = this.container.scrollHeight;
46 this.commandProcessed = false;
47 }
48 }
49 set response(value) {
50 if (value) {
51 this.commands[this.commands.length - 1].response = value;
52 this.commandProcessed = true;
53 }
54 }
55 handleCommand(event) {
56 if (event.keyCode == 13) {
57 this.commands.push({ text: this.command });
58 this.terminalService.sendCommand(this.command);
59 this.command = '';
60 }
61 }
62 focus(element) {
63 element.focus();
64 }
65 ngOnDestroy() {
66 if (this.subscription) {
67 this.subscription.unsubscribe();
68 }
69 }
70}
71Terminal.decorators = [
72 { type: Component, args: [{
73 selector: 'p-terminal',
74 template: `
75 <div [ngClass]="'p-terminal p-component'" [ngStyle]="style" [class]="styleClass" (click)="focus(in)">
76 <div *ngIf="welcomeMessage">{{welcomeMessage}}</div>
77 <div class="p-terminal-content">
78 <div *ngFor="let command of commands">
79 <span class="p-terminal-prompt">{{prompt}}</span>
80 <span class="p-terminal-command">{{command.text}}</span>
81 <div class="p-terminal-response">{{command.response}}</div>
82 </div>
83 </div>
84 <div class="p-terminal-prompt-container">
85 <span class="p-terminal-content-prompt">{{prompt}}</span>
86 <input #in type="text" [(ngModel)]="command" class="p-terminal-input" autocomplete="off" (keydown)="handleCommand($event)" autofocus>
87 </div>
88 </div>
89 `,
90 changeDetection: ChangeDetectionStrategy.OnPush,
91 encapsulation: ViewEncapsulation.None,
92 styles: [".p-terminal{height:18rem;overflow:auto}.p-terminal-prompt-container{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.p-terminal-input{-ms-flex:1 1 auto;background-color:rgba(0,0,0,0);border:0;color:inherit;flex:1 1 auto;outline:0 none;padding:0}.p-terminal-input::-ms-clear{display:none}"]
93 },] }
94];
95Terminal.ctorParameters = () => [
96 { type: ElementRef },
97 { type: TerminalService },
98 { type: ChangeDetectorRef }
99];
100Terminal.propDecorators = {
101 welcomeMessage: [{ type: Input }],
102 prompt: [{ type: Input }],
103 style: [{ type: Input }],
104 styleClass: [{ type: Input }],
105 response: [{ type: Input }]
106};
107class TerminalModule {
108}
109TerminalModule.decorators = [
110 { type: NgModule, args: [{
111 imports: [CommonModule, FormsModule],
112 exports: [Terminal],
113 declarations: [Terminal]
114 },] }
115];
116
117/**
118 * Generated bundle index. Do not edit.
119 */
120
121export { Terminal, TerminalModule, TerminalService };
122//# sourceMappingURL=primeng-terminal.js.map