@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-device-control.mjs

@@ -1,117 +1,474 @@
-import * as i0 from '@angular/core';
-import { input, booleanAttribute, computed, output, viewChild, inject, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { IconComponent } from '@testgorilla/tgo-ui/components/icon';
-import { OverflowMenuComponent } from '@testgorilla/tgo-ui/components/overflow-menu';
-import { TooltipPositionType, TooltipComponent } from '@testgorilla/tgo-ui/components/tooltip';
-import { CommonModule } from '@angular/common';
-
-/**
- * Media device control: an on/off button paired with a device dropdown, generic across microphones,
- * speakers and similar. The dropdown is `ui-overflow-menu`, so it behaves like every other menu.
- */
-class DeviceControlComponent {
-    constructor() {
-        /**
-         * Shape of the control: `toggle` pairs an on/off button with the dropdown chevron; `menu` is a
-         * single button that opens the dropdown. Default: 'toggle'.
-         */
-        this.variant = input('toggle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        this.iconName = input('', ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
-        /** Icon shown while the device is off. Only used by the toggle variant. */
-        this.offIconName = input('', ...(ngDevMode ? [{ debugName: "offIconName" }] : /* istanbul ignore next */ []));
-        this.isOn = input(true, { ...(ngDevMode ? { debugName: "isOn" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Plays the icon's activity animation, for example while a test sound runs. */
-        this.isActive = input(false, { ...(ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-        this.selectedValue = input('', ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
-        /** Tooltip and accessible name of the main button while the device is on. Rendered by the toggle variant. */
-        this.onTooltip = input.required(...(ngDevMode ? [{ debugName: "onTooltip" }] : /* istanbul ignore next */ []));
-        /** Tooltip and accessible name of the main button while the device is off. Rendered by the toggle variant. */
-        this.offTooltip = input.required(...(ngDevMode ? [{ debugName: "offTooltip" }] : /* istanbul ignore next */ []));
-        /** Tooltip and accessible name of the button that opens the dropdown, which every variant renders. */
-        this.menuTooltip = input.required(...(ngDevMode ? [{ debugName: "menuTooltip" }] : /* istanbul ignore next */ []));
-        /** Shows the error badge, for example when the device cannot be opened. */
-        this.hasError = input(false, { ...(ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.errorLabel = input('', ...(ngDevMode ? [{ debugName: "errorLabel" }] : /* istanbul ignore next */ []));
-        /**
-         * Defines the application theme. Defaults to dark, the primary use case for this control; the
-         * light variant is available for reuse on light surfaces.
-         */
-        this.applicationTheme = input(undefined, ...(ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []));
-        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
-        this.mainTestId = computed(() => (this.testId() ? `${this.testId()}-toggle` : 'device-control-main'), ...(ngDevMode ? [{ debugName: "mainTestId" }] : /* istanbul ignore next */ []));
-        this.menuTestId = computed(() => (this.testId() ? `${this.testId()}-menu` : null), ...(ngDevMode ? [{ debugName: "menuTestId" }] : /* istanbul ignore next */ []));
-        /** Emits when the main button is used to switch the device on or off, with the new state. */
-        this.toggled = output();
-        /**
-         * Emits the value of the entry the user picked. An entry with an empty value is a placeholder,
-         * not a selectable option: picking it closes the dropdown without emitting.
-         */
-        this.optionSelected = output();
-        /** Emits when the dropdown opens, so the consumer can refresh the entries. */
-        this.menuOpened = output();
-        this.menuClosed = output();
-        this.overflowMenu = viewChild(OverflowMenuComponent, ...(ngDevMode ? [{ debugName: "overflowMenu" }] : /* istanbul ignore next */ []));
-        this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
-            optional: true,
-        });
-        this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme ?? 'dark', ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-        /** Open state of the dropdown, derived from the overflow menu so there is no mirror to drift. */
-        this.isMenuOpen = computed(() => this.overflowMenu()?.isMenuOpened() ?? false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : /* istanbul ignore next */ []));
-        /** Tooltips sit above the control, which is anchored to the bottom of a call surface. */
-        this.tooltipPosition = TooltipPositionType.TOP;
-        /** The dropdown opens upwards, over the call surface the control sits at the bottom of. */
-        this.menuConfig = {
-            xPosition: 'after',
-            yPosition: 'above',
-            overlapTrigger: false,
-            panelClass: 'ui-device-control-panel',
-        };
-        this.menuButtons = computed(() => this.options().map(option => ({
-            label: option.label,
-            value: option.value,
-            isSelected: option.value === this.selectedValue(),
-        })), ...(ngDevMode ? [{ debugName: "menuButtons" }] : /* istanbul ignore next */ []));
-        this.mainTooltip = computed(() => (this.isOn() ? this.onTooltip() : this.offTooltip()), ...(ngDevMode ? [{ debugName: "mainTooltip" }] : /* istanbul ignore next */ []));
-        this.currentIconName = computed(() => (this.isOn() ? this.iconName() : this.offIconName()), ...(ngDevMode ? [{ debugName: "currentIconName" }] : /* istanbul ignore next */ []));
-    }
-    toggleDevice() {
-        this.closeMenu();
-        this.toggled.emit(!this.isOn());
-    }
-    closeMenu() {
-        this.overflowMenu()?.closeMenu();
-    }
-    selectOption(value) {
-        this.optionSelected.emit(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DeviceControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: DeviceControlComponent, isStandalone: true, selector: "ui-device-control", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, offIconName: { classPropertyName: "offIconName", publicName: "offIconName", isSignal: true, isRequired: false, transformFunction: null }, isOn: { classPropertyName: "isOn", publicName: "isOn", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, onTooltip: { classPropertyName: "onTooltip", publicName: "onTooltip", isSignal: true, isRequired: true, transformFunction: null }, offTooltip: { classPropertyName: "offTooltip", publicName: "offTooltip", isSignal: true, isRequired: true, transformFunction: null }, menuTooltip: { classPropertyName: "menuTooltip", publicName: "menuTooltip", isSignal: true, isRequired: true, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorLabel: { classPropertyName: "errorLabel", publicName: "errorLabel", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled", optionSelected: "optionSelected", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { properties: { "attr.theme": "theme()" }, classAttribute: "ui-device-control" }, viewQueries: [{ propertyName: "overflowMenu", first: true, predicate: OverflowMenuComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      [attr.data-testid]=\"mainTestId()\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    [testId]=\"menuTestId()\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: OverflowMenuComponent, selector: "ui-overflow-menu", inputs: ["buttons", "iconTrigger", "menuLabel", "applicationTheme", "ariaLabel", "testId", "ariaRequired", "describedby", "contentTemplateRef", "buttonVariant", "buttonSize", "menuConfig", "selectionMode", "menuAnchor", "shouldMatchAnchorWidth", "isDynamicMenu", "withRemovableOption"], outputs: ["selectItem", "menuOpened", "menuClosed"] }, { kind: "component", type: TooltipComponent, selector: "ui-tooltip", inputs: ["position", "disabled", "message", "applicationTheme", "labelForDefinition", "definitionTooltipSize", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DeviceControlComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-device-control', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'ui-device-control',
-                        '[attr.theme]': 'theme()',
-                    }, imports: [IconComponent, OverflowMenuComponent, TooltipComponent], template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      [attr.data-testid]=\"mainTestId()\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    [testId]=\"menuTestId()\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], offIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "offIconName", required: false }] }], isOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOn", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], onTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "onTooltip", required: true }] }], offTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "offTooltip", required: true }] }], menuTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuTooltip", required: true }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], errorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorLabel", required: false }] }], applicationTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "applicationTheme", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], menuOpened: [{ type: i0.Output, args: ["menuOpened"] }], menuClosed: [{ type: i0.Output, args: ["menuClosed"] }], overflowMenu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OverflowMenuComponent), { isSignal: true }] }] } });
-
-class DeviceControlComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DeviceControlComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: DeviceControlComponentModule, imports: [CommonModule, DeviceControlComponent], exports: [DeviceControlComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DeviceControlComponentModule, imports: [CommonModule, DeviceControlComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DeviceControlComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, DeviceControlComponent],
-                    exports: [DeviceControlComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation, booleanAttribute, computed, inject, input, output, viewChild } from "@angular/core";
+import { IconComponent } from "@testgorilla/tgo-ui/components/icon";
+import { OverflowMenuComponent } from "@testgorilla/tgo-ui/components/overflow-menu";
+import { TooltipComponent, TooltipPositionType } from "@testgorilla/tgo-ui/components/tooltip";
+import { CommonModule } from "@angular/common";
+var DeviceControlComponent = class DeviceControlComponent {
+	constructor() {
+		this.variant = input("toggle", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.iconName = input("", ...ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []);
+		this.offIconName = input("", ...ngDevMode ? [{ debugName: "offIconName" }] : /* istanbul ignore next */ []);
+		this.isOn = input(true, {
+			...ngDevMode ? { debugName: "isOn" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.isActive = input(false, {
+			...ngDevMode ? { debugName: "isActive" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+		this.selectedValue = input("", ...ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []);
+		this.onTooltip = input.required(...ngDevMode ? [{ debugName: "onTooltip" }] : /* istanbul ignore next */ []);
+		this.offTooltip = input.required(...ngDevMode ? [{ debugName: "offTooltip" }] : /* istanbul ignore next */ []);
+		this.menuTooltip = input.required(...ngDevMode ? [{ debugName: "menuTooltip" }] : /* istanbul ignore next */ []);
+		this.hasError = input(false, {
+			...ngDevMode ? { debugName: "hasError" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.errorLabel = input("", ...ngDevMode ? [{ debugName: "errorLabel" }] : /* istanbul ignore next */ []);
+		this.applicationTheme = input(void 0, ...ngDevMode ? [{ debugName: "applicationTheme" }] : /* istanbul ignore next */ []);
+		this.testId = input(null, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.mainTestId = computed(() => this.testId() ? `${this.testId()}-toggle` : "device-control-main", ...ngDevMode ? [{ debugName: "mainTestId" }] : /* istanbul ignore next */ []);
+		this.menuTestId = computed(() => this.testId() ? `${this.testId()}-menu` : null, ...ngDevMode ? [{ debugName: "menuTestId" }] : /* istanbul ignore next */ []);
+		this.toggled = output();
+		this.optionSelected = output();
+		this.menuOpened = output();
+		this.menuClosed = output();
+		this.overflowMenu = viewChild(OverflowMenuComponent, ...ngDevMode ? [{ debugName: "overflowMenu" }] : /* istanbul ignore next */ []);
+		this.defaultAppTheme = inject("CANOPYUI_DEFAULT_APPLICATION_THEME", { optional: true });
+		this.theme = computed(() => this.applicationTheme() ?? this.defaultAppTheme ?? "dark", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+		this.isMenuOpen = computed(() => this.overflowMenu()?.isMenuOpened() ?? false, ...ngDevMode ? [{ debugName: "isMenuOpen" }] : /* istanbul ignore next */ []);
+		this.tooltipPosition = TooltipPositionType.TOP;
+		this.menuConfig = {
+			xPosition: "after",
+			yPosition: "above",
+			overlapTrigger: false,
+			panelClass: "ui-device-control-panel"
+		};
+		this.menuButtons = computed(() => this.options().map((option) => ({
+			label: option.label,
+			value: option.value,
+			isSelected: option.value === this.selectedValue()
+		})), ...ngDevMode ? [{ debugName: "menuButtons" }] : /* istanbul ignore next */ []);
+		this.mainTooltip = computed(() => this.isOn() ? this.onTooltip() : this.offTooltip(), ...ngDevMode ? [{ debugName: "mainTooltip" }] : /* istanbul ignore next */ []);
+		this.currentIconName = computed(() => this.isOn() ? this.iconName() : this.offIconName(), ...ngDevMode ? [{ debugName: "currentIconName" }] : /* istanbul ignore next */ []);
+	}
+	toggleDevice() {
+		this.closeMenu();
+		this.toggled.emit(!this.isOn());
+	}
+	closeMenu() {
+		this.overflowMenu()?.closeMenu();
+	}
+	selectOption(value) {
+		this.optionSelected.emit(value);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DeviceControlComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: DeviceControlComponent,
+			isStandalone: true,
+			selector: "ui-device-control",
+			inputs: {
+				variant: {
+					classPropertyName: "variant",
+					publicName: "variant",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				iconName: {
+					classPropertyName: "iconName",
+					publicName: "iconName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				offIconName: {
+					classPropertyName: "offIconName",
+					publicName: "offIconName",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isOn: {
+					classPropertyName: "isOn",
+					publicName: "isOn",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				isActive: {
+					classPropertyName: "isActive",
+					publicName: "isActive",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				options: {
+					classPropertyName: "options",
+					publicName: "options",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				selectedValue: {
+					classPropertyName: "selectedValue",
+					publicName: "selectedValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				onTooltip: {
+					classPropertyName: "onTooltip",
+					publicName: "onTooltip",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				offTooltip: {
+					classPropertyName: "offTooltip",
+					publicName: "offTooltip",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				menuTooltip: {
+					classPropertyName: "menuTooltip",
+					publicName: "menuTooltip",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				hasError: {
+					classPropertyName: "hasError",
+					publicName: "hasError",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				errorLabel: {
+					classPropertyName: "errorLabel",
+					publicName: "errorLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				applicationTheme: {
+					classPropertyName: "applicationTheme",
+					publicName: "applicationTheme",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				toggled: "toggled",
+				optionSelected: "optionSelected",
+				menuOpened: "menuOpened",
+				menuClosed: "menuClosed"
+			},
+			host: {
+				properties: { "attr.theme": "theme()" },
+				classAttribute: "ui-device-control"
+			},
+			viewQueries: [{
+				propertyName: "overflowMenu",
+				first: true,
+				predicate: OverflowMenuComponent,
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      [attr.data-testid]=\"mainTestId()\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    [testId]=\"menuTestId()\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "component",
+					type: OverflowMenuComponent,
+					selector: "ui-overflow-menu",
+					inputs: [
+						"buttons",
+						"iconTrigger",
+						"menuLabel",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"ariaRequired",
+						"describedby",
+						"contentTemplateRef",
+						"buttonVariant",
+						"buttonSize",
+						"menuConfig",
+						"selectionMode",
+						"menuAnchor",
+						"shouldMatchAnchorWidth",
+						"isDynamicMenu",
+						"withRemovableOption"
+					],
+					outputs: [
+						"selectItem",
+						"menuOpened",
+						"menuClosed"
+					]
+				},
+				{
+					kind: "component",
+					type: TooltipComponent,
+					selector: "ui-tooltip",
+					inputs: [
+						"position",
+						"disabled",
+						"message",
+						"applicationTheme",
+						"labelForDefinition",
+						"definitionTooltipSize",
+						"variant"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DeviceControlComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-device-control",
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "ui-device-control",
+				"[attr.theme]": "theme()"
+			},
+			imports: [
+				IconComponent,
+				OverflowMenuComponent,
+				TooltipComponent
+			],
+			template: "@if (variant() === 'toggle') {\n  <ui-tooltip [position]=\"tooltipPosition\" [message]=\"mainTooltip()\" [applicationTheme]=\"theme()\">\n    <button\n      type=\"button\"\n      class=\"ui-device-control__main\"\n      [attr.data-testid]=\"mainTestId()\"\n      [class.ui-device-control__main--off]=\"!isOn()\"\n      [class.ui-device-control__main--active]=\"isActive()\"\n      [attr.aria-label]=\"mainTooltip()\"\n      (click)=\"toggleDevice()\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"currentIconName()\"></ui-icon>\n    </button>\n  </ui-tooltip>\n}\n\n<ui-tooltip [position]=\"tooltipPosition\" [message]=\"menuTooltip()\" [applicationTheme]=\"theme()\">\n  <ui-overflow-menu\n    data-testid=\"device-control-menu-toggle\"\n    [testId]=\"menuTestId()\"\n    selectionMode=\"single\"\n    [buttons]=\"menuButtons()\"\n    [isDynamicMenu]=\"true\"\n    [menuConfig]=\"menuConfig\"\n    [contentTemplateRef]=\"opener\"\n    [applicationTheme]=\"theme()\"\n    [ariaLabel]=\"menuTooltip()\"\n    (selectItem)=\"selectOption($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\"\n  >\n    <div menu-content class=\"ui-device-control__menu-footer\">\n      <ng-content select=\"[uiDeviceControlMenuFooter]\"></ng-content>\n    </div>\n  </ui-overflow-menu>\n</ui-tooltip>\n\n<ng-template #opener>\n  @if (variant() === 'menu') {\n    <span\n      class=\"ui-device-control__opener-icon\"\n      [class.ui-device-control__opener-icon--active]=\"isActive()\"\n      data-testid=\"device-control-opener-icon\"\n    >\n      <ui-icon size=\"24\" color=\"currentColor\" [name]=\"iconName()\"></ui-icon>\n    </span>\n  }\n  <span class=\"ui-device-control__opener-chevron\">\n    <ui-icon\n      size=\"16\"\n      color=\"currentColor\"\n      [name]=\"isMenuOpen() ? 'Arrow-chevron-up-in-line' : 'Arrow-chevron-down-in-line'\"\n    ></ui-icon>\n  </span>\n</ng-template>\n\n@if (hasError()) {\n  <span class=\"ui-device-control__error\" role=\"img\" [attr.aria-label]=\"errorLabel()\" data-testid=\"device-control-error\">\n    <ui-icon size=\"16\" color=\"currentColor\" name=\"Error-filled\"></ui-icon>\n  </span>\n}\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-device-control{--ui-device-control-surface: #242424;--ui-device-control-border: #ffffff;--ui-device-control-text: #ffffff;--ui-device-control-hover: #666666;--ui-device-control-pressed: #666666;--ui-device-control-focus-inner: #242424;--ui-device-control-focus-outer: #ffffff;position:relative;display:inline-flex;align-items:center;gap:4px;padding-right:8px;border:1px solid var(--ui-device-control-border);border-radius:999px;background-color:var(--ui-device-control-surface);color:var(--ui-device-control-text)}.ui-device-control ui-tooltip,.ui-device-control ui-overflow-menu,.ui-device-control .overflow-menu-container{display:flex}.ui-device-control .overflow-menu-opener,.ui-device-control .overflow-menu-opener.content-template{display:flex;align-items:center;justify-content:center;gap:4px;width:auto;height:40px;padding:0;border-radius:999px;color:inherit}.ui-device-control .overflow-menu-opener:hover,.ui-device-control .overflow-menu-opener.content-template:hover{background-color:var(--ui-device-control-hover)}.ui-device-control .overflow-menu-opener:active,.ui-device-control .overflow-menu-opener.content-template:active{background-color:var(--ui-device-control-pressed)}.ui-device-control .overflow-menu-opener:focus-visible,.ui-device-control .overflow-menu-opener.content-template:focus-visible{outline:none;animation:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px;background:none;color:inherit;cursor:pointer}.ui-device-control__main:hover{background-color:var(--ui-device-control-hover)}.ui-device-control__main:active{background-color:var(--ui-device-control-pressed)}.ui-device-control__main:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-device-control-focus-inner),0 0 0 6px var(--ui-device-control-focus-outer)}.ui-device-control__main--off{border-color:transparent;background-color:#e02800;color:#fff}.ui-device-control__main--off:hover{background-color:#ff3003}.ui-device-control__main--off:active{background-color:#ff6e4f}.ui-device-control__main--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-icon{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border:1px solid var(--ui-device-control-border);border-radius:999px}.ui-device-control__opener-icon--active ui-icon{animation:ui-device-control-pulse .6s ease-in-out infinite}.ui-device-control__opener-chevron{display:flex;align-items:center;justify-content:center;width:24px;height:40px}.ui-device-control__error{position:absolute;top:-4px;right:-4px;display:flex;width:16px;height:16px;color:#e02800;pointer-events:none}.ui-device-control[theme=light]{--ui-device-control-surface: #ffffff;--ui-device-control-border: #242424;--ui-device-control-text: #242424;--ui-device-control-hover: #e9e9e9;--ui-device-control-pressed: #d3d3d3;--ui-device-control-focus-inner: #ffffff;--ui-device-control-focus-outer: #242424}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel{width:247px;max-width:calc(100vw - 32px);border-radius:10px;background-color:#fff;color:#242424;box-shadow:0 4px 16px #24242414}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-content{padding:0}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item{min-height:48px;height:48px;padding:0 16px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:hover,.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item[aria-checked=true]{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text{display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;color:#242424;font-family:inherit;font-size:14px;line-height:20px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .mat-mdc-menu-item-text .label{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel .overflow-menu-selected-check{flex:0 0 16px;display:flex}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]{display:flex;align-items:center;gap:16px;width:100%;height:48px;padding:0 16px;border:0;background:none;color:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:hover{background-color:#f4f4f4}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:active{background-color:#e9e9e9}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem]:focus-visible{outline:2px solid #0165fc;outline-offset:-2px}.mat-mdc-menu-panel.overflow-menu.ui-device-control-panel [uiDeviceControlFooterItem] span{flex:1 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@keyframes ui-device-control-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.ui-device-control__main--active ui-icon,.ui-device-control__opener-icon--active ui-icon{animation:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		iconName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconName",
+				required: false
+			}]
+		}],
+		offIconName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "offIconName",
+				required: false
+			}]
+		}],
+		isOn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOn",
+				required: false
+			}]
+		}],
+		isActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isActive",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		selectedValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedValue",
+				required: false
+			}]
+		}],
+		onTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "onTooltip",
+				required: true
+			}]
+		}],
+		offTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "offTooltip",
+				required: true
+			}]
+		}],
+		menuTooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuTooltip",
+				required: true
+			}]
+		}],
+		hasError: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasError",
+				required: false
+			}]
+		}],
+		errorLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorLabel",
+				required: false
+			}]
+		}],
+		applicationTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "applicationTheme",
+				required: false
+			}]
+		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		toggled: [{
+			type: i0.Output,
+			args: ["toggled"]
+		}],
+		optionSelected: [{
+			type: i0.Output,
+			args: ["optionSelected"]
+		}],
+		menuOpened: [{
+			type: i0.Output,
+			args: ["menuOpened"]
+		}],
+		menuClosed: [{
+			type: i0.Output,
+			args: ["menuClosed"]
+		}],
+		overflowMenu: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => OverflowMenuComponent), { isSignal: true }]
+		}]
+	}
+});
+var DeviceControlComponentModule = class DeviceControlComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DeviceControlComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DeviceControlComponentModule,
+			imports: [CommonModule, DeviceControlComponent],
+			exports: [DeviceControlComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DeviceControlComponentModule,
+			imports: [CommonModule, DeviceControlComponent]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DeviceControlComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [CommonModule, DeviceControlComponent],
+			exports: [DeviceControlComponent]
+		}]
+	}]
+});
 export { DeviceControlComponent, DeviceControlComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-device-control.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-device-control.mjs.map