@tekkare/auriga 0.1.25 → 0.1.27

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.25"
+  "version": "0.1.27"
 }

package/dist/runtime/components/argBtn.vue

@@ -1,10 +1,11 @@
 <template>
-  <div>
+  <div :class="fullWidth ? 'full_width' : ''">
     <span
       v-if="onlyIcon === false"
       :class="
-        `oip_${btnStyle}_button oip_btn ` +
-        [becomeSmall === true ? 'prmt_button_big' : '']
+        `oip_${btnStyle}_button oip_btn oip_btn_${size} ` +
+        [becomeSmall === true ? 'prmt_button_big ' : ''] +
+        [fullWidth === true ? 'oip_full_btn' : '']
       "
       @click="send()"
     >
@@ -53,7 +54,6 @@
 
 <script>
 import argIcon from "./argIcon.vue";
-import argStyle from "./argStyle.vue";
 import {
   ref,
   computed,
@@ -61,7 +61,7 @@ import {
 } from "vue";
 export default defineComponent({
   name: "argBtn",
-  components: { argIcon, argStyle },
+  components: { argIcon },
   props: {
     btnStyle: { type: String, default: "primary" },
     becomeSmall: { type: Boolean, default: true },
@@ -69,7 +69,15 @@ export default defineComponent({
     onlyIcon: { type: Boolean, default: false },
     prefixIcon: { type: String, default: null },
     suffixIcon: { type: String, default: null },
-    loading: { type: Boolean, default: false }
+    loading: { type: Boolean, default: false },
+    fullWidth: { type: Boolean, default: false },
+    size: {
+      type: String,
+      default: "s",
+      validator: (value) => {
+        return ["s", "m"].includes(value);
+      }
+    }
   },
   emits: ["onClick"],
   setup(props, { emit }) {
@@ -113,4 +121,8 @@ export default defineComponent({
     display: none !important;
   }
 }
+
+.full_width {
+  width: 100%;
+}
 </style>

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

@@ -27,6 +27,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }, {
     getIconColor: import("vue").ComputedRef<string>;
     send: () => void;
@@ -59,6 +68,15 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    fullWidth: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     onOnClick?: ((...args: any[]) => any) | undefined;
 }, {
@@ -69,5 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     prefixIcon: string;
     suffixIcon: string;
     loading: boolean;
+    fullWidth: boolean;
+    size: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/argCheckbox.vue

@@ -155,7 +155,7 @@ export default defineComponent({
   color: var(--primary) !important;
 }
 .filter_box:hover .filter_icon_check {
-  color: var(--primary-hover2) !important;
+  color: var(--primary-hover) !important;
 }
 .disable {
   cursor: initial;

package/dist/runtime/components/argDropdownSelect.vue

@@ -67,7 +67,7 @@
       </div>
       <div v-else class="oip_select_dropdown_selection_container">
         <div
-          v-for="(element, index) of filterName()"
+          v-for="(element, index) of filterName"
           :key="index"
           class="oip_select_complex_selection_loop"
           :class="values_disabled.includes(index) ? 'disabled_option' : ''"
@@ -191,6 +191,7 @@ export default defineComponent({
     watch(
       () => props.element_table,
       (new_element_table) => {
+        table_values.value = new_element_table;
         if (props.watch_default_change) {
           selected_item.value = new_element_table[props.default_select];
           selected_number.value = props.default_select;
@@ -265,14 +266,14 @@ export default defineComponent({
       isDisplay.value = false;
       document?.removeEventListener("click", closeDropdown);
     }
-    function filterName() {
+    const filterName = computed(() => {
       if (searchName.value !== null) {
-        return props.element_table.filter(
+        return table_values.value.filter(
           (element) => element.toLowerCase().includes(searchName.value.toLowerCase())
         );
       }
-      return props.element_table;
-    }
+      return table_values.value;
+    });
     function changeDisplay() {
       if (props.disabled === false) {
         if (isDisplay.value === true) {
@@ -355,7 +356,7 @@ export default defineComponent({
   color: var(--independence) !important;
 }
 .oip_select_complex_selection_loop:hover > svg.add {
-  color: var(--primary-hover2) !important;
+  color: var(--primary-hover) !important;
 }
 
 .oip_select_complex_selection_loop:hover svg {

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

@@ -98,7 +98,7 @@ declare const _default: import("vue").DefineComponent<{
     checkActiveEllipsis: () => void;
     add_element: (element: string, index: number) => void;
     closeDropdown: () => void;
-    filterName: () => string[];
+    filterName: import("vue").ComputedRef<string[]>;
     changeDisplay: () => void;
     changeInput: () => void;
     getEmptyMsg: import("vue").ComputedRef<string>;

package/dist/runtime/components/argHeaderTabs.vue

@@ -162,17 +162,13 @@ export default defineComponent({
   color: var(--wild-blue-yonder);
   list-style: none;
   font-style: normal;
-  font-size: 12px;
-  font-weight: 700;
+  font-size: 14px;
+  font-weight: 500;
   text-align: center;
   padding: 0px 0px 8px 0px;
   white-space: pre-line;
   overflow-wrap: break-word;
   vertical-align: middle;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: normal;
 }
 
 .header_one_tab:hover {

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/argMultipleChoice.vue

@@ -156,7 +156,7 @@ export default defineComponent({
 }
 
 .selected_option:hover svg {
-  color: var(--primary-hover2) !important;
+  color: var(--primary-hover) !important;
 }
 
 .selected_option p {

package/dist/runtime/components/argMultipleSelect.vue

@@ -822,7 +822,7 @@ export default defineComponent({
   font-weight: 700 !important;
 }
 .oip_select_complex_selection_loop:hover > svg.add {
-  color: var(--primary-hover2) !important;
+  color: var(--) !important;
 }
 .oip_select_complex_selection_loop > svg.add {
   color: var(--primary) !important;

package/dist/runtime/components/argNoSelectedScope.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="arg_no_scope_display">
+    <div class="arg_no_selected_scope">
+      <div class="icon_square">
+        <arg-icon name="CrosshairSimple" size="32" />
+      </div>
+      <div class="arg_no_scope_text">
+        {{ getNoScopeMsg }}
+      </div>
+      <div v-if="scopeArray.length > 0" class="arg_scopes_select">
+        <div class="oip-row v-center justify-between">
+          <p class="args_select_title">
+            {{
+              lang === "fr"
+                ? "Appliquer un scope existant"
+                : "Apply an existing scope"
+            }}
+          </p>
+          <!-- Manage Scopes -->
+        </div>
+        <arg-radio-buttons
+          dir="column"
+          :elements="scopeArray.map((a) => a.title)"
+          :return_value="true"
+          v-model:Selection="selectedScope"
+        />
+      </div>
+      <arg-btn
+        v-if="scopeArray.length > 0"
+        :btn-style="selectedScope !== null ? 'primary-fill' : 'disable'"
+        size="m"
+        full-width
+        @onClick="selectScope"
+        >{{ lang === "fr" ? "Appliquer le scope" : "Apply scope" }}</arg-btn
+      >
+      <div
+        v-if="scopeArray.length > 0"
+        class="oip_row v-center gap-8 full-width"
+      >
+        <div class="scope_sep" />
+        <p class="scope_sep_text">or</p>
+        <div class="scope_sep" />
+      </div>
+      <arg-btn
+        btn-style="primary-stroke"
+        size="m"
+        full-width
+        @onClick="createNewScope"
+        >{{ lang === "fr" ? "+ Nouveau scope" : "+ New scope" }}</arg-btn
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref,
+  computed,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+import argRadioButtons from "./argRadioButtons.vue";
+export default defineComponent({
+  name: "argNoSelectedScope",
+  components: { argIcon, argRadioButtons },
+  props: {
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
+    },
+    scopeArray: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["onSelectScope", "update:Scope", "onCreateScope"],
+  setup(props, { emit }) {
+    const selectedScope = ref(null);
+    const getNoScopeMsg = computed(() => {
+      if (props.lang === "en") {
+        return `You need to select your scope to view any results or data. Please choose one of the options below to proceed.`;
+      } else
+        return `Vous devez s\xE9lectionner votre scope pour voir les r\xE9sultats ou donn\xE9es. Veuillez choisir une des options ci-dessous pour continuer`;
+    });
+    function selectScope() {
+      emit(
+        "onSelectScope",
+        props.scopeArray[props.scopeArray.findIndex(
+          (a) => a.title === selectedScope.value
+        )]
+      );
+      emit(
+        "update:Scope",
+        props.scopeArray[props.scopeArray.findIndex(
+          (a) => a.title === selectedScope.value
+        )]
+      );
+    }
+    function createNewScope() {
+      emit("onCreateScope");
+    }
+    return { getNoScopeMsg, selectedScope, selectScope, createNewScope };
+  }
+});
+</script>
+
+<style scoped>
+.arg_no_selected_scope {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  max-width: 382px;
+}
+
+.icon_square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--dividers);
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.arg_no_scope_text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 160%;
+  color: var(--cool-grey);
+}
+
+.arg_no_scope_display {
+  height: 100%;
+  width: 100%;
+  margin-top: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.arg_scopes_select {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.args_select_title {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.scope_sep {
+  height: 1px;
+  background-color: var(--wild-blue-yonder);
+  flex: 1 1 0;
+  min-width: 40%;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.scope_sep_text {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: var(--wild-blue-yonder);
+}
+</style>

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

@@ -0,0 +1,34 @@
+declare const _default: import("vue").DefineComponent<{
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    scopeArray: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}, {
+    getNoScopeMsg: import("vue").ComputedRef<"You need to select your scope to view any results or data. Please choose one of the options below to proceed." | "Vous devez sélectionner votre scope pour voir les résultats ou données. Veuillez choisir une des options ci-dessous pour continuer">;
+    selectedScope: any;
+    selectScope: () => void;
+    createNewScope: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSelectScope" | "update:Scope" | "onCreateScope")[], "onSelectScope" | "update:Scope" | "onCreateScope", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    scopeArray: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>> & {
+    onOnSelectScope?: ((...args: any[]) => any) | undefined;
+    "onUpdate:Scope"?: ((...args: any[]) => any) | undefined;
+    onOnCreateScope?: ((...args: any[]) => any) | undefined;
+}, {
+    lang: string;
+    scopeArray: unknown[];
+}, {}>;
+export default _default;

package/dist/runtime/components/argRadioButtons.vue

@@ -3,7 +3,7 @@
     <div
       v-for="(radio, index) in elements"
       :key="index"
-      class="oip_row v-center gap-4"
+      class="oip_row v-center gap-4 radio_item"
       :class="selectedRadio === index + 1 ? 'selected-radio' : 'display-radio'"
       @click="selectRadio(index + 1, radio)"
     >
@@ -37,7 +37,7 @@ export default defineComponent({
     },
     defaultSelect: {
       type: Number,
-      default: 1
+      default: null
     },
     returnValue: {
       type: Boolean,
@@ -50,7 +50,7 @@ export default defineComponent({
   },
   emits: ["changeElement", "update:Selection"],
   setup(props, { emit }) {
-    const selectedRadio = ref(1);
+    const selectedRadio = ref(null);
     onMounted(() => {
       if (typeof props.defaultSelect === "number") {
         selectedRadio.value = props.defaultSelect;
@@ -134,4 +134,8 @@ export default defineComponent({
   align-items: flex-start;
   gap: 8px;
 }
+
+.radio_item {
+  padding: 6px;
+}
 </style>

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

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     defaultSelect: {
         type: NumberConstructor;
-        default: number;
+        default: null;
     };
     returnValue: {
         type: BooleanConstructor;
@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    selectedRadio: import("vue").Ref<number>;
+    selectedRadio: any;
     selectRadio: (index: number, value: string) => void;
     getIconName: (index: number) => "CheckCircleFill" | "Circle";
     getColor: (index: number) => "var(--primary)" | "var(--lavendar-grey)";
@@ -53,7 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     defaultSelect: {
         type: NumberConstructor;
-        default: number;
+        default: null;
     };
     returnValue: {
         type: BooleanConstructor;

package/dist/runtime/components/argStyle.vue

@@ -25,21 +25,20 @@ export default defineComponent({
 
   /* PRIMARY */
   --primary: #2176ff;
-  --primary-hover: #0966fb;
   --primary-dark: #0056e0;
-  --primary-hover2: #0f44be;
+  --primary-hover: #0f44be;
   --primary-light: #f4f8ff;
 
   /* ACCENT */
   --accent: #2176ff;
   --accent-yellow: #ff981a;
-  --accent-hover: #0966fb;
+  --accent-hover: #0f44be;
   --accent-hover-yellow: #e7860f;
 
   /* SYSTEM */
   --alert: #fb4654;
   --system-alert: #ef4444;
-  --alert-hover: #d21616;
+  --system-alert-hover: #d21616;
   --warning: #fd9147;
   --success: #32d175;
   --system-success: #22c55e;
@@ -291,10 +290,9 @@ button {
 
 .oip_btn {
   border-radius: 8px !important;
-  padding: 10px 20px !important;
+  padding: 0px 16px !important;
   outline: none !important;
   cursor: pointer !important;
-  max-height: 16px;
   white-space: nowrap;
   display: flex;
   justify-content: center;
@@ -309,54 +307,66 @@ button {
   width: fit-content;
 }
 
-.oip_primary_button {
+.oip_btn_s {
+  height: 32px;
+}
+
+.oip_btn_m {
+  height: 40px;
+}
+
+.oip_full_btn {
+  width: calc(100% - 32px) !important;
+}
+
+.oip_primary-fill_button {
   background: var(--primary) !important;
   border: 2px solid var(--primary) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
 }
-.oip_primary_button .oip_button_spinner div {
+.oip_primary-fill_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
 
-.oip_primary_button:hover,
-.oip_primary_button:focus {
-  background: var(--primary-hover2) !important;
-  border: 2px solid var(--primary-hover2) !important;
+.oip_primary-fill_button:hover,
+.oip_primary-fill_button:focus {
+  background: var(--primary-hover) !important;
+  border: 2px solid var(--primary-hover) !important;
   box-shadow: none !important;
   color: var(--pure-white) !important;
 }
-.oip_primary_button.is-disabled,
-.oip_primary_button.is-disabled:hover,
-.oip_primary_button.is-disabled:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+.oip_primary-fill_button.is-disabled,
+.oip_primary-fill_button.is-disabled:hover,
+.oip_primary-fill_button.is-disabled:focus {
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
-.oip_primary_icon_button {
+.oip_primary-fill_icon_button {
   background: var(--primary) !important;
   border: 2px solid var(--primary) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
-.oip_primary_icon_button .oip_button_spinner div {
+.oip_primary-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_primary_icon_button:hover,
-.oip_primary_icon_button:focus {
+.oip_primary-fill_icon_button:hover,
+.oip_primary-fill_icon_button:focus {
   background: var(--primary-hover) !important;
   border: 2px solid var(--primary-hover) !important;
   box-shadow: var(--primary-button-shadow) !important;
   color: var(--pure-white) !important;
 }
 
-.oip_secondary_button,
+/*.oip_secondary_button,
 .oip_secondary_button:hover,
 .oip_secondary_button:focus {
   background: var(--pure-white) !important;
@@ -379,269 +389,255 @@ button {
   box-shadow: none !important;
   color: var(--wild-blue-yonder) !important;
   padding: 10px !important;
-}
+}*/
 
-.oip_terciary_button,
-.oip_dark_button,
-.oip_tertiary_button {
+.oip_secondary-fill_button {
   background: var(--independence) !important;
   border: 2px solid var(--independence) !important;
   box-shadow: 4px 7px 12px 0px rgba(62, 63, 94, 0.2) !important;
   color: var(--pure-white) !important;
 }
 
-.oip_tertiary_button:hover,
-.oip_tertiary_button:focus,
-.oip_terciary_button:hover,
-.oip_terciary_button:focus,
-.oip_dark_button:hover,
-.oip_dark_button:focus,
-.oip_terciary_icon_button:hover,
-.oip_terciary_icon_button:focus,
-.oip_tertiary_icon_button:hover,
-.oip_tertiary_icon_button:focus,
-.oip_dark_icon_button:hover,
-.oip_dark_icon_button:focus {
+.oip_secondary-fill_button:hover,
+.oip_secondary-fill_button:focus,
+.oip_secondary-fill_icon_button:hover,
+.oip_secondary-fill_icon_button:focus {
   background: #21223d !important;
   border: 2px solid #21223d !important;
   box-shadow: none !important;
 }
 
-.oip_tertiary_button .oip_button_spinner div,
-.oip_dark_button .oip_button_spinner div,
-.oip_tertiary_icon_button .oip_button_spinner div,
-.oip_dark_icon_button .oip_button_spinner div {
+.oip_secondary-fill_button .oip_button_spinner div,
+.oip_secondary-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
 
-.oip_terciary_icon_button,
-.oip_tertiary_icon_button,
-.oip_dark_icon_button {
+.oip_secondary-fill_icon_button {
   background: var(--independence) !important;
   border: 2px solid var(--independence) !important;
   box-shadow: 4px 7px 12px 0px rgba(62, 63, 94, 0.2) !important;
   color: var(--pure-white) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
 .oip_disable_button,
 .oip_disable_button:hover,
 .oip_disable_button:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
 .oip_disable_icon_button,
 .oip_disable_icon_button:hover,
 .oip_disable_icon_button:focus {
-  background: var(--more) !important;
-  border: 2px solid var(--more) !important;
+  background: var(--dividers) !important;
+  border: 2px solid var(--dividers) !important;
   box-shadow: none !important;
-  color: var(--cool-grey) !important;
+  color: var(--wild-blue-yonder) !important;
 }
 
 .el-button + .el-button {
   margin-left: 0px !important;
 }
-.oip_skeleton_button {
+.oip_secondary-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
 }
 
-.oip_skeleton_button:hover,
-.oip_skeleton_button:focus {
+.oip_secondary-stroke_button:hover,
+.oip_secondary-stroke_button:focus {
   background: rgba(62, 63, 94, 0.05) !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
 }
 
-.oip_skeleton_button:hover .oip__button_prefix_icon,
-.oip_skeleton_button:focus .oip__button_prefix_icon,
-.oip_skeleton_button:hover .oip__button_suffix_icon,
-.oip_skeleton_button:focus .oip__button_suffix_icon {
+.oip_secondary-stroke_button:hover .oip__button_prefix_icon,
+.oip_secondary-stroke_button:focus .oip__button_prefix_icon,
+.oip_secondary-stroke_button:hover .oip__button_suffix_icon,
+.oip_secondary-stroke_button:focus .oip__button_suffix_icon {
   stroke: var(--independence) !important;
   color: var(--independence) !important;
 }
-.oip_skeleton_button .oip_button_spinner div,
-.oip_skeleton_icon_button .oip_button_spinner div {
+.oip_secondary-stroke_button .oip_button_spinner div,
+.oip_secondary-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--independence);
   border-color: var(--independence) transparent transparent transparent;
 }
-.oip_skeleton_icon_button {
+.oip_secondary-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(62, 63, 94, 0.2) !important;
   box-shadow: none !important;
   color: var(--independence) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
 }
 
-.oip_skeleton_icon_button:hover,
-.oip_skeleton_icon_button:focus {
+.oip_secondary-stroke_icon_button:hover,
+.oip_secondary-stroke_icon_button:focus {
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
 }
-.oip_skeleton_icon_button:hover svg,
-.oip_skeleton_icon_buttonn:focus svg,
-.oip_skeleton_icon_button:hover svg,
-.oip_skeleton_icon_button:focus svg {
+.oip_secondary-stroke_icon_button:hover svg,
+.oip_secondary-stroke_icon_buttonn:focus svg,
+.oip_secondary-stroke_icon_button:hover svg,
+.oip_secondary-stroke_icon_button:focus svg {
   stroke: var(--primary) !important;
   color: var(--primary) !important;
 }
 
-.oip_outlined_button {
+.oip_primary-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
   box-shadow: none !important;
   color: var(--primary) !important;
 }
 
-.oip_outlined_button:hover,
-.oip_outlined_button:focus,
-.oip_outlined_icon_button:hover,
-.oip_outlined_icon_button:focus {
+.oip_primary-stroke_button:hover,
+.oip_primary-stroke_button:focus,
+.oip_primary-stroke_icon_button:hover,
+.oip_primary-stroke_icon_button:focus {
   background: rgba(33, 118, 255, 0.05) !important;
-  color: var(--primary-hover2) !important;
+  color: var(--) !important;
 }
-.oip_outlined_button .oip_button_spinner div,
-.oip_outlined_icon_button .oip_button_spinner div {
+.oip_primary-stroke_button .oip_button_spinner div,
+.oip_primary-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--primary);
   border-color: var(--primary) transparent transparent transparent;
 }
-.oip_outlined_icon_button {
+.oip_primary-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(33, 118, 255, 0.2) !important;
   box-shadow: none !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--primary) !important;
 }
-.oip_warning_button {
+.oip_warning-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(239, 68, 68, 0.2);
   box-shadow: none !important;
   color: var(--system-alert) !important;
 }
-.oip_warning_button:hover,
-.oip_warning_button:focus,
-.oip_warning_icon_button:hover,
-.oip_warning_icon_button:focus {
+.oip_warning-stroke_button:hover,
+.oip_warning-stroke_button:focus,
+.oip_warning-stroke_icon_button:hover,
+.oip_warning-stroke_icon_button:focus {
   background: rgba(239, 68, 68, 0.2) !important;
   border: 2px solid rgba(251, 70, 84, 0.2) !important;
-  color: var(--alert-hover) !important;
+  color: var(--system-alert-hover) !important;
 }
-.oip_warning_button .oip_button_spinner div,
-.oip_warning_icon_button .oip_button_spinner div {
+.oip_warning-stroke_button .oip_button_spinner div,
+.oip_warning-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--system-alert);
   border-color: var(--system-alert) transparent transparent transparent;
 }
-.oip_warning_button:hover .oip_button_spinner div,
-.oip_warning_icon_button:hover .oip_button_spinner div {
-  border: 2px solid var(--alert-hover);
-  border-color: var(--alert-hover) transparent transparent transparent;
+.oip_warning-stroke_button:hover .oip_button_spinner div,
+.oip_warning-stroke_icon_button:hover .oip_button_spinner div {
+  border: 2px solid var(--system-alert-hover);
+  border-color: var(--system-alert-hover) transparent transparent transparent;
 }
-.oip_warning_button:hover .oip__button_prefix_icon,
-.oip_warning_button:focus .oip__button_prefix_icon,
-.oip_warning_button:hover .oip__button_suffix_icon,
-.oip_warning_button:focus .oip__button_suffix_icon {
-  stroke: var(--alert-hover) !important;
-  color: var(--alert-hover) !important;
+.oip_warning-stroke_button:hover .oip__button_prefix_icon,
+.oip_warning-stroke_button:focus .oip__button_prefix_icon,
+.oip_warning-stroke_button:hover .oip__button_suffix_icon,
+.oip_warning-stroke_button:focus .oip__button_suffix_icon {
+  stroke: var(--system-alert-hover) !important;
+  color: var(--system-alert-hover) !important;
 }
-.oip_warning_icon_button {
+.oip_warning-stroke_icon_button {
   background: transparent !important;
   border: 2px solid rgba(239, 68, 68, 0.2) !important;
   box-shadow: none !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--system-alert) !important;
 }
-.oip_warning_icon_button:hover,
-.oip_warning_icon_button:hover {
+.oip_warning-stroke_icon_button:hover,
+.oip_warning-stroke_icon_button:hover {
   border: 2px solid rgba(251, 70, 84, 0.2) !important;
-  color: var(--alert-hover) !important;
+  color: var(--system-alert-hover) !important;
 }
-.oip_warning_icon_button:hover svg,
-.oip_warning_icon_button:hover svg {
-  stroke: var(--alert-hover) !important;
-  color: var(--alert-hover) !important;
+.oip_warning-stroke_icon_button:hover svg,
+.oip_warning-stroke_icon_button:hover svg {
+  stroke: var(--system-alert-hover) !important;
+  color: var(--system-alert-hover) !important;
 }
-.oip_red_button {
+.oip_warning-fill_button {
   background: var(--system-alert) !important;
   border: 2px solid rgba(239, 68, 68, 0.2);
   box-shadow: 4px 7px 12px 0px rgba(239, 68, 68, 0.2) !important;
   color: var(--pure-white) !important;
 }
-.oip_red_button:hover,
-.oip_red_button:focus,
-.oip_red_icon_button:hover,
-.oip_red_icon_button:focus {
-  background: var(--alert-hover) !important;
-  border: 2px solid var(--alert-hover) !important;
+.oip_warning-fill_button:hover,
+.oip_warning-fill_button:focus,
+.oip_warning-fill_icon_button:hover,
+.oip_warning-fill_icon_button:focus {
+  background: var(--system-alert-hover) !important;
+  border: 2px solid var(--system-alert-hover) !important;
   box-shadow: none !important;
 }
-.oip_red_button .oip_button_spinner div,
-.oip_red_icon_button .oip_button_spinner div {
+.oip_warning-fill_button .oip_button_spinner div,
+.oip_warning-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_red_icon_button {
+.oip_warning-fill_icon_button {
   background: var(--system-alert) !important;
   border: 2px solid var(--system-alert) !important;
   box-shadow: 4px 7px 12px 0px rgba(239, 68, 68, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--pure-white) !important;
 }
 
-.oip_green_button {
+.oip_success-fill_button {
   background: var(--green) !important;
   border: 2px solid var(--green) !important;
   box-shadow: 4px 7px 12px 0px rgba(34, 197, 94, 0.2) !important;
   color: var(--pure-white) !important;
 }
-.oip_green_button:hover,
-.oip_green_button:focus,
-.oip_green_icon_button:hover,
-.oip_green_icon_button:focus {
+.oip_success-fill_button:hover,
+.oip_success-fill_button:focus,
+.oip_success-fill_icon_button:hover,
+.oip_success-fill_icon_button:focus {
   background: #2eb830 !important;
   border: 2px solid #2eb830 !important;
   box-shadow: none !important;
 }
-.oip_green_button .oip_button_spinner div,
-.oip_green_icon_button .oip_button_spinner div {
+.oip_success-fill_button .oip_button_spinner div,
+.oip_success-fill_icon_button .oip_button_spinner div {
   border: 2px solid var(--pure-white);
   border-color: var(--pure-white) transparent transparent transparent;
 }
-.oip_green_icon_button {
+.oip_success-fill_icon_button {
   background: var(--green) !important;
   border: 2px solid var(--green) !important;
   box-shadow: 4px 7px 12px 0px rgba(34, 197, 94, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--pure-white) !important;
 }
 
-.oip_success_button {
+.oip_success-stroke_button {
   background: transparent !important;
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
   color: var(--system-success) !important;
 }
-.oip_success_button:hover,
-.oip_success_button:focus,
-.oip_success_icon_button:hover,
-.oip_success_icon_button:focus {
+.oip_success-stroke_button:hover,
+.oip_success-stroke_button:focus,
+.oip_success-stroke_icon_button:hover,
+.oip_success-stroke_icon_button:focus {
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
   background: rgba(34, 197, 94, 0.05) !important;
   color: #069a3d !important;
 }
-.oip_success_button .oip_button_spinner div,
-.oip_success_icon_button .oip_button_spinner div {
+.oip_success-stroke_button .oip_button_spinner div,
+.oip_success-stroke_icon_button .oip_button_spinner div {
   border: 2px solid var(--system-success);
   border-color: var(--system-success) transparent transparent transparent;
 }
-.oip_success_icon_button {
+.oip_success-stroke_icon_button {
   border: 2px solid rgba(34, 197, 94, 0.2) !important;
-  padding: 10px !important;
+  padding: 0px 6px !important;
   color: var(--system-success) !important;
 }
 .oip_button_flex {
@@ -728,62 +724,66 @@ button {
   background: rgba(244, 63, 94, 0.1) !important;
   color: #9f1239;
 }
-/*.oip_tag.is_pink {
+.oip_tag.is_pink {
   background: rgba(236, 72, 153, 0.1) !important;
   color: #9d174d;
-}*/
+}
 .oip_tag.is_fushia {
   background: rgba(217, 70, 239, 0.1) !important;
   color: #86198f;
 }
-/*.oip_tag.is_purple {
+.oip_tag.is_purple {
   background: rgba(168, 85, 247, 0.1) !important;
   color: #6b21a8;
 }
-.oip_tag.is_indigo {
+.oip_tag.is_violet {
   background: rgba(139, 92, 246, 0.1) !important;
   color: #5b21b6;
-}*/
+}
+.oip_tag.is_indigo {
+  background: rgba(99, 102, 241, 0.1) !important;
+  color: #3730a3;
+}
 .oip_tag.is_blue {
   background: rgba(59, 130, 246, 0.1) !important;
   color: #1e40af;
 }
-/*.oip_tag.is_sapphire {
+.oip_tag.is_sky {
   background: rgba(14, 165, 233, 0.1) !important;
   color: #075985;
 }
-.oip_tag.is_turquoise {
+.oip_tag.is_cyan {
   background: rgba(6, 182, 212, 0.1) !important;
   color: #155e75;
 }
 .oip_tag.is_teal {
   background: rgba(20, 184, 166, 0.1) !important;
   color: #115e59;
-}*/
+}
 .oip_tag.is_emerald {
   background: rgba(16, 185, 129, 0.1) !important;
   color: #065f46;
 }
-/*.oip_tag.is_green {
+.oip_tag.is_green {
   background: rgba(34, 197, 94, 0.1) !important;
   color: #166534;
-}*/
+}
 .oip_tag.is_lime {
   background: rgba(132, 204, 22, 0.1) !important;
   color: #3f6212;
 }
-/*.oip_tag.is_yellow {
+.oip_tag.is_yellow {
   background: rgba(234, 179, 8, 0.1) !important;
   color: #854d0e;
-}*/
+}
 .oip_tag.is_amber {
   background: rgba(245, 158, 11, 0.1) !important;
   color: #92400e;
 }
-/*.oip_tag.is_coral {
+.oip_tag.is_orange {
   background: rgba(249, 115, 22, 0.1) !important;
   color: #9a3412;
-}*/
+}
 
 .oip_tag.is_gray {
   background: var(--background) !important;
@@ -793,18 +793,6 @@ button {
   stroke: var(--cool-grey);
   color: var(--cool-grey);
 }
-.oip_tag.is_light_red {
-  background: rgba(251, 70, 84, 0.1) !important;
-  color: var(--alert) !important;
-}
-.oip_tag.is_light_green {
-  background: rgba(50, 209, 117, 0.1) !important;
-  color: var(--success) !important;
-}
-.oip_tag.is_light_primary {
-  background: #e9f1ff !important;
-  color: var(--primary) !important;
-}
 .oip_tag .oip_tag__close {
   display: inline-block;
   cursor: pointer;
@@ -1007,4 +995,9 @@ button {
   align-items: flex-start;
   gap: 4px;
 }
+
+.arg_page {
+  height: 100%;
+  width: 100%;
+}
 </style>

package/dist/runtime/components/argTable.vue

@@ -928,7 +928,7 @@ th:last-child div.show .rcd-searchInput {
 
 .scroll_table .rcd_scrollTable thead {
   background: var(--pure-white) !important;
-  z-index: 90;
+  z-index: 10;
 }
 
 .scroll_table .rcd_scrollTable {

package/dist/runtime/components/argTags.vue

@@ -18,7 +18,7 @@ export default defineComponent({
   name: "argTags",
   components: { argIcon, argStyle },
   props: {
-    setStyle: { type: String, default: "light_grey" },
+    setStyle: { type: String, default: "gray" },
     haveClose: { type: Boolean, default: false }
   },
   emits: ["onClose"],

package/dist/runtime/components/argTextBtn.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="arg_text_btn"
+    :class="`${textStyle}_text_btn`"
+    @click="sendAction()"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import {
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "argTextBtn",
+  props: {
+    textStyle: {
+      type: String,
+      default: "primary",
+      validator: (value) => {
+        return ["primary", "warning"].includes(value);
+      }
+    }
+  },
+  emits: ["onClick"],
+  setup(props, { emit }) {
+    function sendAction() {
+      emit("onClick");
+    }
+    return { sendAction };
+  }
+});
+</script>
+
+<style scoped>
+.arg_text_btn {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.primary_text_btn {
+  color: var(--primary) !important;
+}
+.primary_text_btn:hover {
+  color: var(--primary) !important;
+}
+
+.warning_text_btn {
+  color: var(--system-alert) !important;
+}
+.warning_text_btn:hover {
+  color: var(--system-alert-hover) !important;
+}
+</style>

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

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<{
+    textStyle: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    sendAction: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "onClick"[], "onClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    textStyle: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onOnClick?: ((...args: any[]) => any) | undefined;
+}, {
+    textStyle: string;
+}, {}>;
+export default _default;

package/dist/runtime/components/argTooltip.vue

@@ -8,7 +8,7 @@
       v-if="disable === false"
       :class="`prmt_tooltip_text prmt_tooltip_text-${dir}`"
     >
-      {{ tooltipText }}
+      <p>{{ tooltipText }}</p>
     </div>
   </div>
 </template>
@@ -38,19 +38,20 @@ export default defineComponent({
 
 .prmt_tooltip_text {
   visibility: hidden;
-  min-width: 120px;
+  width: fit-content;
+  max-width: 250px;
   text-align: center;
   background-color: var(--independence);
   color: var(--pure-white);
-  border-radius: 12px;
+  border-radius: 4px;
   position: absolute;
   z-index: 2;
-  padding: 6px 12px;
+  padding: 4px 12px;
   margin-top: 4px;
   font-weight: 400;
   font-size: 14px;
   line-height: 160%;
-  white-space: break-spaces;
+  white-space: nowrap;
 }
 
 .prmt_tooltip .prmt_tooltip_text-top {
@@ -58,51 +59,16 @@ export default defineComponent({
   left: 50%;
   margin-left: -72px;
 }
-.prmt_tooltip .prmt_tooltip_text-top::after {
-  content: "";
-  position: absolute;
-  padding: 1px;
-  top: 98%;
-  left: 50%;
-  margin-left: -8px;
-  border-width: 7px;
-  border-bottom-left-radius: 4px;
-  border-style: solid;
-  border-color: var(--independence) transparent transparent transparent;
-}
 
 .prmt_tooltip .prmt_tooltip_text-right {
-  top: -12px;
+  top: -8px;
   left: 110%;
-  margin-left: 5px;
+  margin-left: 16px;
 }
-.prmt_tooltip .prmt_tooltip_text-right::after {
-  content: "";
-  position: absolute;
-  padding: 1px;
-  top: 60%;
-  right: 99%; /* To the left of the tooltip */
-  margin-top: -11px;
-  border-width: 7px;
-  border-style: solid;
-  border-color: transparent var(--independence) transparent transparent;
-}
-
 .prmt_tooltip .prmt_tooltip_text-left {
-  top: 15%;
+  top: -8px;
   right: 110%;
-  margin-right: 5px;
-}
-.prmt_tooltip .prmt_tooltip_text-left::after {
-  content: "";
-  position: absolute;
-  padding: 1px;
-  top: 55%;
-  left: 99.5%;
-  margin-top: -10px;
-  border-width: 7px;
-  border-style: solid;
-  border-color: transparent transparent transparent var(--independence);
+  margin-right: 16px;
 }
 
 .prmt_tooltip .prmt_tooltip_text-bottom {
@@ -116,26 +82,4 @@ export default defineComponent({
   left: 50%;
   margin-left: -130px;
 }
-.prmt_tooltip.last_tooltip .prmt_tooltip_text-bottom::after {
-  content: "";
-  position: absolute;
-  padding: 1px;
-  bottom: 98%;
-  left: 90% !important;
-  margin-left: -5px;
-  border-width: 7px;
-  border-style: solid;
-  border-color: transparent transparent var(--independence) transparent;
-}
-.prmt_tooltip .prmt_tooltip_text-bottom::after {
-  content: "";
-  position: absolute;
-  padding: 1px;
-  bottom: 95%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 7px;
-  border-style: solid;
-  border-color: transparent transparent var(--independence) transparent;
-}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",