@mozaic-ds/vue 0.24.0-beta.0 → 0.24.0

package/dist/mozaic-vue.umd.js

@@ -23163,6 +23163,21 @@ module.exports = function (object, key, value) {
 };
 
 
+/***/ }),
+
+/***/ 7045:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var makeBuiltIn = __webpack_require__(6339);
+var defineProperty = __webpack_require__(3070);
+
+module.exports = function (target, name, descriptor) {
+  if (descriptor.get) makeBuiltIn(descriptor.get, name, { getter: true });
+  if (descriptor.set) makeBuiltIn(descriptor.set, name, { setter: true });
+  return defineProperty.f(target, name, descriptor);
+};
+
+
 /***/ }),
 
 /***/ 8052:
@@ -23246,6 +23261,22 @@ module.exports = !fails(function () {
 });
 
 
+/***/ }),
+
+/***/ 4154:
+/***/ (function(module) {
+
+var documentAll = typeof document == 'object' && document.all;
+
+// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
+var IS_HTMLDDA = typeof documentAll == 'undefined' && documentAll !== undefined;
+
+module.exports = {
+  all: documentAll,
+  IS_HTMLDDA: IS_HTMLDDA
+};
+
+
 /***/ }),
 
 /***/ 317:
@@ -24208,11 +24239,17 @@ module.exports = Array.isArray || function isArray(argument) {
 /***/ }),
 
 /***/ 614:
-/***/ (function(module) {
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var $documentAll = __webpack_require__(4154);
+
+var documentAll = $documentAll.all;
 
 // `IsCallable` abstract operation
 // https://tc39.es/ecma262/#sec-iscallable
-module.exports = function (argument) {
+module.exports = $documentAll.IS_HTMLDDA ? function (argument) {
+  return typeof argument == 'function' || argument === documentAll;
+} : function (argument) {
   return typeof argument == 'function';
 };
 
@@ -24323,13 +24360,11 @@ module.exports = function (it) {
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var isCallable = __webpack_require__(614);
+var $documentAll = __webpack_require__(4154);
 
-var documentAll = typeof document == 'object' && document.all;
-
-// https://tc39.es/ecma262/#sec-IsHTMLDDA-internal-slot
-var SPECIAL_DOCUMENT_ALL = typeof documentAll == 'undefined' && documentAll !== undefined;
+var documentAll = $documentAll.all;
 
-module.exports = SPECIAL_DOCUMENT_ALL ? function (it) {
+module.exports = $documentAll.IS_HTMLDDA ? function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it) || it === documentAll;
 } : function (it) {
   return typeof it == 'object' ? it !== null : isCallable(it);
@@ -26046,10 +26081,10 @@ var store = __webpack_require__(5465);
 (module.exports = function (key, value) {
   return store[key] || (store[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.25.1',
+  version: '3.25.2',
   mode: IS_PURE ? 'pure' : 'global',
   copyright: '© 2014-2022 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.25.1/LICENSE',
+  license: 'https://github.com/zloirock/core-js/blob/v3.25.2/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -27146,6 +27181,54 @@ $({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT }, {
 });
 
 
+/***/ }),
+
+/***/ 7658:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var $ = __webpack_require__(2109);
+var toObject = __webpack_require__(7908);
+var lengthOfArrayLike = __webpack_require__(6244);
+var setArrayLength = __webpack_require__(3658);
+var doesNotExceedSafeInteger = __webpack_require__(7207);
+var fails = __webpack_require__(7293);
+
+var INCORRECT_TO_LENGTH = fails(function () {
+  return [].push.call({ length: 0x100000000 }, 1) !== 4294967297;
+});
+
+// V8 and Safari <= 15.4, FF < 23 throws InternalError
+// https://bugs.chromium.org/p/v8/issues/detail?id=12681
+var SILENT_ON_NON_WRITABLE_LENGTH = !function () {
+  try {
+    // eslint-disable-next-line es-x/no-object-defineproperty -- safe
+    Object.defineProperty([], 'length', { writable: false }).push();
+  } catch (error) {
+    return error instanceof TypeError;
+  }
+}();
+
+// `Array.prototype.push` method
+// https://tc39.es/ecma262/#sec-array.prototype.push
+$({ target: 'Array', proto: true, arity: 1, forced: INCORRECT_TO_LENGTH || SILENT_ON_NON_WRITABLE_LENGTH }, {
+  // eslint-disable-next-line no-unused-vars -- required for `.length`
+  push: function push(item) {
+    var O = toObject(this);
+    var len = lengthOfArrayLike(O);
+    var argCount = arguments.length;
+    doesNotExceedSafeInteger(len + argCount);
+    for (var i = 0; i < argCount; i++) {
+      O[len] = arguments[i];
+      len++;
+    }
+    setArrayLength(O, len);
+    return len;
+  }
+});
+
+
 /***/ }),
 
 /***/ 6644:
@@ -27915,6 +27998,43 @@ $({ target: 'Object', stat: true, forced: FAILS_ON_PRIMITIVES }, {
 });
 
 
+/***/ }),
+
+/***/ 7987:
+/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
+
+"use strict";
+
+var DESCRIPTORS = __webpack_require__(9781);
+var defineBuiltInAccessor = __webpack_require__(7045);
+var isObject = __webpack_require__(111);
+var toObject = __webpack_require__(7908);
+var requireObjectCoercible = __webpack_require__(4488);
+
+// eslint-disable-next-line es-x/no-object-getprototypeof -- safe
+var getPrototypeOf = Object.getPrototypeOf;
+// eslint-disable-next-line es-x/no-object-setprototypeof -- safe
+var setPrototypeOf = Object.setPrototypeOf;
+var ObjectPrototype = Object.prototype;
+var PROTO = '__proto__';
+
+// `Object.prototype.__proto__` accessor
+// https://tc39.es/ecma262/#sec-object.prototype.__proto__
+if (DESCRIPTORS && getPrototypeOf && setPrototypeOf && !(PROTO in ObjectPrototype)) try {
+  defineBuiltInAccessor(ObjectPrototype, PROTO, {
+    configurable: true,
+    get: function __proto__() {
+      return getPrototypeOf(toObject(this));
+    },
+    set: function __proto__(proto) {
+      var O = requireObjectCoercible(this);
+      if (!isObject(proto) && proto !== null || !isObject(O)) return;
+      setPrototypeOf(O, proto);
+    }
+  });
+} catch (error) { /* empty */ }
+
+
 /***/ }),
 
 /***/ 8304:
@@ -28819,171 +28939,6 @@ $({ target: 'String', proto: true, forced: forcedStringHTMLMethod('small') }, {
 });
 
 
-/***/ }),
-
-/***/ 3123:
-/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {
-
-"use strict";
-
-var apply = __webpack_require__(2104);
-var call = __webpack_require__(6916);
-var uncurryThis = __webpack_require__(1702);
-var fixRegExpWellKnownSymbolLogic = __webpack_require__(7007);
-var anObject = __webpack_require__(9670);
-var isNullOrUndefined = __webpack_require__(8554);
-var isRegExp = __webpack_require__(7850);
-var requireObjectCoercible = __webpack_require__(4488);
-var speciesConstructor = __webpack_require__(6707);
-var advanceStringIndex = __webpack_require__(1530);
-var toLength = __webpack_require__(7466);
-var toString = __webpack_require__(1340);
-var getMethod = __webpack_require__(8173);
-var arraySlice = __webpack_require__(1589);
-var callRegExpExec = __webpack_require__(7651);
-var regexpExec = __webpack_require__(2261);
-var stickyHelpers = __webpack_require__(2999);
-var fails = __webpack_require__(7293);
-
-var UNSUPPORTED_Y = stickyHelpers.UNSUPPORTED_Y;
-var MAX_UINT32 = 0xFFFFFFFF;
-var min = Math.min;
-var $push = [].push;
-var exec = uncurryThis(/./.exec);
-var push = uncurryThis($push);
-var stringSlice = uncurryThis(''.slice);
-
-// Chrome 51 has a buggy "split" implementation when RegExp#exec !== nativeExec
-// Weex JS has frozen built-in prototypes, so use try / catch wrapper
-var SPLIT_WORKS_WITH_OVERWRITTEN_EXEC = !fails(function () {
-  // eslint-disable-next-line regexp/no-empty-group -- required for testing
-  var re = /(?:)/;
-  var originalExec = re.exec;
-  re.exec = function () { return originalExec.apply(this, arguments); };
-  var result = 'ab'.split(re);
-  return result.length !== 2 || result[0] !== 'a' || result[1] !== 'b';
-});
-
-// @@split logic
-fixRegExpWellKnownSymbolLogic('split', function (SPLIT, nativeSplit, maybeCallNative) {
-  var internalSplit;
-  if (
-    'abbc'.split(/(b)*/)[1] == 'c' ||
-    // eslint-disable-next-line regexp/no-empty-group -- required for testing
-    'test'.split(/(?:)/, -1).length != 4 ||
-    'ab'.split(/(?:ab)*/).length != 2 ||
-    '.'.split(/(.?)(.?)/).length != 4 ||
-    // eslint-disable-next-line regexp/no-empty-capturing-group, regexp/no-empty-group -- required for testing
-    '.'.split(/()()/).length > 1 ||
-    ''.split(/.?/).length
-  ) {
-    // based on es5-shim implementation, need to rework it
-    internalSplit = function (separator, limit) {
-      var string = toString(requireObjectCoercible(this));
-      var lim = limit === undefined ? MAX_UINT32 : limit >>> 0;
-      if (lim === 0) return [];
-      if (separator === undefined) return [string];
-      // If `separator` is not a regex, use native split
-      if (!isRegExp(separator)) {
-        return call(nativeSplit, string, separator, lim);
-      }
-      var output = [];
-      var flags = (separator.ignoreCase ? 'i' : '') +
-                  (separator.multiline ? 'm' : '') +
-                  (separator.unicode ? 'u' : '') +
-                  (separator.sticky ? 'y' : '');
-      var lastLastIndex = 0;
-      // Make `global` and avoid `lastIndex` issues by working with a copy
-      var separatorCopy = new RegExp(separator.source, flags + 'g');
-      var match, lastIndex, lastLength;
-      while (match = call(regexpExec, separatorCopy, string)) {
-        lastIndex = separatorCopy.lastIndex;
-        if (lastIndex > lastLastIndex) {
-          push(output, stringSlice(string, lastLastIndex, match.index));
-          if (match.length > 1 && match.index < string.length) apply($push, output, arraySlice(match, 1));
-          lastLength = match[0].length;
-          lastLastIndex = lastIndex;
-          if (output.length >= lim) break;
-        }
-        if (separatorCopy.lastIndex === match.index) separatorCopy.lastIndex++; // Avoid an infinite loop
-      }
-      if (lastLastIndex === string.length) {
-        if (lastLength || !exec(separatorCopy, '')) push(output, '');
-      } else push(output, stringSlice(string, lastLastIndex));
-      return output.length > lim ? arraySlice(output, 0, lim) : output;
-    };
-  // Chakra, V8
-  } else if ('0'.split(undefined, 0).length) {
-    internalSplit = function (separator, limit) {
-      return separator === undefined && limit === 0 ? [] : call(nativeSplit, this, separator, limit);
-    };
-  } else internalSplit = nativeSplit;
-
-  return [
-    // `String.prototype.split` method
-    // https://tc39.es/ecma262/#sec-string.prototype.split
-    function split(separator, limit) {
-      var O = requireObjectCoercible(this);
-      var splitter = isNullOrUndefined(separator) ? undefined : getMethod(separator, SPLIT);
-      return splitter
-        ? call(splitter, separator, O, limit)
-        : call(internalSplit, toString(O), separator, limit);
-    },
-    // `RegExp.prototype[@@split]` method
-    // https://tc39.es/ecma262/#sec-regexp.prototype-@@split
-    //
-    // NOTE: This cannot be properly polyfilled in engines that don't support
-    // the 'y' flag.
-    function (string, limit) {
-      var rx = anObject(this);
-      var S = toString(string);
-      var res = maybeCallNative(internalSplit, rx, S, limit, internalSplit !== nativeSplit);
-
-      if (res.done) return res.value;
-
-      var C = speciesConstructor(rx, RegExp);
-
-      var unicodeMatching = rx.unicode;
-      var flags = (rx.ignoreCase ? 'i' : '') +
-                  (rx.multiline ? 'm' : '') +
-                  (rx.unicode ? 'u' : '') +
-                  (UNSUPPORTED_Y ? 'g' : 'y');
-
-      // ^(? + rx + ) is needed, in combination with some S slicing, to
-      // simulate the 'y' flag.
-      var splitter = new C(UNSUPPORTED_Y ? '^(?:' + rx.source + ')' : rx, flags);
-      var lim = limit === undefined ? MAX_UINT32 : limit >>> 0;
-      if (lim === 0) return [];
-      if (S.length === 0) return callRegExpExec(splitter, S) === null ? [S] : [];
-      var p = 0;
-      var q = 0;
-      var A = [];
-      while (q < S.length) {
-        splitter.lastIndex = UNSUPPORTED_Y ? 0 : q;
-        var z = callRegExpExec(splitter, UNSUPPORTED_Y ? stringSlice(S, q) : S);
-        var e;
-        if (
-          z === null ||
-          (e = min(toLength(splitter.lastIndex + (UNSUPPORTED_Y ? q : 0)), S.length)) === p
-        ) {
-          q = advanceStringIndex(S, q, unicodeMatching);
-        } else {
-          push(A, stringSlice(S, p, q));
-          if (A.length === lim) return A;
-          for (var i = 1; i <= z.length - 1; i++) {
-            push(A, z[i]);
-            if (A.length === lim) return A;
-          }
-          q = p = e;
-        }
-      }
-      push(A, stringSlice(S, p));
-      return A;
-    }
-  ];
-}, !SPLIT_WORKS_WITH_OVERWRITTEN_EXEC, UNSUPPORTED_Y);
-
-
 /***/ }),
 
 /***/ 3210:
@@ -30105,10 +30060,6 @@ var web_dom_collections_iterator = __webpack_require__(3948);
 var es_error_cause = __webpack_require__(1703);
 // 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.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.array.concat.js
 var es_array_concat = __webpack_require__(2222);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.map.js
@@ -30124,8 +30075,6 @@ var es_array_map = __webpack_require__(1249);
 
 
 
-
-
 /* harmony default export */ var MIconvue_type_script_lang_js_ = ({
   name: 'MIcon',
   props: {
@@ -30369,13 +30318,8 @@ MAccordion.install = function (Vue) {
 };
 
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.regexp.to-string.js
-var es_regexp_to_string = __webpack_require__(9714);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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=6b79eb30&
-
-
-
-var MAutocompletevue_type_template_id_6b79eb30_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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=6fb03662&
+var MAutocompletevue_type_template_id_6fb03662_render = function render() {
   var _vm = this,
       _c = _vm._self._c;
 
@@ -30390,12 +30334,15 @@ var MAutocompletevue_type_template_id_6b79eb30_render = function render() {
     class: {
       'mc-autocomplete--multi': _vm.multiple
     },
-    style: _vm.tagStyle
-  }, [_vm.multiple && _vm.tagValue.length > 0 ? _c('m-tag', {
+    style: _vm.setStyles
+  }, [_vm.multiple && _vm.listboxValue.length > 0 ? _c('MTag', {
+    ref: "tag",
     staticClass: "mc-autocomplete__tag",
     attrs: {
+      "id": _vm.tagId ? _vm.tagId : "autocompleteTag-".concat(_vm.uuid),
+      "label": _vm.setTagLabel,
+      "disabled": _vm.disabled,
       "type": "removable",
-      "label": _vm.tagValue.length.toString() + ' ' + _vm.tagLabel,
       "size": "s"
     },
     on: {
@@ -30403,19 +30350,27 @@ var MAutocompletevue_type_template_id_6b79eb30_render = function render() {
         return _vm.clearAutocomplete();
       }
     }
-  }) : _vm._e(), _c('m-text-input', {
+  }) : _vm._e(), _vm.loading ? _c('MLoader', {
+    staticClass: "mc-autocomplete__loader",
+    attrs: {
+      "size": "s"
+    }
+  }) : _vm._e(), _c('MTextInput', {
     attrs: {
+      "id": _vm.id,
       "placeholder": _vm.placeholder,
-      "is-invalid": _vm.itemListForDropdown.length === 0,
+      "is-invalid": _vm.invalid,
+      "disabled": _vm.disabled,
       "text-input-field-class": "mc-autocomplete__trigger",
       "icon-position": "left",
       "icon": "DisplaySearch48",
-      "autocomplete": "off"
+      "autocomplete": "off",
+      "type": "search"
     },
     on: {
-      "input": _vm.filterList,
+      "input": _vm.onInput,
       "click": function click($event) {
-        _vm.isOpen = true;
+        _vm.openState = true;
       }
     },
     model: {
@@ -30425,15 +30380,16 @@ var MAutocompletevue_type_template_id_6b79eb30_render = function render() {
       },
       expression: "inputValue"
     }
-  }), _c('m-list-box', {
+  }), _c('MListBox', {
     attrs: {
-      "open": _vm.isOpen,
-      "items": _vm.itemListForDropdown,
+      "open": _vm.openState,
+      "items": _vm.localItems,
       "multiple": _vm.multiple,
       "empty-search-label": _vm.emptySearchLabel,
       "data-key-expr": _vm.dataKeyExpr,
       "data-text-expr": _vm.dataTextExpr,
-      "data-value-expr": _vm.dataValueExpr
+      "data-value-expr": _vm.dataValueExpr,
+      "is-filtered": _vm.isFiltered
     },
     on: {
       "change": _vm.onChange
@@ -30457,14 +30413,18 @@ var MAutocompletevue_type_template_id_6b79eb30_render = function render() {
   })], 1);
 };
 
-var MAutocompletevue_type_template_id_6b79eb30_staticRenderFns = [];
-
-;// CONCATENATED MODULE: ./src/components/autocomplete/MAutocomplete.vue?vue&type=template&id=6b79eb30&
+var MAutocompletevue_type_template_id_6fb03662_staticRenderFns = [];
 
-// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.includes.js
-var es_string_includes = __webpack_require__(2023);
+// 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.regexp.to-string.js
+var es_regexp_to_string = __webpack_require__(9714);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.join.js
 var es_array_join = __webpack_require__(9600);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.string.includes.js
+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/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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=6adf0246&
 
 
@@ -30545,6 +30505,8 @@ var es_symbol_iterator = __webpack_require__(2165);
 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.exec.js
+var es_regexp_exec = __webpack_require__(4916);
 // 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
@@ -30640,6 +30602,8 @@ 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
@@ -30672,6 +30636,7 @@ var responsiveModifiers = function responsiveModifiers(baseClass, modifiers, out
 
 
 
+
 /* harmony default export */ var MTagvue_type_script_lang_js_ = ({
   name: 'MTag',
   model: {
@@ -30804,6 +30769,124 @@ var MTag_component = normalizeComponent(
 )
 
 /* harmony default export */ var MTag = (MTag_component.exports);
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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-83.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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.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/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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,
@@ -30850,8 +30933,6 @@ var MTextInputFieldvue_type_template_id_2ec1e218_render = function render() {
 
 var MTextInputFieldvue_type_template_id_2ec1e218_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-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/textinput/MTextInputField.vue?vue&type=script&lang=js&
@@ -30859,6 +30940,7 @@ var es_object_assign = __webpack_require__(9601);
 
 
 
+
 var supportedTypes = ['date', 'email', 'number', 'password', 'tel', 'text', 'time', 'search'];
 /* harmony default export */ var MTextInputFieldvue_type_script_lang_js_ = ({
   name: 'MTextInputField',
@@ -31074,16 +31156,16 @@ var MTextInput_component = normalizeComponent(
 )
 
 /* harmony default export */ var MTextInput = (MTextInput_component.exports);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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/MListBox.vue?vue&type=template&id=54382b77&
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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/MListBox.vue?vue&type=template&id=50612cc9&
 
 
 
-var MListBoxvue_type_template_id_54382b77_render = function render() {
+
+var MListBoxvue_type_template_id_50612cc9_render = function render() {
   var _vm = this,
       _c = _vm._self._c;
 
-  return _vm.items.length > 0 ? _c('ul', {
-    ref: "listbox",
+  return _c('ul', {
     staticClass: "mc-listbox",
     class: {
       'is-open': _vm.open,
@@ -31093,33 +31175,30 @@ var MListBoxvue_type_template_id_54382b77_render = function render() {
       "role": "listbox",
       "aria-labelledby": "listbox"
     }
-  }, _vm._l(_vm.localItems, function (item) {
+  }, [!_vm.isFiltered ? _vm._l(_vm.localItems, function (item, index) {
     return _c('li', {
       key: item.id,
       staticClass: "mc-listbox__item"
-    }, [item.icon ? _c('m-icon', {
+    }, [item.icon ? _c('MIcon', {
       staticClass: "mc-listbox__icon",
       attrs: {
         "name": item.icon,
         "color": "#666666"
       }
-    }) : _vm._e(), _c('label', {
-      staticClass: "mc-listbox__label",
-      attrs: {
-        "for": "listboxItem-".concat(item[_vm.dataKeyExpr], "-").concat(_vm.uuid)
-      }
-    }, [_vm._v(" " + _vm._s(item[_vm.dataTextExpr]) + " ")]), _c('input', {
+    }) : _vm._e(), (_vm.multiple ? 'checkbox' : 'radio') === 'checkbox' ? _c('input', {
       directives: [{
         name: "model",
         rawName: "v-model",
         value: _vm.localValue,
         expression: "localValue"
       }],
-      ref: "input",
-      refInFor: true,
-      staticClass: "mc-checkbox__input mc-listbox__input",
+      staticClass: "mc-listbox__input",
+      class: {
+        'mc-checkbox__input': _vm.multiple
+      },
       attrs: {
-        "id": "listboxItem-".concat(item[_vm.dataKeyExpr], "-").concat(_vm.uuid),
+        "id": _vm.setItemId(index),
+        "name": !_vm.multiple ? "listboxradio-".concat(_vm.uuid) : null,
         "type": "checkbox"
       },
       domProps: {
@@ -31146,25 +31225,83 @@ var MListBoxvue_type_template_id_54382b77_render = function render() {
           }
         }, _vm.onChange]
       }
-    })], 1);
-  }), 0) : _c('div', {
+    }) : (_vm.multiple ? 'checkbox' : 'radio') === 'radio' ? _c('input', {
+      directives: [{
+        name: "model",
+        rawName: "v-model",
+        value: _vm.localValue,
+        expression: "localValue"
+      }],
+      staticClass: "mc-listbox__input",
+      class: {
+        'mc-checkbox__input': _vm.multiple
+      },
+      attrs: {
+        "id": _vm.setItemId(index),
+        "name": !_vm.multiple ? "listboxradio-".concat(_vm.uuid) : null,
+        "type": "radio"
+      },
+      domProps: {
+        "value": item[_vm.dataValueExpr],
+        "checked": _vm._q(_vm.localValue, item[_vm.dataValueExpr])
+      },
+      on: {
+        "change": [function ($event) {
+          _vm.localValue = item[_vm.dataValueExpr];
+        }, _vm.onChange]
+      }
+    }) : _c('input', {
+      directives: [{
+        name: "model",
+        rawName: "v-model",
+        value: _vm.localValue,
+        expression: "localValue"
+      }],
+      staticClass: "mc-listbox__input",
+      class: {
+        'mc-checkbox__input': _vm.multiple
+      },
+      attrs: {
+        "id": _vm.setItemId(index),
+        "name": !_vm.multiple ? "listboxradio-".concat(_vm.uuid) : null,
+        "type": _vm.multiple ? 'checkbox' : 'radio'
+      },
+      domProps: _defineProperty({
+        "value": item[_vm.dataValueExpr]
+      }, "value", _vm.localValue),
+      on: {
+        "change": _vm.onChange,
+        "input": function input($event) {
+          if ($event.target.composing) return;
+          _vm.localValue = $event.target.value;
+        }
+      }
+    }), _c('label', {
+      staticClass: "mc-listbox__label",
+      attrs: {
+        "for": _vm.setItemId(index)
+      }
+    }, [_vm._t("item", function () {
+      return [_vm._v(" " + _vm._s(item[_vm.dataTextExpr]) + " ")];
+    }, {
+      "item": item
+    })], 2)], 1);
+  }) : _c('li', {
+    staticClass: "mc-listbox__item"
+  }, [_c('span', {
     staticClass: "mc-listbox__empty"
-  }, [_vm._v(" " + _vm._s(_vm.emptySearchLabel) + " ")]);
+  }, [_vm._v(_vm._s(_vm.emptySearchLabel))])])], 2);
 };
 
-var MListBoxvue_type_template_id_54382b77_staticRenderFns = [];
+var MListBoxvue_type_template_id_50612cc9_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue?vue&type=template&id=54382b77&
+;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue?vue&type=template&id=50612cc9&
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=script&lang=js&
 
 
-
-
-
-
 /* harmony default export */ var MListBoxvue_type_script_lang_js_ = ({
-  name: 'MListbox',
+  name: 'MListBox',
   components: {
     MIcon: MIcon
   },
@@ -31172,15 +31309,17 @@ var MListBoxvue_type_template_id_54382b77_staticRenderFns = [];
     event: 'change'
   },
   props: {
+    items: {
+      type: Array,
+      required: true
+    },
     open: {
       type: Boolean,
       default: false
     },
-    items: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
+    isFiltered: {
+      type: Boolean,
+      default: false
     },
     multiple: {
       type: Boolean,
@@ -31190,36 +31329,39 @@ var MListBoxvue_type_template_id_54382b77_staticRenderFns = [];
       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: 'label'
     },
     dataValueExpr: {
       type: String,
-      default: 'text'
+      default: 'value'
     },
     value: {
-      type: [Array, String],
+      type: [Array, String, Number],
       default: undefined
     }
   },
   data: function data() {
     return {
-      localItems: null,
-      localValue: [],
-      selected: [],
-      uuid: null,
-      inputBaseId: 'listboxInput'
+      uuid: Math.random(),
+      localItems: undefined,
+      localValue: undefined
     };
   },
+  computed: {
+    setItemId: function setItemId() {
+      var _this = this;
+
+      return function (index) {
+        return "listboxItem-".concat(index + _this.uuid);
+      };
+    }
+  },
   watch: {
     items: {
       handler: function handler(val) {
@@ -31228,52 +31370,24 @@ var MListBoxvue_type_template_id_54382b77_staticRenderFns = [];
       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');
-            }
-          });
-        }
+      handler: function handler(val) {
+        this.localValue = val;
       },
       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);
     }
   }
 });
 ;// 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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=style&index=0&id=54382b77&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/listbox/MListBox.vue?vue&type=style&index=0&id=50612cc9&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue?vue&type=style&index=0&id=54382b77&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue?vue&type=style&index=0&id=50612cc9&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/listbox/MListBox.vue
 
@@ -31286,8 +31400,8 @@ var MListBoxvue_type_template_id_54382b77_staticRenderFns = [];
 
 var MListBox_component = normalizeComponent(
   listbox_MListBoxvue_type_script_lang_js_,
-  MListBoxvue_type_template_id_54382b77_render,
-  MListBoxvue_type_template_id_54382b77_staticRenderFns,
+  MListBoxvue_type_template_id_50612cc9_render,
+  MListBoxvue_type_template_id_50612cc9_staticRenderFns,
   false,
   null,
   null,
@@ -31306,12 +31420,17 @@ var MListBox_component = normalizeComponent(
 
 
 
+
+
+
+
 /* harmony default export */ var MAutocompletevue_type_script_lang_js_ = ({
   name: 'MAutocomplete',
   components: {
-    MListBox: MListBox,
     MTag: MTag,
-    MTextInput: MTextInput
+    MLoader: MLoader,
+    MTextInput: MTextInput,
+    MListBox: MListBox
   },
   directives: {
     'click-outside': {
@@ -31333,36 +31452,68 @@ var MListBox_component = normalizeComponent(
     event: 'change'
   },
   props: {
-    open: {
-      type: Boolean,
-      default: false
+    // Tag Element
+    tagId: {
+      type: String,
+      default: null
     },
     tagLabel: {
       type: String,
       default: ''
     },
+    // Input Element
+    id: {
+      type: String,
+      default: null
+    },
+    input: {
+      type: String,
+      default: null
+    },
     placeholder: {
       type: String,
-      default: ''
+      default: null
+    },
+    filter: {
+      type: Function,
+      default: null
+    },
+    filterOnType: {
+      type: Boolean,
+      default: true
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // Listbox Element
     items: {
       type: Array,
-      default: function _default() {
-        return [];
-      },
       required: true
     },
-    multiple: {
+    value: {
+      type: [Array, String, Number],
+      default: undefined
+    },
+    open: {
       type: Boolean,
       default: false
     },
-    filter: {
-      type: Function,
-      default: null
+    multiple: {
+      type: Boolean,
+      default: false
     },
     emptySearchLabel: {
       type: String,
-      default: 'No item matching your criteria found'
+      default: 'No results found'
     },
     dataKeyExpr: {
       type: String,
@@ -31376,27 +31527,34 @@ var MListBox_component = normalizeComponent(
       type: String,
       default: 'value'
     },
-    value: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
+    sort: {
+      type: Boolean,
+      default: true
+    },
+    // Global
+    maxWidth: {
+      type: String,
+      default: '17.875rem'
     }
   },
   data: function data() {
     return {
-      itemListForDropdown: this.items,
-      isOpen: this.open,
+      uuid: Math.random(),
+      openState: this.open,
       tagWidth: '0px',
-      maxWidth: '17.875rem',
-      uuid: undefined,
-      tagValue: '',
-      inputValue: '',
-      listboxValue: []
+      tagValue: null,
+      inputValue: null,
+      localItems: null,
+      sortedListItems: null,
+      listboxValue: null,
+      isFiltered: null
     };
   },
   computed: {
-    tagStyle: function tagStyle() {
+    setTagLabel: function setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    setStyles: function setStyles() {
       return {
         '--tag-width': this.tagWidth,
         '--max-width': this.maxWidth
@@ -31404,69 +31562,93 @@ var MListBox_component = normalizeComponent(
     }
   },
   watch: {
-    listboxValue: function listboxValue(newValue) {
-      var textToDisplay = [];
-      var valueExpr = this.dataValueExpr;
-      var textExpr = this.dataTextExpr;
-      this.tagValue = newValue;
-
-      if (newValue.length) {
-        var selectedItems = this.items.filter(function (item) {
-          return newValue.includes(item[valueExpr]);
-        });
-        selectedItems.forEach(function (item) {
-          return textToDisplay.push(item[textExpr]);
-        });
-        this.inputValue = textToDisplay.join(', ');
-      }
+    value: {
+      handler: function handler(val) {
+        if (!val && this.multiple) {
+          this.listboxValue = [];
+        } else {
+          this.listboxValue = val;
+        }
+      },
+      immediate: true
     },
-    tagValue: {
-      handler: function handler() {
-        this.setTagWidth();
+    items: {
+      handler: function handler(val) {
+        this.localItems = val; // this.clearAutocomplete();
       },
       immediate: true
     },
-    value: {
-      handler: function handler(value) {
-        this.listboxValue = value;
+    listboxValue: function listboxValue(val) {
+      var _this = this;
+
+      var value = Array.isArray(val) ? val : val.toString();
+      var selectedItems = this.getSelectedItems(value);
+      var seletedLabels = selectedItems.map(function (item) {
+        return item[_this.dataTextExpr];
+      });
+      this.inputValue = seletedLabels.join(', ');
+
+      if (this.multiple) {
+        this.tagValue = val;
+      }
+    },
+    tagValue: function tagValue() {
+      this.setTagWidth();
+    },
+    openState: function openState(val) {
+      var eventName = val ? 'open' : 'close';
+      this.$emit(eventName);
+      this.$emit('update:open', val);
+    },
+    input: {
+      handler: function handler(val) {
+        this.inputValue = val;
       },
       immediate: true
     }
   },
-  mounted: function mounted() {
-    this.uuid = this._uid;
-  },
   methods: {
     setTagWidth: function setTagWidth() {
-      var _this = this;
+      var _this2 = this;
 
       this.$nextTick(function () {
-        _this.tagWidth = document && document.querySelector('.mc-autocomplete__tag') ? document.querySelector('.mc-autocomplete__tag').clientWidth + 'px' : '0px';
+        if (_this2.$refs.tag && _this2.$refs.tag.$el) {
+          _this2.tagWidth = _this2.$refs.tag.$el.clientWidth + 'px';
+        } else {
+          _this2.tagWidth = '0px';
+        }
       });
     },
     clearAutocomplete: function clearAutocomplete() {
-      this.listboxValue = [];
-      this.inputValue = '';
+      this.listboxValue = this.multiple ? [] : undefined;
       this.onChange();
       this.$emit('clear');
     },
     filterList: function filterList(value) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (value.length && this.filter) {
         this.filter(value);
-      } else if (value.length) {
-        this.itemListForDropdown = this.itemListForDropdown.filter(function (item) {
-          return item[_this2.dataTextExpr].toUpperCase().includes(value.toUpperCase());
+      } else if (value.length && this.filterOnType) {
+        this.localItems = this.items.filter(function (item) {
+          return item[_this3.dataTextExpr].toUpperCase().includes(value.toUpperCase());
         });
+        this.isFiltered = !this.localItems.length;
       } else {
-        this.itemListForDropdown = this.items;
+        this.localItems = this.items;
+        this.isFiltered = !this.localItems.length;
       }
 
-      this.$emit('list-filtered', this.itemListForDropdown);
+      this.$emit('list-filtered', this.localItems);
     },
     onClickOutside: function onClickOutside() {
-      this.isOpen = false;
+      this.openState = false;
+
+      if (this.multiple && this.sort) {
+        this.sortItems();
+      } else {
+        this.localItems = this.items;
+      }
     },
     onChange: function onChange() {
       this.$emit('change', this.listboxValue);
@@ -31474,15 +31656,50 @@ var MListBox_component = normalizeComponent(
       if (!this.multiple) {
         this.onClickOutside();
       }
+    },
+    getSelectedItems: function getSelectedItems(val) {
+      var _this4 = this;
+
+      var value = val ? val : this.listboxValue;
+      var selectedItems = this.items.filter(function (item) {
+        return value.includes(item[_this4.dataValueExpr]);
+      });
+      return selectedItems;
+    },
+    sortItems: function sortItems() {
+      var _this5 = this;
+
+      this.sortedListItems = this.items;
+      var selectedItems = this.getSelectedItems();
+      this.sortedListItems.sort(function (a, b) {
+        var hasItemA = selectedItems.includes(a);
+        var hasItemB = selectedItems.includes(b);
+
+        if (hasItemA === hasItemB) {
+          return a[_this5.dataValueExpr] - b[_this5.dataValueExpr];
+        } else if (hasItemA < hasItemB) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
+      this.localItems = this.sortedListItems;
+    },
+    handleInputValue: function handleInputValue(value) {
+      this.$emit('update:input', value);
+    },
+    onInput: function onInput(value) {
+      this.handleInputValue(value);
+      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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.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=6b79eb30&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.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=6fb03662&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/autocomplete/MAutocomplete.vue?vue&type=style&index=0&id=6b79eb30&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/autocomplete/MAutocomplete.vue?vue&type=style&index=0&id=6fb03662&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/autocomplete/MAutocomplete.vue
 
@@ -31495,8 +31712,8 @@ var MListBox_component = normalizeComponent(
 
 var MAutocomplete_component = normalizeComponent(
   autocomplete_MAutocompletevue_type_script_lang_js_,
-  MAutocompletevue_type_template_id_6b79eb30_render,
-  MAutocompletevue_type_template_id_6b79eb30_staticRenderFns,
+  MAutocompletevue_type_template_id_6fb03662_render,
+  MAutocompletevue_type_template_id_6fb03662_staticRenderFns,
   false,
   null,
   null,
@@ -31530,6 +31747,7 @@ var MBadgevue_type_template_id_579457c4_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/badge/MBadge.vue?vue&type=script&lang=js&
 
+
 /* harmony default export */ var MBadgevue_type_script_lang_js_ = ({
   name: 'MBadge',
   props: {
@@ -31680,6 +31898,7 @@ var checkThemeValue = function checkThemeValue(theme) {
 
 
 
+
 /* harmony default export */ var MLinkvue_type_script_lang_js_ = ({
   name: 'MLink',
   components: {
@@ -31920,6 +32139,7 @@ var MButtonvue_type_template_id_beef32a2_staticRenderFns = [];
 
 
 
+
 /* harmony default export */ var MButtonvue_type_script_lang_js_ = ({
   name: 'MButton',
   components: {
@@ -32387,6 +32607,7 @@ var MCheckboxGroupvue_type_template_id_2ef3bca1_staticRenderFns = [];
 
 
 
+
 /* harmony default export */ var MCheckboxGroupvue_type_script_lang_js_ = ({
   name: 'MCheckboxGroup',
   components: {
@@ -32699,6 +32920,8 @@ var es_math_to_string_tag = __webpack_require__(2703);
 var es_object_get_prototype_of = __webpack_require__(489);
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.set-prototype-of.js
 var es_object_set_prototype_of = __webpack_require__(8304);
+// EXTERNAL MODULE: ./node_modules/core-js/modules/es.object.proto.js
+var es_object_proto = __webpack_require__(7987);
 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js
 
 
@@ -32735,6 +32958,8 @@ function _typeof(obj) {
 
 
 
+
+
 
 
 function _regeneratorRuntime() {
@@ -33145,6 +33370,7 @@ var es_object_define_properties = __webpack_require__(3321);
 
 
 
+
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
@@ -33174,8 +33400,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/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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=37d80856&scoped=true&
@@ -33322,6 +33546,7 @@ var es_string_trim = __webpack_require__(3210);
 
 
 
+
 /* harmony default export */ var MSelectvue_type_script_lang_js_ = ({
   name: 'MSelect',
   inject: {
@@ -33454,6 +33679,7 @@ var MSelect_component = normalizeComponent(
 
 
 
+
 /* harmony default export */ var MPaginationvue_type_script_lang_js_ = ({
   name: 'MPagination',
   components: {
@@ -33599,7 +33825,6 @@ var es_array_reduce_right = __webpack_require__(6644);
 
 
 
-
 /** create a sort function to pass into the sort function of the array.
  * The objective is to be able to sort on several fields ordered according to the same order as the parameter.
  * @example
@@ -33756,6 +33981,7 @@ function parseClasses(value, obj) {
 
 
 
+
 
 
 /** Map headers with default values. */
@@ -34386,6 +34612,7 @@ var es_array_index_of = __webpack_require__(2772);
 
 
 
+
 /* harmony default export */ var MDataTableHeadervue_type_script_lang_js_ = ({
   name: 'MDataTableHeader',
   props: {
@@ -34584,11 +34811,8 @@ MField.install = function (Vue) {
 };
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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=f1081fec&
-
-
-
-var MDropdownvue_type_template_id_f1081fec_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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=952f7ef8&
+var MDropdownvue_type_template_id_952f7ef8_render = function render() {
   var _vm = this,
       _c = _vm._self._c;
 
@@ -34604,12 +34828,15 @@ var MDropdownvue_type_template_id_f1081fec_render = function render() {
     class: {
       'mc-dropdown--multi': _vm.multiple
     },
-    style: _vm.tagStyle
-  }, [_vm.multiple && _vm.tagValue.length > 0 ? _c('m-tag', {
+    style: _vm.setStyles
+  }, [_vm.multiple && _vm.listboxValue.length > 0 ? _c('MTag', {
+    ref: "tag",
     staticClass: "mc-dropdown__tag",
     attrs: {
+      "id": _vm.tagId ? _vm.tagId : "autoCompleteTag-".concat(_vm.uuid),
+      "label": _vm.setTagLabel,
+      "disabled": _vm.disabled,
       "type": "removable",
-      "label": _vm.tagValue.length.toString() + ' ' + _vm.tagLabel,
       "size": "s"
     },
     on: {
@@ -34620,21 +34847,22 @@ var MDropdownvue_type_template_id_f1081fec_render = function render() {
   }) : _vm._e(), _c('button', {
     staticClass: "mc-select mc-dropdown__trigger",
     class: {
-      'is-open': _vm.isOpen
+      'is-open': _vm.openState
     },
     attrs: {
       "type": "button"
     },
     on: {
       "click": function click($event) {
-        _vm.isOpen = !_vm.isOpen;
+        _vm.openState = !_vm.openState;
       }
     }
-  }, [_vm._v(" " + _vm._s(_vm.inputValue) + " ")]), _c('m-list-box', {
+  }, [_vm._v(" " + _vm._s(_vm.buttonValue) + " ")]), _c('MListBox', {
     attrs: {
-      "open": _vm.isOpen,
-      "items": _vm.itemListForDropdown,
+      "open": _vm.openState,
+      "items": _vm.localItems,
       "multiple": _vm.multiple,
+      "empty-search-label": _vm.emptySearchLabel,
       "data-key-expr": _vm.dataKeyExpr,
       "data-text-expr": _vm.dataTextExpr,
       "data-value-expr": _vm.dataValueExpr
@@ -34661,9 +34889,7 @@ var MDropdownvue_type_template_id_f1081fec_render = function render() {
   })], 1);
 };
 
-var MDropdownvue_type_template_id_f1081fec_staticRenderFns = [];
-
-;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=template&id=f1081fec&
+var MDropdownvue_type_template_id_952f7ef8_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/dropdown/MDropdown.vue?vue&type=script&lang=js&
 
@@ -34674,11 +34900,14 @@ var MDropdownvue_type_template_id_f1081fec_staticRenderFns = [];
 
 
 
+
+
+
 /* harmony default export */ var MDropdownvue_type_script_lang_js_ = ({
   name: 'MDropdown',
   components: {
-    MListBox: MListBox,
-    MTag: MTag
+    MTag: MTag,
+    MListBox: MListBox
   },
   directives: {
     'click-outside': {
@@ -34700,33 +34929,49 @@ var MDropdownvue_type_template_id_f1081fec_staticRenderFns = [];
     event: 'change'
   },
   props: {
-    open: {
-      type: Boolean,
-      default: false
+    // Tag Element
+    tagId: {
+      type: String,
+      default: null
     },
     tagLabel: {
       type: String,
       default: ''
     },
+    // Input Element
     placeholder: {
       type: String,
       default: '-- Placeholder --'
     },
+    filter: {
+      type: Function,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // Listbox Element
     items: {
       type: Array,
-      default: function _default() {
-        return [];
-      },
       required: true
     },
-    multiple: {
+    value: {
+      type: [Array, String, Number],
+      default: undefined
+    },
+    open: {
       type: Boolean,
       default: false
     },
-    disabled: {
+    multiple: {
       type: Boolean,
       default: false
     },
+    emptySearchLabel: {
+      type: String,
+      default: 'No results found'
+    },
     dataKeyExpr: {
       type: String,
       default: 'id'
@@ -34739,27 +34984,33 @@ var MDropdownvue_type_template_id_f1081fec_staticRenderFns = [];
       type: String,
       default: 'value'
     },
-    value: {
-      type: Array,
-      default: function _default() {
-        return [];
-      }
+    sort: {
+      type: Boolean,
+      default: true
+    },
+    // Global
+    maxWidth: {
+      type: String,
+      default: '17.875rem'
     }
   },
   data: function data() {
     return {
-      itemListForDropdown: this.items,
-      isOpen: this.open,
+      uuid: Math.random(),
+      openState: this.open,
       tagWidth: '0px',
-      maxWidth: '17.875rem',
-      uuid: undefined,
-      tagValue: '',
-      inputValue: '',
-      listboxValue: []
+      tagValue: null,
+      buttonValue: this.placeholder,
+      localItems: null,
+      sortedListItems: null,
+      listboxValue: null
     };
   },
   computed: {
-    tagStyle: function tagStyle() {
+    setTagLabel: function setTagLabel() {
+      return this.listboxValue.length.toString() + ' ' + this.tagLabel;
+    },
+    setStyles: function setStyles() {
       return {
         '--tag-width': this.tagWidth,
         '--max-width': this.maxWidth
@@ -34767,56 +35018,74 @@ var MDropdownvue_type_template_id_f1081fec_staticRenderFns = [];
     }
   },
   watch: {
-    listboxValue: function listboxValue(newValue) {
-      var textToDisplay = [];
-      var valueExpr = this.dataValueExpr;
-      var textExpr = this.dataTextExpr;
-      this.tagValue = newValue;
-
-      if (newValue.length) {
-        var selectedItems = this.items.filter(function (item) {
-          return newValue.includes(item[valueExpr]);
-        });
-        selectedItems.forEach(function (item) {
-          return textToDisplay.push(item[textExpr]);
-        });
-        this.inputValue = textToDisplay.join(', ');
-      } else {
-        this.inputValue = this.placeholder;
-      }
-    },
-    tagValue: {
-      handler: function handler() {
-        this.setTagWidth();
+    value: {
+      handler: function handler(val) {
+        if (!val && this.multiple) {
+          this.listboxValue = [];
+        } else {
+          this.listboxValue = val;
+        }
       },
       immediate: true
     },
-    value: {
-      handler: function handler(value) {
-        this.listboxValue = value;
+    items: {
+      handler: function handler(val) {
+        this.localItems = val; // this.clearAutocomplete();
       },
       immediate: true
+    },
+    listboxValue: function listboxValue(val) {
+      var _this = this;
+
+      var value = Array.isArray(val) ? val : val.toString();
+      var selectedItems = this.getSelectedItems(value);
+      var seletedLabels = selectedItems.map(function (item) {
+        return item[_this.dataTextExpr];
+      });
+      this.buttonValue = seletedLabels.join(', ');
+
+      if (val.length === 0) {
+        this.buttonValue = this.placeholder;
+      }
+
+      if (this.multiple) {
+        this.tagValue = val;
+      }
+    },
+    tagValue: function tagValue() {
+      this.setTagWidth();
+    },
+    openState: function openState(val) {
+      var eventName = val ? 'open' : 'close';
+      this.$emit(eventName);
+      this.$emit('update:open', val);
     }
   },
-  mounted: function mounted() {
-    this.uuid = this._uid;
-  },
   methods: {
     setTagWidth: function setTagWidth() {
-      var _this = this;
+      var _this2 = this;
 
       this.$nextTick(function () {
-        _this.tagWidth = document && document.querySelector('.mc-dropdown__tag') ? document.querySelector('.mc-dropdown__tag').clientWidth + 8 + 'px' : '0px';
+        if (_this2.$refs.tag && _this2.$refs.tag.$el) {
+          _this2.tagWidth = _this2.$refs.tag.$el.clientWidth + 8 + 'px';
+        } else {
+          _this2.tagWidth = '0px';
+        }
       });
     },
     clearAutocomplete: function clearAutocomplete() {
-      this.listboxValue = [];
-      this.inputValue = '';
+      this.listboxValue = this.multiple ? [] : undefined;
       this.onChange();
       this.$emit('clear');
     },
     onClickOutside: function onClickOutside() {
-      this.isOpen = false;
+      this.openState = false;
+
+      if (this.multiple && this.sort) {
+        this.sortItems();
+      } else {
+        this.localItems = this.items;
+      }
     },
     onChange: function onChange() {
       this.$emit('change', this.listboxValue);
@@ -34824,15 +35093,42 @@ var MDropdownvue_type_template_id_f1081fec_staticRenderFns = [];
       if (!this.multiple) {
         this.onClickOutside();
       }
+    },
+    getSelectedItems: function getSelectedItems(val) {
+      var _this3 = this;
+
+      var value = val ? val : this.listboxValue;
+      var selectedItems = this.items.filter(function (item) {
+        return value.includes(item[_this3.dataValueExpr]);
+      });
+      return selectedItems;
+    },
+    sortItems: function sortItems() {
+      var _this4 = this;
+
+      this.sortedListItems = this.items;
+      var selectedItems = this.getSelectedItems();
+      this.sortedListItems.sort(function (a, b) {
+        var hasItemA = selectedItems.includes(a);
+        var hasItemB = selectedItems.includes(b);
+
+        if (hasItemA === hasItemB) {
+          return a[_this4.dataValueExpr] - b[_this4.dataValueExpr];
+        } else if (hasItemA < hasItemB) {
+          return 1;
+        } else {
+          return -1;
+        }
+      });
     }
   }
 });
 ;// 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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.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=f1081fec&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.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=952f7ef8&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=f1081fec&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue?vue&type=style&index=0&id=952f7ef8&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/dropdown/MDropdown.vue
 
@@ -34845,8 +35141,8 @@ var MDropdownvue_type_template_id_f1081fec_staticRenderFns = [];
 
 var MDropdown_component = normalizeComponent(
   dropdown_MDropdownvue_type_script_lang_js_,
-  MDropdownvue_type_template_id_f1081fec_render,
-  MDropdownvue_type_template_id_f1081fec_staticRenderFns,
+  MDropdownvue_type_template_id_952f7ef8_render,
+  MDropdownvue_type_template_id_952f7ef8_staticRenderFns,
   false,
   null,
   null,
@@ -35012,6 +35308,7 @@ var es_array_last_index_of = __webpack_require__(4986);
 
 
 
+
 /* harmony default export */ var MFileResultvue_type_script_lang_js_ = ({
   name: 'MFileResult',
   inheritAttrs: false,
@@ -35305,6 +35602,7 @@ var MFlagvue_type_template_id_05669004_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/flag/MFlag.vue?vue&type=script&lang=js&
 
+
 /* harmony default export */ var MFlagvue_type_script_lang_js_ = ({
   name: 'MFlag',
   props: {
@@ -35885,6 +36183,7 @@ var MListBoxActionsvue_type_template_id_54ca0bbc_staticRenderFns = [];
 
 
 
+
 /* harmony default export */ var MListBoxActionsvue_type_script_lang_js_ = ({
   name: 'MListBoxActions',
   components: {
@@ -35999,123 +36298,6 @@ MListBoxActions.install = function (Vue) {
 };
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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-83.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-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.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: ./src/components/loader/index.js
 
 
@@ -36400,6 +36582,7 @@ var MNotificationvue_type_template_id_207ba342_staticRenderFns = [];
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/notification/MNotification.vue?vue&type=script&lang=js&
 
 
+
 /* harmony default export */ var MNotificationvue_type_script_lang_js_ = ({
   name: 'MNotification',
   components: {
@@ -37127,11 +37310,11 @@ MPasswordInput.install = function (Vue) {
 };
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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/phonenumber/MPhoneNumber.vue?vue&type=template&id=2e69cf6b&
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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/phonenumber/MPhoneNumber.vue?vue&type=template&id=137d079b&
 
 
 
-var MPhoneNumbervue_type_template_id_2e69cf6b_render = function render() {
+var MPhoneNumbervue_type_template_id_137d079b_render = function render() {
   var _vm = this,
       _c = _vm._self._c;
 
@@ -37218,7 +37401,7 @@ var MPhoneNumbervue_type_template_id_2e69cf6b_render = function render() {
   }), 0)]), _c('input', _vm._g({
     staticClass: "mc-phone-number__input mc-text-input mc-text-input--m mc-field__input",
     attrs: {
-      "id": "smallField",
+      "id": _vm.id,
       "type": "tel",
       "name": "phone-number-input",
       "placeholder": _vm.placeholder,
@@ -37243,9 +37426,9 @@ var MPhoneNumbervue_type_template_id_2e69cf6b_render = function render() {
   }, _vm.$listeners))]);
 };
 
-var MPhoneNumbervue_type_template_id_2e69cf6b_staticRenderFns = [];
+var MPhoneNumbervue_type_template_id_137d079b_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/phonenumber/MPhoneNumber.vue?vue&type=template&id=2e69cf6b&
+;// CONCATENATED MODULE: ./src/components/phonenumber/MPhoneNumber.vue?vue&type=template&id=137d079b&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.find.js
 var es_array_find = __webpack_require__(9826);
@@ -43231,6 +43414,10 @@ function getExampleNumber_getExampleNumber() {
       type: [String, Number],
       default: ''
     },
+    id: {
+      type: String,
+      default: null
+    },
     maxlength: {
       type: Number,
       default: 25
@@ -43414,10 +43601,10 @@ function getExampleNumber_getExampleNumber() {
 });
 ;// CONCATENATED MODULE: ./src/components/phonenumber/MPhoneNumber.vue?vue&type=script&lang=js&
  /* harmony default export */ var phonenumber_MPhoneNumbervue_type_script_lang_js_ = (MPhoneNumbervue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/phonenumber/MPhoneNumber.vue?vue&type=style&index=0&id=2e69cf6b&prod&lang=scss&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/phonenumber/MPhoneNumber.vue?vue&type=style&index=0&id=137d079b&prod&lang=scss&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/phonenumber/MPhoneNumber.vue?vue&type=style&index=0&id=2e69cf6b&prod&lang=scss&
+;// CONCATENATED MODULE: ./src/components/phonenumber/MPhoneNumber.vue?vue&type=style&index=0&id=137d079b&prod&lang=scss&
 
 ;// CONCATENATED MODULE: ./src/components/phonenumber/MPhoneNumber.vue
 
@@ -43430,8 +43617,8 @@ function getExampleNumber_getExampleNumber() {
 
 var MPhoneNumber_component = normalizeComponent(
   phonenumber_MPhoneNumbervue_type_script_lang_js_,
-  MPhoneNumbervue_type_template_id_2e69cf6b_render,
-  MPhoneNumbervue_type_template_id_2e69cf6b_staticRenderFns,
+  MPhoneNumbervue_type_template_id_137d079b_render,
+  MPhoneNumbervue_type_template_id_137d079b_staticRenderFns,
   false,
   null,
   null,
@@ -43477,6 +43664,7 @@ var MProgressvue_type_template_id_d4327f84_staticRenderFns = [];
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/progressbar/MProgress.vue?vue&type=script&lang=js&
 
 
+
 /* harmony default export */ var MProgressvue_type_script_lang_js_ = ({
   name: 'MProgress',
   props: {
@@ -44225,6 +44413,7 @@ var MStarsResultvue_type_template_id_5508eac8_staticRenderFns = [];
 
 
 
+
 var MStarsResultvue_type_script_lang_js_RATINGVALUE = 5;
 /* harmony default export */ var MStarsResultvue_type_script_lang_js_ = ({
   name: 'MStarsResult',
@@ -44345,10 +44534,10 @@ MSelect.install = function (Vue) {
 };
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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/stepper/MStepper.vue?vue&type=template&id=b47365dc&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.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/stepper/MStepper.vue?vue&type=template&id=2e57b494&scoped=true&
 
 
-var MSteppervue_type_template_id_b47365dc_scoped_true_render = function render() {
+var MSteppervue_type_template_id_2e57b494_scoped_true_render = function render() {
   var _vm = this,
       _c = _vm._self._c;
 
@@ -44381,7 +44570,7 @@ var MSteppervue_type_template_id_b47365dc_scoped_true_render = function render()
           _vm.isStepValidated(idx) && _vm.$emit('step-changed', step);
         }
       }
-    }, [step.href ? _c('a', {
+    }, [step.href && _vm.isStepValidated(idx) ? _c('a', {
       staticClass: "mc-stepper__link",
       attrs: {
         "href": step.href
@@ -44422,9 +44611,9 @@ var MSteppervue_type_template_id_b47365dc_scoped_true_render = function render()
   }), 0)]);
 };
 
-var MSteppervue_type_template_id_b47365dc_scoped_true_staticRenderFns = [];
+var MSteppervue_type_template_id_2e57b494_scoped_true_staticRenderFns = [];
 
-;// CONCATENATED MODULE: ./src/components/stepper/MStepper.vue?vue&type=template&id=b47365dc&scoped=true&
+;// CONCATENATED MODULE: ./src/components/stepper/MStepper.vue?vue&type=template&id=2e57b494&scoped=true&
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/stepper/MStepper.vue?vue&type=script&lang=js&
 
@@ -44464,10 +44653,10 @@ var MSteppervue_type_template_id_b47365dc_scoped_true_staticRenderFns = [];
 });
 ;// CONCATENATED MODULE: ./src/components/stepper/MStepper.vue?vue&type=script&lang=js&
  /* harmony default export */ var stepper_MSteppervue_type_script_lang_js_ = (MSteppervue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/stepper/MStepper.vue?vue&type=style&index=0&id=b47365dc&prod&lang=scss&scoped=true&
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-65.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-65.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-65.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-65.use[3]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-84.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/stepper/MStepper.vue?vue&type=style&index=0&id=2e57b494&prod&lang=scss&scoped=true&
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/components/stepper/MStepper.vue?vue&type=style&index=0&id=b47365dc&prod&lang=scss&scoped=true&
+;// CONCATENATED MODULE: ./src/components/stepper/MStepper.vue?vue&type=style&index=0&id=2e57b494&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/components/stepper/MStepper.vue
 
@@ -44480,11 +44669,11 @@ var MSteppervue_type_template_id_b47365dc_scoped_true_staticRenderFns = [];
 
 var MStepper_component = normalizeComponent(
   stepper_MSteppervue_type_script_lang_js_,
-  MSteppervue_type_template_id_b47365dc_scoped_true_render,
-  MSteppervue_type_template_id_b47365dc_scoped_true_staticRenderFns,
+  MSteppervue_type_template_id_2e57b494_scoped_true_render,
+  MSteppervue_type_template_id_2e57b494_scoped_true_staticRenderFns,
   false,
   null,
-  "b47365dc",
+  "2e57b494",
   null
   
 )
@@ -44902,6 +45091,7 @@ var MTogglevue_type_template_id_d62832f8_staticRenderFns = [];
 
 
 
+
 /* harmony default export */ var MTogglevue_type_script_lang_js_ = ({
   name: 'MToggle',
   props: {