bfg-common 1.4.860 → 1.4.862

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

@@ -1,271 +1,271 @@
-<template>
-  <common-vm-actions-common-customize-hardware-new
-    v-if="isNewView"
-    v-model:vm-name="vmName"
-    v-model:guest-machine-type="guestMachineType"
-    v-model:guest-os-family="guestOsFamily"
-    v-model:guest-os-version="guestOsVersion"
-    v-model:selected-nav-item="selectedNavItemLocal"
-    v-model:virtual-hardware-invalid="virtualHardwareInvalid"
-    v-model:vm-options-invalid="vmOptionsInvalid"
-    :error-validation-fields="props.errorValidationFields"
-    :storage="props.storage"
-    :cpu-models="props.cpuModels"
-    :hard-disks-for-boot-options="props.hardDisksForBootOptions"
-    :cd-dvd-drives-for-boot-options="props.cdDvdDrivesForBootOptions"
-    :networks-for-boot-options="props.networksForBootOptions"
-    :max-cpus="props.maxCpus"
-    :max-memory="props.maxMemory"
-    :nodes="props.nodes"
-    :files="props.files"
-    :networks-table="props.networksTable"
-    :cpu="props.cpu"
-    :memory="props.memory"
-    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-    :get-datastore-table-func="props.getDatastoreTableFunc"
-    :datastore="props.datastore"
-    :hard-disks="props.hardDisks"
-    :cd-dvd-drives="props.cdDvdDrives"
-    :networks="props.networks"
-    :video-card="props.videoCard"
-    :pci-devices="props.pciDevices"
-    :usb-controller="props.usbController"
-    :options="props.options"
-    :is-edit="props.isEdit"
-    :is-clone="props.isClone"
-    :state="props.state"
-    :passthrough-devices="props.passthroughDevices"
-    :mediated-devices="props.mediatedDevices"
-    :project="props.project"
-    :nav-items="navItems"
-    :errors="errors"
-    @change-boot-order="emits('change-boot-order', $event)"
-    @send-data="emits('send-data', $event)"
-    @next="emits('next')"
-    @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)"
-    @get-networks-table="emits('get-networks-table', $event)"
-    @get-pci-devices="emits('get-pci-devices')"
-    @remove-validation-errors="onRemoveValidationErrors"
-    @send-data-virtual-hardware-method="onSendDataVirtualHardwareMethod"
-    @send-data-vm-options-method="onSendDataVmOptionsMethod"
-  />
-  <common-vm-actions-common-customize-hardware-old
-    v-else
-    v-model:vm-name="vmName"
-    v-model:guest-machine-type="guestMachineType"
-    v-model:guest-os-family="guestOsFamily"
-    v-model:guest-os-version="guestOsVersion"
-    v-model:selected-nav-item="selectedNavItemLocal"
-    v-model:virtual-hardware-invalid="virtualHardwareInvalid"
-    v-model:vm-options-invalid="vmOptionsInvalid"
-    :error-validation-fields="props.errorValidationFields"
-    :storage="props.storage"
-    :cpu-models="props.cpuModels"
-    :hard-disks-for-boot-options="props.hardDisksForBootOptions"
-    :cd-dvd-drives-for-boot-options="props.cdDvdDrivesForBootOptions"
-    :networks-for-boot-options="props.networksForBootOptions"
-    :max-cpus="props.maxCpus"
-    :max-memory="props.maxMemory"
-    :nodes="props.nodes"
-    :files="props.files"
-    :networks-table="props.networksTable"
-    :cpu="props.cpu"
-    :memory="props.memory"
-    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
-    :get-datastore-table-func="props.getDatastoreTableFunc"
-    :datastore="props.datastore"
-    :hard-disks="props.hardDisks"
-    :cd-dvd-drives="props.cdDvdDrives"
-    :networks="props.networks"
-    :video-card="props.videoCard"
-    :pci-devices="props.pciDevices"
-    :usb-controller="props.usbController"
-    :options="props.options"
-    :is-edit="props.isEdit"
-    :is-clone="props.isClone"
-    :state="props.state"
-    :passthrough-devices="props.passthroughDevices"
-    :mediated-devices="props.mediatedDevices"
-    :project="props.project"
-    :nav-items="navItems"
-    :errors="errors"
-    @change-boot-order="emits('change-boot-order', $event)"
-    @send-data="emits('send-data', $event)"
-    @next="emits('next')"
-    @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)"
-    @get-networks-table="emits('get-networks-table', $event)"
-    @get-pci-devices="emits('get-pci-devices')"
-    @remove-validation-errors="onRemoveValidationErrors"
-    @send-data-virtual-hardware-method="onSendDataVirtualHardwareMethod"
-    @send-data-vm-options-method="onSendDataVmOptionsMethod"
-  />
-</template>
-
-<script setup lang="ts">
-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_SendDataCustomizeHardware } from '~/components/common/vm/actions/common/customizeHardware/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_Localization } from '~/lib/models/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 { navItemsFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
-
-const vmName = defineModel<string>('vmName', { required: true })
-const guestMachineType = defineModel<UI_I_OptionItem | null>(
-  'guest-machine-type'
-)
-const guestOsFamily = defineModel<UI_I_OptionItem | null>('guestOsFamily')
-const guestOsVersion = defineModel<UI_I_OptionItem | null>('guestOsVersion')
-
-const props = defineProps<{
-  errorValidationFields: UI_I_ErrorValidationField[]
-  storage: UI_I_DatastoreTableItem | null
-  cpuModels: UI_I_OptionItem[]
-  hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null
-  cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null
-  networksForBootOptions: UI_I_SendDataNewNetwork[] | null
-  customizeHardwareSubmit: null | Function
-  maxCpus: number
-  maxMemory: number
-  selectedNavItem: UI_T_SelectedNavItem
-  nodes: UI_I_FileTreeNode[]
-  files: UI_I_FileTreeNode[]
-  networksTable: UI_I_NetworkTableItem[]
-  cpu?: API_UI_I_VmEditCpu
-  memory?: API_UI_I_VmEditMemory
-  vmCpuHelpTextSecond?: string
-  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
-  datastore: UI_I_DatastoreTableItem[]
-  hardDisks?: UI_I_SendDataNewHardDisk[] | null
-  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
-  networks?: UI_I_SendDataNewNetwork[] | null
-  videoCard?: UI_I_SendDataVideoCard
-  pciDevices?: UI_I_SendDataNewPciDevice[]
-  usbController?: string
-  options?: UI_I_SendDataVmoptions
-  isEdit?: boolean
-  isClone?: boolean
-  state?: string | number
-  passthroughDevices?: UI_I_PciDevice[]
-  mediatedDevices?: UI_I_MediatedDevice[]
-  project?: UI_T_Project
-}>()
-const emits = defineEmits<{
-  (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
-  (event: 'send-data', value: UI_I_SendDataCustomizeHardware): void
-  (event: 'next'): void
-  (event: 'get-storage', value: UI_I_TablePayload): void
-  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
-  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
-  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
-  (event: 'remove-error-by-title', value: string): void
-  (event: 'get-networks-table', value: UI_I_TablePayload): void
-  (event: 'get-pci-devices'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const navItems = computed<UI_I_TabItem[]>(() =>
-  navItemsFunc(localization.value)
-)
-const selectedNavItemLocal = ref<number>(0)
-watch(
-  () => props.selectedNavItem,
-  (newValue) => {
-    selectedNavItemLocal.value = newValue
-  }
-)
-
-const sendDataVirtualHardware = ref<UI_I_SendDataVirtualHardware | null>(null)
-const onSendDataVirtualHardwareMethod = (
-  data: UI_I_SendDataVirtualHardware
-): void => {
-  sendDataVirtualHardware.value = data
-  sendData()
-}
-const sendDataVmOptions = ref<UI_I_SendDataVmoptions | null>(null)
-const onSendDataVmOptionsMethod = (data: UI_I_SendDataVmoptions): void => {
-  sendDataVmOptions.value = data
-  sendData()
-}
-const sendData = (): void => {
-  emits('send-data', {
-    virtualHardware: sendDataVirtualHardware.value,
-    vmOptions: sendDataVmOptions.value,
-  })
-}
-
-watch(
-  () => props.customizeHardwareSubmit,
-  (newValue) => {
-    newValue && submit(newValue)
-  }
-)
-const virtualHardwareInvalid = ref<string[]>([])
-const vmOptionsInvalid = ref<string[]>([])
-const submit = (cb: Function): void => {
-  const invalidDevices = [
-    ...virtualHardwareInvalid.value,
-    ...vmOptionsInvalid.value,
-  ]
-    .filter((item: string) => !!item)
-    .join(', ')
-
-  if (invalidDevices) {
-    showValidationErrors([
-      localization.value.common.thereErrorsFollowingFields.replace(
-        '{0}',
-        invalidDevices
-      ),
-    ])
-    cb(false)
-    return
-  }
-  onRemoveValidationErrors()
-
-  // emits('next')
-  cb(true)
-}
-
-const errors = ref<string[]>([])
-const showValidationErrors = (arr: string[]): void => {
-  errors.value = arr
-}
-const onRemoveValidationErrors = (): void => {
-  errors.value = []
-}
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <common-vm-actions-common-customize-hardware-new
+    v-if="isNewView"
+    v-model:vm-name="vmName"
+    v-model:guest-machine-type="guestMachineType"
+    v-model:guest-os-family="guestOsFamily"
+    v-model:guest-os-version="guestOsVersion"
+    v-model:selected-nav-item="selectedNavItemLocal"
+    v-model:virtual-hardware-invalid="virtualHardwareInvalid"
+    v-model:vm-options-invalid="vmOptionsInvalid"
+    :error-validation-fields="props.errorValidationFields"
+    :storage="props.storage"
+    :cpu-models="props.cpuModels"
+    :hard-disks-for-boot-options="props.hardDisksForBootOptions"
+    :cd-dvd-drives-for-boot-options="props.cdDvdDrivesForBootOptions"
+    :networks-for-boot-options="props.networksForBootOptions"
+    :max-cpus="props.maxCpus"
+    :max-memory="props.maxMemory"
+    :nodes="props.nodes"
+    :files="props.files"
+    :networks-table="props.networksTable"
+    :cpu="props.cpu"
+    :memory="props.memory"
+    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+    :get-datastore-table-func="props.getDatastoreTableFunc"
+    :datastore="props.datastore"
+    :hard-disks="props.hardDisks"
+    :cd-dvd-drives="props.cdDvdDrives"
+    :networks="props.networks"
+    :video-card="props.videoCard"
+    :pci-devices="props.pciDevices"
+    :usb-controller="props.usbController"
+    :options="props.options"
+    :is-edit="props.isEdit"
+    :is-clone="props.isClone"
+    :state="props.state"
+    :passthrough-devices="props.passthroughDevices"
+    :mediated-devices="props.mediatedDevices"
+    :project="props.project"
+    :nav-items="navItems"
+    :errors="errors"
+    @change-boot-order="emits('change-boot-order', $event)"
+    @send-data="emits('send-data', $event)"
+    @next="emits('next')"
+    @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)"
+    @get-networks-table="emits('get-networks-table', $event)"
+    @get-pci-devices="emits('get-pci-devices')"
+    @remove-validation-errors="onRemoveValidationErrors"
+    @send-data-virtual-hardware-method="onSendDataVirtualHardwareMethod"
+    @send-data-vm-options-method="onSendDataVmOptionsMethod"
+  />
+  <common-vm-actions-common-customize-hardware-old
+    v-else
+    v-model:vm-name="vmName"
+    v-model:guest-machine-type="guestMachineType"
+    v-model:guest-os-family="guestOsFamily"
+    v-model:guest-os-version="guestOsVersion"
+    v-model:selected-nav-item="selectedNavItemLocal"
+    v-model:virtual-hardware-invalid="virtualHardwareInvalid"
+    v-model:vm-options-invalid="vmOptionsInvalid"
+    :error-validation-fields="props.errorValidationFields"
+    :storage="props.storage"
+    :cpu-models="props.cpuModels"
+    :hard-disks-for-boot-options="props.hardDisksForBootOptions"
+    :cd-dvd-drives-for-boot-options="props.cdDvdDrivesForBootOptions"
+    :networks-for-boot-options="props.networksForBootOptions"
+    :max-cpus="props.maxCpus"
+    :max-memory="props.maxMemory"
+    :nodes="props.nodes"
+    :files="props.files"
+    :networks-table="props.networksTable"
+    :cpu="props.cpu"
+    :memory="props.memory"
+    :vm-cpu-help-text-second="props.vmCpuHelpTextSecond"
+    :get-datastore-table-func="props.getDatastoreTableFunc"
+    :datastore="props.datastore"
+    :hard-disks="props.hardDisks"
+    :cd-dvd-drives="props.cdDvdDrives"
+    :networks="props.networks"
+    :video-card="props.videoCard"
+    :pci-devices="props.pciDevices"
+    :usb-controller="props.usbController"
+    :options="props.options"
+    :is-edit="props.isEdit"
+    :is-clone="props.isClone"
+    :state="props.state"
+    :passthrough-devices="props.passthroughDevices"
+    :mediated-devices="props.mediatedDevices"
+    :project="props.project"
+    :nav-items="navItems"
+    :errors="errors"
+    @change-boot-order="emits('change-boot-order', $event)"
+    @send-data="emits('send-data', $event)"
+    @next="emits('next')"
+    @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)"
+    @get-networks-table="emits('get-networks-table', $event)"
+    @get-pci-devices="emits('get-pci-devices')"
+    @remove-validation-errors="onRemoveValidationErrors"
+    @send-data-virtual-hardware-method="onSendDataVirtualHardwareMethod"
+    @send-data-vm-options-method="onSendDataVmOptionsMethod"
+  />
+</template>
+
+<script setup lang="ts">
+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_SendDataCustomizeHardware } from '~/components/common/vm/actions/common/customizeHardware/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_Localization } from '~/lib/models/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 { navItemsFunc } from '~/components/common/vm/actions/common/customizeHardware/lib/config/navItems'
+
+const vmName = defineModel<string>('vmName', { required: true })
+const guestMachineType = defineModel<UI_I_OptionItem | null>(
+  'guest-machine-type'
+)
+const guestOsFamily = defineModel<UI_I_OptionItem | null>('guestOsFamily')
+const guestOsVersion = defineModel<UI_I_OptionItem | null>('guestOsVersion')
+
+const props = defineProps<{
+  errorValidationFields: UI_I_ErrorValidationField[]
+  storage: UI_I_DatastoreTableItem | null
+  cpuModels: UI_I_OptionItem[]
+  hardDisksForBootOptions: UI_I_SendDataNewHardDisk[] | null
+  cdDvdDrivesForBootOptions: UI_I_SendDataNewCdDvdDrive[] | null
+  networksForBootOptions: UI_I_SendDataNewNetwork[] | null
+  customizeHardwareSubmit: null | Function
+  maxCpus: number
+  maxMemory: number
+  selectedNavItem: UI_T_SelectedNavItem
+  nodes: UI_I_FileTreeNode[]
+  files: UI_I_FileTreeNode[]
+  networksTable: UI_I_NetworkTableItem[]
+  cpu?: API_UI_I_VmEditCpu
+  memory?: API_UI_I_VmEditMemory
+  vmCpuHelpTextSecond?: string
+  getDatastoreTableFunc?: (payload: UI_I_TablePayload) => Promise<void>
+  datastore: UI_I_DatastoreTableItem[]
+  hardDisks?: UI_I_SendDataNewHardDisk[] | null
+  cdDvdDrives?: UI_I_SendDataNewCdDvdDrive[] | null
+  networks?: UI_I_SendDataNewNetwork[] | null
+  videoCard?: UI_I_SendDataVideoCard
+  pciDevices?: UI_I_SendDataNewPciDevice[]
+  usbController?: string
+  options?: UI_I_SendDataVmoptions
+  isEdit?: boolean
+  isClone?: boolean
+  state?: string | number
+  passthroughDevices?: UI_I_PciDevice[]
+  mediatedDevices?: UI_I_MediatedDevice[]
+  project?: UI_T_Project
+}>()
+const emits = defineEmits<{
+  (event: 'change-boot-order', value: UI_T_ChangeBootOrder): void
+  (event: 'send-data', value: UI_I_SendDataCustomizeHardware): void
+  (event: 'next'): void
+  (event: 'get-storage', value: UI_I_TablePayload): void
+  (event: 'get-folders-or-files', value: UI_I_FolderOrFileTreePayload): void
+  (event: 'get-active-device-child', value: UI_I_FileTreeNode): void
+  (event: 'show-datastore-child', value: UI_I_FileTreeNode): void
+  (event: 'remove-error-by-title', value: string): void
+  (event: 'get-networks-table', value: UI_I_TablePayload): void
+  (event: 'get-pci-devices'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const navItems = computed<UI_I_TabItem[]>(() =>
+  navItemsFunc(localization.value)
+)
+const selectedNavItemLocal = ref<number>(0)
+watch(
+  () => props.selectedNavItem,
+  (newValue) => {
+    selectedNavItemLocal.value = newValue
+  }
+)
+
+const sendDataVirtualHardware = ref<UI_I_SendDataVirtualHardware | null>(null)
+const onSendDataVirtualHardwareMethod = (
+  data: UI_I_SendDataVirtualHardware
+): void => {
+  sendDataVirtualHardware.value = data
+  sendData()
+}
+const sendDataVmOptions = ref<UI_I_SendDataVmoptions | null>(null)
+const onSendDataVmOptionsMethod = (data: UI_I_SendDataVmoptions): void => {
+  sendDataVmOptions.value = data
+  sendData()
+}
+const sendData = (): void => {
+  emits('send-data', {
+    virtualHardware: sendDataVirtualHardware.value,
+    vmOptions: sendDataVmOptions.value,
+  })
+}
+
+watch(
+  () => props.customizeHardwareSubmit,
+  (newValue) => {
+    newValue && submit(newValue)
+  }
+)
+const virtualHardwareInvalid = ref<string[]>([])
+const vmOptionsInvalid = ref<string[]>([])
+const submit = (cb: Function): void => {
+  const invalidDevices = [
+    ...virtualHardwareInvalid.value,
+    ...vmOptionsInvalid.value,
+  ]
+    .filter((item: string) => !!item)
+    .join(', ')
+
+  if (invalidDevices) {
+    showValidationErrors([
+      localization.value.common.thereErrorsFollowingFields.replace(
+        '{0}',
+        invalidDevices
+      ),
+    ])
+    cb(false)
+    return
+  }
+  onRemoveValidationErrors()
+
+  // emits('next')
+  cb(true)
+}
+
+const errors = ref<string[]>([])
+const showValidationErrors = (arr: string[]): void => {
+  errors.value = arr
+}
+const onRemoveValidationErrors = (): void => {
+  errors.value = []
+}
+</script>
+
+<style scoped lang="scss"></style>