toggle-components-library 1.36.1 → 1.36.3-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.1",
+    "version": "1.36.3-beta.0",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",
@@ -38,6 +38,7 @@
         "vue-moment": "^4.1.0",
         "vue-multiselect": "^2.0.8",
         "vue-router": "^3.6.4",
+        "vue2-datepicker": "^3.11.1",
         "vue2-dropzone": "^3.6.0",
         "vuedraggable": "^2.24.3",
         "webfontloader": "^1.6.28"

package/src/assets/icons/airship-feedback-hover.svg

@@ -0,0 +1,10 @@
+<svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
+    <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#477ef6"/>
+  </g>
+</svg>

package/src/assets/icons/airship-feedback.svg

@@ -0,0 +1,10 @@
+<svg id="Group_10" data-name="Group 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="624.048" height="499" viewBox="0 0 624.048 499">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_25" data-name="Rectangle 25" width="624.048" height="499" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_9" data-name="Group 9" clip-path="url(#clip-path)">
+    <path id="Path_3" data-name="Path 3" d="M617.3,465.069l-.384-.318c-.385-.317-.9-.738-1.674-1.49-1.419-1.279-3.616-3.309-6.36-6.112a225.664,225.664,0,0,1-20.162-23.534c-.136-.182-.271-.367-.406-.55-22.957-31.214-26.261-72.555-9.486-107.484,16.327-34,23.783-71.208,20.13-109.472C586.148,81.9,441.91-14.07,276.747,1.694S-11.9,138.983.914,273.192,157.963,503.371,323.126,487.608a364.7,364.7,0,0,0,89.545-20,77.522,77.522,0,0,1,58.556,2.224,367.136,367.136,0,0,0,38.334,14.95c29.035,9.42,63.567,16.569,96.922,13.5A19.281,19.281,0,0,0,622.561,486.8a18.785,18.785,0,0,0-5.261-21.731m-446.79-153.1A50.455,50.455,0,1,1,216.243,257.2a50.456,50.456,0,0,1-45.733,54.772m138.931-12.493a50.454,50.454,0,1,1,45.734-54.77,50.454,50.454,0,0,1-45.734,54.77m134.991-12.137a50.455,50.455,0,1,1,45.733-54.769,50.455,50.455,0,0,1-45.733,54.769" transform="translate(0 0)" fill="#354b64"/>
+  </g>
+</svg>

package/src/components/buttons/ToggleMetricsButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <button :class="['toggle-metrics-button', buttonStyle]" @click="click">
-        <div :class="icon"></div>
+    <button :class="['toggle-metrics-button', buttonStyle, 'toggle-metrics-button-' + size, {'toggle-metrics-button-disabled': disabled }]" :style="styles" @click="click" :disabled="disabled">
+        <div :class="icon" :style="styles ? 'background-color:' + styles.color : ''"></div>
         <slot>{{buttonText}}</slot>
     </button>
 </template>
@@ -19,8 +19,27 @@
         },
         icon: {
           type: String,
-          required: true,
+          required: false,
+          validator: function(value) {
+            return ["heatmap-icon", "email-icon", "contacts-icon"].indexOf(value) !== -1;
+          }
         },
+        size: {
+          type: String,
+          default: "medium",
+          required: false,
+          validator: function(value) {
+            return ["small", "medium", "large"].indexOf(value) !== -1;
+          }
+        },
+        styles: {
+          type: Object,
+          required: false,
+        },
+        disabled: {
+          type: Boolean,
+          default: false
+        }
       },
       methods: {
         click() {

package/src/components/cards/ToggleCommentCard.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="toggle-comment-card">
+    <div class="toggle-comment-card-info" :style="{ backgroundColor: cardColor }">
+      <div class="toggle-comment-card-text">
+        <p>"{{ comment }}"</p>
+      </div>
+      <div class="toggle-comment-card-name">
+        <slot name="button_contacts"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    cardIndex: {
+      type: Number,
+      required: true,
+    },
+    totalCards: {
+      type: Number,
+      required: true,
+    },
+    comment: {
+      type: String,
+      required: true,
+    }
+  },
+  computed: {
+    cardColor() {
+      // adjust colour palette below to change the Reward Cards colors
+      const colorPalette = [
+        "#2c7da0",
+        "#f3c570",
+        "#8bbcbe",
+        "#a0a789",
+        "#cbae78",
+        "#a284b6",
+        "#d39999",
+        "#9b7361",
+        "#64aaa8",
+        "#799194",
+      ];
+
+      // pick random number to return random index of colourPalette
+      const paletteOrder = (this.cardIndex + 1) % colorPalette.length
+      const index = (paletteOrder === 0 ? colorPalette.length : paletteOrder) -1
+      return colorPalette[index];
+    }
+  }
+};
+</script>

package/src/components/carousel/ToggleCarousel.vue

@@ -1,28 +1,34 @@
 <template>
-    <swiper
-        ref="swiper"
-        class="swiper toggle-carousel"
-        :class="[
-            carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
-            carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
-        ]"
-        :options="carouselOptions"
-        @slideChangeTransitionStart="onSlideTransition"
-    >
-        <slot></slot>
-        <div v-if="carouselPrev && slidesLength > 1" 
+    <div class="toggle-carousel-wrapper">
+        <swiper
+            ref="swiper"
+            class="swiper toggle-carousel"
+            :class="[
+                carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
+                carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
+            ]"
+            :options="carouselOptions"
+            @slideChangeTransitionStart="onSlideTransition"
+        >
+            <slot></slot>
+        </swiper>
+        <div v-if="carouselPrev && shouldShowArrows"
             class="toggle-carousel-button toggle-carousel-button--prev"
-            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': prevDisabled}]"
+            :class="['toggle-carousel-button--' + carouselNavPosition,
+            {'toggle-carousel-button--disabled': prevDisabled},
+            {'toggle-carousel-button--comments-left-arrow': carouselStyle == 'comments'}]"
             @click="slidePrev"  
             slot="button-prev"
         ></div>
-        <div v-if="carouselNext && slidesLength > 1" 
+        <div v-if="carouselNext && shouldShowArrows"
             class="toggle-carousel-button toggle-carousel-button--next"
-            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': nextDisabled}]"
+            :class="['toggle-carousel-button--' + carouselNavPosition,
+            {'toggle-carousel-button--disabled': nextDisabled},
+            {'toggle-carousel-button--comments-right-arrow': carouselStyle == 'comments'}]"
             @click="$refs.swiper.swiperInstance.slideNext()"  
             slot="button-next"
         ></div>
-    </swiper>
+    </div>
 </template>
 
 <script>
@@ -38,6 +44,7 @@ export default {
             prevDisabled: false,
             nextDisabled: false,
             slidesLength: 0,
+            slidesShownPerView: 0,
             isEnd: false
         };
     },
@@ -98,6 +105,7 @@ export default {
         },
         refreshCarousel(){
             this.slidesLength = this.$refs.swiper.swiperInstance.slides.length;
+            this.slidesShownPerView = this.$refs.swiper.swiperInstance.slidesPerViewDynamic()
             this.onSlideTransition();
         },
         onSlideTransition(){
@@ -121,6 +129,11 @@ export default {
                 this.nextDisabled = false;
             }
         }
+    },
+    computed: {
+      shouldShowArrows() {
+        return this.slidesLength > this.slidesShownPerView
+      }
     }
 }
 </script>

package/src/components/carousel/ToggleCarouselSlide.vue

@@ -1,5 +1,5 @@
 <template>
-    <swiper-slide class="toggle-carousel-slide" :style="'width:' + slideWidth + '; height:' + slideHeight">
+    <swiper-slide class="toggle-carousel-slide">
         <slot></slot>
     </swiper-slide>
 </template>

package/src/components/forms/ToggleDatePicker.vue

@@ -1,167 +1,258 @@
 <template>
 
-<div class="toggle-date-container" :class="['datepicker-trigger',{'toggle-input-is-invalid':isInvalid }]">
-
-
-        <label class="toggle-input-label">{{label}}</label>
-
-        <div class="toggle-date-input-container">
-            <div class="toggle-date-input-calendar-icon">
-                <input type="text" class="toggle-input"  :name="name" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()">
-            </div>
-            <button type="button" class="toggle-clear" v-on:click="clearDate" v-if="displayValue"></button>
-        </div>
-
-        <AirbnbStyleDatepicker
-            :trigger-element-id="'toggle-date-input'+_uid"
-            :trigger="datePickerOpen"
-            :mode="'single'"
-            :date-one="displayValue"
-            @date-one-selected="val => { displayValue = val}"
-            @closed="toggleDatePickerState(false)"
-            @cancelled="toggleDatePickerState(false)"
-            :monthsToShow="1"
-            :showShortcutsMenuTrigger="false"
-        />
-        <label
-            class="toggle-input-label-error" 
-            v-if="isInvalid"
-            :for="name ? name : 'ToggleInputText' "
-        >
-            {{ errorMessage }}
-        </label>
+  <div class="toggle-date-container" :class="[{'visible': show}, 'datepicker-trigger',{'toggle-input-is-invalid':isInvalid }, { 'toggle-input-is-disabled': disabled }]">
 
+    <label class="toggle-input-label">{{label}}</label>
+
+    <div :class="['toggle-date-input-container', 'toggle-date-input-container-' + size, {'toggle-date-input-disabled': disabled} ]">
+      <date-picker v-model="inputVal" prefix-class="toggle-mxdatepicker" :formatter="momentFormat" :range="range" :type="type" :disabled="disabled">
+      </date-picker>
     </div>
+
+    <label
+        class="toggle-input-label-error"
+        v-if="isInvalid"
+        :for="name ? name : 'ToggleInputText' "
+    >
+      {{ errorMessage }}
+    </label>
+
+  </div>
 </template>
 
 <script>
 
-    import Vue from "vue";
-    import { mixins } from '../mixins/mixins'
-    import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'
-    import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker';
-    import variables from '../../sass/includes/_as_variables.scss';
-  
-    Vue.use(AirbnbStyleDatepicker, {
-        colors: {
-            selected     : variables.toggleblue,
-            inRange      : variables.togglelightblue,
-            selectedText : variables.togglewhite,
-            text         : variables.toggleinputcolour,
-            inRangeBorder: variables.togglewhite,
-            disabled     : variables.togglewhite,
-        },
-        texts: {
-            apply: 'Done'
-        },
-    });
+import { mixins } from '../mixins/mixins'
+import moment from 'moment';
+import DatePicker from 'vue2-datepicker';
 
 export default {
-    mixins:[mixins],
-    components:{},
-    props: {
-        value: {
-            type: [Boolean,Date]
-        },
-        
-        name: {
-            type: String,
-            default: "ToggleInputText"
-        },
-        label: {
-            type: String,
-            required: false
-        },
-        placeholder: {
-            type: String,
-            required: false
-        },
-        autocomplete: {
-            type: Boolean,
-            default: true
-        },
-        size: {
-            type: String,
-            validator: function (value) {
-                return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
-            }
-        },
-        required: {
-            type: Boolean,
-            default: false
-        },
-        isInvalid: {
-            type: Boolean,
-            default: false
-        },
-        errorMessage: {
-            type: String,
-            required: false
-        },
-        maxLength:{
-            type: Number,
-            required:false
-        }
+  mixins:[mixins],
+  components:{
+    DatePicker
+  },
+  props: {
+    set_value: {
+      type: [Boolean,Date,Object]
     },
-
-    created : function(){
+    value: {},
+    // datepicker mode, see: https://www.npmjs.com/package/vue2-datepicker#props
+    type: {
+      type: String,
+      validator: function (value) {
+        return ['date', 'datetime', 'year', 'month', 'time', 'week'].indexOf(value) !== -1
+      },
+      default: "date"
     },
-    data : function(){
-        return {
-            datePickerOpen: false,
-        };
+    // singular date or range between 2 dates
+    range: {
+      type: Boolean,
+      default: false
     },
-    watch :{
-
-        datePickerOpen(newVal){
-            let state = newVal ? 'open' : 'closed';
-            this.$emit('state', state);
-        }
-       
+    name: {
+      type: String,
+      default: "ToggleInputText"
     },
-    computed: {
-        date() {
-            return this.dateRangeView(this.displayValue)
-        },
-
-        // plugin only accepts MM/DD/YYYY, so change this so that it excepts and outputs JS dates
-        displayValue: {
-            get: function() {
-                return this.formatDate(this.value)
-            },
-            set: function(modifiedValue) {
-                if(modifiedValue){
-                    modifiedValue = new Date(new Date(modifiedValue+' 00:00:00').toISOString());
-                }
-                else modifiedValue = false;
-                this.$emit('input', modifiedValue);
-            }
-        }
+    label: {
+      type: String,
+      required: false
     },
-    methods: {
-        
-        clearDate()
-        {
-            this.displayValue = '';
-        },
+    placeholder: {
+      type: String,
+      required: false
+    },
+    autocomplete: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['small', 'medium'].indexOf(value) !== -1
+      },
+      default: 'medium'
+    },
+    displayFormat: {
+        type: String,
+        default: 'DD/MM/Y'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false
+    },
+    errorMessage: {
+      type: String,
+      required: false
+    },
+    maxLength:{
+      type: Number,
+      required:false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // in toggle-table context, if search bar height expand transition has finished
+    searchIsOpen: {
+      type: Boolean,
+      required: false,
+      default: null
+    }
+  },
+  data : function(){
+    return {
+      show: false,
 
-        toggleDatePickerState(state){
-            this.$nextTick( () => {
-                if(typeof state === 'boolean')
-                    this.datePickerOpen = state;
-                else this.datePickerOpen = !this.datePickerOpen;
-            });
+      momentFormat: {
+        //[optional] Date to String
+        stringify: (date) => {
+          return date ? moment(date).format(this.displayFormat) : ''
         },
+        //[optional]  String to Date
+        parse: (value) => {
+          return value ? moment(value, this.displayFormat).toDate() : null
+        }
+      }
+    };
+  },
+  created : function(){
+    // in table mode, has search bar expand transition finished?
+    if(this.searchIsOpen === null || this.searchIsOpen){
+      this.show = true;
+    }
+
+  },
+  watch :{
+    // search bar expand transition / if in table context
+    searchIsOpen(new_value){
+      if(new_value){
+        this.show = true;
+      }
     }
+  },
+  computed: {
+
+    inputVal: {
+      get: function (){
+        return this.convertRangeObject(this.value);
+      },
+      set: function (value){
+        this.$emit('input', this.convertRangeObject(value));
+      }
+    },
+
+  },
+  methods: {
+    // convert singular date to range. Plugin uses array with 2 values / parents in Toggle dash expect object with start & end keys
+    convertRangeObject(input)
+    {
+      if(!this.range){
+        return input
+      }
+      return Array.isArray(input) ? {
+        start: input[0],
+        end: input[1]
+      } : [
+        input.start,
+        input.end
+      ];
+    },
+  }
 }
 
 
 </script>
 
+<style scoped>
+.toggle-date-container {
+  display: none;
+  &.visible {
+    display: block;
+  }
+}
+</style>
+
 <style lang="scss">
+$namespace: 'toggle-mxdatepicker';
+
+@import '~vue2-datepicker/scss/index.scss';
 
-   
 
+.toggle-mxdatepicker-datepicker, .toggle-mxdatepicker-datepicker-range {
+  width: 100%;
+}
+.toggle-mxdatepicker-input {
+  padding: 0.5rem 3.5rem 0.5rem 1rem;
+  background-color: #F4F6F7 !important;
+  height: 2.8rem;
+  width: 100%;
+  box-shadow: none;
+  border: 0;
+  color: #354b64 !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+}
+
+i.toggle-mxdatepicker-icon-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  &:after{
+    cursor: pointer;
+    content: url('../../assets/icons/delete.svg');
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+  }
+}
+
+i.toggle-mxdatepicker-icon-calendar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  &:after{
+    cursor: pointer;
+    content: url("../../assets/icons/calendar.svg");
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+  }
+}
+
+.toggle-date-input-container-small {
+  .toggle-mxdatepicker-input {
+    background-color: transparent;
+    margin-top: 11px;
+    padding: 1px 1.65rem 1px 3px;
+    font-size: 0.9rem !important;
+    height: 1.5rem;
+  }
+  i.toggle-mxdatepicker-icon-calendar, i.toggle-mxdatepicker-icon-clear {
+    margin-top: 6px;
+    width: 1em;
+    height: 1em;
+    &:after{
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
+
+.toggle-mxdatepicker-calendar-content {
+  height: auto;
+}
 </style>
 
 

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,7 +3,8 @@
 
 
 
-<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 : 'InputText' " 
@@ -16,6 +17,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -91,8 +93,13 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 100
-        }
-       
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
+
+        },
     },
 
     created : function(){

package/src/components/forms/ToggleInputPercentage.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"
@@ -14,6 +14,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -77,6 +78,11 @@ export default {
         allowFloat: {
             type: Boolean,
             default: false
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },