Merge pull request #83 from qwefgh90/bump_v17

Support Angular17. Bump up the versions and fix some bugs

package.json

@@ -37,7 +37,7 @@
     "ngx-json-viewer": "^2.4.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
-    "xterm": "^5.1.0",
+    "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0",
     "xterm-addon-web-links": "^0.9.0",
     "zone.js": "~0.11.4"

projects/demo/src/app/example.component.ts

@@ -7,7 +7,7 @@ import {
   SimpleChanges,
 } from '@angular/core';
 import { Subject } from 'rxjs';
-import { NgTerminal } from 'ng-terminal';
+import { KindOfCharacterAttributes, NgTerminal } from 'ng-terminal';
 import { FormControl } from '@angular/forms';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { Terminal } from 'xterm';
@@ -20,7 +20,6 @@ import { WebLinksAddon } from 'xterm-addon-web-links';
   styleUrls: ['./example.component.css'],
 })
 export class ExampleComponent implements AfterViewInit {
-
   readonly title = 'NgTerminal Live Example';
   readonly color = 'accent';
   readonly prompt = '\n' + FunctionsUsingCSI.cursorColumn(1) + '$ ';
@@ -43,7 +42,6 @@ export class ExampleComponent implements AfterViewInit {
 
   @ViewChild('term', { static: false }) child?: NgTerminal;
 
-
   ngAfterViewInit() {
     if (!this.child) return;
     this.underlying = this.child.underlying!!;
@@ -54,8 +52,32 @@ export class ExampleComponent implements AfterViewInit {
       theme: this.baseTheme,
       cursorBlink: true,
     });
-    this.child.write('$ NgTerminal Live Example');
-    this.child.write(this.prompt);
+    this.child.write(
+      '$ NgTerminal Live Example\n' + FunctionsUsingCSI.cursorColumn(1)
+    );
+    this.child.write(
+      FunctionsUsingCSI.characterAttributes(
+        KindOfCharacterAttributes.SetforegroundcolortoRed,
+        KindOfCharacterAttributes.Bold
+      )
+    );
+    this.child.write(
+      `$ 1) Try the data binding in the input below.\n` +
+        FunctionsUsingCSI.cursorColumn(1)
+    );
+    this.child.write(FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.Normal));
+    this.child.write(
+      `$ 2) Try dragging on the ${FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.SetbackgroundcolortoGreen)}borders\
+${FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.Normal)} and set \
+${FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.SetbackgroundcolortoCyan)}row and\
+ col${FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.Normal)}\
+.\n` +
+        FunctionsUsingCSI.cursorColumn(1)
+    );
+    this.child.write(
+      FunctionsUsingCSI.characterAttributes(KindOfCharacterAttributes.Bold)
+    );
+    this.child.write(`$ `);
     this.child.onData().subscribe((input) => {
       if (!this.child) return;
       if (input === '\r') {

projects/ng-terminal/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ng-terminal",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "NgTerminal is a terminal component on Angular 14 or higher.",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^16.0.0 || ^15.0.0 || ^14.0.0",
-    "@angular/core": "^16.0.0 || ^15.0.0 || ^14.0.0"
+    "@angular/common": "^17.0.0 || ^16.0.0 || ^15.0.0 || ^14.0.0",
+    "@angular/core": "^17.0.0 || ^16.0.0 || ^15.0.0 || ^14.0.0"
   },
   "repository": {
     "type": "git",
@@ -38,8 +38,8 @@
   "dependencies": {
     "angular-resizable-element": "^5.0.0",
     "@juggle/resize-observer": "^3.4.0",
-    "xterm-addon-fit": "^0.7.0",
-    "xterm": "^5.1.0",
+    "xterm-addon-fit": "^0.8.0",
+    "xterm": "^5.3.0",
     "tslib": "^2.3.0"
   }
 }