toggle-components-library 1.36.1-beta.6 → 1.36.1-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.1-beta.6",
+    "version": "1.36.1-beta.7",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

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

@@ -6,8 +6,8 @@
         <label class="toggle-input-label">{{label}}</label>
 
         <div class="toggle-date-input-container">
-            <div :class="['toggle-date-input-calendar-icon', {'calendar-icon-disabled' :disabled}]">
-                <input type="text" class="toggle-input"  :name="name" :disabled="disabled" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()" />
+            <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>
@@ -101,11 +101,7 @@ export default {
         maxLength:{
             type: Number,
             required:false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
+        }
     },
 
     created : function(){

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,7 +3,7 @@
 
 
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled': disabled }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
     <label 
         v-if="label"
         :for="name ? name : 'InputText' " 
@@ -16,7 +16,6 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
-        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -92,12 +91,8 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 100
-        },
-        disabled: {
-            type: Boolean,
-            required: false,
-            default: false
-        },
+        }
+       
     },
 
     created : function(){

package/src/components/forms/ToggleInputSelect.vue

@@ -1,18 +1,18 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label
+    <label 
         v-if="label"
-        :for="name ? name : 'ToggleInputSelect' "
+        :for="name ? name : 'ToggleInputSelect' " 
         class="toggle-input-label"
-    > {{ label }}
+    > {{ label }} 
     </label>
 
     <div class="toggle-input-select-container">
-        <select
-            :name="name ? name : 'ToggleInputSelect' "
+        <select 
+            :name="name ? name : 'ToggleInputSelect' " 
             :class="[ 'toggle-input-select', size]"
-            v-model="inputVal"
+            v-model="inputVal" 
             :autocomplete="autocomplete ? 'on' : 'off' "
             :required="required"
             :disabled="disabled"
@@ -24,7 +24,7 @@
     </div>
 
     <label
-        class="toggle-input-label-error"
+        class="toggle-input-label-error" 
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -39,11 +39,6 @@ import { mixins } from '../mixins/mixins'
 
 export default {
     mixins:[mixins],
-    data() {
-        return {
-          show: false
-        }
-    },
     props: {
         value: {},
         name: {
@@ -92,7 +87,6 @@ export default {
     },
 
     created : function(){
-
     },
     computed: {
         inputVal: {

package/src/components/forms/ToggleInputText.vue

@@ -1,16 +1,16 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label
+    <label 
         v-if="label"
-        :for="name ? name : 'InputText' "
+        :for="name ? name : 'InputText' " 
         class="toggle-input-label"
-    > {{ label }}
+    > {{ label }} 
     </label>
     <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
     <input
         :type="type"
-        :name="name ? name : 'ToggleInputText' "
+        :name="name ? name : 'ToggleInputText' " 
         :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
@@ -19,11 +19,9 @@
         :maxlength="maxLength"
         :disabled="disabled"
         :readonly="readonly"
-        :ref="'input_ele'"
-        @keyup.esc="handleEscPress"
     />
     <label
-        class="toggle-input-label-error"
+        class="toggle-input-label-error" 
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -105,9 +103,7 @@ export default {
         }
     },
 
-    created : function()
-    {
-        this.$nextTick(() => this.$refs['input_ele'].focus());
+    created : function(){
     },
     computed: {
         inputVal: {
@@ -122,11 +118,6 @@ export default {
     },
     methods: {
 
-        handleEscPress()
-        {
-            this.$emit('bail');
-        },
-
         /*
         * Concat message for count characters
         * @return string

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -2,7 +2,9 @@
     <div>
         <h3 class="toggle-metric metric-label">{{label}}</h3>
         <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
-        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}</h1>
+        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}
+            <span v-if="score && value.maxScore" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
+        </h1>
     </div>
 </template>
 
@@ -21,20 +23,20 @@ export default {
             type: String,
             default: "ToggleMetricSingleMetric"
         },
-                /**
+        /**
         * Type of the value, this will affect on the format shown
         */
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**
         * Component's value
         */
         value: {
-            type: [String, Number],
+            type: [String, Number, Object],
             required: true
         },
         /**
@@ -87,14 +89,17 @@ export default {
                 case 'currency':
                     return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale, {style: 'currency', currency: this.currencyCode});
                 case'percentage':
-                    return `${this.value} %`
+                    return `${this.value} %`;
+                case 'score':
+                    return this.value.score;
                 default:
                     return this.value.toLocaleString();
 
             }
+        },
+        score() {
+            return this.type === 'score';
         }
-
-       
     }
 }
 

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -54,14 +54,14 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**
         * single metric component value
         */
         singleMetricVal: {
-            type: [String, Number],
+            type: [String, Number, Object],
             required: true
         },
         /**
@@ -112,6 +112,10 @@ export default {
         inverse_trend_impact: {
             type: Boolean,
             default: false
+        },
+        showTrendForAllZeros: {
+          type: Boolean,
+          default: false
         }
     },
 
@@ -195,7 +199,7 @@ export default {
 
                 const trendImpactVals = this.sparkLineVal[0].data[0].y  || this.sparkLineVal[0].data[0].y === 0 ? this.sparkLineVal[0].data.map(data => data.y) : this.sparkLineVal[0].data;
 
-                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_base);
+                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_base, this.showTrendForAllZeros);
 
                 if (this.inverse_trend_impact === true && result != false)
                     return result *-1;

package/src/components/mixins/mixins.js

@@ -139,10 +139,10 @@ export const charts = {
         *
         * @return { {Integer} 1, 0,-1 }
         */
-        calcTrendImpact(values, trend_impact_base){
+        calcTrendImpact(values, trend_impact_base, show_trend_for_all_zeros){
 
             // If all values in the values array are 0 return 0;
-            if (values.every((val) => val === 0)){
+            if (!show_trend_for_all_zeros && values.every((val) => val === 0)){
                return false;
             }