@alauda-fe/common
Version:
Alauda frontend team common codes.
539 lines • 104 kB
JavaScript
import { NotificationService, SearchComponent } from '@alauda/ui';
import { HttpParams } from '@angular/common/http';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Inject, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
import { encode } from 'ab64';
import { debounce } from 'lodash-es';
import { filter, of, Subject, switchMap, take, tap } from 'rxjs';
import { Terminal } from 'xterm';
import { CanvasAddon } from 'xterm-addon-canvas';
import { FitAddon } from 'xterm-addon-fit';
import { SearchAddon } from 'xterm-addon-search';
import { WebLinksAddon } from 'xterm-addon-web-links';
import { WebglAddon } from 'xterm-addon-webgl';
import { ApiGatewayService } from '../../api/public-api';
import { K8sResourceAction, TOKEN_GLOBAL_NAMESPACE, RESOURCE_TYPES, } from '../../core/public-api';
import { K8sPermissionService } from '../../permission/k8s-permission.service';
import { TranslateService } from '../../translate/public-api';
import { ConnectionStatus, TERMINAL_FONT_LOCAL_STORAGE_KEY, TERMINAL_THEME_LOCAL_STORAGE_KEY, XTERM_DARK_THEME, XTERM_DEFAULT_OPTIONS, XTERM_LIGHT_THEME, } from '../constants';
import * as i0 from "@angular/core";
import * as i1 from "../../api/public-api";
import * as i2 from "@alauda/ui";
import * as i3 from "../../translate/public-api";
import * as i4 from "../../permission/k8s-permission.service";
const _c0 = ["anchor"];
const _c1 = ["searchInput"];
const _c2 = a0 => ({ "!tw-visible": a0 });
const _c3 = a0 => ({ index: a0 });
const _c4 = (a0, a1, a2) => ({ $implicit: a0, socket: a1, index: a2 });
function TerminalComponent_aui_inline_alert_0_Template(rf, ctx) { if (rf & 1) {
const _r2 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "aui-inline-alert", 22)(1, "span");
i0.ɵɵtext(2);
i0.ɵɵpipe(3, "translate");
i0.ɵɵelementEnd();
i0.ɵɵelementStart(4, "button", 23);
i0.ɵɵlistener("click", function TerminalComponent_aui_inline_alert_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.reconnect()); });
i0.ɵɵtext(5);
i0.ɵɵpipe(6, "translate");
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "exec_disconnected_tip"));
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 4, "reconnect"), " ");
} }
function TerminalComponent_acl_terminal_placeholder_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "acl-terminal-placeholder", 24);
} }
function TerminalComponent_ng_container_27_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function TerminalComponent_div_31_Template(rf, ctx) { if (rf & 1) {
const _r4 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 25)(1, "aui-search", 26, 3);
i0.ɵɵtwoWayListener("keywordChange", function TerminalComponent_div_31_Template_aui_search_keywordChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.searchKeyword, $event) || (ctx_r2.searchKeyword = $event); return i0.ɵɵresetView($event); });
i0.ɵɵlistener("keydown", function TerminalComponent_div_31_Template_aui_search_keydown_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSearchInputKeyDown($event)); });
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "button", 27);
i0.ɵɵpipe(4, "translate");
i0.ɵɵlistener("click", function TerminalComponent_div_31_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.findPrevious()); });
i0.ɵɵelement(5, "aui-icon", 28);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(6, "button", 27);
i0.ɵɵpipe(7, "translate");
i0.ɵɵlistener("click", function TerminalComponent_div_31_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.findNext()); });
i0.ɵɵelement(8, "aui-icon", 29);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(9, "button", 27);
i0.ɵɵpipe(10, "translate");
i0.ɵɵlistener("click", function TerminalComponent_div_31_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeSearching()); });
i0.ɵɵelement(11, "aui-icon", 30);
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵtwoWayProperty("keyword", ctx_r2.searchKeyword);
i0.ɵɵadvance(2);
i0.ɵɵproperty("square", true)("plain", true)("title", i0.ɵɵpipeBind1(4, 10, "find_previous") + " (Shift + Enter)");
i0.ɵɵadvance(3);
i0.ɵɵproperty("square", true)("plain", true)("title", i0.ɵɵpipeBind1(7, 12, "find_next") + " (Enter)");
i0.ɵɵadvance(3);
i0.ɵɵproperty("square", true)("plain", true)("title", i0.ɵɵpipeBind1(10, 14, "close") + " (Escape)");
} }
function TerminalComponent_ng_container_32_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function TerminalComponent_ng_template_34_Template(rf, ctx) { if (rf & 1) {
const _r5 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "aui-menu", 31)(1, "aui-menu-item", 32);
i0.ɵɵlistener("click", function TerminalComponent_ng_template_34_Template_aui_menu_item_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.coding = "utf8"); });
i0.ɵɵtext(2, "UTF-8 ");
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "aui-menu-item", 32);
i0.ɵɵlistener("click", function TerminalComponent_ng_template_34_Template_aui_menu_item_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.coding = "gb18030"); });
i0.ɵɵtext(4, "GB 18030 ");
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵadvance();
i0.ɵɵproperty("actived", ctx_r2.coding === "utf8");
i0.ɵɵadvance(2);
i0.ɵɵproperty("actived", ctx_r2.coding === "gb18030");
} }
function TerminalComponent_ng_template_36_Template(rf, ctx) { if (rf & 1) {
const _r6 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "aui-number-input", 33);
i0.ɵɵlistener("valueChange", function TerminalComponent_ng_template_36_Template_aui_number_input_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.fontSizeChange($event)); });
i0.ɵɵelementStart(1, "span", 34);
i0.ɵɵtext(2, "px");
i0.ɵɵelementEnd()();
} if (rf & 2) {
const ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵproperty("step", 1)("precision", 1)("min", 12)("max", 40)("controls", true)("angleControls", true)("value", ctx_r2.fontSize);
} }
export const BIN_SH = '/bin/sh';
export const EXEC_FAILED_MESSAGE_CONTAINERD = `Internal error occurred: error executing command in container`;
export const EXEC_FAILED_MESSAGE_DOCKER = `OCI runtime exec failed: exec failed: unable to start container process`;
export const NO_PERMISSION_CODE = 40_001;
export function initRendererAddon() {
const canvas = document.createElement('canvas');
if (canvas.getContext('webgl2')) {
return new WebglAddon();
}
return new CanvasAddon();
}
/**
* For dispatching keyboard events automatically to xterm,
* please view https://www.physics.udel.edu/~watson/scen103/ascii.html for reference.
*
* For instance, if you want to dispatch `Ctrl+C` to xterm, you should dispatch `\x03`(aka `\u0003`) to the socket.
*
* ```ts
* socket.send('0' + encode('\u0003'))
* ```
*/
export class TerminalComponent {
beforeUnload(event) {
event.preventDefault();
event.returnValue = '';
}
unload(_event) {
this.killProcess();
}
get themeClass() {
return ('acl-terminal__dropdown ' +
(this.theme === 'light'
? 'acl-terminal__dropdown--light'
: 'acl-terminal__dropdown--dark'));
}
get showLoading() {
return (this.connectionStatus === ConnectionStatus.Connecting ||
(!this.option.notClearWhenReconnect &&
this.connectionStatus === ConnectionStatus.ReConnecting));
}
constructor(apiGateway, notification, translate, cdr, k8sPermission, globalNamespace) {
this.apiGateway = apiGateway;
this.notification = notification;
this.translate = translate;
this.cdr = cdr;
this.k8sPermission = k8sPermission;
this.globalNamespace = globalNamespace;
this.ConnectionStatus = ConnectionStatus;
this.connectionStatusChange = new EventEmitter();
this.sendData = new EventEmitter();
this.socketReady = new EventEmitter();
this.fallbackShell = new EventEmitter();
this.theme = localStorage.getItem(TERMINAL_THEME_LOCAL_STORAGE_KEY) === 'light'
? 'light'
: 'dark';
this.fontSize = +localStorage.getItem(TERMINAL_FONT_LOCAL_STORAGE_KEY) ||
XTERM_DEFAULT_OPTIONS.fontSize;
this.searching = false;
this.searchKeyword = '';
this.coding = 'utf8';
this.connectionStatus = ConnectionStatus.Connecting;
this.commandHasRun = false;
this.socket$$ = new Subject();
this.shouldFallBackOnClose = false;
this.initSocketListeners = (initialCommand) => {
let needClear;
this.socket.addEventListener('open', () => {
needClear = true;
this.resizeRemoteTerminal();
this.socketReady.emit(this.socket);
this.socket$$.next(this.socket);
this.ping = window.setInterval(() => {
this.socket.send('0');
}, 5000);
});
this.socket.addEventListener('message', (event) => {
this.updateConnectionStatus(ConnectionStatus.Connected);
if (!this.xterm) {
this.initXterm();
}
if (needClear) {
needClear = false;
if (!this.option.notClearWhenReconnect) {
this.xterm.reset();
}
else if (this.xterm.buffer.active.type === 'alternate') {
// exit alternate screen. AIT-46391
this.xterm.write('\u001B[?1049l');
}
}
this.xterm.focus();
const text = decode(this.coding, event.data.slice(1));
this.xterm.write(text);
if ((text.includes(EXEC_FAILED_MESSAGE_CONTAINERD) ||
text.includes(EXEC_FAILED_MESSAGE_DOCKER)) &&
!this.commandHasRun &&
initialCommand !== BIN_SH) {
this.shouldFallBackOnClose = true;
}
});
this.socket.addEventListener('close', e => {
this.closeSocket();
this.updateConnectionStatus(e.code === NO_PERMISSION_CODE
? ConnectionStatus.NoPermission
: ConnectionStatus.Disconnected);
if (this.shouldFallBackOnClose) {
this.fallBackOnClose();
}
});
};
this.initSocketConnection = (fallbackCommand) => {
this.updateConnectionStatus(this.xterm ? ConnectionStatus.ReConnecting : ConnectionStatus.Connecting);
of(null)
.pipe(switchMap(() => {
const { checkPermissionType, cluster } = this.option;
if (checkPermissionType === 'cluster' && cluster) {
return this.k8sPermission.isAllowed({
type: RESOURCE_TYPES.CLUSTER_VIEW,
namespace: this.globalNamespace,
action: K8sResourceAction.UPDATE,
name: cluster,
});
}
return of(true);
}), tap(allow => {
if (!allow) {
this.updateConnectionStatus(ConnectionStatus.NoPermission);
}
}), take(1),
// 先前权限验证没通过就不用再尝试 shell 的长连接了
filter(Boolean), switchMap(() => this.apiGateway.getApiAddress()))
.subscribe(apiAddress => {
const initialCommand = fallbackCommand || this.option.command || BIN_SH;
this.initSocket(initialCommand, apiAddress);
this.initSocketListeners(initialCommand);
});
};
}
ngOnInit() {
this.initSocketConnection();
}
ngOnChanges({ option }) {
if (this.xterm && option) {
this.reconnect();
}
}
ngOnDestroy() {
this.closeSocket();
this.xterm?.dispose();
}
focus() {
this.xterm?.focus();
}
reconnect() {
this.commandHasRun = false;
this.closeSocket();
this.initSocketConnection();
}
killProcess() {
if (this.socket) {
this.socket.send('0' + encode('\u0003\r\n'));
this.socket.send('0' + encode('exit\r\n'));
}
}
switchTheme() {
this.theme = this.theme === 'light' ? 'dark' : 'light';
localStorage.setItem(TERMINAL_THEME_LOCAL_STORAGE_KEY, this.theme);
this.xterm.options.theme =
this.theme === 'light' ? XTERM_LIGHT_THEME : XTERM_DARK_THEME;
this.cdr.markForCheck();
}
fontSizeChange(size) {
this.fontSize = size;
this.xterm.options.fontSize = size;
this.fitAddon.fit();
localStorage.setItem(TERMINAL_FONT_LOCAL_STORAGE_KEY, size + '');
}
openSearching() {
this.searching = true;
requestAnimationFrame(() => {
this.searchInputRef.focus();
});
}
closeSearching() {
this.searching = false;
this.searchKeyword = '';
this.findNext();
this.xterm?.focus();
}
onShellKeyDown(event) {
if ((event.metaKey || event.ctrlKey) && event.code === 'KeyF') {
this.openSearching();
event.preventDefault();
event.stopPropagation();
}
}
onSearchInputKeyDown(event) {
if (event.code === 'Escape') {
this.closeSearching();
event.preventDefault();
event.stopPropagation();
}
else if (event.code === 'Enter') {
if (event.shiftKey) {
this.findPrevious();
}
else {
this.findNext();
}
event.preventDefault();
event.stopPropagation();
}
}
getSearchOptions() {
const theme = this.theme === 'light' ? XTERM_LIGHT_THEME : XTERM_DARK_THEME;
return {
decorations: {
matchBackground: theme.selectionInactiveBackground,
matchOverviewRuler: theme.selectionInactiveBackground,
activeMatchBackground: theme.selectionBackground,
activeMatchColorOverviewRuler: theme.selectionBackground,
},
};
}
findNext() {
this.searchAddon.findNext(this.searchKeyword, this.getSearchOptions());
}
findPrevious() {
this.searchAddon.findPrevious(this.searchKeyword, this.getSearchOptions());
}
initXterm() {
this.xterm = new Terminal({
...XTERM_DEFAULT_OPTIONS,
theme: this.theme === 'light' ? XTERM_LIGHT_THEME : XTERM_DARK_THEME,
fontSize: this.fontSize,
allowProposedApi: true,
});
this.xterm.loadAddon(this.initSearchAddon());
this.fitAddon = this.initFitAddon();
this.xterm.loadAddon(this.fitAddon);
this.xterm.loadAddon(new WebLinksAddon());
this.xterm.loadAddon(initRendererAddon());
this.xterm.open(this.anchorRef.nativeElement);
requestAnimationFrame(() => {
this.fitAddon.fit();
});
this.xterm.onData((data) => {
if (this.connectionStatus === ConnectionStatus.Connected) {
this.commandHasRun = true;
this.socket.send('0' + encode(data));
this.sendData.emit(data);
}
});
this.xterm.onSelectionChange(() => {
const selection = this.xterm.getSelection().trim();
if (selection) {
navigator.clipboard.writeText(selection);
}
});
}
initFitAddon() {
const fitAddon = new FitAddon();
const resizeObserver = new ResizeObserver(debounce(([entry]) => {
if (entry.contentRect.width !== 0) {
fitAddon.fit();
this.resizeRemoteTerminal();
}
}, 200));
resizeObserver.observe(this.anchorRef.nativeElement);
return fitAddon;
}
initSearchAddon() {
this.searchAddon = new SearchAddon();
return this.searchAddon;
}
initSocket(initialCommand, apiAddress) {
if (this.socket) {
this.socket.close();
}
const { cluster, namespace, pod, container, user = 'root', cmd, advanceApi, } = this.option;
const command = cmd
? ['sh', '-c', cmd]
: user === 'root'
? initialCommand.split(' ')
: ['sh', '-c', `su -p ${user} -c "${initialCommand}"`];
const api = advanceApi
? '/auth/v1/pod/shell'
: `/kubernetes/${cluster}/api/v1/namespaces/${namespace}/pods/${pod}/exec`;
this.socket = new WebSocket(apiAddress.replace(/^http/, 'ws') +
`${api}?${new HttpParams({
fromObject: {
stdin: true,
stdout: true,
stderr: true,
tty: true,
container,
command,
},
}).toString()}`, ['base64.channel.k8s.io']);
}
fallBackOnClose() {
this.shouldFallBackOnClose = false;
this.fallbackShell.emit(BIN_SH);
this.initSocketConnection(BIN_SH);
this.notification.warning(this.translate.get('unsupported_exec_command_warning'));
}
closeSocket() {
if ([ConnectionStatus.Connecting, ConnectionStatus.ReConnecting].includes(this.connectionStatus)) {
this.option.notClearWhenReconnect || this.xterm?.reset();
}
clearInterval(this.ping);
this.socket?.close();
this.socket = null;
this.socket$$.next(this.socket);
}
// https://github.com/kubernetes-ui/container-terminal/blob/ba560d4f715f405beb0a64bab8fb29a21aac2671/container-terminal.js#L152
resizeRemoteTerminal() {
try {
this.socket?.send(`4${encode(JSON.stringify({ Width: this.xterm.cols, Height: this.xterm.rows }))}`);
}
catch { }
}
updateConnectionStatus(status) {
this.connectionStatus = status;
this.connectionStatusChange.emit(status);
this.cdr.markForCheck();
}
activateTerminal() {
if (this.socket && this.connectionStatus === ConnectionStatus.Connected) {
setTimeout(() => {
this.socket.send('0' + encode(' '));
setTimeout(() => {
this.socket.send('0' + encode('\b'));
}, 100);
}, 100);
}
}
static { this.ɵfac = function TerminalComponent_Factory(t) { return new (t || TerminalComponent)(i0.ɵɵdirectiveInject(i1.ApiGatewayService), i0.ɵɵdirectiveInject(i2.NotificationService), i0.ɵɵdirectiveInject(i3.TranslateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i4.K8sPermissionService), i0.ɵɵdirectiveInject(TOKEN_GLOBAL_NAMESPACE)); }; }
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TerminalComponent, selectors: [["acl-terminal"]], viewQuery: function TerminalComponent_Query(rf, ctx) { if (rf & 1) {
i0.ɵɵviewQuery(_c0, 5);
i0.ɵɵviewQuery(_c1, 5);
} if (rf & 2) {
let _t;
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.anchorRef = _t.first);
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInputRef = _t.first);
} }, hostBindings: function TerminalComponent_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("beforeunload", function TerminalComponent_beforeunload_HostBindingHandler($event) { return ctx.beforeUnload($event); }, false, i0.ɵɵresolveWindow)("unload", function TerminalComponent_unload_HostBindingHandler($event) { return ctx.unload($event); }, false, i0.ɵɵresolveWindow);
} }, inputs: { option: "option", index: "index", extraButton: "extraButton", extraContent: "extraContent" }, outputs: { connectionStatusChange: "connectionStatusChange", sendData: "sendData", socketReady: "socketReady", fallbackShell: "fallbackShell" }, features: [i0.ɵɵNgOnChangesFeature], decls: 38, vars: 41, consts: [["anchor", ""], ["codingMenu", ""], ["fontTemplate", ""], ["searchInput", ""], ["type", "error", 4, "ngIf"], [1, "acl-terminal__wrapper"], ["class", "tw-bg-n-10", "type", "permission", 4, "ngIf"], [3, "loading"], [1, "acl-terminal", "tw-invisible", 3, "ngClass"], [1, "tw-w-full", "tw-h-0", "tw-flex-1", "tw-flex", "tw-flex-col", "tw-p-12"], [1, "acl-terminal__header"], [1, "acl-terminal__button", 3, "auiDropdown", "auiDropdownClass"], ["icon", "angle_down"], ["auiTooltipTrigger", "click", "auiTooltipType", "info", "auiTooltipPosition", "bottom end", 1, "acl-terminal__button", 3, "auiTooltip", "auiTooltipClass"], ["icon", "gear"], [1, "acl-terminal__button", 3, "click"], ["icon", "magnifier"], [3, "icon"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "acl-terminal__shell", 3, "keydown"], [1, "acl-terminal__anchor"], ["class", "acl-terminal__finding", 4, "ngIf"], ["type", "error"], ["aui-button", "text", 3, "click"], ["type", "permission", 1, "tw-bg-n-10"], [1, "acl-terminal__finding"], ["size", "small", 3, "keywordChange", "keydown", "keyword"], ["aui-button", "text", "size", "mini", 3, "click", "square", "plain", "title"], ["icon", "arrow_right", 2, "transform", "rotate(-90deg)"], ["icon", "arrow_right", 2, "transform", "rotate(90deg)"], ["icon", "xmark"], ["size", "small"], [3, "click", "actived"], [3, "valueChange", "step", "precision", "min", "max", "controls", "angleControls", "value"], ["auiInputAddonAfter", ""]], template: function TerminalComponent_Template(rf, ctx) { if (rf & 1) {
const _r1 = i0.ɵɵgetCurrentView();
i0.ɵɵtemplate(0, TerminalComponent_aui_inline_alert_0_Template, 7, 6, "aui-inline-alert", 4);
i0.ɵɵelementStart(1, "div", 5);
i0.ɵɵtemplate(2, TerminalComponent_acl_terminal_placeholder_2_Template, 1, 0, "acl-terminal-placeholder", 6);
i0.ɵɵelement(3, "acl-loading-mask", 7);
i0.ɵɵelementStart(4, "div", 8)(5, "div", 9)(6, "div", 10)(7, "div", 11)(8, "span");
i0.ɵɵtext(9);
i0.ɵɵpipe(10, "translate");
i0.ɵɵelementEnd();
i0.ɵɵelement(11, "aui-icon", 12);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(12, "div", 13);
i0.ɵɵelement(13, "aui-icon", 14);
i0.ɵɵelementStart(14, "span");
i0.ɵɵtext(15);
i0.ɵɵpipe(16, "translate");
i0.ɵɵelementEnd()();
i0.ɵɵelementStart(17, "div", 15);
i0.ɵɵlistener("click", function TerminalComponent_Template_div_click_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openSearching()); });
i0.ɵɵelement(18, "aui-icon", 16);
i0.ɵɵelementStart(19, "span");
i0.ɵɵtext(20);
i0.ɵɵpipe(21, "translate");
i0.ɵɵelementEnd()();
i0.ɵɵelementStart(22, "div", 15);
i0.ɵɵlistener("click", function TerminalComponent_Template_div_click_22_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.switchTheme()); });
i0.ɵɵelement(23, "aui-icon", 17);
i0.ɵɵelementStart(24, "span");
i0.ɵɵtext(25);
i0.ɵɵpipe(26, "translate");
i0.ɵɵelementEnd()();
i0.ɵɵtemplate(27, TerminalComponent_ng_container_27_Template, 1, 0, "ng-container", 18);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(28, "div", 19);
i0.ɵɵlistener("keydown", function TerminalComponent_Template_div_keydown_28_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onShellKeyDown($event)); });
i0.ɵɵelement(29, "div", 20, 0);
i0.ɵɵtemplate(31, TerminalComponent_div_31_Template, 12, 16, "div", 21);
i0.ɵɵelementEnd()()();
i0.ɵɵtemplate(32, TerminalComponent_ng_container_32_Template, 1, 0, "ng-container", 18);
i0.ɵɵpipe(33, "async");
i0.ɵɵelementEnd();
i0.ɵɵtemplate(34, TerminalComponent_ng_template_34_Template, 5, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(36, TerminalComponent_ng_template_36_Template, 3, 7, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
const codingMenu_r7 = i0.ɵɵreference(35);
const fontTemplate_r8 = i0.ɵɵreference(37);
i0.ɵɵproperty("ngIf", ctx.connectionStatus === ctx.ConnectionStatus.Disconnected);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx.connectionStatus === ctx.ConnectionStatus.NoPermission);
i0.ɵɵadvance();
i0.ɵɵproperty("loading", ctx.showLoading);
i0.ɵɵadvance();
i0.ɵɵclassProp("acl-terminal--dark", ctx.theme === "dark")("acl-terminal--light", ctx.theme === "light");
i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(33, _c2, !ctx.showLoading && ctx.connectionStatus !== ctx.ConnectionStatus.NoPermission));
i0.ɵɵadvance(3);
i0.ɵɵproperty("auiDropdown", codingMenu_r7)("auiDropdownClass", ctx.themeClass);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate2("", ctx.coding === "utf8" ? "UTF-8" : ctx.coding === "gb18030" ? "GB 18030" : ctx.coding.toUpperCase(), " ", i0.ɵɵpipeBind1(10, 23, "decoding"), "");
i0.ɵɵadvance(3);
i0.ɵɵproperty("auiTooltip", fontTemplate_r8)("auiTooltipClass", ctx.themeClass);
i0.ɵɵadvance(3);
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 25, "font_setting"));
i0.ɵɵadvance(5);
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(21, 27, "find"));
i0.ɵɵadvance(3);
i0.ɵɵproperty("icon", ctx.theme === "light" ? "sun" : "moon");
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(26, 29, ctx.theme === "light" ? "light_theme" : "dark_theme"));
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", ctx.extraButton)("ngTemplateOutletContext", i0.ɵɵpureFunction1(35, _c3, ctx.index));
i0.ɵɵadvance(4);
i0.ɵɵproperty("ngIf", ctx.searching);
i0.ɵɵadvance();
i0.ɵɵproperty("ngTemplateOutlet", ctx.extraContent)("ngTemplateOutletContext", i0.ɵɵpureFunction3(37, _c4, ctx.option, i0.ɵɵpipeBind1(33, 31, ctx.socket$$), ctx.index));
} }, styles: ["[_nghost-%COMP%]{display:flex;flex-direction:column;width:100%} .acl-terminal__dropdown.aui-tooltip{padding:8px} .acl-terminal__dropdown .aui-number-input__inner{width:100px} .acl-terminal__dropdown.acl-terminal__dropdown--dark{color-scheme:dark;--aui-color-blue: 61, 142, 255;--aui-color-b-0: 54, 116, 204;--aui-color-b-1: 109, 170, 255;--aui-color-b-2: 53, 111, 193;--aui-color-b-3: 50, 101, 173;--aui-color-b-4: 47, 85, 143;--aui-color-b-5: 40, 54, 81;--aui-color-b-6: 42, 64, 102;--aui-color-b-7: 44, 74, 122;--aui-color-primary: var(--aui-color-blue);--aui-color-p-0: var(--aui-color-b-0);--aui-color-p-1: var(--aui-color-b-1);--aui-color-p-2: var(--aui-color-b-2);--aui-color-p-3: var(--aui-color-b-3);--aui-color-p-4: var(--aui-color-b-4);--aui-color-p-5: var(--aui-color-b-5);--aui-color-p-6: var(--aui-color-b-6);--aui-color-p-7: var(--aui-color-b-7);--aui-color-green: 17, 182, 113;--aui-color-g-0: 21, 146, 97;--aui-color-g-1: 76, 200, 148;--aui-color-g-2: 22, 139, 93;--aui-color-g-4: 27, 103, 78;--aui-color-g-6: 31, 74, 66;--aui-color-g-7: 28, 88, 72;--aui-color-yellow: 237, 172, 44;--aui-color-y-0: 186, 138, 45;--aui-color-y-1: 241, 192, 96;--aui-color-y-2: 176, 132, 45;--aui-color-y-4: 126, 98, 47;--aui-color-y-6: 86, 72, 49;--aui-color-y-7: 105, 85, 48;--aui-color-red: 226, 50, 79;--aui-color-r-0: 178, 47, 72;--aui-color-r-1: 233, 101, 123;--aui-color-r-2: 168, 46, 70;--aui-color-r-4: 121, 43, 63;--aui-color-r-6: 83, 41, 57;--aui-color-r-7: 101, 42, 60;--aui-color-n-1: 238, 239, 243;--aui-color-n-2: 200, 201, 205;--aui-color-n-3: 184, 186, 194;--aui-color-n-4: 152, 154, 162;--aui-color-n-5: 144, 147, 159;--aui-color-n-6: 120, 123, 135;--aui-color-n-7: 92, 95, 107;--aui-color-n-8: 67, 70, 82;--aui-color-n-9: 24, 27, 39;--aui-color-n-10: 36, 39, 51;--aui-color-origin-shadow: var(--aui-color-n-9);--aui-color-popper-bg: 56, 59, 71;--aui-color-button-bg: 56, 59, 71;--aui-color-main-bg: var(--aui-color-n-9);--aui-color-divider: var(--aui-color-n-8);--aui-color-border: var(--aui-color-n-7);--aui-color-main-text: var(--aui-color-n-1);--aui-color-secondary-text: var(--aui-color-n-2);--aui-color-help-text: var(--aui-color-n-4);--aui-color-disabled-text: var(--aui-color-n-6);--aui-color-placeholder-text: var(--aui-color-n-6)} .acl-terminal__dropdown.acl-terminal__dropdown--dark .aui-menu, .acl-terminal__dropdown.acl-terminal__dropdown--dark.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)} .acl-terminal__dropdown.acl-terminal__dropdown--light{color-scheme:light;--aui-color-blue: 0, 122, 245;--aui-color-b-0: 0, 103, 208;--aui-color-b-1: 38, 141, 246;--aui-color-b-2: 77, 162, 248;--aui-color-b-3: 102, 175, 249;--aui-color-b-4: 179, 215, 252;--aui-color-b-5: 204, 228, 253;--aui-color-b-6: 229, 241, 254;--aui-color-b-7: 242, 248, 254;--aui-color-primary: var(--aui-color-blue);--aui-color-p-0: var(--aui-color-b-0);--aui-color-p-1: var(--aui-color-b-1);--aui-color-p-2: var(--aui-color-b-2);--aui-color-p-3: var(--aui-color-b-3);--aui-color-p-4: var(--aui-color-b-4);--aui-color-p-5: var(--aui-color-b-5);--aui-color-p-6: var(--aui-color-b-6);--aui-color-p-7: var(--aui-color-b-7);--aui-color-green: 0, 194, 97;--aui-color-g-0: 0, 165, 82;--aui-color-g-1: 38, 203, 120;--aui-color-g-2: 76, 212, 144;--aui-color-g-4: 179, 236, 207;--aui-color-g-6: 230, 249, 239;--aui-color-g-7: 242, 251, 246;--aui-color-yellow: 245, 163, 0;--aui-color-y-0: 220, 146, 0;--aui-color-y-1: 246, 176, 38;--aui-color-y-2: 248, 190, 77;--aui-color-y-4: 252, 227, 179;--aui-color-y-6: 254, 245, 230;--aui-color-y-7: 254, 250, 243;--aui-color-red: 235, 0, 39;--aui-color-r-0: 199, 0, 33;--aui-color-r-1: 237, 38, 71;--aui-color-r-2: 241, 76, 103;--aui-color-r-4: 249, 179, 190;--aui-color-r-6: 253, 230, 233;--aui-color-r-7: 254, 243, 244;--aui-color-n-1: 50, 52, 55;--aui-color-n-2: 100, 102, 105;--aui-color-n-3: 124, 126, 129;--aui-color-n-4: 150, 152, 155;--aui-color-n-5: 174, 176, 179;--aui-color-n-6: 200, 202, 205;--aui-color-n-7: 212, 214, 217;--aui-color-n-8: 237, 239, 242;--aui-color-n-9: 247, 249, 252;--aui-color-n-10: 255, 255, 255;--aui-color-origin-shadow: var(--aui-color-n-1);--aui-color-popper-bg: var(--aui-color-n-10);--aui-color-button-bg: var(--aui-color-n-9);--aui-color-main-bg: var(--aui-color-n-9);--aui-color-divider: var(--aui-color-n-8);--aui-color-border: var(--aui-color-n-7);--aui-color-main-text: var(--aui-color-n-1);--aui-color-secondary-text: var(--aui-color-n-2);--aui-color-help-text: var(--aui-color-n-4);--aui-color-disabled-text: var(--aui-color-n-6);--aui-color-placeholder-text: var(--aui-color-n-6)} .acl-terminal__dropdown.acl-terminal__dropdown--light .aui-menu, .acl-terminal__dropdown.acl-terminal__dropdown--light.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}.acl-terminal[_ngcontent-%COMP%]{display:flex;flex:1;flex-direction:column;width:100%;background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l);overflow:hidden}.acl-terminal__wrapper[_ngcontent-%COMP%]{display:flex;flex-direction:column;flex:1;height:0}.acl-terminal__header[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;align-items:center;height:var(--aui-line-height-m);margin-bottom:12px;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.acl-terminal[_ngcontent-%COMP%] .acl-terminal__button{cursor:pointer;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-help-text))}.acl-terminal[_ngcontent-%COMP%] .acl-terminal__button aui-icon{font-size:var(--aui-icon-size-m)}.acl-terminal[_ngcontent-%COMP%] .acl-terminal__button aui-icon:first-child{margin-right:4px}.acl-terminal[_ngcontent-%COMP%] .acl-terminal__button aui-icon:last-child{margin-left:4px}.acl-terminal[_ngcontent-%COMP%] .acl-terminal__button+.acl-terminal__button{margin-left:12px}.acl-terminal__shell[_ngcontent-%COMP%]{width:100%;height:100%;padding:8px;background-color:rgb(var(--aui-color-n-10));border:1px solid rgb(var(--aui-color-n-8));border-radius:var(--aui-border-radius-l);overflow:hidden;position:relative}.acl-terminal__anchor[_ngcontent-%COMP%]{width:100%;height:100%;overflow:hidden}.acl-terminal__finding[_ngcontent-%COMP%]{position:absolute;top:8px;right:8px;padding:8px;z-index:100;display:flex;align-items:center;background-color:rgb(var(--aui-color-popper-bg));border-radius:var(--aui-border-radius-m)}.acl-terminal__finding[_ngcontent-%COMP%] .aui-input[_ngcontent-%COMP%]{margin-right:8px}.acl-terminal--dark[_ngcontent-%COMP%]{color-scheme:dark;--aui-color-blue: 61, 142, 255;--aui-color-b-0: 54, 116, 204;--aui-color-b-1: 109, 170, 255;--aui-color-b-2: 53, 111, 193;--aui-color-b-3: 50, 101, 173;--aui-color-b-4: 47, 85, 143;--aui-color-b-5: 40, 54, 81;--aui-color-b-6: 42, 64, 102;--aui-color-b-7: 44, 74, 122;--aui-color-primary: var(--aui-color-blue);--aui-color-p-0: var(--aui-color-b-0);--aui-color-p-1: var(--aui-color-b-1);--aui-color-p-2: var(--aui-color-b-2);--aui-color-p-3: var(--aui-color-b-3);--aui-color-p-4: var(--aui-color-b-4);--aui-color-p-5: var(--aui-color-b-5);--aui-color-p-6: var(--aui-color-b-6);--aui-color-p-7: var(--aui-color-b-7);--aui-color-green: 17, 182, 113;--aui-color-g-0: 21, 146, 97;--aui-color-g-1: 76, 200, 148;--aui-color-g-2: 22, 139, 93;--aui-color-g-4: 27, 103, 78;--aui-color-g-6: 31, 74, 66;--aui-color-g-7: 28, 88, 72;--aui-color-yellow: 237, 172, 44;--aui-color-y-0: 186, 138, 45;--aui-color-y-1: 241, 192, 96;--aui-color-y-2: 176, 132, 45;--aui-color-y-4: 126, 98, 47;--aui-color-y-6: 86, 72, 49;--aui-color-y-7: 105, 85, 48;--aui-color-red: 226, 50, 79;--aui-color-r-0: 178, 47, 72;--aui-color-r-1: 233, 101, 123;--aui-color-r-2: 168, 46, 70;--aui-color-r-4: 121, 43, 63;--aui-color-r-6: 83, 41, 57;--aui-color-r-7: 101, 42, 60;--aui-color-n-1: 238, 239, 243;--aui-color-n-2: 200, 201, 205;--aui-color-n-3: 184, 186, 194;--aui-color-n-4: 152, 154, 162;--aui-color-n-5: 144, 147, 159;--aui-color-n-6: 120, 123, 135;--aui-color-n-7: 92, 95, 107;--aui-color-n-8: 67, 70, 82;--aui-color-n-9: 24, 27, 39;--aui-color-n-10: 36, 39, 51;--aui-color-origin-shadow: var(--aui-color-n-9);--aui-color-popper-bg: 56, 59, 71;--aui-color-button-bg: 56, 59, 71;--aui-color-main-bg: var(--aui-color-n-9);--aui-color-divider: var(--aui-color-n-8);--aui-color-border: var(--aui-color-n-7);--aui-color-main-text: var(--aui-color-n-1);--aui-color-secondary-text: var(--aui-color-n-2);--aui-color-help-text: var(--aui-color-n-4);--aui-color-disabled-text: var(--aui-color-n-6);--aui-color-placeholder-text: var(--aui-color-n-6)}.acl-terminal--light[_ngcontent-%COMP%]{color-scheme:light;--aui-color-blue: 0, 122, 245;--aui-color-b-0: 0, 103, 208;--aui-color-b-1: 38, 141, 246;--aui-color-b-2: 77, 162, 248;--aui-color-b-3: 102, 175, 249;--aui-color-b-4: 179, 215, 252;--aui-color-b-5: 204, 228, 253;--aui-color-b-6: 229, 241, 254;--aui-color-b-7: 242, 248, 254;--aui-color-primary: var(--aui-color-blue);--aui-color-p-0: var(--aui-color-b-0);--aui-color-p-1: var(--aui-color-b-1);--aui-color-p-2: var(--aui-color-b-2);--aui-color-p-3: var(--aui-color-b-3);--aui-color-p-4: var(--aui-color-b-4);--aui-color-p-5: var(--aui-color-b-5);--aui-color-p-6: var(--aui-color-b-6);--aui-color-p-7: var(--aui-color-b-7);--aui-color-green: 0, 194, 97;--aui-color-g-0: 0, 165, 82;--aui-color-g-1: 38, 203, 120;--aui-color-g-2: 76, 212, 144;--aui-color-g-4: 179, 236, 207;--aui-color-g-6: 230, 249, 239;--aui-color-g-7: 242, 251, 246;--aui-color-yellow: 245, 163, 0;--aui-color-y-0: 220, 146, 0;--aui-color-y-1: 246, 176, 38;--aui-color-y-2: 248, 190, 77;--aui-color-y-4: 252, 227, 179;--aui-color-y-6: 254, 245, 230;--aui-color-y-7: 254, 250, 243;--aui-color-red: 235, 0, 39;--aui-color-r-0: 199, 0, 33;--aui-color-r-1: 237, 38, 71;--aui-color-r-2: 241, 76, 103;--aui-color-r-4: 249, 179, 190;--aui-color-r-6: 253, 230, 233;--aui-color-r-7: 254, 243, 244;--aui-color-n-1: 50, 52, 55;--aui-color-n-2: 100, 102, 105;--aui-color-n-3: 124, 126, 129;--aui-color-n-4: 150, 152, 155;--aui-color-n-5: 174, 176, 179;--aui-color-n-6: 200, 202, 205;--aui-color-n-7: 212, 214, 217;--aui-color-n-8: 237, 239, 242;--aui-color-n-9: 247, 249, 252;--aui-color-n-10: 255, 255, 255;--aui-color-origin-shadow: var(--aui-color-n-1);--aui-color-popper-bg: var(--aui-color-n-10);--aui-color-button-bg: var(--aui-color-n-9);--aui-color-main-bg: var(--aui-color-n-9);--aui-color-divider: var(--aui-color-n-8);--aui-color-border: var(--aui-color-n-7);--aui-color-main-text: var(--aui-color-n-1);--aui-color-secondary-text: var(--aui-color-n-2);--aui-color-help-text: var(--aui-color-n-4);--aui-color-disabled-text: var(--aui-color-n-6);--aui-color-placeholder-text: var(--aui-color-n-6)}.acl-terminal--dark[_ngcontent-%COMP%] .acl-terminal__finding[_ngcontent-%COMP%]{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}.acl-terminal--light[_ngcontent-%COMP%] .acl-terminal__finding[_ngcontent-%COMP%]{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TerminalComponent, [{
type: Component,
args: [{ selector: 'acl-terminal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<aui-inline-alert\n *ngIf=\"connectionStatus === ConnectionStatus.Disconnected\"\n type=\"error\"\n>\n <span>{{ 'exec_disconnected_tip' | translate }}</span>\n <button\n aui-button=\"text\"\n (click)=\"reconnect()\"\n >\n {{ 'reconnect' | translate }}\n </button>\n</aui-inline-alert>\n\n<div class=\"acl-terminal__wrapper\">\n <acl-terminal-placeholder\n class=\"tw-bg-n-10\"\n *ngIf=\"connectionStatus === ConnectionStatus.NoPermission\"\n type=\"permission\"\n ></acl-terminal-placeholder>\n <acl-loading-mask [loading]=\"showLoading\"></acl-loading-mask>\n <div\n class=\"acl-terminal tw-invisible\"\n [ngClass]=\"{\n '!tw-visible':\n !showLoading && connectionStatus !== ConnectionStatus.NoPermission\n }\"\n [class.acl-terminal--dark]=\"theme === 'dark'\"\n [class.acl-terminal--light]=\"theme === 'light'\"\n >\n <div class=\"tw-w-full tw-h-0 tw-flex-1 tw-flex tw-flex-col tw-p-12\">\n <div class=\"acl-terminal__header\">\n <div\n class=\"acl-terminal__button\"\n [auiDropdown]=\"codingMenu\"\n [auiDropdownClass]=\"themeClass\"\n >\n <span\n >{{\n coding === 'utf8'\n ? 'UTF-8'\n : coding === 'gb18030'\n ? 'GB 18030'\n : coding.toUpperCase()\n }}\n {{ 'decoding' | translate }}</span\n >\n <aui-icon icon=\"angle_down\"></aui-icon>\n </div>\n <div\n class=\"acl-terminal__button\"\n [auiTooltip]=\"fontTemplate\"\n auiTooltipTrigger=\"click\"\n auiTooltipType=\"info\"\n auiTooltipPosition=\"bottom end\"\n [auiTooltipClass]=\"themeClass\"\n >\n <aui-icon icon=\"gear\"></aui-icon>\n <span>{{ 'font_setting' | translate }}</span>\n </div>\n <div\n class=\"acl-terminal__button\"\n (click)=\"openSearching()\"\n >\n <aui-icon icon=\"magnifier\"></aui-icon>\n <span>{{ 'find' | translate }}</span>\n </div>\n <div\n class=\"acl-terminal__button\"\n (click)=\"switchTheme()\"\n >\n <aui-icon [icon]=\"theme === 'light' ? 'sun' : 'moon'\"></aui-icon>\n <span>{{\n (theme === 'light' ? 'light_theme' : 'dark_theme') | translate\n }}</span>\n </div>\n <ng-container\n *ngTemplateOutlet=\"extraButton; context: { index: index }\"\n ></ng-container>\n </div>\n <div\n class=\"acl-terminal__shell\"\n (keydown)=\"onShellKeyDown($event)\"\n >\n <div\n #anchor\n class=\"acl-terminal__anchor\"\n ></div>\n <div\n *ngIf=\"searching\"\n class=\"acl-terminal__finding\"\n >\n <aui-search\n #searchInput\n size=\"small\"\n [(keyword)]=\"searchKeyword\"\n (keydown)=\"onSearchInputKeyDown($event)\"\n ></aui-search>\n <button\n aui-button=\"text\"\n size=\"mini\"\n [square]=\"true\"\n [plain]=\"true\"\n [title]=\"('find_previous' | translate) + ' (Shift + Enter)'\"\n (click)=\"findPrevious()\"\n >\n <aui-icon\n icon=\"arrow_right\"\n style=\"transform: rotate(-90deg)\"\n ></aui-icon>\n </button>\n <button\n aui-button=\"text\"\n size=\"mini\"\n [square]=\"true\"\n [plain]=\"true\"\n [title]=\"('find_next' | translate) + ' (Enter)'\"\n (click)=\"findNext()\"\n >\n <aui-icon\n icon=\"arrow_right\"\n style=\"transform: rotate(90deg)\"\n ></aui-icon>\n </button>\n <button\n aui-button=\"text\"\n size=\"mini\"\n [square]=\"true\"\n [plain]=\"true\"\n [title]=\"('close' | translate) + ' (Escape)'\"\n (click)=\"closeSearching()\"\n >\n <aui-icon icon=\"xmark\"></aui-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container\n *ngTemplateOutlet=\"\n extraContent;\n context: {\n $implicit: option,\n socket: socket$$ | async,\n index: index\n }\n \"\n ></ng-container>\n</div>\n\n<ng-template #codingMenu\n ><aui-menu size=\"small\"\n ><aui-menu-item\n [actived]=\"coding === 'utf8'\"\n (click)=\"coding = 'utf8'\"\n >UTF-8\n </aui-menu-item>\n <aui-menu-item\n [actived]=\"coding === 'gb18030'\"\n (click)=\"coding = 'gb18030'\"\n >GB 18030\n </aui-menu-item>\n </aui-menu></ng-template\n>\n\n<ng-template #fontTemplate>\n <aui-number-input\n [step]=\"1\"\n [precision]=\"1\"\n [min]=\"12\"\n [max]=\"40\"\n [controls]=\"true\"\n [angleControls]=\"true\"\n [value]=\"fontSize\"\n (valueChange)=\"fontSizeChange($event)\"\n >\n <span auiInputAddonAfter>px</span>\n </aui-number-input>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;width:100%}::ng-deep .acl-terminal__dropdown.aui-tooltip{padding:8px}::ng-deep .acl-terminal__dropdown .aui-number-input__inner{width:100px}::ng-deep .acl-terminal__dropdown.acl-terminal__dropdown--dark{color-scheme:dark;--aui-color-blue: 61, 142, 255;--aui-color-b-0: 54, 116, 204;--aui-color-b-1: 109, 170, 255;--aui-color-b-2: 53, 111, 193;--aui-color-b-3: 50, 101, 173;--aui-color-b-4: 47, 85, 143;--aui-color-b-5: 40, 54, 81;--aui-color-b-6: 42, 64, 102;--aui-color-b-7: 44, 74, 122;--aui-color-primary: var(--aui-color-blue);--aui-color-p-0: var(--aui-color-b-0);--aui-color-p-1: var(--aui-color-b-1);--aui-color-p-2: var(--aui-color-b-2);--aui-color-p-3: var(--aui-color-b-3);--aui-color-p-4: var(--aui-color-b-4);--aui-color-p-5: var(--aui-color-b-5);--aui-color-p-6: var(--aui-color-b-6);--aui-color-p-7: var(--aui-color-b-7);--aui-color-green: 17, 182, 113;--aui-color-g-0: 21, 146, 97;--aui-color-g-1: 76, 200, 148;--aui-color-g-2: 22, 139, 93;--aui-color-g-4: 27, 103, 78;--aui-color-g-6: 31, 74, 66;--aui-color-g-7: 28, 88, 72;--aui-color-yellow: 237, 172, 44;--aui-color-y-0: 186, 138, 45;--aui-color-y-1: 241, 192, 96;--aui-color-y-2: 176, 132, 45;--aui-color-y-4: 126, 98, 47;--aui-color-y-6: 86, 72, 49;--aui-color-y-7: 105, 85, 48;--aui-color-red: 226, 50, 79;--aui-color-r-0: 178, 47, 72;--aui-color-r-1: 233, 101, 123;--aui-color-r-2: 168, 46, 70;--aui-color-r-4: 121, 43, 63;--aui-color-r-6: 83, 41, 57;--aui-color-r-7: 101, 42, 60;--aui-color-n-1: 238, 239, 243;--aui-color-n-2: 200, 201, 205;--aui-color-n-3: 184, 186, 194;--aui-color-n-4: 152, 154, 162;--aui-color-n-5: 144, 147, 159;--aui-color-n-6: 120, 123, 135;--aui-color-n-7: 92, 95, 107;--aui-color-n-8: 67, 70, 82;--aui-color-n-9: 24, 27, 39;--aui-color-n-10: 36, 39, 51;--aui-color-origin-shadow: var(--aui-color-n-9);--aui-color-popper-bg: 56, 59, 71;--aui-color-button-bg: 56, 59, 71;--aui-color-main-bg: var(--aui-color-n-9);--aui-color-divider: var(--aui-color-n-8);--aui-color-border: var(--aui-color-n-7);--aui-color-main-text: var(--aui-color-n-1);--aui-color-secondary-text: var(--aui-color-n-2);--aui-color-help-text: var(--aui-color-n-4);--aui-color-disabled-text: var(--aui-color-n-6);--aui-color-placeholder-text: var(--aui-color-n-6)}::ng-deep .acl-terminal__dropdown.acl-terminal__dropdown--dark .aui-menu,::ng-deep .acl-terminal__dropdown.acl-terminal__dropdown--dark.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.75)}::ng-deep .acl-terminal__dropdown.acl-terminal__dropdown--light{color-scheme:light;--aui-color-blue: 0, 122, 245;--aui-color-b-0: 0, 103, 208;--aui-color-b-1: 38, 141, 246;--aui-color-b-2: 77, 162, 248;--aui-color-b-3: 102, 175, 249;--aui-color-b-4: 179, 215, 252;--aui-color-b-5: 204, 228, 253;--aui-color-b-6: 229, 241, 254;--aui-color-b-7: 242, 248, 254;--aui-color-primary: var(--aui-color-blue);--aui-color-p-0: var(--aui-color-b-0);--aui-color-p-1: var(--aui-color-b-1);--aui-color-p-2: var(--aui-color-b-2);--aui-color-p-3: var(--aui-color-b-3);--aui-color-p-4: var(--aui-color-b-4);--aui-color-p-5: var(--aui-color-b-5);--aui-color-p-6: var(--aui-color-b-6);--aui-color-p-7: var(--aui-color-b-7);--aui-color-green: 0, 194, 97;--aui-color-g-0: 0, 165, 82;--aui-color-g-1: 38, 203, 120;--aui-color-g-2: 76, 212, 144;--aui-color-g-4: 179, 236, 207;--aui-color-g-6: 230, 249, 239;--aui-color-g-7: 242, 251, 246;--aui-color-yellow: 245, 163, 0;--aui-color-y-0: 220, 146, 0;--aui-color-y-1: 246, 176, 38;--aui-color-y-2: 248, 190, 77;--aui-color-y-4: 252, 227, 179;--aui-color-y-6: 254, 245, 230;--aui-color-y-7: 254, 250, 243;--aui-color-red: 235, 0, 39;--aui-color-r-0: 199, 0, 33;--aui-color-r-1: 237, 38, 71;--aui-color-r-2: 241, 76, 103;--aui-color-r-4: 249, 179, 190;--aui-color-r-6: 253, 230, 233;--aui-color-r-7: 254, 243, 244;--aui-color-n-1: 50, 52, 55;--aui-color-n-2: 100, 102, 105;--aui-color-n-3: 124, 126, 129;--aui-color-n-4: 150, 152, 155;--aui-color-n-5: 174, 176, 179;--aui-color-n-6: 200, 202, 205;--aui-color-n-7: 212, 214, 217;--aui-color-n-8: 237, 239, 242;--aui-color-n-9: 247, 249, 252;--aui-color-n-10: 255, 255, 255;--aui-color-origin-shadow: var(--aui-color-n-1);--aui-color-popper-bg: var(--aui-color-n-10);--aui-color-button-bg: var(--aui-color-n-9);--aui-color-main-bg: var(--aui-color-n-9);--aui-color-divider: var(--aui-color-n-8);--aui-color-border: var(--aui-color-n-7);--aui-color-main-text: var(--aui-color-n-1);--aui-color-secondary-text: var(--aui-color-n-2);--aui-color-help-text: var(--aui-color-n-4);--aui-color-disabled-text: var(--aui-color-n-6);--aui-color-placeholder-text: var(--aui-color-n-6)}::ng-deep .acl-terminal__dropdown.acl-terminal__dropdown--light .aui-menu,::ng-deep .acl-terminal__dropdown.acl-terminal__dropdown--light.aui-tooltip{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}.acl-terminal{display:flex;flex:1;flex-direction:column;width:100%;background-color:rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l);overflow:hidden}.acl-terminal__wrapper{display:flex;flex-direction:column;flex:1;height:0}.acl-terminal__header{display:flex;justify-content:flex-end;align-items:center;height:var(--aui-line-height-m);margin-bottom:12px;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.acl-terminal ::ng-deep .acl-terminal__button{cursor:pointer;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-help-text))}.acl-terminal ::ng-deep .acl-terminal__button aui-icon{font-size:var(--aui-icon-size-m)}.acl-terminal ::ng-deep .acl-terminal__button aui-icon:first-child{margin-right:4px}.acl-terminal ::ng-deep .acl-terminal__button aui-icon:last-child{margin-left:4px}.acl-terminal ::ng-deep .acl-terminal__button+.acl-terminal__button{margin-left:12px}.acl-terminal__shell{width:100%;height:100%;padding:8px;background-color:rgb(var(--aui-color-n-10));border:1px solid rgb(var(--aui-color-n-8));border-radius:var(--aui-border-radius-l);overflow:hidden;position:relative}.acl-terminal__anchor{wi