@mozaic-ds/vue 0.20.0-beta.3 → 0.20.0-beta.6

package/dist/mozaic-vue.common.js

@@ -27236,6 +27236,7 @@ __webpack_require__.d(__webpack_exports__, {
   "MLayer": function() { return /* reexport */ MLayer; },
   "MLink": function() { return /* reexport */ MLink; },
   "MListBox": function() { return /* reexport */ MListBox; },
+  "MListBoxOptions": function() { return /* reexport */ MListBoxOptions; },
   "MLoader": function() { return /* reexport */ MLoader; },
   "MModal": function() { return /* reexport */ MModal; },
   "MNotification": function() { return /* reexport */ MNotification; },
@@ -27288,6 +27289,7 @@ __webpack_require__.d(components_namespaceObject, {
   "MLayer": function() { return MLayer; },
   "MLink": function() { return MLink; },
   "MListBox": function() { return MListBox; },
+  "MListBoxOptions": function() { return MListBoxOptions; },
   "MLoader": function() { return MLoader; },
   "MModal": function() { return MModal; },
   "MNotification": function() { return MNotification; },
@@ -27942,34 +27944,71 @@ MAccordion.install = function (Vue) {
 };
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/autocomplete/MAutocomplete.vue?vue&type=template&id=639f3f37&
-var MAutocompletevue_type_template_id_639f3f37_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"template"},[_c('p',[_vm._v("Listbox Value : "+_vm._s(_vm.listboxValue))]),_c('div',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.onClickOutside),expression:"onClickOutside"}],ref:"autocomplete",staticClass:"mc-autocomplete",class:{ 'mc-autocomplete--multi': _vm.multiple },style:(_vm.tagStyle)},[(_vm.multiple && _vm.tagValue.length > 1)?_c('m-tag',{staticClass:"mc-autocomplete__tag",attrs:{"type":"removable","label":_vm.tagValue.length.toString() + ' ' + _vm.tagLabel,"size":"s"},on:{"remove-tag":function($event){return _vm.clearAutocomplete()}}}):_vm._e(),_c('m-text-input',{attrs:{"placeholder":_vm.placeholder,"text-input-field-class":"mc-autocomplete__trigger","icon-position":"left","icon":"DisplaySearch48","autocomplete":"off"},on:{"input":_vm.filterList,"click":function($event){_vm.isOpen = true}},model:{value:(_vm.inputValue),callback:function ($$v) {_vm.inputValue=$$v},expression:"inputValue"}}),_c('m-list-box',{attrs:{"open":_vm.isOpen,"items":_vm.itemListForDropdown,"multiple":_vm.multiple,"empty-search-label":_vm.emptySearchLabel,"data-key-expr":_vm.dataKeyExpr,"data-text-expr":_vm.dataTextExpr,"data-value-expr":_vm.dataValueExpr},scopedSlots:_vm._u([{key:"item",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/autocomplete/MAutocomplete.vue?vue&type=template&id=a2d4a1c4&
+var MAutocompletevue_type_template_id_a2d4a1c4_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"autocomplete",staticClass:"mc-autocomplete",class:{ 'mc-autocomplete--multi': _vm.multiple },style:(_vm.tagStyle),on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }_vm.isOpen = true}}},[(_vm.multiple && _vm.selectedItems().length > 0)?_c('m-tag',{staticClass:"mc-autocomplete__tag",attrs:{"id":"tag","type":"removable","label":_vm.selectedItems().length.toString() + ' ' + _vm.labelTag,"size":"s"},on:{"remove-tag":function($event){return _vm.removeElementsFromList()}}}):_vm._e(),_c('m-text-input',{style:({ width: _vm.boxWidth + 'px' }),attrs:{"placeholder":_vm.placeholder,"text-input-field-class":"mc-autocomplete__trigger","icon-position":"left","icon":"DisplaySearch48","autocomplete":"off"},on:{"input":_vm.filerList,"click":function($event){_vm.isOpen = true}},model:{value:(_vm.itemDisplayed),callback:function ($$v) {_vm.itemDisplayed=$$v},expression:"itemDisplayed"}}),_c('m-list-box',{style:({ width: _vm.boxWidth + 'px' }),attrs:{"open":_vm.isOpen,"items":_vm.sort ? _vm.orderedItems() : _vm.itemListForDropdown,"multiple":_vm.multiple,"empty-search-label":_vm.emptySearchLabel},on:{"update:itemSelected":_vm.updateList,"close-list-box":function($event){_vm.isOpen = false}},scopedSlots:_vm._u([{key:"item",fn:function(ref){
 var item = ref.item;
-return [_vm._t("item",null,{"item":item})]}}],null,true),model:{value:(_vm.listboxValue),callback:function ($$v) {_vm.listboxValue=$$v},expression:"listboxValue"}})],1)])}
-var MAutocompletevue_type_template_id_639f3f37_staticRenderFns = []
+return [_vm._t("item",null,{"item":item})]}}],null,true)})],1)}
+var MAutocompletevue_type_template_id_a2d4a1c4_staticRenderFns = []
 
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.find.js
-var es_array_find = __webpack_require__(9826);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.filter.js
 var es_array_filter = __webpack_require__(7327);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.sort.js
+var es_array_sort = __webpack_require__(2707);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.includes.js
 var es_string_includes = __webpack_require__(2023);
-;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=template&id=9945e1e6&
-var MListBoxvue_type_template_id_9945e1e6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.items.length > 0)?_c('ul',{ref:"listbox",staticClass:"mc-listbox",class:{ 'is-open': _vm.open, 'mc-listbox--multi': _vm.multiple },attrs:{"role":"listbox","aria-labelledby":"listbox"}},_vm._l((_vm.selectableItems),function(item){return _c('li',{key:item.id,staticClass:"mc-listbox__item"},[_vm._t("item",function(){return [_c('label',{staticClass:"mc-listbox__label",attrs:{"for":("checkbox-dropdown-" + (item[_vm.dataKeyExpr]) + "-" + _vm.uuid)}},[_vm._v(_vm._s(item[_vm.dataTextExpr])+" ")])]},{"item":item}),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.localValue),expression:"localValue"}],ref:"input",refInFor:true,staticClass:"mc-checkbox__input mc-listbox__input",class:{ hideCheckbox: !_vm.multiple },attrs:{"id":("checkbox-dropdown-" + (item[_vm.dataKeyExpr]) + "-" + _vm.uuid),"type":"checkbox"},domProps:{"value":item.value,"checked":Array.isArray(_vm.localValue)?_vm._i(_vm.localValue,item.value)>-1:(_vm.localValue)},on:{"change":[function($event){var $$a=_vm.localValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=item.value,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.localValue=$$a.concat([$$v]))}else{$$i>-1&&(_vm.localValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.localValue=$$c}},_vm.onChange]}})],2)}),0):_c('div',{staticClass:"mc-list-box__empty"},[_vm._v(" "+_vm._s(_vm.emptySearchLabel)+" ")])}
-var MListBoxvue_type_template_id_9945e1e6_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInput.vue?vue&type=template&id=60f974b3&
+var MTextInputvue_type_template_id_60f974b3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.icon)?_c('div',{key:"icon-input",staticClass:"mc-left-icon-input",class:_vm.cssFieldElementClass},[_c('m-text-input-icon',{attrs:{"icon":_vm.icon}}),_c('m-text-input-field',_vm._g(_vm._b({ref:"mField",class:_vm.textInputFieldClass},'m-text-input-field',[_vm.$attrs, _vm.$props],false),_vm.$listeners))],1):_c('m-text-input-field',_vm._g(_vm._b({key:"input-only",ref:"mField",class:_vm.cssFieldElementClass},'m-text-input-field',[_vm.$attrs, _vm.$props],false),_vm.$listeners))}
+var MTextInputvue_type_template_id_60f974b3_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputField.vue?vue&type=template&id=61a01666&
+var MTextInputFieldvue_type_template_id_61a01666_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',_vm._g({staticClass:"mc-text-input",class:_vm.setClasses,attrs:{"type":_vm.type,"required":_vm.required,"aria-invalid":_vm.isInvalid},domProps:{"value":_vm.value},on:{"input":function($event){return _vm.$emit('input', $event.target.value)}}},_vm.inputListeners))}
+var MTextInputFieldvue_type_template_id_61a01666_staticRenderFns = []
+
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.number.constructor.js
+var es_number_constructor = __webpack_require__(9653);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.assign.js
+var es_object_assign = __webpack_require__(9601);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.exec.js
+var es_regexp_exec = __webpack_require__(4916);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.split.js
+var es_string_split = __webpack_require__(3123);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.replace.js
+var es_string_replace = __webpack_require__(5306);
+;// CONCATENATED MODULE: ./src/utils/mozaicClasses.js
+
 
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.from.js
-var es_array_from = __webpack_require__(1038);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.slice.js
-var es_array_slice = __webpack_require__(7042);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=script&lang=js&
 
 
 
 
 
+
+var modifierList = function modifierList(modifiers) {
+  return modifiers.replace(' ', '').split(',');
+};
+
+var responsiveModifierValidators = function responsiveModifierValidators(modifiers, authorizedModifiers) {
+  return modifierList(modifiers).every(function (modifier) {
+    return authorizedModifiers.includes(modifier);
+  });
+};
+var responsiveModifiers = function responsiveModifiers(baseClass, modifiers, outputClasses) {
+  modifierList(modifiers).forEach(function (classSuffix) {
+    outputClasses.push("".concat(baseClass, "--").concat(classSuffix));
+  });
+};
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputField.vue?vue&type=script&lang=js&
+
+
+
+//
+//
+//
+//
 //
 //
 //
@@ -27979,12 +28018,172 @@ var es_array_slice = __webpack_require__(7042);
 //
 //
 //
+
+var supportedTypes = ['date', 'email', 'number', 'password', 'tel', 'text', 'time', 'search'];
+/* harmony default export */ var MTextInputFieldvue_type_script_lang_js_ = ({
+  name: 'MTextInputField',
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+      validator: function validator(type) {
+        return supportedTypes.includes(type);
+      }
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: [String, Number],
+      default: null
+    },
+    isValid: {
+      type: Boolean,
+      default: false
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      default: 'm',
+      validator: function validator(value) {
+        return responsiveModifierValidators(value, ['s', 'm']);
+      }
+    }
+  },
+  computed: {
+    setClasses: function setClasses() {
+      var classes = [];
+
+      if (this.isValid) {
+        classes.push('is-valid');
+      }
+
+      if (this.isInvalid) {
+        classes.push('is-invalid');
+      }
+
+      if (this.icon) {
+        classes.push('mc-left-icon-input__input');
+      }
+
+      if (this.size) {
+        responsiveModifiers('mc-text-input', this.size, classes);
+      }
+
+      return classes;
+    },
+    inputListeners: function inputListeners() {
+      // see => https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
+      var vm = this;
+      return Object.assign({}, this.$listeners, {
+        input: function input(event) {
+          vm.$emit('input', event.target.value);
+        }
+      });
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/textinput/MTextInputField.vue?vue&type=script&lang=js&
+ /* harmony default export */ var textinput_MTextInputFieldvue_type_script_lang_js_ = (MTextInputFieldvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputField.vue?vue&type=style&index=0&lang=scss&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/textinput/MTextInputField.vue?vue&type=style&index=0&lang=scss&
+
+;// CONCATENATED MODULE: ./src/components/textinput/MTextInputField.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var MTextInputField_component = normalizeComponent(
+  textinput_MTextInputFieldvue_type_script_lang_js_,
+  MTextInputFieldvue_type_template_id_61a01666_render,
+  MTextInputFieldvue_type_template_id_61a01666_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var MTextInputField = (MTextInputField_component.exports);
+;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputIcon.vue?vue&type=template&id=4963e496&
+var MTextInputIconvue_type_template_id_4963e496_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('m-icon',{key:"text-input-icon",staticClass:"mc-left-icon-input__icon",attrs:{"id":("mc-text-input__icon-" + _vm.id),"name":_vm.icon}})}
+var MTextInputIconvue_type_template_id_4963e496_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputIcon.vue?vue&type=script&lang=js&
+//
+//
+//
 //
 //
 //
 //
 //
 //
+
+/* harmony default export */ var MTextInputIconvue_type_script_lang_js_ = ({
+  name: 'MTextInputIcon',
+  components: {
+    MIcon: MIcon
+  },
+  props: {
+    icon: {
+      type: String,
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      id: null
+    };
+  },
+  created: function created() {
+    this.id = this._uid;
+  }
+});
+;// CONCATENATED MODULE: ./src/components/textinput/MTextInputIcon.vue?vue&type=script&lang=js&
+ /* harmony default export */ var textinput_MTextInputIconvue_type_script_lang_js_ = (MTextInputIconvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputIcon.vue?vue&type=style&index=0&lang=scss&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/textinput/MTextInputIcon.vue?vue&type=style&index=0&lang=scss&
+
+;// CONCATENATED MODULE: ./src/components/textinput/MTextInputIcon.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var MTextInputIcon_component = normalizeComponent(
+  textinput_MTextInputIconvue_type_script_lang_js_,
+  MTextInputIconvue_type_template_id_4963e496_render,
+  MTextInputIconvue_type_template_id_4963e496_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var MTextInputIcon = (MTextInputIcon_component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInput.vue?vue&type=script&lang=js&
 //
 //
 //
@@ -28011,128 +28210,45 @@ var es_array_slice = __webpack_require__(7042);
 //
 //
 //
-/* harmony default export */ var MListBoxvue_type_script_lang_js_ = ({
-  name: 'MListbox',
-  model: {
-    event: 'change'
+
+
+/* harmony default export */ var MTextInputvue_type_script_lang_js_ = ({
+  name: 'MTextInput',
+  components: {
+    MTextInputField: MTextInputField,
+    MTextInputIcon: MTextInputIcon
+  },
+  inject: {
+    cssFieldElementClass: {
+      default: ''
+    }
   },
+  inheritAttrs: false,
   props: {
-    open: {
-      type: Boolean,
-      default: false
-    },
-    items: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    emptySearchLabel: {
-      type: String,
-      default: 'No item matching your criteria found'
-    },
     icon: {
-      type: Boolean,
-      default: false
-    },
-    dataKeyExpr: {
-      type: String,
-      default: 'id'
-    },
-    dataTextExpr: {
       type: String,
-      default: 'text'
+      default: null
     },
-    dataValueExpr: {
+    textInputFieldClass: {
       type: String,
-      default: 'text'
-    },
-    value: {
-      type: [Array, String],
-      default: undefined
-    }
-  },
-  data: function data() {
-    return {
-      selectableItems: null,
-      localValue: [],
-      selected: [],
-      uuid: null,
-      inputBaseId: 'listboxInput'
-    };
-  },
-  watch: {
-    items: {
-      handler: function handler(val) {
-        this.selectableItems = val;
-      },
-      immediate: true
-    },
-    value: {
-      handler: function handler(value) {
-        this.localValue = value;
-      },
-      immediate: true
-    },
-    localValue: {
-      handler: function handler(localValue) {
-        var inputs = this.$refs.input;
-
-        if (!this.multiple && inputs) {
-          var selectedValue = Array.from(localValue);
-          inputs.forEach(function (input) {
-            var listItem = input.closest('.mc-listbox__item');
-
-            if (input.value == selectedValue[0]) {
-              listItem.classList.add('is-checked');
-            } else {
-              listItem.classList.remove('is-checked');
-            }
-          });
-        }
-      },
-      immediate: true
-    }
-  },
-  mounted: function mounted() {
-    this.uuid = Math.random();
-  },
-  methods: {
-    onChange: function onChange() {
-      if (!this.multiple) {
-        var currentValue = this.localValue;
-        this.localValue = [];
-        this.localValue = currentValue.slice(-1);
-      }
-
-      this.$emit('change', this.localValue);
+      default: null
     }
   }
 });
-;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue?vue&type=script&lang=js&
- /* harmony default export */ var listbox_MListBoxvue_type_script_lang_js_ = (MListBoxvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=style&index=0&lang=scss&
-// extracted by mini-css-extract-plugin
-
-;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue?vue&type=style&index=0&lang=scss&
-
-;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue
+;// CONCATENATED MODULE: ./src/components/textinput/MTextInput.vue?vue&type=script&lang=js&
+ /* harmony default export */ var textinput_MTextInputvue_type_script_lang_js_ = (MTextInputvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./src/components/textinput/MTextInput.vue
 
 
 
-;
 
 
 /* normalize component */
-
-var MListBox_component = normalizeComponent(
-  listbox_MListBoxvue_type_script_lang_js_,
-  MListBoxvue_type_template_id_9945e1e6_render,
-  MListBoxvue_type_template_id_9945e1e6_staticRenderFns,
+;
+var MTextInput_component = normalizeComponent(
+  textinput_MTextInputvue_type_script_lang_js_,
+  MTextInputvue_type_template_id_60f974b3_render,
+  MTextInputvue_type_template_id_60f974b3_staticRenderFns,
   false,
   null,
   null,
@@ -28140,7 +28256,7 @@ var MListBox_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var MListBox = (MListBox_component.exports);
+/* harmony default export */ var MTextInput = (MTextInput_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tags/MTag.vue?vue&type=template&id=6adf0246&
 var MTagvue_type_template_id_6adf0246_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.type === 'text')?_c('span',{staticClass:"mc-tag-text",class:_vm.setClasses},[_c('span',{staticClass:"mc-tag-text__label"},[_vm._v(" "+_vm._s(_vm.label)+" ")])]):(_vm.type === 'link')?_c('a',{staticClass:"mc-tag-link",class:_vm.setClasses,attrs:{"href":_vm.href}},[_c('span',{staticClass:"mc-tag-link__label"},[_vm._v(" "+_vm._s(_vm.label)+" ")])]):(_vm.type === 'selectable')?_c('span',{staticClass:"mc-tag-selectable",class:_vm.setClasses},[_c('input',{staticClass:"mc-tag-selectable__input",attrs:{"id":_vm.id,"type":"checkbox","name":_vm.name,"required":_vm.required,"disabled":_vm.disabled},domProps:{"value":_vm.value,"checked":_vm.checked},on:{"change":function($event){return _vm.$emit('change', $event.target.checked)}}}),_c('label',{staticClass:"mc-tag-selectable__pill",attrs:{"for":_vm.id}},[_c('span',{staticClass:"mc-tag-selectable__label"},[_vm._v(" "+_vm._s(_vm.label)+" ")])])]):(_vm.type === 'removable')?_c('span',{staticClass:"mc-tag-removable",class:_vm.setClasses},[_c('span',{staticClass:"mc-tag-removable__label"},[_vm._v(" "+_vm._s(_vm.label)+" ")]),_c('button',{staticClass:"mc-tag-removable__remove",attrs:{"type":"button"},on:{"click":function($event){return _vm.$emit('remove-tag')}}})]):_vm._e()}
 var MTagvue_type_template_id_6adf0246_staticRenderFns = []
@@ -28152,8 +28268,10 @@ var es_symbol = __webpack_require__(2526);
 var es_symbol_description = __webpack_require__(1817);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.symbol.iterator.js
 var es_symbol_iterator = __webpack_require__(2165);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.exec.js
-var es_regexp_exec = __webpack_require__(4916);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.slice.js
+var es_array_slice = __webpack_require__(7042);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.from.js
+var es_array_from = __webpack_require__(1038);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.test.js
 var es_regexp_test = __webpack_require__(7601);
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
@@ -28249,34 +28367,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
     }
   };
 }
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.split.js
-var es_string_split = __webpack_require__(3123);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.replace.js
-var es_string_replace = __webpack_require__(5306);
-;// CONCATENATED MODULE: ./src/utils/mozaicClasses.js
-
-
-
-
-
-
-
-
-
-var modifierList = function modifierList(modifiers) {
-  return modifiers.replace(' ', '').split(',');
-};
-
-var responsiveModifierValidators = function responsiveModifierValidators(modifiers, authorizedModifiers) {
-  return modifierList(modifiers).every(function (modifier) {
-    return authorizedModifiers.includes(modifier);
-  });
-};
-var responsiveModifiers = function responsiveModifiers(baseClass, modifiers, outputClasses) {
-  modifierList(modifiers).forEach(function (classSuffix) {
-    outputClasses.push("".concat(baseClass, "--").concat(classSuffix));
-  });
-};
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tags/MTag.vue?vue&type=script&lang=js&
 
 
@@ -28422,165 +28512,33 @@ var responsiveModifiers = function responsiveModifiers(baseClass, modifiers, out
         var _iterator = _createForOfIteratorHelper(this.responsiveSizeModifiers),
             _step;
 
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var modifier = _step.value;
-            responsiveModifiers('mc-tag', modifier, classes);
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-      }
-
-      return classes;
-    }
-  },
-  created: function created() {
-    this.id = this._uid;
-  }
-});
-;// CONCATENATED MODULE: ./src/components/tags/MTag.vue?vue&type=script&lang=js&
- /* harmony default export */ var tags_MTagvue_type_script_lang_js_ = (MTagvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tags/MTag.vue?vue&type=style&index=0&lang=scss&
-// extracted by mini-css-extract-plugin
-
-;// CONCATENATED MODULE: ./src/components/tags/MTag.vue?vue&type=style&index=0&lang=scss&
-
-;// CONCATENATED MODULE: ./src/components/tags/MTag.vue
-
-
-
-;
-
-
-/* normalize component */
-
-var MTag_component = normalizeComponent(
-  tags_MTagvue_type_script_lang_js_,
-  MTagvue_type_template_id_6adf0246_render,
-  MTagvue_type_template_id_6adf0246_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ var MTag = (MTag_component.exports);
-;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInput.vue?vue&type=template&id=60f974b3&
-var MTextInputvue_type_template_id_60f974b3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.icon)?_c('div',{key:"icon-input",staticClass:"mc-left-icon-input",class:_vm.cssFieldElementClass},[_c('m-text-input-icon',{attrs:{"icon":_vm.icon}}),_c('m-text-input-field',_vm._g(_vm._b({ref:"mField",class:_vm.textInputFieldClass},'m-text-input-field',[_vm.$attrs, _vm.$props],false),_vm.$listeners))],1):_c('m-text-input-field',_vm._g(_vm._b({key:"input-only",ref:"mField",class:_vm.cssFieldElementClass},'m-text-input-field',[_vm.$attrs, _vm.$props],false),_vm.$listeners))}
-var MTextInputvue_type_template_id_60f974b3_staticRenderFns = []
-
-
-;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputField.vue?vue&type=template&id=61a01666&
-var MTextInputFieldvue_type_template_id_61a01666_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',_vm._g({staticClass:"mc-text-input",class:_vm.setClasses,attrs:{"type":_vm.type,"required":_vm.required,"aria-invalid":_vm.isInvalid},domProps:{"value":_vm.value},on:{"input":function($event){return _vm.$emit('input', $event.target.value)}}},_vm.inputListeners))}
-var MTextInputFieldvue_type_template_id_61a01666_staticRenderFns = []
-
-
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.number.constructor.js
-var es_number_constructor = __webpack_require__(9653);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.assign.js
-var es_object_assign = __webpack_require__(9601);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputField.vue?vue&type=script&lang=js&
-
-
-
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-var supportedTypes = ['date', 'email', 'number', 'password', 'tel', 'text', 'time', 'search'];
-/* harmony default export */ var MTextInputFieldvue_type_script_lang_js_ = ({
-  name: 'MTextInputField',
-  props: {
-    type: {
-      type: String,
-      default: 'text',
-      validator: function validator(type) {
-        return supportedTypes.includes(type);
-      }
-    },
-    required: {
-      type: Boolean,
-      default: false
-    },
-    value: {
-      type: [String, Number],
-      default: null
-    },
-    isValid: {
-      type: Boolean,
-      default: false
-    },
-    isInvalid: {
-      type: Boolean,
-      default: false
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    size: {
-      type: String,
-      default: 'm',
-      validator: function validator(value) {
-        return responsiveModifierValidators(value, ['s', 'm']);
-      }
-    }
-  },
-  computed: {
-    setClasses: function setClasses() {
-      var classes = [];
-
-      if (this.isValid) {
-        classes.push('is-valid');
-      }
-
-      if (this.isInvalid) {
-        classes.push('is-invalid');
-      }
-
-      if (this.icon) {
-        classes.push('mc-left-icon-input__input');
-      }
-
-      if (this.size) {
-        responsiveModifiers('mc-text-input', this.size, classes);
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var modifier = _step.value;
+            responsiveModifiers('mc-tag', modifier, classes);
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
       }
 
       return classes;
-    },
-    inputListeners: function inputListeners() {
-      // see => https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
-      var vm = this;
-      return Object.assign({}, this.$listeners, {
-        input: function input(event) {
-          vm.$emit('input', event.target.value);
-        }
-      });
     }
+  },
+  created: function created() {
+    this.id = this._uid;
   }
 });
-;// CONCATENATED MODULE: ./src/components/textinput/MTextInputField.vue?vue&type=script&lang=js&
- /* harmony default export */ var textinput_MTextInputFieldvue_type_script_lang_js_ = (MTextInputFieldvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputField.vue?vue&type=style&index=0&lang=scss&
+;// CONCATENATED MODULE: ./src/components/tags/MTag.vue?vue&type=script&lang=js&
+ /* harmony default export */ var tags_MTagvue_type_script_lang_js_ = (MTagvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tags/MTag.vue?vue&type=style&index=0&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/textinput/MTextInputField.vue?vue&type=style&index=0&lang=scss&
+;// CONCATENATED MODULE: ./src/components/tags/MTag.vue?vue&type=style&index=0&lang=scss&
 
-;// CONCATENATED MODULE: ./src/components/textinput/MTextInputField.vue
+;// CONCATENATED MODULE: ./src/components/tags/MTag.vue
 
 
 
@@ -28589,10 +28547,10 @@ var supportedTypes = ['date', 'email', 'number', 'password', 'tel', 'text', 'tim
 
 /* normalize component */
 
-var MTextInputField_component = normalizeComponent(
-  textinput_MTextInputFieldvue_type_script_lang_js_,
-  MTextInputFieldvue_type_template_id_61a01666_render,
-  MTextInputFieldvue_type_template_id_61a01666_staticRenderFns,
+var MTag_component = normalizeComponent(
+  tags_MTagvue_type_script_lang_js_,
+  MTagvue_type_template_id_6adf0246_render,
+  MTagvue_type_template_id_6adf0246_staticRenderFns,
   false,
   null,
   null,
@@ -28600,13 +28558,50 @@ var MTextInputField_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var MTextInputField = (MTextInputField_component.exports);
-;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputIcon.vue?vue&type=template&id=4963e496&
-var MTextInputIconvue_type_template_id_4963e496_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('m-icon',{key:"text-input-icon",staticClass:"mc-left-icon-input__icon",attrs:{"id":("mc-text-input__icon-" + _vm.id),"name":_vm.icon}})}
-var MTextInputIconvue_type_template_id_4963e496_staticRenderFns = []
+/* harmony default export */ var MTag = (MTag_component.exports);
+;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=template&id=4d874509&
+var MListBoxvue_type_template_id_4d874509_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.items.length > 0)?_c('ul',{ref:"listbox",staticClass:"mc-listbox",class:{ 'is-open': _vm.open, 'mc-listbox--multi': _vm.multiple },attrs:{"role":"listbox","aria-labelledby":"listbox"}},_vm._l((_vm.selectableItems),function(item){return _c('li',{key:item.id,staticClass:"mc-listbox__item",on:{"change":function($event){return _vm.$emit('update:itemSelected', item)},"click":function($event){if($event.target !== $event.currentTarget){ return null; }return _vm.updateList(item.id, item.text, !item.selected, true)}}},[_vm._t("item",function(){return [_c('span',{staticClass:"mc-listbox__text"},[_vm._v(_vm._s(item.text)+" ")])]},{"item":item}),(_vm.multiple)?_c('m-checkbox',{staticClass:"mc-listbox__input",attrs:{"id":("checkbox-dropdown-" + (item.id))},on:{"change":function($event){return _vm.updateList(item.id, item.text, !item.selected, _vm.$e)}},model:{value:(_vm.selectableItems.find(function (elem) { return elem.id === item.id; }).selected),callback:function ($$v) {_vm.$set(_vm.selectableItems.find(function (elem) { return elem.id === item.id; }), "selected", $$v)},expression:"selectableItems.find((elem) => elem.id === item.id).selected"}}):_vm._e()],2)}),0):_c('div',{staticClass:"mc-list-box__empty"},[_vm._v(" "+_vm._s(_vm.emptySearchLabel)+" ")])}
+var MListBoxvue_type_template_id_4d874509_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputIcon.vue?vue&type=script&lang=js&
+;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/iterableToArray.js
+
+
+
+
+
+
+
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js
+
+
+
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.find.js
+var es_array_find = __webpack_require__(9826);
+;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/checkbox/MCheckbox.vue?vue&type=template&id=2a917fb6&
+var MCheckboxvue_type_template_id_2a917fb6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.hasLabel)?_c('div',{staticClass:"mc-checkbox"},[_c('input',_vm._b({ref:"input",staticClass:"mc-checkbox__input",class:_vm.setInputClasses,attrs:{"id":_vm.id,"name":_vm.name,"type":"checkbox","required":_vm.required,"disabled":_vm.disabled},domProps:{"checked":_vm.checked},on:{"change":function($event){return _vm.$emit('change', $event.target.checked)}}},'input',_vm.$attrs,false)),_c('label',{staticClass:"mc-checkbox__label",attrs:{"for":_vm.id}},[_vm._t("label",function(){return [_vm._v(" "+_vm._s(_vm.label)+" ")]})],2)]):_c('input',_vm._b({ref:"input",staticClass:"mc-checkbox__input",class:_vm.setInputClasses,attrs:{"id":_vm.id,"name":_vm.name,"type":"checkbox","required":_vm.required,"disabled":_vm.disabled},domProps:{"checked":_vm.checked},on:{"change":function($event){return _vm.$emit('change', $event.target.checked)}}},'input',_vm.$attrs,false))}
+var MCheckboxvue_type_template_id_2a917fb6_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/checkbox/MCheckbox.vue?vue&type=script&lang=js&
 //
 //
 //
@@ -28616,35 +28611,108 @@ var MTextInputIconvue_type_template_id_4963e496_staticRenderFns = []
 //
 //
 //
-
-/* harmony default export */ var MTextInputIconvue_type_script_lang_js_ = ({
-  name: 'MTextInputIcon',
-  components: {
-    MIcon: MIcon
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ var MCheckboxvue_type_script_lang_js_ = ({
+  name: 'MCheckbox',
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'change'
   },
   props: {
-    icon: {
+    id: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      default: null
+    },
+    label: {
       type: String,
       default: null
+    },
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false
     }
   },
-  data: function data() {
-    return {
-      id: null
-    };
+  computed: {
+    hasLabel: function hasLabel() {
+      return this.label != null || this.$slots.label != null;
+    },
+    setInputClasses: function setInputClasses() {
+      return {
+        'is-invalid': this.isInvalid
+      };
+    }
   },
-  created: function created() {
-    this.id = this._uid;
+  watch: {
+    indeterminate: function indeterminate() {
+      this.setIndeterminate();
+    }
+  },
+  mounted: function mounted() {
+    this.setIndeterminate();
+  },
+  methods: {
+    setIndeterminate: function setIndeterminate() {
+      this.$refs.input.indeterminate = this.indeterminate;
+    }
   }
 });
-;// CONCATENATED MODULE: ./src/components/textinput/MTextInputIcon.vue?vue&type=script&lang=js&
- /* harmony default export */ var textinput_MTextInputIconvue_type_script_lang_js_ = (MTextInputIconvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputIcon.vue?vue&type=style&index=0&lang=scss&
+;// CONCATENATED MODULE: ./src/components/checkbox/MCheckbox.vue?vue&type=script&lang=js&
+ /* harmony default export */ var checkbox_MCheckboxvue_type_script_lang_js_ = (MCheckboxvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/checkbox/MCheckbox.vue?vue&type=style&index=0&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/textinput/MTextInputIcon.vue?vue&type=style&index=0&lang=scss&
+;// CONCATENATED MODULE: ./src/components/checkbox/MCheckbox.vue?vue&type=style&index=0&lang=scss&
 
-;// CONCATENATED MODULE: ./src/components/textinput/MTextInputIcon.vue
+;// CONCATENATED MODULE: ./src/components/checkbox/MCheckbox.vue
 
 
 
@@ -28653,10 +28721,10 @@ var MTextInputIconvue_type_template_id_4963e496_staticRenderFns = []
 
 /* normalize component */
 
-var MTextInputIcon_component = normalizeComponent(
-  textinput_MTextInputIconvue_type_script_lang_js_,
-  MTextInputIconvue_type_template_id_4963e496_render,
-  MTextInputIconvue_type_template_id_4963e496_staticRenderFns,
+var MCheckbox_component = normalizeComponent(
+  checkbox_MCheckboxvue_type_script_lang_js_,
+  MCheckboxvue_type_template_id_2a917fb6_render,
+  MCheckboxvue_type_template_id_2a917fb6_staticRenderFns,
   false,
   null,
   null,
@@ -28664,8 +28732,19 @@ var MTextInputIcon_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var MTextInputIcon = (MTextInputIcon_component.exports);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInput.vue?vue&type=script&lang=js&
+/* harmony default export */ var MCheckbox = (MCheckbox_component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=script&lang=js&
+
+
+
+
+
+//
+//
+//
+//
+//
+//
 //
 //
 //
@@ -28693,44 +28772,105 @@ var MTextInputIcon_component = normalizeComponent(
 //
 //
 
-
-/* harmony default export */ var MTextInputvue_type_script_lang_js_ = ({
-  name: 'MTextInput',
+/* harmony default export */ var MListBoxvue_type_script_lang_js_ = ({
+  name: 'MListbox',
   components: {
-    MTextInputField: MTextInputField,
-    MTextInputIcon: MTextInputIcon
+    MCheckbox: MCheckbox
   },
-  inject: {
-    cssFieldElementClass: {
-      default: ''
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    emptySearchLabel: {
+      type: String,
+      default: 'No item matching your criteria found'
+    },
+    icon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      selectableItems: null,
+      selected: []
+    };
+  },
+  watch: {
+    items: {
+      handler: function handler(val) {
+        this.selectableItems = val;
+      },
+      immediate: true
     }
   },
-  inheritAttrs: false,
-  props: {
-    icon: {
-      type: String,
-      default: null
-    },
-    textInputFieldClass: {
-      type: String,
-      default: null
+  methods: {
+    updateList: function updateList(id, text, value, isCheckboxUpdate) {
+      if (!this.multiple) {
+        this.$emit('update:itemSelected', [{
+          id: id,
+          selected: value,
+          text: text
+        }]);
+        this.$emit('close-list-box');
+        return;
+      }
+
+      if (isCheckboxUpdate && this.selectableItems.find(function (item) {
+        return item.id === id;
+      })) {
+        this.selectableItems.find(function (item) {
+          return item.id === id;
+        }).selected = value;
+      }
+
+      if (value) {
+        this.selected = [].concat(_toConsumableArray(this.selected), [{
+          id: id,
+          selected: value,
+          text: text
+        }]);
+      } else {
+        this.selected = this.selected.filter(function (item) {
+          return item.id !== id;
+        });
+      }
+
+      this.$emit('update:itemSelected', this.selectableItems);
     }
   }
 });
-;// CONCATENATED MODULE: ./src/components/textinput/MTextInput.vue?vue&type=script&lang=js&
- /* harmony default export */ var textinput_MTextInputvue_type_script_lang_js_ = (MTextInputvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./src/components/textinput/MTextInput.vue
+;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue?vue&type=script&lang=js&
+ /* harmony default export */ var listbox_MListBoxvue_type_script_lang_js_ = (MListBoxvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=style&index=0&lang=scss&
+// extracted by mini-css-extract-plugin
 
+;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue?vue&type=style&index=0&lang=scss&
 
+;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue
 
 
 
-/* normalize component */
 ;
-var MTextInput_component = normalizeComponent(
-  textinput_MTextInputvue_type_script_lang_js_,
-  MTextInputvue_type_template_id_60f974b3_render,
-  MTextInputvue_type_template_id_60f974b3_staticRenderFns,
+
+
+/* normalize component */
+
+var MListBox_component = normalizeComponent(
+  listbox_MListBoxvue_type_script_lang_js_,
+  MListBoxvue_type_template_id_4d874509_render,
+  MListBoxvue_type_template_id_4d874509_staticRenderFns,
   false,
   null,
   null,
@@ -28738,15 +28878,14 @@ var MTextInput_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var MTextInput = (MTextInput_component.exports);
+/* harmony default export */ var MListBox = (MListBox_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/autocomplete/MAutocomplete.vue?vue&type=script&lang=js&
 
 
 
 
 
-//
-//
+
 //
 //
 //
@@ -28801,45 +28940,21 @@ var MTextInput_component = normalizeComponent(
     MTag: MTag,
     MTextInput: MTextInput
   },
-  directives: {
-    'click-outside': {
-      bind: function bind(el, binding, vnode) {
-        el.clickOutsideEvent = function (event) {
-          if (!(el === event.target || el.contains(event.target))) {
-            vnode.context[binding.expression](event);
-          }
-        };
-
-        document.body.addEventListener('click', el.clickOutsideEvent);
-      },
-      unbind: function unbind(el) {
-        document.body.removeEventListener('click', el.clickOutsideEvent);
-      }
-    }
-  },
   props: {
-    open: {
+    multiple: {
       type: Boolean,
       default: false
     },
-    tagLabel: {
-      type: String,
-      default: 'voitures'
-    },
     placeholder: {
       type: String,
       default: ''
     },
     items: {
       type: Array,
+      required: true,
       default: function _default() {
         return [];
-      },
-      required: true
-    },
-    multiple: {
-      type: Boolean,
-      default: false
+      }
     },
     filter: {
       type: Function,
@@ -28849,34 +28964,27 @@ var MTextInput_component = normalizeComponent(
       type: String,
       default: 'No item matching your criteria found'
     },
-    dataKeyExpr: {
-      type: String,
-      default: 'id'
+    sort: {
+      type: Boolean,
+      default: false
     },
-    dataTextExpr: {
+    labelTag: {
       type: String,
-      default: 'text'
+      default: ''
     },
-    dataValueExpr: {
-      type: String,
-      default: 'text'
-    } // value: {
-    //   type: Array,
-    //   default: () => [],
-    // },
-
+    open: {
+      type: Boolean,
+      default: false
+    }
   },
   data: function data() {
     return {
-      itemListForDropdown: this.items,
-      selected: this.items,
+      itemListForDropdown: this.$props.items,
+      selected: this.$props.items,
       itemDisplayed: '',
-      isOpen: this.open,
+      isOpen: this.$props.open,
       tagWidth: '0px',
-      uuid: undefined,
-      tagValue: '',
-      inputValue: '',
-      listboxValue: []
+      boxWidth: '288px'
     };
   },
   computed: {
@@ -28884,62 +28992,90 @@ var MTextInput_component = normalizeComponent(
       return {
         '--tag-width': this.tagWidth
       };
-    }
-  },
-  watch: {
-    listboxValue: function listboxValue(newValue) {
-      if (newValue.length === 1) {
-        var valueToDisplay = this.items.find(function (item) {
-          return item.value == newValue;
-        });
-        this.inputValue = valueToDisplay.text;
-      } else {
-        this.inputValue = '';
-        this.tagValue = newValue;
-      }
     },
-    tagValue: {
-      handler: function handler() {
-        this.setTagWidth();
-      },
-      immediate: true
+    boxStyle: function boxStyle() {
+      return {
+        '--box-width': this.boxWidth
+      };
     }
   },
   mounted: function mounted() {
-    this.uuid = this._uid;
+    this.selectedItems();
+    this.tagWidthCalcul();
+    this.boxWidthCalcul();
   },
   methods: {
-    setTagWidth: function setTagWidth() {
+    tagWidthCalcul: function tagWidthCalcul() {
       var _this = this;
 
       this.$nextTick(function () {
         _this.tagWidth = document && document.querySelector('.mc-autocomplete__tag') ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px' : '0px';
       });
     },
-    clearAutocomplete: function clearAutocomplete() {
-      this.listboxValue = [];
-      this.$emit('clear');
+    selectedItems: function selectedItems() {
+      return this.selected.filter(function (item) {
+        return item.selected;
+      });
+    },
+    orderedItems: function orderedItems() {
+      this.itemListForDropdown.sort(function (a, b) {
+        if (a.selected === b.selected) {
+          return a.id - b.id;
+        } else if (a.selected < b.selected) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
+    },
+    updateList: function updateList(list) {
+      if (!this.$props.multiple && list) {
+        this.itemDisplayed = list[0].text;
+      } else {
+        this.isOpen = true;
+        this.selectedItems();
+      }
+
+      this.itemListForDropdown.forEach(function (elem) {
+        if (elem.id === list.id) {
+          elem.selected = false;
+        }
+      });
+      this.tagWidthCalcul();
+      this.$emit('update:modelValue', this.$props.multiple ? this.selectedItems().value : list);
+    },
+    removeElementsFromList: function removeElementsFromList() {
+      this.itemListForDropdown.forEach(function (elem) {
+        elem.selected = false;
+      });
+      this.selectedItems();
+      this.tagWidthCalcul();
+      this.$emit('list-removed');
     },
-    filterList: function filterList(value) {
-      if (value.length && this.filter) {
-        this.filter(value);
+    filerList: function filerList(value) {
+      if (value.length && this.$props.filter) {
+        this.$props.filter(value);
       } else if (value.length) {
         this.itemListForDropdown = this.itemListForDropdown.filter(function (item) {
           return item.text.toUpperCase().includes(value.toUpperCase());
         });
       } else {
-        this.itemListForDropdown = this.items;
+        this.itemListForDropdown = this.$props.items;
       }
 
       this.$emit('list-filtered', this.itemListForDropdown);
     },
-    onClickOutside: function onClickOutside() {
-      this.isOpen = false;
+    boxWidthCalcul: function boxWidthCalcul() {
+      var _this2 = this;
+
+      this.$nextTick(function () {
+        _this2.boxWidth = document.querySelector('.mc-autocomplete').clientWidth;
+        console.log(_this2.boxWidth);
+      });
+      return;
     }
   }
-}); // TODO:
-// - boxWidth ?
-// - dataSelectedExpr ?
+});
 ;// CONCATENATED MODULE: ./src/components/autocomplete/MAutocomplete.vue?vue&type=script&lang=js&
  /* harmony default export */ var autocomplete_MAutocompletevue_type_script_lang_js_ = (MAutocompletevue_type_script_lang_js_); 
 ;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/autocomplete/MAutocomplete.vue?vue&type=style&index=0&lang=scss&
@@ -28958,8 +29094,8 @@ var MTextInput_component = normalizeComponent(
 
 var MAutocomplete_component = normalizeComponent(
   autocomplete_MAutocompletevue_type_script_lang_js_,
-  MAutocompletevue_type_template_id_639f3f37_render,
-  MAutocompletevue_type_template_id_639f3f37_staticRenderFns,
+  MAutocompletevue_type_template_id_a2d4a1c4_render,
+  MAutocompletevue_type_template_id_a2d4a1c4_staticRenderFns,
   false,
   null,
   null,
@@ -29520,206 +29656,60 @@ var MCardvue_type_template_id_21f58754_staticRenderFns = []
 //
 //
 /* harmony default export */ var MCardvue_type_script_lang_js_ = ({
-  name: 'MCard',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    imgSrc: {
-      type: String,
-      required: true
-    },
-    lazy: {
-      type: Boolean,
-      default: false
-    },
-    outlined: {
-      type: Boolean,
-      default: false
-    },
-    titleTag: {
-      type: String,
-      default: 'h1',
-      validator: function validator(value) {
-        return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value);
-      }
-    },
-    imgAlt: {
-      type: String,
-      default: ''
-    },
-    subtitle: {
-      type: String,
-      default: null
-    },
-    subtitleTag: {
-      type: String,
-      default: 'h2'
-    },
-    imageratio: {
-      type: String,
-      default: null,
-      validator: function validator(value) {
-        return ['1x1', '4x3', '16x9'].includes(value);
-      }
-    }
-  }
-});
-;// CONCATENATED MODULE: ./src/components/card/MCard.vue?vue&type=script&lang=js&
- /* harmony default export */ var card_MCardvue_type_script_lang_js_ = (MCardvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/card/MCard.vue?vue&type=style&index=0&lang=scss&
-// extracted by mini-css-extract-plugin
-
-;// CONCATENATED MODULE: ./src/components/card/MCard.vue?vue&type=style&index=0&lang=scss&
-
-;// CONCATENATED MODULE: ./src/components/card/MCard.vue
-
-
-
-;
-
-
-/* normalize component */
-
-var MCard_component = normalizeComponent(
-  card_MCardvue_type_script_lang_js_,
-  MCardvue_type_template_id_21f58754_render,
-  MCardvue_type_template_id_21f58754_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ var MCard = (MCard_component.exports);
-;// CONCATENATED MODULE: ./src/components/card/index.js
-
-
-
-MCard.install = function (Vue) {
-  Vue.component(MCard.name, MCard);
-};
-
-
-;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/checkbox/MCheckbox.vue?vue&type=template&id=2a917fb6&
-var MCheckboxvue_type_template_id_2a917fb6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.hasLabel)?_c('div',{staticClass:"mc-checkbox"},[_c('input',_vm._b({ref:"input",staticClass:"mc-checkbox__input",class:_vm.setInputClasses,attrs:{"id":_vm.id,"name":_vm.name,"type":"checkbox","required":_vm.required,"disabled":_vm.disabled},domProps:{"checked":_vm.checked},on:{"change":function($event){return _vm.$emit('change', $event.target.checked)}}},'input',_vm.$attrs,false)),_c('label',{staticClass:"mc-checkbox__label",attrs:{"for":_vm.id}},[_vm._t("label",function(){return [_vm._v(" "+_vm._s(_vm.label)+" ")]})],2)]):_c('input',_vm._b({ref:"input",staticClass:"mc-checkbox__input",class:_vm.setInputClasses,attrs:{"id":_vm.id,"name":_vm.name,"type":"checkbox","required":_vm.required,"disabled":_vm.disabled},domProps:{"checked":_vm.checked},on:{"change":function($event){return _vm.$emit('change', $event.target.checked)}}},'input',_vm.$attrs,false))}
-var MCheckboxvue_type_template_id_2a917fb6_staticRenderFns = []
-
-
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/checkbox/MCheckbox.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ var MCheckboxvue_type_script_lang_js_ = ({
-  name: 'MCheckbox',
-  inheritAttrs: false,
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
+  name: 'MCard',
   props: {
-    id: {
+    title: {
       type: String,
       required: true
     },
-    name: {
-      type: String,
-      default: null
-    },
-    label: {
+    imgSrc: {
       type: String,
-      default: null
+      required: true
     },
-    checked: {
+    lazy: {
       type: Boolean,
       default: false
     },
-    disabled: {
+    outlined: {
       type: Boolean,
       default: false
     },
-    required: {
-      type: Boolean,
-      default: false
+    titleTag: {
+      type: String,
+      default: 'h1',
+      validator: function validator(value) {
+        return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value);
+      }
     },
-    indeterminate: {
-      type: Boolean,
-      default: false
+    imgAlt: {
+      type: String,
+      default: ''
     },
-    isInvalid: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    hasLabel: function hasLabel() {
-      return this.label != null || this.$slots.label != null;
+    subtitle: {
+      type: String,
+      default: null
     },
-    setInputClasses: function setInputClasses() {
-      return {
-        'is-invalid': this.isInvalid
-      };
-    }
-  },
-  watch: {
-    indeterminate: function indeterminate() {
-      this.setIndeterminate();
-    }
-  },
-  mounted: function mounted() {
-    this.setIndeterminate();
-  },
-  methods: {
-    setIndeterminate: function setIndeterminate() {
-      this.$refs.input.indeterminate = this.indeterminate;
+    subtitleTag: {
+      type: String,
+      default: 'h2'
+    },
+    imageratio: {
+      type: String,
+      default: null,
+      validator: function validator(value) {
+        return ['1x1', '4x3', '16x9'].includes(value);
+      }
     }
   }
 });
-;// CONCATENATED MODULE: ./src/components/checkbox/MCheckbox.vue?vue&type=script&lang=js&
- /* harmony default export */ var checkbox_MCheckboxvue_type_script_lang_js_ = (MCheckboxvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/checkbox/MCheckbox.vue?vue&type=style&index=0&lang=scss&
+;// CONCATENATED MODULE: ./src/components/card/MCard.vue?vue&type=script&lang=js&
+ /* harmony default export */ var card_MCardvue_type_script_lang_js_ = (MCardvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/card/MCard.vue?vue&type=style&index=0&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/checkbox/MCheckbox.vue?vue&type=style&index=0&lang=scss&
+;// CONCATENATED MODULE: ./src/components/card/MCard.vue?vue&type=style&index=0&lang=scss&
 
-;// CONCATENATED MODULE: ./src/components/checkbox/MCheckbox.vue
+;// CONCATENATED MODULE: ./src/components/card/MCard.vue
 
 
 
@@ -29728,10 +29718,10 @@ var MCheckboxvue_type_template_id_2a917fb6_staticRenderFns = []
 
 /* normalize component */
 
-var MCheckbox_component = normalizeComponent(
-  checkbox_MCheckboxvue_type_script_lang_js_,
-  MCheckboxvue_type_template_id_2a917fb6_render,
-  MCheckboxvue_type_template_id_2a917fb6_staticRenderFns,
+var MCard_component = normalizeComponent(
+  card_MCardvue_type_script_lang_js_,
+  MCardvue_type_template_id_21f58754_render,
+  MCardvue_type_template_id_21f58754_staticRenderFns,
   false,
   null,
   null,
@@ -29739,7 +29729,16 @@ var MCheckbox_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var MCheckbox = (MCheckbox_component.exports);
+/* harmony default export */ var MCard = (MCard_component.exports);
+;// CONCATENATED MODULE: ./src/components/card/index.js
+
+
+
+MCard.install = function (Vue) {
+  Vue.component(MCard.name, MCard);
+};
+
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/checkbox/MCheckboxGroup.vue?vue&type=template&id=040239fa&
 var MCheckboxGroupvue_type_template_id_040239fa_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('fieldset',{staticClass:"mc-field mc-field--group"},[_c('legend',{staticClass:"mc-field__legend"},[_vm._v(" "+_vm._s(_vm.legend)+" "),(_vm.requirementText)?_c('span',{staticClass:"mc-field__requirement",attrs:{"aria-hidden":"true"}},[_vm._v(" "+_vm._s(_vm.requirementText)+" ")]):_vm._e()]),(_vm.helpId && _vm.helpText)?_c('span',{staticClass:"mc-field__help",attrs:{"id":_vm.helpId}},[_vm._v(" "+_vm._s(_vm.helpText)+" ")]):_vm._e(),_c('div',{staticClass:"mc-field__container",class:{ 'mc-field__container--inline': _vm.inline }},_vm._l((_vm.options),function(option,index){return _c('m-checkbox',_vm._b({key:option.id ? option.id : option.value,staticClass:"mc-field__item",attrs:{"checked":_vm.value ? _vm.value.includes(option.value) : undefined},on:{"change":function (v) { return _vm.onChange(v, option.value); }},scopedSlots:_vm._u([{key:"label",fn:function(){return [_vm._t(("label" + (index + 1)),function(){return [_vm._v(" "+_vm._s(option.label)+" ")]})]},proxy:true}],null,true)},'m-checkbox',option,false))}),1),(_vm.errorId && _vm.errorMessage)?_c('span',{staticClass:"mc-field__error-message",attrs:{"id":_vm.errorId}},[_vm._v(" "+_vm._s(_vm.errorMessage)+" ")]):_vm._e()])}
 var MCheckboxGroupvue_type_template_id_040239fa_staticRenderFns = []
@@ -30440,8 +30439,6 @@ function _objectSpread2(target) {
 var es_array_reduce = __webpack_require__(5827);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.parse-int.js
 var es_parse_int = __webpack_require__(1058);
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.sort.js
-var es_array_sort = __webpack_require__(2707);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.splice.js
 var es_array_splice = __webpack_require__(561);
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/pagination/MPagination.vue?vue&type=template&id=37d80856&scoped=true&
@@ -31916,36 +31913,6 @@ var MFileUploadervue_type_template_id_527fc52d_render = function () {var _vm=thi
 var MFileUploadervue_type_template_id_527fc52d_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/iterableToArray.js
-
-
-
-
-
-
-
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js
-
-
-
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/fileuploader/MFileResult.vue?vue&type=template&id=637ee690&
 var MFileResultvue_type_template_id_637ee690_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ul',{staticClass:"mc-fileuploader__files"},_vm._l((_vm.files),function(file,index){return _c('li',{key:("file-" + index),staticClass:"mc-fileuploader__file",class:_vm.checkFileStatus(file)
         ? 'mc-fileuploader__file--is-valid'
@@ -32792,14 +32759,170 @@ MLink.install = function (Vue) {
 };
 
 
+;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxOptions.vue?vue&type=template&id=784d0f60&
+var MListBoxOptionsvue_type_template_id_784d0f60_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.onClickOutside),expression:"onClickOutside"}],staticClass:"mc-listbox-options"},[_c('button',{staticClass:"mc-listbox-options__trigger",attrs:{"type":"button"},on:{"click":function($event){_vm.isOpen = !_vm.isOpen}}},[_c('m-icon',{attrs:{"name":"DisplayOptions24"}}),_c('span',{staticClass:"mc-listbox-options__trigger-label"},[_vm._v(_vm._s(_vm.triggerLabel))])],1),_c('div',{ref:"listbox",staticClass:"mc-listbox-options__container",class:{ 'is-open': _vm.isOpen, 'align-right': _vm.position == 'right' },attrs:{"role":"listbox","aria-labelledby":"listbox"}},_vm._l((_vm.listItems),function(list,index){return _c('ul',{key:(list + "-" + index),staticClass:"mc-listbox-options__list"},_vm._l((list),function(item){return _c('li',{key:item.id,staticClass:"mc-listbox-options__tile"},[(item.icon)?_c('m-icon',{staticClass:"mc-listbox-options__icon",attrs:{"name":item.icon,"color":item.danger ? '#C61112' : '#71706B'}}):_vm._e(),_c(item.href ? 'a' : 'button',{tag:"component",staticClass:"mc-listbox-options__item",class:{ 'is-danger': item.danger },attrs:{"href":item.href ? item.href : null,"type":item.href ? null : 'button'},on:{"click":function($event){if($event.target !== $event.currentTarget){ return null; }return _vm.$emit('update:itemSelected', item)}}},[_vm._v(" "+_vm._s(item.text)+" ")])],1)}),0)}),0)])}
+var MListBoxOptionsvue_type_template_id_784d0f60_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxOptions.vue?vue&type=script&lang=js&
+
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+/* harmony default export */ var MListBoxOptionsvue_type_script_lang_js_ = ({
+  name: 'MListBoxOptions',
+  components: {
+    MIcon: MIcon
+  },
+  directives: {
+    'click-outside': {
+      bind: function bind(el, binding, vnode) {
+        el.clickOutsideEvent = function (event) {
+          if (!(el === event.target || el.contains(event.target))) {
+            vnode.context[binding.expression](event);
+          }
+        };
+
+        document.body.addEventListener('click', el.clickOutsideEvent);
+      },
+      unbind: function unbind(el) {
+        document.body.removeEventListener('click', el.clickOutsideEvent);
+      }
+    }
+  },
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    position: {
+      type: String,
+      default: 'left'
+    },
+    items: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    triggerLabel: {
+      type: String,
+      default: 'Display options'
+    }
+  },
+  data: function data() {
+    return {
+      isOpen: this.open
+    };
+  },
+  computed: {
+    listItems: function listItems() {
+      var hasNestedArray = this.items.filter(Array.isArray).length;
+
+      if (hasNestedArray === 0) {
+        var listItems = [];
+        listItems.push(this.items);
+        return [this.items];
+      }
+
+      return this.items;
+    }
+  },
+  methods: {
+    onClickOutside: function onClickOutside() {
+      this.isOpen = false;
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/listbox/MListBoxOptions.vue?vue&type=script&lang=js&
+ /* harmony default export */ var listbox_MListBoxOptionsvue_type_script_lang_js_ = (MListBoxOptionsvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22[0].rules[0].use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxOptions.vue?vue&type=style&index=0&lang=scss&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/listbox/MListBoxOptions.vue?vue&type=style&index=0&lang=scss&
+
+;// CONCATENATED MODULE: ./src/components/listbox/MListBoxOptions.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var MListBoxOptions_component = normalizeComponent(
+  listbox_MListBoxOptionsvue_type_script_lang_js_,
+  MListBoxOptionsvue_type_template_id_784d0f60_render,
+  MListBoxOptionsvue_type_template_id_784d0f60_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var MListBoxOptions = (MListBoxOptions_component.exports);
 ;// CONCATENATED MODULE: ./src/components/listbox/index.js
 
 
 
+
 MListBox.install = function (Vue) {
   Vue.component(MListBox.name, MListBox);
 };
 
+MListBoxOptions.install = function (Vue) {
+  Vue.component(MListBoxOptions.name, MListBoxOptions);
+};
+
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/loader/MLoader.vue?vue&type=template&id=79b110e6&
 var MLoadervue_type_template_id_79b110e6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"mc-loader",class:_vm.setClasses},[_c('span',{staticClass:"mc-loader__spinner"},[_c('svg',{staticClass:"mc-loader__icon",attrs:{"xmlns":"http://www.w3.org/2000/svg","viewBox":_vm.viewBox}},[_c('circle',{staticClass:"mc-loader__path",attrs:{"cx":"50%","cy":"50%","r":_vm.pathR}})])]),(_vm.text)?_c('span',{staticClass:"mc-loader__text"},[_vm._v(_vm._s(_vm.text))]):_vm._e()])}