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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.29-3d-master.1",
+  "version": "1.2.29-EPDM-5477",
   "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,60 @@
         :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 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 +94,17 @@ export default {
   components: {
     ThemeProvider,
     PageContainer,
-    InputNumber,
-    PageSubtitle,
-    Spinner,
-    Checkbox,
-    InputText,
-    ExternalButton,
-    iconWrapper,
-    Modal,
-    ProjectMarker,
-    iconCollection,
-    RowContainer
+    // MainTable,
+    // ThreeDots,
+    // Toggle,
+    InputText
+    // PageSubtitle,
+    // Spinner,
+    // Checkbox,
+    // Modal,
+    // ProjectMarker,
+    // iconCollection
+    // RowContainer
   },
   data() {
     return {

package/src/assets/svgIcons/dislike.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.40533 12.7951L9.87682 9.32359C10.1087 9.09174 10.2403 8.77216 10.2403 8.44005V2.18009C10.2403 1.4908 9.6763 0.92684 8.98702 0.92684H3.34741C2.84611 0.92684 2.39494 1.22762 2.19442 1.68505L0.151629 6.45366C-0.374734 7.69437 0.53387 9.07294 1.88111 9.07294H5.42153L4.82624 11.9429C4.76358 12.2562 4.85757 12.5758 5.08315 12.8013C5.45286 13.1648 6.04189 13.1648 6.40533 12.7951ZM12.7468 0.92684C12.0575 0.92684 11.4935 1.4908 11.4935 2.18009V7.19307C11.4935 7.88236 12.0575 8.44632 12.7468 8.44632C13.436 8.44632 14 7.88236 14 7.19307V2.18009C14 1.4908 13.436 0.92684 12.7468 0.92684Z"/>
+</svg>

package/src/assets/svgIcons/external_icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+	<path d="m12.6 14h-11.4c-0.7 0-1.3-0.6-1.3-1.3v-11.4c0-0.7 0.6-1.3 1.3-1.3h4.8v2h-3.1c-0.5 0-1 0.4-1 0.9v8.3c0 0.4 0.5 0.8 1 0.8h8.3c0.4 0 0.9-0.4 0.9-0.9v-3.1h2v4.7c-0.2 0.7-0.7 1.3-1.5 1.3z"/>
+	<path d="m7.9 0h6v6z"/>
+	<path d="m5.7 9.8l-1.4-1.5 7.1-7.1 1.4 1.4z"/>
+</svg>

package/src/assets/svgIcons/like.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.59467 1.20492L4.12318 4.67641C3.89133 4.90826 3.75974 5.22784 3.75974 5.55995V11.8199C3.75974 12.5092 4.3237 13.0732 5.01298 13.0732H10.6526C11.1539 13.0732 11.6051 12.7724 11.8056 12.3149L13.8484 7.54634C14.3747 6.30563 13.4661 4.92706 12.1189 4.92706H8.57847L9.17376 2.05713C9.23642 1.74381 9.14243 1.42424 8.91685 1.19865C8.54714 0.835211 7.95811 0.835211 7.59467 1.20492V1.20492ZM1.25325 13.0732C1.94253 13.0732 2.50649 12.5092 2.50649 11.8199V6.80693C2.50649 6.11764 1.94253 5.55368 1.25325 5.55368C0.563961 5.55368 0 6.11764 0 6.80693V11.8199C0 12.5092 0.563961 13.0732 1.25325 13.0732Z"/>
+</svg>

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

@@ -9,7 +9,7 @@ const theme = {
     gray1: '#666',
     mediumGray: '#d5d5d5',
     lightGray: '#f2f2f2',
-    white: '#fff',
+    white: '#ffffff',
     blue: '#48a2d0',
     red: '#ff5656',
     blue1: '#e4efff',
@@ -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/buttons/buttonIcon/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <page-container>
+    <button-wrapper
+      :isDisabled="isDisabled"
+      :minWidth="minWidth"
+      :customColor="customColor"
+      :height="height"
+    >
+      <icon-container :width="height">
+        <icon
+            v-if="!!iconName"
+            :name="iconName"
+            :color="fontColor ? fontColor : theme.colors.white"
+            size="14px"
+        />
+      </icon-container>
+      <button-container :fontSize="fontSize" :fontColor="fontColor">{{ text }}</button-container>
+    </button-wrapper>
+  </page-container>
+</template>
+
+<script>
+// import buttonIcon from "@eturnity/eturnity_reusable_components/src/components/buttons/buttonIcon"
+// <button-icon
+//   :isDisabled="true"
+//   text="Click Me"
+//   minWidth="300px"
+//   customColor="#000"
+//   iconName="external_icon"
+//   fontColor="white"
+//   fontSize="12px"
+//   height="24px"
+// />
+
+import Icon from "../../icon"
+import styled from "vue-styled-components"
+import Theme from "@/assets/theme";
+
+const PageContainer = styled.div``
+
+const ButtonAttrs = {
+  isDisabled: Boolean,
+  minWidth: String,
+  customColor: String,
+  height: String
+}
+const ButtonWrapper = styled("div", ButtonAttrs)`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  background-color: ${(props) =>
+    props.isDisabled
+      ? props.theme.colors.disabled
+      : props.customColor
+      ? props.customColor
+      : props.theme.colors.yellow};
+  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
+  user-select: none;
+  border-radius: 4px;
+  overflow: hidden;
+  min-width: ${(props) => (props.minWidth ? props.minWidth : "initial")};
+  height: ${(props) => props.height};
+
+  &:hover {
+    opacity: ${(props) => (props.isDisabled ? "1" : "0.8")};
+  }
+
+  &:active {
+    opacity: 1;
+  }
+`
+
+const ButtonContainerAttrs = {
+  fontSize: String,
+  fontColor: String
+}
+const ButtonContainer = styled('div', ButtonContainerAttrs)`
+  font-size: ${(props) => props.fontSize};
+  color: ${(props) => props.fontColor ? props.fontColor : props.theme.colors.white};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 15px;
+`
+
+const IconContainerAttrs = {
+  width: String
+}
+const IconContainer = styled('div', IconContainerAttrs)`
+  display: grid;
+  align-items: center;
+  justify-items: center;
+  width: ${(props) => props.width};
+  background: ${(props) => props.theme.colors.white + '1a'};
+`
+
+export default {
+  name: "button-icon",
+  components: {
+    PageContainer,
+    ButtonContainer,
+    ButtonWrapper,
+    IconContainer,
+    Icon
+  },
+  props: {
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    text: {
+      required: true
+    },
+    minWidth: {
+      required: false,
+      default: null
+    },
+    customColor: {
+      required: false,
+      default: null
+    },
+    iconName: {
+      required: true
+    },
+    fontColor: {
+      required: false,
+      default: null
+    },
+    fontSize: {
+      required: false,
+      default: '13px'
+    },
+    height: {
+      required: false,
+      default: '30px'
+    }
+  },
+  data () {
+    return {
+      theme: Theme
+    }
+  }
+}
+</script>

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>