@mozaic-ds/vue 0.33.0 → 0.34.0

package/dist/mozaic-vue.common.js

@@ -16596,22 +16596,24 @@ MAccordion.install = function (Vue) {
   Vue.component(MAccordion.name, MAccordion);
 };
 
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/autocomplete/MAutocomplete.vue?vue&type=template&id=79c84509&
-var MAutocompletevue_type_template_id_79c84509_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/autocomplete/MAutocomplete.vue?vue&type=template&id=36fdc82e&
+var MAutocompletevue_type_template_id_36fdc82e_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
     directives: [{
       name: "click-outside",
       rawName: "v-click-outside",
-      value: _vm.onClickOutside,
-      expression: "onClickOutside"
+      value: _vm.closeListBox,
+      expression: "closeListBox"
     }],
     staticClass: "mc-autocomplete",
     class: {
       'mc-autocomplete--multi': _vm.multiple
     },
     style: _vm.setStyles
+  }, [_c('div', {
+    staticClass: "mc-autocomplete__main"
   }, [_vm.multiple && _vm.listboxValue.length > 0 ? _c('MTag', {
     ref: "tag",
     staticClass: "mc-autocomplete__tag",
@@ -16624,7 +16626,7 @@ var MAutocompletevue_type_template_id_79c84509_render = function render() {
     },
     on: {
       "remove-tag": function removeTag($event) {
-        return _vm.clearAutocomplete();
+        return _vm.clearListbox();
       }
     }
   }) : _vm._e(), _vm.loading ? _c('MLoader', {
@@ -16638,11 +16640,11 @@ var MAutocompletevue_type_template_id_79c84509_render = function render() {
       "placeholder": _vm.placeholder,
       "is-invalid": _vm.invalid,
       "disabled": _vm.disabled,
+      "size": _vm.size,
       "text-input-field-class": "mc-autocomplete__trigger",
       "icon-position": "left",
       "icon": "DisplaySearch48",
-      "autocomplete": "off",
-      "type": "search"
+      "autocomplete": "off"
     },
     on: {
       "input": _vm.onInput,
@@ -16657,7 +16659,22 @@ var MAutocompletevue_type_template_id_79c84509_render = function render() {
       },
       expression: "inputValue"
     }
-  }), _c('MListBox', {
+  }), _vm.hasValues ? _c('button', {
+    staticClass: "mc-autocomplete__clear",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": _vm.onClear
+    }
+  }, [_c('MIcon', {
+    staticClass: "mc-autocomplete__clear-icon",
+    attrs: {
+      "name": "ControlTagCross24"
+    }
+  }), _c('span', {
+    staticClass: "mc-autocomplete__clear-text"
+  }, [_vm._v(_vm._s(_vm.labelClearButton))])], 1) : _vm._e()], 1), _c('MListBox', {
     attrs: {
       "open": _vm.openState,
       "items": _vm.localItems,
@@ -16670,7 +16687,7 @@ var MAutocompletevue_type_template_id_79c84509_render = function render() {
       "max-width": _vm.maxWidth
     },
     on: {
-      "change": _vm.onChange
+      "change": _vm.onChangeListbox
     },
     scopedSlots: _vm._u([{
       key: "item",
@@ -16690,7 +16707,7 @@ var MAutocompletevue_type_template_id_79c84509_render = function render() {
     }
   })], 1);
 };
-var MAutocompletevue_type_template_id_79c84509_staticRenderFns = [];
+var MAutocompletevue_type_template_id_36fdc82e_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.to-string.js
 var es_regexp_to_string = __webpack_require__(9714);
@@ -16700,6 +16717,119 @@ var es_array_join = __webpack_require__(9600);
 var es_string_includes = __webpack_require__(2023);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.sort.js
 var es_array_sort = __webpack_require__(2707);
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./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 render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  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()]);
+};
+var MLoadervue_type_template_id_79b110e6_staticRenderFns = [];
+
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
+var es_array_push = __webpack_require__(7658);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/loader/MLoader.vue?vue&type=script&lang=js&
+
+
+/* harmony default export */ var MLoadervue_type_script_lang_js_ = ({
+  name: 'MLoader',
+  props: {
+    /**
+     * Loader size
+     * @values s, m , l
+     */
+    size: {
+      type: String,
+      default: 'm',
+      validator: function validator(value) {
+        return ['s', 'm', 'l'].includes(value);
+      }
+    },
+    /**
+     * Loader theme
+     * @values dark, light, primary
+     */
+    theme: {
+      type: String,
+      default: 'primary',
+      validator: function validator(value) {
+        return ['dark', 'light', 'primary'].includes(value);
+      }
+    },
+    /**
+     * Loader text - when using the loader inside an overlay
+     */
+    text: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    setClasses: function setClasses() {
+      var classes = [];
+      if (this.size && this.size !== 'm') {
+        classes.push("mc-loader--".concat(this.size));
+      }
+      if (this.theme && this.theme !== 'primary') {
+        classes.push("mc-loader--".concat(this.theme));
+      }
+      return classes;
+    },
+    viewBox: function viewBox() {
+      return this.size === 'm' ? '0 0 32 32' : this.size === 's' ? '0 0 24 24' : '0 0 64 64';
+    },
+    pathR: function pathR() {
+      return this.size === 'm' ? 9 : this.size === 's' ? 6 : 19;
+    }
+  }
+});
+;// CONCATENATED MODULE: ./src/components/loader/MLoader.vue?vue&type=script&lang=js&
+ /* harmony default export */ var loader_MLoadervue_type_script_lang_js_ = (MLoadervue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/loader/MLoader.vue?vue&type=style&index=0&id=79b110e6&prod&lang=scss&
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./src/components/loader/MLoader.vue?vue&type=style&index=0&id=79b110e6&prod&lang=scss&
+
+;// CONCATENATED MODULE: ./src/components/loader/MLoader.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var MLoader_component = normalizeComponent(
+  loader_MLoadervue_type_script_lang_js_,
+  MLoadervue_type_template_id_79b110e6_render,
+  MLoadervue_type_template_id_79b110e6_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var MLoader = (MLoader_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/tags/MTag.vue?vue&type=template&id=478ba694&
 
 var MTagvue_type_template_id_478ba694_render = function render() {
@@ -16865,8 +16995,6 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
     }
   };
 }
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
-var es_array_push = __webpack_require__(7658);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.replace.js
 var es_string_replace = __webpack_require__(5306);
 ;// CONCATENATED MODULE: ./src/utils/mozaicClasses.js
@@ -17025,117 +17153,6 @@ var MTag_component = normalizeComponent(
 )
 
 /* harmony default export */ var MTag = (MTag_component.exports);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./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 render() {
-  var _vm = this,
-    _c = _vm._self._c;
-  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()]);
-};
-var MLoadervue_type_template_id_79b110e6_staticRenderFns = [];
-
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/loader/MLoader.vue?vue&type=script&lang=js&
-
-
-/* harmony default export */ var MLoadervue_type_script_lang_js_ = ({
-  name: 'MLoader',
-  props: {
-    /**
-     * Loader size
-     * @values s, m , l
-     */
-    size: {
-      type: String,
-      default: 'm',
-      validator: function validator(value) {
-        return ['s', 'm', 'l'].includes(value);
-      }
-    },
-    /**
-     * Loader theme
-     * @values dark, light, primary
-     */
-    theme: {
-      type: String,
-      default: 'primary',
-      validator: function validator(value) {
-        return ['dark', 'light', 'primary'].includes(value);
-      }
-    },
-    /**
-     * Loader text - when using the loader inside an overlay
-     */
-    text: {
-      type: String,
-      default: undefined
-    }
-  },
-  computed: {
-    setClasses: function setClasses() {
-      var classes = [];
-      if (this.size && this.size !== 'm') {
-        classes.push("mc-loader--".concat(this.size));
-      }
-      if (this.theme && this.theme !== 'primary') {
-        classes.push("mc-loader--".concat(this.theme));
-      }
-      return classes;
-    },
-    viewBox: function viewBox() {
-      return this.size === 'm' ? '0 0 32 32' : this.size === 's' ? '0 0 24 24' : '0 0 64 64';
-    },
-    pathR: function pathR() {
-      return this.size === 'm' ? 9 : this.size === 's' ? 6 : 19;
-    }
-  }
-});
-;// CONCATENATED MODULE: ./src/components/loader/MLoader.vue?vue&type=script&lang=js&
- /* harmony default export */ var loader_MLoadervue_type_script_lang_js_ = (MLoadervue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/loader/MLoader.vue?vue&type=style&index=0&id=79b110e6&prod&lang=scss&
-// extracted by mini-css-extract-plugin
-
-;// CONCATENATED MODULE: ./src/components/loader/MLoader.vue?vue&type=style&index=0&id=79b110e6&prod&lang=scss&
-
-;// CONCATENATED MODULE: ./src/components/loader/MLoader.vue
-
-
-
-;
-
-
-/* normalize component */
-
-var MLoader_component = normalizeComponent(
-  loader_MLoadervue_type_script_lang_js_,
-  MLoadervue_type_template_id_79b110e6_render,
-  MLoadervue_type_template_id_79b110e6_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ var MLoader = (MLoader_component.exports);
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./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 render() {
   var _vm = this,
@@ -17664,11 +17681,13 @@ var MListBox_component = normalizeComponent(
 
 
 
+
 /* harmony default export */ var MAutocompletevue_type_script_lang_js_ = ({
   name: 'MAutocomplete',
   components: {
-    MTag: MTag,
+    MIcon: MIcon,
     MLoader: MLoader,
+    MTag: MTag,
     MTextInput: MTextInput,
     MListBox: MListBox
   },
@@ -17721,6 +17740,13 @@ var MListBox_component = normalizeComponent(
       type: Boolean,
       default: true
     },
+    size: {
+      type: String,
+      default: 'm',
+      validator: function validator(value) {
+        return ['s', 'm'].includes(value);
+      }
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -17733,6 +17759,10 @@ var MListBox_component = normalizeComponent(
       type: Boolean,
       default: false
     },
+    labelClearButton: {
+      type: String,
+      default: 'Clear'
+    },
     // Listbox Element
     items: {
       type: Array,
@@ -17782,41 +17812,47 @@ var MListBox_component = normalizeComponent(
       openState: this.open,
       tagWidth: '0px',
       tagValue: null,
-      inputValue: null,
       localItems: null,
       sortedListItems: null,
-      listboxValue: null,
       isFiltered: null
     };
   },
   computed: {
-    setTagLabel: function setTagLabel() {
-      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
-    },
     setStyles: function setStyles() {
       return {
         '--autocomplete-tag-width': this.tagWidth,
         '--autocomplete-width': this.maxWidth
       };
+    },
+    setTagLabel: function setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    hasValues: function hasValues() {
+      var _this$inputValue;
+      return ((_this$inputValue = this.inputValue) === null || _this$inputValue === void 0 ? void 0 : _this$inputValue.length) > 0;
+    },
+    inputValue: {
+      get: function get() {
+        return this.input;
+      },
+      set: function set(newValue) {
+        return this.$emit('update:input', newValue);
+      }
+    },
+    listboxValue: {
+      get: function get() {
+        return !this.value && this.multiple ? [] : this.value;
+      },
+      set: function set(newValue) {
+        return this.$emit('change', newValue);
+      }
     }
   },
   watch: {
-    value: {
-      handler: function handler(val) {
-        if (!val && this.multiple) {
-          this.listboxValue = [];
-        } else {
-          this.listboxValue = val;
-        }
-      },
-      immediate: true
-    },
     items: {
       handler: function handler(val) {
         this.localItems = val;
-        // this.clearAutocomplete();
       },
-
       immediate: true
     },
     listboxValue: function listboxValue(val) {
@@ -17838,12 +17874,6 @@ var MListBox_component = normalizeComponent(
       var eventName = val ? 'open' : 'close';
       this.$emit(eventName);
       this.$emit('update:open', val);
-    },
-    input: {
-      handler: function handler(val) {
-        this.inputValue = val;
-      },
-      immediate: true
     }
   },
   methods: {
@@ -17857,11 +17887,22 @@ var MListBox_component = normalizeComponent(
         }
       });
     },
-    clearAutocomplete: function clearAutocomplete() {
+    clearInput: function clearInput() {
+      this.inputValue = '';
+      this.onInput('');
+    },
+    clearListbox: function clearListbox() {
       this.listboxValue = this.multiple ? [] : undefined;
-      this.onChange();
       this.$emit('clear');
     },
+    onClear: function onClear() {
+      if (!this.multiple) {
+        this.clearInput();
+        this.clearListbox();
+      } else {
+        this.clearInput();
+      }
+    },
     filterList: function filterList(value) {
       var _this3 = this;
       if (value.length && this.filter) {
@@ -17877,7 +17918,7 @@ var MListBox_component = normalizeComponent(
       }
       this.$emit('list-filtered', this.localItems);
     },
-    onClickOutside: function onClickOutside() {
+    closeListBox: function closeListBox() {
       this.openState = false;
       if (this.multiple && this.sort) {
         this.sortItems();
@@ -17885,10 +17926,9 @@ var MListBox_component = normalizeComponent(
         this.localItems = this.items;
       }
     },
-    onChange: function onChange() {
-      this.$emit('change', this.listboxValue);
+    onChangeListbox: function onChangeListbox() {
       if (!this.multiple) {
-        this.onClickOutside();
+        this.closeListBox();
       }
     },
     getSelectedItems: function getSelectedItems(val) {
@@ -17916,21 +17956,20 @@ var MListBox_component = normalizeComponent(
       });
       this.localItems = this.sortedListItems;
     },
-    handleInputValue: function handleInputValue(value) {
-      this.$emit('update:input', value);
-    },
     onInput: function onInput(value) {
-      this.handleInputValue(value);
+      if (value.length === 0) {
+        this.$emit('clear-input');
+      }
       this.filterList(value);
     }
   }
 });
 ;// 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.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/autocomplete/MAutocomplete.vue?vue&type=style&index=0&id=79c84509&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/autocomplete/MAutocomplete.vue?vue&type=style&index=0&id=36fdc82e&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/autocomplete/MAutocomplete.vue?vue&type=style&index=0&id=79c84509&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/autocomplete/MAutocomplete.vue?vue&type=style&index=0&id=36fdc82e&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/autocomplete/MAutocomplete.vue
 
@@ -17943,8 +17982,8 @@ var MListBox_component = normalizeComponent(
 
 var MAutocomplete_component = normalizeComponent(
   autocomplete_MAutocompletevue_type_script_lang_js_,
-  MAutocompletevue_type_template_id_79c84509_render,
-  MAutocompletevue_type_template_id_79c84509_staticRenderFns,
+  MAutocompletevue_type_template_id_36fdc82e_render,
+  MAutocompletevue_type_template_id_36fdc82e_staticRenderFns,
   false,
   null,
   null,
@@ -19518,10 +19557,10 @@ function _objectSpread2(target) {
 }
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.splice.js
 var es_array_splice = __webpack_require__(561);
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/pagination/MPagination.vue?vue&type=template&id=3d42d00e&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/pagination/MPagination.vue?vue&type=template&id=d4ca43a8&scoped=true&
 
 
-var MPaginationvue_type_template_id_3d42d00e_scoped_true_render = function render() {
+var MPaginationvue_type_template_id_d4ca43a8_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -19531,7 +19570,7 @@ var MPaginationvue_type_template_id_3d42d00e_scoped_true_render = function rende
     }
   }, [_vm.value > 1 ? _c(_vm.hrefPrev ? 'a' : 'button', {
     tag: "component",
-    staticClass: "mc-pagination__button",
+    staticClass: "mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l",
     attrs: {
       "type": _vm.hrefPrev ? null : 'button',
       "href": _vm.hrefPrev,
@@ -19543,8 +19582,8 @@ var MPaginationvue_type_template_id_3d42d00e_scoped_true_render = function rende
         return _vm.previousPage(_vm.currentPage - 1);
       }
     }
-  }, [_c('m-icon', {
-    staticClass: "mc-pagination__button-icon",
+  }, [_c('MIcon', {
+    staticClass: "mc-button__icon",
     attrs: {
       "name": "ArrowArrowLeft24"
     }
@@ -19584,7 +19623,7 @@ var MPaginationvue_type_template_id_3d42d00e_scoped_true_render = function rende
     }
   })], 1) : _vm._e(), _vm.value < _vm.length ? _c(_vm.hrefNext ? 'a' : 'button', {
     tag: "component",
-    staticClass: "mc-pagination__button",
+    staticClass: "mc-button mc-button--solid-neutral mc-button--square mc-button--s@from-l",
     attrs: {
       "type": _vm.hrefNext ? null : 'button',
       "href": _vm.hrefNext,
@@ -19596,16 +19635,16 @@ var MPaginationvue_type_template_id_3d42d00e_scoped_true_render = function rende
         return _vm.nextPage(_vm.currentPage + 1);
       }
     }
-  }, [_c('m-icon', {
-    staticClass: "mc-pagination__button-icon",
+  }, [_c('MIcon', {
+    staticClass: "mc-button__icon",
     attrs: {
       "name": "ArrowArrowRight24"
     }
   })], 1) : _vm._e()], 1);
 };
-var MPaginationvue_type_template_id_3d42d00e_scoped_true_staticRenderFns = [];
+var MPaginationvue_type_template_id_d4ca43a8_scoped_true_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/pagination/MPagination.vue?vue&type=template&id=3d42d00e&scoped=true&
+;// CONCATENATED MODULE: ./src/components/pagination/MPagination.vue?vue&type=template&id=d4ca43a8&scoped=true&
 
 ;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/select/MSelect.vue?vue&type=template&id=2f82493e&
 var MSelectvue_type_template_id_2f82493e_render = function render() {
@@ -19878,10 +19917,10 @@ var MSelect_component = normalizeComponent(
 });
 ;// CONCATENATED MODULE: ./src/components/pagination/MPagination.vue?vue&type=script&lang=js&
  /* harmony default export */ var pagination_MPaginationvue_type_script_lang_js_ = (MPaginationvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/pagination/MPagination.vue?vue&type=style&index=0&id=3d42d00e&prod&lang=scss&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/pagination/MPagination.vue?vue&type=style&index=0&id=d4ca43a8&prod&lang=scss&scoped=true&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/pagination/MPagination.vue?vue&type=style&index=0&id=3d42d00e&prod&lang=scss&scoped=true&
+;// CONCATENATED MODULE: ./src/components/pagination/MPagination.vue?vue&type=style&index=0&id=d4ca43a8&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/components/pagination/MPagination.vue
 
@@ -19894,11 +19933,11 @@ var MSelect_component = normalizeComponent(
 
 var MPagination_component = normalizeComponent(
   pagination_MPaginationvue_type_script_lang_js_,
-  MPaginationvue_type_template_id_3d42d00e_scoped_true_render,
-  MPaginationvue_type_template_id_3d42d00e_scoped_true_staticRenderFns,
+  MPaginationvue_type_template_id_d4ca43a8_scoped_true_render,
+  MPaginationvue_type_template_id_d4ca43a8_scoped_true_staticRenderFns,
   false,
   null,
-  "3d42d00e",
+  "d4ca43a8",
   null
   
 )
@@ -20805,8 +20844,8 @@ MField.install = function (Vue) {
   Vue.component(MField.name, MField);
 };
 
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=template&id=e2d3a972&
-var MDropdownvue_type_template_id_e2d3a972_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=template&id=68dce0e4&
+var MDropdownvue_type_template_id_68dce0e4_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -20840,7 +20879,8 @@ var MDropdownvue_type_template_id_e2d3a972_render = function render() {
   }) : _vm._e(), _c('button', {
     staticClass: "mc-select mc-dropdown__trigger",
     class: {
-      'is-open': _vm.openState
+      'is-open': _vm.openState,
+      'mc-select--s': _vm.size === 's'
     },
     attrs: {
       "type": "button",
@@ -20882,7 +20922,7 @@ var MDropdownvue_type_template_id_e2d3a972_render = function render() {
     }
   })], 1);
 };
-var MDropdownvue_type_template_id_e2d3a972_staticRenderFns = [];
+var MDropdownvue_type_template_id_68dce0e4_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=script&lang=js&
 
@@ -20939,6 +20979,13 @@ var MDropdownvue_type_template_id_e2d3a972_staticRenderFns = [];
       type: Function,
       default: null
     },
+    size: {
+      type: String,
+      default: 'm',
+      validator: function validator(value) {
+        return ['s', 'm'].includes(value);
+      }
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -21110,10 +21157,10 @@ var MDropdownvue_type_template_id_e2d3a972_staticRenderFns = [];
 });
 ;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=script&lang=js&
  /* harmony default export */ var dropdown_MDropdownvue_type_script_lang_js_ = (MDropdownvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=e2d3a972&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=68dce0e4&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=e2d3a972&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=68dce0e4&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue
 
@@ -21126,8 +21173,8 @@ var MDropdownvue_type_template_id_e2d3a972_staticRenderFns = [];
 
 var MDropdown_component = normalizeComponent(
   dropdown_MDropdownvue_type_script_lang_js_,
-  MDropdownvue_type_template_id_e2d3a972_render,
-  MDropdownvue_type_template_id_e2d3a972_staticRenderFns,
+  MDropdownvue_type_template_id_68dce0e4_render,
+  MDropdownvue_type_template_id_68dce0e4_staticRenderFns,
   false,
   null,
   null,
@@ -22022,8 +22069,8 @@ MLink.install = function (Vue) {
   Vue.component(MLink.name, MLink);
 };
 
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=template&id=429ede58&
-var MListBoxActionsvue_type_template_id_429ede58_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=template&id=27542c5d&
+var MListBoxActionsvue_type_template_id_27542c5d_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -22033,16 +22080,19 @@ var MListBoxActionsvue_type_template_id_429ede58_render = function render() {
       value: _vm.onClickOutside,
       expression: "onClickOutside"
     }],
-    staticClass: "mc-listbox-options"
+    staticClass: "mc-listbox-options",
+    class: {
+      'mc-listbox-options--fixed': _vm.hasDataTable
+    },
+    style: _vm.setStyles
   }, [_c('button', {
+    ref: "trigger",
     staticClass: "mc-listbox-options__trigger",
     attrs: {
       "type": "button"
     },
     on: {
-      "click": function click($event) {
-        _vm.isOpen = !_vm.isOpen;
-      }
+      "click": _vm.onClickTrigger
     }
   }, [_c('m-icon', {
     attrs: {
@@ -22101,7 +22151,7 @@ var MListBoxActionsvue_type_template_id_429ede58_render = function render() {
     }), 0);
   }), 0)]);
 };
-var MListBoxActionsvue_type_template_id_429ede58_staticRenderFns = [];
+var MListBoxActionsvue_type_template_id_27542c5d_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=script&lang=js&
 
@@ -22155,7 +22205,9 @@ var MListBoxActionsvue_type_template_id_429ede58_staticRenderFns = [];
   },
   data: function data() {
     return {
-      isOpen: this.open
+      isOpen: this.open,
+      posTop: '0px',
+      hasDataTable: false
     };
   },
   computed: {
@@ -22167,6 +22219,22 @@ var MListBoxActionsvue_type_template_id_429ede58_staticRenderFns = [];
         return [this.items];
       }
       return this.items;
+    },
+    setStyles: function setStyles() {
+      return {
+        '--listbox-top': this.hasDataTable ? this.posTop + 'px' : null
+      };
+    }
+  },
+  mounted: function mounted() {
+    this.hasDataTable = this.$parent.$options._componentTag === 'm-data-table' ? true : false;
+    if (this.hasDataTable) {
+      this.$parent.$el.querySelector('.mc-data-table__body').addEventListener('scroll', this.handleScroll);
+    }
+  },
+  destroyed: function destroyed() {
+    if (this.hasDataTable) {
+      this.$parent.$el.querySelector('.mc-data-table__body').removeEventListener('scroll', this.handleScroll);
     }
   },
   methods: {
@@ -22179,15 +22247,25 @@ var MListBoxActionsvue_type_template_id_429ede58_staticRenderFns = [];
         itemIndex: itemIndex
       }, item);
       this.$emit('update:itemSelected', valToEmit);
+    },
+    onClickTrigger: function onClickTrigger() {
+      this.isOpen = !this.isOpen;
+      if (this.isOpen && this.hasDataTable) {
+        var buttonHeight = this.$refs.trigger.getBoundingClientRect().height;
+        this.posTop = this.$refs.trigger.getBoundingClientRect().top + buttonHeight;
+      }
+    },
+    handleScroll: function handleScroll() {
+      this.isOpen = false;
     }
   }
 });
 ;// CONCATENATED MODULE: ./src/components/listbox/MListBoxActions.vue?vue&type=script&lang=js&
  /* harmony default export */ var listbox_MListBoxActionsvue_type_script_lang_js_ = (MListBoxActionsvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=style&index=0&id=429ede58&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.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.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-41.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBoxActions.vue?vue&type=style&index=0&id=27542c5d&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/listbox/MListBoxActions.vue?vue&type=style&index=0&id=429ede58&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/listbox/MListBoxActions.vue?vue&type=style&index=0&id=27542c5d&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/listbox/MListBoxActions.vue
 
@@ -22200,8 +22278,8 @@ var MListBoxActionsvue_type_template_id_429ede58_staticRenderFns = [];
 
 var MListBoxActions_component = normalizeComponent(
   listbox_MListBoxActionsvue_type_script_lang_js_,
-  MListBoxActionsvue_type_template_id_429ede58_render,
-  MListBoxActionsvue_type_template_id_429ede58_staticRenderFns,
+  MListBoxActionsvue_type_template_id_27542c5d_render,
+  MListBoxActionsvue_type_template_id_27542c5d_staticRenderFns,
   false,
   null,
   null,