toggle-components-library 1.28.7-beta.1 → 1.30.0-beta.0

package/dist/img/arrow-icon.6b7bdc31.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/dist/img/email-icon.3c44b236.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/dist/img/magnifying-glass-icon.9a2b42a1.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/dist/img/mobile-icon.9e16ffcd.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/dist/toggle-components-library.common.js

@@ -14383,8 +14383,8 @@ var ToggleInternationalPhoneInputSelect_component = normalizeComponent(
 )
 
 /* harmony default export */ var ToggleInternationalPhoneInputSelect = (ToggleInternationalPhoneInputSelect_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"53e05152-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ToggleInputCrudField.vue?vue&type=template&id=5e1accbb&
-var ToggleInputCrudFieldvue_type_template_id_5e1accbb_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"53e05152-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ToggleInputCrudField.vue?vue&type=template&id=513c68d4&
+var ToggleInputCrudFieldvue_type_template_id_513c68d4_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -14408,7 +14408,9 @@ var ToggleInputCrudFieldvue_type_template_id_5e1accbb_render = function render()
       }
     }
   }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c('label', {
-    staticClass: "toggle-input-crud-container-description"
+    class: ['toggle-input-crud-container-description', {
+      'toggle-input-crud-container-description-hide-overflow': _vm.hideDescriptionOverflow
+    }]
   }, [_vm._v(" " + _vm._s(_vm.description ? _vm.description : ' ') + " ")]), _c('div', {
     staticClass: "toggle-input-crud-container-buttons"
   }, [!_vm.empty ? _c('ToggleButton', {
@@ -14424,9 +14426,9 @@ var ToggleInputCrudFieldvue_type_template_id_5e1accbb_render = function render()
     staticClass: "toggle-input-label-error"
   }, [_vm._v(" " + _vm._s(_vm.errorMessage) + " ")]) : _vm._e()]);
 };
-var ToggleInputCrudFieldvue_type_template_id_5e1accbb_staticRenderFns = [];
+var ToggleInputCrudFieldvue_type_template_id_513c68d4_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/forms/ToggleInputCrudField.vue?vue&type=template&id=5e1accbb&
+// CONCATENATED MODULE: ./src/components/forms/ToggleInputCrudField.vue?vue&type=template&id=513c68d4&
 
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ToggleInputCrudField.vue?vue&type=script&lang=js&
 
@@ -14459,6 +14461,10 @@ var ToggleInputCrudFieldvue_type_template_id_5e1accbb_staticRenderFns = [];
     empty: {
       type: Boolean,
       default: false
+    },
+    hideDescriptionOverflow: {
+      type: Boolean,
+      default: false
     }
   },
   created: function () {},
@@ -14488,8 +14494,8 @@ var ToggleInputCrudFieldvue_type_template_id_5e1accbb_staticRenderFns = [];
 
 var ToggleInputCrudField_component = normalizeComponent(
   forms_ToggleInputCrudFieldvue_type_script_lang_js_,
-  ToggleInputCrudFieldvue_type_template_id_5e1accbb_render,
-  ToggleInputCrudFieldvue_type_template_id_5e1accbb_staticRenderFns,
+  ToggleInputCrudFieldvue_type_template_id_513c68d4_render,
+  ToggleInputCrudFieldvue_type_template_id_513c68d4_staticRenderFns,
   false,
   null,
   null,
@@ -16123,6 +16129,244 @@ var ToggleColourPicker_component = normalizeComponent(
 )
 
 /* harmony default export */ var ToggleColourPicker = (ToggleColourPicker_component.exports);
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"53e05152-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ToggleContactSearch.vue?vue&type=template&id=5d84323e&
+var ToggleContactSearchvue_type_template_id_5d84323e_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c('div', {
+    staticClass: "toggle-contact-search-container"
+  }, [_c('div', {
+    staticClass: "toggle-contact-search-error"
+  }, [_vm._v(" " + _vm._s(_vm.isInvalid ? _vm.errorMessage : '') + " ")]), _c('div', {
+    staticClass: "toggle-contact-search-input-container",
+    class: {
+      'toggle-input-is-invalid': _vm.isInvalid,
+      'toggle-contact-search-input-container-active': _vm.showDropdown
+    }
+  }, [_c('div', {
+    staticClass: "toggle-contact-search-icon-input-container"
+  }, [_c('div', {
+    class: {
+      'toggle-contact-search-icon-arrow-container': true,
+      'toggle-contact-search-icon-arrow-container-disabled': _vm.disabled
+    },
+    on: {
+      "click": function ($event) {
+        _vm.showDropdown = !_vm.disabled && !_vm.loading ? !_vm.showDropdown : false;
+      }
+    }
+  }, [_c('div', {
+    staticClass: "toggle-contact-search-icon",
+    class: {
+      'toggle-contact-search-icon-email': _vm.inputType == 'email',
+      'toggle-contact-search-icon-mobile': _vm.inputType == 'mobile'
+    }
+  }), _c('div', {
+    staticClass: "toggle-contact-search-arrow",
+    class: {
+      'toggle-contact-search-arrow-active': _vm.showDropdown
+    }
+  })]), _c('div', {
+    staticClass: "toggle-contact-search-divider"
+  }), _c('input', {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.inputVal,
+      expression: "inputVal"
+    }],
+    class: {
+      'toggle-contact-search-input': true,
+      'toggle-contact-search-disabled': _vm.disabled
+    },
+    attrs: {
+      "disabled": _vm.disabled || _vm.loading,
+      "type": "text",
+      "placeholder": _vm.placeholder
+    },
+    domProps: {
+      "value": _vm.inputVal
+    },
+    on: {
+      "keyup": function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) return null;
+        return _vm.onEnter.apply(null, arguments);
+      },
+      "input": function ($event) {
+        if ($event.target.composing) return;
+        _vm.inputVal = $event.target.value;
+      }
+    }
+  }), _vm.loading ? _c('div', {
+    staticClass: "toggle-contact-search-loading-container"
+  }, [_c('div', {
+    staticClass: "toggle-inline-loader"
+  })]) : _c('div', {
+    class: {
+      'toggle-contact-search-magnifying-glass-icon': true,
+      'toggle-contact-search-magnifying-glass-icon-disabled': _vm.disabled
+    },
+    on: {
+      "click": _vm.onSearch
+    }
+  })]), _c('Transition', {
+    attrs: {
+      "name": "drop-down"
+    }
+  }, [_vm.showDropdown ? _c('div', {
+    staticClass: "toggle-contact-search-dropdown-container"
+  }, _vm._l(_vm.types, function (type, i) {
+    return _c('div', {
+      key: i,
+      on: {
+        "click": function ($event) {
+          _vm.inputType = type;
+          _vm.showDropdown = false;
+          _vm.loading = false;
+        }
+      }
+    }, [_c('div', {
+      staticClass: "toggle-contact-search-dropdown-item"
+    }, [_c('div', {
+      staticClass: "toggle-contact-search-icon-dropdown",
+      class: _vm.iconForType(type)
+    }), _c('label', {
+      staticClass: "toggle-contact-search-dropdown-item-label",
+      class: {
+        'toggle-contact-search-dropwdown-item-highlighted': type == _vm.inputType
+      }
+    }, [_vm._v(" " + _vm._s(_vm.textForType(type)) + " ")])])]);
+  }), 0) : _vm._e()])], 1)]);
+};
+var ToggleContactSearchvue_type_template_id_5d84323e_staticRenderFns = [];
+
+// CONCATENATED MODULE: ./src/components/forms/ToggleContactSearch.vue?vue&type=template&id=5d84323e&
+
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/forms/ToggleContactSearch.vue?vue&type=script&lang=js&
+
+/* harmony default export */ var ToggleContactSearchvue_type_script_lang_js_ = ({
+  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;
+      }
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/forms/ToggleContactSearch.vue?vue&type=script&lang=js&
+ /* harmony default export */ var forms_ToggleContactSearchvue_type_script_lang_js_ = (ToggleContactSearchvue_type_script_lang_js_); 
+// CONCATENATED MODULE: ./src/components/forms/ToggleContactSearch.vue
+
+
+
+
+
+/* normalize component */
+
+var ToggleContactSearch_component = normalizeComponent(
+  forms_ToggleContactSearchvue_type_script_lang_js_,
+  ToggleContactSearchvue_type_template_id_5d84323e_render,
+  ToggleContactSearchvue_type_template_id_5d84323e_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var ToggleContactSearch = (ToggleContactSearch_component.exports);
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"53e05152-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/boosters/ToggleBoosterButton.vue?vue&type=template&id=680935ac&scoped=true&
 var ToggleBoosterButtonvue_type_template_id_680935ac_scoped_true_render = function render() {
   var _vm = this,
@@ -20175,6 +20419,7 @@ var main = __webpack_require__("dc44");
 
 
 
+
 
 
 const Components = {
@@ -20238,7 +20483,8 @@ const Components = {
   ToggleThreeDotsButton: ToggleThreeDotsButton,
   ToggleBoosterButton: ToggleBoosterButton,
   ToggleBoosterBasicButton: ToggleBoosterBasicButton,
-  ToggleBoosterModal: ToggleBoosterModal
+  ToggleBoosterModal: ToggleBoosterModal,
+  ToggleContactSearch: ToggleContactSearch
 };
 Object.keys(Components).forEach(name => {
   external_commonjs_vue_commonjs2_vue_root_Vue_default.a.component(name, Components[name]);