@eturnity/eturnity_reusable_components 8.31.6 → 8.34.0-EPDM-16204.0

package/dist/main.es99.js

@@ -2,17 +2,15 @@ import "./main.es3.js";
 import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "13",
-  height: "23",
-  fill: "none"
+  width: "29",
+  height: "29",
+  fill: "#333"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#263238",
-  d: "M21.5 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.5 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
-}, null, -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", { d: "m10.5 14 4-8 4 8z" }, null, -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#99DB0C",
-  d: "m28.94 7.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
+  fill: "#ccc",
+  d: "m10.5 16 4 8 4-8z",
+  class: "fix"
 }, null, -1);
 const _hoisted_4 = [
   _hoisted_2,
@@ -21,8 +19,8 @@ const _hoisted_4 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const context_menu1 = { render };
+const compass = { render };
 export {
-  context_menu1 as default,
+  compass as default,
   render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.31.6",
+  "version": "8.34.0-EPDM-16204.0",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/electricity_tariff.svg

@@ -1,3 +1,3 @@
-<svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.36652 9.33445C9.4832 9.20595 9.39203 9 9.21845 9H6.16767L8.29896 0.785289C8.35143 0.583073 8.09775 0.44595 7.95731 0.60061L0.633784 8.66555C0.517096 8.79405 0.608271 9 0.781847 9H3.83263L1.70134 17.2147C1.64887 17.4169 1.90255 17.5541 2.04299 17.3994L9.36652 9.33445Z" fill="#263238"/>
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5125 0.999636C9.0643 1.00006 9.51229 1.44779 9.5125 1.99964V4.44104C9.56257 4.43332 9.61457 4.42835 9.6668 4.42835H11.8973C12.449 4.4288 12.8971 4.87652 12.8973 5.42835V11.9996C12.8971 12.5515 12.4491 12.9992 11.8973 12.9996H8.6668V12.986C8.61656 12.9938 8.56492 12.9996 8.5125 12.9996H6.28203L6.1795 12.9948C6.16229 12.993 6.14468 12.9896 6.12774 12.9869V12.9996H2.89727L2.79473 12.9948C2.29064 12.9434 1.89733 12.5173 1.89727 11.9996V11.3092C2.25984 11.3343 2.61386 11.2265 2.89727 11.0153V11.9996H5.12774V7.99964H4.18633L4.51934 6.99964H5.12774C5.18011 6.99968 5.23184 7.00454 5.28203 7.01233V1.99964C5.28223 1.48213 5.67549 1.05584 6.1795 1.00452L6.28203 0.999636H8.5125ZM6.28203 11.9996H8.5125V1.99964H6.28203V11.9996ZM9.6668 11.9996H11.8973V5.42835H9.6668V11.9996ZM1.5252 0.656862C1.61252 0.394909 1.89606 0.253171 2.15801 0.340456C2.41998 0.42778 2.56174 0.711297 2.47442 0.973268L1.19414 4.81507H3.22246C3.70002 4.81516 4.03723 5.28288 3.88653 5.73596L2.47442 9.97327C2.38695 10.235 2.10346 10.377 1.84161 10.2897C1.57979 10.2024 1.43813 9.91871 1.5252 9.65686L2.80547 5.81507H0.777152C0.299817 5.81486 -0.0372931 5.34708 0.11309 4.89417L1.5252 0.656862Z" fill="black"/>
 </svg>

package/src/assets/svgIcons/suitcase.svg

@@ -1,3 +1,3 @@
-<svg fill="none" height="15" viewbox="12 12 16 15" width="16" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.6 16.15H23.5V14.75C23.5 13.973 22.877 13.35 22.1 13.35H17.9C17.123 13.35 16.5 13.973 16.5 14.75V16.15H14.4C13.623 16.15 13 16.773 13 17.55V25.25C13 26.027 13.623 26.65 14.4 26.65H25.6C26.377 26.65 27 26.027 27 25.25V17.55C27 16.773 26.377 16.15 25.6 16.15ZM17.9 14.75H22.1V16.15H17.9V14.75ZM25.6 21.75H14.4V17.55H16.5H17.9H22.1H23.5H25.6V21.75Z" fill="#263238"></path>
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C9.10457 3.22133e-08 10 0.895431 10 2V3H12.5L12.6533 3.00781C13.4097 3.08461 14 3.72334 14 4.5V11.5C14 12.2767 13.4097 12.9154 12.6533 12.9922L12.5 13H1.5C0.723336 13 0.0846097 12.4097 0.0078125 11.6533L0 11.5V4.5C0 3.67157 0.671573 3 1.5 3H4V2C4 0.895431 4.89543 3.22128e-08 6 0H8ZM1.5 4C1.22386 4 1 4.22386 1 4.5V11.5C1 11.7761 1.22386 12 1.5 12H12.5C12.7761 12 13 11.7761 13 11.5V4.5C13 4.22386 12.7761 4 12.5 4H1.5ZM6 1C5.44772 1 5 1.44772 5 2V3H9V2C9 1.44772 8.55228 1 8 1H6Z" fill="black"/>
 </svg>

package/src/assets/theme.js

@@ -26,6 +26,8 @@ const theme = (() => {
     red2: '#de5959',
     red3: '#FFCCCC',
     red4: '#FF9A9A',
+    red6: '#FFEBEB',
+    red5: '#CC4545',
     pureRed: '#ff0000',
     darkRed: '#d00000',
     cornellRed: '#a52019',
@@ -66,6 +68,8 @@ const theme = (() => {
     purple4: '#D0D6F5',
     purple5: '#533181',
     purple6: '#6F20DC',
+    purple7: '#F5EEFF',
+    purple8: '#B17BFA',
     orange: '#ffc338',
     disabled: '#dfe1e1',
     transparentWhite2: '#ffffff32',
@@ -180,25 +184,9 @@ const theme = (() => {
     },
   }
 
-  const chartGradients = {
-    simple: {
-      from: semanticColors.purple[500],
-      to: semanticColors.purple[400],
-    },
-    stacked: [
-      { from: '#F5EDFF', to: '#DEC5FF' },
-      { from: '#CAA2FF', to: '#F2E8FF' },
-      { from: '#B987FC', to: '#904AEF' },
-      { from: '#8B40F2', to: '#4A1394' },
-      { from: '#6A05F2', to: '#4905A5' },
-      { from: '#5402C3', to: '#2B0362' },
-    ],
-  }
-
   return {
     colors,
     semanticColors,
-    chartGradients,
     fonts: {
       mainFont: '"Figtree", sans-serif',
     },
@@ -415,28 +403,26 @@ const theme = (() => {
               borderColor: '',
             },
           },
-        },
-        protag: {
-          main: {
+          tertiary: {
             default: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: 'transparent',
               textColor: semanticColors.teal[800],
-              borderColor: 'transparent',
+              borderColor: semanticColors.teal[100],
             },
             hover: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[200],
               textColor: semanticColors.teal[800],
-              borderColor: '',
+              borderColor: semanticColors.teal[100],
             },
             active: {
-              backgroundColor: semanticColors.yellow[300],
+              backgroundColor: semanticColors.grey[400],
               textColor: semanticColors.teal[800],
-              borderColor: '',
+              borderColor: semanticColors.teal[100],
             },
             disabled: {
-              backgroundColor: semanticColors.yellow[300],
-              textColor: semanticColors.teal[400],
-              borderColor: '',
+              textColor: semanticColors.grey[600],
+              backgroundColor: semanticColors.grey[500],
+              borderColor: semanticColors.grey[800],
             },
           },
         },
@@ -464,153 +450,152 @@ const theme = (() => {
             },
           },
         },
-      },
-      dark: {
-        // theme
-        primary: {
-          // type
+        protag: {
           main: {
-            // variant: this is the default variant
             default: {
-              backgroundColor: colors.white,
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.purple[100],
+              backgroundColor: semanticColors.yellow[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[800],
-              backgroundColor: semanticColors.grey[400],
+              backgroundColor: semanticColors.yellow[200],
+              textColor: semanticColors.teal[400],
               borderColor: '',
             },
           },
-          cancel: {
-            // variant
+        },
+        freeTrialTag: {
+          main: {
             default: {
-              backgroundColor: semanticColors.red[400],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[100],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[200],
+              backgroundColor: semanticColors.blue[200],
               textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              backgroundColor: semanticColors.grey[300],
-              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.blue[200],
+              textColor: semanticColors.teal[400],
               borderColor: '',
             },
           },
         },
-        secondary: {
+      },
+      dark: {
+        // theme
+        primary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: semanticColors.teal[800],
-              textColor: semanticColors.purple[50],
+              backgroundColor: colors.white,
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.teal[600],
-              textColor: semanticColors.purple[50],
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.teal[700],
-              textColor: semanticColors.purple[50],
+              backgroundColor: semanticColors.purple[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              textColor: semanticColors.grey[800],
+              backgroundColor: semanticColors.grey[400],
               borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.red[800],
-              textColor: semanticColors.red[400],
+              backgroundColor: semanticColors.red[400],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             hover: {
-              backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[300],
+              backgroundColor: semanticColors.red[100],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             active: {
-              backgroundColor: semanticColors.red[600],
-              textColor: semanticColors.red[200],
+              backgroundColor: semanticColors.red[200],
+              textColor: semanticColors.teal[800],
               borderColor: '',
             },
             disabled: {
-              textColor: semanticColors.grey[600],
-              backgroundColor: semanticColors.grey[500],
+              backgroundColor: semanticColors.grey[300],
+              textColor: semanticColors.grey[800],
               borderColor: '',
             },
           },
         },
-        tertiary: {
+        secondary: {
           // type
           main: {
             // variant: this is the default variant
             default: {
-              backgroundColor: 'transparent',
+              backgroundColor: semanticColors.teal[800],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[500],
+              borderColor: '',
             },
             hover: {
               backgroundColor: semanticColors.teal[600],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[400],
+              borderColor: '',
             },
             active: {
               backgroundColor: semanticColors.teal[700],
               textColor: semanticColors.purple[50],
-              borderColor: semanticColors.teal[300],
+              borderColor: '',
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              borderColor: '',
             },
           },
           cancel: {
             // variant
             default: {
-              backgroundColor: semanticColors.teal[200],
+              backgroundColor: semanticColors.red[800],
               textColor: semanticColors.red[400],
-              borderColor: semanticColors.teal[500],
+              borderColor: '',
             },
             hover: {
               backgroundColor: semanticColors.red[700],
-              textColor: semanticColors.red[700],
-              borderColor: semanticColors.teal[400],
+              textColor: semanticColors.red[300],
+              borderColor: '',
             },
             active: {
               backgroundColor: semanticColors.red[600],
               textColor: semanticColors.red[200],
-              borderColor: semanticColors.teal[300],
+              borderColor: '',
             },
             disabled: {
               textColor: semanticColors.grey[600],
               backgroundColor: semanticColors.grey[500],
-              borderColor: semanticColors.grey[800],
+              borderColor: '',
             },
           },
         },
@@ -754,9 +739,9 @@ const theme = (() => {
           iconWidth: '26px',
         },
         tiny: {
-          padding: '2px 5px',
-          fontSize: '10px',
-          iconWidth: '18px',
+          padding: '3px 5px',
+          fontSize: '11px',
+          iconWidth: '14px',
         },
       },
     },

package/src/components/sideMenu/index.vue

@@ -8,6 +8,9 @@
         <ListItem
           v-if="!item.children"
           :key="idx"
+          :data-active="
+            (activeTab === item.key || activeParentTab === item.key).toString()
+          "
           :data-id="`sub_menu_settings_${item.key}`"
           :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
@@ -30,6 +33,7 @@
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
+            :data-active="activeParentTab === item.key"
             :data-id="`sub_menu_settings_${item.key}`"
             :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
@@ -51,7 +55,11 @@
             }}</ListText>
             <ArrowContainer>
               <Icon
-                :color="theme.semanticColors.grey[800]"
+                :color="
+                  activeParentTab === item.key
+                    ? theme.semanticColors.purple[500]
+                    : theme.semanticColors.teal[800]
+                "
                 :name="
                   activeDropdown === item.key
                     ? 'arrow_up_unfilled'
@@ -65,6 +73,7 @@
             <SubRouter
               v-for="subItem in item.children"
               :key="subItem.key"
+              :data-active="activeTab === subItem.key"
               :data-id="`sub_menu_settings_${subItem.key}`"
               :is-active="activeTab === subItem.key"
               @click="
@@ -81,19 +90,14 @@
       </template>
     </ListContainer>
     <BottomSection v-if="hasLogout">
-      <IconContainer
+      <ButtonIcon
         data-id="button_settings_logout"
-        :is-active="false"
-        :is-button="true"
+        icon-name="logout"
+        text="Logout"
+        type="ghost"
+        variant="tertiary"
         @click="$emit('on-logout')"
-      >
-        <RotateIcon
-          :color="theme.semanticColors.teal[800]"
-          cursor="pointer"
-          name="initial_situation"
-          size="18px"
-        />
-      </IconContainer>
+      />
       <AppVersion>{{ appVersion }}</AppVersion>
     </BottomSection>
   </PageContainer>
@@ -104,6 +108,7 @@
   import Icon from '../icon'
   import Spinner from '../spinner'
   import theme from '@/assets/theme.js'
+  import ButtonIcon from '../buttons/buttonIcon'
 
   const PageAttrs = { isLoading: Boolean }
   const PageContainer = styled('div', PageAttrs)`
@@ -131,18 +136,18 @@
     padding: 4px;
     border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
     color: ${(props) =>
       props.isActive
         ? props.theme.semanticColors.purple[500]
         : props.theme.semanticColors.teal[800]};
 
-    :hover {
-      background-color: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
+    &:hover:not([data-active='true']) {
+      background-color: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]};
       svg path:not(.fix) {
         ${(props) => props.fillType}: ${(props) =>
-          props.theme.semanticColors.purple[500]};
+          props.theme.semanticColors.teal[800]};
       }
     }
   `
@@ -209,11 +214,11 @@
     font-weight: 400;
     font-size: 14px;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
 
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
+    &:hover:not([data-active='true']) {
+      background: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]} !important;
     }
   `
 
@@ -228,18 +233,18 @@
     align-items: center;
     cursor: pointer;
     background: ${(props) =>
-      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+      props.isActive ? props.theme.semanticColors.purple[100] : ''};
 
     div {
       color: ${(props) =>
         props.isActive ? props.theme.semanticColors.purple[500] : ''};
     }
 
-    &:hover {
-      background: ${(props) => props.theme.semanticColors.purple[100]};
-      color: ${(props) => props.theme.semanticColors.purple[500]};
+    &:hover:not([data-active='true']) {
+      background: ${(props) => props.theme.semanticColors.grey[300]};
+      color: ${(props) => props.theme.semanticColors.teal[800]};
       svg path:not(.fix) {
-        fill: ${(props) => props.theme.semanticColors.purple[500]};
+        fill: ${(props) => props.theme.semanticColors.teal[800]};
       }
     }
   `
@@ -268,12 +273,12 @@
       Spinner,
       SpinnerContainer,
       BottomSection,
-      RotateIcon,
       AppVersion,
       CollapseWrapper,
       CollapseContainer,
       SubRouter,
       ArrowContainer,
+      ButtonIcon,
     },
     props: {
       tabsData: {