@eturnity/eturnity_reusable_components 1.2.29-3d-master.1 → 1.2.29-EPDM-2942.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.29-3d-master.1",
+  "version": "1.2.29-EPDM-2942.2",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -2,70 +2,6 @@
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
       <br />
-
-      <iconWrapper name="bell"/>
-      <modal backdrop="dark" :isLoading="false" :isOpen="true">
-
-      <modal backdrop="dark" :isLoading="false" :isOpen="false">
-
-        <main-table titleText="My Table">
-          <thead>
-            <tr>
-              <th>Column 1</th>
-              <th>Column 2</th>
-              <th>Column 3</th>
-              <div />
-            </tr>
-          </thead>
-          <tbody>
-            <tr> -->
-      <!-- <table-dropdown
-              :colSpan="3"
-              :tableItems="getDropdownValues()"
-              @toggle-dropdown-open="toggleDropdownOpen()"
-              @item-selected="onItemSelected({ item: $event, index })"
-              :isOpen="isDropdownOpen()"
-              :optionItems="itemOptions"
-              :optionsDisplay="['display_name', 'company_item_number', 'model']"
-            /> -->
-      <!-- <td>Test</td>
-              <div class="icons-container">
-                <three-dots :options="listOptions" :isLoading="false" />
-              </div>
-            </tr>
-          </tbody>
-        </main-table>
-      </modal>
-      <row-container>
-        <div v-for="(item, index) in markersArray" :key="item.index">
-          <project-marker
-            :activeLanguage="'en-us'"
-            :markerData="item"
-            :isLimitedPartner="false"
-            :isGroupSupport="false"
-            :isEditable="true"
-            :gettext="gettext"
-            :date="'23.07.2022'"
-            @editHandler="consoleLog('edit index ' + index)"
-            @deleteHandler="consoleLog('delete id ' + item.id)"
-          />
-        </div>
-      </row-container>
-      <br />
-      <iconCollection />
-      <br />
-      <toggle
-        @on-toggle-change="onInputChange($event)"
-        :isChecked="inputValue"
-        label="My Label Text"
-        infoTextMessage="This is my test message"
-        infoTextAlign="right"
-        labelAlign="right"
-        :disabled="false"
-      />
-<<<<<<< HEAD
-      <br />
->>>>>>> EPDM-5448
       <input-number
         :value="inputValue"
         @input-change="inputValue = $event"
@@ -73,7 +9,11 @@
         slotSize="50%"
         ><InputAnnexContainer>
           <span>123m2</span>
-          <info-text size="10px" alignArrow="right" text="infoText ceci est le text"></info-text>
+          <info-text
+            size="10px"
+            alignArrow="right"
+            text="infoText ceci est le text"
+          ></info-text>
         </InputAnnexContainer>
       </input-number>
       <input-number
@@ -84,77 +24,61 @@
         :isError="true"
         ><InputAnnexContainer>
           <span>123m2</span>
-          <info-text :style="{'justify-self': 'end'}" size="12px" alignArrow="center" text="infoText ceci est le text">This is the tooltip text</info-text>
+          <info-text
+            :style="{ 'justify-self': 'end' }"
+            size="12px"
+            alignArrow="center"
+            text="infoText ceci est le text"
+            >This is the tooltip text</info-text
+          >
         </InputAnnexContainer>
       </input-number>
       <br />
-      
-  <p>InputText</p>
-   <input-text
-     placeholder="Company name"
-     :value="inputValue"
-     :isError="true"
-     errorMessage="This is my error message"
-     infoTextAlign="right" 
-     infoTextMessage="My info message"
-     label="Question 5"
-     alignItems="vertical"
-     inputWidth="250px"
-     minWidth="100px"
-   />
-   <br/>
-      <input-number
-        :value="num"
-        @input-change="num = $event"
-        unitName="t"
-        id="biebie"
-        test="koko"
-        @keydown="keydownHandler"
+      <toggle
+        @on-toggle-change="onInputChange($event)"
+        :isChecked="inputValue"
+        label="My Label Text"
+        infoTextMessage="This is my test message"
+        infoTextAlign="right"
+        labelAlign="right"
+        :disabled="false"
       />
-=======
       <br /> -->
       <!-- <iconCollection /> -->
       <input-text
-        placeholder="Enter distance"
+        placeholder="Company name"
         :value="inputValue"
         @input-change="onInputChange($event)"
         @input-blur="onInputBlur($event)"
         type="password"
       />
       <br />
-      <!-- <page-subtitle text="My Subtitle" infoText="My info Text" />
-      <spinner size="30px" />
-      <checkbox
-        label="Do you accept the Terms?"
-        :isChecked="true"
-        size="small"
-        :isDisabled="false"
-      /> -->
-      <!-- <external-button text="Click me!" minWidth="500px" /> -->
->>>>>>> master
+      <input-number
+        :value="num"
+        @input-change="num = $event"
+        unitName="t"
+        id="biebie"
+        test="koko"
+        @keydown="keydownHandler"
+      />
     </page-container>
   </ThemeProvider>
 </template>
 
 <script>
-import { ThemeProvider } from "vue-styled-components"
-import theme from "./assets/theme"
-import styled from "vue-styled-components"
-import MainTable from "@/components/tables/mainTable"
-import ThreeDots from "@/components/threeDots"
-import Toggle from "@/components/inputs/toggle"
-import InputNumber from "@/components/inputs/inputNumber"
-import Checkbox from "@/components/inputs/checkbox"
-import PageSubtitle from "@/components/pageSubtitle"
-import Spinner from "@/components/spinner"
-import ExternalButton from "@/components/buttons/externalButton"
-import InputText from "@/components/inputs/inputText"
+import { ThemeProvider } from 'vue-styled-components'
+import theme from './assets/theme'
+import styled from 'vue-styled-components'
+import InputNumber from '@/components/inputs/inputNumber'
+import InputText from '@/components/inputs/inputText'
+// import Checkbox from '@/components/inputs/checkbox'
+// import PageSubtitle from '@/components/pageSubtitle'
+// import Spinner from '@/components/spinner'
+// import ExternalButton from '@/components/buttons/externalButton'
+// import ProjectMarker from '@/components/projectMarker'
+// import iconCollection from '@/components/icon/iconCollection'
+// import Modal from '@/components/modals/modal'
 // import TableDropdown from "@/components/tableDropdown"
-const InputAnnexContainer = styled.div`
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 10px;
-`
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -171,17 +95,18 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    InputText,
-    ExternalButton,
-    iconWrapper,
-    Modal,
-    ProjectMarker,
-    iconCollection,
-    RowContainer
+    // MainTable,
+    // ThreeDots,
+    // Toggle,
+    InputText
+    // PageSubtitle,
+    // Spinner,
+    // Checkbox,
+    // ExternalButton,
+    // Modal,
+    // ProjectMarker,
+    // iconCollection
+    // RowContainer
   },
   data() {
     return {

package/src/assets/svgIcons/map_icon.svg

@@ -1,5 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 12L14 14V2L9 0L5 2L0 0V12L5 14L9 12ZM4.93167 12.3571L8.93167 10.3571L12.5 11.7845V3.01555L9.06834 1.64288L5.06834 3.64288L1.5 2.21555V10.9845L4.93167 12.3571Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 13V3H5.75V13H4.25Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 11V1H9.75V11H8.25Z" fill="white"/>
+<svg fill="none" height="14" viewbox="13 13 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.3333 15V24H22.1281L21.9394 24.0809L17.6667 25.912L14 24.3406V14.5165L17.2727 15.9191L17.4614 16H16.6667V25H18.6667V16H17.8719L18.0606 15.9191L22.3333 14.088L26 15.6594V25.4835L22.7273 24.0809L22.5386 24H23.3333V15H21.3333Z" stroke="#B2B9C5" stroke-width="2"></path>
 </svg>

package/src/assets/svgIcons/obstacle_tool.svg

@@ -1,9 +1,13 @@
-<svg fill="none" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-<defs>
-    <pattern id="pattern_Z6wSY" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(-45)">
-        <path d="M0 0 L 16 0 L 16 2 L 0 2 Z" fill="red" stroke-width="0"></path>
-    </pattern>
-</defs>
-<rect width="16" height="16" fill="url(#pattern_Z6wSY)" :opacity="1" />
+<svg fill="none" height="23" viewbox="6 12 34 23" width="34" xmlns="http://www.w3.org/2000/svg">
+<mask height="14" id="mask0_6458_86453" maskunits="userSpaceOnUse" style="mask-type:alpha" width="14" x="13" y="13">
+<rect fill="#FF5656" height="14" width="14" x="13" y="13"></rect>
+</mask>
+<g mask="url(#mask0_6458_86453)">
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 6.77783 21.6267)" width="21" x="6.77783" y="21.6267"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 8.97803 23.8269)" width="21" x="8.97803" y="23.8269"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 11.1777 26.0269)" width="21" x="11.1777" y="26.0269"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 13.3774 28.2266)" width="21" x="13.3774" y="28.2266"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 15.5771 30.4265)" width="21" x="15.5771" y="30.4265"></rect>
+<rect fill="#FF5656" height="1.55556" transform="rotate(-45 17.7773 32.6262)" width="21" x="17.7773" y="32.6262"></rect>
 </g>
 </svg>

package/src/assets/theme.js

@@ -18,10 +18,10 @@ const theme = {
     grey3: '#b2b9c5',
     grey4: '#dee2eb',
     grey5: '#fafafa',
+    grey6: '#555d61',
     green: '#99db0c',
-    transparentWhite1:'#ffffff32',
-    transparentBlack1:'#263238e6',
-    disabled: '#dfe1e1'
+    disabled: '#dfe1e1',
+    eturnityGrey: '#263238'
   },
   screen: {
     mobileSmall: '345px',

package/src/components/deleteIcon/index.vue

@@ -6,6 +6,7 @@
   >
     <icon-image
       v-if="isHovered && !isDisabled"
+      :hoverBg="hoverBg"
       :src="require('../../assets/icons/delete_icon.svg')"
     />
     <icon-image
@@ -27,9 +28,10 @@ const Wrapper = styled("div", wrapperAttrs)`
   cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
 `
 
-const IconImage = styled.img`
+const IconImageAttrs = { hoverBg: String }
+const IconImage = styled('img', IconImageAttrs)`
   &:hover {
-    background-color: ${(props) => props.theme.colors.grey5};
+    background-color: ${(props) => props.hoverBg ? props.hoverBg : props.theme.colors.grey5};
     border-radius: 4px;
   }
 `
@@ -45,6 +47,10 @@ export default {
       required: false,
       default: false,
     },
+    hoverBg: {
+      required: false,
+      default: '',
+    }
   },
   data() {
     return {

package/src/components/errorMessage/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-// import InfoText from "@eturnity/eturnity_reusable_components/src/components/infoText"
+// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
 //To use:
 // <error-message
 //     alignText="right" // default is left
@@ -22,12 +22,12 @@ const TextOverlay = styled.div`
   padding: 10px;
   width: max-content;
   max-width: 100%;
-  min-width: 200px;
+  min-width: min-content;
   font-size: 11px;
   font-weight: 400;
   border-radius: 4px;
   font-family: 'Lato-Bold', Arial;
-  z-index: 10;
+  z-index: 999;
   color: ${(props) => props.theme.colors.white};
 
   :before {
@@ -59,4 +59,4 @@ export default {
     return {}
   }
 }
-</script>
+</script>

package/src/components/icon/index.vue

@@ -1,7 +1,6 @@
 <template>
-  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
+  <wrapper :isDisabled="isDisabled" :size="size" :cursor="cursor">
     <icon-image
-      :disabled="disabled"
       :size="size"
       :color="color"
       :hoveredColor="hoveredColor"
@@ -9,7 +8,7 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
-  </Wrapper>  
+  </wrapper>
 </template>
 
 <script>
@@ -36,14 +35,14 @@ const Wrapper = styled('div', wrapperAttrs)`
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
   svg {
-    width: 100%;
-    height: 100%;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
   }
-  svg path {
+  svg > path {
     ${(props) =>
       props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
   }
-  &:hover > svg path {
+  &:hover > svg > path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
 `
@@ -51,11 +50,11 @@ const IconImage = styled('div', IconImageProps)`
 export default {
   name: 'icon',
   components: {
-    IconImage,
-    Wrapper
+    Wrapper,
+    IconImage
   },
   props: {
-    disabled: {
+    isDisabled: {
       required: false,
       default: false
     },
@@ -74,7 +73,7 @@ export default {
     },
     cursor: {
       required: false,
-      default: null
+      default: 'pointer'
     }
   },
   data() {

package/src/components/infoText/index.vue

@@ -19,8 +19,8 @@
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
         :iconSize="size"
-      ><slot />
-        {{ text }}
+        ><slot />
+        <span v-html="text"></span>
       </text-overlay>
     </icon-wrapper>
   </component-wrapper>
@@ -39,19 +39,27 @@ import theme from '../../assets/theme.js'
 import styled from 'vue-styled-components'
 import icon from '../icon'
 
-const textAttrs = { iconSize:String, borderColor: String, alignArrow:String, alignText: String, width:String,halfComputedTextInfoWidth:Number }
+const textAttrs = {
+  iconSize: String,
+  borderColor: String,
+  alignArrow: String,
+  alignText: String,
+  width: String,
+  halfComputedTextInfoWidth: Number
+}
 const TextOverlay = styled('div', textAttrs)`
   position: absolute;
-  top: ${(props) => 'calc('+props.iconSize+' + 15px)'};
-  ${(props) => (props.alignArrow === 'left' 
-    ? 'left: calc('+props.iconSize+' /2 - 18px)' 
-    : props.alignArrow === 'center' 
-    ? 'left: calc((-'+props.width+' + '+props.iconSize+') /2 + 2px)'
-    : 'right: calc('+props.iconSize+' /2 - 17px)')};
+  top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
+  ${(props) =>
+    props.alignArrow === 'left'
+      ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
+      : props.alignArrow === 'center'
+      ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
+      : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
   text-align: ${(props) => props.alignText};
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
-  width: ${(props) => props.width };
+  width: ${(props) => props.width};
   max-width: 400px;
   font-size: 13px;
   font-weight: 400;
@@ -64,14 +72,21 @@ const TextOverlay = styled('div', textAttrs)`
     background-color: ${(props) => props.theme.colors.black};
     position: absolute;
     top: 2px;
-    ${(props) => (props.alignArrow === 'left' ? 'left:40px;' : 
-    props.alignArrow=='center' ? 'left: calc(50% + 19px);' : 
-    'right:-13px;')};
+    ${(props) =>
+      props.alignArrow === 'left'
+        ? 'left:40px;'
+        : props.alignArrow == 'center'
+        ? 'left: calc(50% + 19px);'
+        : 'right:-13px;'};
     height: 8px;
     width: 8px;
     transform-origin: center center;
     transform: translate(-2em, -0.5em) rotate(45deg);
   }
+
+  span a {
+    color: #2cc0eb;
+  }
 `
 
 const iconAttrs = { isActive: Boolean, size: String, borderColor: String }
@@ -101,7 +116,7 @@ export default {
   },
   props: {
     text: {
-      required: false,
+      required: false
     },
     borderColor: {
       required: false,
@@ -115,17 +130,17 @@ export default {
       required: false,
       default: 'left' // "left" or "right"
     },
-    alignArrow:{
-      required:false,
-      default:'center'
+    alignArrow: {
+      required: false,
+      default: 'center'
     },
-    openTrigger:{
-      required:false,
+    openTrigger: {
+      required: false,
       default: 'onClick'
     },
-    width:{
-      required:false,
-      default:'165px'
+    width: {
+      required: false,
+      default: '165px'
     }
   },
   methods: {
@@ -147,7 +162,7 @@ export default {
   },
   data() {
     return {
-      showInfo: false,
+      showInfo: false
     }
   },
   computed: {
@@ -159,8 +174,8 @@ export default {
         : theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
-      return parseInt(this.width)/2;
+      return parseInt(this.width) / 2
     }
   }
 }
-</script>
+</script>