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

package/src/assets/icons/arrow-icon.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/src/assets/icons/email-icon.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/src/assets/icons/magnifying-glass-icon.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/src/assets/icons/mobile-icon.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>

package/src/components/forms/ToggleContactSearch.vue

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