toggle-components-library 1.25.19 → 1.25.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.25.19",
+  "version": "1.25.21",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/forms/ToggleInputCheckbox.vue

@@ -5,7 +5,10 @@
             <div>
                 <span class="toggle-input-checkbox-check-element "></span>
                 <span  :class="[ 'toggle-input-checkbox-label', label_style ]" >{{label}}</span>
-            </div>
+               
+                <img v-if="iconUrl" v-bind:src="iconUrl" :alt="iconAlt" class="toggle-input-checkbox-icon"/>
+              </div> 
+            
         </label>
 
 </template>
@@ -17,6 +20,13 @@ import { mixins } from '../mixins/mixins'
 export default {
     mixins:[mixins],
     props: {
+        iconUrl: {
+      type: String,
+    },
+    
+    iconAlt: {
+      type: String,
+    },
         value: {
             type: [Boolean, Array]
         },

package/src/components/forms/ToggleInputLabelLeft.vue

@@ -1,13 +1,23 @@
 <template>
   <div class="toggle-formbuilder-input-outer-container">
     <div class="toggle-formbuilder-input-container">
-      <div class="toggle-formbuilder-input-label">
+      <div class="toggle-formbuilder-input-label" :class="labelClasses">
         <p v-if="label" class="toggle-formbuilder-label-text">{{label}}</p>
       </div>
+
+      <!-- 'Normal' input with label and single input -->
       <div v-if="!multipleInputs" class="inner-input-container">
         <slot ></slot>
         <ToggleInfoText v-if="infoText" class="info">{{infoText}}</ToggleInfoText>
       </div>
+
+      <!-- Label with multiple inputs, with the inputs aligned vertically eg. multiple email addresses -->
+      <div v-else-if="multipleInputs && vertical" class="multiple-inputs-vertical-container">
+        <slot ></slot>
+        <ToggleInfoText v-if="infoText" class="info">{{infoText}}</ToggleInfoText>
+      </div>
+
+      <!-- Label with multiple inputs, with the inputs aligned horizontally eg. redirect url which needs two inputs -->
       <div v-else class="inner-input-container">
         <div class="multiple-inputs-container">
           <slot></slot>
@@ -41,6 +51,19 @@ export default {
       default: false,
       required: false,
       description: "Set to true if more than one input is required per line. Inputs will be rendered horizontally"
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+      required: false,
+      description: "When passed with multipleInputs set to true, stacks multiple inputs vertically instead of horizontally"
+    }
+  },
+  computed: {
+    labelClasses() {
+      return {
+        'toggle-formbuilder-input-label-align-top': this.multipleInputs && this.vertical
+      }
     }
   }
 
@@ -70,6 +93,10 @@ export default {
     margin-bottom: 20px;
   }
 
+  .toggle-formbuilder-input-label-align-top {
+    justify-content: flex-start;
+  }
+
   .toggle-formbuilder-label-text {
     font-size: 16px;
     color: #202C38;
@@ -87,4 +114,10 @@ export default {
     flex-direction: row;
     column-gap: 0.875rem;
   }
+
+  .multiple-inputs-vertical-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 </style>

package/src/components/forms/ToggleInputSelect.vue

@@ -1,6 +1,6 @@
 <template>
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'ToggleInputSelect' " 
@@ -15,6 +15,7 @@
             v-model="inputVal" 
             :autocomplete="autocomplete ? 'on' : 'off' "
             :required="required"
+            :disabled="disabled"
             :style="`${fontFamily ? 'font-family: ' + fontFamily : ''}`"
             >
                 <option value="">Select an option</option>
@@ -77,6 +78,11 @@ export default {
         fontFamily: {
             type: String,
             required: false
+        },
+        disabled: {
+          type: Boolean,
+          required: false,
+          default: false
         }
     },
 

package/src/sass/includes/_as_inputs.scss

@@ -301,6 +301,10 @@
     .toggle-input-radio-button-img{
         margin-left: 1rem;
     }
+    .toggle-input-checkbox-icon {
+        height: 2rem;
+        margin-left: auto ;
+    }
 
 }
 

package/src/sass/includes/_as_threedots.scss

@@ -91,7 +91,7 @@
                 height: 1px;
                 margin: 10px;
             }
-            &:nth-of-type(2){
+            &:nth-of-type(1){
                 hr{
                     display: none;
                 }