@eturnity/eturnity_reusable_components 6.34.1 → 6.37.0-3d-qa-6.38.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.34.1",
+  "version": "6.37.0-3d-qa-6.38.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -60,4 +60,4 @@
   "author": "Aaron Enser",
   "license": "ISC",
   "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+}

package/src/App.vue

@@ -60,7 +60,14 @@
             fontColor="black"
             :disabled="false"
           />
-
+          <icon
+            name="opacity"
+            color="red"
+            hoveredColor="blue"
+            size="60px"
+            cursor="default"
+            isStriked = "true"
+          />
           <Select
             :value="value"
             selectWidth="100%"
@@ -104,6 +111,7 @@ import Option from '@/components/inputs/select/option'
 import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
+import icon from '@/components/icon'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -127,7 +135,8 @@ export default {
     SwitchField,
     iconCollection,
     dropdownComponent,
-    videoThumbnail
+    videoThumbnail,
+    icon
   },
   data() {
     return {

package/src/assets/svgIcons/opacity.svg

@@ -1 +1 @@
-<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z"  /></svg>
+<svg class="svg-icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M753.493333 341.12L512 100.053333l-241.493333 241.066667C203.946667 407.68 170.666667 496.426667 170.666667 581.76s33.28 175.36 99.84 241.92a340.906667 340.906667 0 0 0 482.986666 0C820.053333 757.12 853.333333 667.093333 853.333333 581.76s-33.28-174.08-99.84-240.64zM256 597.333333c0.426667-85.333333 26.453333-139.733333 75.093333-187.946666L512 224.64l180.906667 186.666667C741.546667 459.733333 767.573333 512 768 597.333333H256z"  /></svg>

package/src/components/icon/index.vue

@@ -9,6 +9,7 @@
         require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
       "
     ></icon-image>
+    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
   </Wrapper>
 </template>
 
@@ -21,6 +22,7 @@
 //   hoveredColor="blue"
 //   size="60px" by default, this is 30px
 //   cursor="default"
+//   isStriked = "true"
 // />
 
 import styled from 'vue-styled-components'
@@ -28,6 +30,7 @@ import styled from 'vue-styled-components'
 const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
 const Wrapper = styled('div', wrapperAttrs)`
   display: flex;
+  position:relative
   align-content: center;
   justify-content: center;
   width: ${(props) => props.size};
@@ -37,6 +40,22 @@ const Wrapper = styled('div', wrapperAttrs)`
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : props.cursor)};
   line-height: 0;
 `
+const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
+const strikedLine = styled('div', strikedAttrs)`
+  display: flex;
+  position: absolute;
+  bottom:0;
+  left:0;
+  align-content: center;
+  justify-content: center;
+  width: 143%;
+  height:8%;
+  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
+  min-height: 0;
+  line-height: 0;
+  transform-origin: 0% 100%;
+  transform: rotate(-45deg);
+`
 const IconImageProps = { color: String, hoveredColor: String, size: String }
 const IconImage = styled('div', IconImageProps)`
   svg {
@@ -50,13 +69,17 @@ const IconImage = styled('div', IconImageProps)`
   &:hover > svg path {
     ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
+  &:hover + div {
+    background-color: ${(props)=>props.hoveredColor};
+  }
 `
 
 export default {
   name: 'icon',
   components: {
     IconImage,
-    Wrapper
+    Wrapper,
+    strikedLine
   },
   props: {
     disabled: {
@@ -79,6 +102,10 @@ export default {
     cursor: {
       required: false,
       default: null
+    },
+    isStriked: {
+      required: false,
+      default: false
     }
   },
   data() {

package/src/components/iconWrapper/index.vue

@@ -4,6 +4,8 @@
     :size="size" 
     :backgroundColor="backgroundColor" 
     :borderRadius="borderRadius"
+    :hasBorder="hasBorder"
+    :color="iconColor"
     :hoveredBackgroundColor="hoveredBackgroundColor"
     :isHovered="isHovered"
     >
@@ -11,7 +13,10 @@
             :size="iconSize" 
             :name="name" 
             :color="iconColor" 
-            :hoveredColor="hoveredIconColor" />
+            :hoveredColor="hoveredIconColor" 
+            :isStriked="isStriked"
+            />
+            
         <caret v-if="hasCaret">
           <iconWrapper :disabled="disabled" 
             size="10px" 
@@ -36,12 +41,13 @@
   
   import styled from 'vue-styled-components'
   import icon from '../icon'
-  const wrapperAttrs = { isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String }
+  const wrapperAttrs = { color: String, isHovered:Boolean,borderRadius:String,disabled: Boolean, size: String,backgroundColor:String,hoveredBackgroundColor:String,hasBorder:Boolean }
   const Wrapper = styled('div', wrapperAttrs)`
     position:relative;
     display: inline-flex;
     width: ${(props) => props.size};
     height: ${(props) => props.size};
+    border: ${(props) => props.hasBorder? 'solid 1px '+props.theme.colors[props.color] || props.color : ""};
     justify-content:center;
     align-items:center;
     cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
@@ -84,6 +90,9 @@
       backgroundColor: {
         required: false,
       },
+      hasBorder: {
+        required: false,
+      },
       hoveredBackgroundColor: {
         required: false,
         default:"transparentWhite1"
@@ -102,11 +111,15 @@
       },
       borderRadius:{
         required:false,
-        default:'6px'
+        default:'4px'
       },
       isHovered:{
         required:false,
         default:false
+      },
+      isStriked:{
+        required:false,
+        default:false
       }
     },
     data() {

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

@@ -432,6 +432,10 @@ export default {
     labelFontColor: {
       required: false,
       default: 'eturnityGrey'
+    },
+    focus:{
+      required: false,
+      default: false
     }
   },
   computed: {
@@ -544,7 +548,7 @@ export default {
       }
       this.isFocused = true
       this.$nextTick(() => {
-        this.$refs.inputField1.$el.select()
+        this.$refs.inputField1.$el.focus()
       })
       this.$emit('input-focus')
     },
@@ -630,7 +634,17 @@ export default {
       })
     }
   },
+  mounted(){
+    if(this.focus){
+      this.focusInput()
+    }
+  },
   watch: {
+    focus(value){
+      if(value){
+        this.focusInput()
+      }
+    },
     clearInput: function (value) {
       if (value) {
         // If the value is typed, then we should clear the textInput on Continue

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

@@ -76,7 +76,9 @@
 import styled from 'vue-styled-components'
 import InfoText from '../../infoText'
 import theme from '../../../assets/theme'
-const Container = styled.div``
+const Container = styled.div`
+  width:100%
+`
 
 const flexAttrs = {
   label: String,
@@ -92,6 +94,7 @@ const FlexWrapper = styled('div', flexAttrs)`
   cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
   grid-template-columns: ${(props) =>
     props.alignItems === 'vertical' || !props.label ? '1fr' : 'auto 1fr'};
+  width:100%;
 `
 
 const toggleAttrs = {
@@ -117,6 +120,7 @@ const SwitchWrapper = styled('span', toggleAttrs)`
       : props.size === 'small'
       ? '16px'
       : '24px'};
+  width:100%;
 `
 const optionAttrs = {
   isActive: Boolean,
@@ -139,9 +143,10 @@ const switchOption = styled('div', optionAttrs)`
   line-height: 1;
   text-align: center;
   padding: 10px;
-  margin-right: -1px;
+  margin-right: 0;
   transition: all 0.1s ease-in-out;
   overflow: hidden;
+  width:100%;
   & :hover {
     cursor: pointer;
   }

package/src/helpers/numberConverter.js

@@ -20,9 +20,7 @@ export const stringToNumber = ({
     selectedLang === 'de-be' ||
     selectedLang === 'es-es' ||
     selectedLang === 'de' ||
-    selectedLang === 'de-at' ||
     selectedLang === 'it' ||
-    selectedLang === 'it-it' ||
     selectedLang === 'nl-nl' ||
     selectedLang === 'nl-be'
   ) {

package/src/helpers/translateLang.js

@@ -8,8 +8,6 @@ export const translateLang = (lang) => {
     return 'english_uk'
   } else if (lang === 'de' || lang === 'de-de') {
     return 'german'
-  } else if (lang === 'de-at') {
-    return 'german_at'
   } else if (lang === 'de-ch') {
     return 'german_ch'
   } else if (lang === 'de-lu') {
@@ -36,10 +34,8 @@ export const translateLang = (lang) => {
     return 'swedish'
   } else if (lang === 'no-no' || lang === 'nb-no') {
     return 'norwegian'
-  } else if (lang === 'nl-nl') {
-    return 'dutch_nl'
-  } else if (lang === 'nl-be') {
-    return 'dutch_be'
+  } else if (lang === 'nl-nl' || lang === 'nl') {
+    return 'nl-nl'
   } else if (lang === 'cs') {
     return 'czech'
   } else if (lang === 'fi-fi') {