toggle-components-library 1.25.9 → 1.25.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.25.9",
+  "version": "1.25.11",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -22,10 +22,10 @@
     "public/*",
     "*.json",
     "*.js"
-  ],
+  ], 
   "dependencies": {
     "apexcharts": "^3.35.5",
-    "core-js": "^3.25.0",
+    "core-js": "^3.6.4", 
     "countries-list": "^2.6.1",
     "date-fns": "^1.30.1",
     "storybook-vue-router": "^1.0.7",

package/src/assets/icons/airship-user-icon-hover.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="76.977" height="94" viewBox="0 0 76.977 94">
-  <path id="Exclusion_6" data-name="Exclusion 6" d="M-11917.125-16077.678h-.191a5.293,5.293,0,0,1-4.119-1.816,6.407,6.407,0,0,1-1.379-4.145,35.712,35.712,0,0,1,8.531-22.773c5.736-6.734,13.279-10.441,21.24-10.445h17.424a29.584,29.584,0,0,1,21.061,8.723,29.6,29.6,0,0,1,8.721,21.059,5.954,5.954,0,0,1-5.939,5.953h-.014l-65.07,3.438C-11916.949-16077.678-11917.033-16077.678-11917.125-16077.678Zm32.8-50a21.867,21.867,0,0,1-15.555-6.445,21.88,21.88,0,0,1-6.437-15.559,21.871,21.871,0,0,1,6.438-15.555,21.856,21.856,0,0,1,15.555-6.441,22.021,22.021,0,0,1,22,22A22.025,22.025,0,0,1-11884.328-16127.678Z" transform="translate(11922.814 16171.678)" fill="#477ef6"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_3" data-name="Exclusion 3" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#477ef6"/>
 </svg>

package/src/assets/icons/airship-user-icon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="76.977" height="94" viewBox="0 0 76.977 94">
-  <path id="Exclusion_5" data-name="Exclusion 5" d="M-11917.125-16077.678h-.191a5.293,5.293,0,0,1-4.119-1.816,6.407,6.407,0,0,1-1.379-4.145,35.712,35.712,0,0,1,8.531-22.773c5.736-6.734,13.279-10.441,21.24-10.445h17.424a29.584,29.584,0,0,1,21.061,8.723,29.6,29.6,0,0,1,8.721,21.059,5.954,5.954,0,0,1-5.939,5.953h-.014l-65.07,3.438C-11916.949-16077.678-11917.033-16077.678-11917.125-16077.678Zm32.8-50a21.867,21.867,0,0,1-15.555-6.445,21.88,21.88,0,0,1-6.437-15.559,21.871,21.871,0,0,1,6.438-15.555,21.856,21.856,0,0,1,15.555-6.441,22.021,22.021,0,0,1,22,22A22.025,22.025,0,0,1-11884.328-16127.678Z" transform="translate(11922.814 16171.678)" fill="#354b64"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_1" data-name="Exclusion 1" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#354b64"/>
 </svg>

package/src/components/forms/ToggleInputImage.vue

@@ -15,7 +15,7 @@
             tag="ul"
             v-model="inputVal"
             v-bind="dragOptions"
-
+     
         >
             <transition-group type="transition" >
             <li
@@ -25,7 +25,7 @@
                 :style="{marginRight:thumbnailWidth / 8 + 'px'}"
 
             >
-                <div class="toggle-item-img toggle-dark-grey toggle-center" :class="moveIconClass"
+                <div class="toggle-item-img toggle-dark-grey toggle-center"
                      :style="{  background: `rgb(243, 237, 237) url(${image.url}) no-repeat center top`,
                                 height: previewRatio == 'letterbox' ? thumbnailWidth / 2 + 'px': thumbnailWidth+'px',
                                 width: thumbnailWidth+'px'}"
@@ -49,7 +49,7 @@
                     :id="'dropzone'+_uid" 
                     :options="dropzoneOptions" 
                     @vdropzone-file-added="fileAdded" 
-
+                
                 />
             </div>
         </div>
@@ -142,11 +142,6 @@ export default {
                 animation: 200,
                 group: "images",
             };
-        },
-        moveIconClass() {
-            return {
-                'toggle-move-icon' : this.images.length > 1
-            }
         },
           inputVal: {
             get: function (){
@@ -160,8 +155,8 @@ export default {
     },
     methods: {
 
-
-
+   
+       
     }
 }
 
@@ -169,4 +164,5 @@ export default {
 </script>
 <style lang="scss">
 
+
 </style>

package/src/components/forms/ToggleInputText.vue

@@ -122,22 +122,22 @@ export default {
         * Concat message for count characters
         * @return string
         */
-        messageLength(msg, maxLength)
+        messageLength(count, maxLenght)
         {
-            let message = msg;
+            let message = count;
             let mcount = 0;
 
             // If the emoji flag is set, make sure the character count takes account of the decoded emoji characters (this will include £ signs)
-            if (this.includeEmojiEntitiesInCharCount && msg) {
+            if (this.includeEmojiEntitiesInCharCount && count) {
 
-                message = this.convertEmojis(msg);
-                mcount = message ? message.length : 0;
+                let message = this.convertEmojis(count)
+                mcount = message ? this.convertEmojis(message).length : 0;
 
             } else {
                 mcount = message ? message.length : 0;
             }
 
-            return mcount+' / '+maxLength;
+            return mcount+' / '+maxLenght;
         },
 
         onFocus() {

package/src/components/metrics/ToggleMetricBarChart.vue

@@ -69,9 +69,8 @@ export default {
         plotOptions: {
           bar: {
             borderRadius: 5,
-            columnWidth: '85%',
-            distributed : false,
-          },
+            columnWidth: '60%',
+          }
           
         },
         chart: {
@@ -113,17 +112,17 @@ export default {
        
         colors: this.colors ? this.colors : this.getDefaultColors(),
         legend: {
-          horizontalAlign: 'center',
+          horizontalAlign: 'left',
+          offsetX: -12,
           showForSingleSeries: true,
-          fontSize: '16px',
           markers: {
             width: 50,
-            height: 12,
             radius: 5,
+            offsetY: 3
           },
         
         itemMargin: {
-            horizontal: 30,
+            horizontal: 5,
             vertical: 0
         },
           

package/src/components/metrics/ToggleMetricFunnelChart.vue

@@ -12,34 +12,25 @@
          <div class="funnel-spark-line funnel-grid-3">
             <slot name="sparkLine3"></slot>
         </div>
-        <div class="funnel-spark-line funnel-grid-4">
-            <slot name="sparkLine4"></slot>
-        </div>
 
-        <div class="funnel-single-metric funnel-grid-5">
+        <div class="funnel-single-metric funnel-grid-4">
             <div class="funnel-single-metric-container">
                 <slot name="funnel1" class="funnel-single-metric"></slot>
             </div>
         </div>
 
-        <div class="funnel-single-metric funnel-grid-6">
+        <div class="funnel-single-metric funnel-grid-5">
             <div class="funnel-single-metric-container">
                 <slot name="funnel2" class="funnel-single-metric"></slot>
             </div>
         </div>
 
-        <div class="funnel-single-metric funnel-grid-7">
+        <div class="funnel-single-metric funnel-grid-6">
             <div class="funnel-single-metric-container">
                 <slot name="funnel3" class="funnel-single-metric"></slot>
             </div>
         </div>
 
-        <div class="funnel-single-metric funnel-grid-8">
-            <div class="funnel-single-metric-container">
-                <slot name="funnel4" class="funnel-single-metric"></slot>
-            </div>
-        </div>
-
     </div>
 </template>
 

package/src/components/metrics/ToggleMetricPieChart.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h3 class="toggle-metric metric-label">{{label}}</h3>
-    <apexchart type="pie"  :height="height" :options="chartOptions" :series="values"></apexchart>
+    <apexchart type="pie" :options="chartOptions" :series="values"></apexchart>
   </div>
 
 </template>
@@ -27,13 +27,6 @@ export default {
       type: Array,
       required: true
     },
-    /*
-    * Component's height
-    */
-    height: {
-      type: String,
-      default: ""
-    },
     /**
     * Component's main label
     */
@@ -59,14 +52,14 @@ export default {
         labels: this.labels,
         plotOptions: {
           pie: {
-            distributed : false,
-            customScale: 0.7,
+            customScale: 1,
             dataLabels: {
-              offset: 100
-            }  
+              offset: -50
+            }
+
           }
         },
-         colors: this.colors ? this.colors : this.getDefaultColors(),
+        colors: this.colors ? this.colors : this.getDefaultColors(),
           dataLabels: {
             enabledOnSeries: true,
             formatter: function (val, {seriesIndex, w}) {
@@ -74,8 +67,8 @@ export default {
             },
             style: {
               colors: [this.getColor('black')],
-              fontSize: '1.1rem',
-              fontWeight: 'bold'
+              fontSize: '1rem',
+              fontWeight: 300
             },
             background: {
               enabled: false,

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -48,6 +48,7 @@ export default {
         */
         currencyCode:{
             type:String,
+            required:false,
             default:'GBP'
         },
         /**
@@ -55,6 +56,7 @@ export default {
         */
         currencyLocale:{
             type:String,
+            required:false,
             default:'en-GB'
         },
         /**
@@ -62,7 +64,7 @@ export default {
         */
         currencyDenomination: {
             type: Number,
-            default: 1
+            default: 100
         }
     },
     computed: {
@@ -71,7 +73,7 @@ export default {
         * @return String
         */
         metricValue() {
-            if (this.value === null) {
+            if (this.value ==  0) {
                 return "-";
             }
 

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -83,6 +83,7 @@ export default {
         */
         currencyCode:{
             type:String,
+            required:false,
             default:'GBP'
         },
         /**
@@ -90,6 +91,7 @@ export default {
         */
         currencyLocale:{
             type:String,
+            required:false,
             default:'en-GB'
         },
         /**
@@ -97,14 +99,14 @@ export default {
         */
         currencyDenomination: {
             type: Number,
-            default: 1
+            default: 100
         },
         /**
         * Percentage base used to calculate the trend impact 
         */
-        trend_impact_base :{
+        trend_impact_percentage :{
             type: Number,
-            default: 0.5
+            default: 5
         },
         /**
         * This prop will inverse the trend impact
@@ -134,9 +136,6 @@ export default {
             },
             stroke: {
                 width: 5,
-                curve: 'smooth',
-                lineCap: 'butt',
-                
             },
             grid: {
                 padding: {
@@ -193,10 +192,9 @@ export default {
                 if (this.sparkLineVal[0].data.length > 0) {
                 // if the value is an object, map to array
 
-                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);
+                const trendImpactVals = this.sparkLineVal[0].data[0].y ? this.sparkLineVal[0].data.map(data => data.y) : this.sparkLineVal[0].data;
 
+                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_percentage);
                 if (this.inverse_trend_impact === true && result != false)
                     return result *-1;
                 else

package/src/components/mixins/mixins.js

@@ -1,11 +1,8 @@
 import styleInfo from '../../../src/sass/includes/_as_variables.scss';
-import jsonCharCodesData from '../json/char_list.json';
 
 export const mixins = {
     data(){
-        return {
-            jsonCharCodes: jsonCharCodesData
-        }
+        return {}
     },
     methods:{
 
@@ -62,20 +59,6 @@ export const mixins = {
 
             //converts a character into an HTML entity 
             const char2Html = (char) => {
-                // Check for special characters first
-                let codepointVals = Object.values(this.jsonCharCodes).map(value => value.codepoints[0]);
-
-                let codesArray = Object.entries(this.jsonCharCodes)
-
-                if (codepointVals.includes(char.codePointAt())) {
-
-                    let namedChar = codesArray.filter(nestedArr => {
-                        return nestedArr[1].codepoints[0] == char.codePointAt()
-                    })
-                    // If it's a special character return now
-                    return `${namedChar[0][0]}`
-                }
-
                 let item = `${char}`;
 
                 //spread operator can detect emoji surrogate pairs 
@@ -125,7 +108,7 @@ export const charts = {
         return {
 
             defcolors: [
-                '#85B4FF', '#81F4FF', '#A898FF'
+            '#FF9494','#FFCA8A','#FCFF9D','#B2FFA2','#81F4FF','#85B4FF','#A898FF'
             ]
         }
     },
@@ -139,59 +122,41 @@ export const charts = {
         *
         * @return { {Integer} 1, 0,-1 }
         */
-        calcTrendImpact(values, trend_impact_base){
+        calcTrendImpact(values, percentageBase){
 
             // If all values in the values array are 0 return 0;
             if (values.every((val) => val === 0)){
-               return false;
+               return 0;
             }
 
-            let regressionCalc = this.calculateLinearRegression(values);
+            let sum = 0 
+            values.forEach(val => {
+                sum = sum + val;
+            });
 
-            if (regressionCalc >= trend_impact_base){
-                return 1;
-            } else if (regressionCalc < -trend_impact_base) {
-                return -1;
-            } else {
-                return 0;
-            }
-        },
+            let average = sum/values.length;
 
-        /*
-        * Calculates the linear regression for the trend impact
-        * 
-        * @param {Array} [nums] [the array of values to be calculated]
-        * @return {Integer}
-        */
-        calculateLinearRegression(nums)  {
-            let summed_nums = 0;
-            nums.forEach(val => {
-                summed_nums = summed_nums + val;
-            });
+            // the acceptable difference before it's trending positive or negatively
+            let difference = average/100 * percentageBase;
 
-            let multiplied_data = 0;
-            let summed_index = 0;
-            let squared_index = 0;
+            // lower 'keeping steady value'
+            let lower_base = average-difference;
+            // higher 'keeping steady value'
+            let upper_base = average+difference;
 
-            nums.forEach((num, index) => {
-                index += 1;
-                multiplied_data += index * num;
-                summed_index += index;
-                squared_index += index**2;
-            });
+            let last_value = values[values.length - 1];
+
+            if(last_value >= upper_base)
+                return 1;
+            if(last_value <= lower_base)
+                return -1;
+            return 0;
 
-            let numerator = ( (nums.length) * multiplied_data) - (summed_nums * summed_index);
-            let denominator = ( (nums.length) * squared_index) - summed_index**2;
-            
-            if (denominator != 0)
-                return numerator/denominator;
-            else
-                return 0;
         },
 
         //return an array of default colors
         getDefaultColors() {
-            return this.$data.defcolors;
+            return this.$data.defcolors.sort(() => Math.random() - 0.5);
         },
 
         //return a specific color

package/src/components/navs/multitiersidenav/ToggleMultiTierSideNav.vue

@@ -3,7 +3,7 @@
         <img :src="logo.src" :alt="logo.alt" class="toggle-multi-tier-sidenav-logo">
         <ul class="toggle-multi-tier-sidenav-ul">
             <!-- @slot For ToggleSideNavItems -->
-            <slot name="nav-items"></slot>
+            <slot></slot>
         </ul>
 
         <div class="toggle-multi-tier-sidenav-divider"></div>
@@ -14,22 +14,10 @@
 
 
         <div class="toggle-multi-tier-sidenav-select-container">
-            <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptionsSorted" v-model="unitOptionVal" />
+            <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptions" v-model="unitOptionVal" />
         </div>
 
-        <div  v-if="userMenuOpen" class="toggle-multi-tier-sidenav-user-menu-container">
-            <div class="toggle-multi-tier-sidenav-user-menu">
-                <ToggleHeaderTextLarge class="toggle-multi-tier-sidenav-user-name">
-                    {{ user }}
-                </ToggleHeaderTextLarge>
-                <div class="toggle-multi-tier-sidenav-user-menu-divider"></div>
-                <ul class="toggle-multi-tier-sidenav-user-menu-ul">
-                    <slot name="user-menu"></slot>
-                </ul>
-            </div>
-        </div>
-        <div @click="userMenuOpen = !userMenuOpen" :class="userMenuOpen ? 'toggle-multi-tier-sidenav-user-icon-menu-open' : 'toggle-multi-tier-sidenav-user-icon'">
-        </div>
+        <div class="toggle-multi-tier-sidenav-user-icon"></div>
     </nav>
 </template>
 
@@ -40,11 +28,6 @@ import ToggleInputSelect from '../../forms/ToggleInputSelect.vue';
 
 export default {
     name: 'ToggleMultiTierSideNav',
-    data() {
-        return {
-            userMenuOpen: false,
-        }
-    },
     props: {
         value: {},
         /**
@@ -61,13 +44,6 @@ export default {
             type: String,
             default: 'Airship'
         },
-        /**
-         * Name of the user, displayed in the user menu
-         */
-        user: {
-            type: String,
-            default: 'User'
-        },
         unitOptions: {
             type: Array,
             required: true
@@ -82,19 +58,7 @@ export default {
             set: function (value) {
                 this.$emit('input', value);
             }
-        },
-
-        unitOptionsSorted() {
-            // Create a new array and populate it with the elements from the original unitOptions array
-            const sortedUnitOptions = [...this.unitOptions];
-
-            // Sort the new array in ascending alphabetical order according to the label property of each element
-            sortedUnitOptions.sort((a, b) => a.label.localeCompare(b.label));
-
-            // Return the new sorted array
-            return sortedUnitOptions;
         }
-        
     },
     components: {
         ToggleHeaderTextLarge,

package/src/components/text/ToggleTextClipboardCopy.vue

@@ -45,16 +45,7 @@ export default {
                 window.getSelection().removeAllRanges();
                 window.getSelection().addRange(range);
                 document.execCommand("copy");
-                this.click();
-      },
-      click(){
-            /**
-             * Emitted when the button is clicked.
-             * @event click
-             * @type {Event}
-             */
-            this.$emit('click');
-        }
+      }
     }
 };
 </script>

package/src/index.js

@@ -25,7 +25,6 @@ import ToggleModal from "./components/modals/ToggleModal.vue";
 import ToggleInputSearch from "./components/forms/ToggleInputSearch.vue";
 import ToggleInputRadioButtonGroup from "./components/forms/ToggleInputRadioButtonGroup.vue";
 import ToggleButton from "./components/buttons/ToggleButton.vue";
-import ToggleLoginButton from "./components/buttons/ToggleLoginButton.vue";
 import ToggleFillLoader from "./components/loaders/ToggleFillLoader.vue";
 
 
@@ -91,7 +90,6 @@ const Components = {
     ToggleFillLoader,
     ToggleInputImage,
     ToggleButton,
-    ToggleLoginButton,
     ToggleInputGroup,
     ToggleHeaderTextLarge,
     ToggleInputNumber,

package/src/sass/includes/_as_buttons.scss

@@ -237,58 +237,3 @@
     }
 
 }
-
-// 
-// Toggle and Airship Login Buttons
-// 
-
-.toggle-login-button {
-    background-color: #3180FF;
-    border: 0;
-    border-radius: 23px;
-    width: 120px;
-    height: 46px;
-    color: #ffffff;
-    cursor: pointer;
-    font: normal normal 600 15px/18px Lato;
-    position: relative;
-    transition: box-shadow .3s, transform .3s, background-color .3s, -webkit-transform .3s;
-}
-
-.toggle-login-button--airship {
-    background-color: #FF7175 !important;
-}
-
-.toggle-login-button:hover {
-    background-color: #1571dd;
-    box-shadow: 0 10px 30px -10px #2cc1ff;
-    -webkit-transform: translate(0, -3px);
-    -ms-transform: translate(0, -3px);
-    transform: translate(0, -3px);
-    color: #fff;
-}
-
-.toggle-login-button--airship:hover {
-    background-color: #ff463f !important;
-    box-shadow: 0 10px 30px -10px rgb(254 108 102 / 50%) !important;
-}
-
-.toggle-login-button-loader {
-    border-radius: 50%;
-    border: .25rem solid #fff;
-    border-top-color: #3180FF;
-    animation: spin 1s infinite linear;
-    margin: 0 auto;
-    width: 0.5rem;
-    height: 0.5rem;
-    position: absolute;
-    left: 50%;
-    margin-left: -0.5rem;
-    top: 50%;
-    margin-top: -0.5rem;
-    box-sizing: content-box;
-}
-
-.toggle-login-button-loader--airship {
-    border-top-color: #FF7175;
-}