bfg-common 1.4.799 → 1.4.801

package/components/common/graph/GraphNew.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="graph-content">
+    <template v-if="props.chartOptions">
+      <client-only>
+        <highchart
+            :options="props.chartOptions"
+            :modules="['exporting', 'export-data']"
+            class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chartOptions: any
+}>()
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+    border-radius: 8px;
+    box-shadow: 0px 1px 4px 0px #00000014;
+  }
+}
+
+:deep(.highcharts-menu) {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: #ffffff !important;
+  box-shadow: 0px 4px 20px 0px #0000001f !important;
+  padding: 8px !important;
+  border-radius: 8px !important;
+
+  .highcharts-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    color: #4d5d69 !important;
+    padding: 8px !important;
+
+    &::before {
+      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.66602 6.66675L7.99935 10.0001L11.3327 6.66675' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.33333V2' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+    }
+    &:first-child::before {
+      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4891)'%3E%3Cpath d='M5.03769 1.33325H2.81547C2.42255 1.33325 2.04573 1.48934 1.7679 1.76717C1.49007 2.045 1.33398 2.42182 1.33398 2.81473V5.03696M14.6673 5.03696V2.81473C14.6673 2.42182 14.5112 2.045 14.2334 1.76717C13.9556 1.48934 13.5788 1.33325 13.1858 1.33325H10.9636M10.9636 14.6666H13.1858C13.5788 14.6666 13.9556 14.5105 14.2334 14.2327C14.5112 13.9548 14.6673 13.578 14.6673 13.1851V10.9629M1.33398 10.9629V13.1851C1.33398 13.578 1.49007 13.9548 1.7679 14.2327C2.04573 14.5105 2.42255 14.6666 2.81547 14.6666H5.03769' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4891'%3E%3Crect width='16' height='16' fill='red'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    }
+    &:nth-child(2)::before {
+      content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8044_4828)'%3E%3Cpath d='M4 5.33342V2.33341C4 1.96522 4.29848 1.66675 4.66667 1.66675H11.3333C11.7015 1.66675 12 1.96522 12 2.33341V5.33342' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00065 11.6668H2.66732C1.93094 11.6668 1.33398 11.0699 1.33398 10.3335V6.66683C1.33398 5.93045 1.93094 5.3335 2.66732 5.3335H13.334C14.0704 5.3335 14.6673 5.93045 14.6673 6.66683V10.3335C14.6673 11.0699 14.0704 11.6668 13.334 11.6668H12.0007' stroke='%234D5D69' stroke-width='1.4'/%3E%3Cpath d='M11.3333 9H4.66667C4.29848 9 4 9.29848 4 9.66667V13.6667C4 14.0349 4.29848 14.3333 4.66667 14.3333H11.3333C11.7015 14.3333 12 14.0349 12 13.6667V9.66667C12 9.29848 11.7015 9 11.3333 9Z' stroke='%234D5D69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_8044_4828'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+    }
+  }
+  hr {
+    border-color: #e9ebed;
+    border-style: solid;
+    margin: 0 8px;
+  }
+}
+</style>

package/components/common/graph/GraphOld.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="graph-content">
+    <template v-if="props.chartOptions">
+      <client-only>
+        <highchart
+          :options="props.chartOptions"
+          :modules="['exporting', 'export-data']"
+          class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chartOptions: any
+}>()
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+  }
+}
+</style>

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

@@ -9,11 +9,13 @@
         class="feedback"
         @hide="onHideModal"
       >
+        <template #headerDescription>
+          <common-layout-the-header-feedback-new-subtitle />
+        </template>
+
         <template #content>
           <ui-modal-block-standard>
             <template v-if="!options.isAnnotateImage">
-              <common-layout-the-header-feedback-new-subtitle />
-
               <common-layout-the-header-feedback-new-tabs
                 v-model="selectedTab"
                 class="metrics-tabs"
@@ -23,7 +25,9 @@
                 v-if="selectedTab === 'light-bulb'"
                 class="feedback__visit-portal"
               >
-                {{ localization.common.useOurExternalIdeasPortal }}
+                <span>{{ descriptions[0] }}</span>
+                <b>Aha</b>
+                <span>{{ descriptions[1] }}</span>
               </div>
             </template>
 
@@ -162,8 +166,28 @@ const onSubmit = (): void => {
 
   emits('submit')
 }
+
+const descriptions = ref<string[]>(localization.value.common.useOurExternalIdeasPortal.split('{0}'))
 </script>
 
+<style lang="scss">
+:root {
+  --feedback-tooltip-trigger-color: #9da6ad;
+  --feedback-tooltip-acctive-trigger-color: #008fd6;
+  --feedback-tooltip-hover-trigger-color: #4d5d69;
+  --feedback-text-color: #4d5d69;
+  --feedback-tooltip-close-color: #213444;
+  --feedback-tab-active-bg-color: #008fd60f;
+}
+:root.dark-theme {
+  --feedback-tooltip-trigger-color: #9da6ad;
+  --feedback-tooltip-acctive-trigger-color: #2ba2de;
+  --feedback-tooltip-hover-trigger-color: #e9eaec;
+  --feedback-text-color: #e9eaec;
+  --feedback-tooltip-close-color: #e9eaec;
+  --feedback-tab-active-bg-color: #2ba2de14;
+}
+</style>
 <style lang="scss" scoped>
 .feedback {
   &__visit-portal {
@@ -177,16 +201,7 @@ const onSubmit = (): void => {
     margin-right: 5px;
   }
 }
-</style>
-<style lang="scss">
-:root {
-  --feedback-text-color: #4d5d69;
-  --feedback-tooltip-close-color: #213444;
-  --feedback-tab-active-bg-color: #008fd60f;
-}
-:root.dark-theme {
-  --feedback-text-color: #e9eaec;
-  --feedback-tooltip-close-color: #e9eaec;
-  --feedback-tab-active-bg-color: #2ba2de14;
+:deep(.modal-container-standard) {
+  padding-top: 0;
 }
 </style>

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

@@ -27,8 +27,8 @@
       >
         <ui-icon
           name="take-screenshot"
-          width="20"
-          height="20"
+          width="18"
+          height="18"
           class="feedback__btn-icon"
         />
         {{ localization.common.takeScreenshot }}
@@ -45,8 +45,8 @@
         <label id="labelFileLoad" for="fileLoad">
           <ui-icon
             name="upload-icon"
-            width="20"
-            height="20"
+            width="18"
+            height="18"
             class="feedback__btn-icon"
           />
           {{ localization.common.uploadImage }}
@@ -151,7 +151,7 @@
         <div>
           <ui-button
             test-id="feedback-image-annotate-btn"
-            size="md"
+            size="sm"
             type="default"
             variant="outline"
             class=""
@@ -168,7 +168,7 @@
 
           <ui-button
             test-id="feedback-image-remove-btn"
-            size="md"
+            size="sm"
             type="default"
             variant="outline"
             class=""
@@ -461,14 +461,19 @@ watch(
 @import 'assets/scss/common/mixins.scss';
 .additional-details {
   .button-container {
+    :deep(.ui-btn) {
+      font-size: 13px;
+      gap: 8px;
+    }
     .upload-image {
       label {
         @include flex($align: center, $just: center);
         width: 100%;
         height: 100%;
-        font-size: 14px;
         color: inherit;
+        //font-size: 13px;
         font-weight: 500;
+        gap: 8px;
         cursor: pointer;
       }
       input {
@@ -493,15 +498,32 @@ watch(
 
     .ui-btn {
       width: initial;
-
+      height: 28px;
+      font-size: 12px;
+      padding: 0 8px;
+      column-gap: 4px;
+
+      &.undo {
+        &:disabled {
+          color: var(--btn-primary-outline-disabled-color);
+        }
+        svg {
+          transform: scaleX(-1);
+        }
+      }
       &.clear-all {
         color: #ea3223;
+        &:disabled {
+          color: var(--btn-primary-outline-disabled-color);
+        }
       }
 
       &.active {
-        background: var(--feedback-tab-active-bg-color);
         color: var(--feedback-tab-active-text-color);
         border: 1.4px solid var(--feedback-tab-active-text-color);
+        &:hover {
+          background: var(--feedback-tab-active-bg-color);
+        }
       }
     }
   }
@@ -541,6 +563,9 @@ watch(
       gap: 12px;
       .ui-btn {
         width: initial;
+        font-size: 12px;
+        line-height: 14.52px;
+        column-gap: 4px;
 
         &:last-child {
           color: #ea3223;

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

@@ -6,10 +6,10 @@
     <ui-icon
       id="feedback-additional-details-info-icon"
       name="info"
-      width="18"
-      height="18"
-      :color="isShowInfo ? '#008FD6' : '#9DA6AD'"
-      class="info-icon pointer"
+      width="16"
+      height="16"
+      class="headline__icon pointer"
+      :class="isShowInfo && 'active'"
       @click="isShowInfo = !isShowInfo"
     />
     <ui-popup-window
@@ -18,8 +18,8 @@
       :elem-id="'feedback-additional-details-info-icon'"
     >
       <div class="common-widget-info">
-        <div class="justify-between flex-align-center">
-          <div class="flex-align-center">
+        <div class="flex justify-between">
+          <div class="flex">
             <ui-icon-icon3 name="info-2" width="16px" height="16px" />
             <span class="title">
               {{ localization.feedback.additionalDetailsHelp }}
@@ -55,6 +55,16 @@ const isShowInfo = ref<boolean>(false)
 .headline {
   @include flex($align: center);
   margin: 32px 0 16px;
+
+  &__icon {
+    color: var(--feedback-tooltip-trigger-color);
+    &:hover {
+      color: var(--feedback-tooltip-hover-trigger-color);
+    }
+    &:active {
+      color: var(--feedback-tooltip-acctive-trigger-color);
+    }
+  }
   &__label {
     line-height: 19.36px;
     font-size: 16px;
@@ -81,6 +91,7 @@ const isShowInfo = ref<boolean>(false)
 
     svg {
       color: var(--feedback-tooltip-close-color);
+      min-width: 16px;
     }
   }
 }

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

@@ -53,6 +53,7 @@ const descriptionErrorText = computed<boolean>(() => {
   :deep(.ui-main-textarea) {
     resize: none;
     height: 68px;
+    font-size: 12px;
   }
 }
 </style>

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

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

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

@@ -6,16 +6,17 @@
     <ui-icon
       id="feedback-description-info-icon"
       name="info"
-      width="18"
-      height="18"
-      :color="isShowInfo ? '#008FD6' : '#9DA6AD'"
-      class="info-icon pointer"
+      width="16"
+      height="16"
+      class="subtitle__icon pointer"
+      :class="isShowInfo && 'active'"
       @click="isShowInfo = !isShowInfo"
     />
     <ui-popup-window
       v-model="isShowInfo"
       width="232px"
       :elem-id="'feedback-description-info-icon'"
+      class="subtitle__tooltip"
     >
       <div class="common-widget-info">
         <div class="headline justify-between flex-align-center">
@@ -52,8 +53,23 @@ const isShowInfo = ref<boolean>(false)
 .subtitle {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid #e9ebed;
-  padding-bottom: 12px;
+  border-bottom: 1px solid var(--horizontal-line);
+  padding: 24px 0 12px;
+
+  &__icon {
+    color: var(--feedback-tooltip-trigger-color);
+    &:hover {
+      color: var(--feedback-tooltip-hover-trigger-color);
+    }
+    &:active {
+      color: var(--feedback-tooltip-acctive-trigger-color);
+    }
+  }
+  &__tooltip {
+    .flex-align-center {
+      height: 16px;
+    }
+  }
 
   &__label {
     font-size: 12px;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="tabs">
-    <h4 class="tabs__title">{{ localization.common.selectType }}</h4>
+    <h4 class="tabs__title">{{ localization.feedback.selectType }}</h4>
 
     <div class="tabs__container">
       <ui-block
@@ -33,13 +33,12 @@ const tabs = computed<any[]>(() =>
 
 <style scoped lang="scss">
 .tabs {
-  margin-top: 16px;
   &__title {
-    line-height: 38px;
-    margin-bottom: 16px;
+    color: var(--feedback-text-color);
     font-size: 16px;
     font-weight: 500;
-    color: var(--feedback-text-color);
+    line-height: 19.36px;
+    margin-bottom: 16px;
   }
   &__container {
     display: flex;
@@ -54,16 +53,15 @@ const tabs = computed<any[]>(() =>
     border: 1px solid var(--feedback-tab-border-color);
     box-shadow: none;
     cursor: pointer;
-  }
-
-  :deep(.block.selected) {
-    border: 1.5px solid var(--feedback-tab-active-text-color);
-    color: var(--feedback-tab-active-text-color);
-    cursor: default;
 
-    .main-info,
-    .main-info-label {
+    &.selected {
+      border: 1.5px solid var(--feedback-tab-active-text-color);
+      background: var(--feedback-tab-active-bg-color);
       color: var(--feedback-tab-active-text-color);
+      cursor: default;
+    }
+    &:not(.selected):hover {
+      background: var(--feedback-tab-hover-bg-color);
     }
   }
 
@@ -73,9 +71,9 @@ const tabs = computed<any[]>(() =>
     gap: 8px;
 
     &-label {
-      font-size: 16px;
+      font-size: 13px;
       font-weight: 500;
-      line-height: 19.36px;
+      line-height: 15.73px;
     }
   }
 }
@@ -83,12 +81,16 @@ const tabs = computed<any[]>(() =>
 <style lang="scss">
 :root {
   --feedback-tab-bg-color: #ffffff;
+  --feedback-tab-hover-bg-color: #f6f7f8;
+  --feedback-tab-active-bg-color: #f0f8fd;
   --feedback-tab-border-color: #e9ebed;
   --feedback-tab-active-text-color: #008fd6;
 }
 
 :root.dark-theme {
   --feedback-tab-bg-color: #1b2a373d;
+  --feedback-tab-hover-bg-color: #283948;
+  --feedback-tab-active-bg-color: #213b4e;
   --feedback-tab-border-color: #e9ebed1f;
   --feedback-tab-active-text-color: #2ba2de;
 }

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

@@ -169,7 +169,7 @@ const onHideModal = (): void => {
   }
   &__form {
     @include flex($dir: column);
-    row-gap: 18px;
+    row-gap: 16px;
   }
 }
 </style>

package/components/common/mainNavigationPanel/MainNavigationPanel.vue

@@ -82,8 +82,9 @@ const clickWindow = (event: Event): void => {
   if (
     menuPined.value ||
     mainMenuHovered.value ||
-    target.className.baseVal?.includes('menu-icon') ||
-    target.className.baseVal?.includes('clr-i-outline')
+    target.className.baseVal?.includes?.('menu-icon') ||
+    target.className.baseVal?.includes?.('clr-i-outline') ||
+    target.className?.includes?.('inventory-menu-trigger')
   ) {
     return
   }

package/components/common/mainNavigationPanel/MainNavigationPanelNew.vue

@@ -150,7 +150,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 
   .nav-context {
     position: absolute;
-    z-index: 1001;
+    z-index: 9999999;
     height: 100%;
     display: flex;
     flex-direction: column;

package/components/common/mainNavigationPanel/MainNavigationPanelOld.vue

@@ -136,7 +136,7 @@ const localization = computed<UI_I_Localization>(() => useLocal())
   }
   .nav-context {
     position: absolute;
-    z-index: 1001;
+    z-index: 9999999;
     height: 100%;
     display: flex;
     flex-direction: column;

package/components/common/monitor/advanced/tools/chartOptionsModal/Notification.vue

@@ -7,13 +7,13 @@
     test-id="notification-alert"
     @remove="onRemove"
   >
-    <template #default="{ item }">
-      <div class="flex-space-between flex-1">
-        <div class="flex-align-center">
-          <span>{{ item }}</span>
-        </div>
-      </div>
-    </template>
+<!--    <template #default="{ item }">-->
+<!--      <div class="flex-space-between flex-1">-->
+<!--        <div class="flex-align-center">-->
+<!--          <span>{{ item }}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </template>-->
   </atoms-alert>
 </template>