toggle-components-library 1.29.0 → 1.30.0-beta.0

package/package.json

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

package/src/assets/icons/arrow-icon.svg

@@ -0,0 +1,3 @@
+<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/src/assets/icons/email-icon.svg

@@ -0,0 +1,3 @@
+<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/src/assets/icons/magnifying-glass-icon.svg

@@ -0,0 +1,3 @@
+<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/src/assets/icons/mobile-icon.svg

@@ -0,0 +1,6 @@
+<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>

package/src/components/forms/ToggleContactSearch.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="toggle-contact-search-container">
+
+        <div class="toggle-contact-search-error" >
+            {{isInvalid ? errorMessage : ''}}
+        </div>
+
+        <div class="toggle-contact-search-input-container" 
+        :class="{'toggle-input-is-invalid': isInvalid, 'toggle-contact-search-input-container-active': showDropdown}">
+            <div class="toggle-contact-search-icon-input-container">
+                <div :class="{'toggle-contact-search-icon-arrow-container': true, 'toggle-contact-search-icon-arrow-container-disabled': disabled}" 
+                @click="showDropdown = !disabled && !loading ? !showDropdown : false">
+                    <div class="toggle-contact-search-icon" 
+                    :class="{
+                        'toggle-contact-search-icon-email': inputType == 'email',
+                        'toggle-contact-search-icon-mobile': inputType == 'mobile'
+                    }" 
+                    ></div>
+                    <div class="toggle-contact-search-arrow" :class="{'toggle-contact-search-arrow-active': showDropdown}"></div>
+                </div>
+    
+                <div class="toggle-contact-search-divider"></div>
+    
+                <input :class="{'toggle-contact-search-input': true, 'toggle-contact-search-disabled': disabled}" v-model="inputVal" :disabled="disabled || loading" type="text" :placeholder="placeholder" @keyup.enter="onEnter">
+    
+                <div v-if="loading" class="toggle-contact-search-loading-container">
+                    <div class="toggle-inline-loader"></div>
+                </div>
+                <div v-else :class="{'toggle-contact-search-magnifying-glass-icon': true, 'toggle-contact-search-magnifying-glass-icon-disabled': disabled}" @click="onSearch"></div>
+            </div>
+    
+            <Transition name="drop-down">
+                <div v-if="showDropdown" class="toggle-contact-search-dropdown-container">
+                    <div v-for="type, i in types" @click="inputType = type; showDropdown = false; loading = false" :key="i">
+                        <div class="toggle-contact-search-dropdown-item">
+                            <div class="toggle-contact-search-icon-dropdown" :class="iconForType(type)"></div>
+                            <label class="toggle-contact-search-dropdown-item-label" :class="{'toggle-contact-search-dropwdown-item-highlighted': type == inputType}">
+                                {{textForType(type)}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+    
+        </div>
+    </div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins';
+
+export default {
+    mixins: [mixins],
+    props: {
+        value: {
+            type: [Number,String]
+        },
+        types: {
+            type: Array,
+            default: function () {
+                return ['email', 'mobile'];
+            }
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            default: 'No contact found with these details'
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            inputType: 'email',
+            showDropdown: false
+        }
+    },
+    watch: {
+        showDropdown: function (val) {
+            if (val) {
+                this.isInvalid = false;
+            }
+        }
+    },
+    created() {
+        window.addEventListener('click', this.windowClick, true);
+    },
+    beforeDestroy() {
+        window.removeEventListener('click', this.windowClick, true);
+    },
+    computed: {
+        inputVal: {
+            get: function () {
+                return this.value;
+            },
+
+            set: function (value) {
+                this.$emit('input', value);
+            }
+        },
+        placeholder: function () {
+            return this.inputType == 'email' ? 'Enter contact email address' : 'Enter contact mobile number';
+        }
+    },
+    methods: {
+        textForType(type) {
+            switch (type) {
+                case 'email':
+                    return 'Search for a contact by email address';
+                case 'mobile':
+                    return 'Search for a contact by mobile';
+                default:
+                     return 'Search for a contact by ' + this.inputType;
+            }
+        },
+        iconForType(type) {
+            switch (type) {
+                case 'email':
+                    return 'toggle-contact-search-icon-email'
+                case 'mobile':
+                    return 'toggle-contact-search-icon-mobile'
+                default:
+                    return 'toggle-contact-search-icon-email'
+            }
+        },
+        onEnter(e) {
+            this.$emit('enterPressed', {
+                type: this.inputType,
+                value: e.target.value
+            });
+        },
+        onSearch() {
+            this.$emit('clickSearch', {
+                type: this.inputType,
+                value: this.inputVal
+            });
+        },
+        windowClick(e) {
+            if (!e.target.matches('.toggle-contact-search-container *')) {
+                this.showDropdown = false;
+            }
+        }
+    }
+}
+
+</script>

package/src/components/forms/ToggleInputCrudField.vue

@@ -13,7 +13,7 @@
     > {{ label }} 
     </button>
      <label 
-        class="toggle-input-crud-container-description"
+        :class="['toggle-input-crud-container-description', {'toggle-input-crud-container-description-hide-overflow':hideDescriptionOverflow}]"
     > {{ description ? description : '&nbsp;' }} 
     </label>
 
@@ -65,7 +65,12 @@ export default {
         empty:{
             type: Boolean,
             default: false
+        },
+        hideDescriptionOverflow:{
+            type: Boolean,
+            default: false
         }
+
     },
 
     created : function(){

package/src/index.js

@@ -22,6 +22,7 @@ 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";
@@ -143,7 +144,8 @@ const Components = {
     ToggleThreeDotsButton,
     ToggleBoosterButton,
     ToggleBoosterBasicButton,
-    ToggleBoosterModal
+    ToggleBoosterModal,
+    ToggleContactSearch
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_inputs.scss

@@ -6,7 +6,8 @@
 .toggle-input-radio-label, 
 .toggle-input-checkbox-label,
 .toggle-input-search-options,
-.toggle-input-select{
+.toggle-input-select,
+.toggle-contact-search-container{
     @include toggle-global-font-config;
 } 
 
@@ -417,7 +418,7 @@
     .toggle-input-radio-label, .toggle-input-checkbox-label{
         opacity: 0.5;
     }
-    .toggle-input-label, .toggle-input{
+    .toggle-input-label, .toggle-input, .toggle-contact-search-container{
         opacity: 0.5;
     }
     .toggle-input-select-container{
@@ -719,6 +720,14 @@ $iconWidth:20px;
     }
 }
 
+
+.toggle-input-crud-container-description-hide-overflow{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: inherit;
+}
+
 .toggle-input-crud-container-buttons{
     .toggle-button-container{
         display: block;
@@ -936,4 +945,261 @@ $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

@@ -43,6 +43,22 @@
     height: 2rem;
   }
 
+  .toggle-inline-loader-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .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;
+  }
+
   /*
    * ToggleProgressLoader
    */