@eturnity/eturnity_reusable_components 8.22.23-EPDM-12618.9 → 8.22.23-EPDM-14087.2

package/dist/main.es95.js

@@ -2,15 +2,17 @@ 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: "29",
-  height: "29",
-  fill: "#333"
+  width: "13",
+  height: "23",
+  fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", { d: "m10.5 14 4-8 4 8z" }, null, -1);
+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_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#ccc",
-  d: "m10.5 16 4 8 4-8z",
-  class: "fix"
+  fill: "#99DB0C",
+  d: "m28.94 7.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
 }, null, -1);
 const _hoisted_4 = [
   _hoisted_2,
@@ -19,8 +21,8 @@ const _hoisted_4 = [
 function render(_ctx, _cache) {
   return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const compass = { render };
+const context_menu1 = { render };
 export {
-  compass as default,
+  context_menu1 as default,
   render
 };

package/dist/main.es96.js

@@ -2,32 +2,27 @@ 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: "42",
-  height: "42",
+  width: "8",
+  height: "16",
   fill: "none"
 };
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#B2B9C5",
-  d: "M6.2 4.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.2-1.7M6.1 32.5H38c1.1 0 2-.9 2-2s-.9-2-2-2H6c-3.3 0-6 2.7-6 6 0 1.7.7 3.2 1.8 4.2 1 1.1 2.5 1.8 4.2 1.8h32c1.1 0 2-.9 2-2s-.9-2-2-2H6c-1.2 0-2.2-1.1-2-2.3.2-1 1.1-1.7 2.1-1.7M33.9 22.5H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c3.3 0 6-2.7 6-6 0-1.7-.7-3.2-1.8-4.2-1-1.1-2.5-1.8-4.2-1.8H2c-1.1 0-2 .9-2 2s.9 2 2 2h32c1.2 0 2.2 1.1 2 2.3-.2 1-1.1 1.7-2.1 1.7"
+  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 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_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#FF5656",
-  d: "m17.1 19.5-4-3-4 3v-15h8z"
+  fill: "#99DB0C",
+  d: "m22.94 18.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
 }, null, -1);
-const _hoisted_4 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#F58F46",
-  d: "m30.9 33.5-4-3-4 3v-15h8z"
-}, null, -1);
-const _hoisted_5 = [
+const _hoisted_4 = [
   _hoisted_2,
-  _hoisted_3,
-  _hoisted_4
+  _hoisted_3
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_5);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
 }
-const component_library = { render };
+const context_menu2 = { render };
 export {
-  component_library as default,
+  context_menu2 as default,
   render
 };

package/dist/main.es97.js

@@ -1,20 +1,23 @@
 import "./main.es3.js";
-import { openBlock, createElementBlock, createStaticVNode } from "./main.es6.js";
+import { openBlock, createElementBlock, createElementVNode as createBaseVNode } from "./main.es6.js";
 const _hoisted_1 = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "81",
-  height: "80",
+  width: "6",
+  height: "16",
   fill: "none"
 };
-const _hoisted_2 = /* @__PURE__ */ createStaticVNode('<path fill="#B2B9C5" fill-rule="evenodd" d="M51.61 40.35a.2.2 0 0 0-.134-.35h-8.101l5.527-17.3c.062-.195-.172-.346-.324-.21L29.39 39.65a.2.2 0 0 0 .134.35h8.101l-5.527 17.3c-.062.195.172.346.324.21z" clip-rule="evenodd"></path><path fill="#DEE2EB" d="M27.568 15.165c.654.654.64 1.73-.032 2.401-.672.672-1.747.686-2.401.032L17.367 9.83 19.8 7.397zM22.913 2.038a2.115 2.115 0 0 1 1.71 2.516c-.235 1.186-1.382 1.982-2.562 1.778L11.615 4.526 11.36.039zM25.903 19.989c.655.654.64 1.73-.031 2.401-.672.672-1.747.686-2.402.032l-9.347-9.348 2.433-2.433zM21.87 22.443c.654.654.64 1.73-.032 2.401-.672.672-1.747.686-2.402.032l-8.557-8.558 2.433-2.433zM16.256 23.317c.654.654.64 1.73-.032 2.401-.672.672-1.747.687-2.402.032l-6.187-6.187 2.433-2.433z"></path><path fill="#DEE2EB" d="M20.327 7.924 8.16 20.089l-6.055-6.056C-.076 11.852-.028 8.268 2.21 6.03l4.055-4.056c2.24-2.24 5.824-2.286 8.005-.105z"></path><path fill="#DEE2EB" d="m18.947 11.41-.811.811-1.053-1.053.81-.811zM15.703 14.654l-.811.811-1.053-1.053.81-.811zM11.932 17.372l-.81.81-.527-.526.81-.81zM6.266 1.973C8.294-.054 10.162-.079 11.36.04l.26.53-.138.402-1.879.825c-.44-.35-3.445.286-3.337.177M53.43 64.835c-.654-.654-.64-1.73.032-2.401.672-.672 1.747-.686 2.401-.032l7.768 7.768-2.433 2.433zM58.085 77.962a2.115 2.115 0 0 1-1.71-2.516c.234-1.186 1.382-1.982 2.562-1.778l10.446 1.806.255 4.487zM55.095 60.011c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.686 2.402-.032l9.347 9.348-2.433 2.433zM59.129 57.557c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.686 2.402-.032l8.557 8.557-2.433 2.434zM64.743 56.683c-.655-.654-.64-1.73.031-2.401.672-.672 1.747-.687 2.401-.032l6.188 6.187-2.433 2.434z"></path><path fill="#DEE2EB" d="m60.671 72.076 12.166-12.165 6.055 6.056c2.182 2.181 2.135 5.765-.105 8.004l-4.055 4.055c-2.24 2.24-5.823 2.287-8.005.106z"></path><path fill="#DEE2EB" d="m62.051 68.59.811-.811 1.053 1.053-.81.811zM65.295 65.346l.811-.811 1.053 1.053-.81.811zM69.066 62.628l.81-.81.527.526-.81.81zM74.732 78.027c-2.028 2.027-3.895 2.052-5.094 1.934l-.26-.53.138-.402 1.879-.825c.44.35 3.445-.286 3.337-.177M53.43 15.165c-.654.654-.64 1.73.032 2.401.672.672 1.747.686 2.401.032l7.768-7.768-2.433-2.433zM58.085 2.038a2.115 2.115 0 0 0-1.71 2.516c.234 1.186 1.382 1.982 2.562 1.778l10.446-1.806.255-4.487zM55.095 19.989c-.655.654-.64 1.73.031 2.401.672.672 1.747.686 2.402.032l9.347-9.348-2.433-2.433zM59.129 22.443c-.655.654-.64 1.73.031 2.401.672.672 1.747.686 2.402.032l8.557-8.558-2.433-2.433zM64.743 23.317c-.655.654-.64 1.73.031 2.401.672.672 1.747.687 2.401.032l6.188-6.187-2.433-2.433z"></path><path fill="#DEE2EB" d="m60.671 7.924 12.166 12.165 6.055-6.056c2.182-2.181 2.135-5.765-.105-8.004l-4.055-4.056c-2.24-2.24-5.823-2.286-8.005-.105z"></path><path fill="#DEE2EB" d="m62.051 11.41.811.811 1.053-1.053-.81-.811zM65.295 14.654l.811.811 1.053-1.053-.81-.811zM69.066 17.372l.81.81.527-.526-.81-.81zM74.732 1.973C72.704-.054 70.837-.079 69.638.04l-.26.53.138.402 1.879.825c.44-.35 3.445.286 3.337.177M27.568 64.835c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.686-2.401-.032l-7.768 7.768 2.433 2.433zM22.913 77.962a2.115 2.115 0 0 0 1.71-2.516c-.235-1.186-1.382-1.982-2.562-1.778l-10.446 1.806-.255 4.487zM25.903 60.011c.655-.654.64-1.73-.031-2.401-.672-.672-1.747-.686-2.402-.032l-9.347 9.348 2.433 2.433zM21.87 57.557c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.686-2.402-.032l-8.557 8.557 2.433 2.434zM16.256 56.683c.654-.654.64-1.73-.032-2.401-.672-.672-1.747-.687-2.402-.032l-6.187 6.187 2.433 2.434z"></path><path fill="#DEE2EB" d="M20.327 72.076 8.16 59.911l-6.055 6.056c-2.182 2.181-2.134 5.765.105 8.004l4.055 4.055c2.24 2.24 5.824 2.287 8.005.106z"></path><path fill="#DEE2EB" d="m18.947 68.59-.811-.811-1.053 1.053.81.811zM15.703 65.346l-.811-.811-1.053 1.053.81.811zM11.932 62.628l-.81-.81-.527.526.81.81zM6.266 78.027c2.028 2.027 3.896 2.052 5.094 1.934l.26-.53-.138-.402-1.879-.825c-.44.35-3.445-.286-3.337-.177"></path>', 10);
-const _hoisted_12 = [
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("path", {
+  fill: "#263238",
+  d: "M21.75 14.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 20a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 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_3 = [
   _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_12);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const consumption_tariffs = { render };
+const context_menu = { render };
 export {
-  consumption_tariffs as default,
+  context_menu as default,
   render
 };

package/dist/main.es98.js

@@ -2,27 +2,22 @@ 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",
+  width: "16",
+  height: "6",
   fill: "none"
 };
 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"
+  fill: "#B2B9C5",
+  d: "M16.5 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M21.75 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0M27 19.75a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
 }, 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"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const context_menu1 = { render };
+const context_menu_tabs = { render };
 export {
-  context_menu1 as default,
+  context_menu_tabs as default,
   render
 };

package/dist/main.es99.js

@@ -2,27 +2,23 @@ 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: "8",
-  height: "16",
-  fill: "none"
+  width: "800",
+  height: "800",
+  viewBox: "0 0 512 512"
 };
 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 25.25a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0"
+  fill: "none",
+  "fill-rule": "evenodd",
+  d: "M426.667 128v320h-256V128zM384 170.667H213.333v234.666H384zm-64-128v42.666H128v256H85.333V42.667z"
 }, null, -1);
-const _hoisted_3 = /* @__PURE__ */ createBaseVNode("path", {
-  fill: "#99DB0C",
-  d: "m22.94 18.96-3.78 3.73-2.1.25.25-2.1 3.73-3.78z"
-}, null, -1);
-const _hoisted_4 = [
-  _hoisted_2,
-  _hoisted_3
+const _hoisted_3 = [
+  _hoisted_2
 ];
 function render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_4);
+  return openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3);
 }
-const context_menu2 = { render };
+const copy = { render };
 export {
-  context_menu2 as default,
+  copy as default,
   render
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.22.23-EPDM-12618.9",
+  "version": "8.22.23-EPDM-14087.2",
   "files": [
     "dist",
     "src"

package/src/assets/svgIcons/house_dropper.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7808 0.416296C13.0817 -0.160599 12.0473 -0.0615408 11.4704 0.637553L9.97281 2.45234L9.69833 2.22583C9.48534 2.05007 9.1702 2.08025 8.99444 2.29324C8.81868 2.50623 8.84886 2.82137 9.06185 2.99713L9.33633 3.22363L7.11244 5.91858C7.07195 5.96765 7.0412 6.02398 7.02183 6.08457L6.0862 9.01132C6.02394 9.20607 6.08652 9.4191 6.24421 9.54922C6.40191 9.67935 6.62294 9.70037 6.80233 9.60228L9.4983 8.12817C9.55412 8.09766 9.60359 8.05677 9.64408 8.00771L11.868 5.31275L12.1424 5.53926C12.3554 5.71502 12.6706 5.68484 12.8463 5.47185C13.0221 5.25886 12.9919 4.94372 12.7789 4.76796L12.5044 4.54146L14.002 2.72668C14.5789 2.02758 14.4798 0.993191 13.7808 0.416296ZM7.94502 6.48079L10.1076 3.86011L11.0967 4.67628L8.93407 7.29696L7.41933 8.12519L7.94502 6.48079ZM10.7441 3.08881L11.7332 3.90498L13.2307 2.0902C13.4561 1.81708 13.4174 1.41297 13.1443 1.18759C12.8712 0.962212 12.467 1.00091 12.2417 1.27403L10.7441 3.08881ZM4.17261 7.95832C4.36097 7.79136 4.64409 7.79046 4.83352 7.95621L5.17075 8.25129C5.37857 8.43313 5.69445 8.41207 5.87629 8.20425C6.05813 7.99643 6.03707 7.68055 5.82925 7.49871L5.49202 7.20363C4.92373 6.70638 4.0744 6.7091 3.5093 7.20998L0.505039 9.87285C0.183852 10.1575 0 10.5662 0 10.9954V12.5C0 12.7761 0.223858 13 0.5 13C0.776142 13 1 12.7761 1 12.5V10.9954C1 10.8523 1.06128 10.7161 1.16835 10.6212L4.17261 7.95832ZM8.32925 9.68621C8.12143 9.50437 7.80555 9.52543 7.62371 9.73325C7.44187 9.94106 7.46293 10.2569 7.67075 10.4388L7.82925 10.5775C7.93776 10.6724 8 10.8096 8 10.9538V12.5C8 12.7761 8.22386 13 8.5 13C8.77614 13 9 12.7761 9 12.5V10.9538C9 10.5212 8.81328 10.1097 8.48776 9.8249L8.32925 9.68621Z" fill="black"/>
+</svg>

package/src/components/draggableCard/index.vue

@@ -169,7 +169,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 8px;
-    background: ${theme.colors.eturnityGrey};
+    background: ${theme.colors.transparentBlack2};
     word-break: break-word;
     overflow-wrap: break-word;
     white-space: normal;

package/src/components/errorMessage/index.vue

@@ -19,7 +19,7 @@
     background: ${(props) => props.theme.colors.red};
     padding: 10px;
     width: max-content;
-    max-width: 100%;
+    /* max-width: 100%; */
     min-width: min-content;
     font-size: 11px;
     font-weight: 400;

package/src/components/iconWrapper/index.vue

@@ -1,13 +1,14 @@
 <template>
   <Wrapper
     :background-color="backgroundColor"
+    :border-color="borderColor || iconColor"
     :border-radius="borderRadius"
-    :color="iconColor"
     :data-id="dataId"
     :data-qa-id="dataQaId"
     :disabled="disabled"
     :has-border="hasBorder"
     :hovered-background-color="hoveredBackgroundColor"
+    :hovered-border-color="hoveredBorderColor"
     :is-hovered="isHovered"
     :no-cursor="noCursor"
     :size="size"
@@ -51,22 +52,24 @@
   import styled from 'vue3-styled-components'
   import RCIcon from '../icon'
 
+  const LockContainer = styled.div`
+    position: absolute;
+    bottom: 6px;
+    right: 6px;
+  `
+
   const wrapperAttrs = {
-    color: String,
     isHovered: Boolean,
+    borderColor: String,
     borderRadius: String,
     disabled: Boolean,
     size: String,
     backgroundColor: String,
     hoveredBackgroundColor: String,
+    hoveredBorderColor: String,
     hasBorder: Boolean,
     noCursor: Boolean,
   }
-  const LockContainer = styled.div`
-    position: absolute;
-    bottom: 6px;
-    right: 6px;
-  `
   const Wrapper = styled('div', wrapperAttrs)`
     position: relative;
     display: inline-flex;
@@ -74,7 +77,8 @@
     height: ${(props) => props.size};
     border: ${(props) =>
       props.hasBorder
-        ? 'solid 1px ' + props.theme.colors[props.color] || props.color
+        ? 'solid 1px ' +
+          (props.theme.colors[props.borderColor] || props.borderColor)
         : ''};
     justify-content: center;
     align-items: center;
@@ -85,14 +89,32 @@
     border-radius: ${(props) => props.borderRadius};
     ${(props) =>
       props.isHovered
-        ? 'background-color:' +
-            props.theme.colors[props.hoveredBackgroundColor] ||
-          props.hoveredBackgroundColor
-        : ''};
+        ? `
+          background-color: ${
+            props.theme.colors[props.hoveredBackgroundColor] ??
+            props.hoveredBackgroundColor
+          };
+          ${
+            props.hoveredBorderColor
+              ? `border-color: ${
+                  props.theme.colors[props.hoveredBorderColor] ??
+                  props.hoveredBorderColor
+                };`
+              : ''
+          }
+        `
+        : ''}
     &:hover {
       background-color: ${(props) =>
-        props.theme.colors[props.hoveredBackgroundColor] ||
+        props.theme.colors[props.hoveredBackgroundColor] ??
         props.hoveredBackgroundColor};
+      ${(props) =>
+        props.hoveredBorderColor
+          ? `border-color: ${
+              props.theme.colors[props.hoveredBorderColor] ??
+              props.hoveredBorderColor
+            };`
+          : ''}
     }
   `
   const CaretIcon = styled.div`
@@ -112,45 +134,69 @@
     },
     props: {
       disabled: {
+        type: Boolean,
         required: false,
         default: false,
       },
       name: {
+        type: String,
         required: true,
       },
       iconColor: {
+        type: String,
         required: false,
         default: 'white',
       },
       hoveredIconColor: {
+        type: String,
         required: false,
+        default: null,
       },
       backgroundColor: {
+        type: String,
         required: false,
+        default: 'transparent',
       },
       hasBorder: {
+        type: Boolean,
         required: false,
+        default: false,
       },
       hoveredBackgroundColor: {
+        type: String,
         required: false,
         default: 'transparentWhite2',
       },
       size: {
+        type: String,
         required: false,
         default: '32px',
       },
       iconSize: {
+        type: String,
         required: false,
         default: '18px',
       },
       hasCaret: {
+        type: Boolean,
         required: false,
         default: false,
       },
       borderRadius: {
+        type: String,
         required: false,
         default: '6px',
       },
+      borderColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      hoveredBorderColor: {
+        type: String,
+        required: false,
+        default: null,
+      },
       dataId: {
         type: String,
         default: '',
@@ -160,22 +206,27 @@
         default: '',
       },
       isHovered: {
+        type: Boolean,
         required: false,
         default: false,
       },
       isStriked: {
+        type: Boolean,
         required: false,
         default: false,
       },
       isLoading: {
+        type: Boolean,
         required: false,
         default: false,
       },
       noCursor: {
+        type: Boolean,
         required: false,
         default: false,
       },
       hasLock: {
+        type: Boolean,
         required: false,
         default: false,
       },

package/src/components/inputs/inputText/index.vue

@@ -179,7 +179,9 @@
     position: relative;
     font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
     color: ${(props) =>
-      props.isDisabled
+      props.isError
+        ? props.theme.colors.grey6
+        : props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
         ? props.fontColor + ' !important'

package/src/components/tableDropdown/index.vue

@@ -78,13 +78,10 @@
               v-else
               class="inputField"
               :disabled="customInputDisabled"
-              :error-message="item.errorMessage"
               :font-color="showArchived ? theme.colors.red : 'black'"
-              :is-error="item.isError"
               :min-width="item.value.length + 'ch'"
-              :no-border="item.noBorder || item.noBorder === undefined"
+              :no-border="true"
               :value="item.value"
-              @input-blur="onCustomInputChange($event.trim())"
               @input-change="onCustomInputChange($event)"
             />
           </InputContainer>
@@ -165,7 +162,7 @@
             </OptionsItem>
           </OptionsWrapper>
           <CustomContainer
-            v-if="getCustomName.length && allowFreeInputs"
+            v-if="inputText.length && allowFreeInputs"
             @click="onCustomNameClick()"
           >
             <CustomName>{{ getCustomName }}</CustomName>
@@ -229,6 +226,7 @@
   const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
   const ComponentItem = styled('td', ItemAttrs)`
     padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
+    overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 0 !important;
     color: ${(props) =>
@@ -560,7 +558,7 @@
     },
     computed: {
       getCustomName() {
-        return this.inputText.trim()
+        return this.inputText
       },
       theme() {
         return theme
@@ -654,7 +652,7 @@
       },
       onCustomNameClick() {
         this.wasClicked = true
-        this.$emit('on-custom-input-name', this.getCustomName)
+        this.$emit('on-custom-input-name', this.inputText)
         this.$emit('toggle-dropdown-open', { close: true })
         this.inputText = ''
       },