toggle-components-library 1.28.6-beta.6 → 1.28.7-beta.0

package/package.json

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

package/src/components/loaders/ToggleProgressLoader.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="toggle-progress-loader" :class="{'toggle-progress-loader-error' : error , 'toggle-progress-loader-loading' : loading }">
+        <div class="toggle-progress-loader-modal">
+            <div class="toggle-progress-loader-circle">
+                <div v-if="!error" class="toggle-progress-loader-circle__percent">
+                    {{ percent }}<span>%</span>
+                </div>
+                <div v-else class="toggle-progress-loader-circle__error" >!</div>
+
+                <svg class="toggle-progress-loader-circle__progress" viewBox="0 0 106 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                        <g transform="translate(-17.000000, -17.000000)">
+                            <circle :stroke="circleColor" stroke-width="7" fill-rule="nonzero" cx="70" cy="70" r="50"></circle>
+                            <path class="toggle-progress-loader-circle__path" d="M70,120 C97.6142375,120 120,97.6142375 120,70 C120,42.3857625 97.6142375,20 70,20 C42.3857625,20 20,42.3857625 20,70 C20,97.6142375 42.3857625,120 70,120 Z" :stroke="progressColor" stroke-width="7" :stroke-dasharray="circle" fill-rule="nonzero" transform="translate(70.000000, 70.000000) rotate(-125.000000) translate(-70.000000, -70.000000) "></path>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+            <p class="toggle-progress-loader-message" v-html="message"></p>
+            <button
+                v-if="buttonShow" 
+                @click="click" 
+                class="toggle-progress-loader-cancel"
+                :style="'color: ' + buttonColor + '; background-color: ' + buttonBgColor"
+                :disabled="disabled || loading"
+            >
+                <div class="toggle-progress-loader-cancel__loading" v-if="loading" ></div>
+                <span>{{ buttonText }}</span>
+            </button>
+        </div>
+    </div>
+</template>
+ 
+<script>
+export default {
+    name: 'ProgressLoader',
+    props: {
+        buttonShow:{
+            type: Boolean,
+            default: false
+        },
+        buttonText: {
+            type: String,
+            default: "Cancel"
+        },
+        buttonColor: {
+            type: String,
+            default: "#ffffff"
+        },
+        buttonBgColor: {
+            type: String,
+            default: "#ee757b"
+        },
+        message: {
+            type: String,
+            default: "Preparing download<br />Please Wait..."
+        },
+        circleColor: {
+            type: String,
+            default: "#949494"
+        },
+        progressColor: {
+            type: String,
+            default: "#ee757b"
+        },
+        percent: {
+            type: Number,
+            default: 70
+        },
+        error: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        circle() {
+            return (this.percent / 100) * 100 * Math.PI + ",9999";
+        }
+    },
+    methods: {
+        click(){
+            /**
+             * Emitted when the button is clicked.
+             * @event click
+             * @type {Event}
+             */
+            this.$emit('click');
+        }
+    }
+}
+</script>

package/src/index.js

@@ -22,7 +22,6 @@ import ToggleInputGroup from "./components/forms/ToggleInputGroup.vue";
 import ToggleInputNumber from "./components/forms/ToggleInputNumber.vue";
 import ToggleColourPicker from "./components/forms/ToggleColourPicker.vue";
 import ToggleModal from "./components/modals/ToggleModal.vue";
-import ToggleContactSearch from "./components/forms/ToggleContactSearch.vue";
 
 import ToggleBoosterButton from "./components/boosters/ToggleBoosterButton.vue";
 import ToggleBoosterBasicButton from "./components/boosters/ToggleBoosterBasicButton.vue";
@@ -32,7 +31,9 @@ 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";
+import ToggleProgressLoader from "./components/loaders/ToggleProgressLoader.vue";
 
 
 import ToggleTable from './components/tables/ToggleTable.vue';
@@ -101,6 +102,7 @@ const Components = {
     ToggleInputCheckbox, 
     ToggleInputCheckboxInline,
     ToggleFillLoader,
+    ToggleProgressLoader,
     ToggleInputImage,
     ToggleButton,
     ToggleLoginButton,
@@ -141,8 +143,7 @@ const Components = {
     ToggleThreeDotsButton,
     ToggleBoosterButton,
     ToggleBoosterBasicButton,
-    ToggleBoosterModal,
-    ToggleContactSearch
+    ToggleBoosterModal
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_inputs.scss

@@ -6,8 +6,7 @@
 .toggle-input-radio-label, 
 .toggle-input-checkbox-label,
 .toggle-input-search-options,
-.toggle-input-select,
-.toggle-contact-search-container{
+.toggle-input-select{
     @include toggle-global-font-config;
 } 
 
@@ -418,7 +417,7 @@
     .toggle-input-radio-label, .toggle-input-checkbox-label{
         opacity: 0.5;
     }
-    .toggle-input-label, .toggle-input, .toggle-contact-search-container{
+    .toggle-input-label, .toggle-input{
         opacity: 0.5;
     }
     .toggle-input-select-container{
@@ -937,261 +936,4 @@ $iconWidth:20px;
         top: 50%;
         transform: translate(0, -50%);
     }
-}
-
-//
-// Contact Search Styles
-//
-
-.toggle-contact-search-input-container {
-    width: 100%;
-    height: 40px;
-    background-color: $toggle-white;
-    border-radius: 8px;
-    min-width: 500px;
-}
-
-.toggle-contact-search-input-container-active {
-    border-radius: 8px 8px 0 0;
-}
-
-.toggle-contact-search-icon-input-container {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-}
-
-.toggle-contact-search-dropdown-container {
-    min-width: 550px;
-    background-color: $toggle-white;
-    border-radius: 0 0 8px 8px;
-    overflow: hidden;
-    position: absolute;
-    z-index: 1;
-}
-
-.toggle-contact-search-input {
-    width: 100%;
-    border: 0;
-    border-radius: 0px;
-    height: 30px;
-    margin: 4px 5px 0px 14px;
-    color: #3A4A62;
-    font-family: $toggle-font-family;
-    font-weight: 700;
-    font-size: 16px;
-    background-color: #FFFFFF;
-}
-
-.toggle-contact-search-input::placeholder {
-    color: #C5CED8;
-    opacity: 1;
-}
-.toggle-contact-search-input:-ms-input-placeholder {
-    color: #C5CED8;
-    opacity: 1;
-}
-.toggle-contact-search-input::-ms-input-placeholder {
-    color: #C5CED8;
-    opacity: 1;
-}
-.toggle-contact-search-input::-webkit-input-placeholder {
-    color: #C5CED8;
-    opacity: 1;
-}
-.toggle-contact-search-input:-moz-placeholder {
-    color: #C5CED8;
-    opacity: 1;
-}
-.toggle-contact-search-input::-ms-placeholder {
-    color: #C5CED8;
-    opacity: 1;
-}
-
-.toggle-contact-search-icon {
-    max-width: 20px;
-    max-height: 20px;
-    margin: 10px 16px 0 0;
-    transition: transform .2s ease-in-out;
-    width: 25px;
-    height: 25px;
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
-.toggle-contact-search-icon-email {
-    background-image: url('../assets/icons/email-icon.svg');
-}
-
-.toggle-contact-search-icon-mobile {
-    background-image: url('../assets/icons/mobile-icon.svg');
-}
-
-.toggle-contact-search-icon-arrow-container:hover {
-    .toggle-contact-search-icon {
-        transform: scale(1.1);
-    }
-}
-
-.toggle-contact-search-icon-arrow-container {
-    display: flex;
-    width: 100px;
-    min-width: 60px;
-    flex-direction: row;
-    justify-content: center;
-    cursor: pointer;
-}
-
-.toggle-contact-search-icon-arrow-container-disabled {
-    cursor: default !important;
-    opacity: 0.5;
-}
-
-.toggle-contact-search-magnifying-glass-icon {
-    cursor: pointer;
-    margin: 10px 15px 0 3px;
-    width: 25px;
-    height: 25px;
-    background-image: url('../assets/icons/magnifying-glass-icon.svg');
-    background-repeat: no-repeat;
-    background-size: contain;
-    transition: transform .2s ease-in-out;
-}
-
-.toggle-contact-search-magnifying-glass-icon:hover {
-    transform: scale(1.1);
-}
-
-.toggle-contact-search-magnifying-glass-icon-disabled {
-    cursor: default;
-    opacity: 0.5;
-}
-
-.toggle-contact-search-arrow {
-    margin: 17px 0px  0px;
-    width: 10px;
-    height: 10px;
-    background-image: url('../assets/icons/arrow-icon.svg');
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
-.toggle-contact-search-arrow-active {
-    transition: all .2s ease;
-    transform: rotate(-3.1416rad) translateY(5px);
-}
-
-.toggle-contact-search-divider {
-    height: 28px;
-    margin: 7px 0 0 0;
-    border-right: 2px solid #D9D9D9;
-}
-
-.toggle-contact-search-dropdown-item {
-    margin: 5px 5px 5px 10px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    padding: 5px;
-}
-
-.toggle-contact-search-dropdown-item-label {
-    cursor: pointer;
-    font-weight: 700;
-    color: #3A4A62;
-}
-
-.toggle-contact-search-dropwdown-item-highlighted {
-    color: #547DEE;
-}
-
-.toggle-contact-search-dropdown-item:hover {
-    background-color: #F5F5F5;
-    color: #3A4A62;
-
-    .toggle-contact-search-icon-dropdown {
-        transform: scale(1.1);
-    }
-
-    .toggle-contact-search-dropdown-item-label {
-        color: #3A4A62;
-    }
-}
-
-.toggle-contact-search-icon-dropdown {
-    width: 25px;
-    height: 25px;
-    background-repeat: no-repeat;
-    background-size: contain;
-    max-width: 20px;
-    max-height: 20px;
-    margin: 2px 14px 0 0;
-    transition: transform .2s ease-in-out;
-}
-
-.toggle-contact-search-error {
-    height: 16.8px;
-    text-align: right;
-    color: #FF6F6F;
-    font-size: 12px;
-    margin: 0 0 10px 0;
-}
-
-.toggle-contact-search-input-disabled {
-    color: #D3D9DF !important;
-}
-
-.toggle-contact-search-input-disabled::placeholder,
-.toggle-contact-search-input-disabled:-ms-input-placeholder,
-.toggle-contact-search-input-disabled::-ms-input-placeholder {
-    color: #D3D9DF !important;
-    opacity: 1;
-}
-
-.toggle-contact-search-loading-container {
-    display: flex;
-    align-items: center;
-    margin: 0 0 3px 0;
-}
-
-//
-//  Contact Search Transition Styles
-//
-
-.drop-down-enter-active {
-    -moz-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in;
-    -webkit-transition-timing-function: ease-in;
-    -o-transition-timing-function: ease-in;
-    transition-timing-function: ease-in;
-}
-
-.drop-down-leave-active {
-    -moz-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-}
-
-.drop-down-enter-to,
-.drop-down-leave {
-    max-height: 100px;
-    overflow: hidden;
-}
-
-.drop-down-enter,
-.drop-down-leave-to {
-    overflow: hidden;
-    max-height: 0;
 }

package/src/sass/includes/_as_loaders.scss

@@ -34,7 +34,7 @@
   	top:50%;
   	left:50%;
     border-radius: 50%;
-     border: .25rem solid $toggle-button-disabled;
+    border: .25rem solid $toggle-button-disabled;
     border-top-color: $toggle-white;
     animation: spin 1s infinite linear;
     margin-top:-1rem;
@@ -43,18 +43,132 @@
     height: 2rem;
   }
 
-  .toggle-inline-loader-container {
-    position: relative;
-    display: inline-block;
-  }
+  /*
+   * ToggleProgressLoader
+   */
 
-  .toggle-inline-loader {
-    box-sizing: content-box;
-    border-radius: 50%;
-    border: .25rem solid $toggle-button-disabled;
-    border-top-color: $toggle-white;
-    animation: spin 1s infinite linear;
-    width: 16px;
-    height: 16px;
-    margin: 8px 12px 0 0;
+  .toggle-progress-loader{
+    top:0;
+    left:0;
+    height:  100vh;
+    width:100vw;
+    z-index:10;
+    background: rgba(220, 220, 220, 0.5);
+    position: fixed !important;
+    font-family: $toggle-font-family;
+
+    &-modal {
+      width: 100%;
+      max-width: 230px;
+      min-height: 300px;
+      background: white;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      padding: 30px;
+      box-sizing: border-box;
+      border-radius: 15px;
+      box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &-circle {
+      display: inline-block;
+      position: relative;
+      &__progress {
+        max-width: 130px;
+        max-height: 130px;
+        width: 100%;
+        transform: scaleX(-1) rotate(-55deg);
+        overflow: inherit;
+      }
+      &__percent {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        align-items: center;
+        font-family: $toggle-font-family;
+        color: #354b64;
+        span {
+          font-size: 14px;
+          margin-left: 3px;
+          position: absolute;
+          padding-left: 100%;
+          font-family: $toggle-font-family;
+        }
+      }
+      &__path {
+        transition: 0.3s ease-in-out all;
+      }
+      &__error {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        align-items: center;
+        font-family: $toggle-font-family;
+        font-weight: 700;
+        font-size: 34px;
+        color: #354b64;
+      }
+    }
+
+    &-message{
+      margin: 30px 0 0 0;
+      font-size: 16px;
+      line-height: 28px;
+      font-family: $toggle-font-family;
+      color: #354b64;
+    }
+    
+    &-cancel {
+      background-color: #ee757b;
+      border: none;
+      margin: 30px auto 0 auto;
+      display: inline-flex;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      border-radius: 15px;
+      padding: 6px 12px;
+      font-size: 12px;
+      color: #fff;
+      transition: background-color 0.2s ease;
+      position: relative;
+      &:hover {
+        opacity: 0.95;
+      }
+      &__loading {
+        border-radius: 50%;
+        border: .25rem solid $toggle-button-disabled;
+        border-top-color: $toggle-white;
+        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;
+      }
+      &:disabled{
+        opacity: 0.8;
+      }
+    }
+    &-loading {
+      .toggle-progress-loader-cancel {
+        span {
+          opacity: 0;
+        }
+      }
+    }
   }

package/dist/img/arrow-icon.6b7bdc31.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="11" viewBox="0 0 18 11">
-  <path id="Polygon_8" data-name="Polygon 8" d="M7.452,1.892a2,2,0,0,1,3.1,0l4.78,5.842A2,2,0,0,1,13.78,11H4.22A2,2,0,0,1,2.673,7.734Z" transform="translate(18 11) rotate(180)" fill="#3a4a62"/>
-</svg>

package/dist/img/email-icon.3c44b236.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="31.001" height="31.001" viewBox="0 0 31.001 31.001">
-  <path id="at-solid" d="M15.5,3.875a11.625,11.625,0,0,0,0,23.251A1.938,1.938,0,1,1,15.5,31,15.5,15.5,0,1,1,31,15.5v1.938A5.812,5.812,0,0,1,20.756,21.2a7.753,7.753,0,1,1-.733-11.989,1.938,1.938,0,0,1,3.227,1.447v6.781a1.938,1.938,0,0,0,3.875,0V15.5A11.628,11.628,0,0,0,15.5,3.875ZM19.376,15.5A3.875,3.875,0,1,0,15.5,19.376,3.875,3.875,0,0,0,19.376,15.5Z" fill="#3a4a62"/>
-</svg>

package/dist/img/magnifying-glass-icon.9a2b42a1.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24.674" height="24.678" viewBox="0 0 24.674 24.678">
-  <path id="magnifying-glass-solid" d="M20.048,10.024a10,10,0,0,1-1.928,5.913l6.1,6.106a1.544,1.544,0,0,1-2.183,2.183l-6.1-6.106a10.026,10.026,0,1,1,4.111-8.1Zm-10.024,6.94a6.94,6.94,0,1,0-6.94-6.94A6.94,6.94,0,0,0,10.024,16.964Z" fill="#3a4a62"/>
-</svg>

package/dist/img/mobile-icon.9e16ffcd.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="31.001" height="32.921" viewBox="0 0 23.131 32.921">
-  <g id="Rectangle_1084" data-name="Rectangle 1084" transform="matrix(0.995, -0.105, 0.105, 0.995, 0, 2.091)" fill="none" stroke="#3a4a62" stroke-width="4">
-    <rect width="20" height="31" rx="5" stroke="none"/>
-    <rect x="2" y="2" width="16" height="27" rx="3" fill="none"/>
-  </g>
-</svg>