@device-management-toolkit/ui-toolkit-angular 9.1.4 → 10.1.0

package/fesm2022/device-management-toolkit-ui-toolkit-angular.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { input, output, Component, EventEmitter, ViewEncapsulation, inject, Renderer2, viewChild, effect } from '@angular/core';
+import { input, output, Component, inject, DestroyRef, effect, ViewEncapsulation, Renderer2, viewChild, signal } from '@angular/core';
 import { Terminal } from '@xterm/xterm';
 import { AmtTerminal, TerminalDataProcessor, Protocol, AMTRedirector, AMTKvmDataRedirector, AMTDesktop, DataProcessor, MouseHelper, KeyBoardHelper, AMTIDER } from '@device-management-toolkit/ui-toolkit/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, timer } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
 
@@ -14,7 +15,7 @@ class TerminalComponent {
         // TODO: Notes from signal input migration:
         //  Input is initialized to `undefined` but type does not allow this value.
         //  This worked with `@Input` because your project uses `--strictPropertyInitialization=false`.
-        this.term = input(undefined);
+        this.term = input(undefined, ...(ngDevMode ? [{ debugName: "term" }] : []));
         this.handleKeyPress = output();
     }
     ngOnInit() {
@@ -58,10 +59,10 @@ class TerminalComponent {
             this.handleKeyPress.emit(key);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TerminalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.13", type: TerminalComponent, isStandalone: true, selector: "amt-terminal", inputs: { term: { classPropertyName: "term", publicName: "term", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleKeyPress: "handleKeyPress" }, ngImport: i0, template: "<div id=\"terminal\" class=\"xtermDisplay\" style=\"width: fit-content\"></div>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TerminalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: TerminalComponent, isStandalone: true, selector: "amt-terminal", inputs: { term: { classPropertyName: "term", publicName: "term", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { handleKeyPress: "handleKeyPress" }, ngImport: i0, template: "<div id=\"terminal\" class=\"xtermDisplay\" style=\"width: fit-content\"></div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TerminalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: TerminalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'amt-terminal', template: "<div id=\"terminal\" class=\"xtermDisplay\" style=\"width: fit-content\"></div>\n" }]
         }] });
@@ -72,17 +73,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  **********************************************************************/
 class SOLComponent {
     constructor() {
+        this.destroyRef = inject(DestroyRef);
         this.deviceState = 0;
         this.deviceStatus = output();
-        this.deviceConnection = input(new EventEmitter());
-        this.mpsServer = input('');
-        this.authToken = input('');
-        this.deviceId = input('');
-    }
-    ngOnInit() {
-        this.deviceConnection().subscribe((data) => {
-            if (data) {
-                this.init();
+        this.deviceConnection = input(false, ...(ngDevMode ? [{ debugName: "deviceConnection" }] : []));
+        this.mpsServer = input('', ...(ngDevMode ? [{ debugName: "mpsServer" }] : []));
+        this.authToken = input('', ...(ngDevMode ? [{ debugName: "authToken" }] : []));
+        this.deviceId = input('', ...(ngDevMode ? [{ debugName: "deviceId" }] : []));
+        // React to deviceConnection changes
+        effect(() => {
+            const connected = this.deviceConnection();
+            if (connected) {
+                if (this.redirector == null) {
+                    this.init();
+                }
             }
             else {
                 this.stopSol();
@@ -147,7 +151,7 @@ class SOLComponent {
         }
     }
     stopSol() {
-        if (this.redirector !== null) {
+        if (this.redirector != null) {
             this.redirector.stop();
             this.handleClearTerminal();
             this.term?.dispose();
@@ -164,13 +168,13 @@ class SOLComponent {
     ngOnDestroy() {
         this.stopSol();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SOLComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SOLComponent, isStandalone: true, selector: "amt-sol", inputs: { deviceConnection: { classPropertyName: "deviceConnection", publicName: "deviceConnection", isSignal: true, isRequired: false, transformFunction: null }, mpsServer: { classPropertyName: "mpsServer", publicName: "mpsServer", isSignal: true, isRequired: false, transformFunction: null }, authToken: { classPropertyName: "authToken", publicName: "authToken", isSignal: true, isRequired: false, transformFunction: null }, deviceId: { classPropertyName: "deviceId", publicName: "deviceId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deviceStatus: "deviceStatus" }, ngImport: i0, template: "<div class=\"container\">\n  @if (deviceState === 3) {\n    <amt-terminal [term]=\"term\" (handleKeyPress)=\"handleKeyPress($event)\"></amt-terminal>\n  }\n</div>\n", styles: [".container{display:block;text-align:center}.xtermDisplay{display:inline-block}\n"], dependencies: [{ kind: "component", type: TerminalComponent, selector: "amt-terminal", inputs: ["term"], outputs: ["handleKeyPress"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SOLComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.2", type: SOLComponent, isStandalone: true, selector: "amt-sol", inputs: { deviceConnection: { classPropertyName: "deviceConnection", publicName: "deviceConnection", isSignal: true, isRequired: false, transformFunction: null }, mpsServer: { classPropertyName: "mpsServer", publicName: "mpsServer", isSignal: true, isRequired: false, transformFunction: null }, authToken: { classPropertyName: "authToken", publicName: "authToken", isSignal: true, isRequired: false, transformFunction: null }, deviceId: { classPropertyName: "deviceId", publicName: "deviceId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deviceStatus: "deviceStatus" }, ngImport: i0, template: "<div class=\"container\">\n  @if (deviceState === 3) {\n    <amt-terminal [term]=\"term\" (handleKeyPress)=\"handleKeyPress($event)\"></amt-terminal>\n  }\n</div>\n", styles: [".container{display:block;text-align:center}.xtermDisplay{display:inline-block}\n"], dependencies: [{ kind: "component", type: TerminalComponent, selector: "amt-terminal", inputs: ["term"], outputs: ["handleKeyPress"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SOLComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: SOLComponent, decorators: [{
             type: Component,
             args: [{ selector: 'amt-sol', encapsulation: ViewEncapsulation.None, imports: [TerminalComponent], template: "<div class=\"container\">\n  @if (deviceState === 3) {\n    <amt-terminal [term]=\"term\" (handleKeyPress)=\"handleKeyPress($event)\"></amt-terminal>\n  }\n</div>\n", styles: [".container{display:block;text-align:center}.xtermDisplay{display:inline-block}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /*********************************************************************
  * Copyright (c) Intel Corporation 2023
@@ -179,20 +183,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
 class KVMComponent {
     constructor() {
         this.renderer = inject(Renderer2);
-        this.canvas = viewChild('canvas');
+        this.destroyRef = inject(DestroyRef);
+        this.KEY_SEQUENCE_DELAY_MS = 10;
+        this.canvas = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvas" }] : []));
         this.device = viewChild.required('device');
-        this.isFullscreen = input(false);
-        //setting a width and height for the canvas
-        this.width = 400;
-        this.height = 400;
-        this.mpsServer = input('');
-        this.authToken = input('');
-        this.deviceId = input('');
+        // Canvas properties
+        this.context = null;
+        this.width = signal(400, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.height = signal(400, ...(ngDevMode ? [{ debugName: "height" }] : []));
+        // Input properties
+        this.isFullscreen = input(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : []));
+        this.mpsServer = input('', ...(ngDevMode ? [{ debugName: "mpsServer" }] : []));
+        this.authToken = input('', ...(ngDevMode ? [{ debugName: "authToken" }] : []));
+        this.deviceId = input('', ...(ngDevMode ? [{ debugName: "deviceId" }] : []));
+        // Input/Output properties
         this.deviceStatus = output();
-        this.deviceConnection = input(new EventEmitter());
-        this.selectedEncoding = input(new EventEmitter());
-        this.powerState = 0;
-        this.selected = 1;
+        this.deviceConnection = input(false, ...(ngDevMode ? [{ debugName: "deviceConnection" }] : []));
+        this.selectedEncoding = input(1, ...(ngDevMode ? [{ debugName: "selectedEncoding" }] : []));
+        this.selectedHotkey = input('', ...(ngDevMode ? [{ debugName: "selectedHotkey" }] : []));
+        // Component state
+        this.module = null;
+        this.redirector = null;
+        this.dataProcessor = null;
+        this.mouseHelper = null;
+        this.keyboardHelper = null;
+        this.selected = signal(1, ...(ngDevMode ? [{ debugName: "selected" }] : []));
         this.encodings = [
             { value: 1, viewValue: 'RLE 8' },
             { value: 2, viewValue: 'RLE 16' }
@@ -200,39 +215,38 @@ class KVMComponent {
         this.onConnectionStateChange = (redirector, state) => {
             this.deviceStatus.emit(state);
         };
-        this.reset = () => {
-            this.redirector = null;
-            this.module = null;
-            this.dataProcessor = null;
-            this.height = 400;
-            this.width = 400;
-            this.instantiate();
-        };
-        this.stopKvm = () => {
-            this.redirector?.stop();
-            this.keyboardHelper.UnGrabKeyInput();
-            this.reset();
-        };
         effect(() => {
             this.toggleFullscreen();
         });
-    }
-    ngOnInit() {
-        this.deviceConnection().subscribe((data) => {
-            if (data) {
+        // React to deviceConnection changes
+        effect(() => {
+            const connected = this.deviceConnection();
+            if (connected && this.redirector == null) {
+                console.log('KVMComponent: Device connected, initializing KVM...');
                 this.init();
             }
-            else {
+            else if (!connected) {
+                console.log('KVMComponent: Device disconnected, stopping KVM...');
                 this.stopKvm();
             }
         });
-        this.selectedEncoding().subscribe((data) => {
-            this.selected = data;
+        // React to selectedEncoding changes
+        effect(() => {
+            if (this.selectedEncoding() === this.selected() || !this.deviceConnection())
+                return;
+            console.log('KVMComponent: Encoding changed to', this.selectedEncoding());
+            const encoding = this.selectedEncoding();
+            this.selected.set(encoding);
             this.onEncodingChange();
         });
-    }
-    ngAfterViewInit() {
-        this.init();
+        // React to selectedHotkey changes
+        effect(() => {
+            const hotkey = this.selectedHotkey();
+            if (hotkey && this.deviceConnection() && this.keyboardHelper) {
+                console.log('KVMComponent: Hotkey triggered:', hotkey);
+                this.sendHotkey(hotkey);
+            }
+        });
     }
     toggleFullscreen() {
         const canvasElement = this.canvas()?.nativeElement;
@@ -250,13 +264,11 @@ class KVMComponent {
             }
             this.renderer.removeClass(canvasElement, 'fullscreen');
         }
-        if (this.mouseHelper != null) {
-            this.mouseHelper.resetOffsets();
-        }
+        this.mouseHelper?.resetOffsets();
     }
     instantiate() {
         const canvas = this.canvas();
-        this.context = canvas?.nativeElement.getContext('2d');
+        this.context = canvas?.nativeElement.getContext('2d') || null;
         const config = {
             mode: 'kvm',
             protocol: Protocol.KVM,
@@ -283,12 +295,11 @@ class KVMComponent {
         this.redirector.onError = this.onRedirectorError.bind(this);
         this.module.onSend = this.redirector.send.bind(this.redirector);
         this.module.onProcessData = this.dataProcessor.processData.bind(this.dataProcessor);
-        this.module.bpp = this.selected;
-        this.mouseMove = fromEvent(canvas?.nativeElement, 'mousemove');
-        this.mouseMove.pipe(throttleTime(200)).subscribe((event) => {
-            if (this.mouseHelper != null) {
-                this.mouseHelper.mousemove(event);
-            }
+        this.module.bpp = this.selected();
+        this.mouseMove$ = fromEvent(canvas?.nativeElement, 'mousemove')
+            .pipe(throttleTime(200), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.mouseHelper?.mousemove(event);
         });
     }
     onRedirectorError() {
@@ -301,9 +312,9 @@ class KVMComponent {
         }, 4000);
     }
     autoConnect() {
-        if (this.redirector != null) {
+        if (this.redirector) {
             this.redirector.start(WebSocket);
-            this.keyboardHelper.GrabKeyInput();
+            this.keyboardHelper?.GrabKeyInput();
         }
     }
     onEncodingChange() {
@@ -312,51 +323,200 @@ class KVMComponent {
             this.autoConnect();
         });
     }
+    reset() {
+        this.redirector = null;
+        this.module = null;
+        this.dataProcessor = null;
+        this.height.set(400);
+        this.width.set(400);
+        this.instantiate();
+    }
+    stopKvm() {
+        this.redirector?.stop();
+        this.keyboardHelper?.UnGrabKeyInput();
+        this.reset();
+    }
     onMouseup(event) {
-        if (this.mouseHelper != null) {
-            this.mouseHelper.mouseup(event);
-        }
+        this.mouseHelper?.mouseup(event);
     }
     onMousedown(event) {
-        if (this.mouseHelper != null) {
-            this.mouseHelper.mousedown(event);
-        }
+        this.mouseHelper?.mousedown(event);
     }
     onMousemove(event) {
-        if (this.mouseHelper != null) {
-            this.mouseHelper.mousemove(event);
+        this.mouseHelper?.mousemove(event);
+    }
+    sendHotkey(hotKeyType) {
+        if (!this.keyboardHelper) {
+            console.warn('KVMComponent: Cannot send hotkey - keyboard helper not available');
+            return;
+        }
+        const keySequence = this.getKeySequence(hotKeyType);
+        if (keySequence?.keys) {
+            console.log('KVMComponent: Sending hotkey sequence for', hotKeyType);
+            // Send each key in the sequence with a small delay
+            keySequence.keys.forEach((key, index) => {
+                setTimeout(() => {
+                    // Use the KeyboardHelper's existing handleKeyEvent method
+                    // 0 = Up, 1 = Down (from the UpDown enum)
+                    const upDown = key.down ? 1 : 0;
+                    // Create a mock keyboard event with the key code
+                    const mockEvent = {
+                        keyCode: key.code,
+                        preventDefault: () => { },
+                        stopPropagation: () => { }
+                    };
+                    // Use the existing handleKeyEvent method
+                    this.keyboardHelper.handleKeyEvent(upDown, mockEvent);
+                }, index * this.KEY_SEQUENCE_DELAY_MS); // delay between keys
+            });
+        }
+    }
+    getKeySequence(hotKeyType) {
+        // Based on the KeyBoardHelper, these are the key codes for various combinations
+        switch (hotKeyType) {
+            case 'ctrl-alt-del':
+                return {
+                    keys: [
+                        { code: 17, down: true }, // Ctrl down (JS keyCode)
+                        { code: 18, down: true }, // Alt down (JS keyCode)
+                        { code: 46, down: true }, // Delete down (JS keyCode)
+                        { code: 46, down: false }, // Delete up (JS keyCode)
+                        { code: 18, down: false }, // Alt up (JS keyCode)
+                        { code: 17, down: false } // Ctrl up (JS keyCode)
+                    ]
+                };
+            case 'alt-tab':
+                return {
+                    keys: [
+                        { code: 18, down: true }, // Alt down (JS keyCode)
+                        { code: 9, down: true }, // Tab down (JS keyCode)
+                        { code: 9, down: false }, // Tab up (JS keyCode)
+                        { code: 18, down: false } // Alt up (JS keyCode)
+                    ]
+                };
+            case 'alt-release':
+                return {
+                    keys: [
+                        { code: 18, down: false } // Alt up (JS keyCode)
+                    ]
+                };
+            case 'windows':
+                return {
+                    keys: [
+                        { code: 0xffe7, down: true }, // Windows key down
+                        { code: 0xffe7, down: false } // Windows key up
+                    ]
+                };
+            case 'windows-l':
+                return {
+                    keys: [
+                        { code: 0xffe7, down: true }, // Windows down
+                        { code: 108, down: true }, // L down
+                        { code: 108, down: false }, // L up
+                        { code: 0xffe7, down: false } // Windows up
+                    ]
+                };
+            case 'windows-r':
+                return {
+                    keys: [
+                        { code: 0xffe7, down: true }, // Windows down
+                        { code: 82, down: true }, // R down
+                        { code: 82, down: false }, // R up
+                        { code: 0xffe7, down: false } // Windows up
+                    ]
+                };
+            case 'windows-up':
+                return {
+                    keys: [
+                        { code: 0xffe7, down: true }, // Windows down
+                        { code: 0xff52, down: true }, // Up arrow down
+                        { code: 0xff52, down: false }, // Up arrow up
+                        { code: 0xffe7, down: false } // Windows up
+                    ]
+                };
+            case 'windows-down':
+                return {
+                    keys: [
+                        { code: 0xffe7, down: true }, // Windows down
+                        { code: 0xff54, down: true }, // Down arrow down
+                        { code: 0xff54, down: false }, // Down arrow up
+                        { code: 0xffe7, down: false } // Windows up
+                    ]
+                };
+            case 'windows-left':
+                return {
+                    keys: [
+                        { code: 0xffe7, down: true }, // Windows down
+                        { code: 0xff51, down: true }, // Left arrow down
+                        { code: 0xff51, down: false }, // Left arrow up
+                        { code: 0xffe7, down: false } // Windows up
+                    ]
+                };
+            case 'windows-right':
+                return {
+                    keys: [
+                        { code: 0xffe7, down: true }, // Windows down
+                        { code: 0xff53, down: true }, // Right arrow down
+                        { code: 0xff53, down: false }, // Right arrow up
+                        { code: 0xffe7, down: false } // Windows up
+                    ]
+                };
+            case 'alt-f4':
+                return {
+                    keys: [
+                        { code: 0xffe9, down: true }, // Alt down
+                        { code: 0xffc1, down: true }, // F4 down (F1 = 0xffbe, so F4 = 0xffc1)
+                        { code: 0xffc1, down: false }, // F4 up
+                        { code: 0xffe9, down: false } // Alt up
+                    ]
+                };
+            case 'ctrl-w':
+                return {
+                    keys: [
+                        { code: 0xffe3, down: true }, // Ctrl down
+                        { code: 87, down: true }, // W down
+                        { code: 87, down: false }, // W up
+                        { code: 0xffe3, down: false } // Ctrl up
+                    ]
+                };
+            default:
+                return null;
         }
     }
     ngOnDestroy() {
+        this.mouseMove$?.unsubscribe();
         this.stopKvm();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: KVMComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.13", type: KVMComponent, isStandalone: true, selector: "amt-kvm", inputs: { isFullscreen: { classPropertyName: "isFullscreen", publicName: "isFullscreen", isSignal: true, isRequired: false, transformFunction: null }, mpsServer: { classPropertyName: "mpsServer", publicName: "mpsServer", isSignal: true, isRequired: false, transformFunction: null }, authToken: { classPropertyName: "authToken", publicName: "authToken", isSignal: true, isRequired: false, transformFunction: null }, deviceId: { classPropertyName: "deviceId", publicName: "deviceId", isSignal: true, isRequired: false, transformFunction: null }, deviceConnection: { classPropertyName: "deviceConnection", publicName: "deviceConnection", isSignal: true, isRequired: false, transformFunction: null }, selectedEncoding: { classPropertyName: "selectedEncoding", publicName: "selectedEncoding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deviceStatus: "deviceStatus" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "device", first: true, predicate: ["device"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n  <canvas\n    class=\"canvas\"\n    #canvas\n    [width]=\"width\"\n    [height]=\"height\"\n    oncontextmenu=\"return false\"\n    (mouseup)=\"onMouseup($event)\"\n    (mousedown)=\"onMousedown($event)\"\n    (mousemove)=\"onMousemove($event)\"></canvas>\n</div>\n", styles: [".canvas{max-height:80%;max-width:100%}canvas.fullscreen{height:100vh!important}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: KVMComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.2", type: KVMComponent, isStandalone: true, selector: "amt-kvm", inputs: { isFullscreen: { classPropertyName: "isFullscreen", publicName: "isFullscreen", isSignal: true, isRequired: false, transformFunction: null }, mpsServer: { classPropertyName: "mpsServer", publicName: "mpsServer", isSignal: true, isRequired: false, transformFunction: null }, authToken: { classPropertyName: "authToken", publicName: "authToken", isSignal: true, isRequired: false, transformFunction: null }, deviceId: { classPropertyName: "deviceId", publicName: "deviceId", isSignal: true, isRequired: false, transformFunction: null }, deviceConnection: { classPropertyName: "deviceConnection", publicName: "deviceConnection", isSignal: true, isRequired: false, transformFunction: null }, selectedEncoding: { classPropertyName: "selectedEncoding", publicName: "selectedEncoding", isSignal: true, isRequired: false, transformFunction: null }, selectedHotkey: { classPropertyName: "selectedHotkey", publicName: "selectedHotkey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deviceStatus: "deviceStatus" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "device", first: true, predicate: ["device"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n  <canvas\n    class=\"canvas\"\n    #canvas\n    [width]=\"width\"\n    [height]=\"height\"\n    oncontextmenu=\"return false\"\n    (mouseup)=\"onMouseup($event)\"\n    (mousedown)=\"onMousedown($event)\"\n    (mousemove)=\"onMousemove($event)\"></canvas>\n</div>\n", styles: [".canvas{max-height:80%;max-width:100%}canvas.fullscreen{height:100vh!important}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: KVMComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: KVMComponent, decorators: [{
             type: Component,
             args: [{ selector: 'amt-kvm', template: "<div>\n  <canvas\n    class=\"canvas\"\n    #canvas\n    [width]=\"width\"\n    [height]=\"height\"\n    oncontextmenu=\"return false\"\n    (mouseup)=\"onMouseup($event)\"\n    (mousedown)=\"onMousedown($event)\"\n    (mousemove)=\"onMousemove($event)\"></canvas>\n</div>\n", styles: [".canvas{max-height:80%;max-width:100%}canvas.fullscreen{height:100vh!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class IDERComponent {
     constructor() {
+        this.destroyRef = inject(DestroyRef);
         this.deviceState = 0;
         this.deviceStatus = output();
         this.iderData = output();
-        this.deviceConnection = input(new EventEmitter());
-        this.cdrom = input(null);
-        this.floppy = input(null);
-        this.mpsServer = input('');
-        this.authToken = input('');
-        this.deviceId = input('');
+        this.deviceConnection = input(false, ...(ngDevMode ? [{ debugName: "deviceConnection" }] : []));
+        this.cdrom = input(null, ...(ngDevMode ? [{ debugName: "cdrom" }] : []));
+        this.floppy = input(null, ...(ngDevMode ? [{ debugName: "floppy" }] : []));
+        this.mpsServer = input('', ...(ngDevMode ? [{ debugName: "mpsServer" }] : []));
+        this.authToken = input('', ...(ngDevMode ? [{ debugName: "authToken" }] : []));
+        this.deviceId = input('', ...(ngDevMode ? [{ debugName: "deviceId" }] : []));
         this.onConnectionStateChange = (redirector, state) => {
             this.deviceStatus.emit(state);
         };
-    }
-    ngOnInit() {
-        this.deviceConnection().subscribe((data) => {
-            if (data) {
-                this.init();
+        // React to deviceConnection changes
+        effect(() => {
+            const connected = this.deviceConnection();
+            if (connected) {
+                if (this.redirector == null) {
+                    this.init();
+                }
             }
             else {
                 this.stopIder();
@@ -427,7 +587,7 @@ class IDERComponent {
         });
     }
     stopIder() {
-        if (this.redirector !== null) {
+        if (this.redirector != null) {
             this.redirector.stop();
             this.cleanup();
         }
@@ -441,13 +601,13 @@ class IDERComponent {
             this.ider.stop();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: IDERComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.13", type: IDERComponent, isStandalone: true, selector: "amt-ider", inputs: { deviceConnection: { classPropertyName: "deviceConnection", publicName: "deviceConnection", isSignal: true, isRequired: false, transformFunction: null }, cdrom: { classPropertyName: "cdrom", publicName: "cdrom", isSignal: true, isRequired: false, transformFunction: null }, floppy: { classPropertyName: "floppy", publicName: "floppy", isSignal: true, isRequired: false, transformFunction: null }, mpsServer: { classPropertyName: "mpsServer", publicName: "mpsServer", isSignal: true, isRequired: false, transformFunction: null }, authToken: { classPropertyName: "authToken", publicName: "authToken", isSignal: true, isRequired: false, transformFunction: null }, deviceId: { classPropertyName: "deviceId", publicName: "deviceId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deviceStatus: "deviceStatus", iderData: "iderData" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: IDERComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.2", type: IDERComponent, isStandalone: true, selector: "amt-ider", inputs: { deviceConnection: { classPropertyName: "deviceConnection", publicName: "deviceConnection", isSignal: true, isRequired: false, transformFunction: null }, cdrom: { classPropertyName: "cdrom", publicName: "cdrom", isSignal: true, isRequired: false, transformFunction: null }, floppy: { classPropertyName: "floppy", publicName: "floppy", isSignal: true, isRequired: false, transformFunction: null }, mpsServer: { classPropertyName: "mpsServer", publicName: "mpsServer", isSignal: true, isRequired: false, transformFunction: null }, authToken: { classPropertyName: "authToken", publicName: "authToken", isSignal: true, isRequired: false, transformFunction: null }, deviceId: { classPropertyName: "deviceId", publicName: "deviceId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deviceStatus: "deviceStatus", iderData: "iderData" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: IDERComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.2", ngImport: i0, type: IDERComponent, decorators: [{
             type: Component,
             args: [{ selector: 'amt-ider', template: '' }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /*********************************************************************
  * Copyright (c) Intel Corporation 2023