bfg-common 1.5.419 → 1.5.420

package/components/common/vm/actions/common/customizeHardware/CustomizeHardwareNew.vue

@@ -1,358 +1,358 @@
-<template>
-  <div
-    :class="[
-      'customize-hardware',
-      themeMode,
-      { 'alert-show': props.errors.length },
-    ]"
-  >
-    <ui-tabs
-      v-model="selectedNavItem"
-      :tabs="navItemsLocal"
-      test-id="vm-wizard-tabs"
-      type="underline"
-      class="navigation"
-    />
-    <ui-alert
-      v-show="props.errors.length"
-      :messages="props.errors"
-      status="alert-danger"
-      test-id="customize-hardware-alert"
-      class="errors-alert"
-      size="md"
-      @hide="emits('remove-validation-errors')"
-    />
-
-    <div v-show="selectedNavItem === 0">
-      <common-vm-actions-common-customize-hardware-virtual-hardware
-        :vm-name="vmName"
-        :storage="props.storage"
-        :max-cpus="props.maxCpus"
-        :max-memory="props.maxMemory"
-        :cpu-models="props.cpuModels"
-        :cpu="props.cpu"
-        :memory="props.memory"
-        :is-edit="props.isEdit"
-        :is-clone="props.isClone"
-        :state="props.state"
-        :hard-disks="props.hardDisks"
-        :cd-dvd-drives="props.cdDvdDrives"
-        :networks="props.networks"
-        :networks-table="props.networksTable"
-        :video-card="props.videoCard"
-        :usb-controller="props.usbController"
-        :pci-devices="props.pciDevices"
-        :nodes="props.nodes"
-        :files="props.files"
-        :error-validation-fields="props.errorValidationFields"
-        :get-datastore-table-func="props.getDatastoreTableFunc"
-        :datastore="props.datastore"
-        :is-datastore-loading="props.isDatastoreLoading"
-        :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-        :passthrough-devices="props.passthroughDevices"
-        :mediated-devices="props.mediatedDevices"
-        :project="props.project"
-        :guest-machine-type="guestMachineType"
-        :computeResource="props.computeResource"
-        :compatibility-info="props.compatibilityInfo"
-        @send-data="emits('send-data-virtual-hardware-method', $event)"
-        @get-storage="emits('get-storage', $event)"
-        @get-folders-or-files="emits('get-folders-or-files', $event)"
-        @get-active-device-child="emits('get-active-device-child', $event)"
-        @show-datastore-child="emits('show-datastore-child', $event)"
-        @remove-error-by-title="emits('remove-error-by-title', $event)"
-        @invalid="virtualHardwareInvalid = $event"
-        @get-networks-table="emits('get-networks-table', $event)"
-        @get-pci-devices="emits('get-pci-devices')"
-      />
-    </div>
-    <div v-show="selectedNavItem === 1">
-      <common-vm-actions-common-customize-hardware-vmoptions
-        v-model:vm-name="vmName"
-        v-model:guest-machine-type="guestMachineType"
-        v-model:guest-os-family="guestOsFamily"
-        v-model:guest-os-version="guestOsVersion"
-        :hard-disks="props.hardDisksForBootOptions"
-        :cd-dvd-drives="props.cdDvdDrivesForBootOptions"
-        :networks="props.networksForBootOptions"
-        :options="props.options"
-        :is-edit="props.isEdit"
-        :is-clone="props.isClone"
-        :error-validation-fields="props.errorValidationFields"
-        :state="props.state"
-        :compatibility-info="props.compatibilityInfo"
-        :is-vmt="props.isVmt"
-        @change-boot-order="emits('change-boot-order', $event)"
-        @send-data="emits('send-data-vm-options-method', $event)"
-        @invalid="vmOptionsInvalid = $event"
-        @remove-error-by-title="emits('remove-error-by-title', $event)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_TabItem } from '~/node_modules/bfg-uikit/components/ui/tabs/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
-import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
-import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
-import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
-import type {
-  UI_I_SendDataNewPciDevice,
-  UI_I_SendDataNewCdDvdDrive,
-  UI_I_SendDataNewHardDisk,
-  UI_I_SendDataNewNetwork,
-  UI_I_SendDataVideoCard,
-  UI_I_SendDataVirtualHardware,
-} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
-import type { UI_I_SendDataVmoptions } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/lib/models/interfaces'
-import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
-import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
-import type {
-  API_UI_I_VmEditCpu,
-  API_UI_I_VmEditMemory,
-  UI_I_MediatedDevice,
-  UI_I_PciDevice,
-} from '~/lib/models/store/vm/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-import { navItemsNewViewFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
-
-const vmName = defineModel<string>('vmName', { required: true })
-const guestOsFamily = defineModel<UI_I_OptionItem | null>('guestOsFamily', {
-  required: true,
-})
-const guestOsVersion = defineModel<UI_I_OptionItem | null>('guestOsVersion', {
-  required: true,
-})
-const selectedNavItem = defineModel<UI_T_SelectedNavItem>('selectedNavItem', {
-  required: true,
-})
-const guestMachineType = defineModel<UI_I_OptionItem | null>(
-  'guestMachineType',
-  { required: true }
-)
-const vmOptionsInvalid = defineModel<string[]>('vmOptionsInvalid', {
-  required: true,
-})
-const virtualHardwareInvalid = defineModel<string[]>('virtualHardwareInvalid', {
-  required: true,
-})
-
-const props = defineProps<{
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  errors: string[]
-  storage: UI_I_DatastoreTableItem | null
-  maxCpus: number
-  navItems: UI_I_TabItem[]
-  cpuModels: UI_I_OptionItem[]
-  maxMemory: number
-  datastore: UI_I_DatastoreTableItem[]
-  isDatastoreLoading: boolean
-  networksTable: UI_I_NetworkTableItem[]
-  errorValidationFields: UI_I_ErrorValidationField[]
-  networksForBootOptions: UI_I_SendDataNewNetwork[] | null
-  hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null
-  cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null
-  cpu?: API_UI_I_VmEditCpu
-  state?: string | number
-  isEdit?: boolean
-  memory?: API_UI_I_VmEditMemory
-  project?: UI_T_Project
-  isClone?: boolean
-  options?: UI_I_SendDataVmoptions
-  networks?: UI_I_SendDataNewNetwork[] | null
-  videoCard?: UI_I_SendDataVideoCard
-  hardDisks?: UI_I_SendDataNewHardDisk[] | null
-  pciDevices?: UI_I_SendDataNewPciDevice[]
-  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
-  usbController?: string
-  passthroughDevices?: UI_I_PciDevice[]
-  mediatedDevices?: UI_I_MediatedDevice[]
-  vmCpuHelpTextSecond?: string
-  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
-  computeResource?: UI_I_TreeNode | null
-  compatibilityInfo?: string
-  isVmt?: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'get-storage', value: UI_I_TablePayload): void
-  (event: 'get-pci-devices'): void
-  (event: 'get-networks-table', value: UI_I_TablePayload): void
-  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
-  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
-  (event: 'remove-error-by-title', value: string): void
-  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
-  (event: 'remove-validation-errors'): void
-  (event: 'send-data-vm-options-method', value: UI_I_SendDataVmoptions): void
-  (
-    event: 'send-data-virtual-hardware-method',
-    value: UI_I_SendDataVirtualHardware
-  ): void
-  (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const navItemsLocal = computed<UI_I_TabItem[]>(() =>
-  navItemsNewViewFunc(localization.value)
-)
-
-const themeMode = useLocalStorage('themeMode')
-</script>
-
-<style lang="scss">
-:root {
-  --divider-color: #e9ebed;
-}
-:root.dark-theme {
-  --divider-color: #e9ebed1f;
-}
-</style>
-
-<style scoped lang="scss">
-.customize-hardware {
-  max-height: inherit;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-
-  &.alert-show {
-    grid-template-rows: auto auto minmax(0, 1fr);
-  }
-
-  .errors-alert {
-    margin-top: 12px;
-  }
-}
-
-:deep(.stack-block .stack-block-label .stack-view-key) {
-  //flex: 0 0 280px;
-  max-width: 280px;
-  margin-right: 12px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  //line-height: 32px;
-
-  .ui-checkbox-label {
-    min-height: 32px;
-  }
-}
-:deep(.stack-block .stack-block-label .stack-block-content) {
-  width: unset;
-
-  .ui-checkbox-label {
-    min-height: 32px;
-  }
-  .drag-drop-item .ui-checkbox-label {
-    min-height: auto;
-  }
-}
-</style>
-<style lang="scss">
-.light-theme {
-  .stack-block-label .ui-main-select-toggle:not(.error):not(:disabled) {
-    background-color: #ffffff;
-  }
-  .stack-block-expanded > .stack-block-label .ui-main-select-toggle {
-    background-color: #1b2a371f;
-
-    &:not(.open) {
-      border-color: #e9ebed3d;
-
-      .ui-arrow-icon {
-        color: #e9eaec;
-      }
-    }
-  }
-
-  .stack-block-expanded > .stack-block-label .combobox-input {
-    color: #e9eaec;
-  }
-  .stack-block-expanded > .stack-block-label .ui-selected-text {
-    color: #e9eaec;
-  }
-
-  .stack-block-label .ui-main-input {
-    background-color: #ffffff;
-  }
-  .stack-block-expanded > .stack-block-label .ui-main-input {
-    background-color: #1b2a371f;
-    border-color: #e9ebed3d;
-    color: #e9eaec;
-  }
-  .stack-block-expanded > .stack-block-label {
-    .ui-custom-checkbox {
-      background-color: transparent;
-    }
-    .ui-checkbox-label-text {
-      color: #e9eaec;
-    }
-  }
-}
-
-.dark-theme {
-  .stack-block-label {
-    .ui-main-select-toggle {
-      background-color: #1b2a371f;
-    }
-    .error {
-      .ui-main-select-toggle {
-        background-color: #d1312614;
-      }
-    }
-  }
-  .stack-block-expanded > .stack-block-label .ui-main-select-toggle {
-    &:not(.error) {
-      background-color: #ffffff;
-      border-color: #d3d6da;
-    }
-    &:not(.error):not(.open):not(:disabled):hover {
-      border-color: #9da6ad;
-    }
-    &.open {
-      border-color: #008fd6;
-
-      .ui-arrow-icon {
-        color: #008fd6;
-      }
-    }
-    .ui-arrow-icon {
-      color: #213444;
-    }
-  }
-  .stack-block-expanded > .stack-block-label .combobox-input {
-    color: #182531;
-  }
-  .stack-block-expanded > .stack-block-label .ui-selected-text {
-    color: #182531;
-  }
-
-  .stack-block-label .ui-main-input {
-    background-color: #1b2a371f;
-  }
-  .stack-block-expanded > .stack-block-label .ui-main-input {
-    background-color: #ffffff;
-    border-color: #d3d6da;
-    color: #182531;
-  }
-  .ui-select-toggle-button:disabled {
-    background-color: #aab1b614;
-    border-color: #d3d6da14;
-    color: #bdc3c770;
-  }
-  .stack-block-expanded > .stack-block-label {
-    .ui-custom-checkbox {
-      background-color: transparent;
-    }
-    .ui-checkbox-label-text {
-      color: #4d5d69;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'customize-hardware',
+      themeMode,
+      { 'alert-show': props.errors.length },
+    ]"
+  >
+    <ui-tabs
+      v-model="selectedNavItem"
+      :tabs="navItemsLocal"
+      test-id="vm-wizard-tabs"
+      type="underline"
+      class="navigation"
+    />
+    <ui-alert
+      v-show="props.errors.length"
+      :messages="props.errors"
+      status="alert-danger"
+      test-id="customize-hardware-alert"
+      class="errors-alert"
+      size="md"
+      @hide="emits('remove-validation-errors')"
+    />
+
+    <div v-show="selectedNavItem === 0">
+      <common-vm-actions-common-customize-hardware-virtual-hardware
+        :vm-name="vmName"
+        :storage="props.storage"
+        :max-cpus="props.maxCpus"
+        :max-memory="props.maxMemory"
+        :cpu-models="props.cpuModels"
+        :cpu="props.cpu"
+        :memory="props.memory"
+        :is-edit="props.isEdit"
+        :is-clone="props.isClone"
+        :state="props.state"
+        :hard-disks="props.hardDisks"
+        :cd-dvd-drives="props.cdDvdDrives"
+        :networks="props.networks"
+        :networks-table="props.networksTable"
+        :video-card="props.videoCard"
+        :usb-controller="props.usbController"
+        :pci-devices="props.pciDevices"
+        :nodes="props.nodes"
+        :files="props.files"
+        :error-validation-fields="props.errorValidationFields"
+        :get-datastore-table-func="props.getDatastoreTableFunc"
+        :datastore="props.datastore"
+        :is-datastore-loading="props.isDatastoreLoading"
+        :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+        :passthrough-devices="props.passthroughDevices"
+        :mediated-devices="props.mediatedDevices"
+        :project="props.project"
+        :guest-machine-type="guestMachineType"
+        :computeResource="props.computeResource"
+        :compatibility-info="props.compatibilityInfo"
+        @send-data="emits('send-data-virtual-hardware-method', $event)"
+        @get-storage="emits('get-storage', $event)"
+        @get-folders-or-files="emits('get-folders-or-files', $event)"
+        @get-active-device-child="emits('get-active-device-child', $event)"
+        @show-datastore-child="emits('show-datastore-child', $event)"
+        @remove-error-by-title="emits('remove-error-by-title', $event)"
+        @invalid="virtualHardwareInvalid = $event"
+        @get-networks-table="emits('get-networks-table', $event)"
+        @get-pci-devices="emits('get-pci-devices')"
+      />
+    </div>
+    <div v-show="selectedNavItem === 1">
+      <common-vm-actions-common-customize-hardware-vmoptions
+        v-model:vm-name="vmName"
+        v-model:guest-machine-type="guestMachineType"
+        v-model:guest-os-family="guestOsFamily"
+        v-model:guest-os-version="guestOsVersion"
+        :hard-disks="props.hardDisksForBootOptions"
+        :cd-dvd-drives="props.cdDvdDrivesForBootOptions"
+        :networks="props.networksForBootOptions"
+        :options="props.options"
+        :is-edit="props.isEdit"
+        :is-clone="props.isClone"
+        :error-validation-fields="props.errorValidationFields"
+        :state="props.state"
+        :compatibility-info="props.compatibilityInfo"
+        :is-vmt="props.isVmt"
+        @change-boot-order="emits('change-boot-order', $event)"
+        @send-data="emits('send-data-vm-options-method', $event)"
+        @invalid="vmOptionsInvalid = $event"
+        @remove-error-by-title="emits('remove-error-by-title', $event)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_TabItem } from '~/node_modules/bfg-uikit/components/ui/tabs/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type { UI_I_DatastoreTableItem } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_NetworkTableItem } from '~/lib/models/store/network/interfaces'
+import type { UI_I_TablePayload } from '~/lib/models/table/interfaces'
+import type { UI_I_FolderOrFileTreePayload } from '~/lib/models/store/storage/interfaces'
+import type { UI_I_FileTreeNode } from '~/components/lib/models/interfaces'
+import type {
+  UI_I_SendDataNewPciDevice,
+  UI_I_SendDataNewCdDvdDrive,
+  UI_I_SendDataNewHardDisk,
+  UI_I_SendDataNewNetwork,
+  UI_I_SendDataVideoCard,
+  UI_I_SendDataVirtualHardware,
+} from '~/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/models/interfaces'
+import type { UI_I_SendDataVmoptions } from '~/components/common/vm/actions/common/customizeHardware/vmoptions/lib/models/interfaces'
+import type { UI_T_SelectedNavItem } from '~/components/common/vm/actions/common/lib/models/types'
+import type { UI_I_ErrorValidationField } from '~/lib/models/store/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import type { UI_T_ChangeBootOrder } from '~/components/common/vm/actions/lib/models/types'
+import type {
+  API_UI_I_VmEditCpu,
+  API_UI_I_VmEditMemory,
+  UI_I_MediatedDevice,
+  UI_I_PciDevice,
+} from '~/lib/models/store/vm/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+import { navItemsNewViewFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
+
+const vmName = defineModel<string>('vmName', { required: true })
+const guestOsFamily = defineModel<UI_I_OptionItem | null>('guestOsFamily', {
+  required: true,
+})
+const guestOsVersion = defineModel<UI_I_OptionItem | null>('guestOsVersion', {
+  required: true,
+})
+const selectedNavItem = defineModel<UI_T_SelectedNavItem>('selectedNavItem', {
+  required: true,
+})
+const guestMachineType = defineModel<UI_I_OptionItem | null>(
+  'guestMachineType',
+  { required: true }
+)
+const vmOptionsInvalid = defineModel<string[]>('vmOptionsInvalid', {
+  required: true,
+})
+const virtualHardwareInvalid = defineModel<string[]>('virtualHardwareInvalid', {
+  required: true,
+})
+
+const props = defineProps<{
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  errors: string[]
+  storage: UI_I_DatastoreTableItem | null
+  maxCpus: number
+  navItems: UI_I_TabItem[]
+  cpuModels: UI_I_OptionItem[]
+  maxMemory: number
+  datastore: UI_I_DatastoreTableItem[]
+  isDatastoreLoading: boolean
+  networksTable: UI_I_NetworkTableItem[]
+  errorValidationFields: UI_I_ErrorValidationField[]
+  networksForBootOptions: UI_I_SendDataNewNetwork[] | null
+  hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null
+  cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null
+  cpu?: API_UI_I_VmEditCpu
+  state?: string | number
+  isEdit?: boolean
+  memory?: API_UI_I_VmEditMemory
+  project?: UI_T_Project
+  isClone?: boolean
+  options?: UI_I_SendDataVmoptions
+  networks?: UI_I_SendDataNewNetwork[] | null
+  videoCard?: UI_I_SendDataVideoCard
+  hardDisks?: UI_I_SendDataNewHardDisk[] | null
+  pciDevices?: UI_I_SendDataNewPciDevice[]
+  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+  usbController?: string
+  passthroughDevices?: UI_I_PciDevice[]
+  mediatedDevices?: UI_I_MediatedDevice[]
+  vmCpuHelpTextSecond?: string
+  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
+  computeResource?: UI_I_TreeNode | null
+  compatibilityInfo?: string
+  isVmt?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-pci-devices'): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'remove-validation-errors'): void
+  (event: 'send-data-vm-options-method', value: UI_I_SendDataVmoptions): void
+  (
+    event: 'send-data-virtual-hardware-method',
+    value: UI_I_SendDataVirtualHardware
+  ): void
+  (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const navItemsLocal = computed<UI_I_TabItem[]>(() =>
+  navItemsNewViewFunc(localization.value)
+)
+
+const themeMode = useLocalStorage('themeMode')
+</script>
+
+<style lang="scss">
+:root {
+  --divider-color: #e9ebed;
+}
+:root.dark-theme {
+  --divider-color: #e9ebed1f;
+}
+</style>
+
+<style scoped lang="scss">
+.customize-hardware {
+  max-height: inherit;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+
+  &.alert-show {
+    grid-template-rows: auto auto minmax(0, 1fr);
+  }
+
+  .errors-alert {
+    margin-top: 12px;
+  }
+}
+
+:deep(.stack-block .stack-block-label .stack-view-key) {
+  //flex: 0 0 280px;
+  max-width: 280px;
+  margin-right: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  //line-height: 32px;
+
+  .ui-checkbox-label {
+    min-height: 32px;
+  }
+}
+:deep(.stack-block .stack-block-label .stack-block-content) {
+  width: unset;
+
+  .ui-checkbox-label {
+    min-height: 32px;
+  }
+  .drag-drop-item .ui-checkbox-label {
+    min-height: auto;
+  }
+}
+</style>
+<style lang="scss">
+.light-theme {
+  .stack-block-label .ui-main-select-toggle:not(.error):not(:disabled) {
+    background-color: #ffffff;
+  }
+  .stack-block-expanded > .stack-block-label .ui-main-select-toggle {
+    background-color: #1b2a371f;
+
+    &:not(.open) {
+      border-color: #e9ebed3d;
+
+      .ui-arrow-icon {
+        color: #e9eaec;
+      }
+    }
+  }
+
+  .stack-block-expanded > .stack-block-label .combobox-input {
+    color: #e9eaec;
+  }
+  .stack-block-expanded > .stack-block-label .ui-selected-text {
+    color: #e9eaec;
+  }
+
+  .stack-block-label .ui-main-input {
+    background-color: #ffffff;
+  }
+  .stack-block-expanded > .stack-block-label .ui-main-input {
+    background-color: #1b2a371f;
+    border-color: #e9ebed3d;
+    color: #e9eaec;
+  }
+  .stack-block-expanded > .stack-block-label {
+    .ui-custom-checkbox {
+      background-color: transparent;
+    }
+    .ui-checkbox-label-text {
+      color: #e9eaec;
+    }
+  }
+}
+
+.dark-theme {
+  .stack-block-label {
+    .ui-main-select-toggle {
+      background-color: #1b2a371f;
+    }
+    .error {
+      .ui-main-select-toggle {
+        background-color: #d1312614;
+      }
+    }
+  }
+  .stack-block-expanded > .stack-block-label .ui-main-select-toggle {
+    &:not(.error) {
+      background-color: #ffffff;
+      border-color: #d3d6da;
+    }
+    &:not(.error):not(.open):not(:disabled):hover {
+      border-color: #9da6ad;
+    }
+    &.open {
+      border-color: #008fd6;
+
+      .ui-arrow-icon {
+        color: #008fd6;
+      }
+    }
+    .ui-arrow-icon {
+      color: #213444;
+    }
+  }
+  .stack-block-expanded > .stack-block-label .combobox-input {
+    color: #182531;
+  }
+  .stack-block-expanded > .stack-block-label .ui-selected-text {
+    color: #182531;
+  }
+
+  .stack-block-label .ui-main-input {
+    background-color: #1b2a371f;
+  }
+  .stack-block-expanded > .stack-block-label .ui-main-input {
+    background-color: #ffffff;
+    border-color: #d3d6da;
+    color: #182531;
+  }
+  .ui-select-toggle-button:disabled {
+    background-color: #aab1b614;
+    border-color: #d3d6da14;
+    color: #bdc3c770;
+  }
+  .stack-block-expanded > .stack-block-label {
+    .ui-custom-checkbox {
+      background-color: transparent;
+    }
+    .ui-checkbox-label-text {
+      color: #4d5d69;
+    }
+  }
+}
+</style>