@cmusei/console-forge 0.20.3 → 0.20.5

package/fesm2022/cmusei-console-forge.mjs

@@ -755,6 +755,25 @@ var WmksPosition;
     WmksPosition[WmksPosition["LEFT_TOP"] = 1] = "LEFT_TOP";
 })(WmksPosition || (WmksPosition = {}));
 
+//  ===BEGIN LICENSE===
+//  Copyright 2025 Carnegie Mellon University. All rights reserved.
+//  Released under an MIT (SEI)-style license. See the LICENSE.md file for license information.
+//  ===END LICENSE===
+class UuidService {
+    get() {
+        if (!crypto) {
+            throw new Error("Failed to generate UUID: Can't resolve the `crypto` dependency in this environment.");
+        }
+        return crypto.randomUUID();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UuidService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UuidService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UuidService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 //  ===BEGIN LICENSE===
 //  Copyright 2025 Carnegie Mellon University. All rights reserved.
 //  Released under an MIT (SEI)-style license. See the LICENSE.md file for license information.
@@ -765,6 +784,7 @@ class VmWareConsoleClientService {
     logger = inject(LoggerService);
     document = inject(DOCUMENT);
     userSettings = inject(UserSettingsService);
+    uuids = inject(UuidService);
     window = inject(WINDOW);
     wmksClient;
     clientType = "vmware";
@@ -803,6 +823,10 @@ class VmWareConsoleClientService {
         if (!options.hostElement) {
             throw new Error("A host element is required to connect to a VMWare WMKS console.");
         }
+        if (!options.hostElement.id) {
+            this.logger.log(LogLevel.WARNING, "The host element is present but has no ID. VMWare's WMKS requires that it have one, so generating a dummy for now.");
+            options.hostElement.id = `cf-console-vmware-dummy-${this.uuids.get()}`;
+        }
         this.logger.log(LogLevel.DEBUG, "Connecting to WMKS...", options);
         return new Promise((resolve, reject) => {
             const wmksOptions = {
@@ -812,7 +836,7 @@ class VmWareConsoleClientService {
                 useVNCHandshake: false,
                 position: WmksPosition.CENTER
             };
-            this.logger.log(LogLevel.DEBUG, "Creating WMKS client...", wmksOptions);
+            this.logger.log(LogLevel.DEBUG, "Creating WMKS client...", options.hostElement.id, wmksOptions);
             this.wmksClient = createWmksClient(options.hostElement.id, wmksOptions)
                 .register(WmksEvents.CONNECTION_STATE_CHANGE, (ev, data) => {
                 this.logger.log(LogLevel.DEBUG, "WMKS state change", ev, data);
@@ -999,25 +1023,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-//  ===BEGIN LICENSE===
-//  Copyright 2025 Carnegie Mellon University. All rights reserved.
-//  Released under an MIT (SEI)-style license. See the LICENSE.md file for license information.
-//  ===END LICENSE===
-class UuidService {
-    get() {
-        if (!crypto) {
-            throw new Error("Failed to generate UUID: Can't resolve the `crypto` dependency in this environment.");
-        }
-        return crypto.randomUUID();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UuidService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UuidService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UuidService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 //  ===BEGIN LICENSE===
 //  Copyright 2025 Carnegie Mellon University. All rights reserved.
 //  Released under an MIT (SEI)-style license. See the LICENSE.md file for license information.
@@ -1624,7 +1629,7 @@ class ConsoleComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ConsoleComponent, isStandalone: true, selector: "cf-console", inputs: { autoConnect: { classPropertyName: "autoConnect", publicName: "autoConnect", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isViewOnly: { classPropertyName: "isViewOnly", publicName: "isViewOnly", isSignal: true, isRequired: false, transformFunction: null }, networkConfig: { classPropertyName: "networkConfig", publicName: "networkConfig", isSignal: true, isRequired: false, transformFunction: null }, toolbarComponent: { classPropertyName: "toolbarComponent", publicName: "toolbarComponent", isSignal: true, isRequired: false, transformFunction: null }, toolbarDisabled: { classPropertyName: "toolbarDisabled", publicName: "toolbarDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { connectionStatusChanged: "connectionStatusChanged", consoleClipboardUpdated: "consoleClipboardUpdated", consoleRecorded: "consoleRecorded", ctrlAltDelSent: "ctrlAltDelSent", localClipboardUpdated: "localClipboardUpdated", networkConnectionRequested: "networkConnectionRequested", networkDisconnectRequested: "networkDisconnectRequested", powerRequestSent: "powerRequestSent", reconnectRequest: "reconnectRequest", screenshotCopied: "screenshotCopied" }, providers: [
             // the console component has access to the canvas which is injected by 
             CanvasService
-        ], viewQueries: [{ propertyName: "componentContainer", first: true, predicate: ["componentContainer"], descendants: true, isSignal: true }, { propertyName: "consoleHostElement", first: true, predicate: ["consoleHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ===BEGIN LICENSE=== -->\n<!-- Copyright 2025 Carnegie Mellon University. All rights reserved. -->\n<!-- Released under an MIT (SEI)-style license. See the LICENSE.md file for license information. -->\n<!-- ===END LICENSE=== -->\n\n<div #componentContainer class=\"console-component flex\"\n    [class.console-client-type-vnc]=\"consoleClient()?.clientType == 'vnc'\"\n    [class.console-client-type-vmware]=\"consoleClient()?.clientType == 'vmware'\"\n    [class.flex-column]=\"userSettings().toolbar.dockTo === 'top' || userSettings().toolbar.dockTo === 'bottom'\">\n\n    @if (toolbarEnabled()) {\n    <cf-console-toolbar\n        [class.flex-order-1]=\"userSettings().toolbar.dockTo === 'right' || userSettings().toolbar.dockTo === 'bottom'\"\n        [consoleClient]=\"consoleClient()!\" [consoleNetworkConfig]=\"networkConfig()\" [isViewOnly]=\"isViewOnly()\"\n        (canvasRecordingFinished)=\"consoleRecorded.emit($event)\"\n        (canvasRecordingStarted)=\"handleConsoleRecordingStarted()\" [customToolbarComponent]=\"toolbarComponent()\"\n        (ctrlAltDelSent)=\"handleCtrlAltDelSent()\" (networkConnectionRequested)=\"networkConnectionRequested.emit($event)\"\n        (powerRequestSent)=\"powerRequestSent.emit($event)\"\n        (networkDisconnectRequested)=\"networkDisconnectRequested.emit($event)\"\n        (reconnectRequestSent)=\"handleReconnectRequest()\" (screenshotCopied)=\"handleScreenshotCopied($event)\"\n        (toggleFullscreen)=\"handleFullscreen()\"></cf-console-toolbar>\n    }\n\n    <div class=\"console-host-container\" [style.background]=\"consoleHostBackgroundStyle\"\n        [class.flex-order-0]=\"userSettings().toolbar.dockTo === 'right' || userSettings().toolbar.dockTo === 'bottom'\">\n        <cf-console-status [status]=\"consoleClient()?.connectionStatus()\"\n            (reconnectRequest)=\"reconnectRequest.emit(this.config())\"></cf-console-status>\n\n        <div #consoleHost [id]=\"consoleHostElementId\" class=\"console-host\" [class.recording]=\"isRecording()\"\n            [class.view-only]=\"isViewOnly()\">\n        </div>\n    </div>\n</div>\n", styles: [".console-component{max-width:100vw;max-height:100vh;width:100%;height:100%}cf-console-toolbar{display:block;flex:0 1 auto;max-height:100%;max-width:100%}cf-console-status{width:100%}:fullscreen{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}:fullscreen cf-console-toolbar{z-index:5}.console-host-container{align-items:center;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:100%;max-width:100%;justify-content:center}.console-host{max-width:100%;max-height:100%;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden}.console-host.recording{outline:4px solid #ee402e}.flex{display:flex;flex-direction:row}.flex.flex-column{flex-direction:column}.flex-order-0{order:0}.flex-order-1{order:1}.console-component.console-client-type-vmware:not(:fullscreen) ::ng-deep canvas{aspect-ratio:16/9!important;max-height:100%!important;max-width:100%!important}.console-component.console-client-type-vmware .console-host{display:flex;justify-content:center;position:relative;aspect-ratio:16/9}.console-component.console-client-type-vmware .console-host.view-only ::ng-deep canvas{cursor:not-allowed;pointer-events:none!important}\n"], dependencies: [{ kind: "component", type: ConsoleStatusComponent, selector: "cf-console-status", inputs: ["status"], outputs: ["reconnectRequest"] }, { kind: "component", type: ConsoleToolbarComponent, selector: "cf-console-toolbar", inputs: ["consoleClient", "consoleNetworkConfig", "customToolbarComponent", "isViewOnly"], outputs: ["canvasRecordingStarted", "canvasRecordingFinished", "ctrlAltDelSent", "keyboardInputSent", "networkConnectionRequested", "networkDisconnectRequested", "powerRequestSent", "reconnectRequestSent", "screenshotCopied", "toggleFullscreen"] }] });
+        ], viewQueries: [{ propertyName: "componentContainer", first: true, predicate: ["componentContainer"], descendants: true, isSignal: true }, { propertyName: "consoleHostElement", first: true, predicate: ["consoleHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ===BEGIN LICENSE=== -->\n<!-- Copyright 2025 Carnegie Mellon University. All rights reserved. -->\n<!-- Released under an MIT (SEI)-style license. See the LICENSE.md file for license information. -->\n<!-- ===END LICENSE=== -->\n\n<div #componentContainer class=\"console-component flex\"\n    [class.console-client-type-vnc]=\"consoleClient()?.clientType == 'vnc'\"\n    [class.console-client-type-vmware]=\"consoleClient()?.clientType == 'vmware'\"\n    [class.flex-column]=\"userSettings().toolbar.dockTo === 'top' || userSettings().toolbar.dockTo === 'bottom'\">\n\n    @if (toolbarEnabled()) {\n    <cf-console-toolbar\n        [class.flex-order-1]=\"userSettings().toolbar.dockTo === 'right' || userSettings().toolbar.dockTo === 'bottom'\"\n        [consoleClient]=\"consoleClient()!\" [consoleNetworkConfig]=\"networkConfig()\" [isViewOnly]=\"isViewOnly()\"\n        (canvasRecordingFinished)=\"consoleRecorded.emit($event)\"\n        (canvasRecordingStarted)=\"handleConsoleRecordingStarted()\" [customToolbarComponent]=\"toolbarComponent()\"\n        (ctrlAltDelSent)=\"handleCtrlAltDelSent()\" (networkConnectionRequested)=\"networkConnectionRequested.emit($event)\"\n        (powerRequestSent)=\"powerRequestSent.emit($event)\"\n        (networkDisconnectRequested)=\"networkDisconnectRequested.emit($event)\"\n        (reconnectRequestSent)=\"handleReconnectRequest()\" (screenshotCopied)=\"handleScreenshotCopied($event)\"\n        (toggleFullscreen)=\"handleFullscreen()\"></cf-console-toolbar>\n    }\n\n    <div class=\"console-host-container\" [style.background]=\"consoleHostBackgroundStyle\"\n        [class.flex-order-0]=\"userSettings().toolbar.dockTo === 'right' || userSettings().toolbar.dockTo === 'bottom'\">\n        <cf-console-status [status]=\"consoleClient()?.connectionStatus()\"\n            (reconnectRequest)=\"reconnectRequest.emit(this.config())\"></cf-console-status>\n\n        <div #consoleHost [id]=\"consoleHostElementId\" class=\"console-host\" [class.recording]=\"isRecording()\"\n            [class.view-only]=\"isViewOnly()\">\n        </div>\n    </div>\n</div>\n", styles: [".console-component{max-width:100vw;max-height:100vh;width:100%;height:100%}cf-console-toolbar{display:block;flex:0 1 auto;max-height:100%;max-width:100%}cf-console-status{width:100%}:fullscreen{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}:fullscreen cf-console-toolbar{z-index:5}.console-host-container{align-items:center;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:100%;max-width:100%;justify-content:center}.console-host{max-width:100%;max-height:100%;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden}.console-host.recording{outline:4px solid #ee402e}.flex{display:flex;flex-direction:row}.flex.flex-column{flex-direction:column}.flex-order-0{order:0}.flex-order-1{order:1}.console-component.console-client-type-vmware:not(:fullscreen) ::ng-deep canvas{aspect-ratio:16/9!important;max-height:100%!important;max-width:100%!important}.console-component.console-client-type-vmware .console-host{display:flex;justify-content:center;aspect-ratio:16/9;position:relative}.console-component.console-client-type-vmware .console-host.view-only ::ng-deep canvas{cursor:not-allowed;pointer-events:none!important}\n"], dependencies: [{ kind: "component", type: ConsoleStatusComponent, selector: "cf-console-status", inputs: ["status"], outputs: ["reconnectRequest"] }, { kind: "component", type: ConsoleToolbarComponent, selector: "cf-console-toolbar", inputs: ["consoleClient", "consoleNetworkConfig", "customToolbarComponent", "isViewOnly"], outputs: ["canvasRecordingStarted", "canvasRecordingFinished", "ctrlAltDelSent", "keyboardInputSent", "networkConnectionRequested", "networkDisconnectRequested", "powerRequestSent", "reconnectRequestSent", "screenshotCopied", "toggleFullscreen"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleComponent, decorators: [{
             type: Component,
@@ -1634,31 +1639,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], providers: [
                         // the console component has access to the canvas which is injected by 
                         CanvasService
-                    ], template: "<!-- ===BEGIN LICENSE=== -->\n<!-- Copyright 2025 Carnegie Mellon University. All rights reserved. -->\n<!-- Released under an MIT (SEI)-style license. See the LICENSE.md file for license information. -->\n<!-- ===END LICENSE=== -->\n\n<div #componentContainer class=\"console-component flex\"\n    [class.console-client-type-vnc]=\"consoleClient()?.clientType == 'vnc'\"\n    [class.console-client-type-vmware]=\"consoleClient()?.clientType == 'vmware'\"\n    [class.flex-column]=\"userSettings().toolbar.dockTo === 'top' || userSettings().toolbar.dockTo === 'bottom'\">\n\n    @if (toolbarEnabled()) {\n    <cf-console-toolbar\n        [class.flex-order-1]=\"userSettings().toolbar.dockTo === 'right' || userSettings().toolbar.dockTo === 'bottom'\"\n        [consoleClient]=\"consoleClient()!\" [consoleNetworkConfig]=\"networkConfig()\" [isViewOnly]=\"isViewOnly()\"\n        (canvasRecordingFinished)=\"consoleRecorded.emit($event)\"\n        (canvasRecordingStarted)=\"handleConsoleRecordingStarted()\" [customToolbarComponent]=\"toolbarComponent()\"\n        (ctrlAltDelSent)=\"handleCtrlAltDelSent()\" (networkConnectionRequested)=\"networkConnectionRequested.emit($event)\"\n        (powerRequestSent)=\"powerRequestSent.emit($event)\"\n        (networkDisconnectRequested)=\"networkDisconnectRequested.emit($event)\"\n        (reconnectRequestSent)=\"handleReconnectRequest()\" (screenshotCopied)=\"handleScreenshotCopied($event)\"\n        (toggleFullscreen)=\"handleFullscreen()\"></cf-console-toolbar>\n    }\n\n    <div class=\"console-host-container\" [style.background]=\"consoleHostBackgroundStyle\"\n        [class.flex-order-0]=\"userSettings().toolbar.dockTo === 'right' || userSettings().toolbar.dockTo === 'bottom'\">\n        <cf-console-status [status]=\"consoleClient()?.connectionStatus()\"\n            (reconnectRequest)=\"reconnectRequest.emit(this.config())\"></cf-console-status>\n\n        <div #consoleHost [id]=\"consoleHostElementId\" class=\"console-host\" [class.recording]=\"isRecording()\"\n            [class.view-only]=\"isViewOnly()\">\n        </div>\n    </div>\n</div>\n", styles: [".console-component{max-width:100vw;max-height:100vh;width:100%;height:100%}cf-console-toolbar{display:block;flex:0 1 auto;max-height:100%;max-width:100%}cf-console-status{width:100%}:fullscreen{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}:fullscreen cf-console-toolbar{z-index:5}.console-host-container{align-items:center;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:100%;max-width:100%;justify-content:center}.console-host{max-width:100%;max-height:100%;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden}.console-host.recording{outline:4px solid #ee402e}.flex{display:flex;flex-direction:row}.flex.flex-column{flex-direction:column}.flex-order-0{order:0}.flex-order-1{order:1}.console-component.console-client-type-vmware:not(:fullscreen) ::ng-deep canvas{aspect-ratio:16/9!important;max-height:100%!important;max-width:100%!important}.console-component.console-client-type-vmware .console-host{display:flex;justify-content:center;position:relative;aspect-ratio:16/9}.console-component.console-client-type-vmware .console-host.view-only ::ng-deep canvas{cursor:not-allowed;pointer-events:none!important}\n"] }]
+                    ], template: "<!-- ===BEGIN LICENSE=== -->\n<!-- Copyright 2025 Carnegie Mellon University. All rights reserved. -->\n<!-- Released under an MIT (SEI)-style license. See the LICENSE.md file for license information. -->\n<!-- ===END LICENSE=== -->\n\n<div #componentContainer class=\"console-component flex\"\n    [class.console-client-type-vnc]=\"consoleClient()?.clientType == 'vnc'\"\n    [class.console-client-type-vmware]=\"consoleClient()?.clientType == 'vmware'\"\n    [class.flex-column]=\"userSettings().toolbar.dockTo === 'top' || userSettings().toolbar.dockTo === 'bottom'\">\n\n    @if (toolbarEnabled()) {\n    <cf-console-toolbar\n        [class.flex-order-1]=\"userSettings().toolbar.dockTo === 'right' || userSettings().toolbar.dockTo === 'bottom'\"\n        [consoleClient]=\"consoleClient()!\" [consoleNetworkConfig]=\"networkConfig()\" [isViewOnly]=\"isViewOnly()\"\n        (canvasRecordingFinished)=\"consoleRecorded.emit($event)\"\n        (canvasRecordingStarted)=\"handleConsoleRecordingStarted()\" [customToolbarComponent]=\"toolbarComponent()\"\n        (ctrlAltDelSent)=\"handleCtrlAltDelSent()\" (networkConnectionRequested)=\"networkConnectionRequested.emit($event)\"\n        (powerRequestSent)=\"powerRequestSent.emit($event)\"\n        (networkDisconnectRequested)=\"networkDisconnectRequested.emit($event)\"\n        (reconnectRequestSent)=\"handleReconnectRequest()\" (screenshotCopied)=\"handleScreenshotCopied($event)\"\n        (toggleFullscreen)=\"handleFullscreen()\"></cf-console-toolbar>\n    }\n\n    <div class=\"console-host-container\" [style.background]=\"consoleHostBackgroundStyle\"\n        [class.flex-order-0]=\"userSettings().toolbar.dockTo === 'right' || userSettings().toolbar.dockTo === 'bottom'\">\n        <cf-console-status [status]=\"consoleClient()?.connectionStatus()\"\n            (reconnectRequest)=\"reconnectRequest.emit(this.config())\"></cf-console-status>\n\n        <div #consoleHost [id]=\"consoleHostElementId\" class=\"console-host\" [class.recording]=\"isRecording()\"\n            [class.view-only]=\"isViewOnly()\">\n        </div>\n    </div>\n</div>\n", styles: [".console-component{max-width:100vw;max-height:100vh;width:100%;height:100%}cf-console-toolbar{display:block;flex:0 1 auto;max-height:100%;max-width:100%}cf-console-status{width:100%}:fullscreen{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important}:fullscreen cf-console-toolbar{z-index:5}.console-host-container{align-items:center;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:100%;max-width:100%;justify-content:center}.console-host{max-width:100%;max-height:100%;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden}.console-host.recording{outline:4px solid #ee402e}.flex{display:flex;flex-direction:row}.flex.flex-column{flex-direction:column}.flex-order-0{order:0}.flex-order-1{order:1}.console-component.console-client-type-vmware:not(:fullscreen) ::ng-deep canvas{aspect-ratio:16/9!important;max-height:100%!important;max-width:100%!important}.console-component.console-client-type-vmware .console-host{display:flex;justify-content:center;aspect-ratio:16/9;position:relative}.console-component.console-client-type-vmware .console-host.view-only ::ng-deep canvas{cursor:not-allowed;pointer-events:none!important}\n"] }]
         }], ctorParameters: () => [] });
 
 class ConsoleTileComponent {
     config = input();
+    clicked = output();
     reconnectRequest = output();
     cfConfig = inject(ConsoleForgeConfig);
     consoleClientFactory = inject(ConsoleClientFactoryService);
-    consoleClientType = computed(() => this.config()?.consoleClientType || this.cfConfig.defaultConsoleClientType);
     consoleHostElement = viewChild("consoleHost");
     logger = inject(LoggerService);
     uuids = inject(UuidService);
     consoleClient;
+    consoleClientType = computed(() => this.config()?.consoleClientType || this.cfConfig.defaultConsoleClientType);
     // even though nothing here explicitly references this, every console host element needs an ID
     // because the vmware client relies on the ID, not the element reference, to create its canvas
     consoleHostElementId = "console-host-tile-" + this.uuids.get();
     constructor() {
+        // auto-connect on config
         effect(() => {
             const config = this.config();
             const consoleHostElement = this.consoleHostElement();
-            this.logger.log(LogLevel.DEBUG, "Reconnecting console tile with config", config);
-            if (config && consoleHostElement && !this.consoleClient) {
-                this.connect(consoleHostElement.nativeElement);
-                this.logger.log(LogLevel.DEBUG, "Reconnected console tile with config", config);
+            if (!config || !consoleHostElement) {
+                return;
             }
+            this.logger.log(LogLevel.DEBUG, "Reconnecting console tile with config", config);
+            this.connect(consoleHostElement.nativeElement);
+            this.logger.log(LogLevel.DEBUG, "Reconnected console tile with config", config);
         });
     }
     async connect(hostElement) {
@@ -1678,13 +1686,13 @@ class ConsoleTileComponent {
         this.consoleClient.setIsViewOnly(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: ConsoleTileComponent, isStandalone: true, selector: "cf-console-tile", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reconnectRequest: "reconnectRequest" }, viewQueries: [{ propertyName: "consoleHostElement", first: true, predicate: ["consoleHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"console-tile-component\">\n    <cf-console-status [status]=\"consoleClient?.connectionStatus()\"\n        (reconnectRequest)=\"reconnectRequest.emit(this.config())\"></cf-console-status>\n\n    <div #consoleHost [id]=\"consoleHostElementId\" class=\"console-host\">\n    </div>\n</div>\n", styles: ["::ng-deep canvas{cursor:not-allowed!important;pointer-events:none!important;width:100%!important;height:100%!important}.console-tile-component{height:100%;width:100%;max-height:100%;max-width:100%}.console-host{max-width:100%;max-height:100%;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ConsoleStatusComponent, selector: "cf-console-status", inputs: ["status"], outputs: ["reconnectRequest"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: ConsoleTileComponent, isStandalone: true, selector: "cf-console-tile", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", reconnectRequest: "reconnectRequest" }, viewQueries: [{ propertyName: "consoleHostElement", first: true, predicate: ["consoleHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"console-tile-component\">\n    <cf-console-status [status]=\"consoleClient?.connectionStatus()\"\n        (reconnectRequest)=\"reconnectRequest.emit(this.config())\"></cf-console-status>\n\n    <div #consoleHost [id]=\"consoleHostElementId\" class=\"console-host\"\n        [class.clickable]=\"consoleClient?.connectionStatus() == 'connected'\"\n        [class.console-client-type-vnc]=\"consoleClientType() == 'vnc'\"\n        [class.console-client-type-vmware]=\"consoleClientType() == 'vmware'\" (click)=\"clicked.emit(config())\">\n    </div>\n</div>\n", styles: ["::ng-deep canvas{cursor:not-allowed!important;pointer-events:none!important;width:100%!important;height:100%!important}.console-tile-component{height:100%;width:100%;max-height:100%;max-width:100%}.console-host{max-width:100%;max-height:100%;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden}.console-host.clickable{cursor:pointer}.console-host.console-client-type-vmware{position:relative}\n"], dependencies: [{ kind: "component", type: ConsoleStatusComponent, selector: "cf-console-status", inputs: ["status"], outputs: ["reconnectRequest"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleTileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cf-console-tile', imports: [
                         ConsoleStatusComponent
-                    ], template: "<div class=\"console-tile-component\">\n    <cf-console-status [status]=\"consoleClient?.connectionStatus()\"\n        (reconnectRequest)=\"reconnectRequest.emit(this.config())\"></cf-console-status>\n\n    <div #consoleHost [id]=\"consoleHostElementId\" class=\"console-host\">\n    </div>\n</div>\n", styles: ["::ng-deep canvas{cursor:not-allowed!important;pointer-events:none!important;width:100%!important;height:100%!important}.console-tile-component{height:100%;width:100%;max-height:100%;max-width:100%}.console-host{max-width:100%;max-height:100%;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden}\n"] }]
+                    ], template: "<div class=\"console-tile-component\">\n    <cf-console-status [status]=\"consoleClient?.connectionStatus()\"\n        (reconnectRequest)=\"reconnectRequest.emit(this.config())\"></cf-console-status>\n\n    <div #consoleHost [id]=\"consoleHostElementId\" class=\"console-host\"\n        [class.clickable]=\"consoleClient?.connectionStatus() == 'connected'\"\n        [class.console-client-type-vnc]=\"consoleClientType() == 'vnc'\"\n        [class.console-client-type-vmware]=\"consoleClientType() == 'vmware'\" (click)=\"clicked.emit(config())\">\n    </div>\n</div>\n", styles: ["::ng-deep canvas{cursor:not-allowed!important;pointer-events:none!important;width:100%!important;height:100%!important}.console-tile-component{height:100%;width:100%;max-height:100%;max-width:100%}.console-host{max-width:100%;max-height:100%;width:100%;aspect-ratio:16/9;margin:0 auto;overflow:hidden}.console-host.clickable{cursor:pointer}.console-host.console-client-type-vmware{position:relative}\n"] }]
         }], ctorParameters: () => [] });
 
 //  ===BEGIN LICENSE===