toggle-components-library 1.25.20 → 1.25.22

package/package.json

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

package/src/components/forms/ToggleDateRangePicker.vue

@@ -144,6 +144,7 @@ export default {
             },
             set: function(modifiedValue) {
                 if(modifiedValue.start) {
+
                     //if modifiedValue.start is present, set selectedDateToEmit.start to it. If there is already an end date stored, 
                     // set selectedDateToEmit.end to it, otherwise use the start date.
                     let isoDate = new Date(new Date(modifiedValue.start+' 00:00:00').toISOString())
@@ -166,9 +167,9 @@ export default {
 
     methods: {
         
-        clearDate()
-        {
-            this.displayValue = {start:'',end:''};
+        clearDate() {
+            let blankDate = {start: '', end: ''};
+            this.$emit('input', blankDate);
         },
 
         toggleDatePickerState(state,emit){

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/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;
                 }