bfg-common 1.5.104 → 1.5.106

package/components/common/context/recursion/RecursionOld.vue

@@ -3,8 +3,8 @@
     <template v-if="props.isLoading">
       <atoms-loader-pre-loader
         id="loader"
-        :show="true"
         class="absolute-center context-menu__loading"
+        :show="true"
       />
     </template>
     <li
@@ -21,9 +21,9 @@
       @mouseleave="emits('toggle-items', [item, false, $event])"
     >
       <span
+        class="context-link"
         :style="item.style"
         :data-id="`${item.testId}-context-link`"
-        class="context-link"
         @mousedown="emits('select-item', item)"
       >
         <span :class="['context-icon', item.iconClassName]" />

package/components/common/details/DetailsItem.vue

@@ -22,7 +22,7 @@
     </div>
 
     <div v-show="isOpen" class="stack-children">
-      <div class="h-auto">
+      <div style="height: auto">
         <slot name="stackChildren" />
       </div>
     </div>

package/components/common/feedback/Buttons.vue

@@ -41,8 +41,8 @@
           @click="onSelect(item.key)"
         >
           <atoms-the-icon2
-            :name="item.iconName"
             class="feedback-icon btn-icon has-solid clr-i-outline clr-i-outline-path-2"
+            :name="item.iconName"
           />
           <span>{{ item.text }}</span>
         </button>

package/components/common/feedback/Feedback.vue

@@ -52,10 +52,8 @@
             {{ localization.common.cancel }}
           </button>
           <button
-            :class="[
-              'btn btn-outline',
-              props.loading && 'modal-dialog__loader',
-            ]"
+            class="btn btn-outline"
+            :class="props.loading && 'modal-dialog__loader'"
             :disabled="!description"
             data-id="feedback-modal-submit-button"
             @click="submit"

package/components/common/feedback/Message.vue

@@ -6,16 +6,16 @@
         id="feedback-message-textarea"
         v-model="descriptionLocal"
         :disabled="props.type === undefined"
-        :placeholder="descriptionTextPlaceholder"
         class="clr-textarea ng-pristine ng-invalid ng-touched textarea"
+        :placeholder="descriptionTextPlaceholder"
         data-id="feedback-message-textarea"
       ></textarea>
     </div>
     <div class="main-block">
       <span class="text">{{ localization.common.emailAddress }} </span>
       <atoms-tooltip-error
-        :has-error="isInvalidEmail"
         class="tooltip-error"
+        :has-error="isInvalidEmail"
         selector="#vm-wizard-vcpus-field input"
       >
         <template #elem>
@@ -199,9 +199,9 @@ const descriptionTextPlaceholder = computed<string>(() => {
   return localization.value.common.selectFeedbackType
 })
 const hasTakeScreenshot = ref<boolean>(false)
-const feedbackImgWrap = ref<any>()
-const feedbackImg = ref<any>()
-const isFileLoad = ref<any>(null)
+const feedbackImgWrap = ref()
+const feedbackImg = ref()
+const isFileLoad = ref(null)
 const memoryParentMain = ref<string>('')
 const memoryParentModalDialog = ref<string>('')
 

package/components/common/feedback/VisitPortal.vue

@@ -27,7 +27,6 @@
 
 <script setup lang="ts">
 import type { UI_I_Localization } from '~/lib/models/interfaces'
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const descriptions = ref<string[]>(localization.value.common.useOurExternalIdeasPortal.split('{0}'))

package/components/common/graph/graphNew/GraphNew.vue

@@ -14,10 +14,10 @@
           <div class="chart-export-dropdown-container">
             <ui-button
               :test-id="`button-metric-${uniqueId}`"
-              :class="['metric-export-button', { active: isShowDropdown }]"
               is-without-sizes
               is-without-height
               variant="text"
+              :class="['metric-export-button', { active: isShowDropdown }]"
               @click="isShowDropdown = !isShowDropdown"
             >
               <ui-icon name="burger" width="20" height="20" />
@@ -29,7 +29,7 @@
               :elem-id="`button-metric-${uniqueId}`"
               left
               width="max-content"
-              @select="onSelect($event)"
+              @select="onSelect($event, key)"
               @hide="isShowDropdown = false"
             />
           </div>

package/components/common/graph/lib/utils/renderGraph.ts

@@ -9,7 +9,7 @@ import type {
   I_SeriesLine,
   I_SeriesDisk,
   I_SeriesLineItem,
-} from '~/node_modules/bfg-nuxt-3-graph/graph/lib/models/interfaces'
+} from 'bfg-nuxt-3-graph/graph/lib/models/interfaces'
 
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 

package/components/common/layout/theHeader/feedback/new/New.vue

@@ -1,14 +1,11 @@
 <template>
   <Teleport to="body">
-    <div
-      id="feedback-dialog"
-      :class="['feedback-dialog', { 'light-bulb': selectedTab }]"
-    >
+    <div id="feedback-dialog">
       <ui-modal
         show
         :width="!options.isAnnotateImage ? '560px' : '880px'"
-        :title="title"
         test-id="feedback-modal"
+        :title="title"
         class="feedback"
         @hide="onHideModal"
       >
@@ -170,9 +167,7 @@ const onSubmit = (): void => {
   emits('submit')
 }
 
-const descriptions = ref<string[]>(
-  localization.value.common.useOurExternalIdeasPortal.split('{0}')
-)
+const descriptions = ref<string[]>(localization.value.common.useOurExternalIdeasPortal.split('{0}'))
 </script>
 
 <style lang="scss">
@@ -194,24 +189,6 @@ const descriptions = ref<string[]>(
 }
 </style>
 <style lang="scss" scoped>
-#feedback-dialog {
-  :deep(.modal-header) {
-    padding-bottom: 0;
-
-    &.scrolled {
-      border-bottom: 0;
-    }
-  }
-  &.light-bulb {
-    :deep(.modal-footer-container) {
-      padding-top: 20px;
-    }
-  }
-  :deep(.modal-container-standard) {
-    padding-top: 0;
-    padding-right: 12px;
-  }
-}
 .feedback {
   &__visit-portal {
     color: var(--feedback-text-color);
@@ -224,4 +201,7 @@ const descriptions = ref<string[]>(
     margin-right: 5px;
   }
 }
+:deep(.modal-container-standard) {
+  padding-top: 0;
+}
 </style>

package/components/common/layout/theHeader/feedback/new/additionalDetails/AdditionalDetails.vue

@@ -101,12 +101,12 @@
         </ui-button>
         <div class="separator-line"></div>
         <ui-button
-          :disabled="isDisabledButton"
           test-id="feedback-undo-button"
           size="sm"
           type="default"
           variant="outline"
           class="btn undo"
+          :disabled="isDisabledButton"
           @click="onUndoLast"
         >
           <ui-icon
@@ -120,12 +120,12 @@
       </div>
 
       <ui-button
-        :disabled="isDisabledButton"
         test-id="feedback-clear-all-button"
         size="sm"
         type="default"
         variant="outline"
         class="btn clear-all"
+        :disabled="isDisabledButton"
         @click="clearAll"
       >
         <ui-icon
@@ -140,14 +140,12 @@
 
     <div
       id="feedbackImgWrap"
-      :class="[
-        'preview-container',
-        {
-          disabled: !optionsModel.hasTakeScreenshot,
-          annotate: optionsModel.isAnnotateImage,
-        },
-      ]"
       ref="feedbackImgWrap"
+      class="preview-container"
+      :class="{
+        disabled: !optionsModel.hasTakeScreenshot,
+        annotate: optionsModel.isAnnotateImage,
+      }"
     >
       <div class="preview-container__backdrop">
         <div>
@@ -459,15 +457,6 @@ watch(
 )
 </script>
 
-<style>
-:root {
-  --upload-image-hover-bg-color: #f6f7f8;
-}
-:root.dark-theme {
-  --upload-image-hover-bg-color: #283948;
-}
-</style>
-
 <style lang="scss" scoped>
 @import 'assets/scss/common/mixins.scss';
 .additional-details {
@@ -477,9 +466,6 @@ watch(
       gap: 8px;
     }
     .upload-image {
-      &:hover {
-        background-color: var(--upload-image-hover-bg-color);
-      }
       label {
         @include flex($align: center, $just: center);
         width: 100%;
@@ -505,7 +491,7 @@ watch(
       .separator-line {
         width: 1px;
         height: 24px;
-        background: #e9ebed1f;
+        background: #e9ebed;
         margin: 0;
       }
     }
@@ -516,7 +502,6 @@ watch(
       font-size: 12px;
       padding: 0 8px;
       column-gap: 4px;
-      border-radius: 6px;
 
       &.undo {
         &:disabled {

package/components/common/layout/theHeader/feedback/new/additionalDetails/Headline.vue

@@ -5,17 +5,17 @@
     </span>
     <ui-icon
       id="feedback-additional-details-info-icon"
-      :class="['headline__icon pointer', isShowInfo && 'active']"
       name="info"
       width="16"
       height="16"
+      class="headline__icon pointer"
+      :class="isShowInfo && 'active'"
       @click="isShowInfo = !isShowInfo"
     />
     <ui-popup-window
       v-model="isShowInfo"
+      width="232px"
       :elem-id="'feedback-additional-details-info-icon'"
-      width="288px"
-      is-priority-right-position
     >
       <div class="common-widget-info">
         <div class="flex justify-between">
@@ -61,7 +61,7 @@ const isShowInfo = ref<boolean>(false)
     &:hover {
       color: var(--feedback-tooltip-hover-trigger-color);
     }
-    &.active {
+    &:active {
       color: var(--feedback-tooltip-acctive-trigger-color);
     }
   }

package/components/common/layout/theHeader/feedback/new/description/Description.vue

@@ -4,10 +4,10 @@
 
     <ui-textarea
       v-model="descriptionModelLocal"
+      test-id="feedback-description"
       :disabled="!selectedTab"
       :placeholder="descriptionTextPlaceholder"
       :error="descriptionErrorText"
-      test-id="feedback-description"
     >
     </ui-textarea>
   </div>

package/components/common/layout/theHeader/feedback/new/email/Email.vue

@@ -5,8 +5,8 @@
     <ui-input
       v-model="emailModelLocal"
       :error="emailErrorText"
-      :placeholder="localization.common.emailAddressOptional"
       type="text"
+      :placeholder="localization.common.emailAddressOptional"
       test-id="feedback-email"
     />
   </div>

package/components/common/layout/theHeader/feedback/new/subtitle/Subtitle.vue

@@ -8,20 +8,20 @@
       name="info"
       width="16"
       height="16"
-      :class="['subtitle__icon pointer', isShowInfo && 'active']"
+      class="subtitle__icon pointer"
+      :class="isShowInfo && 'active'"
       @click="isShowInfo = !isShowInfo"
     />
     <ui-popup-window
       v-model="isShowInfo"
+      width="232px"
       :elem-id="'feedback-description-info-icon'"
-      width="320px"
       class="subtitle__tooltip"
-      is-priority-right-position
     >
       <div class="common-widget-info">
-        <div class="headline justify-between flex-align-start">
-          <div class="flex-align-start">
-            <ui-icon name="info-2" width="16px" height="16px" />
+        <div class="headline justify-between flex-align-center">
+          <div class="flex-align-center">
+            <ui-icon-icon3 name="info-2" width="16px" height="16px" />
             <span class="title">{{ localization.common.feedbackHelp }}</span>
           </div>
           <ui-icon
@@ -61,7 +61,7 @@ const isShowInfo = ref<boolean>(false)
     &:hover {
       color: var(--feedback-tooltip-hover-trigger-color);
     }
-    &.active {
+    &:active {
       color: var(--feedback-tooltip-acctive-trigger-color);
     }
   }
@@ -95,7 +95,6 @@ const isShowInfo = ref<boolean>(false)
     }
 
     svg {
-      flex: none;
       color: var(--feedback-tooltip-close-color);
     }
   }

package/components/common/layout/theHeader/feedback/new/tabs/Tabs.vue

@@ -47,7 +47,7 @@ const tabs = computed<any[]>(() =>
 
   :deep(.block) {
     width: max-content;
-    padding: 8px 12px;
+    padding: 10px 12px;
     color: var(--feedback-text-color);
     background: var(--feedback-tab-bg-color);
     border: 1px solid var(--feedback-tab-border-color);

package/components/common/layout/theHeader/helpMenu/aboutNew/AboutNew.vue

@@ -1,9 +1,9 @@
 <template>
   <ui-modal
     test-id="about-modal"
+    width="720px"
     :title="props.title"
     :subtitle="props.subtitle"
-    width="720px"
     class="about-modal"
     @hide="onHideModal"
   >
@@ -20,8 +20,8 @@
 
           (<a
             id="about-description-link"
-            :href="url"
             data-id="about-description-link"
+            :href="url"
             target="_blank"
             class="about-modal__description-link"
           >
@@ -32,7 +32,8 @@
         </div>
       </ui-modal-block-standard>
     </template>
-    <template #footer><div class="modal-footer-block"></div></template>
+    <template #footerContent><span /></template>
+    <template #footerLeftContent><span /></template>
   </ui-modal>
 </template>
 
@@ -62,50 +63,40 @@ const onHideModal = (): void => {
 <style>
 :root {
   --about-text-color: #4d5d69;
-  --about-text-link-color: #008fd6;
   --about-text-link-hover-color: #0081c1;
 }
 :root.dark-theme {
   --about-text-color: #9da6ad;
-  --about-text-link-color: #2ba2de;
   --about-text-link-hover-color: #008fd6;
 }
 </style>
 
 <style lang="scss" scoped>
-.modal-container-standard {
-  padding-top: 12px;
-  padding-bottom: 12px;
+.about-modal {
+  &__text {
+    color: var(--about-text-color);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 15.73px;
 
-  .about-modal {
-    &__text {
-      color: var(--about-text-color);
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 15.73px;
-
-      p:last-child {
-        margin: 16px 0;
-      }
+    p:last-child {
+      margin: 16px 0;
     }
-    &__description {
-      color: var(--about-text-color);
-      font-size: 13px;
-      font-weight: 400;
-      line-height: 15.73px;
+  }
+  &__description {
+    color: var(--about-text-color);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 15.73px;
 
-      &-link {
-        color: var(--about-text-link-color);
-        &:hover {
-          color: var(--about-text-link-hover-color);
-        }
+    &-link {
+      color: #0786d2;
+      &:hover {
+        color: var(--about-text-link-hover-color);
       }
     }
   }
 }
-.modal-footer-block {
-  height: 32px;
-}
 :deep(.title-wrapper__subtitle) {
   max-width: 400px;
 }

package/components/common/layout/theHeader/helpMenu/aboutOld/AboutOld.vue

@@ -1,6 +1,11 @@
 <template>
   <Teleport to="body">
-    <atoms-modal :title="props.title" show width="864px" test-id="about-modal">
+    <atoms-modal
+      show
+      width="864px"
+      :title="props.title"
+      test-id="about-modal"
+    >
       <template #modalHeader>
         <div class="flex-align-center">
           <h3 class="modal-title">{{ brandName }}® {{ props.projectName }}</h3>
@@ -29,8 +34,8 @@
           {{ props.aboutDescOne }}
           (<a
             id="about-description-link"
-            :href="url"
             data-id="about-description-link"
+            :href="url"
             target="_blank"
             >{{ props.url }}</a
           >){{ props.aboutDescSecond }}

package/components/common/layout/theHeader/helpMenu/helpMenuOld/HelpMenuOld.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="tid-control-bar-help-menu help-menu">
     <atoms-dropdown
-      :drop-menu="helpMenu"
       test-id="help-menu-dropdown"
+      :drop-menu="helpMenu"
       @select="emits('select-dropdown', $event.action)"
     >
       <template #icon>

package/components/common/layout/theHeader/modals/Reconnect.vue

@@ -1,9 +1,9 @@
 <template>
   <atoms-modal
-    :show="isShow"
-    :title="localization.common.connectionTimeout"
     test-id="connection-timeout-reconnect-modal"
     width="580px"
+    :show="isShow"
+    :title="localization.common.connectionTimeout"
     class="connection-timeout"
     is-hide-close-icon
   >

package/components/common/layout/theHeader/modals/RedirectLogin.vue

@@ -1,9 +1,9 @@
 <template>
   <atoms-modal
-    :show="isShow"
-    :title="localization.common.connectionTimeout"
     test-id="connection-timeout-modal"
     width="580px"
+    :show="isShow"
+    :title="localization.common.connectionTimeout"
     class="connection-timeout"
     is-hide-close-icon
   >
@@ -11,9 +11,9 @@
       <div class="connection-timeout__body">
         <atoms-alert
           v-show="true"
-          :items="[localization.common.connectionTimeoutErrorDesc]"
           test-id="connection-timeout-alert"
           status="alert-danger"
+          :items="[localization.common.connectionTimeoutErrorDesc]"
           hide-close-icon
         />
       </div>

package/components/common/layout/theHeader/userMenu/modals/changePassword/ChangePassword.vue

@@ -26,7 +26,7 @@ import type {
   UI_I_ChangePasswordForm,
 } from '~/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
 import type { UI_T_Project } from '~/lib/models/types'
-// import {} from '#build/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
+import {} from '#build/components/common/layout/theHeader/userMenu/modals/changePassword/lib/models/interfaces'
 
 const props = defineProps<{
   hostname: string