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

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

@@ -1,649 +1,1105 @@
-import * as i0 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';
-
-/*********************************************************************
- * Copyright (c) Intel Corporation 2023
- * SPDX-License-Identifier: Apache-2.0
- **********************************************************************/
-class TerminalComponent {
-    constructor() {
-        // 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, ...(ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []));
-        this.handleKeyPress = output();
-    }
-    ngOnInit() {
-        const term = this.term();
-        if (term == null)
-            throw new Error('Terminal not found');
-        this.container = document.getElementById('terminal');
-        if (this.container == null)
-            throw new Error('Container not found');
-        term.open(this.container);
-        term.onKey(({ key, domEvent }) => {
-            domEvent.preventDefault();
-            if (domEvent.ctrlKey && domEvent.key === 'c') {
-                const termValue = this.term();
-                if (termValue.hasSelection()) {
-                    navigator.clipboard
-                        .writeText(termValue.getSelection())
-                        .then(() => { })
-                        .catch((err) => {
-                        console.error('Failed to copy to clipboard', err);
-                    });
-                }
-                else {
-                    // Send interrupt signal (SIGINT) to terminal
-                    termValue.write('\x03'); // Sends Ctrl + C (ASCII code 03)
-                }
-                // Prevent the default browser behavior (like opening menus)
-                return false;
-            }
-            if (domEvent.ctrlKey && domEvent.key === 'v') {
-                navigator.clipboard
-                    .readText()
-                    .then((text) => {
-                    this.handleKeyPress.emit(text);
-                })
-                    .catch((err) => {
-                    console.error('Failed to read clipboard', err);
-                });
-                return false;
-            }
-            this.handleKeyPress.emit(key);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: TerminalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", 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: "21.2.21", ngImport: i0, type: TerminalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'amt-terminal', template: "<div id=\"terminal\" class=\"xtermDisplay\" style=\"width: fit-content\"></div>\n" }]
-        }], propDecorators: { term: [{ type: i0.Input, args: [{ isSignal: true, alias: "term", required: false }] }], handleKeyPress: [{ type: i0.Output, args: ["handleKeyPress"] }] } });
-
-/*********************************************************************
- * Copyright (c) Intel Corporation 2023
- * SPDX-License-Identifier: Apache-2.0
- **********************************************************************/
-class SOLComponent {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.deviceState = 0;
-        this.deviceStatus = output();
-        this.deviceConnection = input(false, ...(ngDevMode ? [{ debugName: "deviceConnection" }] : /* 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 */ []));
-        // React to deviceConnection changes
-        effect(() => {
-            const connected = this.deviceConnection();
-            if (connected) {
-                if (this.redirector == null) {
-                    this.instantiate();
-                }
-                this.startSol();
-            }
-            else if (this.redirector != null) {
-                this.stopSol();
-            }
-        });
-    }
-    instantiate() {
-        this.terminal = new AmtTerminal();
-        this.dataProcessor = new TerminalDataProcessor(this.terminal);
-        const config = {
-            mode: 'sol',
-            protocol: Protocol.SOL,
-            fr: new FileReader(),
-            host: this.deviceId(),
-            port: 16994,
-            user: '',
-            pass: '',
-            tls: 0,
-            tls1only: 0,
-            authToken: this.authToken(),
-            server: this.mpsServer()
-        };
-        this.redirector = new AMTRedirector(config);
-        this.terminal.onSend = this.redirector.send.bind(this.redirector);
-        this.redirector.onNewState = this.terminal.StateChange.bind(this.terminal);
-        this.redirector.onStateChanged = this.onTerminalStateChange.bind(this);
-        this.redirector.onProcessData = this.dataProcessor.processData.bind(this);
-        this.dataProcessor.processDataToXterm = this.handleWriteToXterm.bind(this);
-        this.dataProcessor.clearTerminal = this.handleClearTerminal.bind(this);
-        this.term = new Terminal({
-            rows: 30,
-            cols: 100,
-            cursorStyle: 'block',
-            fontWeight: 'bold'
-        });
-    }
-    handleKeyPress(domEvent) {
-        this.terminal?.TermSendKeys(domEvent);
-    }
-    handleClearTerminal() {
-        this.term?.reset();
-    }
-    handleWriteToXterm(str) {
-        this.term?.write(str);
-    }
-    onTerminalStateChange(redirector, state) {
-        this.deviceStatus.emit(state);
-        this.deviceState = state;
-    }
-    startSol() {
-        if (this.redirector != null) {
-            this.redirector.start(WebSocket);
-        }
-    }
-    stopSol() {
-        if (this.redirector != null) {
-            this.redirector.stop();
-            this.handleClearTerminal();
-            this.term?.dispose();
-            this.cleanup();
-        }
-    }
-    cleanup() {
-        ;
-        this.terminal = null;
-        this.redirector = null;
-        this.dataProcessor = null;
-        this.term = null;
-    }
-    ngOnDestroy() {
-        this.stopSol();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: SOLComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", 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: "21.2.21", 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: () => [], propDecorators: { deviceStatus: [{ type: i0.Output, args: ["deviceStatus"] }], deviceConnection: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceConnection", 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 }] }] } });
-
-/*********************************************************************
- * 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 }] }] } });
-
-class IDERComponent {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.deviceState = 0;
-        this.deviceStatus = output();
-        this.iderData = output();
-        this.deviceConnection = input(false, ...(ngDevMode ? [{ debugName: "deviceConnection" }] : /* istanbul ignore next */ []));
-        this.cdrom = input(null, ...(ngDevMode ? [{ debugName: "cdrom" }] : /* istanbul ignore next */ []));
-        this.floppy = input(null, ...(ngDevMode ? [{ debugName: "floppy" }] : /* 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.onConnectionStateChange = (redirector, state) => {
-            this.deviceStatus.emit(state);
-        };
-        // React to deviceConnection changes
-        effect(() => {
-            const connected = this.deviceConnection();
-            if (connected) {
-                if (this.redirector == null) {
-                    this.init();
-                }
-            }
-            else {
-                this.stopIder();
-            }
-        });
-    }
-    init() {
-        this.instantiate();
-        setTimeout(() => {
-            this.startIder();
-        }, 4000);
-    }
-    startIder() {
-        if (this.redirector != null) {
-            this.redirector.start(WebSocket);
-        }
-    }
-    instantiate() {
-        const config = {
-            mode: 'ider',
-            protocol: Protocol.IDER,
-            fr: new FileReader(),
-            host: this.deviceId(),
-            port: 16994,
-            user: '',
-            pass: '',
-            tls: 0,
-            tls1only: 0,
-            authToken: this.authToken(),
-            server: this.mpsServer()
-        };
-        this.redirector = new AMTRedirector(config);
-        this.ider = new AMTIDER(this.redirector, this.cdrom(), this.floppy());
-        this.redirector.onNewState = this.ider.stateChange.bind(this.ider);
-        this.redirector.onStateChanged = this.onConnectionStateChange.bind(this);
-        this.redirector.onProcessData = this.ider.processData.bind(this.ider);
-        this.ider.sectorStats = this.iderSectorStats.bind(this);
-    }
-    iderSectorStats(mode, dev, total, start, len) {
-        if (this.ider == null) {
-            return;
-        }
-        if (mode === 1) {
-            if (dev === 0) {
-                // Floppy
-                this.ider.floppyRead += len * 512;
-            }
-            else {
-                // CD-ROM
-                this.ider.cdromRead += len * 2048;
-            }
-        }
-        else {
-            if (dev === 0) {
-                // Floppy
-                this.ider.floppyWrite += len * 512;
-            }
-            else {
-                // CD-ROM
-                this.ider.cdromWrite += len * 2048;
-            }
-        }
-        this.iderData.emit({
-            floppyRead: this.ider.floppyRead,
-            cdromRead: this.ider.cdromRead,
-            floppyWrite: this.ider.floppyWrite,
-            cdromWrite: this.ider.cdromWrite
-        });
-    }
-    stopIder() {
-        if (this.redirector != null) {
-            this.redirector.stop();
-            this.cleanup();
-        }
-    }
-    cleanup() {
-        this.redirector = null;
-        this.ider = null;
-    }
-    ngOnDestroy() {
-        if (this.ider != null) {
-            this.ider.stop();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: IDERComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.21", 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: "21.2.21", ngImport: i0, type: IDERComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'amt-ider', template: '' }]
-        }], ctorParameters: () => [], propDecorators: { deviceStatus: [{ type: i0.Output, args: ["deviceStatus"] }], iderData: [{ type: i0.Output, args: ["iderData"] }], deviceConnection: [{ type: i0.Input, args: [{ isSignal: true, alias: "deviceConnection", required: false }] }], cdrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "cdrom", required: false }] }], floppy: [{ type: i0.Input, args: [{ isSignal: true, alias: "floppy", 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 }] }] } });
-
-/*********************************************************************
- * Copyright (c) Intel Corporation 2023
- * SPDX-License-Identifier: Apache-2.0
- **********************************************************************/
-/*
- * Public API Surface
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Renderer2, ViewEncapsulation, effect, inject, input, output, signal, viewChild } from "@angular/core";
+import { Terminal } from "@xterm/xterm";
+import { AMTDesktop, AMTIDER, AMTKvmDataRedirector, AMTRedirector, AmtTerminal, DataProcessor, KeyBoardHelper, MouseHelper, Protocol, TerminalDataProcessor } from "@device-management-toolkit/ui-toolkit/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { fromEvent, timer } from "rxjs";
+import { throttleTime } from "rxjs/operators";
+var TerminalComponent = class TerminalComponent {
+	constructor() {
+		this.term = input.required(...ngDevMode ? [{ debugName: "term" }] : /* istanbul ignore next */ []);
+		this.handleKeyPress = output();
+		this.container = null;
+	}
+	ngOnInit() {
+		const term = this.term();
+		if (term == null) throw new Error("Terminal not found");
+		this.container = document.getElementById("terminal");
+		if (this.container == null) throw new Error("Container not found");
+		term.open(this.container);
+		term.onKey(({ key, domEvent }) => {
+			domEvent.preventDefault();
+			if (domEvent.ctrlKey && domEvent.key === "c") {
+				const termValue = this.term();
+				if (termValue.hasSelection()) navigator.clipboard.writeText(termValue.getSelection()).then(() => {}).catch((err) => {
+					console.error("Failed to copy to clipboard", err);
+				});
+				else termValue.write("");
+				return false;
+			}
+			if (domEvent.ctrlKey && domEvent.key === "v") {
+				navigator.clipboard.readText().then((text) => {
+					this.handleKeyPress.emit(text);
+				}).catch((err) => {
+					console.error("Failed to read clipboard", err);
+				});
+				return false;
+			}
+			this.handleKeyPress.emit(key);
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TerminalComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: TerminalComponent,
+			isStandalone: true,
+			selector: "amt-terminal",
+			inputs: { term: {
+				classPropertyName: "term",
+				publicName: "term",
+				isSignal: true,
+				isRequired: true,
+				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: "22.2.2",
+	ngImport: i0,
+	type: TerminalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "amt-terminal",
+			template: "<div id=\"terminal\" class=\"xtermDisplay\" style=\"width: fit-content\"></div>\n"
+		}]
+	}],
+	propDecorators: {
+		term: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "term",
+				required: true
+			}]
+		}],
+		handleKeyPress: [{
+			type: i0.Output,
+			args: ["handleKeyPress"]
+		}]
+	}
+});
+var SOLComponent = class SOLComponent {
+	constructor() {
+		this.destroyRef = inject(DestroyRef);
+		this.terminal = null;
+		this.term = null;
+		this.redirector = null;
+		this.dataProcessor = null;
+		this._deviceState = signal(0, ...ngDevMode ? [{ debugName: "_deviceState" }] : /* istanbul ignore next */ []);
+		this.deviceState = this._deviceState.asReadonly();
+		this.deviceStatus = output();
+		this.deviceConnection = input(false, ...ngDevMode ? [{ debugName: "deviceConnection" }] : /* 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 */ []);
+		effect(() => {
+			if (this.deviceConnection()) {
+				if (this.redirector == null) this.instantiate();
+				this.startSol();
+			} else if (this.redirector != null) this.stopSol();
+		});
+	}
+	instantiate() {
+		this.terminal = new AmtTerminal();
+		this.dataProcessor = new TerminalDataProcessor(this.terminal);
+		const config = {
+			mode: "sol",
+			protocol: Protocol.SOL,
+			fr: new FileReader(),
+			host: this.deviceId(),
+			port: 16994,
+			user: "",
+			pass: "",
+			tls: 0,
+			tls1only: 0,
+			authToken: this.authToken(),
+			server: this.mpsServer()
+		};
+		this.redirector = new AMTRedirector(config);
+		this.terminal.onSend = this.redirector.send.bind(this.redirector);
+		this.redirector.onNewState = this.terminal.StateChange.bind(this.terminal);
+		this.redirector.onStateChanged = this.onTerminalStateChange.bind(this);
+		this.redirector.onProcessData = this.dataProcessor.processData.bind(this);
+		this.dataProcessor.processDataToXterm = this.handleWriteToXterm.bind(this);
+		this.dataProcessor.clearTerminal = this.handleClearTerminal.bind(this);
+		this.term = new Terminal({
+			rows: 30,
+			cols: 100,
+			cursorStyle: "block",
+			fontWeight: "bold"
+		});
+	}
+	handleKeyPress(domEvent) {
+		this.terminal?.TermSendKeys(domEvent);
+	}
+	handleClearTerminal() {
+		this.term?.reset();
+	}
+	handleWriteToXterm(str) {
+		this.term?.write(str);
+	}
+	onTerminalStateChange(redirector, state) {
+		this.deviceStatus.emit(state);
+		this._deviceState.set(state);
+	}
+	startSol() {
+		if (this.redirector != null) this.redirector.start(WebSocket);
+	}
+	stopSol() {
+		if (this.redirector != null) {
+			this.redirector.stop();
+			this.handleClearTerminal();
+			this.term?.dispose();
+			this.cleanup();
+		}
+	}
+	cleanup() {
+		this.terminal = null;
+		this.redirector = null;
+		this.dataProcessor = null;
+		this.term = null;
+	}
+	ngOnDestroy() {
+		this.stopSol();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: SOLComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.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 && term) {\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: "22.2.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 && term) {\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: () => [],
+	propDecorators: {
+		deviceStatus: [{
+			type: i0.Output,
+			args: ["deviceStatus"]
+		}],
+		deviceConnection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deviceConnection",
+				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
+			}]
+		}]
+	}
+});
+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
+			}]
+		}]
+	}
+});
+var IDERComponent = class IDERComponent {
+	constructor() {
+		this.destroyRef = inject(DestroyRef);
+		this.redirector = null;
+		this.ider = null;
+		this.data = null;
+		this._deviceState = signal(0, ...ngDevMode ? [{ debugName: "_deviceState" }] : /* istanbul ignore next */ []);
+		this.deviceState = this._deviceState.asReadonly();
+		this.deviceStatus = output();
+		this.iderData = output();
+		this.deviceConnection = input(false, ...ngDevMode ? [{ debugName: "deviceConnection" }] : /* istanbul ignore next */ []);
+		this.cdrom = input(null, ...ngDevMode ? [{ debugName: "cdrom" }] : /* istanbul ignore next */ []);
+		this.floppy = input(null, ...ngDevMode ? [{ debugName: "floppy" }] : /* 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.onConnectionStateChange = (redirector, state) => {
+			this.deviceStatus.emit(state);
+			this._deviceState.set(state);
+		};
+		effect(() => {
+			if (this.deviceConnection()) {
+				if (this.redirector == null) this.init();
+			} else this.stopIder();
+		});
+	}
+	init() {
+		this.instantiate();
+		setTimeout(() => {
+			this.startIder();
+		}, 4e3);
+	}
+	startIder() {
+		if (this.redirector != null) this.redirector.start(WebSocket);
+	}
+	instantiate() {
+		const config = {
+			mode: "ider",
+			protocol: Protocol.IDER,
+			fr: new FileReader(),
+			host: this.deviceId(),
+			port: 16994,
+			user: "",
+			pass: "",
+			tls: 0,
+			tls1only: 0,
+			authToken: this.authToken(),
+			server: this.mpsServer()
+		};
+		this.redirector = new AMTRedirector(config);
+		this.ider = new AMTIDER(this.redirector, this.cdrom(), this.floppy());
+		this.redirector.onNewState = this.ider.stateChange.bind(this.ider);
+		this.redirector.onStateChanged = this.onConnectionStateChange.bind(this);
+		this.redirector.onProcessData = this.ider.processData.bind(this.ider);
+		this.ider.sectorStats = this.iderSectorStats.bind(this);
+	}
+	iderSectorStats(mode, dev, total, start, len) {
+		if (this.ider == null) return;
+		if (mode === 1) {
+			if (dev === 0) this.ider.floppyRead += len * 512;
+			else this.ider.cdromRead += len * 2048;
+		} else if (dev === 0) this.ider.floppyWrite += len * 512;
+		else this.ider.cdromWrite += len * 2048;
+		this.iderData.emit({
+			floppyRead: this.ider.floppyRead,
+			cdromRead: this.ider.cdromRead,
+			floppyWrite: this.ider.floppyWrite,
+			cdromWrite: this.ider.cdromWrite
+		});
+	}
+	stopIder() {
+		if (this.redirector != null) {
+			this.redirector.stop();
+			this.cleanup();
+		}
+	}
+	cleanup() {
+		this.redirector = null;
+		this.ider = null;
+	}
+	ngOnDestroy() {
+		if (this.ider != null) this.ider.stop();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: IDERComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.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: "22.2.2",
+	ngImport: i0,
+	type: IDERComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "amt-ider",
+			template: ""
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		deviceStatus: [{
+			type: i0.Output,
+			args: ["deviceStatus"]
+		}],
+		iderData: [{
+			type: i0.Output,
+			args: ["iderData"]
+		}],
+		deviceConnection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deviceConnection",
+				required: false
+			}]
+		}],
+		cdrom: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cdrom",
+				required: false
+			}]
+		}],
+		floppy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "floppy",
+				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
+			}]
+		}]
+	}
+});
 export { IDERComponent, KVMComponent, SOLComponent };
-//# sourceMappingURL=device-management-toolkit-ui-toolkit-angular.mjs.map
+
+//# sourceMappingURL=device-management-toolkit-ui-toolkit-angular.mjs.map