bfg-common 1.3.308 → 1.3.310

package/components/atoms/wizard/Wizard.vue

@@ -1,453 +1,453 @@
-<template>
-  <div v-if="props.show" class="modal clr-wizard wizard-xl">
-    <div
-      class="modal-dialog modal-xl relative"
-      :style="{ 'max-height': props.maxHeight }"
-    >
-      <div class="modal-content-wrapper">
-        <nav class="modal-nav clr-wizard-stepnav-wrapper">
-          <h1 class="clr-wizard-title">
-            {{ props.title }}
-          </h1>
-          <atoms-wizard-step
-            :test-id="props.testId"
-            :steps="steps"
-            :was-completed="props.wasCompleted"
-            @change="onSelectStep"
-          />
-        </nav>
-        <div class="modal-content">
-          <div class="modal-header--accessible">
-            <slot name="contentHeading">
-              <div class="modal-title-wrapper">
-                <h2 class="modal-title">
-                  <span class="modal-title-text">
-                    {{ selectedStep.title }}
-                  </span>
-                </h2>
-              </div>
-            </slot>
-            <button
-              :id="`${props.testId}-close-icon`"
-              :data-id="`${props.testId}-close-button`"
-              class="close"
-              @click="onHide"
-            >
-              <atoms-the-icon class="close-icon" name="close" />
-            </button>
-          </div>
-          <div class="modal-body" style="padding: 16px 15px 10px 10px">
-            <div v-if="selectedStep.subTitle" class="content-heading">
-              <div v-if="selectedStep.subTitle !== 'border'">
-                <h2>{{ selectedStep.subTitle }}</h2>
-              </div>
-            </div>
-            <slot name="modalBody" :selected-step="selectedStep" />
-          </div>
-          <div class="modal-footer">
-            <slot name="modalFooterContent"></slot>
-            <slot name="modalFooter">
-              <button
-                :id="`${props.testId}-cancel-button`"
-                :data-id="`${props.testId}-cancel-button`"
-                class="btn btn-link"
-                @click="onHide"
-              >
-                {{ props.localization.cancel }}
-              </button>
-              <button
-                v-if="!isFirstStep"
-                :id="`${props.testId}-back-button`"
-                :data-id="`${props.testId}-back-button`"
-                class="btn btn-outline"
-                @click="onPreviousStep"
-              >
-                {{ props.localization.back }}
-              </button>
-              <button
-                v-if="isLastStep"
-                :id="`${props.testId}-finish-button`"
-                :data-id="`${props.testId}-finish-button`"
-                class="btn btn-success"
-                @click="emits('submit')"
-              >
-                {{ props.localization.finish }}
-              </button>
-              <button
-                v-else
-                :id="`${props.testId}-next-button`"
-                :data-id="`${props.testId}-next-button`"
-                :disabled="props.isDisabledFinish"
-                class="btn btn-primary"
-                @click="onNextStep"
-              >
-                {{ props.localization.next }}
-              </button>
-            </slot>
-          </div>
-        </div>
-      </div>
-
-      <div v-show="props.isLoading" class="loader">
-        <i class="fa clr-tree-node-caret-icon spinner" />
-        <div v-if="props.loaderMessages.length" class="text">
-          <p v-for="message in props.loaderMessages" :key="message">
-            {{ message }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type {
-  UI_I_WizardStep,
-  UI_I_WizardStepNavigation,
-} from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
-
-const props = withDefaults(
-  defineProps<{
-    title: string
-    show: boolean
-    steps: UI_I_WizardStep[]
-    selectedScheme: number[]
-    isLoading?: boolean
-    loaderMessages?: string[]
-    isDisabledNext?: boolean
-    isDisabledFinish?: boolean
-    localization?: UI_I_Localization
-    testId?: string
-    wasCompleted: boolean
-    maxHeight?: string
-  }>(),
-  {
-    isLoading: false,
-    loaderMessages: () => [],
-    isDisabledNext: false,
-    isDisabledFinish: false,
-    localization: () => ({}),
-    testId: '',
-    maxHeight: '',
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'submit'): void
-  (event: 'hide'): void
-  (event: 'change-steps', value: UI_I_WizardStep[]): void
-}>()
-
-const steps = ref<UI_I_WizardStep[]>(
-  useDeepCopy(
-    props.steps.filter((step: UI_I_WizardStep) =>
-      props.selectedScheme.includes(step.id)
-    )
-  )
-)
-
-const onHide = (): void => {
-  emits('hide')
-}
-
-const isSelected = (status: UI_E_WIZARD_STATUS): boolean =>
-  status === UI_E_WIZARD_STATUS.SELECTED ||
-  status === UI_E_WIZARD_STATUS.INVALID_SELECTED
-
-const isLastStep = computed<boolean>(() => {
-  const lastStepStatus = steps.value[steps.value.length - 1].status
-  return isSelected(lastStepStatus)
-})
-
-const isFirstStep = computed<boolean>(() => {
-  const firstStepStatus = steps.value[0].status
-  return isSelected(firstStepStatus)
-})
-
-const selectedStep = computed<UI_I_WizardStep>(
-  () =>
-    steps.value.find((step: UI_I_WizardStep) => isSelected(step.status)) ||
-    steps.value[0]
-)
-
-const onSelectStep = (step: UI_I_WizardStepNavigation): void => {
-  const index = steps.value.findIndex(
-    (st: UI_I_WizardStep) => st.id === step.id
-  )
-  const indexInactive = steps.value.findIndex(
-    (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
-  )
-
-  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
-    if (!st.isValid && index === i)
-      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
-
-    if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
-
-    if (!st.isValid && index !== i)
-      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
-
-    // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step, but it is not to be selected, set it as active
-    if (
-      (indexInactive - 1 === i && index !== indexInactive - 1) ||
-      (indexInactive < 0 && steps.value.length - 1 === i && index !== i)
-    )
-      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
-
-    if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
-      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-    return st
-  })
-
-  emits('change-steps', newSteps)
-}
-
-const onNextStep = (): void => {
-  const currentStepIndex: number = steps.value.findIndex(
-    (st: UI_I_WizardStep) => isSelected(st.status)
-  )
-  const stepIndex: number = currentStepIndex + 1
-  const step: UI_I_WizardStep = steps.value[stepIndex]
-
-  if (!step) return
-
-  const index = steps.value.findIndex(
-    (st: UI_I_WizardStep) => st.id === step.id
-  )
-
-  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
-    if (!st.isValid && index === i)
-      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
-
-    if (!st.isValid && index !== i)
-      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
-
-    const indexInactive = steps.value.findIndex(
-      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
-    )
-
-    // If current step is not equal selected step, and it is not inactive or active, set it as completed
-    if (
-      index !== i &&
-      st.status !== UI_E_WIZARD_STATUS.INACTIVE &&
-      st.status !== UI_E_WIZARD_STATUS.ACTIVE
-    )
-      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-    if (index === i) {
-      return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
-    }
-
-    if (stepIndex !== indexInactive && indexInactive - 1 === i)
-      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
-
-    return st
-  })
-
-  emits('change-steps', newSteps)
-}
-
-const onPreviousStep = (): void => {
-  const currentStepIndex: number = steps.value.findIndex(
-    (st: UI_I_WizardStep) => isSelected(st.status)
-  )
-  const stepIndex: number = currentStepIndex - 1
-  const step: UI_I_WizardStep = steps.value[stepIndex]
-
-  const indexInactive = steps.value.findIndex(
-    (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
-  )
-
-  if (!step) return
-  const index = steps.value.findIndex(
-    (st: UI_I_WizardStep) => st.title === step.title
-  )
-
-  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
-    if (!st.isValid && index === i)
-      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
-
-    if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
-
-    if (!st.isValid && index !== i)
-      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
-
-    // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step
-    if (
-      (indexInactive - 1 === i && index !== indexInactive - 1) ||
-      (indexInactive < 0 && steps.value.length - 1 === i)
-    )
-      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
-
-    if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
-      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
-
-    return st
-  })
-
-  emits('change-steps', newSteps)
-}
-
-watch(
-  () => props.selectedScheme,
-  (newValue: number[]) => {
-    steps.value = props.steps.filter((step: UI_I_WizardStep) =>
-      newValue.includes(step.id)
-    )
-  },
-  { deep: true, immediate: true }
-)
-watch(
-  () => props.steps,
-  (newValue: UI_I_WizardStep[]) => {
-    steps.value = newValue.filter((step: UI_I_WizardStep) =>
-      props.selectedScheme.includes(step.id)
-    )
-  },
-  { deep: true, immediate: true }
-)
-</script>
-
-<style scoped lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1050;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  overflow-y: auto;
-
-  .modal-nav {
-    background-color: var(--block-view-bg-color4);
-    .clr-wizard-title {
-      color: var(--main-color-mode);
-      font-size: 22px;
-      padding: 24px 12px 24px 24px;
-      //line-height: 1.2rem;
-    }
-  }
-
-  .modal-content-wrapper {
-    position: relative;
-    -webkit-animation-name: animateTop;
-    -webkit-animation-duration: 0.4s;
-    animation-name: animateTop;
-    animation-duration: 0.4s;
-  }
-
-  .modal-content {
-    background-color: var(--modal-bg-color);
-
-    .modal-header--accessible {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      width: 100%;
-      padding: 24px 19px 6px 24px;
-
-      .modal-title-text {
-        color: var(--main-color-mode);
-        font-size: 22px;
-      }
-
-      .close-icon {
-        fill: var(--close-icon);
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    .modal-body {
-      padding: 0 3px;
-    }
-
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      padding: 24px;
-      flex: unset;
-      min-height: 0;
-      height: auto;
-    }
-  }
-
-  .loader {
-    position: absolute;
-    z-index: 1000;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.3);
-
-    .spinner {
-      left: unset;
-    }
-
-    .text {
-      position: absolute;
-      top: calc(40% + 75px);
-      text-align: center;
-      background-color: rgba(0, 0, 0, 0.3);
-      padding: 5px 10px;
-      border-radius: 3px;
-
-      p {
-        color: white;
-      }
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-}
-h1,
-h2 {
-  // просмотреть если нигде не ломается переместит глобально
-  line-height: inherit;
-}
-
-.content-heading {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  border-bottom: 1px solid #a6a6a6;
-
-  & > div h2 {
-    font-weight: 400;
-    font-size: 13px;
-    line-height: inherit;
-    color: var(--add-vm-context-sub-title);
-  }
-}
-
-:root.dark-theme {
-  .loader .text {
-    position: absolute;
-    top: calc(40% + 75px);
-    text-align: center;
-    background-color: rgba(250, 250, 250, 0.5);
-    padding: 5px 10px;
-    border-radius: 5px;
-
-    p {
-      color: black;
-    }
-  }
-}
-</style>
+<template>
+  <div v-if="props.show" class="modal clr-wizard wizard-xl">
+    <div
+      class="modal-dialog modal-xl relative"
+      :style="{ 'max-height': props.maxHeight }"
+    >
+      <div class="modal-content-wrapper">
+        <nav class="modal-nav clr-wizard-stepnav-wrapper">
+          <h1 class="clr-wizard-title">
+            {{ props.title }}
+          </h1>
+          <atoms-wizard-step
+            :test-id="props.testId"
+            :steps="steps"
+            :was-completed="props.wasCompleted"
+            @change="onSelectStep"
+          />
+        </nav>
+        <div class="modal-content">
+          <div class="modal-header--accessible">
+            <slot name="contentHeading">
+              <div class="modal-title-wrapper">
+                <h2 class="modal-title">
+                  <span class="modal-title-text">
+                    {{ selectedStep.title }}
+                  </span>
+                </h2>
+              </div>
+            </slot>
+            <button
+              :id="`${props.testId}-close-icon`"
+              :data-id="`${props.testId}-close-button`"
+              class="close"
+              @click="onHide"
+            >
+              <atoms-the-icon class="close-icon" name="close" />
+            </button>
+          </div>
+          <div class="modal-body" style="padding: 16px 15px 10px 10px">
+            <div v-if="selectedStep.subTitle" class="content-heading">
+              <div v-if="selectedStep.subTitle !== 'border'">
+                <h2>{{ selectedStep.subTitle }}</h2>
+              </div>
+            </div>
+            <slot name="modalBody" :selected-step="selectedStep" />
+          </div>
+          <div class="modal-footer">
+            <slot name="modalFooterContent"></slot>
+            <slot name="modalFooter">
+              <button
+                :id="`${props.testId}-cancel-button`"
+                :data-id="`${props.testId}-cancel-button`"
+                class="btn btn-link"
+                @click="onHide"
+              >
+                {{ props.localization.cancel }}
+              </button>
+              <button
+                v-if="!isFirstStep"
+                :id="`${props.testId}-back-button`"
+                :data-id="`${props.testId}-back-button`"
+                class="btn btn-outline"
+                @click="onPreviousStep"
+              >
+                {{ props.localization.back }}
+              </button>
+              <button
+                v-if="isLastStep"
+                :id="`${props.testId}-finish-button`"
+                :data-id="`${props.testId}-finish-button`"
+                class="btn btn-success"
+                @click="emits('submit')"
+              >
+                {{ props.localization.finish }}
+              </button>
+              <button
+                v-else
+                :id="`${props.testId}-next-button`"
+                :data-id="`${props.testId}-next-button`"
+                :disabled="props.isDisabledFinish"
+                class="btn btn-primary"
+                @click="onNextStep"
+              >
+                {{ props.localization.next }}
+              </button>
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="props.isLoading" class="loader">
+        <i class="fa clr-tree-node-caret-icon spinner" />
+        <div v-if="props.loaderMessages.length" class="text">
+          <p v-for="message in props.loaderMessages" :key="message">
+            {{ message }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type {
+  UI_I_WizardStep,
+  UI_I_WizardStepNavigation,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    show: boolean
+    steps: UI_I_WizardStep[]
+    selectedScheme: number[]
+    isLoading?: boolean
+    loaderMessages?: string[]
+    isDisabledNext?: boolean
+    isDisabledFinish?: boolean
+    localization?: UI_I_Localization
+    testId?: string
+    wasCompleted: boolean
+    maxHeight?: string
+  }>(),
+  {
+    isLoading: false,
+    loaderMessages: () => [],
+    isDisabledNext: false,
+    isDisabledFinish: false,
+    localization: () => ({}),
+    testId: '',
+    maxHeight: '',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'submit'): void
+  (event: 'hide'): void
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+}>()
+
+const steps = ref<UI_I_WizardStep[]>(
+  useDeepCopy(
+    props.steps.filter((step: UI_I_WizardStep) =>
+      props.selectedScheme.includes(step.id)
+    )
+  )
+)
+
+const onHide = (): void => {
+  emits('hide')
+}
+
+const isSelected = (status: UI_E_WIZARD_STATUS): boolean =>
+  status === UI_E_WIZARD_STATUS.SELECTED ||
+  status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+
+const isLastStep = computed<boolean>(() => {
+  const lastStepStatus = steps.value[steps.value.length - 1].status
+  return isSelected(lastStepStatus)
+})
+
+const isFirstStep = computed<boolean>(() => {
+  const firstStepStatus = steps.value[0].status
+  return isSelected(firstStepStatus)
+})
+
+const selectedStep = computed<UI_I_WizardStep>(
+  () =>
+    steps.value.find((step: UI_I_WizardStep) => isSelected(step.status)) ||
+    steps.value[0]
+)
+
+const onSelectStep = (step: UI_I_WizardStepNavigation): void => {
+  const index = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.id === step.id
+  )
+  const indexInactive = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+  )
+
+  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
+    if (!st.isValid && index === i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+    if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+    if (!st.isValid && index !== i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+    // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step, but it is not to be selected, set it as active
+    if (
+      (indexInactive - 1 === i && index !== indexInactive - 1) ||
+      (indexInactive < 0 && steps.value.length - 1 === i && index !== i)
+    )
+      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+    if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
+      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+    return st
+  })
+
+  emits('change-steps', newSteps)
+}
+
+const onNextStep = (): void => {
+  const currentStepIndex: number = steps.value.findIndex(
+    (st: UI_I_WizardStep) => isSelected(st.status)
+  )
+  const stepIndex: number = currentStepIndex + 1
+  const step: UI_I_WizardStep = steps.value[stepIndex]
+
+  if (!step) return
+
+  const index = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.id === step.id
+  )
+
+  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
+    if (!st.isValid && index === i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+    if (!st.isValid && index !== i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+    const indexInactive = steps.value.findIndex(
+      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+    )
+
+    // If current step is not equal selected step, and it is not inactive or active, set it as completed
+    if (
+      index !== i &&
+      st.status !== UI_E_WIZARD_STATUS.INACTIVE &&
+      st.status !== UI_E_WIZARD_STATUS.ACTIVE
+    )
+      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+    if (index === i) {
+      return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+    }
+
+    if (stepIndex !== indexInactive && indexInactive - 1 === i)
+      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+    return st
+  })
+
+  emits('change-steps', newSteps)
+}
+
+const onPreviousStep = (): void => {
+  const currentStepIndex: number = steps.value.findIndex(
+    (st: UI_I_WizardStep) => isSelected(st.status)
+  )
+  const stepIndex: number = currentStepIndex - 1
+  const step: UI_I_WizardStep = steps.value[stepIndex]
+
+  const indexInactive = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+  )
+
+  if (!step) return
+  const index = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.title === step.title
+  )
+
+  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
+    if (!st.isValid && index === i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+    if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+    if (!st.isValid && index !== i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+    // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step
+    if (
+      (indexInactive - 1 === i && index !== indexInactive - 1) ||
+      (indexInactive < 0 && steps.value.length - 1 === i)
+    )
+      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+    if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
+      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+    return st
+  })
+
+  emits('change-steps', newSteps)
+}
+
+watch(
+  () => props.selectedScheme,
+  (newValue: number[]) => {
+    steps.value = props.steps.filter((step: UI_I_WizardStep) =>
+      newValue.includes(step.id)
+    )
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  () => props.steps,
+  (newValue: UI_I_WizardStep[]) => {
+    steps.value = newValue.filter((step: UI_I_WizardStep) =>
+      props.selectedScheme.includes(step.id)
+    )
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+
+  .modal-nav {
+    background-color: var(--block-view-bg-color4);
+    .clr-wizard-title {
+      color: var(--main-color-mode);
+      font-size: 22px;
+      padding: 24px 12px 24px 24px;
+      //line-height: 1.2rem;
+    }
+  }
+
+  .modal-content-wrapper {
+    position: relative;
+    -webkit-animation-name: animateTop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animateTop;
+    animation-duration: 0.4s;
+  }
+
+  .modal-content {
+    background-color: var(--modal-bg-color);
+
+    .modal-header--accessible {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+      padding: 24px 19px 6px 24px;
+
+      .modal-title-text {
+        color: var(--main-color-mode);
+        font-size: 22px;
+      }
+
+      .close-icon {
+        fill: var(--close-icon);
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .modal-body {
+      padding: 0 3px;
+    }
+
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding: 24px;
+      flex: unset;
+      min-height: 0;
+      height: auto;
+    }
+  }
+
+  .loader {
+    position: absolute;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.3);
+
+    .spinner {
+      left: unset;
+    }
+
+    .text {
+      position: absolute;
+      top: calc(40% + 75px);
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 5px 10px;
+      border-radius: 3px;
+
+      p {
+        color: white;
+      }
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+h1,
+h2 {
+  // просмотреть если нигде не ломается переместит глобально
+  line-height: inherit;
+}
+
+.content-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid #a6a6a6;
+
+  & > div h2 {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: inherit;
+    color: var(--add-vm-context-sub-title);
+  }
+}
+
+:root.dark-theme {
+  .loader .text {
+    position: absolute;
+    top: calc(40% + 75px);
+    text-align: center;
+    background-color: rgba(250, 250, 250, 0.5);
+    padding: 5px 10px;
+    border-radius: 5px;
+
+    p {
+      color: black;
+    }
+  }
+}
+</style>