npm - @cmusei/console-forge - Versions diffs - 0.20.6 → 0.21.1 - Mend

@cmusei/console-forge 0.20.6 → 0.21.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/fesm2022/cmusei-console-forge.mjs CHANGED Viewed

@@ -1,12 +1,19 @@
-import * as i1$1 from '@angular/common';
+import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, inject, ElementRef, HostListener, Directive, Injectable, output, Component, InjectionToken, signal, effect, model, viewChild, ViewEncapsulation, Injector, computed, untracked, makeEnvironmentProviders } from '@angular/core';
-import NoVncClient from '@novnc/novnc/core/rfb';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { InjectionToken, inject, Injectable, signal, effect, Injector, input, output, computed, untracked, Component, ElementRef, Directive, ViewEncapsulation, viewChild, HostListener, model, makeEnvironmentProviders } from '@angular/core';
+import NoVncClient from '@novnc/novnc/lib/rfb';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, debounceTime } from 'rxjs';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+//  ===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 ConsoleForgeConfig {
+}
 //  ===BEGIN LICENSE===
 //  Copyright 2025 Carnegie Mellon University. All rights reserved.
@@ -20,87 +27,6 @@ var LogLevel;
     LogLevel[LogLevel["ERROR"] = 3] = "ERROR";
 })(LogLevel || (LogLevel = {}));
-//  ===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 ClassOnHoverDirective {
-    applyClasses = input.required();
-    directiveHost = inject(ElementRef);
-    handleMouseEnter() {
-        if (this.directiveHost?.nativeElement) {
-            this.directiveHost.nativeElement.classList.add(this.applyClasses());
-        }
-    }
-    handleMouseLeave() {
-        if (this.directiveHost?.nativeElement) {
-            this.directiveHost.nativeElement.classList.remove(this.applyClasses());
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClassOnHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: ClassOnHoverDirective, isStandalone: true, selector: "[cfClassOnHover]", inputs: { applyClasses: { classPropertyName: "applyClasses", publicName: "applyClasses", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClassOnHoverDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[cfClassOnHover]' }]
-        }], propDecorators: { handleMouseEnter: [{
-                type: HostListener,
-                args: ["mouseenter"]
-            }], handleMouseLeave: [{
-                type: HostListener,
-                args: ["mouseleave"]
-            }] } });
-class PicoCssService {
-    sheet;
-    loading;
-    loadStyleSheet() {
-        if (this.sheet)
-            return Promise.resolve(this.sheet);
-        if (!this.loading) {
-            this.loading = fetch('assets/pico.min.css')
-                .then(r => r.text())
-                .then(css => {
-                const sheet = new CSSStyleSheet();
-                sheet.replaceSync(css);
-                this.sheet = sheet;
-            });
-        }
-        return this.loading.then(() => this.sheet);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PicoCssService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PicoCssService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PicoCssService, 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.
-//  ===END LICENSE===
-class ConsoleToolbarDefaultButtonComponent {
-    clicked = output();
-    disabled = input(false);
-    label = input();
-    isOngoing = input(false);
-    picoCssService = inject(PicoCssService);
-    hostElement = inject((ElementRef));
-    async ngAfterViewInit() {
-        const sheet = await this.picoCssService.loadStyleSheet();
-        if (this.hostElement.nativeElement.shadowRoot) {
-            this.hostElement.nativeElement.shadowRoot.adoptedStyleSheets = [sheet];
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleToolbarDefaultButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ConsoleToolbarDefaultButtonComponent, isStandalone: true, selector: "cf-console-toolbar-default-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOngoing: { classPropertyName: "isOngoing", publicName: "isOngoing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, 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 class=\"svg-button\" cfClassOnHover applyClasses=\"hovered\" [ariaDisabled]=\"disabled()\"\n    [class.cursor-pointer]=\"!disabled()\" [class.disabled]=\"disabled()\" [class.ongoing]=\"isOngoing()\"\n    (click)=\"!disabled() && clicked.emit()\">\n    <div class=\"svg-container\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (label()) {\n    <div class=\"button-label\">{{ label() }}</div>\n    }\n</div>\n", styles: [":host{background-color:transparent;display:block}@keyframes glow-button-color{0%{color:var(--pico-muted-color);fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}35%{color:#ee402e;fill:#ee402e;stroke:#ee402e}65%{color:#ee402e;fill:#ee402e;stroke:#ee402e}to{color:var(--pico-muted-color);fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}}.svg-button{border:none;border-width:0!important;color:var(--pico-color);display:flex;font-weight:400;align-items:center;flex-direction:column;justify-content:center;margin:0}.svg-button:hover:not(.disabled){color:var(--pico-primary);fill:var(--pico-primary);stroke:var(--pico-primary);transition:all .3s ease}.svg-button.ongoing{animation:glow-button-color 2s infinite}.svg-button.disabled{color:var(--pico-muted-color)}.svg-container{height:var(--svg-icon-height);width:var(--svg-icon-width)}.button-label{font-size:.8rem;margin:0;text-align:center}.cursor-pointer{cursor:pointer}::ng-deep svg{height:56px;width:56px;padding:16px}::ng-deep svg,::ng-deep path,::ng-deep rect{fill:var(--pico-color);stroke:var(--pico-color)}::ng-deep svg.disabled,::ng-deep path.disabled,::ng-deep rect.disabled{fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}::ng-deep svg:hover,::ng-deep path:hover,::ng-deep rect:hover{color:var(--pico-color);transition:fill .3s ease}::ng-deep .hovered:not(.disabled) svg,::ng-deep .hovered:not(.disabled) path,::ng-deep .hovered:not(.disabled) rect{fill:var(--pico-primary);stroke:var(--pico-primary);transition:all .3s ease}::ng-deep .ongoing:not(.disabled) svg,::ng-deep .ongoing:not(.disabled) path,::ng-deep .ongoing:not(.disabled) rect,::ng-deep .ongoing:not(.disabled) .svg-button{animation:glow-button-color 2s infinite}\n"], dependencies: [{ kind: "directive", type: ClassOnHoverDirective, selector: "[cfClassOnHover]", inputs: ["applyClasses"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleToolbarDefaultButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cf-console-toolbar-default-button', imports: [ClassOnHoverDirective], 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 class=\"svg-button\" cfClassOnHover applyClasses=\"hovered\" [ariaDisabled]=\"disabled()\"\n    [class.cursor-pointer]=\"!disabled()\" [class.disabled]=\"disabled()\" [class.ongoing]=\"isOngoing()\"\n    (click)=\"!disabled() && clicked.emit()\">\n    <div class=\"svg-container\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (label()) {\n    <div class=\"button-label\">{{ label() }}</div>\n    }\n</div>\n", styles: [":host{background-color:transparent;display:block}@keyframes glow-button-color{0%{color:var(--pico-muted-color);fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}35%{color:#ee402e;fill:#ee402e;stroke:#ee402e}65%{color:#ee402e;fill:#ee402e;stroke:#ee402e}to{color:var(--pico-muted-color);fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}}.svg-button{border:none;border-width:0!important;color:var(--pico-color);display:flex;font-weight:400;align-items:center;flex-direction:column;justify-content:center;margin:0}.svg-button:hover:not(.disabled){color:var(--pico-primary);fill:var(--pico-primary);stroke:var(--pico-primary);transition:all .3s ease}.svg-button.ongoing{animation:glow-button-color 2s infinite}.svg-button.disabled{color:var(--pico-muted-color)}.svg-container{height:var(--svg-icon-height);width:var(--svg-icon-width)}.button-label{font-size:.8rem;margin:0;text-align:center}.cursor-pointer{cursor:pointer}::ng-deep svg{height:56px;width:56px;padding:16px}::ng-deep svg,::ng-deep path,::ng-deep rect{fill:var(--pico-color);stroke:var(--pico-color)}::ng-deep svg.disabled,::ng-deep path.disabled,::ng-deep rect.disabled{fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}::ng-deep svg:hover,::ng-deep path:hover,::ng-deep rect:hover{color:var(--pico-color);transition:fill .3s ease}::ng-deep .hovered:not(.disabled) svg,::ng-deep .hovered:not(.disabled) path,::ng-deep .hovered:not(.disabled) rect{fill:var(--pico-primary);stroke:var(--pico-primary);transition:all .3s ease}::ng-deep .ongoing:not(.disabled) svg,::ng-deep .ongoing:not(.disabled) path,::ng-deep .ongoing:not(.disabled) rect,::ng-deep .ongoing:not(.disabled) .svg-button{animation:glow-button-color 2s infinite}\n"] }]
-        }] });
 //  ===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.
@@ -158,10 +84,10 @@ class LoggerService {
                 return console.log;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoggerService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoggerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoggerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: LoggerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: LoggerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -181,7 +107,7 @@ class UserSettingsService {
             dockTo: "left",
             preferTheme: undefined
         }
-    });
+    }, ...(ngDevMode ? [{ debugName: "_settings" }] : /* istanbul ignore next */ []));
     settings = this._settings.asReadonly();
     logger = inject(LoggerService);
     settingsKey = "consoleForge:userSettings";
@@ -214,10 +140,10 @@ class UserSettingsService {
             ...update
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserSettingsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserSettingsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserSettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserSettingsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -255,7 +181,7 @@ class ClipboardService {
     cfConfig = inject(ConsoleForgeConfig);
     document = inject(DOCUMENT);
     userSettings = inject(UserSettingsService);
-    _localClipboardContentWritten = signal(undefined);
+    _localClipboardContentWritten = signal(undefined, ...(ngDevMode ? [{ debugName: "_localClipboardContentWritten" }] : /* istanbul ignore next */ []));
     localClipboardContentWritten = this._localClipboardContentWritten.asReadonly();
     copyBlob(blob) {
         // We don't have any cases where we autocopy blobs for now, so we just pass false here
@@ -294,193 +220,23 @@ class ClipboardService {
         clipboard.write([item]);
         this._localClipboardContentWritten.update(() => item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClipboardService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClipboardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClipboardService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ClipboardService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClipboardService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
-class ApplyToolbarThemeDirective {
-    hostElement = inject((ElementRef));
-    userSettings = inject(UserSettingsService).settings;
-    constructor() {
-        effect(() => {
-            this.hostElement.nativeElement.setAttribute("data-theme", this.userSettings().toolbar.preferTheme);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApplyToolbarThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.14", type: ApplyToolbarThemeDirective, isStandalone: true, selector: "[cfApplyToolbarTheme]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ApplyToolbarThemeDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[cfApplyToolbarTheme]' }]
-        }], ctorParameters: () => [] });
-//  ===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 ConsoleToolbarDefaultComponent {
-    consoleContext = input.required();
-    // component state
-    isClipboardDialogOpen = false;
-    isKeyboardDialogOpen = false;
-    isNetworkDialogOpen = false;
-    isPowerDialogOpen = false;
-    isSettingsDialogOpen = false;
-    keyboardInputText = model("");
-    // protected readonly selected = model<string>();
-    // services and viewkids
-    cfConfig = inject(ConsoleForgeConfig);
-    clipboardService = inject(ClipboardService);
-    clipboardTextInput = viewChild("clipboardText");
-    picoCssService = inject(PicoCssService);
-    hostElement = inject((ElementRef));
-    // trying this out. when the network configuration (which is passed into the library by the end dev)
-    // changes, we need to update the model that holds the current network, so let's make a computed
-    // signal that represents that change so we can be sure our effect only happens when we want it to
-    // private readonly currentNetwork = (() => this.consoleContext()?.networks?.config()?.current || "");
-    constructor() {
-        // when the network config is changed, select the current network if exists
-        // effect(() => {
-        //   this.selectedNetworkForChange.update(() => this.currentNetwork());
-        // });
-    }
-    async ngAfterViewInit() {
-        // apply pico to this component
-        const sheet = await this.picoCssService.loadStyleSheet();
-        if (this.hostElement.nativeElement.shadowRoot) {
-            this.hostElement.nativeElement.shadowRoot.adoptedStyleSheets = [sheet];
-        }
-    }
-    handleChangeToolbarPosition(position) {
-        this.consoleContext().userSettings.patch({ toolbar: { dockTo: position } });
-    }
-    handleClipboardDialogOpenClose(isOpen) {
-        this.isClipboardDialogOpen = isOpen;
-        if (isOpen) {
-            // Is there a better way to ensure .focus works other than timeouting it?
-            setTimeout(() => this.clipboardTextInput()?.nativeElement?.focus(), 100);
-        }
-    }
-    handleClipboardCopyLastText(text) {
-        this.clipboardService.copyText(text, false);
-    }
-    handleNetworkChangeRequested(request) {
-        if (!request.network) {
-            this.consoleContext().networks.disconnectRequested({ nic: request.nic });
-        }
-        else {
-            this.consoleContext().networks.connectionRequested(request);
-        }
-        this.isNetworkDialogOpen = false;
-    }
-    handleNetworkDisconnectAllRequested() {
-        this.consoleContext().networks.disconnectRequested({});
-        this.isNetworkDialogOpen = false;
-    }
-    handleNetworkDialogOpenClose(isOpen) {
-        this.isNetworkDialogOpen = isOpen;
-    }
-    handleRecordToggle() {
-        if (this.consoleContext().state.activeConsoleRecording()) {
-            this.consoleContext().console.recordScreenStop();
-        }
-        else {
-            this.consoleContext().console.recordScreenStart();
-        }
-    }
-    async handleSendClipboardText(event, text) {
-        event.preventDefault();
-        if (text) {
-            await this.consoleContext().clipboard.sendTextToConsoleClipboard(text);
-        }
-        this.isClipboardDialogOpen = false;
-    }
-    async handlSendKeyboardCtrlAltDel() {
-        await this.consoleContext().console.sendCtrlAltDel();
-        this.isKeyboardDialogOpen = false;
-    }
-    async handleSendKeyboardInput(event, text) {
-        // prevent the form submit default
-        event.preventDefault();
-        if (text) {
-            await this.consoleContext().console.sendKeyboardInput(text);
-        }
-        this.keyboardInputText.update(() => "");
-        this.isKeyboardDialogOpen = false;
-    }
-    async handleSendPowerRequest(request) {
-        await this.consoleContext().console.sendPowerRequest(request);
-        this.isPowerDialogOpen = false;
-    }
-    handleSettingsDialogOpenClose(isOpen) {
-        this.isSettingsDialogOpen = isOpen;
-    }
-    handleSettingsAllowLocalClipboardWrite(allow) {
-        this.consoleContext().userSettings.patch({ console: { allowCopyToLocalClipboard: allow } });
-    }
-    handleSettingsAttemptRemoteSessionResize(attempt) {
-        this.consoleContext().userSettings.patch({ console: { attemptRemoteSessionResize: attempt } });
-    }
-    handleSettingsScaleToContainerHostSize(scaleToCanvasHostSize) {
-        this.consoleContext().userSettings.patch({ console: { scaleToCanvasHostSize } });
-    }
-    handleToolbarThemeChange(theme) {
-        this.consoleContext().userSettings.patch({ toolbar: { preferTheme: theme } });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleToolbarDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ConsoleToolbarDefaultComponent, isStandalone: true, selector: "cf-console-toolbar-default", inputs: { consoleContext: { classPropertyName: "consoleContext", publicName: "consoleContext", isSignal: true, isRequired: true, transformFunction: null }, keyboardInputText: { classPropertyName: "keyboardInputText", publicName: "keyboardInputText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keyboardInputText: "keyboardInputTextChange" }, viewQueries: [{ propertyName: "clipboardTextInput", first: true, predicate: ["clipboardText"], 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@if (consoleContext()) {\n<div class=\"toolbar-container\" cfApplyToolbarTheme\n    [class.horizontal]=\"consoleContext().userSettings.settings().toolbar.dockTo == 'top' || consoleContext().userSettings.settings().toolbar.dockTo == 'bottom' \">\n    <div class=\"button-container\">\n        <cf-console-toolbar-default-button label=\"Settings\" (clicked)=\"handleSettingsDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M12.0002 8C9.79111 8 8.00024 9.79086 8.00024 12C8.00024 14.2091 9.79111 16 12.0002 16C14.2094 16 16.0002 14.2091 16.0002 12C16.0002 9.79086 14.2094 8 12.0002 8ZM10.0002 12C10.0002 10.8954 10.8957 10 12.0002 10C13.1048 10 14.0002 10.8954 14.0002 12C14.0002 13.1046 13.1048 14 12.0002 14C10.8957 14 10.0002 13.1046 10.0002 12Z\"\n                        fill=\"#000000\"></path>\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M11.2867 0.5C9.88583 0.5 8.6461 1.46745 8.37171 2.85605L8.29264 3.25622C8.10489 4.20638 7.06195 4.83059 6.04511 4.48813L5.64825 4.35447C4.32246 3.90796 2.83873 4.42968 2.11836 5.63933L1.40492 6.83735C0.67773 8.05846 0.954349 9.60487 2.03927 10.5142L2.35714 10.7806C3.12939 11.4279 3.12939 12.5721 2.35714 13.2194L2.03927 13.4858C0.954349 14.3951 0.67773 15.9415 1.40492 17.1626L2.11833 18.3606C2.83872 19.5703 4.3225 20.092 5.64831 19.6455L6.04506 19.5118C7.06191 19.1693 8.1049 19.7935 8.29264 20.7437L8.37172 21.1439C8.6461 22.5325 9.88584 23.5 11.2867 23.5H12.7136C14.1146 23.5 15.3543 22.5325 15.6287 21.1438L15.7077 20.7438C15.8954 19.7936 16.9384 19.1693 17.9553 19.5118L18.3521 19.6455C19.6779 20.092 21.1617 19.5703 21.8821 18.3606L22.5955 17.1627C23.3227 15.9416 23.046 14.3951 21.9611 13.4858L21.6432 13.2194C20.8709 12.5722 20.8709 11.4278 21.6432 10.7806L21.9611 10.5142C23.046 9.60489 23.3227 8.05845 22.5955 6.83732L21.8821 5.63932C21.1617 4.42968 19.678 3.90795 18.3522 4.35444L17.9552 4.48814C16.9384 4.83059 15.8954 4.20634 15.7077 3.25617L15.6287 2.85616C15.3543 1.46751 14.1146 0.5 12.7136 0.5H11.2867ZM10.3338 3.24375C10.4149 2.83334 10.7983 2.5 11.2867 2.5H12.7136C13.2021 2.5 13.5855 2.83336 13.6666 3.24378L13.7456 3.64379C14.1791 5.83811 16.4909 7.09167 18.5935 6.38353L18.9905 6.24984C19.4495 6.09527 19.9394 6.28595 20.1637 6.66264L20.8771 7.86064C21.0946 8.22587 21.0208 8.69271 20.6764 8.98135L20.3586 9.24773C18.6325 10.6943 18.6325 13.3057 20.3586 14.7523L20.6764 15.0186C21.0208 15.3073 21.0946 15.7741 20.8771 16.1394L20.1637 17.3373C19.9394 17.714 19.4495 17.9047 18.9905 17.7501L18.5936 17.6164C16.4909 16.9082 14.1791 18.1618 13.7456 20.3562L13.6666 20.7562C13.5855 21.1666 13.2021 21.5 12.7136 21.5H11.2867C10.7983 21.5 10.4149 21.1667 10.3338 20.7562L10.2547 20.356C9.82113 18.1617 7.50931 16.9082 5.40665 17.6165L5.0099 17.7501C4.55092 17.9047 4.06104 17.714 3.83671 17.3373L3.1233 16.1393C2.9058 15.7741 2.97959 15.3073 3.32398 15.0186L3.64185 14.7522C5.36782 13.3056 5.36781 10.6944 3.64185 9.24779L3.32398 8.98137C2.97959 8.69273 2.9058 8.2259 3.1233 7.86067L3.83674 6.66266C4.06106 6.28596 4.55093 6.09528 5.0099 6.24986L5.40676 6.38352C7.50938 7.09166 9.82112 5.83819 10.2547 3.64392L10.3338 3.24375Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if(consoleContext().state.isManualReconnectAvailable())\n        {\n        <cf-console-toolbar-default-button label=\"Reconnect\"\n            (clicked)=\"consoleContext().console.sendReconnectRequest()\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C16.3556 22 20.0584 19.2159 21.4307 15.3332C21.6148 14.8125 21.3418 14.2412 20.8211 14.0572C20.3004 13.8731 19.7291 14.146 19.545 14.6668C18.4463 17.7753 15.4817 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C13.5516 4 14.8662 4.56117 16.1162 5.4406C16.9569 6.03212 17.7348 6.74106 18.5242 7.5H15.5C14.9477 7.5 14.5 7.94772 14.5 8.5C14.5 9.05228 14.9477 9.5 15.5 9.5H21C21.5523 9.5 22 9.05228 22 8.5V3C22 2.44772 21.5523 2 21 2C20.4477 2 20 2.44772 20 3V6.14371C19.1517 5.32583 18.2456 4.49337 17.267 3.80489C15.7949 2.76916 14.0847 2 12 2Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (!consoleContext().state.isViewOnly() && consoleContext().state.isConnected()) {\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button label=\"Keyboard\" (clicked)=\"isKeyboardDialogOpen = true\">\n            <svg fill=\"#000000\" viewBox=\"0 0 1920 1920\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M1807.059 1637.706c0 31.059-25.299 56.47-56.47 56.47H169.411c-31.172 0-56.47-25.411-56.47-56.47v-903.53c0-31.058 25.298-56.47 56.47-56.47h1581.176c31.172 0 56.47 25.412 56.47 56.47v903.53Zm-56.47-1072.941h-729.262c14.908-86.965 65.958-113.506 133.384-147.163 89.336-44.611 200.583-100.291 200.583-304.602h-112.941c0 134.513-57.939 163.426-138.24 203.633-80.301 40.094-177.544 90.24-196.518 248.132H169.412C76.009 564.765 0 640.775 0 734.176v903.53c0 93.402 76.01 169.412 169.412 169.412h1581.176c93.403 0 169.412-76.01 169.412-169.412v-903.53c0-93.402-76.01-169.411-169.412-169.411Zm-564.707 677.647H734.118c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h451.764c31.172 0 56.47-25.299 56.47-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m338.824 0h-112.941c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h112.94c31.173 0 56.471-25.299 56.471-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m-1016.47 0H395.293c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.299 56.47-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m0-338.824h-112.94c-31.173 0-56.471 25.3-56.471 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.298 56.47-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47m225.883 225.882h112.94c31.173 0 56.471-25.3 56.471-56.471V960.059c0-31.172-25.298-56.47-56.47-56.47h-112.94c-31.172 0-56.47 25.298-56.47 56.47V1073c0 31.172 25.298 56.47 56.47 56.47m451.764-225.882h-112.94c-31.173 0-56.471 25.3-56.471 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.298 56.47-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47m338.824 0h-112.941c-31.172 0-56.47 25.298-56.47 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.94c31.173 0 56.471-25.298 56.471-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47\"\n                        fill-rule=\"evenodd\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if(!cfConfig.disabledFeatures.clipboard) {\n        <cf-console-toolbar-default-button [disabled]=\"!consoleContext().state.isConnected()\" label=\"Clipboard\"\n            (clicked)=\"handleClipboardDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M19.5 16.5L19.5 4.5L18.75 3.75H9L8.25 4.5L8.25 7.5L5.25 7.5L4.5 8.25V20.25L5.25 21H15L15.75 20.25V17.25H18.75L19.5 16.5ZM15.75 15.75L15.75 8.25L15 7.5L9.75 7.5V5.25L18 5.25V15.75H15.75ZM6 9L14.25 9L14.25 19.5L6 19.5L6 9Z\"\n                        fill=\"#080341\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (consoleContext().networks.config()?.networks?.length) {\n        <cf-console-toolbar-default-button label=\"Networks ({{ consoleContext().networks.config()?.networks?.length }})\"\n            (clicked)=\"handleNetworkDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M3 12H21M12 8V12M6.5 12V16M17.5 12V16M10.1 8H13.9C14.4601 8 14.7401 8 14.954 7.89101C15.1422 7.79513 15.2951 7.64215 15.391 7.45399C15.5 7.24008 15.5 6.96005 15.5 6.4V4.6C15.5 4.03995 15.5 3.75992 15.391 3.54601C15.2951 3.35785 15.1422 3.20487 14.954 3.10899C14.7401 3 14.4601 3 13.9 3H10.1C9.53995 3 9.25992 3 9.04601 3.10899C8.85785 3.20487 8.70487 3.35785 8.60899 3.54601C8.5 3.75992 8.5 4.03995 8.5 4.6V6.4C8.5 6.96005 8.5 7.24008 8.60899 7.45399C8.70487 7.64215 8.85785 7.79513 9.04601 7.89101C9.25992 8 9.53995 8 10.1 8ZM15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V17.6C21 17.0399 21 16.7599 20.891 16.546C20.7951 16.3578 20.6422 16.2049 20.454 16.109C20.2401 16 19.9601 16 19.4 16H15.6C15.0399 16 14.7599 16 14.546 16.109C14.3578 16.2049 14.2049 16.3578 14.109 16.546C14 16.7599 14 17.0399 14 17.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21ZM4.6 21H8.4C8.96005 21 9.24008 21 9.45399 20.891C9.64215 20.7951 9.79513 20.6422 9.89101 20.454C10 20.2401 10 19.9601 10 19.4V17.6C10 17.0399 10 16.7599 9.89101 16.546C9.79513 16.3578 9.64215 16.2049 9.45399 16.109C9.24008 16 8.96005 16 8.4 16H4.6C4.03995 16 3.75992 16 3.54601 16.109C3.35785 16.2049 3.20487 16.3578 3.10899 16.546C3 16.7599 3 17.0399 3 17.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21Z\"\n                        stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (consoleContext().console.supportedFeatures().powerManagement) {\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button label=\"Power\" (clicked)=\"isPowerDialogOpen = true\">\n            <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V3Z\"\n                    fill=\"none\" />\n                <path\n                    d=\"M6.2798 6.70707C6.67031 6.31653 6.67028 5.68337 6.27973 5.29286C5.88919 4.90235 5.25603 4.90238 4.86552 5.29293C3.09635 7.06226 2 9.49298 2 12.1764C2 17.6204 6.49591 22 12 22C17.5041 22 22 17.6204 22 12.1764C22 9.49298 20.9036 7.06226 19.1345 5.29293C18.744 4.90238 18.1108 4.90235 17.7203 5.29286C17.3297 5.68337 17.3297 6.31653 17.7202 6.70707C19.1338 8.12083 20 10.0503 20 12.1764C20 16.4787 16.437 20 12 20C7.56296 20 4 16.4787 4 12.1764C4 10.0503 4.86618 8.12083 6.2798 6.70707Z\"\n                    fill=\"none\" />\n            </svg>\n        </cf-console-toolbar-default-button> }\n        }\n\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button (clicked)=\"consoleContext().console.copyScreenshot()\"\n            [disabled]=\"!consoleContext().state.isConnected()\" label=\"Screenshot\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M9.15023 3.01742C9.13605 3.03985 9.12278 3.0676 9.11298 3.09958C9.11044 3.10789 9.10778 3.11617 9.10502 3.12442L8.36963 5.31787C8.23301 5.72537 7.85129 6 7.4215 6H3C2.44772 6 2 6.44772 2 7V20C2 20.5523 2.44771 21 3 21H21C21.5523 21 22 20.5523 22 20V7C22 6.44771 21.5523 6 21 6H16.331C15.9011 6 15.5194 5.72528 15.3828 5.31769L14.6479 3.12423C14.6452 3.11605 14.6425 3.10783 14.64 3.09958C14.6302 3.0676 14.6169 3.03985 14.6027 3.01742C14.5986 3.01089 14.5946 3.00509 14.5908 3H9.16221C9.1584 3.00509 9.15437 3.01089 9.15023 3.01742ZM7.20525 2.49911C7.43535 1.76672 8.10563 1 9.06392 1H14.6891C15.6474 1 16.3177 1.76679 16.5478 2.49922L17.0506 4H21C22.6569 4 24 5.34315 24 7V20C24 21.6569 22.6569 23 21 23H3C1.34315 23 0 21.6569 0 20V7C0 5.34315 1.34315 4 3 4H6.70206L7.20525 2.49911ZM7 13C7 10.2386 9.23858 8 12 8C14.7614 8 17 10.2386 17 13C17 15.7614 14.7614 18 12 18C9.23858 18 7 15.7614 7 13ZM12 10C10.3431 10 9 11.3431 9 13C9 14.6569 10.3431 16 12 16C13.6569 16 15 14.6569 15 13C15 11.3431 13.6569 10 12 10Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if (!cfConfig.disabledFeatures.consoleScreenRecord) {\n        <cf-console-toolbar-default-button (clicked)=\"handleRecordToggle()\"\n            [disabled]=\"!consoleContext().state.isRecordingAvailable()\"\n            [isOngoing]=\"!!consoleContext().state.activeConsoleRecording()\" label=\"Record\">\n            @if (!consoleContext().state.activeConsoleRecording()) {\n            <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                        <g id=\"Dribbble-Light-Preview\" transform=\"translate(-100.000000, -3879.000000)\" fill=\"#000000\">\n                            <g id=\"icons\" transform=\"translate(56.000000, 160.000000)\">\n                                <path\n                                    d=\"M56,3719 L56,3721 L62,3721 L62,3727 L64,3727 L64,3719 L56,3719 Z M58,3729.151 C58,3726.942 56.209,3725.151 54,3725.151 C51.791,3725.151 50,3726.942 50,3729.151 C50,3731.36 51.791,3733.151 54,3733.151 C56.209,3733.151 58,3731.36 58,3729.151 L58,3729.151 Z M62,3737 L56,3737 L56,3739 L64,3739 L64,3731 L62,3731 L62,3737 Z M46,3731 L44,3731 L44,3739 L52,3739 L52,3737 L46,3737 L46,3731 Z M46,3727 L44,3727 L44,3719 L52,3719 L52,3721 L46,3721 L46,3727 Z\"\n                                    id=\"record-[#979]\"> </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 -0.5 21 21\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                        <g id=\"Dribbble-Light-Preview\" transform=\"translate(-59.000000, -440.000000)\" fill=\"#000000\">\n                            <g id=\"icons\" transform=\"translate(56.000000, 160.000000)\">\n                                <path\n                                    d=\"M9.3,294 L17.7,294 L17.7,286 L9.3,286 L9.3,294 Z M15.6,280 L15.6,282 L21.9,282 L21.9,288 L24,288 L24,280 L15.6,280 Z M21.9,298 L15.6,298 L15.6,300 L24,300 L24,292 L21.9,292 L21.9,298 Z M5.1,292 L3,292 L3,300 L11.4,300 L11.4,298 L5.1,298 L5.1,292 Z M5.1,288 L3,288 L3,280 L11.4,280 L11.4,282 L5.1,282 L5.1,288 Z\"\n                                    id=\"stop-[#1470]\"> </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            }\n        </cf-console-toolbar-default-button>\n        }\n\n        <cf-console-toolbar-default-button (clicked)=\"consoleContext().console.toggleFullscreen()\" label=\"Fullscreen\">\n            @if (consoleContext().state.isFullscreenAvailable()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M4 2C2.89543 2 2 2.89543 2 4V8C2 8.55228 2.44772 9 3 9C3.55228 9 4 8.55228 4 8V4H8C8.55228 4 9 3.55228 9 3C9 2.44772 8.55228 2 8 2H4Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M20 2C21.1046 2 22 2.89543 22 4V8C22 8.55228 21.5523 9 21 9C20.4477 9 20 8.55228 20 8V4H16C15.4477 4 15 3.55228 15 3C15 2.44772 15.4477 2 16 2H20Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M20 22C21.1046 22 22 21.1046 22 20V16C22 15.4477 21.5523 15 21 15C20.4477 15 20 15.4477 20 16V20H16C15.4477 20 15 20.4477 15 21C15 21.5523 15.4477 22 16 22H20Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M2 20C2 21.1046 2.89543 22 4 22H8C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20H4V16C4 15.4477 3.55228 15 3 15C2.44772 15 2 15.4477 2 16V20Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M7 9C8.10457 9 9 8.10457 9 7V3C9 2.44772 8.55228 2 8 2C7.44772 2 7 2.44772 7 3V7H3C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9H7Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M17 9C15.8954 9 15 8.10457 15 7V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H17Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M17 15C15.8954 15 15 15.8954 15 17V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V17H21C21.5523 17 22 16.5523 22 16C22 15.4477 21.5523 15 21 15H17Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M9 17C9 15.8954 8.10457 15 7 15H3C2.44772 15 2 15.4477 2 16C2 16.5523 2.44772 17 3 17H7V21C7 21.5523 7.44772 22 8 22C8.55228 22 9 21.5523 9 21V17Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n            }\n        </cf-console-toolbar-default-button>\n    </div>\n\n    <dialog [open]=\"isClipboardDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleClipboardDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Clipboard</strong>\n                </p>\n            </header>\n\n            @if (consoleContext().console.supportedFeatures().clipboardRemoteWrite) {\n            <div class=\"dialog-section\">\n                <h2>Send Text to Remote Clipboard</h2>\n                <form (submit)=\"handleSendClipboardText($event, clipboardText.value)\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" class=\"clipboard-text\" aria-label=\"Clipboard text\"\n                            placeholder=\"Enter text to send to the remote clipboard\" #clipboardText autofocus>\n                        <button type=\"submit\"\n                            [disabled]=\"!clipboardText.value || !consoleContext().state.isConnected\">Send</button>\n                    </fieldset>\n                </form>\n            </div>\n            }\n\n            <div class=\"dialog-section\">\n                <h2>Remote Clipboard Content</h2>\n                <form (submit)=\"handleClipboardCopyLastText(consoleLastClipboardText.value)\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" id=\"textFromConsoleClipboard\" name=\"textFromConsoleClipboard\"\n                            class=\"clipboard-text\" aria-describedby=\"textFromConsoleClipboard-helper\"\n                            aria-label=\"Clipboard text\" disabled\n                            [value]=\"consoleContext().clipboard.consoleClipboardText()\"\n                            placeholder=\"Text on the remote will appear here\" #consoleLastClipboardText>\n                        <button type=\"submit\" [disabled]=\"!consoleLastClipboardText.value\">Copy</button>\n                    </fieldset>\n                    @if(consoleContext().userSettings.settings().console.allowCopyToLocalClipboard &&\n                    consoleContext().console.supportedFeatures().clipboardAutomaticLocalCopy)\n                    {\n                    <small id=\"textFromConsoleClipboard-helper\">\n                        Copied text on the remote machine will automatically copy to your local clipboard.\n                        Disable this in Settings.\n                    </small>\n                    }\n                </form>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isKeyboardDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"isKeyboardDialogOpen = false\"></button>\n                <p>\n                    <strong>Send Keystrokes</strong>\n                </p>\n            </header>\n\n            <div class=\"dialog-section\">\n                <h2>Send Keystrokes to Console</h2>\n                <form (submit)=\"handleSendKeyboardInput($event, keyboardInputText())\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" id=\"keyboardInputText\" name=\"keyboardInputText\" class=\"keyboard-text\"\n                            aria-label=\"Keyboard text\" placeholder=\"Enter text to send as keyboard input to the console\"\n                            autofocus [(ngModel)]=\"keyboardInputText\">\n                        <button type=\"submit\"\n                            [disabled]=\"!keyboardInputText() || !consoleContext().state.isConnected\">Send</button>\n                    </fieldset>\n                </form>\n            </div>\n\n            <div class=\"dialog-section\">\n                <h2>Special Key Combinations</h2>\n\n                <div class=\"dialog-button-group\">\n                    <button type=\"button\" aria-label=\"Send Ctrl+Alt+Delete\" (click)=\"handlSendKeyboardCtrlAltDel()\">\n                        Ctrl + Alt + Delete\n                    </button>\n                </div>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isNetworkDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleNetworkDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Networks</strong>\n                </p>\n            </header>\n\n            <form>\n                @for (nic of consoleContext().networks.config()?.nics; track nic)\n                {\n                <label for=\"nic-{{ nic }}-select\">{{ nic }}</label>\n                <fieldset role=\"group\">\n                    <select #availableNetworksSelect name=\"nic-{{ nic }}-select\"\n                        aria-label=\"Select a network to connect to\">\n\n                        @if (!cfConfig.disabledFeatures.networkDisconnection)\n                        {\n                        <option [selected]=\"!consoleContext().networks.config()?.currentConnections?.[nic]\" value=\"\">\n                            [Disconnected]\n                        </option>\n                        }\n\n                        @for(network of consoleContext().networks.config()?.networks; track network) {\n                        <option [value]=\"network\"\n                            [selected]=\"consoleContext().networks.config()?.currentConnections?.[nic] === network\">\n                            {{ network }}\n                        </option>\n                        }\n                    </select>\n\n                    <button type=\"button\"\n                        (click)=\"handleNetworkChangeRequested({ network: availableNetworksSelect.value, nic: nic })\">\n                        {{ availableNetworksSelect.value ? \"Connect\" : \"Disconnect\" }}\n                    </button>\n                </fieldset>\n                }\n\n                @if (!cfConfig.disabledFeatures.networkDisconnection)\n                {\n                <hr />\n                <div class=\"dialog-button-group\">\n                    <button class=\"secondary\" type=\"button\" (click)=\"handleNetworkDisconnectAllRequested()\">\n                        Disconnect All Network Interfaces\n                    </button>\n                </div>\n                }\n            </form>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isPowerDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"isPowerDialogOpen = false\"></button>\n                <p>\n                    <strong>Power</strong>\n                </p>\n            </header>\n\n            <div class=\"dialog-button-group\">\n                <button type=\"button\" (click)=\"handleSendPowerRequest('reboot')\">Request Reboot</button>\n                <button type=\"button\" (click)=\"handleSendPowerRequest('shutdown')\">Request Shutdown</button>\n                <hr />\n                <button class=\"secondary\" type=\"button\" (click)=\"handleSendPowerRequest('rebootHard')\">\n                    Request Hard Reboot\n                </button>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isSettingsDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleSettingsDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Settings</strong>\n                </p>\n            </header>\n\n            <div class=\"settings-form\">\n                <div class=\"settings-behavior dialog-section\">\n                    <h4>Behavior</h4>\n                    <fieldset>\n                        <label>\n                            <input #inputAllowLocalClipboardWrite type=\"checkbox\" name=\"allowLocalClipboardWrite\"\n                                [checked]=\"consoleContext().userSettings.settings().console.allowCopyToLocalClipboard\"\n                                (change)=\"handleSettingsAllowLocalClipboardWrite(inputAllowLocalClipboardWrite.checked)\" />\n                            Allow the remote machine to copy text to my local clipboard\n                        </label>\n                        <label>\n                            <input #inputAttemptRemoteSessionResize type=\"checkbox\" name=\"attemptRemoteSessionResize\"\n                                [checked]=\"consoleContext().userSettings.settings().console.attemptRemoteSessionResize\"\n                                (change)=\"handleSettingsAttemptRemoteSessionResize(inputAttemptRemoteSessionResize.checked)\" />\n                            Attempt to resize the remote session to match local resolution\n                        </label>\n                        <label>\n                            <input #inputScaleToContainerSize type=\"checkbox\" name=\"scaleToContainerSize\"\n                                [checked]=\"consoleContext().userSettings.settings().console.scaleToCanvasHostSize\"\n                                (change)=\"handleSettingsScaleToContainerHostSize(inputScaleToContainerSize.checked)\" />\n                            Scale to maximum available size\n                        </label>\n                    </fieldset>\n                </div>\n\n                <div class=\"settings-toolbar-dock dialog-section\">\n                    <h4>Toolbar Position</h4>\n                    <div role=\"group\">\n                        <button (click)=\"handleChangeToolbarPosition('left')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'left'\">Left</button>\n                        <button (click)=\"handleChangeToolbarPosition('right')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'right'\">Right</button>\n                        <button (click)=\"handleChangeToolbarPosition('top')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'top'\">Top</button>\n                        <button (click)=\"handleChangeToolbarPosition('bottom')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'bottom'\">Bottom</button>\n                    </div>\n                </div>\n\n                <div class=\"settings-theme dialog-section\">\n                    <h4>Theme</h4>\n                    <div role=\"group\">\n                        <button (click)=\"handleToolbarThemeChange('light')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === 'light'\">Light</button>\n                        <button (click)=\"handleToolbarThemeChange('dark')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === 'dark'\">Dark</button>\n                        <button (click)=\"handleToolbarThemeChange(undefined)\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === undefined\">\n                            My Default\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </article>\n    </dialog>\n</div>\n}\n", styles: [":host{display:block;height:100%;width:100%;max-width:100%}fieldset legend{font-weight:700}.toolbar-container{background-color:var(--pico-background-color);padding:4px;height:100%;display:flex;align-items:center;justify-content:center}.toolbar-container .button-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.toolbar-container .buttons-divider{border-top:1px solid var(--pico-color);margin:.25rem 0;width:100%}.toolbar-container.horizontal{width:100%}.toolbar-container.horizontal .button-container{flex-direction:row}.toolbar-container.horizontal .buttons-divider{align-self:stretch;border-left:1px solid var(--pico-color);height:auto;margin:0 1rem;width:1px}.toolbar-position-buttons{display:flex;gap:4px}.toolbar-position-buttons button{flex-grow:1}.settings-toolbar-dock{margin-top:1rem}dialog h2{font-size:1.1rem;font-weight:700}dialog small{font-size:.8rem}dialog .dialog-section:not(:last-of-type){margin-bottom:2rem}dialog .dialog-button-group button{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ApplyToolbarThemeDirective, selector: "[cfApplyToolbarTheme]" }, { kind: "component", type: ConsoleToolbarDefaultButtonComponent, selector: "cf-console-toolbar-default-button", inputs: ["disabled", "label", "isOngoing"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleToolbarDefaultComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'cf-console-toolbar-default', imports: [
-                        FormsModule,
-                        ApplyToolbarThemeDirective,
-                        ConsoleToolbarDefaultButtonComponent
-                    ], standalone: true, encapsulation: ViewEncapsulation.ShadowDom, 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@if (consoleContext()) {\n<div class=\"toolbar-container\" cfApplyToolbarTheme\n    [class.horizontal]=\"consoleContext().userSettings.settings().toolbar.dockTo == 'top' || consoleContext().userSettings.settings().toolbar.dockTo == 'bottom' \">\n    <div class=\"button-container\">\n        <cf-console-toolbar-default-button label=\"Settings\" (clicked)=\"handleSettingsDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M12.0002 8C9.79111 8 8.00024 9.79086 8.00024 12C8.00024 14.2091 9.79111 16 12.0002 16C14.2094 16 16.0002 14.2091 16.0002 12C16.0002 9.79086 14.2094 8 12.0002 8ZM10.0002 12C10.0002 10.8954 10.8957 10 12.0002 10C13.1048 10 14.0002 10.8954 14.0002 12C14.0002 13.1046 13.1048 14 12.0002 14C10.8957 14 10.0002 13.1046 10.0002 12Z\"\n                        fill=\"#000000\"></path>\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M11.2867 0.5C9.88583 0.5 8.6461 1.46745 8.37171 2.85605L8.29264 3.25622C8.10489 4.20638 7.06195 4.83059 6.04511 4.48813L5.64825 4.35447C4.32246 3.90796 2.83873 4.42968 2.11836 5.63933L1.40492 6.83735C0.67773 8.05846 0.954349 9.60487 2.03927 10.5142L2.35714 10.7806C3.12939 11.4279 3.12939 12.5721 2.35714 13.2194L2.03927 13.4858C0.954349 14.3951 0.67773 15.9415 1.40492 17.1626L2.11833 18.3606C2.83872 19.5703 4.3225 20.092 5.64831 19.6455L6.04506 19.5118C7.06191 19.1693 8.1049 19.7935 8.29264 20.7437L8.37172 21.1439C8.6461 22.5325 9.88584 23.5 11.2867 23.5H12.7136C14.1146 23.5 15.3543 22.5325 15.6287 21.1438L15.7077 20.7438C15.8954 19.7936 16.9384 19.1693 17.9553 19.5118L18.3521 19.6455C19.6779 20.092 21.1617 19.5703 21.8821 18.3606L22.5955 17.1627C23.3227 15.9416 23.046 14.3951 21.9611 13.4858L21.6432 13.2194C20.8709 12.5722 20.8709 11.4278 21.6432 10.7806L21.9611 10.5142C23.046 9.60489 23.3227 8.05845 22.5955 6.83732L21.8821 5.63932C21.1617 4.42968 19.678 3.90795 18.3522 4.35444L17.9552 4.48814C16.9384 4.83059 15.8954 4.20634 15.7077 3.25617L15.6287 2.85616C15.3543 1.46751 14.1146 0.5 12.7136 0.5H11.2867ZM10.3338 3.24375C10.4149 2.83334 10.7983 2.5 11.2867 2.5H12.7136C13.2021 2.5 13.5855 2.83336 13.6666 3.24378L13.7456 3.64379C14.1791 5.83811 16.4909 7.09167 18.5935 6.38353L18.9905 6.24984C19.4495 6.09527 19.9394 6.28595 20.1637 6.66264L20.8771 7.86064C21.0946 8.22587 21.0208 8.69271 20.6764 8.98135L20.3586 9.24773C18.6325 10.6943 18.6325 13.3057 20.3586 14.7523L20.6764 15.0186C21.0208 15.3073 21.0946 15.7741 20.8771 16.1394L20.1637 17.3373C19.9394 17.714 19.4495 17.9047 18.9905 17.7501L18.5936 17.6164C16.4909 16.9082 14.1791 18.1618 13.7456 20.3562L13.6666 20.7562C13.5855 21.1666 13.2021 21.5 12.7136 21.5H11.2867C10.7983 21.5 10.4149 21.1667 10.3338 20.7562L10.2547 20.356C9.82113 18.1617 7.50931 16.9082 5.40665 17.6165L5.0099 17.7501C4.55092 17.9047 4.06104 17.714 3.83671 17.3373L3.1233 16.1393C2.9058 15.7741 2.97959 15.3073 3.32398 15.0186L3.64185 14.7522C5.36782 13.3056 5.36781 10.6944 3.64185 9.24779L3.32398 8.98137C2.97959 8.69273 2.9058 8.2259 3.1233 7.86067L3.83674 6.66266C4.06106 6.28596 4.55093 6.09528 5.0099 6.24986L5.40676 6.38352C7.50938 7.09166 9.82112 5.83819 10.2547 3.64392L10.3338 3.24375Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if(consoleContext().state.isManualReconnectAvailable())\n        {\n        <cf-console-toolbar-default-button label=\"Reconnect\"\n            (clicked)=\"consoleContext().console.sendReconnectRequest()\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C16.3556 22 20.0584 19.2159 21.4307 15.3332C21.6148 14.8125 21.3418 14.2412 20.8211 14.0572C20.3004 13.8731 19.7291 14.146 19.545 14.6668C18.4463 17.7753 15.4817 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C13.5516 4 14.8662 4.56117 16.1162 5.4406C16.9569 6.03212 17.7348 6.74106 18.5242 7.5H15.5C14.9477 7.5 14.5 7.94772 14.5 8.5C14.5 9.05228 14.9477 9.5 15.5 9.5H21C21.5523 9.5 22 9.05228 22 8.5V3C22 2.44772 21.5523 2 21 2C20.4477 2 20 2.44772 20 3V6.14371C19.1517 5.32583 18.2456 4.49337 17.267 3.80489C15.7949 2.76916 14.0847 2 12 2Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (!consoleContext().state.isViewOnly() && consoleContext().state.isConnected()) {\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button label=\"Keyboard\" (clicked)=\"isKeyboardDialogOpen = true\">\n            <svg fill=\"#000000\" viewBox=\"0 0 1920 1920\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M1807.059 1637.706c0 31.059-25.299 56.47-56.47 56.47H169.411c-31.172 0-56.47-25.411-56.47-56.47v-903.53c0-31.058 25.298-56.47 56.47-56.47h1581.176c31.172 0 56.47 25.412 56.47 56.47v903.53Zm-56.47-1072.941h-729.262c14.908-86.965 65.958-113.506 133.384-147.163 89.336-44.611 200.583-100.291 200.583-304.602h-112.941c0 134.513-57.939 163.426-138.24 203.633-80.301 40.094-177.544 90.24-196.518 248.132H169.412C76.009 564.765 0 640.775 0 734.176v903.53c0 93.402 76.01 169.412 169.412 169.412h1581.176c93.403 0 169.412-76.01 169.412-169.412v-903.53c0-93.402-76.01-169.411-169.412-169.411Zm-564.707 677.647H734.118c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h451.764c31.172 0 56.47-25.299 56.47-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m338.824 0h-112.941c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h112.94c31.173 0 56.471-25.299 56.471-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m-1016.47 0H395.293c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.299 56.47-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m0-338.824h-112.94c-31.173 0-56.471 25.3-56.471 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.298 56.47-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47m225.883 225.882h112.94c31.173 0 56.471-25.3 56.471-56.471V960.059c0-31.172-25.298-56.47-56.47-56.47h-112.94c-31.172 0-56.47 25.298-56.47 56.47V1073c0 31.172 25.298 56.47 56.47 56.47m451.764-225.882h-112.94c-31.173 0-56.471 25.3-56.471 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.298 56.47-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47m338.824 0h-112.941c-31.172 0-56.47 25.298-56.47 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.94c31.173 0 56.471-25.298 56.471-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47\"\n                        fill-rule=\"evenodd\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if(!cfConfig.disabledFeatures.clipboard) {\n        <cf-console-toolbar-default-button [disabled]=\"!consoleContext().state.isConnected()\" label=\"Clipboard\"\n            (clicked)=\"handleClipboardDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M19.5 16.5L19.5 4.5L18.75 3.75H9L8.25 4.5L8.25 7.5L5.25 7.5L4.5 8.25V20.25L5.25 21H15L15.75 20.25V17.25H18.75L19.5 16.5ZM15.75 15.75L15.75 8.25L15 7.5L9.75 7.5V5.25L18 5.25V15.75H15.75ZM6 9L14.25 9L14.25 19.5L6 19.5L6 9Z\"\n                        fill=\"#080341\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (consoleContext().networks.config()?.networks?.length) {\n        <cf-console-toolbar-default-button label=\"Networks ({{ consoleContext().networks.config()?.networks?.length }})\"\n            (clicked)=\"handleNetworkDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M3 12H21M12 8V12M6.5 12V16M17.5 12V16M10.1 8H13.9C14.4601 8 14.7401 8 14.954 7.89101C15.1422 7.79513 15.2951 7.64215 15.391 7.45399C15.5 7.24008 15.5 6.96005 15.5 6.4V4.6C15.5 4.03995 15.5 3.75992 15.391 3.54601C15.2951 3.35785 15.1422 3.20487 14.954 3.10899C14.7401 3 14.4601 3 13.9 3H10.1C9.53995 3 9.25992 3 9.04601 3.10899C8.85785 3.20487 8.70487 3.35785 8.60899 3.54601C8.5 3.75992 8.5 4.03995 8.5 4.6V6.4C8.5 6.96005 8.5 7.24008 8.60899 7.45399C8.70487 7.64215 8.85785 7.79513 9.04601 7.89101C9.25992 8 9.53995 8 10.1 8ZM15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V17.6C21 17.0399 21 16.7599 20.891 16.546C20.7951 16.3578 20.6422 16.2049 20.454 16.109C20.2401 16 19.9601 16 19.4 16H15.6C15.0399 16 14.7599 16 14.546 16.109C14.3578 16.2049 14.2049 16.3578 14.109 16.546C14 16.7599 14 17.0399 14 17.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21ZM4.6 21H8.4C8.96005 21 9.24008 21 9.45399 20.891C9.64215 20.7951 9.79513 20.6422 9.89101 20.454C10 20.2401 10 19.9601 10 19.4V17.6C10 17.0399 10 16.7599 9.89101 16.546C9.79513 16.3578 9.64215 16.2049 9.45399 16.109C9.24008 16 8.96005 16 8.4 16H4.6C4.03995 16 3.75992 16 3.54601 16.109C3.35785 16.2049 3.20487 16.3578 3.10899 16.546C3 16.7599 3 17.0399 3 17.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21Z\"\n                        stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (consoleContext().console.supportedFeatures().powerManagement) {\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button label=\"Power\" (clicked)=\"isPowerDialogOpen = true\">\n            <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V3Z\"\n                    fill=\"none\" />\n                <path\n                    d=\"M6.2798 6.70707C6.67031 6.31653 6.67028 5.68337 6.27973 5.29286C5.88919 4.90235 5.25603 4.90238 4.86552 5.29293C3.09635 7.06226 2 9.49298 2 12.1764C2 17.6204 6.49591 22 12 22C17.5041 22 22 17.6204 22 12.1764C22 9.49298 20.9036 7.06226 19.1345 5.29293C18.744 4.90238 18.1108 4.90235 17.7203 5.29286C17.3297 5.68337 17.3297 6.31653 17.7202 6.70707C19.1338 8.12083 20 10.0503 20 12.1764C20 16.4787 16.437 20 12 20C7.56296 20 4 16.4787 4 12.1764C4 10.0503 4.86618 8.12083 6.2798 6.70707Z\"\n                    fill=\"none\" />\n            </svg>\n        </cf-console-toolbar-default-button> }\n        }\n\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button (clicked)=\"consoleContext().console.copyScreenshot()\"\n            [disabled]=\"!consoleContext().state.isConnected()\" label=\"Screenshot\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M9.15023 3.01742C9.13605 3.03985 9.12278 3.0676 9.11298 3.09958C9.11044 3.10789 9.10778 3.11617 9.10502 3.12442L8.36963 5.31787C8.23301 5.72537 7.85129 6 7.4215 6H3C2.44772 6 2 6.44772 2 7V20C2 20.5523 2.44771 21 3 21H21C21.5523 21 22 20.5523 22 20V7C22 6.44771 21.5523 6 21 6H16.331C15.9011 6 15.5194 5.72528 15.3828 5.31769L14.6479 3.12423C14.6452 3.11605 14.6425 3.10783 14.64 3.09958C14.6302 3.0676 14.6169 3.03985 14.6027 3.01742C14.5986 3.01089 14.5946 3.00509 14.5908 3H9.16221C9.1584 3.00509 9.15437 3.01089 9.15023 3.01742ZM7.20525 2.49911C7.43535 1.76672 8.10563 1 9.06392 1H14.6891C15.6474 1 16.3177 1.76679 16.5478 2.49922L17.0506 4H21C22.6569 4 24 5.34315 24 7V20C24 21.6569 22.6569 23 21 23H3C1.34315 23 0 21.6569 0 20V7C0 5.34315 1.34315 4 3 4H6.70206L7.20525 2.49911ZM7 13C7 10.2386 9.23858 8 12 8C14.7614 8 17 10.2386 17 13C17 15.7614 14.7614 18 12 18C9.23858 18 7 15.7614 7 13ZM12 10C10.3431 10 9 11.3431 9 13C9 14.6569 10.3431 16 12 16C13.6569 16 15 14.6569 15 13C15 11.3431 13.6569 10 12 10Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if (!cfConfig.disabledFeatures.consoleScreenRecord) {\n        <cf-console-toolbar-default-button (clicked)=\"handleRecordToggle()\"\n            [disabled]=\"!consoleContext().state.isRecordingAvailable()\"\n            [isOngoing]=\"!!consoleContext().state.activeConsoleRecording()\" label=\"Record\">\n            @if (!consoleContext().state.activeConsoleRecording()) {\n            <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                        <g id=\"Dribbble-Light-Preview\" transform=\"translate(-100.000000, -3879.000000)\" fill=\"#000000\">\n                            <g id=\"icons\" transform=\"translate(56.000000, 160.000000)\">\n                                <path\n                                    d=\"M56,3719 L56,3721 L62,3721 L62,3727 L64,3727 L64,3719 L56,3719 Z M58,3729.151 C58,3726.942 56.209,3725.151 54,3725.151 C51.791,3725.151 50,3726.942 50,3729.151 C50,3731.36 51.791,3733.151 54,3733.151 C56.209,3733.151 58,3731.36 58,3729.151 L58,3729.151 Z M62,3737 L56,3737 L56,3739 L64,3739 L64,3731 L62,3731 L62,3737 Z M46,3731 L44,3731 L44,3739 L52,3739 L52,3737 L46,3737 L46,3731 Z M46,3727 L44,3727 L44,3719 L52,3719 L52,3721 L46,3721 L46,3727 Z\"\n                                    id=\"record-[#979]\"> </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 -0.5 21 21\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                        <g id=\"Dribbble-Light-Preview\" transform=\"translate(-59.000000, -440.000000)\" fill=\"#000000\">\n                            <g id=\"icons\" transform=\"translate(56.000000, 160.000000)\">\n                                <path\n                                    d=\"M9.3,294 L17.7,294 L17.7,286 L9.3,286 L9.3,294 Z M15.6,280 L15.6,282 L21.9,282 L21.9,288 L24,288 L24,280 L15.6,280 Z M21.9,298 L15.6,298 L15.6,300 L24,300 L24,292 L21.9,292 L21.9,298 Z M5.1,292 L3,292 L3,300 L11.4,300 L11.4,298 L5.1,298 L5.1,292 Z M5.1,288 L3,288 L3,280 L11.4,280 L11.4,282 L5.1,282 L5.1,288 Z\"\n                                    id=\"stop-[#1470]\"> </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            }\n        </cf-console-toolbar-default-button>\n        }\n\n        <cf-console-toolbar-default-button (clicked)=\"consoleContext().console.toggleFullscreen()\" label=\"Fullscreen\">\n            @if (consoleContext().state.isFullscreenAvailable()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M4 2C2.89543 2 2 2.89543 2 4V8C2 8.55228 2.44772 9 3 9C3.55228 9 4 8.55228 4 8V4H8C8.55228 4 9 3.55228 9 3C9 2.44772 8.55228 2 8 2H4Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M20 2C21.1046 2 22 2.89543 22 4V8C22 8.55228 21.5523 9 21 9C20.4477 9 20 8.55228 20 8V4H16C15.4477 4 15 3.55228 15 3C15 2.44772 15.4477 2 16 2H20Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M20 22C21.1046 22 22 21.1046 22 20V16C22 15.4477 21.5523 15 21 15C20.4477 15 20 15.4477 20 16V20H16C15.4477 20 15 20.4477 15 21C15 21.5523 15.4477 22 16 22H20Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M2 20C2 21.1046 2.89543 22 4 22H8C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20H4V16C4 15.4477 3.55228 15 3 15C2.44772 15 2 15.4477 2 16V20Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M7 9C8.10457 9 9 8.10457 9 7V3C9 2.44772 8.55228 2 8 2C7.44772 2 7 2.44772 7 3V7H3C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9H7Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M17 9C15.8954 9 15 8.10457 15 7V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H17Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M17 15C15.8954 15 15 15.8954 15 17V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V17H21C21.5523 17 22 16.5523 22 16C22 15.4477 21.5523 15 21 15H17Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M9 17C9 15.8954 8.10457 15 7 15H3C2.44772 15 2 15.4477 2 16C2 16.5523 2.44772 17 3 17H7V21C7 21.5523 7.44772 22 8 22C8.55228 22 9 21.5523 9 21V17Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n            }\n        </cf-console-toolbar-default-button>\n    </div>\n\n    <dialog [open]=\"isClipboardDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleClipboardDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Clipboard</strong>\n                </p>\n            </header>\n\n            @if (consoleContext().console.supportedFeatures().clipboardRemoteWrite) {\n            <div class=\"dialog-section\">\n                <h2>Send Text to Remote Clipboard</h2>\n                <form (submit)=\"handleSendClipboardText($event, clipboardText.value)\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" class=\"clipboard-text\" aria-label=\"Clipboard text\"\n                            placeholder=\"Enter text to send to the remote clipboard\" #clipboardText autofocus>\n                        <button type=\"submit\"\n                            [disabled]=\"!clipboardText.value || !consoleContext().state.isConnected\">Send</button>\n                    </fieldset>\n                </form>\n            </div>\n            }\n\n            <div class=\"dialog-section\">\n                <h2>Remote Clipboard Content</h2>\n                <form (submit)=\"handleClipboardCopyLastText(consoleLastClipboardText.value)\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" id=\"textFromConsoleClipboard\" name=\"textFromConsoleClipboard\"\n                            class=\"clipboard-text\" aria-describedby=\"textFromConsoleClipboard-helper\"\n                            aria-label=\"Clipboard text\" disabled\n                            [value]=\"consoleContext().clipboard.consoleClipboardText()\"\n                            placeholder=\"Text on the remote will appear here\" #consoleLastClipboardText>\n                        <button type=\"submit\" [disabled]=\"!consoleLastClipboardText.value\">Copy</button>\n                    </fieldset>\n                    @if(consoleContext().userSettings.settings().console.allowCopyToLocalClipboard &&\n                    consoleContext().console.supportedFeatures().clipboardAutomaticLocalCopy)\n                    {\n                    <small id=\"textFromConsoleClipboard-helper\">\n                        Copied text on the remote machine will automatically copy to your local clipboard.\n                        Disable this in Settings.\n                    </small>\n                    }\n                </form>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isKeyboardDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"isKeyboardDialogOpen = false\"></button>\n                <p>\n                    <strong>Send Keystrokes</strong>\n                </p>\n            </header>\n\n            <div class=\"dialog-section\">\n                <h2>Send Keystrokes to Console</h2>\n                <form (submit)=\"handleSendKeyboardInput($event, keyboardInputText())\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" id=\"keyboardInputText\" name=\"keyboardInputText\" class=\"keyboard-text\"\n                            aria-label=\"Keyboard text\" placeholder=\"Enter text to send as keyboard input to the console\"\n                            autofocus [(ngModel)]=\"keyboardInputText\">\n                        <button type=\"submit\"\n                            [disabled]=\"!keyboardInputText() || !consoleContext().state.isConnected\">Send</button>\n                    </fieldset>\n                </form>\n            </div>\n\n            <div class=\"dialog-section\">\n                <h2>Special Key Combinations</h2>\n\n                <div class=\"dialog-button-group\">\n                    <button type=\"button\" aria-label=\"Send Ctrl+Alt+Delete\" (click)=\"handlSendKeyboardCtrlAltDel()\">\n                        Ctrl + Alt + Delete\n                    </button>\n                </div>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isNetworkDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleNetworkDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Networks</strong>\n                </p>\n            </header>\n\n            <form>\n                @for (nic of consoleContext().networks.config()?.nics; track nic)\n                {\n                <label for=\"nic-{{ nic }}-select\">{{ nic }}</label>\n                <fieldset role=\"group\">\n                    <select #availableNetworksSelect name=\"nic-{{ nic }}-select\"\n                        aria-label=\"Select a network to connect to\">\n\n                        @if (!cfConfig.disabledFeatures.networkDisconnection)\n                        {\n                        <option [selected]=\"!consoleContext().networks.config()?.currentConnections?.[nic]\" value=\"\">\n                            [Disconnected]\n                        </option>\n                        }\n\n                        @for(network of consoleContext().networks.config()?.networks; track network) {\n                        <option [value]=\"network\"\n                            [selected]=\"consoleContext().networks.config()?.currentConnections?.[nic] === network\">\n                            {{ network }}\n                        </option>\n                        }\n                    </select>\n\n                    <button type=\"button\"\n                        (click)=\"handleNetworkChangeRequested({ network: availableNetworksSelect.value, nic: nic })\">\n                        {{ availableNetworksSelect.value ? \"Connect\" : \"Disconnect\" }}\n                    </button>\n                </fieldset>\n                }\n\n                @if (!cfConfig.disabledFeatures.networkDisconnection)\n                {\n                <hr />\n                <div class=\"dialog-button-group\">\n                    <button class=\"secondary\" type=\"button\" (click)=\"handleNetworkDisconnectAllRequested()\">\n                        Disconnect All Network Interfaces\n                    </button>\n                </div>\n                }\n            </form>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isPowerDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"isPowerDialogOpen = false\"></button>\n                <p>\n                    <strong>Power</strong>\n                </p>\n            </header>\n\n            <div class=\"dialog-button-group\">\n                <button type=\"button\" (click)=\"handleSendPowerRequest('reboot')\">Request Reboot</button>\n                <button type=\"button\" (click)=\"handleSendPowerRequest('shutdown')\">Request Shutdown</button>\n                <hr />\n                <button class=\"secondary\" type=\"button\" (click)=\"handleSendPowerRequest('rebootHard')\">\n                    Request Hard Reboot\n                </button>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isSettingsDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleSettingsDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Settings</strong>\n                </p>\n            </header>\n\n            <div class=\"settings-form\">\n                <div class=\"settings-behavior dialog-section\">\n                    <h4>Behavior</h4>\n                    <fieldset>\n                        <label>\n                            <input #inputAllowLocalClipboardWrite type=\"checkbox\" name=\"allowLocalClipboardWrite\"\n                                [checked]=\"consoleContext().userSettings.settings().console.allowCopyToLocalClipboard\"\n                                (change)=\"handleSettingsAllowLocalClipboardWrite(inputAllowLocalClipboardWrite.checked)\" />\n                            Allow the remote machine to copy text to my local clipboard\n                        </label>\n                        <label>\n                            <input #inputAttemptRemoteSessionResize type=\"checkbox\" name=\"attemptRemoteSessionResize\"\n                                [checked]=\"consoleContext().userSettings.settings().console.attemptRemoteSessionResize\"\n                                (change)=\"handleSettingsAttemptRemoteSessionResize(inputAttemptRemoteSessionResize.checked)\" />\n                            Attempt to resize the remote session to match local resolution\n                        </label>\n                        <label>\n                            <input #inputScaleToContainerSize type=\"checkbox\" name=\"scaleToContainerSize\"\n                                [checked]=\"consoleContext().userSettings.settings().console.scaleToCanvasHostSize\"\n                                (change)=\"handleSettingsScaleToContainerHostSize(inputScaleToContainerSize.checked)\" />\n                            Scale to maximum available size\n                        </label>\n                    </fieldset>\n                </div>\n\n                <div class=\"settings-toolbar-dock dialog-section\">\n                    <h4>Toolbar Position</h4>\n                    <div role=\"group\">\n                        <button (click)=\"handleChangeToolbarPosition('left')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'left'\">Left</button>\n                        <button (click)=\"handleChangeToolbarPosition('right')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'right'\">Right</button>\n                        <button (click)=\"handleChangeToolbarPosition('top')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'top'\">Top</button>\n                        <button (click)=\"handleChangeToolbarPosition('bottom')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'bottom'\">Bottom</button>\n                    </div>\n                </div>\n\n                <div class=\"settings-theme dialog-section\">\n                    <h4>Theme</h4>\n                    <div role=\"group\">\n                        <button (click)=\"handleToolbarThemeChange('light')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === 'light'\">Light</button>\n                        <button (click)=\"handleToolbarThemeChange('dark')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === 'dark'\">Dark</button>\n                        <button (click)=\"handleToolbarThemeChange(undefined)\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === undefined\">\n                            My Default\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </article>\n    </dialog>\n</div>\n}\n", styles: [":host{display:block;height:100%;width:100%;max-width:100%}fieldset legend{font-weight:700}.toolbar-container{background-color:var(--pico-background-color);padding:4px;height:100%;display:flex;align-items:center;justify-content:center}.toolbar-container .button-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.toolbar-container .buttons-divider{border-top:1px solid var(--pico-color);margin:.25rem 0;width:100%}.toolbar-container.horizontal{width:100%}.toolbar-container.horizontal .button-container{flex-direction:row}.toolbar-container.horizontal .buttons-divider{align-self:stretch;border-left:1px solid var(--pico-color);height:auto;margin:0 1rem;width:1px}.toolbar-position-buttons{display:flex;gap:4px}.toolbar-position-buttons button{flex-grow:1}.settings-toolbar-dock{margin-top:1rem}dialog h2{font-size:1.1rem;font-weight:700}dialog small{font-size:.8rem}dialog .dialog-section:not(:last-of-type){margin-bottom:2rem}dialog .dialog-button-group button{display:block;width:100%}\n"] }]
-        }], ctorParameters: () => [] });
-//  ===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 ConsoleForgeConfig {
-}
-const defaultCfConfig = {
-    canvasRecording: {
-        autoDownloadCompletedRecordings: true,
-        chunkLength: 1000,
-        frameRate: 25,
-        maxDuration: 10000,
-        mimeType: "video/webm"
-    },
-    consoleBackgroundStyle: "rgb(40, 40, 40)",
-    disabledFeatures: {
-        clipboard: false,
-        consoleScreenRecord: false,
-        manualConsoleReconnect: false,
-        networkDisconnection: false,
-    },
-    logThreshold: LogLevel.WARNING,
-    showBrowserNotificationsOnConsoleEvents: true,
-    toolbar: {
-        component: ConsoleToolbarDefaultComponent,
-        disabled: false
-    }
-};
 //  ===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 VncConsoleClientService {
     clientType = "vnc";
-    _consoleClipboardUpdated = signal("");
+    _consoleClipboardUpdated = signal("", ...(ngDevMode ? [{ debugName: "_consoleClipboardUpdated" }] : /* istanbul ignore next */ []));
     consoleClipboardUpdated = this._consoleClipboardUpdated.asReadonly();
-    _connectionStatus = signal("disconnected");
+    _connectionStatus = signal("disconnected", ...(ngDevMode ? [{ debugName: "_connectionStatus" }] : /* istanbul ignore next */ []));
     connectionStatus = this._connectionStatus.asReadonly();
     _supportedFeatures = signal({
         clipboardAutomaticLocalCopy: true,
@@ -489,7 +245,7 @@ class VncConsoleClientService {
         powerManagement: false,
         requireReconnectOnExitingFullscreen: true,
         viewOnlyMode: true
-    });
+    }, ...(ngDevMode ? [{ debugName: "_supportedFeatures" }] : /* istanbul ignore next */ []));
     supportedFeatures = this._supportedFeatures.asReadonly();
     // injected services
     cfConfig = inject(ConsoleForgeConfig);
@@ -538,7 +294,7 @@ class VncConsoleClientService {
                 this.logger.log(LogLevel.DEBUG, "Client instantiated. Configuring...");
                 this.doPreConnectionConfig(client);
                 this.logger.log(LogLevel.DEBUG, "Pre-connection config done.");
-                client.addEventListener("disconnect", event => {
+                client.addEventListener("disconnect", (event) => {
                     if (isResolved) {
                         return;
                     }
@@ -651,8 +407,8 @@ class VncConsoleClientService {
             this._connectionStatus.update(() => "connected");
             this.logger.log(LogLevel.INFO, "Connected!");
         });
-        client.addEventListener("disconnect", ev => this.handleDisconnect(ev.detail.clean));
-        client.addEventListener("clipboard", ev => {
+        client.addEventListener("disconnect", (ev) => this.handleDisconnect(ev.detail.clean));
+        client.addEventListener("clipboard", (ev) => {
             // emit the event
             this._consoleClipboardUpdated.update(() => ev.detail.text);
             // if enabled at the app level and permitted by the user, automatically copy text to local clipboard
@@ -701,10 +457,10 @@ class VncConsoleClientService {
             this.logger.log(LogLevel.WARNING, "Couldn't update VNC client settings from user settings.", err);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VncConsoleClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VncConsoleClientService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VncConsoleClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VncConsoleClientService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VncConsoleClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VncConsoleClientService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -773,10 +529,10 @@ class UuidService {
         }
         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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UuidService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UuidService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UuidService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UuidService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -795,9 +551,9 @@ class VmWareConsoleClientService {
     window = inject(WINDOW);
     wmksClient;
     clientType = "vmware";
-    _connectionStatus = signal("disconnected");
+    _connectionStatus = signal("disconnected", ...(ngDevMode ? [{ debugName: "_connectionStatus" }] : /* istanbul ignore next */ []));
     connectionStatus = this._connectionStatus.asReadonly();
-    _consoleClipboardUpdated = signal("");
+    _consoleClipboardUpdated = signal("", ...(ngDevMode ? [{ debugName: "_consoleClipboardUpdated" }] : /* istanbul ignore next */ []));
     consoleClipboardUpdated = this._consoleClipboardUpdated.asReadonly();
     _supportedFeatures = signal({
         clipboardAutomaticLocalCopy: false,
@@ -805,7 +561,7 @@ class VmWareConsoleClientService {
         onScreenKeyboard: true,
         powerManagement: false,
         viewOnlyMode: false
-    });
+    }, ...(ngDevMode ? [{ debugName: "_supportedFeatures" }] : /* istanbul ignore next */ []));
     supportedFeatures = this._supportedFeatures.asReadonly();
     _needsCanvasSizeUpdate = new Subject();
     _needsCanvasSizeUpdateSub = this._needsCanvasSizeUpdate.pipe(debounceTime(250), takeUntilDestroyed()).subscribe(() => {
@@ -990,10 +746,10 @@ class VmWareConsoleClientService {
         this.wmksClient.setOption("rescale", settings.console.scaleToCanvasHostSize);
         this.wmksClient.updateScreen();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VmWareConsoleClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VmWareConsoleClientService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VmWareConsoleClientService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VmWareConsoleClientService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: VmWareConsoleClientService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: VmWareConsoleClientService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1024,10 +780,10 @@ class ConsoleClientFactoryService {
                 throw new Error(`Console type ${consoleClientType} NYI`);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleClientFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleClientFactoryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleClientFactoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleClientFactoryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleClientFactoryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleClientFactoryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1038,9 +794,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 //  ===END LICENSE===
 class FullScreenService {
     doc = inject(DOCUMENT);
-    _isAvailable = signal(this.doc.fullscreenEnabled);
+    _isAvailable = signal(this.doc.fullscreenEnabled, ...(ngDevMode ? [{ debugName: "_isAvailable" }] : /* istanbul ignore next */ []));
     isAvailable = this._isAvailable.asReadonly();
-    _isActive = signal(false);
+    _isActive = signal(false, ...(ngDevMode ? [{ debugName: "_isActive" }] : /* istanbul ignore next */ []));
     isActive = this._isActive.asReadonly();
     constructor() {
         this.doc.addEventListener("fullscreenchange", () => {
@@ -1057,10 +813,10 @@ class FullScreenService {
     async tryFullscreen(element) {
         return element.requestFullscreen({ navigationUI: "hide" });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FullScreenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FullScreenService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FullScreenService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FullScreenService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FullScreenService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FullScreenService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1132,7 +888,7 @@ class CanvasRecorderService {
     uuids = inject(UuidService);
     window = inject(WINDOW);
     activeRecordings = new Set();
-    _isRecording = signal(false);
+    _isRecording = signal(false, ...(ngDevMode ? [{ debugName: "_isRecording" }] : /* istanbul ignore next */ []));
     isRecording = this._isRecording.asReadonly();
     startRecord(canvas) {
         if (this.cfConfig.disabledFeatures.consoleScreenRecord) {
@@ -1155,10 +911,10 @@ class CanvasRecorderService {
         this.activeRecordings.delete(recording);
         this._isRecording.set(this.activeRecordings.size > 0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanvasRecorderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanvasRecorderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CanvasRecorderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CanvasRecorderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanvasRecorderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CanvasRecorderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1170,7 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 // EXPLICITLY not provided in root - this is provided by ConsoleComponent,
 // and each should get its own
 class CanvasService {
-    _canvas = signal(null);
+    _canvas = signal(null, ...(ngDevMode ? [{ debugName: "_canvas" }] : /* istanbul ignore next */ []));
     canvas = this._canvas.asReadonly();
     clearCanvas() {
         this._canvas.update(() => null);
@@ -1178,10 +934,10 @@ class CanvasService {
     setCanvas(canvas) {
         this._canvas.update(() => canvas);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanvasService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CanvasService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CanvasService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanvasService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: CanvasService, decorators: [{
             type: Injectable
         }] });
@@ -1202,10 +958,10 @@ class BlobDownloaderService {
         this.doc.body.removeChild(a);
         URL.revokeObjectURL(url); // free memory
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlobDownloaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlobDownloaderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BlobDownloaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BlobDownloaderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BlobDownloaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BlobDownloaderService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1215,10 +971,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 //  Released under an MIT (SEI)-style license. See the LICENSE.md file for license information.
 //  ===END LICENSE===
 class ConsoleToolbarComponent {
-    consoleClient = input.required();
-    consoleNetworkConfig = input();
-    customToolbarComponent = input();
-    isViewOnly = input.required();
+    consoleClient = input.required(...(ngDevMode ? [{ debugName: "consoleClient" }] : /* istanbul ignore next */ []));
+    consoleNetworkConfig = input(...(ngDevMode ? [undefined, { debugName: "consoleNetworkConfig" }] : /* istanbul ignore next */ []));
+    customToolbarComponent = input(...(ngDevMode ? [undefined, { debugName: "customToolbarComponent" }] : /* istanbul ignore next */ []));
+    isViewOnly = input.required(...(ngDevMode ? [{ debugName: "isViewOnly" }] : /* istanbul ignore next */ []));
     canvasRecordingStarted = output();
     canvasRecordingFinished = output();
     ctrlAltDelSent = output();
@@ -1239,11 +995,11 @@ class ConsoleToolbarComponent {
     userSettings = inject(UserSettingsService);
     window = inject(WINDOW);
     // component state
-    activeConsoleRecording = signal(undefined);
-    isConnected = computed(() => this.consoleClient()?.connectionStatus() === "connected");
-    isManualConsoleReconnectAvailable = computed(() => !this.config.disabledFeatures.manualConsoleReconnect && this.consoleClient()?.connectionStatus() !== "connecting");
+    activeConsoleRecording = signal(undefined, ...(ngDevMode ? [{ debugName: "activeConsoleRecording" }] : /* istanbul ignore next */ []));
+    isConnected = computed(() => this.consoleClient()?.connectionStatus() === "connected", ...(ngDevMode ? [{ debugName: "isConnected" }] : /* istanbul ignore next */ []));
+    isManualConsoleReconnectAvailable = computed(() => !this.config.disabledFeatures.manualConsoleReconnect && this.consoleClient()?.connectionStatus() !== "connecting", ...(ngDevMode ? [{ debugName: "isManualConsoleReconnectAvailable" }] : /* istanbul ignore next */ []));
     toolbarComponentContext;
-    toolbarComponent = computed(() => this.customToolbarComponent() || this.config.toolbar.component);
+    toolbarComponent = computed(() => this.customToolbarComponent() || this.config.toolbar.component, ...(ngDevMode ? [{ debugName: "toolbarComponent" }] : /* istanbul ignore next */ []));
     constructor() {
         this.toolbarComponentContext = {
             clipboard: {
@@ -1384,13 +1140,13 @@ class ConsoleToolbarComponent {
             this.consoleClient().sendClipboardText(text);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ConsoleToolbarComponent, isStandalone: true, selector: "cf-console-toolbar", inputs: { consoleClient: { classPropertyName: "consoleClient", publicName: "consoleClient", isSignal: true, isRequired: true, transformFunction: null }, consoleNetworkConfig: { classPropertyName: "consoleNetworkConfig", publicName: "consoleNetworkConfig", isSignal: true, isRequired: false, transformFunction: null }, customToolbarComponent: { classPropertyName: "customToolbarComponent", publicName: "customToolbarComponent", isSignal: true, isRequired: false, transformFunction: null }, isViewOnly: { classPropertyName: "isViewOnly", publicName: "isViewOnly", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { canvasRecordingStarted: "canvasRecordingStarted", canvasRecordingFinished: "canvasRecordingFinished", ctrlAltDelSent: "ctrlAltDelSent", keyboardInputSent: "keyboardInputSent", networkConnectionRequested: "networkConnectionRequested", networkDisconnectRequested: "networkDisconnectRequested", powerRequestSent: "powerRequestSent", reconnectRequestSent: "reconnectRequestSent", screenshotCopied: "screenshotCopied", toggleFullscreen: "toggleFullscreen" }, 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@if (toolbarComponent()) {\n<ng-container *ngComponentOutlet=\"toolbarComponent()!; inputs: { 'consoleContext': toolbarComponentContext }\" />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ConsoleToolbarComponent, isStandalone: true, selector: "cf-console-toolbar", inputs: { consoleClient: { classPropertyName: "consoleClient", publicName: "consoleClient", isSignal: true, isRequired: true, transformFunction: null }, consoleNetworkConfig: { classPropertyName: "consoleNetworkConfig", publicName: "consoleNetworkConfig", isSignal: true, isRequired: false, transformFunction: null }, customToolbarComponent: { classPropertyName: "customToolbarComponent", publicName: "customToolbarComponent", isSignal: true, isRequired: false, transformFunction: null }, isViewOnly: { classPropertyName: "isViewOnly", publicName: "isViewOnly", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { canvasRecordingStarted: "canvasRecordingStarted", canvasRecordingFinished: "canvasRecordingFinished", ctrlAltDelSent: "ctrlAltDelSent", keyboardInputSent: "keyboardInputSent", networkConnectionRequested: "networkConnectionRequested", networkDisconnectRequested: "networkDisconnectRequested", powerRequestSent: "powerRequestSent", reconnectRequestSent: "reconnectRequestSent", screenshotCopied: "screenshotCopied", toggleFullscreen: "toggleFullscreen" }, 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@if (toolbarComponent()) {\n<ng-container *ngComponentOutlet=\"toolbarComponent()!; inputs: { 'consoleContext': toolbarComponentContext }\" />\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cf-console-toolbar', imports: [CommonModule], 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@if (toolbarComponent()) {\n<ng-container *ngComponentOutlet=\"toolbarComponent()!; inputs: { 'consoleContext': toolbarComponentContext }\" />\n}\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { consoleClient: [{ type: i0.Input, args: [{ isSignal: true, alias: "consoleClient", required: true }] }], consoleNetworkConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "consoleNetworkConfig", required: false }] }], customToolbarComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "customToolbarComponent", required: false }] }], isViewOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isViewOnly", required: true }] }], canvasRecordingStarted: [{ type: i0.Output, args: ["canvasRecordingStarted"] }], canvasRecordingFinished: [{ type: i0.Output, args: ["canvasRecordingFinished"] }], ctrlAltDelSent: [{ type: i0.Output, args: ["ctrlAltDelSent"] }], keyboardInputSent: [{ type: i0.Output, args: ["keyboardInputSent"] }], networkConnectionRequested: [{ type: i0.Output, args: ["networkConnectionRequested"] }], networkDisconnectRequested: [{ type: i0.Output, args: ["networkDisconnectRequested"] }], powerRequestSent: [{ type: i0.Output, args: ["powerRequestSent"] }], reconnectRequestSent: [{ type: i0.Output, args: ["reconnectRequestSent"] }], screenshotCopied: [{ type: i0.Output, args: ["screenshotCopied"] }], toggleFullscreen: [{ type: i0.Output, args: ["toggleFullscreen"] }] } });
 //  ===BEGIN LICENSE===
 //  Copyright 2025 Carnegie Mellon University. All rights reserved.
@@ -1420,20 +1176,61 @@ class BrowserNotificationsService {
             };
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BrowserNotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BrowserNotificationsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BrowserNotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BrowserNotificationsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: BrowserNotificationsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class PicoCssService {
+    sheet;
+    loading;
+    loadStyleSheet() {
+        if (this.sheet)
+            return Promise.resolve(this.sheet);
+        if (!this.loading) {
+            this.loading = fetch('assets/pico.min.css')
+                .then(r => r.text())
+                .then(css => {
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync(css);
+                this.sheet = sheet;
+            });
+        }
+        return this.loading.then(() => this.sheet);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PicoCssService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PicoCssService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BrowserNotificationsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: PicoCssService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
+class ApplyToolbarThemeDirective {
+    hostElement = inject((ElementRef));
+    userSettings = inject(UserSettingsService).settings;
+    constructor() {
+        effect(() => {
+            this.hostElement.nativeElement.setAttribute("data-theme", this.userSettings().toolbar.preferTheme);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ApplyToolbarThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: ApplyToolbarThemeDirective, isStandalone: true, selector: "[cfApplyToolbarTheme]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ApplyToolbarThemeDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[cfApplyToolbarTheme]' }]
+        }], ctorParameters: () => [] });
 //  ===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 ConsoleStatusComponent {
-    status = input("disconnected");
+    status = input("disconnected", ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     reconnectRequest = output();
     picoCssService = inject(PicoCssService);
     hostElement = inject((ElementRef));
@@ -1444,13 +1241,13 @@ class ConsoleStatusComponent {
             this.hostElement.nativeElement.shadowRoot.adoptedStyleSheets = [sheet];
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ConsoleStatusComponent, isStandalone: true, selector: "cf-console-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reconnectRequest: "reconnectRequest" }, 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 cfApplyToolbarTheme>\n    @if (status() === \"connecting\") {\n    <progress></progress>\n    }\n    @else if(!status() || status() == \"disconnected\") {\n    <div class=\"disconnected-banner\" (click)=\"reconnectRequest.emit()\">\n        Console disconnected\n    </div>\n    }\n</div>\n", styles: [".disconnected-banner{background-color:var(--pico-form-element-invalid-active-border-color);color:var(--pico-primary-inverse);cursor:pointer;font-weight:700;padding:4px 0;text-align:center}progress{width:100%;margin:0!important}\n"], dependencies: [{ kind: "directive", type: ApplyToolbarThemeDirective, selector: "[cfApplyToolbarTheme]" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ConsoleStatusComponent, isStandalone: true, selector: "cf-console-status", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { reconnectRequest: "reconnectRequest" }, 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 cfApplyToolbarTheme>\n    @if (status() === \"connecting\") {\n    <progress></progress>\n    }\n    @else if(status() === \"disconnected\") {\n    <div class=\"disconnected-banner\" (click)=\"reconnectRequest.emit()\">\n        Console disconnected\n    </div>\n    }\n</div>\n", styles: [".disconnected-banner{background-color:var(--pico-form-element-invalid-active-border-color);color:var(--pico-primary-inverse);cursor:pointer;font-weight:700;padding:4px 0;text-align:center}progress{width:100%;margin:0!important}\n"], dependencies: [{ kind: "directive", type: ApplyToolbarThemeDirective, selector: "[cfApplyToolbarTheme]" }], encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cf-console-status', imports: [ApplyToolbarThemeDirective], encapsulation: ViewEncapsulation.ShadowDom, 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 cfApplyToolbarTheme>\n    @if (status() === \"connecting\") {\n    <progress></progress>\n    }\n    @else if(!status() || status() == \"disconnected\") {\n    <div class=\"disconnected-banner\" (click)=\"reconnectRequest.emit()\">\n        Console disconnected\n    </div>\n    }\n</div>\n", styles: [".disconnected-banner{background-color:var(--pico-form-element-invalid-active-border-color);color:var(--pico-primary-inverse);cursor:pointer;font-weight:700;padding:4px 0;text-align:center}progress{width:100%;margin:0!important}\n"] }]
-        }] });
+            args: [{ selector: 'cf-console-status', imports: [ApplyToolbarThemeDirective], encapsulation: ViewEncapsulation.ShadowDom, 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 cfApplyToolbarTheme>\n    @if (status() === \"connecting\") {\n    <progress></progress>\n    }\n    @else if(status() === \"disconnected\") {\n    <div class=\"disconnected-banner\" (click)=\"reconnectRequest.emit()\">\n        Console disconnected\n    </div>\n    }\n</div>\n", styles: [".disconnected-banner{background-color:var(--pico-form-element-invalid-active-border-color);color:var(--pico-primary-inverse);cursor:pointer;font-weight:700;padding:4px 0;text-align:center}progress{width:100%;margin:0!important}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], reconnectRequest: [{ type: i0.Output, args: ["reconnectRequest"] }] } });
 //  ===BEGIN LICENSE===
 //  Copyright 2025 Carnegie Mellon University. All rights reserved.
@@ -1458,12 +1255,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 //  ===END LICENSE===
 class ConsoleComponent {
     // component I/O
-    autoConnect = input(true);
-    config = input.required();
-    isViewOnly = input(false);
-    networkConfig = input();
-    toolbarComponent = input();
-    toolbarDisabled = input(false);
+    autoConnect = input(true, ...(ngDevMode ? [{ debugName: "autoConnect" }] : /* istanbul ignore next */ []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    isViewOnly = input(false, ...(ngDevMode ? [{ debugName: "isViewOnly" }] : /* istanbul ignore next */ []));
+    networkConfig = input(...(ngDevMode ? [undefined, { debugName: "networkConfig" }] : /* istanbul ignore next */ []));
+    toolbarComponent = input(...(ngDevMode ? [undefined, { debugName: "toolbarComponent" }] : /* istanbul ignore next */ []));
+    toolbarDisabled = input(false, ...(ngDevMode ? [{ debugName: "toolbarDisabled" }] : /* istanbul ignore next */ []));
     connectionStatusChanged = output();
     consoleClipboardUpdated = output();
     consoleRecorded = output();
@@ -1489,8 +1286,8 @@ class ConsoleComponent {
     componentContainer = viewChild.required("componentContainer");
     consoleHostElement = viewChild.required("consoleHost");
     // other component state
-    consoleClient = signal(undefined);
-    consoleClientConnectionStatus = computed(() => this.consoleClient()?.connectionStatus());
+    consoleClient = signal(undefined, ...(ngDevMode ? [{ debugName: "consoleClient" }] : /* istanbul ignore next */ []));
+    consoleClientConnectionStatus = computed(() => this.consoleClient()?.connectionStatus(), ...(ngDevMode ? [{ debugName: "consoleClientConnectionStatus" }] : /* istanbul ignore next */ []));
     consoleHostBackgroundStyle = this.consoleForgeConfig.consoleBackgroundStyle;
     consoleHostElementId = `cf-console-${this.uuids.get()}`;
     isRecording = inject(CanvasRecorderService).isRecording;
@@ -1499,7 +1296,7 @@ class ConsoleComponent {
         return !(this.toolbarDisabled() || this.consoleForgeConfig.toolbar.disabled) &&
             // AND if a toolbar component has been specified either here or globally
             (this.toolbarComponent() || this.consoleForgeConfig.toolbar.component);
-    });
+    }, ...(ngDevMode ? [{ debugName: "toolbarEnabled" }] : /* istanbul ignore next */ []));
     userSettings = this.userSettingsService.settings;
     constructor() {
         // when config is provided and autoconnect is on, attempt to automatically connect
@@ -1639,13 +1436,13 @@ class ConsoleComponent {
         }
         return this.document.querySelector(`#${this.consoleHostElementId} canvas`) || undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ConsoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", 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;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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cf-console', standalone: true, imports: [
                         ConsoleStatusComponent,
@@ -1654,19 +1451,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         // 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;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: () => [] });
+        }], ctorParameters: () => [], propDecorators: { autoConnect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoConnect", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], isViewOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isViewOnly", required: false }] }], networkConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "networkConfig", required: false }] }], toolbarComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarComponent", required: false }] }], toolbarDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarDisabled", required: false }] }], connectionStatusChanged: [{ type: i0.Output, args: ["connectionStatusChanged"] }], consoleClipboardUpdated: [{ type: i0.Output, args: ["consoleClipboardUpdated"] }], consoleRecorded: [{ type: i0.Output, args: ["consoleRecorded"] }], ctrlAltDelSent: [{ type: i0.Output, args: ["ctrlAltDelSent"] }], localClipboardUpdated: [{ type: i0.Output, args: ["localClipboardUpdated"] }], networkConnectionRequested: [{ type: i0.Output, args: ["networkConnectionRequested"] }], networkDisconnectRequested: [{ type: i0.Output, args: ["networkDisconnectRequested"] }], powerRequestSent: [{ type: i0.Output, args: ["powerRequestSent"] }], reconnectRequest: [{ type: i0.Output, args: ["reconnectRequest"] }], screenshotCopied: [{ type: i0.Output, args: ["screenshotCopied"] }], componentContainer: [{ type: i0.ViewChild, args: ["componentContainer", { isSignal: true }] }], consoleHostElement: [{ type: i0.ViewChild, args: ["consoleHost", { isSignal: true }] }] } });
 class ConsoleTileComponent {
-    config = input();
+    config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
     clicked = output();
+    connectionStatus = output();
     reconnectRequest = output();
     cfConfig = inject(ConsoleForgeConfig);
     consoleClientFactory = inject(ConsoleClientFactoryService);
-    consoleHostElement = viewChild("consoleHost");
+    consoleHostElement = viewChild("consoleHost", ...(ngDevMode ? [{ debugName: "consoleHostElement" }] : /* istanbul ignore next */ []));
     logger = inject(LoggerService);
     uuids = inject(UuidService);
     consoleClient;
-    consoleClientType = computed(() => this.config()?.consoleClientType || this.cfConfig.defaultConsoleClientType);
+    consoleClientType = computed(() => this.config()?.consoleClientType || this.cfConfig.defaultConsoleClientType, ...(ngDevMode ? [{ debugName: "consoleClientType" }] : /* istanbul ignore next */ []));
     // 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();
@@ -1682,6 +1480,13 @@ class ConsoleTileComponent {
             this.connect(consoleHostElement.nativeElement);
             this.logger.log(LogLevel.DEBUG, "Reconnected console tile with config", config);
         });
+        // emit console connection status changes
+        effect(() => {
+            const status = this.consoleClient?.connectionStatus();
+            if (status) {
+                this.connectionStatus.emit(status);
+            }
+        });
     }
     async connect(hostElement) {
         const connectionConfig = this.config();
@@ -1699,20 +1504,228 @@ 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: { 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleTileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: ConsoleTileComponent, isStandalone: true, selector: "cf-console-tile", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", connectionStatus: "connectionStatus", 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}.console-host .feedback-container{display:none!important}\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", 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        [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: () => [] });
+                    ], 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}.console-host .feedback-container{display:none!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], connectionStatus: [{ type: i0.Output, args: ["connectionStatus"] }], reconnectRequest: [{ type: i0.Output, args: ["reconnectRequest"] }], consoleHostElement: [{ type: i0.ViewChild, args: ["consoleHost", { isSignal: true }] }] } });
+//  ===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===
+//  ===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 ClassOnHoverDirective {
+    applyClasses = input.required(...(ngDevMode ? [{ debugName: "applyClasses" }] : /* istanbul ignore next */ []));
+    directiveHost = inject(ElementRef);
+    handleMouseEnter() {
+        if (this.directiveHost?.nativeElement) {
+            this.directiveHost.nativeElement.classList.add(this.applyClasses());
+        }
+    }
+    handleMouseLeave() {
+        if (this.directiveHost?.nativeElement) {
+            this.directiveHost.nativeElement.classList.remove(this.applyClasses());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClassOnHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: ClassOnHoverDirective, isStandalone: true, selector: "[cfClassOnHover]", inputs: { applyClasses: { classPropertyName: "applyClasses", publicName: "applyClasses", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ClassOnHoverDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[cfClassOnHover]' }]
+        }], propDecorators: { applyClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyClasses", required: true }] }], handleMouseEnter: [{
+                type: HostListener,
+                args: ["mouseenter"]
+            }], handleMouseLeave: [{
+                type: HostListener,
+                args: ["mouseleave"]
+            }] } });
+//  ===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 ConsoleToolbarDefaultButtonComponent {
+    clicked = output();
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    isOngoing = input(false, ...(ngDevMode ? [{ debugName: "isOngoing" }] : /* istanbul ignore next */ []));
+    picoCssService = inject(PicoCssService);
+    hostElement = inject((ElementRef));
+    async ngAfterViewInit() {
+        const sheet = await this.picoCssService.loadStyleSheet();
+        if (this.hostElement.nativeElement.shadowRoot) {
+            this.hostElement.nativeElement.shadowRoot.adoptedStyleSheets = [sheet];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleToolbarDefaultButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ConsoleToolbarDefaultButtonComponent, isStandalone: true, selector: "cf-console-toolbar-default-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOngoing: { classPropertyName: "isOngoing", publicName: "isOngoing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, 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 class=\"svg-button\" cfClassOnHover applyClasses=\"hovered\" [ariaDisabled]=\"disabled()\"\n    [class.cursor-pointer]=\"!disabled()\" [class.disabled]=\"disabled()\" [class.ongoing]=\"isOngoing()\"\n    (click)=\"!disabled() && clicked.emit()\">\n    <div class=\"svg-container\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (label()) {\n    <div class=\"button-label\">{{ label() }}</div>\n    }\n</div>\n", styles: [":host{background-color:transparent;display:block}@keyframes glow-button-color{0%{color:var(--pico-muted-color);fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}35%{color:#ee402e;fill:#ee402e;stroke:#ee402e}65%{color:#ee402e;fill:#ee402e;stroke:#ee402e}to{color:var(--pico-muted-color);fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}}.svg-button{border:none;border-width:0!important;color:var(--pico-color);display:flex;font-weight:400;align-items:center;flex-direction:column;justify-content:center;margin:0}.svg-button:hover:not(.disabled){color:var(--pico-primary);fill:var(--pico-primary);stroke:var(--pico-primary);transition:all .3s ease}.svg-button.ongoing{animation:glow-button-color 2s infinite}.svg-button.disabled{color:var(--pico-muted-color)}.svg-container{height:var(--svg-icon-height);width:var(--svg-icon-width)}.button-label{font-size:.8rem;margin:0;text-align:center}.cursor-pointer{cursor:pointer}::ng-deep svg{height:56px;width:56px;padding:16px}::ng-deep svg,::ng-deep path,::ng-deep rect{fill:var(--pico-color);stroke:var(--pico-color)}::ng-deep svg.disabled,::ng-deep path.disabled,::ng-deep rect.disabled{fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}::ng-deep svg:hover,::ng-deep path:hover,::ng-deep rect:hover{color:var(--pico-color);transition:fill .3s ease}::ng-deep .hovered:not(.disabled) svg,::ng-deep .hovered:not(.disabled) path,::ng-deep .hovered:not(.disabled) rect{fill:var(--pico-primary);stroke:var(--pico-primary);transition:all .3s ease}::ng-deep .ongoing:not(.disabled) svg,::ng-deep .ongoing:not(.disabled) path,::ng-deep .ongoing:not(.disabled) rect,::ng-deep .ongoing:not(.disabled) .svg-button{animation:glow-button-color 2s infinite}\n"], dependencies: [{ kind: "directive", type: ClassOnHoverDirective, selector: "[cfClassOnHover]", inputs: ["applyClasses"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleToolbarDefaultButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cf-console-toolbar-default-button', imports: [ClassOnHoverDirective], 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 class=\"svg-button\" cfClassOnHover applyClasses=\"hovered\" [ariaDisabled]=\"disabled()\"\n    [class.cursor-pointer]=\"!disabled()\" [class.disabled]=\"disabled()\" [class.ongoing]=\"isOngoing()\"\n    (click)=\"!disabled() && clicked.emit()\">\n    <div class=\"svg-container\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (label()) {\n    <div class=\"button-label\">{{ label() }}</div>\n    }\n</div>\n", styles: [":host{background-color:transparent;display:block}@keyframes glow-button-color{0%{color:var(--pico-muted-color);fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}35%{color:#ee402e;fill:#ee402e;stroke:#ee402e}65%{color:#ee402e;fill:#ee402e;stroke:#ee402e}to{color:var(--pico-muted-color);fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}}.svg-button{border:none;border-width:0!important;color:var(--pico-color);display:flex;font-weight:400;align-items:center;flex-direction:column;justify-content:center;margin:0}.svg-button:hover:not(.disabled){color:var(--pico-primary);fill:var(--pico-primary);stroke:var(--pico-primary);transition:all .3s ease}.svg-button.ongoing{animation:glow-button-color 2s infinite}.svg-button.disabled{color:var(--pico-muted-color)}.svg-container{height:var(--svg-icon-height);width:var(--svg-icon-width)}.button-label{font-size:.8rem;margin:0;text-align:center}.cursor-pointer{cursor:pointer}::ng-deep svg{height:56px;width:56px;padding:16px}::ng-deep svg,::ng-deep path,::ng-deep rect{fill:var(--pico-color);stroke:var(--pico-color)}::ng-deep svg.disabled,::ng-deep path.disabled,::ng-deep rect.disabled{fill:var(--pico-muted-color);stroke:var(--pico-muted-color)}::ng-deep svg:hover,::ng-deep path:hover,::ng-deep rect:hover{color:var(--pico-color);transition:fill .3s ease}::ng-deep .hovered:not(.disabled) svg,::ng-deep .hovered:not(.disabled) path,::ng-deep .hovered:not(.disabled) rect{fill:var(--pico-primary);stroke:var(--pico-primary);transition:all .3s ease}::ng-deep .ongoing:not(.disabled) svg,::ng-deep .ongoing:not(.disabled) path,::ng-deep .ongoing:not(.disabled) rect,::ng-deep .ongoing:not(.disabled) .svg-button{animation:glow-button-color 2s infinite}\n"] }]
+        }], propDecorators: { clicked: [{ type: i0.Output, args: ["clicked"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isOngoing: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOngoing", required: false }] }] } });
+//  ===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 ConsoleToolbarDefaultComponent {
+    consoleContext = input.required(...(ngDevMode ? [{ debugName: "consoleContext" }] : /* istanbul ignore next */ []));
+    // component state
+    isClipboardDialogOpen = false;
+    isKeyboardDialogOpen = false;
+    isNetworkDialogOpen = false;
+    isPowerDialogOpen = false;
+    isSettingsDialogOpen = false;
+    keyboardInputText = model("", ...(ngDevMode ? [{ debugName: "keyboardInputText" }] : /* istanbul ignore next */ []));
+    // protected readonly selected = model<string>();
+    // services and viewkids
+    cfConfig = inject(ConsoleForgeConfig);
+    clipboardService = inject(ClipboardService);
+    clipboardTextInput = viewChild("clipboardText", ...(ngDevMode ? [{ debugName: "clipboardTextInput" }] : /* istanbul ignore next */ []));
+    picoCssService = inject(PicoCssService);
+    hostElement = inject((ElementRef));
+    // trying this out. when the network configuration (which is passed into the library by the end dev)
+    // changes, we need to update the model that holds the current network, so let's make a computed
+    // signal that represents that change so we can be sure our effect only happens when we want it to
+    // private readonly currentNetwork = (() => this.consoleContext()?.networks?.config()?.current || "");
+    constructor() {
+        // when the network config is changed, select the current network if exists
+        // effect(() => {
+        //   this.selectedNetworkForChange.update(() => this.currentNetwork());
+        // });
+    }
+    async ngAfterViewInit() {
+        // apply pico to this component
+        const sheet = await this.picoCssService.loadStyleSheet();
+        if (this.hostElement.nativeElement.shadowRoot) {
+            this.hostElement.nativeElement.shadowRoot.adoptedStyleSheets = [sheet];
+        }
+    }
+    handleChangeToolbarPosition(position) {
+        this.consoleContext().userSettings.patch({ toolbar: { dockTo: position } });
+    }
+    handleClipboardDialogOpenClose(isOpen) {
+        this.isClipboardDialogOpen = isOpen;
+        if (isOpen) {
+            // Is there a better way to ensure .focus works other than timeouting it?
+            setTimeout(() => this.clipboardTextInput()?.nativeElement?.focus(), 100);
+        }
+    }
+    handleClipboardCopyLastText(text) {
+        this.clipboardService.copyText(text, false);
+    }
+    handleNetworkChangeRequested(request) {
+        if (!request.network) {
+            this.consoleContext().networks.disconnectRequested({ nic: request.nic });
+        }
+        else {
+            this.consoleContext().networks.connectionRequested(request);
+        }
+        this.isNetworkDialogOpen = false;
+    }
+    handleNetworkDisconnectAllRequested() {
+        this.consoleContext().networks.disconnectRequested({});
+        this.isNetworkDialogOpen = false;
+    }
+    handleNetworkDialogOpenClose(isOpen) {
+        this.isNetworkDialogOpen = isOpen;
+    }
+    handleRecordToggle() {
+        if (this.consoleContext().state.activeConsoleRecording()) {
+            this.consoleContext().console.recordScreenStop();
+        }
+        else {
+            this.consoleContext().console.recordScreenStart();
+        }
+    }
+    async handleSendClipboardText(event, text) {
+        event.preventDefault();
+        if (text) {
+            await this.consoleContext().clipboard.sendTextToConsoleClipboard(text);
+        }
+        this.isClipboardDialogOpen = false;
+    }
+    async handlSendKeyboardCtrlAltDel() {
+        await this.consoleContext().console.sendCtrlAltDel();
+        this.isKeyboardDialogOpen = false;
+    }
+    async handleSendKeyboardInput(event, text) {
+        // prevent the form submit default
+        event.preventDefault();
+        if (text) {
+            await this.consoleContext().console.sendKeyboardInput(text);
+        }
+        this.keyboardInputText.update(() => "");
+        this.isKeyboardDialogOpen = false;
+    }
+    async handleSendPowerRequest(request) {
+        await this.consoleContext().console.sendPowerRequest(request);
+        this.isPowerDialogOpen = false;
+    }
+    handleSettingsDialogOpenClose(isOpen) {
+        this.isSettingsDialogOpen = isOpen;
+    }
+    handleSettingsAllowLocalClipboardWrite(allow) {
+        this.consoleContext().userSettings.patch({ console: { allowCopyToLocalClipboard: allow } });
+    }
+    handleSettingsAttemptRemoteSessionResize(attempt) {
+        this.consoleContext().userSettings.patch({ console: { attemptRemoteSessionResize: attempt } });
+    }
+    handleSettingsScaleToContainerHostSize(scaleToCanvasHostSize) {
+        this.consoleContext().userSettings.patch({ console: { scaleToCanvasHostSize } });
+    }
+    handleToolbarThemeChange(theme) {
+        this.consoleContext().userSettings.patch({ toolbar: { preferTheme: theme } });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleToolbarDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ConsoleToolbarDefaultComponent, isStandalone: true, selector: "cf-console-toolbar-default", inputs: { consoleContext: { classPropertyName: "consoleContext", publicName: "consoleContext", isSignal: true, isRequired: true, transformFunction: null }, keyboardInputText: { classPropertyName: "keyboardInputText", publicName: "keyboardInputText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keyboardInputText: "keyboardInputTextChange" }, viewQueries: [{ propertyName: "clipboardTextInput", first: true, predicate: ["clipboardText"], 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@if (consoleContext()) {\n<div class=\"toolbar-container\" cfApplyToolbarTheme\n    [class.horizontal]=\"consoleContext().userSettings.settings().toolbar.dockTo == 'top' || consoleContext().userSettings.settings().toolbar.dockTo == 'bottom' \">\n    <div class=\"button-container\">\n        <cf-console-toolbar-default-button label=\"Settings\" (clicked)=\"handleSettingsDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M12.0002 8C9.79111 8 8.00024 9.79086 8.00024 12C8.00024 14.2091 9.79111 16 12.0002 16C14.2094 16 16.0002 14.2091 16.0002 12C16.0002 9.79086 14.2094 8 12.0002 8ZM10.0002 12C10.0002 10.8954 10.8957 10 12.0002 10C13.1048 10 14.0002 10.8954 14.0002 12C14.0002 13.1046 13.1048 14 12.0002 14C10.8957 14 10.0002 13.1046 10.0002 12Z\"\n                        fill=\"#000000\"></path>\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M11.2867 0.5C9.88583 0.5 8.6461 1.46745 8.37171 2.85605L8.29264 3.25622C8.10489 4.20638 7.06195 4.83059 6.04511 4.48813L5.64825 4.35447C4.32246 3.90796 2.83873 4.42968 2.11836 5.63933L1.40492 6.83735C0.67773 8.05846 0.954349 9.60487 2.03927 10.5142L2.35714 10.7806C3.12939 11.4279 3.12939 12.5721 2.35714 13.2194L2.03927 13.4858C0.954349 14.3951 0.67773 15.9415 1.40492 17.1626L2.11833 18.3606C2.83872 19.5703 4.3225 20.092 5.64831 19.6455L6.04506 19.5118C7.06191 19.1693 8.1049 19.7935 8.29264 20.7437L8.37172 21.1439C8.6461 22.5325 9.88584 23.5 11.2867 23.5H12.7136C14.1146 23.5 15.3543 22.5325 15.6287 21.1438L15.7077 20.7438C15.8954 19.7936 16.9384 19.1693 17.9553 19.5118L18.3521 19.6455C19.6779 20.092 21.1617 19.5703 21.8821 18.3606L22.5955 17.1627C23.3227 15.9416 23.046 14.3951 21.9611 13.4858L21.6432 13.2194C20.8709 12.5722 20.8709 11.4278 21.6432 10.7806L21.9611 10.5142C23.046 9.60489 23.3227 8.05845 22.5955 6.83732L21.8821 5.63932C21.1617 4.42968 19.678 3.90795 18.3522 4.35444L17.9552 4.48814C16.9384 4.83059 15.8954 4.20634 15.7077 3.25617L15.6287 2.85616C15.3543 1.46751 14.1146 0.5 12.7136 0.5H11.2867ZM10.3338 3.24375C10.4149 2.83334 10.7983 2.5 11.2867 2.5H12.7136C13.2021 2.5 13.5855 2.83336 13.6666 3.24378L13.7456 3.64379C14.1791 5.83811 16.4909 7.09167 18.5935 6.38353L18.9905 6.24984C19.4495 6.09527 19.9394 6.28595 20.1637 6.66264L20.8771 7.86064C21.0946 8.22587 21.0208 8.69271 20.6764 8.98135L20.3586 9.24773C18.6325 10.6943 18.6325 13.3057 20.3586 14.7523L20.6764 15.0186C21.0208 15.3073 21.0946 15.7741 20.8771 16.1394L20.1637 17.3373C19.9394 17.714 19.4495 17.9047 18.9905 17.7501L18.5936 17.6164C16.4909 16.9082 14.1791 18.1618 13.7456 20.3562L13.6666 20.7562C13.5855 21.1666 13.2021 21.5 12.7136 21.5H11.2867C10.7983 21.5 10.4149 21.1667 10.3338 20.7562L10.2547 20.356C9.82113 18.1617 7.50931 16.9082 5.40665 17.6165L5.0099 17.7501C4.55092 17.9047 4.06104 17.714 3.83671 17.3373L3.1233 16.1393C2.9058 15.7741 2.97959 15.3073 3.32398 15.0186L3.64185 14.7522C5.36782 13.3056 5.36781 10.6944 3.64185 9.24779L3.32398 8.98137C2.97959 8.69273 2.9058 8.2259 3.1233 7.86067L3.83674 6.66266C4.06106 6.28596 4.55093 6.09528 5.0099 6.24986L5.40676 6.38352C7.50938 7.09166 9.82112 5.83819 10.2547 3.64392L10.3338 3.24375Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if(consoleContext().state.isManualReconnectAvailable())\n        {\n        <cf-console-toolbar-default-button label=\"Reconnect\"\n            (clicked)=\"consoleContext().console.sendReconnectRequest()\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C16.3556 22 20.0584 19.2159 21.4307 15.3332C21.6148 14.8125 21.3418 14.2412 20.8211 14.0572C20.3004 13.8731 19.7291 14.146 19.545 14.6668C18.4463 17.7753 15.4817 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C13.5516 4 14.8662 4.56117 16.1162 5.4406C16.9569 6.03212 17.7348 6.74106 18.5242 7.5H15.5C14.9477 7.5 14.5 7.94772 14.5 8.5C14.5 9.05228 14.9477 9.5 15.5 9.5H21C21.5523 9.5 22 9.05228 22 8.5V3C22 2.44772 21.5523 2 21 2C20.4477 2 20 2.44772 20 3V6.14371C19.1517 5.32583 18.2456 4.49337 17.267 3.80489C15.7949 2.76916 14.0847 2 12 2Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (!consoleContext().state.isViewOnly() && consoleContext().state.isConnected()) {\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button label=\"Keyboard\" (clicked)=\"isKeyboardDialogOpen = true\">\n            <svg fill=\"#000000\" viewBox=\"0 0 1920 1920\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M1807.059 1637.706c0 31.059-25.299 56.47-56.47 56.47H169.411c-31.172 0-56.47-25.411-56.47-56.47v-903.53c0-31.058 25.298-56.47 56.47-56.47h1581.176c31.172 0 56.47 25.412 56.47 56.47v903.53Zm-56.47-1072.941h-729.262c14.908-86.965 65.958-113.506 133.384-147.163 89.336-44.611 200.583-100.291 200.583-304.602h-112.941c0 134.513-57.939 163.426-138.24 203.633-80.301 40.094-177.544 90.24-196.518 248.132H169.412C76.009 564.765 0 640.775 0 734.176v903.53c0 93.402 76.01 169.412 169.412 169.412h1581.176c93.403 0 169.412-76.01 169.412-169.412v-903.53c0-93.402-76.01-169.411-169.412-169.411Zm-564.707 677.647H734.118c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h451.764c31.172 0 56.47-25.299 56.47-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m338.824 0h-112.941c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h112.94c31.173 0 56.471-25.299 56.471-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m-1016.47 0H395.293c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.299 56.47-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m0-338.824h-112.94c-31.173 0-56.471 25.3-56.471 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.298 56.47-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47m225.883 225.882h112.94c31.173 0 56.471-25.3 56.471-56.471V960.059c0-31.172-25.298-56.47-56.47-56.47h-112.94c-31.172 0-56.47 25.298-56.47 56.47V1073c0 31.172 25.298 56.47 56.47 56.47m451.764-225.882h-112.94c-31.173 0-56.471 25.3-56.471 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.298 56.47-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47m338.824 0h-112.941c-31.172 0-56.47 25.298-56.47 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.94c31.173 0 56.471-25.298 56.471-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47\"\n                        fill-rule=\"evenodd\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if(!cfConfig.disabledFeatures.clipboard) {\n        <cf-console-toolbar-default-button [disabled]=\"!consoleContext().state.isConnected()\" label=\"Clipboard\"\n            (clicked)=\"handleClipboardDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M19.5 16.5L19.5 4.5L18.75 3.75H9L8.25 4.5L8.25 7.5L5.25 7.5L4.5 8.25V20.25L5.25 21H15L15.75 20.25V17.25H18.75L19.5 16.5ZM15.75 15.75L15.75 8.25L15 7.5L9.75 7.5V5.25L18 5.25V15.75H15.75ZM6 9L14.25 9L14.25 19.5L6 19.5L6 9Z\"\n                        fill=\"#080341\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (consoleContext().networks.config()?.networks?.length) {\n        <cf-console-toolbar-default-button label=\"Networks ({{ consoleContext().networks.config()?.networks?.length }})\"\n            (clicked)=\"handleNetworkDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M3 12H21M12 8V12M6.5 12V16M17.5 12V16M10.1 8H13.9C14.4601 8 14.7401 8 14.954 7.89101C15.1422 7.79513 15.2951 7.64215 15.391 7.45399C15.5 7.24008 15.5 6.96005 15.5 6.4V4.6C15.5 4.03995 15.5 3.75992 15.391 3.54601C15.2951 3.35785 15.1422 3.20487 14.954 3.10899C14.7401 3 14.4601 3 13.9 3H10.1C9.53995 3 9.25992 3 9.04601 3.10899C8.85785 3.20487 8.70487 3.35785 8.60899 3.54601C8.5 3.75992 8.5 4.03995 8.5 4.6V6.4C8.5 6.96005 8.5 7.24008 8.60899 7.45399C8.70487 7.64215 8.85785 7.79513 9.04601 7.89101C9.25992 8 9.53995 8 10.1 8ZM15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V17.6C21 17.0399 21 16.7599 20.891 16.546C20.7951 16.3578 20.6422 16.2049 20.454 16.109C20.2401 16 19.9601 16 19.4 16H15.6C15.0399 16 14.7599 16 14.546 16.109C14.3578 16.2049 14.2049 16.3578 14.109 16.546C14 16.7599 14 17.0399 14 17.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21ZM4.6 21H8.4C8.96005 21 9.24008 21 9.45399 20.891C9.64215 20.7951 9.79513 20.6422 9.89101 20.454C10 20.2401 10 19.9601 10 19.4V17.6C10 17.0399 10 16.7599 9.89101 16.546C9.79513 16.3578 9.64215 16.2049 9.45399 16.109C9.24008 16 8.96005 16 8.4 16H4.6C4.03995 16 3.75992 16 3.54601 16.109C3.35785 16.2049 3.20487 16.3578 3.10899 16.546C3 16.7599 3 17.0399 3 17.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21Z\"\n                        stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (consoleContext().console.supportedFeatures().powerManagement) {\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button label=\"Power\" (clicked)=\"isPowerDialogOpen = true\">\n            <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V3Z\"\n                    fill=\"none\" />\n                <path\n                    d=\"M6.2798 6.70707C6.67031 6.31653 6.67028 5.68337 6.27973 5.29286C5.88919 4.90235 5.25603 4.90238 4.86552 5.29293C3.09635 7.06226 2 9.49298 2 12.1764C2 17.6204 6.49591 22 12 22C17.5041 22 22 17.6204 22 12.1764C22 9.49298 20.9036 7.06226 19.1345 5.29293C18.744 4.90238 18.1108 4.90235 17.7203 5.29286C17.3297 5.68337 17.3297 6.31653 17.7202 6.70707C19.1338 8.12083 20 10.0503 20 12.1764C20 16.4787 16.437 20 12 20C7.56296 20 4 16.4787 4 12.1764C4 10.0503 4.86618 8.12083 6.2798 6.70707Z\"\n                    fill=\"none\" />\n            </svg>\n        </cf-console-toolbar-default-button> }\n        }\n\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button (clicked)=\"consoleContext().console.copyScreenshot()\"\n            [disabled]=\"!consoleContext().state.isConnected()\" label=\"Screenshot\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M9.15023 3.01742C9.13605 3.03985 9.12278 3.0676 9.11298 3.09958C9.11044 3.10789 9.10778 3.11617 9.10502 3.12442L8.36963 5.31787C8.23301 5.72537 7.85129 6 7.4215 6H3C2.44772 6 2 6.44772 2 7V20C2 20.5523 2.44771 21 3 21H21C21.5523 21 22 20.5523 22 20V7C22 6.44771 21.5523 6 21 6H16.331C15.9011 6 15.5194 5.72528 15.3828 5.31769L14.6479 3.12423C14.6452 3.11605 14.6425 3.10783 14.64 3.09958C14.6302 3.0676 14.6169 3.03985 14.6027 3.01742C14.5986 3.01089 14.5946 3.00509 14.5908 3H9.16221C9.1584 3.00509 9.15437 3.01089 9.15023 3.01742ZM7.20525 2.49911C7.43535 1.76672 8.10563 1 9.06392 1H14.6891C15.6474 1 16.3177 1.76679 16.5478 2.49922L17.0506 4H21C22.6569 4 24 5.34315 24 7V20C24 21.6569 22.6569 23 21 23H3C1.34315 23 0 21.6569 0 20V7C0 5.34315 1.34315 4 3 4H6.70206L7.20525 2.49911ZM7 13C7 10.2386 9.23858 8 12 8C14.7614 8 17 10.2386 17 13C17 15.7614 14.7614 18 12 18C9.23858 18 7 15.7614 7 13ZM12 10C10.3431 10 9 11.3431 9 13C9 14.6569 10.3431 16 12 16C13.6569 16 15 14.6569 15 13C15 11.3431 13.6569 10 12 10Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if (!cfConfig.disabledFeatures.consoleScreenRecord) {\n        <cf-console-toolbar-default-button (clicked)=\"handleRecordToggle()\"\n            [disabled]=\"!consoleContext().state.isRecordingAvailable()\"\n            [isOngoing]=\"!!consoleContext().state.activeConsoleRecording()\" label=\"Record\">\n            @if (!consoleContext().state.activeConsoleRecording()) {\n            <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                        <g id=\"Dribbble-Light-Preview\" transform=\"translate(-100.000000, -3879.000000)\" fill=\"#000000\">\n                            <g id=\"icons\" transform=\"translate(56.000000, 160.000000)\">\n                                <path\n                                    d=\"M56,3719 L56,3721 L62,3721 L62,3727 L64,3727 L64,3719 L56,3719 Z M58,3729.151 C58,3726.942 56.209,3725.151 54,3725.151 C51.791,3725.151 50,3726.942 50,3729.151 C50,3731.36 51.791,3733.151 54,3733.151 C56.209,3733.151 58,3731.36 58,3729.151 L58,3729.151 Z M62,3737 L56,3737 L56,3739 L64,3739 L64,3731 L62,3731 L62,3737 Z M46,3731 L44,3731 L44,3739 L52,3739 L52,3737 L46,3737 L46,3731 Z M46,3727 L44,3727 L44,3719 L52,3719 L52,3721 L46,3721 L46,3727 Z\"\n                                    id=\"record-[#979]\"> </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 -0.5 21 21\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                        <g id=\"Dribbble-Light-Preview\" transform=\"translate(-59.000000, -440.000000)\" fill=\"#000000\">\n                            <g id=\"icons\" transform=\"translate(56.000000, 160.000000)\">\n                                <path\n                                    d=\"M9.3,294 L17.7,294 L17.7,286 L9.3,286 L9.3,294 Z M15.6,280 L15.6,282 L21.9,282 L21.9,288 L24,288 L24,280 L15.6,280 Z M21.9,298 L15.6,298 L15.6,300 L24,300 L24,292 L21.9,292 L21.9,298 Z M5.1,292 L3,292 L3,300 L11.4,300 L11.4,298 L5.1,298 L5.1,292 Z M5.1,288 L3,288 L3,280 L11.4,280 L11.4,282 L5.1,282 L5.1,288 Z\"\n                                    id=\"stop-[#1470]\"> </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            }\n        </cf-console-toolbar-default-button>\n        }\n\n        <cf-console-toolbar-default-button (clicked)=\"consoleContext().console.toggleFullscreen()\" label=\"Fullscreen\">\n            @if (consoleContext().state.isFullscreenAvailable()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M4 2C2.89543 2 2 2.89543 2 4V8C2 8.55228 2.44772 9 3 9C3.55228 9 4 8.55228 4 8V4H8C8.55228 4 9 3.55228 9 3C9 2.44772 8.55228 2 8 2H4Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M20 2C21.1046 2 22 2.89543 22 4V8C22 8.55228 21.5523 9 21 9C20.4477 9 20 8.55228 20 8V4H16C15.4477 4 15 3.55228 15 3C15 2.44772 15.4477 2 16 2H20Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M20 22C21.1046 22 22 21.1046 22 20V16C22 15.4477 21.5523 15 21 15C20.4477 15 20 15.4477 20 16V20H16C15.4477 20 15 20.4477 15 21C15 21.5523 15.4477 22 16 22H20Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M2 20C2 21.1046 2.89543 22 4 22H8C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20H4V16C4 15.4477 3.55228 15 3 15C2.44772 15 2 15.4477 2 16V20Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M7 9C8.10457 9 9 8.10457 9 7V3C9 2.44772 8.55228 2 8 2C7.44772 2 7 2.44772 7 3V7H3C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9H7Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M17 9C15.8954 9 15 8.10457 15 7V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H17Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M17 15C15.8954 15 15 15.8954 15 17V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V17H21C21.5523 17 22 16.5523 22 16C22 15.4477 21.5523 15 21 15H17Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M9 17C9 15.8954 8.10457 15 7 15H3C2.44772 15 2 15.4477 2 16C2 16.5523 2.44772 17 3 17H7V21C7 21.5523 7.44772 22 8 22C8.55228 22 9 21.5523 9 21V17Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n            }\n        </cf-console-toolbar-default-button>\n    </div>\n\n    <dialog [open]=\"isClipboardDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleClipboardDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Clipboard</strong>\n                </p>\n            </header>\n\n            @if (consoleContext().console.supportedFeatures().clipboardRemoteWrite) {\n            <div class=\"dialog-section\">\n                <h2>Send Text to Remote Clipboard</h2>\n                <form (submit)=\"handleSendClipboardText($event, clipboardText.value)\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" class=\"clipboard-text\" aria-label=\"Clipboard text\"\n                            placeholder=\"Enter text to send to the remote clipboard\" #clipboardText autofocus>\n                        <button type=\"submit\"\n                            [disabled]=\"!clipboardText.value || !consoleContext().state.isConnected\">Send</button>\n                    </fieldset>\n                </form>\n            </div>\n            }\n\n            <div class=\"dialog-section\">\n                <h2>Remote Clipboard Content</h2>\n                <form (submit)=\"handleClipboardCopyLastText(consoleLastClipboardText.value)\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" id=\"textFromConsoleClipboard\" name=\"textFromConsoleClipboard\"\n                            class=\"clipboard-text\" aria-describedby=\"textFromConsoleClipboard-helper\"\n                            aria-label=\"Clipboard text\" disabled\n                            [value]=\"consoleContext().clipboard.consoleClipboardText()\"\n                            placeholder=\"Text on the remote will appear here\" #consoleLastClipboardText>\n                        <button type=\"submit\" [disabled]=\"!consoleLastClipboardText.value\">Copy</button>\n                    </fieldset>\n                    @if(consoleContext().userSettings.settings().console.allowCopyToLocalClipboard &&\n                    consoleContext().console.supportedFeatures().clipboardAutomaticLocalCopy)\n                    {\n                    <small id=\"textFromConsoleClipboard-helper\">\n                        Copied text on the remote machine will automatically copy to your local clipboard.\n                        Disable this in Settings.\n                    </small>\n                    }\n                </form>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isKeyboardDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"isKeyboardDialogOpen = false\"></button>\n                <p>\n                    <strong>Send Keystrokes</strong>\n                </p>\n            </header>\n\n            <div class=\"dialog-section\">\n                <h2>Send Keystrokes to Console</h2>\n                <form (submit)=\"handleSendKeyboardInput($event, keyboardInputText())\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" id=\"keyboardInputText\" name=\"keyboardInputText\" class=\"keyboard-text\"\n                            aria-label=\"Keyboard text\" placeholder=\"Enter text to send as keyboard input to the console\"\n                            autofocus [(ngModel)]=\"keyboardInputText\">\n                        <button type=\"submit\"\n                            [disabled]=\"!keyboardInputText() || !consoleContext().state.isConnected\">Send</button>\n                    </fieldset>\n                </form>\n            </div>\n\n            <div class=\"dialog-section\">\n                <h2>Special Key Combinations</h2>\n\n                <div class=\"dialog-button-group\">\n                    <button type=\"button\" aria-label=\"Send Ctrl+Alt+Delete\" (click)=\"handlSendKeyboardCtrlAltDel()\">\n                        Ctrl + Alt + Delete\n                    </button>\n                </div>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isNetworkDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleNetworkDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Networks</strong>\n                </p>\n            </header>\n\n            <form>\n                @for (nic of consoleContext().networks.config()?.nics; track nic)\n                {\n                <label for=\"nic-{{ nic }}-select\">{{ nic }}</label>\n                <fieldset role=\"group\">\n                    <select #availableNetworksSelect name=\"nic-{{ nic }}-select\"\n                        aria-label=\"Select a network to connect to\">\n\n                        @if (!cfConfig.disabledFeatures.networkDisconnection)\n                        {\n                        <option [selected]=\"!consoleContext().networks.config()?.currentConnections?.[nic]\" value=\"\">\n                            [Disconnected]\n                        </option>\n                        }\n\n                        @for(network of consoleContext().networks.config()?.networks; track network) {\n                        <option [value]=\"network\"\n                            [selected]=\"consoleContext().networks.config()?.currentConnections?.[nic] === network\">\n                            {{ network }}\n                        </option>\n                        }\n                    </select>\n\n                    <button type=\"button\"\n                        (click)=\"handleNetworkChangeRequested({ network: availableNetworksSelect.value, nic: nic })\">\n                        {{ availableNetworksSelect.value ? \"Connect\" : \"Disconnect\" }}\n                    </button>\n                </fieldset>\n                }\n\n                @if (!cfConfig.disabledFeatures.networkDisconnection)\n                {\n                <hr />\n                <div class=\"dialog-button-group\">\n                    <button class=\"secondary\" type=\"button\" (click)=\"handleNetworkDisconnectAllRequested()\">\n                        Disconnect All Network Interfaces\n                    </button>\n                </div>\n                }\n            </form>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isPowerDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"isPowerDialogOpen = false\"></button>\n                <p>\n                    <strong>Power</strong>\n                </p>\n            </header>\n\n            <div class=\"dialog-button-group\">\n                <button type=\"button\" (click)=\"handleSendPowerRequest('reboot')\">Request Reboot</button>\n                <button type=\"button\" (click)=\"handleSendPowerRequest('shutdown')\">Request Shutdown</button>\n                <hr />\n                <button class=\"secondary\" type=\"button\" (click)=\"handleSendPowerRequest('rebootHard')\">\n                    Request Hard Reboot\n                </button>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isSettingsDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleSettingsDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Settings</strong>\n                </p>\n            </header>\n\n            <div class=\"settings-form\">\n                <div class=\"settings-behavior dialog-section\">\n                    <h4>Behavior</h4>\n                    <fieldset>\n                        <label>\n                            <input #inputAllowLocalClipboardWrite type=\"checkbox\" name=\"allowLocalClipboardWrite\"\n                                [checked]=\"consoleContext().userSettings.settings().console.allowCopyToLocalClipboard\"\n                                (change)=\"handleSettingsAllowLocalClipboardWrite(inputAllowLocalClipboardWrite.checked)\" />\n                            Allow the remote machine to copy text to my local clipboard\n                        </label>\n                        <label>\n                            <input #inputAttemptRemoteSessionResize type=\"checkbox\" name=\"attemptRemoteSessionResize\"\n                                [checked]=\"consoleContext().userSettings.settings().console.attemptRemoteSessionResize\"\n                                (change)=\"handleSettingsAttemptRemoteSessionResize(inputAttemptRemoteSessionResize.checked)\" />\n                            Attempt to resize the remote session to match local resolution\n                        </label>\n                        <label>\n                            <input #inputScaleToContainerSize type=\"checkbox\" name=\"scaleToContainerSize\"\n                                [checked]=\"consoleContext().userSettings.settings().console.scaleToCanvasHostSize\"\n                                (change)=\"handleSettingsScaleToContainerHostSize(inputScaleToContainerSize.checked)\" />\n                            Scale to maximum available size\n                        </label>\n                    </fieldset>\n                </div>\n\n                <div class=\"settings-toolbar-dock dialog-section\">\n                    <h4>Toolbar Position</h4>\n                    <div role=\"group\">\n                        <button (click)=\"handleChangeToolbarPosition('left')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'left'\">Left</button>\n                        <button (click)=\"handleChangeToolbarPosition('right')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'right'\">Right</button>\n                        <button (click)=\"handleChangeToolbarPosition('top')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'top'\">Top</button>\n                        <button (click)=\"handleChangeToolbarPosition('bottom')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'bottom'\">Bottom</button>\n                    </div>\n                </div>\n\n                <div class=\"settings-theme dialog-section\">\n                    <h4>Theme</h4>\n                    <div role=\"group\">\n                        <button (click)=\"handleToolbarThemeChange('light')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === 'light'\">Light</button>\n                        <button (click)=\"handleToolbarThemeChange('dark')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === 'dark'\">Dark</button>\n                        <button (click)=\"handleToolbarThemeChange(undefined)\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === undefined\">\n                            My Default\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </article>\n    </dialog>\n</div>\n}\n", styles: [":host{display:block;height:100%;width:100%;max-width:100%}fieldset legend{font-weight:700}.toolbar-container{background-color:var(--pico-background-color);padding:4px;height:100%;display:flex;align-items:center;justify-content:center}.toolbar-container .button-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.toolbar-container .buttons-divider{border-top:1px solid var(--pico-color);margin:.25rem 0;width:100%}.toolbar-container.horizontal{width:100%}.toolbar-container.horizontal .button-container{flex-direction:row}.toolbar-container.horizontal .buttons-divider{align-self:stretch;border-left:1px solid var(--pico-color);height:auto;margin:0 1rem;width:1px}.toolbar-position-buttons{display:flex;gap:4px}.toolbar-position-buttons button{flex-grow:1}.settings-toolbar-dock{margin-top:1rem}dialog h2{font-size:1.1rem;font-weight:700}dialog small{font-size:.8rem}dialog .dialog-section:not(:last-of-type){margin-bottom:2rem}dialog .dialog-button-group button{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ApplyToolbarThemeDirective, selector: "[cfApplyToolbarTheme]" }, { kind: "component", type: ConsoleToolbarDefaultButtonComponent, selector: "cf-console-toolbar-default-button", inputs: ["disabled", "label", "isOngoing"], outputs: ["clicked"] }], encapsulation: i0.ViewEncapsulation.ShadowDom });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ConsoleToolbarDefaultComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cf-console-toolbar-default', imports: [
+                        FormsModule,
+                        ApplyToolbarThemeDirective,
+                        ConsoleToolbarDefaultButtonComponent
+                    ], standalone: true, encapsulation: ViewEncapsulation.ShadowDom, 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@if (consoleContext()) {\n<div class=\"toolbar-container\" cfApplyToolbarTheme\n    [class.horizontal]=\"consoleContext().userSettings.settings().toolbar.dockTo == 'top' || consoleContext().userSettings.settings().toolbar.dockTo == 'bottom' \">\n    <div class=\"button-container\">\n        <cf-console-toolbar-default-button label=\"Settings\" (clicked)=\"handleSettingsDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M12.0002 8C9.79111 8 8.00024 9.79086 8.00024 12C8.00024 14.2091 9.79111 16 12.0002 16C14.2094 16 16.0002 14.2091 16.0002 12C16.0002 9.79086 14.2094 8 12.0002 8ZM10.0002 12C10.0002 10.8954 10.8957 10 12.0002 10C13.1048 10 14.0002 10.8954 14.0002 12C14.0002 13.1046 13.1048 14 12.0002 14C10.8957 14 10.0002 13.1046 10.0002 12Z\"\n                        fill=\"#000000\"></path>\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M11.2867 0.5C9.88583 0.5 8.6461 1.46745 8.37171 2.85605L8.29264 3.25622C8.10489 4.20638 7.06195 4.83059 6.04511 4.48813L5.64825 4.35447C4.32246 3.90796 2.83873 4.42968 2.11836 5.63933L1.40492 6.83735C0.67773 8.05846 0.954349 9.60487 2.03927 10.5142L2.35714 10.7806C3.12939 11.4279 3.12939 12.5721 2.35714 13.2194L2.03927 13.4858C0.954349 14.3951 0.67773 15.9415 1.40492 17.1626L2.11833 18.3606C2.83872 19.5703 4.3225 20.092 5.64831 19.6455L6.04506 19.5118C7.06191 19.1693 8.1049 19.7935 8.29264 20.7437L8.37172 21.1439C8.6461 22.5325 9.88584 23.5 11.2867 23.5H12.7136C14.1146 23.5 15.3543 22.5325 15.6287 21.1438L15.7077 20.7438C15.8954 19.7936 16.9384 19.1693 17.9553 19.5118L18.3521 19.6455C19.6779 20.092 21.1617 19.5703 21.8821 18.3606L22.5955 17.1627C23.3227 15.9416 23.046 14.3951 21.9611 13.4858L21.6432 13.2194C20.8709 12.5722 20.8709 11.4278 21.6432 10.7806L21.9611 10.5142C23.046 9.60489 23.3227 8.05845 22.5955 6.83732L21.8821 5.63932C21.1617 4.42968 19.678 3.90795 18.3522 4.35444L17.9552 4.48814C16.9384 4.83059 15.8954 4.20634 15.7077 3.25617L15.6287 2.85616C15.3543 1.46751 14.1146 0.5 12.7136 0.5H11.2867ZM10.3338 3.24375C10.4149 2.83334 10.7983 2.5 11.2867 2.5H12.7136C13.2021 2.5 13.5855 2.83336 13.6666 3.24378L13.7456 3.64379C14.1791 5.83811 16.4909 7.09167 18.5935 6.38353L18.9905 6.24984C19.4495 6.09527 19.9394 6.28595 20.1637 6.66264L20.8771 7.86064C21.0946 8.22587 21.0208 8.69271 20.6764 8.98135L20.3586 9.24773C18.6325 10.6943 18.6325 13.3057 20.3586 14.7523L20.6764 15.0186C21.0208 15.3073 21.0946 15.7741 20.8771 16.1394L20.1637 17.3373C19.9394 17.714 19.4495 17.9047 18.9905 17.7501L18.5936 17.6164C16.4909 16.9082 14.1791 18.1618 13.7456 20.3562L13.6666 20.7562C13.5855 21.1666 13.2021 21.5 12.7136 21.5H11.2867C10.7983 21.5 10.4149 21.1667 10.3338 20.7562L10.2547 20.356C9.82113 18.1617 7.50931 16.9082 5.40665 17.6165L5.0099 17.7501C4.55092 17.9047 4.06104 17.714 3.83671 17.3373L3.1233 16.1393C2.9058 15.7741 2.97959 15.3073 3.32398 15.0186L3.64185 14.7522C5.36782 13.3056 5.36781 10.6944 3.64185 9.24779L3.32398 8.98137C2.97959 8.69273 2.9058 8.2259 3.1233 7.86067L3.83674 6.66266C4.06106 6.28596 4.55093 6.09528 5.0099 6.24986L5.40676 6.38352C7.50938 7.09166 9.82112 5.83819 10.2547 3.64392L10.3338 3.24375Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if(consoleContext().state.isManualReconnectAvailable())\n        {\n        <cf-console-toolbar-default-button label=\"Reconnect\"\n            (clicked)=\"consoleContext().console.sendReconnectRequest()\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C16.3556 22 20.0584 19.2159 21.4307 15.3332C21.6148 14.8125 21.3418 14.2412 20.8211 14.0572C20.3004 13.8731 19.7291 14.146 19.545 14.6668C18.4463 17.7753 15.4817 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C13.5516 4 14.8662 4.56117 16.1162 5.4406C16.9569 6.03212 17.7348 6.74106 18.5242 7.5H15.5C14.9477 7.5 14.5 7.94772 14.5 8.5C14.5 9.05228 14.9477 9.5 15.5 9.5H21C21.5523 9.5 22 9.05228 22 8.5V3C22 2.44772 21.5523 2 21 2C20.4477 2 20 2.44772 20 3V6.14371C19.1517 5.32583 18.2456 4.49337 17.267 3.80489C15.7949 2.76916 14.0847 2 12 2Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (!consoleContext().state.isViewOnly() && consoleContext().state.isConnected()) {\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button label=\"Keyboard\" (clicked)=\"isKeyboardDialogOpen = true\">\n            <svg fill=\"#000000\" viewBox=\"0 0 1920 1920\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M1807.059 1637.706c0 31.059-25.299 56.47-56.47 56.47H169.411c-31.172 0-56.47-25.411-56.47-56.47v-903.53c0-31.058 25.298-56.47 56.47-56.47h1581.176c31.172 0 56.47 25.412 56.47 56.47v903.53Zm-56.47-1072.941h-729.262c14.908-86.965 65.958-113.506 133.384-147.163 89.336-44.611 200.583-100.291 200.583-304.602h-112.941c0 134.513-57.939 163.426-138.24 203.633-80.301 40.094-177.544 90.24-196.518 248.132H169.412C76.009 564.765 0 640.775 0 734.176v903.53c0 93.402 76.01 169.412 169.412 169.412h1581.176c93.403 0 169.412-76.01 169.412-169.412v-903.53c0-93.402-76.01-169.411-169.412-169.411Zm-564.707 677.647H734.118c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h451.764c31.172 0 56.47-25.299 56.47-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m338.824 0h-112.941c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h112.94c31.173 0 56.471-25.299 56.471-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m-1016.47 0H395.293c-31.172 0-56.47 25.299-56.47 56.47v112.942c0 31.171 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.299 56.47-56.47v-112.942c0-31.171-25.298-56.47-56.47-56.47m0-338.824h-112.94c-31.173 0-56.471 25.3-56.471 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.298 56.47-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47m225.883 225.882h112.94c31.173 0 56.471-25.3 56.471-56.471V960.059c0-31.172-25.298-56.47-56.47-56.47h-112.94c-31.172 0-56.47 25.298-56.47 56.47V1073c0 31.172 25.298 56.47 56.47 56.47m451.764-225.882h-112.94c-31.173 0-56.471 25.3-56.471 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.941c31.172 0 56.47-25.298 56.47-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47m338.824 0h-112.941c-31.172 0-56.47 25.298-56.47 56.47V1073c0 31.172 25.298 56.47 56.47 56.47h112.94c31.173 0 56.471-25.298 56.471-56.47V960.059c0-31.172-25.298-56.47-56.47-56.47\"\n                        fill-rule=\"evenodd\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if(!cfConfig.disabledFeatures.clipboard) {\n        <cf-console-toolbar-default-button [disabled]=\"!consoleContext().state.isConnected()\" label=\"Clipboard\"\n            (clicked)=\"handleClipboardDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" preserveAspectRatio=\"none\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M19.5 16.5L19.5 4.5L18.75 3.75H9L8.25 4.5L8.25 7.5L5.25 7.5L4.5 8.25V20.25L5.25 21H15L15.75 20.25V17.25H18.75L19.5 16.5ZM15.75 15.75L15.75 8.25L15 7.5L9.75 7.5V5.25L18 5.25V15.75H15.75ZM6 9L14.25 9L14.25 19.5L6 19.5L6 9Z\"\n                        fill=\"#080341\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (consoleContext().networks.config()?.networks?.length) {\n        <cf-console-toolbar-default-button label=\"Networks ({{ consoleContext().networks.config()?.networks?.length }})\"\n            (clicked)=\"handleNetworkDialogOpenClose(true)\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M3 12H21M12 8V12M6.5 12V16M17.5 12V16M10.1 8H13.9C14.4601 8 14.7401 8 14.954 7.89101C15.1422 7.79513 15.2951 7.64215 15.391 7.45399C15.5 7.24008 15.5 6.96005 15.5 6.4V4.6C15.5 4.03995 15.5 3.75992 15.391 3.54601C15.2951 3.35785 15.1422 3.20487 14.954 3.10899C14.7401 3 14.4601 3 13.9 3H10.1C9.53995 3 9.25992 3 9.04601 3.10899C8.85785 3.20487 8.70487 3.35785 8.60899 3.54601C8.5 3.75992 8.5 4.03995 8.5 4.6V6.4C8.5 6.96005 8.5 7.24008 8.60899 7.45399C8.70487 7.64215 8.85785 7.79513 9.04601 7.89101C9.25992 8 9.53995 8 10.1 8ZM15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V17.6C21 17.0399 21 16.7599 20.891 16.546C20.7951 16.3578 20.6422 16.2049 20.454 16.109C20.2401 16 19.9601 16 19.4 16H15.6C15.0399 16 14.7599 16 14.546 16.109C14.3578 16.2049 14.2049 16.3578 14.109 16.546C14 16.7599 14 17.0399 14 17.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21ZM4.6 21H8.4C8.96005 21 9.24008 21 9.45399 20.891C9.64215 20.7951 9.79513 20.6422 9.89101 20.454C10 20.2401 10 19.9601 10 19.4V17.6C10 17.0399 10 16.7599 9.89101 16.546C9.79513 16.3578 9.64215 16.2049 9.45399 16.109C9.24008 16 8.96005 16 8.4 16H4.6C4.03995 16 3.75992 16 3.54601 16.109C3.35785 16.2049 3.20487 16.3578 3.10899 16.546C3 16.7599 3 17.0399 3 17.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21Z\"\n                        stroke=\"#000000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n        }\n\n        @if (consoleContext().console.supportedFeatures().powerManagement) {\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button label=\"Power\" (clicked)=\"isPowerDialogOpen = true\">\n            <svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path\n                    d=\"M13 3C13 2.44772 12.5523 2 12 2C11.4477 2 11 2.44772 11 3V13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V3Z\"\n                    fill=\"none\" />\n                <path\n                    d=\"M6.2798 6.70707C6.67031 6.31653 6.67028 5.68337 6.27973 5.29286C5.88919 4.90235 5.25603 4.90238 4.86552 5.29293C3.09635 7.06226 2 9.49298 2 12.1764C2 17.6204 6.49591 22 12 22C17.5041 22 22 17.6204 22 12.1764C22 9.49298 20.9036 7.06226 19.1345 5.29293C18.744 4.90238 18.1108 4.90235 17.7203 5.29286C17.3297 5.68337 17.3297 6.31653 17.7202 6.70707C19.1338 8.12083 20 10.0503 20 12.1764C20 16.4787 16.437 20 12 20C7.56296 20 4 16.4787 4 12.1764C4 10.0503 4.86618 8.12083 6.2798 6.70707Z\"\n                    fill=\"none\" />\n            </svg>\n        </cf-console-toolbar-default-button> }\n        }\n\n        <div class=\"buttons-divider\"></div>\n\n        <cf-console-toolbar-default-button (clicked)=\"consoleContext().console.copyScreenshot()\"\n            [disabled]=\"!consoleContext().state.isConnected()\" label=\"Screenshot\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                        d=\"M9.15023 3.01742C9.13605 3.03985 9.12278 3.0676 9.11298 3.09958C9.11044 3.10789 9.10778 3.11617 9.10502 3.12442L8.36963 5.31787C8.23301 5.72537 7.85129 6 7.4215 6H3C2.44772 6 2 6.44772 2 7V20C2 20.5523 2.44771 21 3 21H21C21.5523 21 22 20.5523 22 20V7C22 6.44771 21.5523 6 21 6H16.331C15.9011 6 15.5194 5.72528 15.3828 5.31769L14.6479 3.12423C14.6452 3.11605 14.6425 3.10783 14.64 3.09958C14.6302 3.0676 14.6169 3.03985 14.6027 3.01742C14.5986 3.01089 14.5946 3.00509 14.5908 3H9.16221C9.1584 3.00509 9.15437 3.01089 9.15023 3.01742ZM7.20525 2.49911C7.43535 1.76672 8.10563 1 9.06392 1H14.6891C15.6474 1 16.3177 1.76679 16.5478 2.49922L17.0506 4H21C22.6569 4 24 5.34315 24 7V20C24 21.6569 22.6569 23 21 23H3C1.34315 23 0 21.6569 0 20V7C0 5.34315 1.34315 4 3 4H6.70206L7.20525 2.49911ZM7 13C7 10.2386 9.23858 8 12 8C14.7614 8 17 10.2386 17 13C17 15.7614 14.7614 18 12 18C9.23858 18 7 15.7614 7 13ZM12 10C10.3431 10 9 11.3431 9 13C9 14.6569 10.3431 16 12 16C13.6569 16 15 14.6569 15 13C15 11.3431 13.6569 10 12 10Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n        </cf-console-toolbar-default-button>\n\n        @if (!cfConfig.disabledFeatures.consoleScreenRecord) {\n        <cf-console-toolbar-default-button (clicked)=\"handleRecordToggle()\"\n            [disabled]=\"!consoleContext().state.isRecordingAvailable()\"\n            [isOngoing]=\"!!consoleContext().state.activeConsoleRecording()\" label=\"Record\">\n            @if (!consoleContext().state.activeConsoleRecording()) {\n            <svg viewBox=\"0 0 20 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                        <g id=\"Dribbble-Light-Preview\" transform=\"translate(-100.000000, -3879.000000)\" fill=\"#000000\">\n                            <g id=\"icons\" transform=\"translate(56.000000, 160.000000)\">\n                                <path\n                                    d=\"M56,3719 L56,3721 L62,3721 L62,3727 L64,3727 L64,3719 L56,3719 Z M58,3729.151 C58,3726.942 56.209,3725.151 54,3725.151 C51.791,3725.151 50,3726.942 50,3729.151 C50,3731.36 51.791,3733.151 54,3733.151 C56.209,3733.151 58,3731.36 58,3729.151 L58,3729.151 Z M62,3737 L56,3737 L56,3739 L64,3739 L64,3731 L62,3731 L62,3737 Z M46,3731 L44,3731 L44,3739 L52,3739 L52,3737 L46,3737 L46,3731 Z M46,3727 L44,3727 L44,3719 L52,3719 L52,3721 L46,3721 L46,3727 Z\"\n                                    id=\"record-[#979]\"> </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 -0.5 21 21\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\" fill=\"#000000\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n                        <g id=\"Dribbble-Light-Preview\" transform=\"translate(-59.000000, -440.000000)\" fill=\"#000000\">\n                            <g id=\"icons\" transform=\"translate(56.000000, 160.000000)\">\n                                <path\n                                    d=\"M9.3,294 L17.7,294 L17.7,286 L9.3,286 L9.3,294 Z M15.6,280 L15.6,282 L21.9,282 L21.9,288 L24,288 L24,280 L15.6,280 Z M21.9,298 L15.6,298 L15.6,300 L24,300 L24,292 L21.9,292 L21.9,298 Z M5.1,292 L3,292 L3,300 L11.4,300 L11.4,298 L5.1,298 L5.1,292 Z M5.1,288 L3,288 L3,280 L11.4,280 L11.4,282 L5.1,282 L5.1,288 Z\"\n                                    id=\"stop-[#1470]\"> </path>\n                            </g>\n                        </g>\n                    </g>\n                </g>\n            </svg>\n            }\n        </cf-console-toolbar-default-button>\n        }\n\n        <cf-console-toolbar-default-button (clicked)=\"consoleContext().console.toggleFullscreen()\" label=\"Fullscreen\">\n            @if (consoleContext().state.isFullscreenAvailable()) {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M4 2C2.89543 2 2 2.89543 2 4V8C2 8.55228 2.44772 9 3 9C3.55228 9 4 8.55228 4 8V4H8C8.55228 4 9 3.55228 9 3C9 2.44772 8.55228 2 8 2H4Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M20 2C21.1046 2 22 2.89543 22 4V8C22 8.55228 21.5523 9 21 9C20.4477 9 20 8.55228 20 8V4H16C15.4477 4 15 3.55228 15 3C15 2.44772 15.4477 2 16 2H20Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M20 22C21.1046 22 22 21.1046 22 20V16C22 15.4477 21.5523 15 21 15C20.4477 15 20 15.4477 20 16V20H16C15.4477 20 15 20.4477 15 21C15 21.5523 15.4477 22 16 22H20Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M2 20C2 21.1046 2.89543 22 4 22H8C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20H4V16C4 15.4477 3.55228 15 3 15C2.44772 15 2 15.4477 2 16V20Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n            } @else {\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                    <path\n                        d=\"M7 9C8.10457 9 9 8.10457 9 7V3C9 2.44772 8.55228 2 8 2C7.44772 2 7 2.44772 7 3V7H3C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9H7Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M17 9C15.8954 9 15 8.10457 15 7V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V7H21C21.5523 7 22 7.44772 22 8C22 8.55228 21.5523 9 21 9H17Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M17 15C15.8954 15 15 15.8954 15 17V21C15 21.5523 15.4477 22 16 22C16.5523 22 17 21.5523 17 21V17H21C21.5523 17 22 16.5523 22 16C22 15.4477 21.5523 15 21 15H17Z\"\n                        fill=\"#000000\"></path>\n                    <path\n                        d=\"M9 17C9 15.8954 8.10457 15 7 15H3C2.44772 15 2 15.4477 2 16C2 16.5523 2.44772 17 3 17H7V21C7 21.5523 7.44772 22 8 22C8.55228 22 9 21.5523 9 21V17Z\"\n                        fill=\"#000000\"></path>\n                </g>\n            </svg>\n            }\n        </cf-console-toolbar-default-button>\n    </div>\n\n    <dialog [open]=\"isClipboardDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleClipboardDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Clipboard</strong>\n                </p>\n            </header>\n\n            @if (consoleContext().console.supportedFeatures().clipboardRemoteWrite) {\n            <div class=\"dialog-section\">\n                <h2>Send Text to Remote Clipboard</h2>\n                <form (submit)=\"handleSendClipboardText($event, clipboardText.value)\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" class=\"clipboard-text\" aria-label=\"Clipboard text\"\n                            placeholder=\"Enter text to send to the remote clipboard\" #clipboardText autofocus>\n                        <button type=\"submit\"\n                            [disabled]=\"!clipboardText.value || !consoleContext().state.isConnected\">Send</button>\n                    </fieldset>\n                </form>\n            </div>\n            }\n\n            <div class=\"dialog-section\">\n                <h2>Remote Clipboard Content</h2>\n                <form (submit)=\"handleClipboardCopyLastText(consoleLastClipboardText.value)\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" id=\"textFromConsoleClipboard\" name=\"textFromConsoleClipboard\"\n                            class=\"clipboard-text\" aria-describedby=\"textFromConsoleClipboard-helper\"\n                            aria-label=\"Clipboard text\" disabled\n                            [value]=\"consoleContext().clipboard.consoleClipboardText()\"\n                            placeholder=\"Text on the remote will appear here\" #consoleLastClipboardText>\n                        <button type=\"submit\" [disabled]=\"!consoleLastClipboardText.value\">Copy</button>\n                    </fieldset>\n                    @if(consoleContext().userSettings.settings().console.allowCopyToLocalClipboard &&\n                    consoleContext().console.supportedFeatures().clipboardAutomaticLocalCopy)\n                    {\n                    <small id=\"textFromConsoleClipboard-helper\">\n                        Copied text on the remote machine will automatically copy to your local clipboard.\n                        Disable this in Settings.\n                    </small>\n                    }\n                </form>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isKeyboardDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"isKeyboardDialogOpen = false\"></button>\n                <p>\n                    <strong>Send Keystrokes</strong>\n                </p>\n            </header>\n\n            <div class=\"dialog-section\">\n                <h2>Send Keystrokes to Console</h2>\n                <form (submit)=\"handleSendKeyboardInput($event, keyboardInputText())\">\n                    <fieldset role=\"group\">\n                        <input type=\"text\" id=\"keyboardInputText\" name=\"keyboardInputText\" class=\"keyboard-text\"\n                            aria-label=\"Keyboard text\" placeholder=\"Enter text to send as keyboard input to the console\"\n                            autofocus [(ngModel)]=\"keyboardInputText\">\n                        <button type=\"submit\"\n                            [disabled]=\"!keyboardInputText() || !consoleContext().state.isConnected\">Send</button>\n                    </fieldset>\n                </form>\n            </div>\n\n            <div class=\"dialog-section\">\n                <h2>Special Key Combinations</h2>\n\n                <div class=\"dialog-button-group\">\n                    <button type=\"button\" aria-label=\"Send Ctrl+Alt+Delete\" (click)=\"handlSendKeyboardCtrlAltDel()\">\n                        Ctrl + Alt + Delete\n                    </button>\n                </div>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isNetworkDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleNetworkDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Networks</strong>\n                </p>\n            </header>\n\n            <form>\n                @for (nic of consoleContext().networks.config()?.nics; track nic)\n                {\n                <label for=\"nic-{{ nic }}-select\">{{ nic }}</label>\n                <fieldset role=\"group\">\n                    <select #availableNetworksSelect name=\"nic-{{ nic }}-select\"\n                        aria-label=\"Select a network to connect to\">\n\n                        @if (!cfConfig.disabledFeatures.networkDisconnection)\n                        {\n                        <option [selected]=\"!consoleContext().networks.config()?.currentConnections?.[nic]\" value=\"\">\n                            [Disconnected]\n                        </option>\n                        }\n\n                        @for(network of consoleContext().networks.config()?.networks; track network) {\n                        <option [value]=\"network\"\n                            [selected]=\"consoleContext().networks.config()?.currentConnections?.[nic] === network\">\n                            {{ network }}\n                        </option>\n                        }\n                    </select>\n\n                    <button type=\"button\"\n                        (click)=\"handleNetworkChangeRequested({ network: availableNetworksSelect.value, nic: nic })\">\n                        {{ availableNetworksSelect.value ? \"Connect\" : \"Disconnect\" }}\n                    </button>\n                </fieldset>\n                }\n\n                @if (!cfConfig.disabledFeatures.networkDisconnection)\n                {\n                <hr />\n                <div class=\"dialog-button-group\">\n                    <button class=\"secondary\" type=\"button\" (click)=\"handleNetworkDisconnectAllRequested()\">\n                        Disconnect All Network Interfaces\n                    </button>\n                </div>\n                }\n            </form>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isPowerDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"isPowerDialogOpen = false\"></button>\n                <p>\n                    <strong>Power</strong>\n                </p>\n            </header>\n\n            <div class=\"dialog-button-group\">\n                <button type=\"button\" (click)=\"handleSendPowerRequest('reboot')\">Request Reboot</button>\n                <button type=\"button\" (click)=\"handleSendPowerRequest('shutdown')\">Request Shutdown</button>\n                <hr />\n                <button class=\"secondary\" type=\"button\" (click)=\"handleSendPowerRequest('rebootHard')\">\n                    Request Hard Reboot\n                </button>\n            </div>\n        </article>\n    </dialog>\n\n    <dialog [open]=\"isSettingsDialogOpen\">\n        <article>\n            <header>\n                <button aria-label=\"Close\" rel=\"prev\" (click)=\"handleSettingsDialogOpenClose(false)\"></button>\n                <p>\n                    <strong>Settings</strong>\n                </p>\n            </header>\n\n            <div class=\"settings-form\">\n                <div class=\"settings-behavior dialog-section\">\n                    <h4>Behavior</h4>\n                    <fieldset>\n                        <label>\n                            <input #inputAllowLocalClipboardWrite type=\"checkbox\" name=\"allowLocalClipboardWrite\"\n                                [checked]=\"consoleContext().userSettings.settings().console.allowCopyToLocalClipboard\"\n                                (change)=\"handleSettingsAllowLocalClipboardWrite(inputAllowLocalClipboardWrite.checked)\" />\n                            Allow the remote machine to copy text to my local clipboard\n                        </label>\n                        <label>\n                            <input #inputAttemptRemoteSessionResize type=\"checkbox\" name=\"attemptRemoteSessionResize\"\n                                [checked]=\"consoleContext().userSettings.settings().console.attemptRemoteSessionResize\"\n                                (change)=\"handleSettingsAttemptRemoteSessionResize(inputAttemptRemoteSessionResize.checked)\" />\n                            Attempt to resize the remote session to match local resolution\n                        </label>\n                        <label>\n                            <input #inputScaleToContainerSize type=\"checkbox\" name=\"scaleToContainerSize\"\n                                [checked]=\"consoleContext().userSettings.settings().console.scaleToCanvasHostSize\"\n                                (change)=\"handleSettingsScaleToContainerHostSize(inputScaleToContainerSize.checked)\" />\n                            Scale to maximum available size\n                        </label>\n                    </fieldset>\n                </div>\n\n                <div class=\"settings-toolbar-dock dialog-section\">\n                    <h4>Toolbar Position</h4>\n                    <div role=\"group\">\n                        <button (click)=\"handleChangeToolbarPosition('left')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'left'\">Left</button>\n                        <button (click)=\"handleChangeToolbarPosition('right')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'right'\">Right</button>\n                        <button (click)=\"handleChangeToolbarPosition('top')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'top'\">Top</button>\n                        <button (click)=\"handleChangeToolbarPosition('bottom')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.dockTo === 'bottom'\">Bottom</button>\n                    </div>\n                </div>\n\n                <div class=\"settings-theme dialog-section\">\n                    <h4>Theme</h4>\n                    <div role=\"group\">\n                        <button (click)=\"handleToolbarThemeChange('light')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === 'light'\">Light</button>\n                        <button (click)=\"handleToolbarThemeChange('dark')\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === 'dark'\">Dark</button>\n                        <button (click)=\"handleToolbarThemeChange(undefined)\"\n                            [disabled]=\"consoleContext().userSettings.settings().toolbar.preferTheme === undefined\">\n                            My Default\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </article>\n    </dialog>\n</div>\n}\n", styles: [":host{display:block;height:100%;width:100%;max-width:100%}fieldset legend{font-weight:700}.toolbar-container{background-color:var(--pico-background-color);padding:4px;height:100%;display:flex;align-items:center;justify-content:center}.toolbar-container .button-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.toolbar-container .buttons-divider{border-top:1px solid var(--pico-color);margin:.25rem 0;width:100%}.toolbar-container.horizontal{width:100%}.toolbar-container.horizontal .button-container{flex-direction:row}.toolbar-container.horizontal .buttons-divider{align-self:stretch;border-left:1px solid var(--pico-color);height:auto;margin:0 1rem;width:1px}.toolbar-position-buttons{display:flex;gap:4px}.toolbar-position-buttons button{flex-grow:1}.settings-toolbar-dock{margin-top:1rem}dialog h2{font-size:1.1rem;font-weight:700}dialog small{font-size:.8rem}dialog .dialog-section:not(:last-of-type){margin-bottom:2rem}dialog .dialog-button-group button{display:block;width:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { consoleContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "consoleContext", required: true }] }], keyboardInputText: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardInputText", required: false }] }, { type: i0.Output, args: ["keyboardInputTextChange"] }], clipboardTextInput: [{ type: i0.ViewChild, args: ["clipboardText", { isSignal: true }] }] } });
 //  ===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===
+const defaultCfConfig = {
+    canvasRecording: {
+        autoDownloadCompletedRecordings: true,
+        chunkLength: 1000,
+        frameRate: 25,
+        maxDuration: 10000,
+        mimeType: "video/webm"
+    },
+    consoleBackgroundStyle: "rgb(40, 40, 40)",
+    disabledFeatures: {
+        clipboard: false,
+        consoleScreenRecord: false,
+        manualConsoleReconnect: false,
+        networkDisconnection: false,
+    },
+    logThreshold: LogLevel.WARNING,
+    showBrowserNotificationsOnConsoleEvents: true,
+    toolbar: {
+        component: ConsoleToolbarDefaultComponent,
+        disabled: false
+    }
+};
 //  ===BEGIN LICENSE===
 //  Copyright 2025 Carnegie Mellon University. All rights reserved.