primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
335 lines (324 loc) • 13.4 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { find } from '@primeuix/utils';
import { SharedModule } from 'primeng/api';
import { BaseComponent } from 'primeng/basecomponent';
import { BaseStyle } from 'primeng/base';
import { Subject } from 'rxjs';
const theme = ({ dt }) => `
.p-terminal {
height: ${dt('terminal.height')};
overflow: auto;
background: ${dt('terminal.background')};
color: ${dt('terminal.color')};
border: 1px solid ${dt('terminal.border.color')};
padding: ${dt('terminal.padding')};
border-radius: ${dt('terminal.border.radius')};
}
.p-terminal-prompt {
display: flex;
align-items: center;
}
.p-terminal-prompt-value {
flex: 1 1 auto;
border: 0 none;
background: transparent;
color: inherit;
padding: 0;
outline: 0 none;
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
}
.p-terminal-prompt-label {
margin-inline-end: ${dt('terminal.prompt.gap')};
}
.p-terminal-input::-ms-clear {
display: none;
}
.p-terminal-command-response {
margin: ${dt('terminal.command.response.margin')};
}
`;
const classes = {
root: 'p-terminal p-component',
welcomeMessage: 'p-terminal-welcome-message',
commandList: 'p-terminal-command-list',
command: 'p-terminal-command',
commandValue: 'p-terminal-command-value',
commandResponse: 'p-terminal-command-response',
prompt: 'p-terminal-prompt',
promptLabel: 'p-terminal-prompt-label',
promptValue: 'p-terminal-prompt-value'
};
class TerminalStyle extends BaseStyle {
name = 'terminal';
theme = theme;
classes = classes;
static ɵfac = /*@__PURE__*/ (() => { let ɵTerminalStyle_BaseFactory; return function TerminalStyle_Factory(__ngFactoryType__) { return (ɵTerminalStyle_BaseFactory || (ɵTerminalStyle_BaseFactory = i0.ɵɵgetInheritedFactory(TerminalStyle)))(__ngFactoryType__ || TerminalStyle); }; })();
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TerminalStyle, factory: TerminalStyle.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TerminalStyle, [{
type: Injectable
}], null, null); })();
/**
*
* Terminal is a text based user interface.
*
* [Live Demo](https://www.primeng.org/terminal)
*
* @module terminalstyle
*
*/
var TerminalClasses;
(function (TerminalClasses) {
/**
* Class name of the root element
*/
TerminalClasses["root"] = "p-terminal";
/**
* Class name of the welcome message element
*/
TerminalClasses["welcomeMessage"] = "p-terminal-welcome-message";
/**
* Class name of the command list element
*/
TerminalClasses["commandList"] = "p-terminal-command-list";
/**
* Class name of the command element
*/
TerminalClasses["command"] = "p-terminal-command";
/**
* Class name of the command value element
*/
TerminalClasses["commandValue"] = "p-terminal-command-value";
/**
* Class name of the command response element
*/
TerminalClasses["commandResponse"] = "p-terminal-command-response";
/**
* Class name of the prompt element
*/
TerminalClasses["prompt"] = "p-terminal-prompt";
/**
* Class name of the prompt label element
*/
TerminalClasses["promptLabel"] = "p-terminal-prompt-label";
/**
* Class name of the prompt value element
*/
TerminalClasses["promptValue"] = "p-terminal-prompt-value";
})(TerminalClasses || (TerminalClasses = {}));
class TerminalService {
commandSource = new Subject();
responseSource = new Subject();
commandHandler = this.commandSource.asObservable();
responseHandler = this.responseSource.asObservable();
sendCommand(command) {
if (command) {
this.commandSource.next(command);
}
}
sendResponse(response) {
if (response) {
this.responseSource.next(response);
}
}
static ɵfac = function TerminalService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TerminalService)(); };
static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: TerminalService, factory: TerminalService.ɵfac });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TerminalService, [{
type: Injectable
}], null, null); })();
function Terminal_div_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 8);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(ctx_r2.welcomeMessage);
} }
function Terminal_div_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 9)(1, "span", 6);
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "span", 10);
i0.ɵɵtext(4);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(5, "div", 11);
i0.ɵɵtext(6);
i0.ɵɵelementEnd()();
} if (rf & 2) {
const command_r4 = ctx.$implicit;
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx_r2.prompt);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(command_r4.text);
i0.ɵɵadvance();
i0.ɵɵattribute("aria-live", "polite");
i0.ɵɵadvance();
i0.ɵɵtextInterpolate(command_r4.response);
} }
/**
* Terminal is a text based user interface.
* @group Components
*/
class Terminal extends BaseComponent {
terminalService;
/**
* Initial text to display on terminal.
* @group Props
*/
welcomeMessage;
/**
* Prompt text for each command.
* @group Props
*/
prompt;
/**
* Inline style of the component.
* @group Props
*/
style;
/**
* Style class of the component.
* @group Props
*/
styleClass;
commands = [];
command;
container;
commandProcessed;
subscription;
_componentStyle = inject(TerminalStyle);
constructor(terminalService) {
super();
this.terminalService = terminalService;
this.subscription = terminalService.responseHandler.subscribe((response) => {
this.commands[this.commands.length - 1].response = response;
this.commandProcessed = true;
});
}
ngAfterViewInit() {
super.ngAfterViewInit();
this.container = find(this.el.nativeElement, '.p-terminal')[0];
}
ngAfterViewChecked() {
if (this.commandProcessed) {
this.container.scrollTop = this.container.scrollHeight;
this.commandProcessed = false;
}
}
set response(value) {
if (value) {
this.commands[this.commands.length - 1].response = value;
this.commandProcessed = true;
}
}
handleCommand(event) {
if (event.keyCode == 13) {
this.commands.push({ text: this.command });
this.terminalService.sendCommand(this.command);
this.command = '';
}
}
focus(element) {
element.focus();
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
super.ngOnDestroy();
}
static ɵfac = function Terminal_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Terminal)(i0.ɵɵdirectiveInject(TerminalService)); };
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Terminal, selectors: [["p-terminal"]], inputs: { welcomeMessage: "welcomeMessage", prompt: "prompt", style: "style", styleClass: "styleClass", response: "response" }, features: [i0.ɵɵProvidersFeature([TerminalStyle]), i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 8, consts: [["in", ""], [3, "click", "ngClass", "ngStyle"], ["class", "p-terminal-welcome-message", 4, "ngIf"], [1, "p-terminal-command-list"], ["class", "p-terminal-command", 4, "ngFor", "ngForOf"], [1, "p-terminal-prompt"], [1, "p-terminal-prompt-label"], ["type", "text", "autocomplete", "off", "autofocus", "", 1, "p-terminal-prompt-value", 3, "ngModelChange", "keydown", "ngModel"], [1, "p-terminal-welcome-message"], [1, "p-terminal-command"], [1, "p-terminal-command-value"], [1, "p-terminal-command-response"]], template: function Terminal_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 1);
i0.ɵɵlistener("click", function Terminal_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const in_r2 = i0.ɵɵreference(8); return i0.ɵɵresetView(ctx.focus(in_r2)); });
i0.ɵɵtemplate(1, Terminal_div_1_Template, 2, 1, "div", 2);
i0.ɵɵelementStart(2, "div", 3);
i0.ɵɵtemplate(3, Terminal_div_3_Template, 7, 4, "div", 4);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(4, "div", 5)(5, "span", 6);
i0.ɵɵtext(6);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(7, "input", 7, 0);
i0.ɵɵtwoWayListener("ngModelChange", function Terminal_Template_input_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.command, $event) || (ctx.command = $event); return i0.ɵɵresetView($event); });
i0.ɵɵlistener("keydown", function Terminal_Template_input_keydown_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleCommand($event)); });
i0.ɵɵelementEnd()()();
} if (rf & 2) {
i0.ɵɵclassMap(ctx.styleClass);
i0.ɵɵproperty("ngClass", "p-terminal p-component")("ngStyle", ctx.style);
i0.ɵɵadvance();
i0.ɵɵproperty("ngIf", ctx.welcomeMessage);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngForOf", ctx.commands);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(ctx.prompt);
i0.ɵɵadvance();
i0.ɵɵtwoWayProperty("ngModel", ctx.command);
} }, dependencies: [CommonModule, i2.NgClass, i2.NgForOf, i2.NgIf, i2.NgStyle, FormsModule, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, SharedModule], encapsulation: 2, changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Terminal, [{
type: Component,
args: [{
selector: 'p-terminal',
standalone: true,
imports: [CommonModule, FormsModule, SharedModule],
template: `
<div [ngClass]="'p-terminal p-component'" [ngStyle]="style" [class]="styleClass" (click)="focus(in)">
<div class="p-terminal-welcome-message" *ngIf="welcomeMessage">{{ welcomeMessage }}</div>
<div class="p-terminal-command-list">
<div class="p-terminal-command" *ngFor="let command of commands">
<span class="p-terminal-prompt-label">{{ prompt }}</span>
<span class="p-terminal-command-value">{{ command.text }}</span>
<div class="p-terminal-command-response" [attr.aria-live]="'polite'">{{ command.response }}</div>
</div>
</div>
<div class="p-terminal-prompt">
<span class="p-terminal-prompt-label">{{ prompt }}</span>
<input #in type="text" [(ngModel)]="command" class="p-terminal-prompt-value" autocomplete="off" (keydown)="handleCommand($event)" autofocus />
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
providers: [TerminalStyle]
}]
}], () => [{ type: TerminalService }], { welcomeMessage: [{
type: Input
}], prompt: [{
type: Input
}], style: [{
type: Input
}], styleClass: [{
type: Input
}], response: [{
type: Input
}] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Terminal, { className: "Terminal", filePath: "terminal.ts", lineNumber: 39 }); })();
class TerminalModule {
static ɵfac = function TerminalModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TerminalModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: TerminalModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Terminal, SharedModule, SharedModule] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TerminalModule, [{
type: NgModule,
args: [{
exports: [Terminal, SharedModule],
imports: [Terminal, SharedModule]
}]
}], null, null); })();
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TerminalModule, { imports: [Terminal, SharedModule], exports: [Terminal, SharedModule] }); })();
/**
* Generated bundle index. Do not edit.
*/
export { Terminal, TerminalClasses, TerminalModule, TerminalService, TerminalStyle };
//# sourceMappingURL=primeng-terminal.mjs.map