@tekkare/auriga 0.1.26 → 0.1.28

package/dist/runtime/components/argHomeContent.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="arg_home_content">
+    <div class="arg_home_blocks">
+      <slot name="blocks" />
+    </div>
+    <div class="arg_home_selected">
+      <slot name="selected" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argHomeContent"
+});
+</script>
+<style scoped>
+.arg_home_content {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: flex-start;
+  position: relative;
+  gap: 32px;
+  width: 100%;
+}
+
+.arg_home_blocks {
+  width: 66%;
+  padding-top: 8px;
+  border-top: 1px solid var(--base-dividers, #ececf2);
+}
+
+.arg_home_selected {
+  width: 33%;
+  align-self: stretch;
+  display: flex;
+  position: relative;
+}
+
+.height {
+  height: 350px;
+}
+</style>

package/dist/runtime/components/argHomeContent.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/runtime/components/argHomeHeader.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="arg_home_header">
+    <div>
+      <h1 class="home_title">{{ homeTitle }}</h1>
+      <p v-if="homeSubtitle" class="home_subtitle">
+        {{ homeSubtitle.toUpperCase() }}
+      </p>
+    </div>
+
+    <div class="oip_row v-center gap-16">
+      <slot name="actions" />
+      <arg-menu-link
+        :sidebar-open="true"
+        to="https://openinnovationprogram.com/"
+        label="Back to OIP"
+        icon="ArrowSquareOut"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argHomeHeader",
+  props: {
+    homeTitle: {
+      type: String,
+      required: true
+    },
+    homeSubtitle: {
+      type: String,
+      default: null
+    },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    }
+  }
+});
+</script>
+
+<style scoped>
+.arg_home_header {
+  display: flex;
+  flex-direction: row;
+  padding: 10px 24px;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--m, 16px);
+  position: fixed;
+  top: 0;
+  left: 0;
+  align-self: stretch;
+  border-bottom: 1px solid var(--base-dividers, #ececf2);
+  background: rgba(253, 253, 255, 0.8);
+  width: calc(100% - 48px);
+  backdrop-filter: blur(12px);
+  z-index: 20;
+}
+
+.home_subtitle {
+  color: var(--cool-grey, #8487ac);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  font-variant: all-small-caps;
+}
+
+.home_title {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+}
+</style>

package/dist/runtime/components/argHomeHeader.vue.d.ts

@@ -0,0 +1,33 @@
+declare const _default: import("vue").DefineComponent<{
+    homeTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    homeSubtitle: {
+        type: StringConstructor;
+        default: null;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    homeTitle: {
+        type: StringConstructor;
+        required: true;
+    };
+    homeSubtitle: {
+        type: StringConstructor;
+        default: null;
+    };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>>, {
+    lang: string;
+    homeSubtitle: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argHomeKpis.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="oip_card kpi_card">
+    <div v-for="(kpi, index) in kpis" :key="index" class="kpi_item">
+      <div class="kpi_icon">
+        <arg-icon :name="kpi.icon" color="var(--cool-grey)" size="32" />
+      </div>
+      <div class="kpi_text">
+        <p class="kpi_value">{{ kpi.value }}</p>
+        <p class="kpi_legend">{{ kpi.legend }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+export default defineComponent({
+  name: "argHomeKpis",
+  components: { argIcon },
+  props: {
+    kpis: {
+      type: Array,
+      required: true
+    }
+  }
+});
+</script>
+
+<style scoped>
+.kpi_card {
+  display: flex;
+  width: calc(100% - 32px);
+  padding: 16px !important;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+.kpi_item {
+  display: flex;
+  align-items: center;
+  gap: var(--m, 16px);
+  flex: 1 0 0;
+}
+.kpi_icon {
+  display: flex;
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  background: var(--background);
+  border-radius: 8px;
+}
+.kpi_text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.kpi_value {
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+}
+.kpi_legend {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: var(--cool-grey);
+}
+</style>

package/dist/runtime/components/argHomeKpis.vue.d.ts

@@ -0,0 +1,38 @@
+declare const _default: import("vue").DefineComponent<{
+    kpis: {
+        type: {
+            (arrayLength: number): Object[];
+            (...items: Object[]): Object[];
+            new (arrayLength: number): Object[];
+            new (...items: Object[]): Object[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    kpis: {
+        type: {
+            (arrayLength: number): Object[];
+            (...items: Object[]): Object[];
+            new (arrayLength: number): Object[];
+            new (...items: Object[]): Object[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/runtime/components/argHomeLayout.vue

@@ -0,0 +1,38 @@
+<template>
+  <client-only><arg-style /></client-only>
+  <div class="arg_main_home">
+    <slot name="header" />
+    <div class="arg_home_layout_body">
+      <slot name="body" />
+    </div>
+    <argFooter class="full_width_footer" />
+  </div>
+</template>
+<script>
+import {
+  defineComponent
+} from "vue";
+import argStyle from "./argStyle.vue";
+import argFooter from "./argFooter.vue";
+export default defineComponent({
+  name: "argHomeLayout",
+  components: { argStyle, argFooter }
+});
+</script>
+<style>
+.arg_main_home {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.arg_home_layout_body {
+  min-height: calc(100vh - 77px);
+  margin: 116px 32px 0px 32px;
+  max-width: 1200px;
+  width: calc(100% - 64px);
+}
+
+.full_width_footer {
+  width: calc(100% - 192px);
+}
+</style>

package/dist/runtime/components/argHomeLayout.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/runtime/components/argHomeSelectedBlock.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="oip_card selected_block_card">
+    <div v-if="selected === null" class="selected_block_display">
+      <div class="icon_square">
+        <arg-icon name="HandPointing" color="var(--cool-grey)" size="32" />
+      </div>
+      <div class="theme_select_message">
+        <p class="theme_title">Select a theme</p>
+        <p class="theme_descr">
+          Select a theme to display the analyses available within it.
+        </p>
+      </div>
+    </div>
+    <div v-else class="selected_block_display">
+      <div class="theme_title_display">
+        <div class="oip_row v-center gap-8">
+          <arg-flag
+            v-if="selected.country"
+            :slug="selected.country.toLowerCase()"
+            height="16"
+          />
+          <p class="theme_title">{{ selected.title }}</p>
+        </div>
+        <p class="theme_descr">{{ selected.description }}</p>
+      </div>
+      <slot name="links" />
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+export default defineComponent({
+  name: "argHomeSelectedBlock",
+  components: { argIcon },
+  props: {
+    selected: {
+      type: Object,
+      default: null
+    }
+  }
+});
+</script>
+
+<style scoped>
+.selected_block_card {
+  margin: 0px !important;
+  position: fixed;
+  padding: 24px;
+  position: sticky;
+  top: 12vh;
+  flex: 1;
+  height: fit-content;
+}
+.selected_block_display {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.theme_select_message {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.theme_title_display {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.icon_square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dividers);
+  padding: 8px;
+  border-radius: 8px;
+  width: fit-content;
+}
+.theme_title {
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: normal;
+}
+.theme_descr {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+}
+</style>

package/dist/runtime/components/argHomeSelectedBlock.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    selected: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    selected: {
+        type: ObjectConstructor;
+        default: null;
+    };
+}>>, {
+    selected: Record<string, any>;
+}, {}>;
+export default _default;

package/dist/runtime/components/argIcon.vue

@@ -692,6 +692,7 @@ export default defineComponent({
       "MinusSquareFill",
       "MinusSquareDisable",
       "Minus",
+      "Molecule",
       "Money",
       "MonitorPlay",
       "Monitor",
@@ -1753,6 +1754,7 @@ export default defineComponent({
       MinusSquareFill: '<path d="M208 40H48C43.5817 40 40 43.5817 40 48V208C40 212.418 43.5817 216 48 216H208C212.418 216 216 212.418 216 208V48C216 43.5817 212.418 40 208 40Z" stroke="currentColor" fill="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M96 128H160" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>',
       MinusSquareDisable: '<path d="M208 40H48C43.5817 40 40 43.5817 40 48V208C40 212.418 43.5817 216 48 216H208C212.418 216 216 212.418 216 208V48C216 43.5817 212.418 40 208 40Z" stroke="var(--lavendar-grey)" stroke-linecap="round" stroke-linejoin="round" fill="var(--lavendar-grey)"/><path d="M96 128H160" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
       Minus: '<rect width="256" height="256" fill="none" stroke="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />',
+      Molecule: '<path stroke="currentColor" fill="currentColor" stroke-width="4px" d="M64.6,15.2c-21.5,8.6-25.1,37.3-6.3,50.6c5.1,3.6,10.3,5.2,18.3,5.4l6.2,0.1l7.9,14.6l8,14.5l-4.3,4.6c-7.4,7.7-10.3,13.8-12,24.7c-1.2,7.6,0.1,16.2,3.6,23.9l2.6,5.6l-3.8,3.6c-2.1,1.9-9.8,8.8-17,15.4l-13.2,11.8l-3.5-1.7c-7.4-3.8-18.4-3.9-25.5-0.2c-4.5,2.3-10.7,8.7-13.2,13.5c-2.1,3.9-2.5,5.7-2.5,12.3c0,6.7,0.4,8.5,2.5,12.9c2.9,5.9,8.2,11,14.2,13.8c3.2,1.5,5.9,1.9,11.9,1.9c6.7,0,8.4-0.4,12.5-2.5c10.3-5.5,16-14.7,16-25.7c0-4.2-0.5-7.7-1.5-10.1l-1.5-3.6L69,196c2.7-2.5,10.4-9.5,17-15.4c11.4-10.2,12.2-10.8,14-9.7c18,11.4,37.6,10.9,52.8-1l3.4-2.7l2.4,1.8c1.3,1,3.9,3.3,5.9,5l3.5,3.2l-1.3,3.8c-1.8,5-1.7,14,0.1,19.3c1.8,5.6,8.5,12.8,14.4,15.9c4,2.1,5.7,2.5,12.8,2.5c7.1,0,8.8-0.4,12.8-2.5c6.1-3.2,10.8-8.2,13.8-14.7c2.1-4.6,2.4-6.3,2-12.3c-0.5-11.3-6.2-20.1-16-25c-6.2-3-18.8-3-25.1,0.1l-4.3,2.1l-5.9-5.2c-3.3-2.8-5.9-5.3-5.9-5.4c0-0.1,0.9-2.6,2-5.6c1.7-4.5,2.1-7.4,2.1-16.2l0.1-10.8l9.5-4.3c16.6-7.6,14.9-7.2,18.9-3.8c11.6,10.2,27.8,10.1,38.9-0.1c6.7-6.1,9.1-11.8,9.2-21.3c0-5.6-0.5-8.3-2-11.5c-2.7-6-7.8-11.3-13.8-14.2c-4.5-2.2-6.3-2.6-12.9-2.6c-6.2,0-8.6,0.5-12,2.2c-10.1,4.9-16.5,14.9-16.6,25.7l-0.1,6l-12.6,5.6l-12.7,5.6l-5.6-5.7c-11.8-12.2-27.3-16.4-44.4-12c-2.2,0.5-2.7-0.2-10.3-13.9c-4.4-7.9-7.9-14.8-7.9-15.1c0-0.4,1-2,2.3-3.6c5.9-7.7,7.7-18.5,4.6-27.9c-1.9-5.7-8.5-13-14.5-16.1C81.2,13.1,71.1,12.5,64.6,15.2z M82.9,29.7c8.9,5.6,9,18.4,0.1,25c-3.7,2.8-12.7,2.6-16.9-0.3c-7.2-5.2-8.2-15.4-2.2-22.1C69.1,26.6,76.3,25.6,82.9,29.7z M223.2,80.7c15,6.9,10.4,28.3-6.2,28.3c-4.7,0-9.1-2.6-12.3-7.3c-1.8-2.6-2.1-4.1-1.8-8.3c0.5-6.2,3.2-10.4,8.4-12.8C216,78.6,218.6,78.6,223.2,80.7z M136.5,107.2c20.3,7.7,26,33.9,10.7,49.2c-8,8-19,10.8-30.2,7.4c-5.6-1.7-7.4-2.8-11.8-7.2c-3.7-3.7-5.7-6.7-7.2-10.7c-6.1-16.2,3.1-34.5,20-39.7C122.4,104.8,131.5,105.4,136.5,107.2z M201.3,177.6c4.1,2.3,7.7,8.4,7.7,13c0,4.6-3.6,10.5-8.2,12.8c-4.9,2.6-8.6,2.6-13.7,0c-4.6-2.3-8.2-8-8.2-13.2c0-5.6,4.6-12.1,10-14.1C192.2,175,197.9,175.6,201.3,177.6z M46.1,201.3c1.6,1.1,4,3.5,5.2,5.2c1.8,2.6,2.1,4.1,1.8,8.4c-0.5,6.6-3.6,10.8-9.5,13.1c-3.6,1.4-4.7,1.5-8.5,0.5c-5.1-1.4-8-3.8-10.3-9.1c-2.2-4.6-1.6-8.9,1.5-13.8C30.5,199.2,40,197.2,46.1,201.3z"/>',
       Money: '<rect width="256" height="256" fill="none" stroke="none"/><rect x="16" y="64" width="224" height="128" rx="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /><circle cx="128" cy="128" r="32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /><line x1="176" y1="64" x2="240" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /><line x1="176" y1="192" x2="240" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /><line x1="80" y1="64" x2="16" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /><line x1="80" y1="192" x2="16" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />',
       MonitorPlay: '<rect width="256" height="256" fill="none" stroke="none"/><rect x="32" y="48" width="192" height="144" rx="16" transform="translate(256 240) rotate(180)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /><line x1="160" y1="224" x2="96" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /><polygon points="160 120 112 88 112 152 160 120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />',
       Monitor: '<rect width="256" height="256" fill="none" stroke="none"/><rect x="32" y="48" width="192" height="144" rx="16" transform="translate(256 240) rotate(180)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" /><line x1="160" y1="224" x2="96" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />',

package/dist/runtime/components/argIcon.vue.d.ts

@@ -687,6 +687,7 @@ declare const _default: import("vue").DefineComponent<{
         MinusSquareFill: string;
         MinusSquareDisable: string;
         Minus: string;
+        Molecule: string;
         Money: string;
         MonitorPlay: string;
         Monitor: string;

package/dist/runtime/components/argInfoBar.vue

@@ -7,13 +7,15 @@
       :class="item.name === 'Sources' ? 'relative' : ''"
       @click="openMenu(item.name)"
     >
-      <arg-icon :name="item.icon" size="20" />
-      <div
-        v-if="item.name === 'Sources' && sourceAmount > 0"
-        class="arg_source_nb"
-      >
-        {{ sourceAmount }}
-      </div>
+      <arg-tooltip :tooltip-text="item.name" dir="left">
+        <arg-icon :name="item.icon" size="20" />
+        <div
+          v-if="item.name === 'Sources' && sourceAmount > 0"
+          class="arg_source_nb"
+        >
+          {{ sourceAmount }}
+        </div>
+      </arg-tooltip>
     </div>
   </div>
 </template>
@@ -24,9 +26,10 @@ import {
   defineComponent
 } from "vue";
 import argIcon from "./argIcon.vue";
+import argTooltip from "./argTooltip.vue";
 export default defineComponent({
   name: "argInfoBar",
-  components: { argIcon },
+  components: { argIcon, argTooltip },
   props: {
     infoArray: {
       type: Array,

package/dist/runtime/components/argLangSelect.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    v-if="langs.length > 0"
+    class="language_container"
+    :class="showLangOptions ? 'active_lang' : ''"
+    @click="showLangOptions = !showLangOptions"
+  >
+    <div class="oip_row v-center gap-8 justify-between">
+      <div class="oip_row v-center gap-4">
+        <arg-flag :iso="selectedItem.iso" height="16" emoji />
+        <p>
+          {{ langs.filter((f) => f.iso === selectedItem.iso)[0].title }}
+        </p>
+      </div>
+      <arg-icon
+        name="CaretDown"
+        size="14"
+        class="lang_choice_icon"
+        :class="showLangOptions ? 'icon-rotate' : ''"
+      />
+    </div>
+    <div v-if="showLangOptions" class="lang_choice_container">
+      <div
+        v-for="(lang, index) in langs.filter((f) => f.iso !== selectedItem.iso)"
+        :key="index"
+        class="oip_row v-center gap-4 lang-choice"
+        @click="selectLang(lang)"
+      >
+        <arg-flag :iso="lang.iso" height="16" emoji />
+        <p>{{ lang.title }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  onMounted,
+  ref,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argFlag from "./argFlag.vue";
+export default defineComponent({
+  name: "argLangSelect",
+  components: { argIcon, argFlag },
+  props: {
+    langs: {
+      type: Array,
+      required: true
+    },
+    default_locale: {
+      type: String,
+      default: "fr"
+    }
+  },
+  emits: ["onSelectLang", "update:Lang"],
+  setup(props, { emit }) {
+    const showLangOptions = ref(false);
+    const selectedItem = ref({
+      title: "Fran\xE7ais",
+      iso: "fr",
+      locale: "fr"
+    });
+    onMounted(() => {
+      selectedItem.value = props.langs[props.langs.findIndex((a) => a.locale === props.default_locale)];
+    });
+    function selectLang(item) {
+      selectedItem.value = item;
+      emit("onSelectLang", item);
+      emit("update:Lang", item.locale);
+    }
+    return {
+      selectedItem,
+      showLangOptions,
+      selectLang
+    };
+  }
+});
+</script>
+
+<style scoped>
+.language_container {
+  cursor: pointer;
+  border: 1.5px solid transparent;
+  border-radius: 8px;
+  padding: 11px 8px;
+  position: relative;
+  background: rgba(253, 253, 255, 0.8);
+  border: 1.5px solid transparent;
+  z-index: 99;
+}
+.language_container:hover svg {
+  color: var(--primary) !important;
+}
+
+.lang_choice_container {
+  padding: 20px 12px 10px 8px;
+  left: -1px;
+  position: absolute;
+  background: rgba(253, 253, 255, 0.8);
+  border-top: none !important;
+  border: 1.5px solid transparent;
+  border-radius: 8px;
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+  width: calc(100% - 20px);
+}
+.lang_choice_container.set-width {
+  width: 102% !important;
+}
+
+.active_lang .lang_choice_container {
+  border-top: none !important;
+}
+
+.lang_choice_container:hover {
+  color: var(--primary) !important;
+}
+
+.lang_choice_icon {
+  transition: transform 0.3s;
+  flex-shrink: 0;
+}
+
+.icon-rotate {
+  transform: rotate(-180deg);
+}
+
+p {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  white-space: nowrap;
+}
+
+.lang-choice:hover p {
+  color: var(--primary) !important;
+}
+</style>