@device-management-toolkit/ui-toolkit-angular 11.1.8 → 12.0.0

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

@@ -1,372 +1,587 @@
-import * as i0 from '@angular/core';
-import { inject, Renderer2, DestroyRef, viewChild, signal, input, output, effect, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Protocol, AMTKvmDataRedirector, AMTDesktop, DataProcessor, MouseHelper, KeyBoardHelper } from '@device-management-toolkit/ui-toolkit/core';
-import { fromEvent, timer } from 'rxjs';
-import { throttleTime } from 'rxjs/operators';
-
-/*********************************************************************
- * Copyright (c) Intel Corporation 2023
- * SPDX-License-Identifier: Apache-2.0
- **********************************************************************/
-class KVMComponent {
-    constructor() {
-        this.renderer = inject(Renderer2);
-        this.destroyRef = inject(DestroyRef);
-        this.KEY_SEQUENCE_DELAY_MS = 10;
-        this.canvas = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
-        this.device = viewChild.required('device');
-        // Canvas properties
-        this.context = null;
-        this.width = signal(400, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-        this.height = signal(400, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-        // Input properties
-        this.isFullscreen = input(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
-        this.mpsServer = input('', ...(ngDevMode ? [{ debugName: "mpsServer" }] : /* istanbul ignore next */ []));
-        this.authToken = input('', ...(ngDevMode ? [{ debugName: "authToken" }] : /* istanbul ignore next */ []));
-        this.deviceId = input('', ...(ngDevMode ? [{ debugName: "deviceId" }] : /* istanbul ignore next */ []));
-        // Input/Output properties
-        this.deviceStatus = output();
-        this.deviceConnection = input(false, ...(ngDevMode ? [{ debugName: "deviceConnection" }] : /* istanbul ignore next */ []));
-        this.selectedEncoding = input(1, ...(ngDevMode ? [{ debugName: "selectedEncoding" }] : /* istanbul ignore next */ []));
-        this.selectedHotkey = input('', ...(ngDevMode ? [{ debugName: "selectedHotkey" }] : /* istanbul ignore next */ []));
-        // Component state
-        this.module = null;
-        this.redirector = null;
-        this.dataProcessor = null;
-        this.mouseHelper = null;
-        this.keyboardHelper = null;
-        this.selected = signal(1, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-        this.isEncodingChange = false;
-        this.encodings = [
-            { value: 1, viewValue: 'RLE 8' },
-            { value: 2, viewValue: 'RLE 16' }
-        ];
-        this.onConnectionStateChange = (redirector, state) => {
-            this.deviceStatus.emit(state);
-        };
-        effect(() => {
-            this.toggleFullscreen();
-        });
-        // React to deviceConnection changes
-        effect(() => {
-            const connected = this.deviceConnection();
-            if (connected && this.redirector == null && !this.isEncodingChange) {
-                console.log('KVMComponent: Device connected, initializing KVM...');
-                this.init();
-            }
-            else if (!connected && this.redirector != null) {
-                console.log('KVMComponent: Device disconnected, stopping KVM...');
-                this.stopKvm();
-            }
-        });
-        // 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);
-            // Set flag to prevent connection effect interference
-            if (this.redirector != null) {
-                this.isEncodingChange = true;
-                this.onEncodingChange();
-            }
-        });
-        // 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;
-        if (!canvasElement)
-            return;
-        if (this.isFullscreen()) {
-            if (canvasElement.requestFullscreen) {
-                canvasElement.requestFullscreen();
-            }
-            this.renderer.addClass(canvasElement, 'fullscreen');
-        }
-        else {
-            if (document.exitFullscreen && document.fullscreenElement != null) {
-                document.exitFullscreen();
-            }
-            this.renderer.removeClass(canvasElement, 'fullscreen');
-        }
-        this.mouseHelper?.resetOffsets();
-    }
-    instantiate() {
-        const canvas = this.canvas();
-        this.context = canvas?.nativeElement.getContext('2d') || null;
-        const config = {
-            mode: 'kvm',
-            protocol: Protocol.KVM,
-            fr: new FileReader(),
-            host: this.deviceId(),
-            port: 16994,
-            user: '',
-            pass: '',
-            tls: 0,
-            tls1only: 0,
-            authToken: this.authToken(),
-            server: this.mpsServer()
-        };
-        this.redirector = new AMTKvmDataRedirector(config);
-        this.module = new AMTDesktop(this.context);
-        this.dataProcessor = new DataProcessor(this.redirector, this.module);
-        this.mouseHelper = new MouseHelper(this.module, this.redirector, 200);
-        this.keyboardHelper = new KeyBoardHelper(this.module, this.redirector);
-        this.redirector.onProcessData = this.module.processData.bind(this.module);
-        this.redirector.onStart = this.module.start.bind(this.module);
-        this.redirector.onNewState = this.module.onStateChange.bind(this.module);
-        this.redirector.onSendKvmData = this.module.onSendKvmData.bind(this.module);
-        this.redirector.onStateChanged = this.onConnectionStateChange.bind(this);
-        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')
-            .pipe(throttleTime(200), takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.mouseHelper?.mousemove(event);
-        });
-    }
-    onRedirectorError() {
-        this.reset();
-    }
-    init() {
-        this.instantiate();
-        setTimeout(() => {
-            this.autoConnect();
-        }, 4000);
-    }
-    autoConnect() {
-        if (this.redirector) {
-            this.redirector.start(WebSocket);
-            this.keyboardHelper?.GrabKeyInput();
-        }
-    }
-    onEncodingChange() {
-        this.stopKvm();
-        timer(1000).subscribe(() => {
-            // Need to reinitialize since stopKvm() reset the redirector to null
-            this.init();
-            // Note: Parent component handles clearing isEncodingChange flag after full process
-        });
-    }
-    reset() {
-        this.redirector = null;
-        this.module = null;
-        this.dataProcessor = null;
-        this.height.set(400);
-        this.width.set(400);
-    }
-    stopKvm() {
-        this.redirector?.stop();
-        this.keyboardHelper?.UnGrabKeyInput();
-        this.reset();
-    }
-    onMouseup(event) {
-        this.mouseHelper?.mouseup(event);
-    }
-    onMousedown(event) {
-        this.mouseHelper?.mousedown(event);
-    }
-    onMousemove(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) {
-        // Check for function key patterns (alt-f1 to alt-f12, ctrl-alt-f1 to ctrl-alt-f12)
-        const altFnMatch = hotKeyType.match(/^alt-f(\d+)$/);
-        const ctrlAltFnMatch = hotKeyType.match(/^ctrl-alt-f(\d+)$/);
-        if (altFnMatch) {
-            const fnNum = parseInt(altFnMatch[1], 10);
-            return this.buildFunctionKeySequence(fnNum, false);
-        }
-        if (ctrlAltFnMatch) {
-            const fnNum = parseInt(ctrlAltFnMatch[1], 10);
-            return this.buildFunctionKeySequence(fnNum, true);
-        }
-        // Handle other hotkey 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 '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;
-        }
-    }
-    buildFunctionKeySequence(fnNum, includeCtrl) {
-        // Validate function key number (F1-F12)
-        if (fnNum < 1 || fnNum > 12) {
-            return null;
-        }
-        // Calculate function key code: F1 = 0xffbe, F2 = 0xffbf, ..., F12 = 0xffc9
-        const fnKeyCode = 0xffbe + (fnNum - 1);
-        const keys = [];
-        // Add Ctrl if needed
-        if (includeCtrl) {
-            keys.push({ code: 0xffe3, down: true }); // Ctrl down
-        }
-        // Add Alt
-        keys.push({ code: 0xffe9, down: true }); // Alt down
-        // Add function key press
-        keys.push({ code: fnKeyCode, down: true }); // Fn down
-        keys.push({ code: fnKeyCode, down: false }); // Fn up
-        // Release modifiers in reverse order
-        keys.push({ code: 0xffe9, down: false }); // Alt up
-        if (includeCtrl) {
-            keys.push({ code: 0xffe3, down: false }); // Ctrl up
-        }
-        return { keys };
-    }
-    ngOnDestroy() {
-        this.mouseMove$?.unsubscribe();
-        this.stopKvm();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: KVMComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.21", 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: "21.2.21", 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: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], device: [{ type: i0.ViewChild, args: ['device', { isSignal: true }] }], isFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFullscreen", required: false }] }], mpsServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "mpsServer", required: false }] }], authToken: [{ type: i0.Input, args: [{ isSignal: true, alias: "authToken", required: false }] }], deviceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceId", required: false }] }], deviceStatus: [{ type: i0.Output, args: ["deviceStatus"] }], deviceConnection: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceConnection", required: false }] }], selectedEncoding: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEncoding", required: false }] }], selectedHotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedHotkey", required: false }] }] } });
-
-/*********************************************************************
- * Copyright (c) Intel Corporation 2023
- * SPDX-License-Identifier: Apache-2.0
- **********************************************************************/
-/*
- * Public API Surface of kvm
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Renderer2, effect, inject, input, output, signal, viewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { AMTDesktop, AMTKvmDataRedirector, DataProcessor, KeyBoardHelper, MouseHelper, Protocol } from "@device-management-toolkit/ui-toolkit/core";
+import { fromEvent, timer } from "rxjs";
+import { throttleTime } from "rxjs/operators";
+var KVMComponent = class KVMComponent {
+	constructor() {
+		this.renderer = inject(Renderer2);
+		this.destroyRef = inject(DestroyRef);
+		this.KEY_SEQUENCE_DELAY_MS = 10;
+		this.canvas = viewChild("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+		this.device = viewChild.required("device", ...ngDevMode ? [{ debugName: "device" }] : /* istanbul ignore next */ []);
+		this.context = null;
+		this.width = signal(400, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.height = signal(400, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.isFullscreen = input(false, ...ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []);
+		this.mpsServer = input("", ...ngDevMode ? [{ debugName: "mpsServer" }] : /* istanbul ignore next */ []);
+		this.authToken = input("", ...ngDevMode ? [{ debugName: "authToken" }] : /* istanbul ignore next */ []);
+		this.deviceId = input("", ...ngDevMode ? [{ debugName: "deviceId" }] : /* istanbul ignore next */ []);
+		this.deviceStatus = output();
+		this.deviceConnection = input(false, ...ngDevMode ? [{ debugName: "deviceConnection" }] : /* istanbul ignore next */ []);
+		this.selectedEncoding = input(1, ...ngDevMode ? [{ debugName: "selectedEncoding" }] : /* istanbul ignore next */ []);
+		this.selectedHotkey = input("", ...ngDevMode ? [{ debugName: "selectedHotkey" }] : /* istanbul ignore next */ []);
+		this.module = null;
+		this.redirector = null;
+		this.dataProcessor = null;
+		this.mouseHelper = null;
+		this.keyboardHelper = null;
+		this.selected = signal(1, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+		this.isEncodingChange = false;
+		this.encodings = [{
+			value: 1,
+			viewValue: "RLE 8"
+		}, {
+			value: 2,
+			viewValue: "RLE 16"
+		}];
+		this.onConnectionStateChange = (redirector, state) => {
+			this.deviceStatus.emit(state);
+		};
+		effect(() => {
+			this.toggleFullscreen();
+		});
+		effect(() => {
+			const connected = this.deviceConnection();
+			if (connected && this.redirector == null && !this.isEncodingChange) {
+				console.log("KVMComponent: Device connected, initializing KVM...");
+				this.init();
+			} else if (!connected && this.redirector != null) {
+				console.log("KVMComponent: Device disconnected, stopping KVM...");
+				this.stopKvm();
+			}
+		});
+		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);
+			if (this.redirector != null) {
+				this.isEncodingChange = true;
+				this.onEncodingChange();
+			}
+		});
+		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;
+		if (!canvasElement) return;
+		if (this.isFullscreen()) {
+			if (canvasElement.requestFullscreen) canvasElement.requestFullscreen();
+			this.renderer.addClass(canvasElement, "fullscreen");
+		} else {
+			if (document.exitFullscreen && document.fullscreenElement != null) document.exitFullscreen();
+			this.renderer.removeClass(canvasElement, "fullscreen");
+		}
+		this.mouseHelper?.resetOffsets();
+	}
+	instantiate() {
+		const canvas = this.canvas();
+		this.context = canvas?.nativeElement.getContext("2d") || null;
+		const config = {
+			mode: "kvm",
+			protocol: Protocol.KVM,
+			fr: new FileReader(),
+			host: this.deviceId(),
+			port: 16994,
+			user: "",
+			pass: "",
+			tls: 0,
+			tls1only: 0,
+			authToken: this.authToken(),
+			server: this.mpsServer()
+		};
+		this.redirector = new AMTKvmDataRedirector(config);
+		this.module = new AMTDesktop(this.context);
+		this.dataProcessor = new DataProcessor(this.redirector, this.module);
+		this.mouseHelper = new MouseHelper(this.module, this.redirector, 200);
+		this.keyboardHelper = new KeyBoardHelper(this.module, this.redirector);
+		this.redirector.onProcessData = this.module.processData.bind(this.module);
+		this.redirector.onStart = this.module.start.bind(this.module);
+		this.redirector.onNewState = this.module.onStateChange.bind(this.module);
+		this.redirector.onSendKvmData = this.module.onSendKvmData.bind(this.module);
+		this.redirector.onStateChanged = this.onConnectionStateChange.bind(this);
+		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").pipe(throttleTime(200), takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+			this.mouseHelper?.mousemove(event);
+		});
+	}
+	onRedirectorError() {
+		this.reset();
+	}
+	init() {
+		this.instantiate();
+		setTimeout(() => {
+			this.autoConnect();
+		}, 4e3);
+	}
+	autoConnect() {
+		if (this.redirector) {
+			this.redirector.start(WebSocket);
+			this.keyboardHelper?.GrabKeyInput();
+		}
+	}
+	onEncodingChange() {
+		this.stopKvm();
+		timer(1e3).subscribe(() => {
+			this.init();
+		});
+	}
+	reset() {
+		this.redirector = null;
+		this.module = null;
+		this.dataProcessor = null;
+		this.height.set(400);
+		this.width.set(400);
+	}
+	stopKvm() {
+		this.redirector?.stop();
+		this.keyboardHelper?.UnGrabKeyInput();
+		this.reset();
+	}
+	onMouseup(event) {
+		this.mouseHelper?.mouseup(event);
+	}
+	onMousedown(event) {
+		this.mouseHelper?.mousedown(event);
+	}
+	onMousemove(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);
+			keySequence.keys.forEach((key, index) => {
+				setTimeout(() => {
+					const upDown = key.down ? 1 : 0;
+					const mockEvent = {
+						keyCode: key.code,
+						preventDefault: () => {},
+						stopPropagation: () => {}
+					};
+					this.keyboardHelper.handleKeyEvent(upDown, mockEvent);
+				}, index * this.KEY_SEQUENCE_DELAY_MS);
+			});
+		}
+	}
+	getKeySequence(hotKeyType) {
+		const altFnMatch = hotKeyType.match(/^alt-f(\d+)$/);
+		const ctrlAltFnMatch = hotKeyType.match(/^ctrl-alt-f(\d+)$/);
+		if (altFnMatch) {
+			const fnNum = parseInt(altFnMatch[1], 10);
+			return this.buildFunctionKeySequence(fnNum, false);
+		}
+		if (ctrlAltFnMatch) {
+			const fnNum = parseInt(ctrlAltFnMatch[1], 10);
+			return this.buildFunctionKeySequence(fnNum, true);
+		}
+		switch (hotKeyType) {
+			case "ctrl-alt-del": return { keys: [
+				{
+					code: 17,
+					down: true
+				},
+				{
+					code: 18,
+					down: true
+				},
+				{
+					code: 46,
+					down: true
+				},
+				{
+					code: 46,
+					down: false
+				},
+				{
+					code: 18,
+					down: false
+				},
+				{
+					code: 17,
+					down: false
+				}
+			] };
+			case "alt-tab": return { keys: [
+				{
+					code: 18,
+					down: true
+				},
+				{
+					code: 9,
+					down: true
+				},
+				{
+					code: 9,
+					down: false
+				},
+				{
+					code: 18,
+					down: false
+				}
+			] };
+			case "alt-release": return { keys: [{
+				code: 18,
+				down: false
+			}] };
+			case "windows": return { keys: [{
+				code: 65511,
+				down: true
+			}, {
+				code: 65511,
+				down: false
+			}] };
+			case "windows-l": return { keys: [
+				{
+					code: 65511,
+					down: true
+				},
+				{
+					code: 108,
+					down: true
+				},
+				{
+					code: 108,
+					down: false
+				},
+				{
+					code: 65511,
+					down: false
+				}
+			] };
+			case "windows-r": return { keys: [
+				{
+					code: 65511,
+					down: true
+				},
+				{
+					code: 82,
+					down: true
+				},
+				{
+					code: 82,
+					down: false
+				},
+				{
+					code: 65511,
+					down: false
+				}
+			] };
+			case "windows-up": return { keys: [
+				{
+					code: 65511,
+					down: true
+				},
+				{
+					code: 65362,
+					down: true
+				},
+				{
+					code: 65362,
+					down: false
+				},
+				{
+					code: 65511,
+					down: false
+				}
+			] };
+			case "windows-down": return { keys: [
+				{
+					code: 65511,
+					down: true
+				},
+				{
+					code: 65364,
+					down: true
+				},
+				{
+					code: 65364,
+					down: false
+				},
+				{
+					code: 65511,
+					down: false
+				}
+			] };
+			case "windows-left": return { keys: [
+				{
+					code: 65511,
+					down: true
+				},
+				{
+					code: 65361,
+					down: true
+				},
+				{
+					code: 65361,
+					down: false
+				},
+				{
+					code: 65511,
+					down: false
+				}
+			] };
+			case "windows-right": return { keys: [
+				{
+					code: 65511,
+					down: true
+				},
+				{
+					code: 65363,
+					down: true
+				},
+				{
+					code: 65363,
+					down: false
+				},
+				{
+					code: 65511,
+					down: false
+				}
+			] };
+			case "ctrl-w": return { keys: [
+				{
+					code: 65507,
+					down: true
+				},
+				{
+					code: 87,
+					down: true
+				},
+				{
+					code: 87,
+					down: false
+				},
+				{
+					code: 65507,
+					down: false
+				}
+			] };
+			default: return null;
+		}
+	}
+	buildFunctionKeySequence(fnNum, includeCtrl) {
+		if (fnNum < 1 || fnNum > 12) return null;
+		const fnKeyCode = 65470 + (fnNum - 1);
+		const keys = [];
+		if (includeCtrl) keys.push({
+			code: 65507,
+			down: true
+		});
+		keys.push({
+			code: 65513,
+			down: true
+		});
+		keys.push({
+			code: fnKeyCode,
+			down: true
+		});
+		keys.push({
+			code: fnKeyCode,
+			down: false
+		});
+		keys.push({
+			code: 65513,
+			down: false
+		});
+		if (includeCtrl) keys.push({
+			code: 65507,
+			down: false
+		});
+		return { keys };
+	}
+	ngOnDestroy() {
+		this.mouseMove$?.unsubscribe();
+		this.stopKvm();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: KVMComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.2.0",
+			version: "22.2.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: "22.2.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: () => [],
+	propDecorators: {
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}],
+		device: [{
+			type: i0.ViewChild,
+			args: ["device", { isSignal: true }]
+		}],
+		isFullscreen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isFullscreen",
+				required: false
+			}]
+		}],
+		mpsServer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mpsServer",
+				required: false
+			}]
+		}],
+		authToken: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "authToken",
+				required: false
+			}]
+		}],
+		deviceId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deviceId",
+				required: false
+			}]
+		}],
+		deviceStatus: [{
+			type: i0.Output,
+			args: ["deviceStatus"]
+		}],
+		deviceConnection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deviceConnection",
+				required: false
+			}]
+		}],
+		selectedEncoding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedEncoding",
+				required: false
+			}]
+		}],
+		selectedHotkey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedHotkey",
+				required: false
+			}]
+		}]
+	}
+});
 export { KVMComponent };
-//# sourceMappingURL=device-management-toolkit-ui-toolkit-angular-kvm.mjs.map
+
+//# sourceMappingURL=device-management-toolkit-ui-toolkit-angular-kvm.mjs.map