npm - @nethserver/ns8-ui-lib - Versions diffs - 0.1.2 → 0.1.5 - Mend

@nethserver/ns8-ui-lib 0.1.2 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/ns8-ui-lib.esm.js +1196 -531
package/dist/ns8-ui-lib.min.js +1 -1
package/dist/ns8-ui-lib.ssr.js +980 -486
package/package.json +1 -1
package/src/lib-components/NsByteSlider.vue +478 -0
package/src/lib-components/NsCheckbox.vue +1 -11
package/src/lib-components/NsDataTable.vue +27 -16
package/src/lib-components/NsProgressBar.vue +6 -1

package/dist/ns8-ui-lib.esm.js CHANGED Viewed

@@ -124,6 +124,12 @@ import Locked32 from '@carbon/icons-vue/es/locked/32';
 import Folder16 from '@carbon/icons-vue/es/folder/16';
 import Folder20 from '@carbon/icons-vue/es/folder/20';
 import Folder32 from '@carbon/icons-vue/es/folder/32';
+import Asterisk16 from '@carbon/icons-vue/es/asterisk/16';
+import Asterisk20 from '@carbon/icons-vue/es/asterisk/20';
+import Asterisk32 from '@carbon/icons-vue/es/asterisk/32';
+import Box16 from '@carbon/icons-vue/es/box/16';
+import Box20 from '@carbon/icons-vue/es/box/20';
+import Box32 from '@carbon/icons-vue/es/box/32';
 import CvSideNavDivider from '@carbon/vue/src/components/cv-ui-shell/cv-side-nav-divider.vue';
 import Search16 from '@carbon/icons-vue/es/search/16';
 import Close16 from '@carbon/icons-vue/es/close/16';
@@ -132,7 +138,7 @@ import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
 import CvCheckbox$1 from '@carbon/vue/src/components/cv-checkbox/cv-checkbox';
 //
-var script$y = {
+var script$z = {
   name: "NsButton",
   extends: CvButton,
   props: {
@@ -295,10 +301,10 @@ function addStyle(id, css) {
 }
 /* script */
-const __vue_script__$y = script$y;
+const __vue_script__$z = script$z;
 /* template */
-var __vue_render__$E = function () {
+var __vue_render__$F = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -321,10 +327,10 @@ var __vue_render__$E = function () {
   }) : _vm._e()], 2);
 };
-var __vue_staticRenderFns__$E = [];
+var __vue_staticRenderFns__$F = [];
 /* style */
-const __vue_inject_styles__$G = function (inject) {
+const __vue_inject_styles__$H = function (inject) {
   if (!inject) return;
   inject("data-v-025b0f12_0", {
     source: ".bx--btn .bx--btn__icon[data-v-025b0f12]{width:1.25rem;height:1.25rem}.bx--btn.bx--btn--sm .bx--btn__icon[data-v-025b0f12]{width:1rem;height:1rem}.loader[data-v-025b0f12]{right:1rem;border:3px solid transparent;border-radius:50%;border-top:3px solid currentColor;border-right:3px solid currentColor;border-bottom:3px solid currentColor;animation:spin-data-v-025b0f12 .5s linear infinite}.bx--btn--ghost .bx--btn__icon.loading[data-v-025b0f12]{position:static;margin-left:.5rem}.bx--btn--danger--ghost .bx--btn__icon.loading[data-v-025b0f12],.bx--btn--danger-ghost .bx--btn__icon.loading[data-v-025b0f12]{position:static;margin-left:.5rem}@keyframes spin-data-v-025b0f12{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}",
@@ -335,23 +341,23 @@ const __vue_inject_styles__$G = function (inject) {
 /* scoped */
-const __vue_scope_id__$G = "data-v-025b0f12";
+const __vue_scope_id__$H = "data-v-025b0f12";
 /* module identifier */
-const __vue_module_identifier__$G = undefined;
+const __vue_module_identifier__$H = undefined;
 /* functional template */
-const __vue_is_functional_template__$G = false;
+const __vue_is_functional_template__$H = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$18 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$E,
-  staticRenderFns: __vue_staticRenderFns__$E
-}, __vue_inject_styles__$G, __vue_script__$y, __vue_scope_id__$G, __vue_is_functional_template__$G, __vue_module_identifier__$G, false, createInjector, undefined, undefined);
+const __vue_component__$1a = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$F,
+  staticRenderFns: __vue_staticRenderFns__$F
+}, __vue_inject_styles__$H, __vue_script__$z, __vue_scope_id__$H, __vue_is_functional_template__$H, __vue_module_identifier__$H, false, createInjector, undefined, undefined);
-var NsButton = __vue_component__$18;
+var NsButton = __vue_component__$1a;
 //
 //
@@ -369,7 +375,7 @@ var NsButton = __vue_component__$18;
 //
 //
 //
-var script$x = {
+var script$y = {
   name: "NsPictogram",
   props: {
     title: {
@@ -392,10 +398,10 @@ var script$x = {
 };
 /* script */
-const __vue_script__$x = script$x;
+const __vue_script__$y = script$y;
 /* template */
-var __vue_render__$D = function () {
+var __vue_render__$E = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -423,34 +429,34 @@ var __vue_render__$D = function () {
   }, [_vm._t("default")], 2)]);
 };
-var __vue_staticRenderFns__$D = [];
+var __vue_staticRenderFns__$E = [];
 /* style */
-const __vue_inject_styles__$F = undefined;
+const __vue_inject_styles__$G = undefined;
 /* scoped */
-const __vue_scope_id__$F = undefined;
+const __vue_scope_id__$G = undefined;
 /* module identifier */
-const __vue_module_identifier__$F = undefined;
+const __vue_module_identifier__$G = undefined;
 /* functional template */
-const __vue_is_functional_template__$F = false;
+const __vue_is_functional_template__$G = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$17 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$D,
-  staticRenderFns: __vue_staticRenderFns__$D
-}, __vue_inject_styles__$F, __vue_script__$x, __vue_scope_id__$F, __vue_is_functional_template__$F, __vue_module_identifier__$F, false, undefined, undefined, undefined);
+const __vue_component__$19 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$E,
+  staticRenderFns: __vue_staticRenderFns__$E
+}, __vue_inject_styles__$G, __vue_script__$y, __vue_scope_id__$G, __vue_is_functional_template__$G, __vue_module_identifier__$G, false, undefined, undefined, undefined);
-var NsPictogram = __vue_component__$17;
+var NsPictogram = __vue_component__$19;
 //
-var script$w = {
+var script$x = {
   name: "NsLottieAnimation",
   components: {
     LottieAnimation
@@ -506,10 +512,10 @@ var script$w = {
 };
 /* script */
-const __vue_script__$w = script$w;
+const __vue_script__$x = script$x;
 /* template */
-var __vue_render__$C = function () {
+var __vue_render__$D = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -536,36 +542,36 @@ var __vue_render__$C = function () {
   })], 1);
 };
-var __vue_staticRenderFns__$C = [];
+var __vue_staticRenderFns__$D = [];
 /* style */
-const __vue_inject_styles__$E = undefined;
+const __vue_inject_styles__$F = undefined;
 /* scoped */
-const __vue_scope_id__$E = "data-v-14e97a70";
+const __vue_scope_id__$F = "data-v-14e97a70";
 /* module identifier */
-const __vue_module_identifier__$E = undefined;
+const __vue_module_identifier__$F = undefined;
 /* functional template */
-const __vue_is_functional_template__$E = false;
+const __vue_is_functional_template__$F = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$16 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$C,
-  staticRenderFns: __vue_staticRenderFns__$C
-}, __vue_inject_styles__$E, __vue_script__$w, __vue_scope_id__$E, __vue_is_functional_template__$E, __vue_module_identifier__$E, false, undefined, undefined, undefined);
+const __vue_component__$18 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$D,
+  staticRenderFns: __vue_staticRenderFns__$D
+}, __vue_inject_styles__$F, __vue_script__$x, __vue_scope_id__$F, __vue_is_functional_template__$F, __vue_module_identifier__$F, false, undefined, undefined, undefined);
-var NsLottieAnimation = __vue_component__$16;
+var NsLottieAnimation = __vue_component__$18;
 /* script */
 /* template */
-var __vue_render__$B = function () {
+var __vue_render__$C = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -580,34 +586,34 @@ var __vue_render__$B = function () {
   });
 };
-var __vue_staticRenderFns__$B = [];
+var __vue_staticRenderFns__$C = [];
 /* style */
-const __vue_inject_styles__$D = undefined;
+const __vue_inject_styles__$E = undefined;
 /* scoped */
-const __vue_scope_id__$D = undefined;
+const __vue_scope_id__$E = undefined;
 /* module identifier */
-const __vue_module_identifier__$D = undefined;
+const __vue_module_identifier__$E = undefined;
 /* functional template */
-const __vue_is_functional_template__$D = false;
+const __vue_is_functional_template__$E = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$15 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$B,
-  staticRenderFns: __vue_staticRenderFns__$B
-}, __vue_inject_styles__$D, {}, __vue_scope_id__$D, __vue_is_functional_template__$D, __vue_module_identifier__$D, false, undefined, undefined, undefined);
+const __vue_component__$17 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$C,
+  staticRenderFns: __vue_staticRenderFns__$C
+}, __vue_inject_styles__$E, {}, __vue_scope_id__$E, __vue_is_functional_template__$E, __vue_module_identifier__$E, false, undefined, undefined, undefined);
-var ExclamationMarkPictogram = __vue_component__$15;
+var ExclamationMarkPictogram = __vue_component__$17;
 //
-var script$v = {
+var script$w = {
   name: "NsEmptyState",
   components: {
     NsPictogram,
@@ -639,10 +645,10 @@ var script$v = {
 };
 /* script */
-const __vue_script__$v = script$v;
+const __vue_script__$w = script$w;
 /* template */
-var __vue_render__$A = function () {
+var __vue_render__$B = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -672,10 +678,10 @@ var __vue_render__$A = function () {
   }, [_vm._t("description")], 2)] : _vm._e()], 2);
 };
-var __vue_staticRenderFns__$A = [];
+var __vue_staticRenderFns__$B = [];
 /* style */
-const __vue_inject_styles__$C = function (inject) {
+const __vue_inject_styles__$D = function (inject) {
   if (!inject) return;
   inject("data-v-2d5d3a58_0", {
     source: ".empty-state[data-v-2d5d3a58]{text-align:center;padding:2rem}.empty-state .image[data-v-2d5d3a58]{margin-bottom:1rem}.empty-state .description[data-v-2d5d3a58]{margin-top:1rem}.animation[data-v-2d5d3a58]{display:inline-block;width:64px;height:64px}",
@@ -686,26 +692,26 @@ const __vue_inject_styles__$C = function (inject) {
 /* scoped */
-const __vue_scope_id__$C = "data-v-2d5d3a58";
+const __vue_scope_id__$D = "data-v-2d5d3a58";
 /* module identifier */
-const __vue_module_identifier__$C = undefined;
+const __vue_module_identifier__$D = undefined;
 /* functional template */
-const __vue_is_functional_template__$C = false;
+const __vue_is_functional_template__$D = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$13 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$A,
-  staticRenderFns: __vue_staticRenderFns__$A
-}, __vue_inject_styles__$C, __vue_script__$v, __vue_scope_id__$C, __vue_is_functional_template__$C, __vue_module_identifier__$C, false, createInjector, undefined, undefined);
+const __vue_component__$15 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$B,
+  staticRenderFns: __vue_staticRenderFns__$B
+}, __vue_inject_styles__$D, __vue_script__$w, __vue_scope_id__$D, __vue_is_functional_template__$D, __vue_module_identifier__$D, false, createInjector, undefined, undefined);
-var __vue_component__$14 = __vue_component__$13;
+var __vue_component__$16 = __vue_component__$15;
 //
-var script$u = {
+var script$v = {
   name: "NsCodeSnippet",
   components: {
     CvButton,
@@ -817,10 +823,10 @@ var script$u = {
 };
 /* script */
-const __vue_script__$u = script$u;
+const __vue_script__$v = script$v;
 /* template */
-var __vue_render__$z = function () {
+var __vue_render__$A = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -882,10 +888,10 @@ var __vue_render__$z = function () {
   })], 1) : _vm._e()], 1);
 };
-var __vue_staticRenderFns__$z = [];
+var __vue_staticRenderFns__$A = [];
 /* style */
-const __vue_inject_styles__$B = function (inject) {
+const __vue_inject_styles__$C = function (inject) {
   if (!inject) return;
   inject("data-v-59cb538c_0", {
     source: ".bx--snippet--multi .bx--snippet-container[data-v-59cb538c]{min-height:4.5rem;max-height:9.6rem;overflow-y:hidden}.bx--snippet--multi .bx--snippet-container.no-expand[data-v-59cb538c]{min-height:2.5rem}.bx--snippet--multi.bx--snippet--expand .bx--snippet-container[data-v-59cb538c]{max-height:100%}.bx--snippet--multi .bx--copy-btn[data-v-59cb538c]{position:absolute!important;top:.5rem;right:.5rem;z-index:11;width:3rem;height:2rem}.bx--snippet-btn--expand[data-v-59cb538c]{right:.5rem;bottom:.5rem}",
@@ -896,23 +902,23 @@ const __vue_inject_styles__$B = function (inject) {
 /* scoped */
-const __vue_scope_id__$B = "data-v-59cb538c";
+const __vue_scope_id__$C = "data-v-59cb538c";
 /* module identifier */
-const __vue_module_identifier__$B = undefined;
+const __vue_module_identifier__$C = undefined;
 /* functional template */
-const __vue_is_functional_template__$B = false;
+const __vue_is_functional_template__$C = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$11 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$z,
-  staticRenderFns: __vue_staticRenderFns__$z
-}, __vue_inject_styles__$B, __vue_script__$u, __vue_scope_id__$B, __vue_is_functional_template__$B, __vue_module_identifier__$B, false, createInjector, undefined, undefined);
+const __vue_component__$13 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$A,
+  staticRenderFns: __vue_staticRenderFns__$A
+}, __vue_inject_styles__$C, __vue_script__$v, __vue_scope_id__$C, __vue_is_functional_template__$C, __vue_module_identifier__$C, false, createInjector, undefined, undefined);
-var __vue_component__$12 = __vue_component__$11;
+var __vue_component__$14 = __vue_component__$13;
 //
 //
@@ -943,7 +949,7 @@ var __vue_component__$12 = __vue_component__$11;
 //
 //
 //
-var script$t = {
+var script$u = {
   name: "NsCircleTimer",
   props: {
     timeLimit: {
@@ -1007,10 +1013,10 @@ var script$t = {
 };
 /* script */
-const __vue_script__$t = script$t;
+const __vue_script__$u = script$u;
 /* template */
-var __vue_render__$y = function () {
+var __vue_render__$z = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -1046,10 +1052,10 @@ var __vue_render__$y = function () {
   })])])]);
 };
-var __vue_staticRenderFns__$y = [];
+var __vue_staticRenderFns__$z = [];
 /* style */
-const __vue_inject_styles__$A = function (inject) {
+const __vue_inject_styles__$B = function (inject) {
   if (!inject) return;
   inject("data-v-79cb7082_0", {
     source: ".base-timer[data-v-79cb7082]{position:relative}.base-timer__circle[data-v-79cb7082]{fill:none;stroke:none}.base-timer__path-remaining[data-v-79cb7082]{stroke:currentColor;transform:rotate(90deg);transform-origin:center;transition:1s linear all}.base-timer__svg[data-v-79cb7082]{transform:scaleX(-1)}",
@@ -1060,26 +1066,26 @@ const __vue_inject_styles__$A = function (inject) {
 /* scoped */
-const __vue_scope_id__$A = "data-v-79cb7082";
+const __vue_scope_id__$B = "data-v-79cb7082";
 /* module identifier */
-const __vue_module_identifier__$A = undefined;
+const __vue_module_identifier__$B = undefined;
 /* functional template */
-const __vue_is_functional_template__$A = false;
+const __vue_is_functional_template__$B = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$10 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$y,
-  staticRenderFns: __vue_staticRenderFns__$y
-}, __vue_inject_styles__$A, __vue_script__$t, __vue_scope_id__$A, __vue_is_functional_template__$A, __vue_module_identifier__$A, false, createInjector, undefined, undefined);
+const __vue_component__$12 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$z,
+  staticRenderFns: __vue_staticRenderFns__$z
+}, __vue_inject_styles__$B, __vue_script__$u, __vue_scope_id__$B, __vue_is_functional_template__$B, __vue_module_identifier__$B, false, createInjector, undefined, undefined);
-var NsCircleTimer = __vue_component__$10;
+var NsCircleTimer = __vue_component__$12;
 //
-var script$s = {
+var script$t = {
   name: "NsInlineNotification",
   extends: CvInlineNotification,
   components: {
@@ -1116,10 +1122,10 @@ var script$s = {
 };
 /* script */
-const __vue_script__$s = script$s;
+const __vue_script__$t = script$t;
 /* template */
-var __vue_render__$x = function () {
+var __vue_render__$y = function () {
   var _obj;
   var _vm = this;
@@ -1190,10 +1196,10 @@ var __vue_render__$x = function () {
   })], 1) : _vm._e()]);
 };
-var __vue_staticRenderFns__$x = [];
+var __vue_staticRenderFns__$y = [];
 /* style */
-const __vue_inject_styles__$z = function (inject) {
+const __vue_inject_styles__$A = function (inject) {
   if (!inject) return;
   inject("data-v-6b979488_0", {
     source: ".title[data-v-6b979488]{margin-right:.75rem;margin-bottom:.2rem;font-size:.875rem!important;font-weight:600!important}.mg-right[data-v-6b979488]{margin-right:.75rem}.action-button[data-v-6b979488]{margin-right:.5rem}.bx--inline-notification__text-wrapper p[data-v-6b979488]{padding-right:0!important}",
@@ -1204,23 +1210,23 @@ const __vue_inject_styles__$z = function (inject) {
 /* scoped */
-const __vue_scope_id__$z = "data-v-6b979488";
+const __vue_scope_id__$A = "data-v-6b979488";
 /* module identifier */
-const __vue_module_identifier__$z = undefined;
+const __vue_module_identifier__$A = undefined;
 /* functional template */
-const __vue_is_functional_template__$z = false;
+const __vue_is_functional_template__$A = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$$ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$x,
-  staticRenderFns: __vue_staticRenderFns__$x
-}, __vue_inject_styles__$z, __vue_script__$s, __vue_scope_id__$z, __vue_is_functional_template__$z, __vue_module_identifier__$z, false, createInjector, undefined, undefined);
+const __vue_component__$11 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$y,
+  staticRenderFns: __vue_staticRenderFns__$y
+}, __vue_inject_styles__$A, __vue_script__$t, __vue_scope_id__$A, __vue_is_functional_template__$A, __vue_module_identifier__$A, false, createInjector, undefined, undefined);
-var NsInlineNotification = __vue_component__$$;
+var NsInlineNotification = __vue_component__$11;
 //
 //
@@ -1259,7 +1265,7 @@ var NsInlineNotification = __vue_component__$$;
 //
 //
 //
-var script$r = {
+var script$s = {
   name: "NsProgressBar",
   props: {
     value: {
@@ -1286,6 +1292,10 @@ var script$r = {
     useStatusColors: {
       type: Boolean,
       default: false
+    },
+    useHealthyColor: {
+      type: Boolean,
+      default: true
     }
   },
@@ -1313,7 +1323,7 @@ var script$r = {
     },
     healthyStatus() {
-      return this.useStatusColors && this.numericValue < this.warningThreshold;
+      return this.useStatusColors && this.useHealthyColor && this.numericValue < this.warningThreshold;
     },
     warningStatus() {
@@ -1333,10 +1343,10 @@ var script$r = {
 };
 /* script */
-const __vue_script__$r = script$r;
+const __vue_script__$s = script$s;
 /* template */
-var __vue_render__$w = function () {
+var __vue_render__$x = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -1375,13 +1385,13 @@ var __vue_render__$w = function () {
   })]], 2)]);
 };
-var __vue_staticRenderFns__$w = [];
+var __vue_staticRenderFns__$x = [];
 /* style */
-const __vue_inject_styles__$y = function (inject) {
+const __vue_inject_styles__$z = function (inject) {
   if (!inject) return;
-  inject("data-v-7c7ba0aa_0", {
-    source: ".progress-bar-container[data-v-7c7ba0aa]{width:100%;position:relative}.slider[data-v-7c7ba0aa]{position:absolute;width:100%;overflow-x:hidden}.line[data-v-7c7ba0aa]{position:absolute;opacity:.4;width:100%}.progress-line[data-v-7c7ba0aa]{position:absolute}.indeterminate-line[data-v-7c7ba0aa]{position:absolute;opacity:.4;width:150%}.indeterminate-subline[data-v-7c7ba0aa]{position:absolute}.inc[data-v-7c7ba0aa]{animation:increase-data-v-7c7ba0aa 2s infinite}.dec[data-v-7c7ba0aa]{animation:decrease-data-v-7c7ba0aa 2s .5s infinite}@keyframes increase-data-v-7c7ba0aa{from{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease-data-v-7c7ba0aa{from{left:-80%;width:80%}to{left:110%;width:10%}}",
+  inject("data-v-be01f286_0", {
+    source: ".progress-bar-container[data-v-be01f286]{width:100%;position:relative}.slider[data-v-be01f286]{position:absolute;width:100%;overflow-x:hidden}.line[data-v-be01f286]{position:absolute;opacity:.4;width:100%}.progress-line[data-v-be01f286]{position:absolute}.indeterminate-line[data-v-be01f286]{position:absolute;opacity:.4;width:150%}.indeterminate-subline[data-v-be01f286]{position:absolute}.inc[data-v-be01f286]{animation:increase-data-v-be01f286 2s infinite}.dec[data-v-be01f286]{animation:decrease-data-v-be01f286 2s .5s infinite}@keyframes increase-data-v-be01f286{from{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease-data-v-be01f286{from{left:-80%;width:80%}to{left:110%;width:10%}}",
     map: undefined,
     media: undefined
   });
@@ -1389,25 +1399,25 @@ const __vue_inject_styles__$y = function (inject) {
 /* scoped */
-const __vue_scope_id__$y = "data-v-7c7ba0aa";
+const __vue_scope_id__$z = "data-v-be01f286";
 /* module identifier */
-const __vue_module_identifier__$y = undefined;
+const __vue_module_identifier__$z = undefined;
 /* functional template */
-const __vue_is_functional_template__$y = false;
+const __vue_is_functional_template__$z = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$_ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$w,
-  staticRenderFns: __vue_staticRenderFns__$w
-}, __vue_inject_styles__$y, __vue_script__$r, __vue_scope_id__$y, __vue_is_functional_template__$y, __vue_module_identifier__$y, false, createInjector, undefined, undefined);
+const __vue_component__$10 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$x,
+  staticRenderFns: __vue_staticRenderFns__$x
+}, __vue_inject_styles__$z, __vue_script__$s, __vue_scope_id__$z, __vue_is_functional_template__$z, __vue_module_identifier__$z, false, createInjector, undefined, undefined);
-var NsProgressBar = __vue_component__$_;
+var NsProgressBar = __vue_component__$10;
-var script$q = {
+var script$r = {
   name: "NsSvg",
   props: {
     svg: {
@@ -1466,33 +1476,33 @@ var script$q = {
 };
 /* script */
-const __vue_script__$q = script$q;
+const __vue_script__$r = script$r;
 /* template */
 /* style */
-const __vue_inject_styles__$x = undefined;
+const __vue_inject_styles__$y = undefined;
 /* scoped */
-const __vue_scope_id__$x = undefined;
+const __vue_scope_id__$y = undefined;
 /* module identifier */
-const __vue_module_identifier__$x = undefined;
+const __vue_module_identifier__$y = undefined;
 /* functional template */
-const __vue_is_functional_template__$x = undefined;
+const __vue_is_functional_template__$y = undefined;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$Z = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$x, __vue_script__$q, __vue_scope_id__$x, __vue_is_functional_template__$x, __vue_module_identifier__$x, false, undefined, undefined, undefined);
+const __vue_component__$$ = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$y, __vue_script__$r, __vue_scope_id__$y, __vue_is_functional_template__$y, __vue_module_identifier__$y, false, undefined, undefined, undefined);
-var NsSvg = __vue_component__$Z;
+var NsSvg = __vue_component__$$;
 //
-var script$p = {
+var script$q = {
   name: "NsTile",
   extends: CvTile,
   inheritAttrs: false,
@@ -1566,10 +1576,10 @@ var script$p = {
 };
 /* script */
-const __vue_script__$p = script$p;
+const __vue_script__$q = script$q;
 /* template */
-var __vue_render__$v = function () {
+var __vue_render__$w = function () {
   var _obj;
   var _vm = this;
@@ -1608,10 +1618,10 @@ var __vue_render__$v = function () {
   }) : _vm._e()], 1);
 };
-var __vue_staticRenderFns__$v = [];
+var __vue_staticRenderFns__$w = [];
 /* style */
-const __vue_inject_styles__$w = function (inject) {
+const __vue_inject_styles__$x = function (inject) {
   if (!inject) return;
   inject("data-v-443a91f0_0", {
     source: ".ns-tile[data-v-443a91f0]{margin-bottom:2rem;position:relative}.container[data-v-443a91f0]{display:flex;flex-direction:column;justify-content:center}.centered[data-v-443a91f0]{text-align:center}.large[data-v-443a91f0]{min-height:10rem}.tile-icon[data-v-443a91f0]{display:block;margin-left:auto;margin-right:auto;margin-bottom:1rem}.tile-footer-icon[data-v-443a91f0]{position:absolute;right:1rem;bottom:1rem;flex-shrink:0;width:1.25rem;height:1.25rem}.pad-bottom[data-v-443a91f0]{padding-bottom:4rem}.disabled-tile[data-v-443a91f0]{color:#c6c6c6}",
@@ -1622,23 +1632,23 @@ const __vue_inject_styles__$w = function (inject) {
 /* scoped */
-const __vue_scope_id__$w = "data-v-443a91f0";
+const __vue_scope_id__$x = "data-v-443a91f0";
 /* module identifier */
-const __vue_module_identifier__$w = undefined;
+const __vue_module_identifier__$x = undefined;
 /* functional template */
-const __vue_is_functional_template__$w = false;
+const __vue_is_functional_template__$x = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$X = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$v,
-  staticRenderFns: __vue_staticRenderFns__$v
-}, __vue_inject_styles__$w, __vue_script__$p, __vue_scope_id__$w, __vue_is_functional_template__$w, __vue_module_identifier__$w, false, createInjector, undefined, undefined);
+const __vue_component__$Z = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$w,
+  staticRenderFns: __vue_staticRenderFns__$w
+}, __vue_inject_styles__$x, __vue_script__$q, __vue_scope_id__$x, __vue_is_functional_template__$x, __vue_module_identifier__$x, false, createInjector, undefined, undefined);
-var __vue_component__$Y = __vue_component__$X;
+var __vue_component__$_ = __vue_component__$Z;
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -6235,7 +6245,7 @@ var DateTimeService = {
 };
 //
-var script$o = {
+var script$p = {
   name: "NsToastNotification",
   extends: CvToastNotification,
   components: {
@@ -6313,10 +6323,10 @@ var script$o = {
 };
 /* script */
-const __vue_script__$o = script$o;
+const __vue_script__$p = script$p;
 /* template */
-var __vue_render__$u = function () {
+var __vue_render__$v = function () {
   var _obj;
   var _vm = this;
@@ -6414,10 +6424,10 @@ var __vue_render__$u = function () {
   })], 1) : _vm._e()], 1)]);
 };
-var __vue_staticRenderFns__$u = [];
+var __vue_staticRenderFns__$v = [];
 /* style */
-const __vue_inject_styles__$v = function (inject) {
+const __vue_inject_styles__$w = function (inject) {
   if (!inject) return;
   inject("data-v-6ff0b515_0", {
     source: ".notification[data-v-6ff0b515]{margin-bottom:0;margin-right:0}.action[data-v-6ff0b515]{padding-top:0;margin-bottom:0}.bx--toast-notification .bx--inline-notification__action-button[data-v-6ff0b515]{margin-left:-1rem}.bx--toast-notification .bx--inline-notification__action-button.bx--btn--danger[data-v-6ff0b515]{margin:.5rem 0 .5rem -1rem}.notification-description-and-progress[data-v-6ff0b515]{margin-top:.75rem;margin-bottom:.75rem}.fix-margin-bottom[data-v-6ff0b515]{margin-bottom:0}.progress[data-v-6ff0b515]{margin-top:.75rem}.progress-bar-spacer[data-v-6ff0b515]{height:.5rem}.cv-notifiation.bx--toast-notification.notification[data-v-6ff0b515]{width:26vw;min-width:20rem;margin-top:0}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-6ff0b515]{margin-top:1rem}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-6ff0b515]{width:100%;cursor:pointer}.notification-read[data-v-6ff0b515]{border-color:#8d8d8d;color:#c6c6c6}.notification-read .bx--toast-notification__icon[data-v-6ff0b515]{fill:currentColor}.notification-read .bx--toast-notification__subtitle[data-v-6ff0b515]{color:#c6c6c6}.notification-read .bx--toast-notification__title[data-v-6ff0b515]{font-weight:400}.cv-notifiation .timestamp[data-v-6ff0b515]{margin-bottom:.75rem;line-height:1.29;color:#fff;text-decoration:underline}.cv-notifiation .timestamp button[data-v-6ff0b515]{color:#c6c6c6}.bx--tooltip__trigger[data-v-6ff0b515]:not(.bx--btn--icon-only){font-size:inherit}.cv-notifiation .timestamp .bx--tooltip__trigger[data-v-6ff0b515]::before{border-bottom-color:#161616}div.row[data-v-6ff0b515]:last-child{margin-bottom:1.5rem}.bx--toast-notification__details[data-v-6ff0b515]{flex-grow:1}",
@@ -6432,26 +6442,26 @@ const __vue_inject_styles__$v = function (inject) {
 /* scoped */
-const __vue_scope_id__$v = "data-v-6ff0b515";
+const __vue_scope_id__$w = "data-v-6ff0b515";
 /* module identifier */
-const __vue_module_identifier__$v = undefined;
+const __vue_module_identifier__$w = undefined;
 /* functional template */
-const __vue_is_functional_template__$v = false;
+const __vue_is_functional_template__$w = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$V = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$u,
-  staticRenderFns: __vue_staticRenderFns__$u
-}, __vue_inject_styles__$v, __vue_script__$o, __vue_scope_id__$v, __vue_is_functional_template__$v, __vue_module_identifier__$v, false, createInjector, undefined, undefined);
+const __vue_component__$X = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$v,
+  staticRenderFns: __vue_staticRenderFns__$v
+}, __vue_inject_styles__$w, __vue_script__$p, __vue_scope_id__$w, __vue_is_functional_template__$w, __vue_module_identifier__$w, false, createInjector, undefined, undefined);
-var __vue_component__$W = __vue_component__$V;
+var __vue_component__$Y = __vue_component__$X;
 //
-var script$n = {
+var script$o = {
   name: "NsInfoCard",
   components: {
     NsSvg,
@@ -6502,10 +6512,10 @@ var script$n = {
 };
 /* script */
-const __vue_script__$n = script$n;
+const __vue_script__$o = script$o;
 /* template */
-var __vue_render__$t = function () {
+var __vue_render__$u = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -6562,10 +6572,10 @@ var __vue_render__$t = function () {
   }, [_vm.hasContentSlot ? _vm._t("content") : _vm._e()], 2)], 2);
 };
-var __vue_staticRenderFns__$t = [];
+var __vue_staticRenderFns__$u = [];
 /* style */
-const __vue_inject_styles__$u = function (inject) {
+const __vue_inject_styles__$v = function (inject) {
   if (!inject) return;
   inject("data-v-aefc1c3e_0", {
     source: ".info-card[data-v-aefc1c3e]{display:flex;flex-direction:column;justify-content:center;min-height:7rem;position:relative}.skeleton[data-v-aefc1c3e]{margin-top:.5rem;margin-left:auto;margin-right:auto}.row[data-v-aefc1c3e]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.title[data-v-aefc1c3e]{margin-left:.25rem;margin-right:.25rem;margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.description[data-v-aefc1c3e]{margin-left:.25rem;margin-right:.25rem}.slot[data-v-aefc1c3e]{margin-top:.5rem}",
@@ -6576,26 +6586,26 @@ const __vue_inject_styles__$u = function (inject) {
 /* scoped */
-const __vue_scope_id__$u = "data-v-aefc1c3e";
+const __vue_scope_id__$v = "data-v-aefc1c3e";
 /* module identifier */
-const __vue_module_identifier__$u = undefined;
+const __vue_module_identifier__$v = undefined;
 /* functional template */
-const __vue_is_functional_template__$u = false;
+const __vue_is_functional_template__$v = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$T = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$t,
-  staticRenderFns: __vue_staticRenderFns__$t
-}, __vue_inject_styles__$u, __vue_script__$n, __vue_scope_id__$u, __vue_is_functional_template__$u, __vue_module_identifier__$u, false, createInjector, undefined, undefined);
+const __vue_component__$V = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$u,
+  staticRenderFns: __vue_staticRenderFns__$u
+}, __vue_inject_styles__$v, __vue_script__$o, __vue_scope_id__$v, __vue_is_functional_template__$v, __vue_module_identifier__$v, false, createInjector, undefined, undefined);
-var __vue_component__$U = __vue_component__$T;
+var __vue_component__$W = __vue_component__$V;
 //
-var script$m = {
+var script$n = {
   name: "NsStatusCard",
   //components added for storybook to work
   components: {
@@ -6642,10 +6652,10 @@ var script$m = {
 };
 /* script */
-const __vue_script__$m = script$m;
+const __vue_script__$n = script$n;
 /* template */
-var __vue_render__$s = function () {
+var __vue_render__$t = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -6714,10 +6724,10 @@ var __vue_render__$s = function () {
   }, [_c('h4', [_vm._v(_vm._s(_vm.valueSuccess))])]) : _c('h4', [_vm._v(_vm._s(_vm.valueSuccess))])], 1) : _vm._e()])]);
 };
-var __vue_staticRenderFns__$s = [];
+var __vue_staticRenderFns__$t = [];
 /* style */
-const __vue_inject_styles__$t = function (inject) {
+const __vue_inject_styles__$u = function (inject) {
   if (!inject) return;
   inject("data-v-496044f0_0", {
     source: ".status-card[data-v-496044f0]{display:flex;flex-direction:column;justify-content:center}.row[data-v-496044f0]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.value[data-v-496044f0]{margin-left:.25rem;margin-right:.25rem}.label[data-v-496044f0]{margin-left:.25rem;margin-right:.25rem}.success-icon[data-v-496044f0]{margin-right:.25rem}.error-icon[data-v-496044f0]{margin-right:.25rem}.warning-icon[data-v-496044f0]{margin-right:.25rem}.stats[data-v-496044f0]{display:flex;align-items:center;margin-left:.5rem;margin-right:.5rem}",
@@ -6728,26 +6738,26 @@ const __vue_inject_styles__$t = function (inject) {
 /* scoped */
-const __vue_scope_id__$t = "data-v-496044f0";
+const __vue_scope_id__$u = "data-v-496044f0";
 /* module identifier */
-const __vue_module_identifier__$t = undefined;
+const __vue_module_identifier__$u = undefined;
 /* functional template */
-const __vue_is_functional_template__$t = false;
+const __vue_is_functional_template__$u = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$R = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$s,
-  staticRenderFns: __vue_staticRenderFns__$s
-}, __vue_inject_styles__$t, __vue_script__$m, __vue_scope_id__$t, __vue_is_functional_template__$t, __vue_module_identifier__$t, false, createInjector, undefined, undefined);
+const __vue_component__$T = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$t,
+  staticRenderFns: __vue_staticRenderFns__$t
+}, __vue_inject_styles__$u, __vue_script__$n, __vue_scope_id__$u, __vue_is_functional_template__$u, __vue_module_identifier__$u, false, createInjector, undefined, undefined);
-var __vue_component__$S = __vue_component__$R;
+var __vue_component__$U = __vue_component__$T;
 //
-var script$l = {
+var script$m = {
   name: "NsSystemdServiceCard",
   //components added for storybook to work
   components: {
@@ -6801,10 +6811,10 @@ var script$l = {
 };
 /* script */
-const __vue_script__$l = script$l;
+const __vue_script__$m = script$m;
 /* template */
-var __vue_render__$r = function () {
+var __vue_render__$s = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -6859,10 +6869,10 @@ var __vue_render__$r = function () {
   })], 1)])]);
 };
-var __vue_staticRenderFns__$r = [];
+var __vue_staticRenderFns__$s = [];
 /* style */
-const __vue_inject_styles__$s = function (inject) {
+const __vue_inject_styles__$t = function (inject) {
   if (!inject) return;
   inject("data-v-bf751eca_0", {
     source: ".service-card[data-v-bf751eca]{display:flex;flex-direction:column;justify-content:center}.row[data-v-bf751eca]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.service-name[data-v-bf751eca]{margin-left:.25rem;margin-right:.25rem;margin-bottom:.5rem}.success-icon[data-v-bf751eca]{margin-right:.25rem}.error-icon[data-v-bf751eca]{margin-right:.25rem}.warning-icon[data-v-bf751eca]{margin-right:.25rem}.stats[data-v-bf751eca]{display:flex;align-items:center;margin-left:.5rem;margin-right:.5rem}",
@@ -6873,26 +6883,26 @@ const __vue_inject_styles__$s = function (inject) {
 /* scoped */
-const __vue_scope_id__$s = "data-v-bf751eca";
+const __vue_scope_id__$t = "data-v-bf751eca";
 /* module identifier */
-const __vue_module_identifier__$s = undefined;
+const __vue_module_identifier__$t = undefined;
 /* functional template */
-const __vue_is_functional_template__$s = false;
+const __vue_is_functional_template__$t = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$P = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$r,
-  staticRenderFns: __vue_staticRenderFns__$r
-}, __vue_inject_styles__$s, __vue_script__$l, __vue_scope_id__$s, __vue_is_functional_template__$s, __vue_module_identifier__$s, false, createInjector, undefined, undefined);
+const __vue_component__$R = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$s,
+  staticRenderFns: __vue_staticRenderFns__$s
+}, __vue_inject_styles__$t, __vue_script__$m, __vue_scope_id__$t, __vue_is_functional_template__$t, __vue_module_identifier__$t, false, createInjector, undefined, undefined);
-var __vue_component__$Q = __vue_component__$P;
+var __vue_component__$S = __vue_component__$R;
 //
-var script$k = {
+var script$l = {
   name: "NsTextInput",
   extends: CvTextInput,
   components: {
@@ -6947,10 +6957,10 @@ var script$k = {
 };
 /* script */
-const __vue_script__$k = script$k;
+const __vue_script__$l = script$l;
 /* template */
-var __vue_render__$q = function () {
+var __vue_render__$r = function () {
   var _obj, _obj$1, _obj$2, _obj$3, _obj$4;
   var _vm = this;
@@ -7029,10 +7039,10 @@ var __vue_render__$q = function () {
   })], 2) : _vm._e()]);
 };
-var __vue_staticRenderFns__$q = [];
+var __vue_staticRenderFns__$r = [];
 /* style */
-const __vue_inject_styles__$r = function (inject) {
+const __vue_inject_styles__$s = function (inject) {
   if (!inject) return;
   inject("data-v-11b039d1_0", {
     source: ".label-with-tooltip[data-v-11b039d1]{display:flex;align-items:baseline}.prefix[data-v-11b039d1]{font-weight:700;margin-right:.5rem;color:#525252}.align-items-center[data-v-11b039d1]{align-items:center}",
@@ -7047,23 +7057,23 @@ const __vue_inject_styles__$r = function (inject) {
 /* scoped */
-const __vue_scope_id__$r = "data-v-11b039d1";
+const __vue_scope_id__$s = "data-v-11b039d1";
 /* module identifier */
-const __vue_module_identifier__$r = undefined;
+const __vue_module_identifier__$s = undefined;
 /* functional template */
-const __vue_is_functional_template__$r = false;
+const __vue_is_functional_template__$s = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$O = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$q,
-  staticRenderFns: __vue_staticRenderFns__$q
-}, __vue_inject_styles__$r, __vue_script__$k, __vue_scope_id__$r, __vue_is_functional_template__$r, __vue_module_identifier__$r, false, createInjector, undefined, undefined);
+const __vue_component__$Q = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$r,
+  staticRenderFns: __vue_staticRenderFns__$r
+}, __vue_inject_styles__$s, __vue_script__$l, __vue_scope_id__$s, __vue_is_functional_template__$s, __vue_module_identifier__$s, false, createInjector, undefined, undefined);
-var NsTextInput = __vue_component__$O;
+var NsTextInput = __vue_component__$Q;
 // Unique ID creation requires a high quality random # generator.  In node.js
 // this is pretty straight-forward - we use the crypto API.
@@ -7587,13 +7597,25 @@ var UtilService = {
       return key;
+    },
+    /**
+     * Decode a jwt token and parse its payload
+     */
+    decodeJwtPayload(token) {
+      var base64Url = token.split(".")[1];
+      var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+      var jsonPayload = decodeURIComponent(window.atob(base64).split("").map(function (c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(""));
+      return JSON.parse(jsonPayload);
     }
   }
 };
 //
-var script$j = {
+var script$k = {
   name: "NsPasswordInput",
   components: {
     NsTextInput
@@ -7758,10 +7780,10 @@ var script$j = {
 };
 /* script */
-const __vue_script__$j = script$j;
+const __vue_script__$k = script$k;
 /* template */
-var __vue_render__$p = function () {
+var __vue_render__$q = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -7856,10 +7878,10 @@ var __vue_render__$p = function () {
   }, [_vm._v(_vm._s(_vm.equalLabel))])])], 1)]);
 };
-var __vue_staticRenderFns__$p = [];
+var __vue_staticRenderFns__$q = [];
 /* style */
-const __vue_inject_styles__$q = function (inject) {
+const __vue_inject_styles__$r = function (inject) {
   if (!inject) return;
   inject("data-v-67b93b40_0", {
     source: ".new-password-container[data-v-67b93b40]{margin-bottom:1rem}.new-password[data-v-67b93b40]{margin-bottom:.25rem}.confirm-password[data-v-67b93b40]{margin-bottom:.25rem}.password-meter[data-v-67b93b40]{display:flex}@media (min-width:672px){.password-meter[data-v-67b93b40]{max-width:38rem}}.requirement[data-v-67b93b40]{padding:.2rem;margin-left:.2rem;margin-right:.2rem;background-color:#f4f4f4;text-align:center;font-size:.75rem;line-height:1.34;letter-spacing:.32px}.requirement-light[data-v-67b93b40]{background-color:#fff}.requirement[data-v-67b93b40]:first-child{margin-left:0}.requirement-ok[data-v-67b93b40]{color:#fff;background-color:#198038}.requirement-disabled[data-v-67b93b40]{color:#c6c6c6;background-color:#f4f4f4}",
@@ -7870,26 +7892,26 @@ const __vue_inject_styles__$q = function (inject) {
 /* scoped */
-const __vue_scope_id__$q = "data-v-67b93b40";
+const __vue_scope_id__$r = "data-v-67b93b40";
 /* module identifier */
-const __vue_module_identifier__$q = undefined;
+const __vue_module_identifier__$r = undefined;
 /* functional template */
-const __vue_is_functional_template__$q = false;
+const __vue_is_functional_template__$r = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$M = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$p,
-  staticRenderFns: __vue_staticRenderFns__$p
-}, __vue_inject_styles__$q, __vue_script__$j, __vue_scope_id__$q, __vue_is_functional_template__$q, __vue_module_identifier__$q, false, createInjector, undefined, undefined);
+const __vue_component__$O = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$q,
+  staticRenderFns: __vue_staticRenderFns__$q
+}, __vue_inject_styles__$r, __vue_script__$k, __vue_scope_id__$r, __vue_is_functional_template__$r, __vue_module_identifier__$r, false, createInjector, undefined, undefined);
-var __vue_component__$N = __vue_component__$M;
+var __vue_component__$P = __vue_component__$O;
 //
-var script$i = {
+var script$j = {
   name: "NsIconMenu",
   extends: CvOverflowMenu,
   props: {
@@ -7933,10 +7955,10 @@ var script$i = {
 };
 /* script */
-const __vue_script__$i = script$i;
+const __vue_script__$j = script$j;
 /* template */
-var __vue_render__$o = function () {
+var __vue_render__$p = function () {
   var _obj, _obj$1;
   var _vm = this;
@@ -8052,10 +8074,10 @@ var __vue_render__$o = function () {
   })])]);
 };
-var __vue_staticRenderFns__$o = [];
+var __vue_staticRenderFns__$p = [];
 /* style */
-const __vue_inject_styles__$p = function (inject) {
+const __vue_inject_styles__$q = function (inject) {
   if (!inject) return;
   inject("data-v-2be14df6_0", {
     source: ".ns-icon-menu[data-v-2be14df6]{display:inline-flex}",
@@ -8066,26 +8088,26 @@ const __vue_inject_styles__$p = function (inject) {
 /* scoped */
-const __vue_scope_id__$p = "data-v-2be14df6";
+const __vue_scope_id__$q = "data-v-2be14df6";
 /* module identifier */
-const __vue_module_identifier__$p = undefined;
+const __vue_module_identifier__$q = undefined;
 /* functional template */
-const __vue_is_functional_template__$p = false;
+const __vue_is_functional_template__$q = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$K = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$o,
-  staticRenderFns: __vue_staticRenderFns__$o
-}, __vue_inject_styles__$p, __vue_script__$i, __vue_scope_id__$p, __vue_is_functional_template__$p, __vue_module_identifier__$p, false, createInjector, undefined, undefined);
+const __vue_component__$M = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$p,
+  staticRenderFns: __vue_staticRenderFns__$p
+}, __vue_inject_styles__$q, __vue_script__$j, __vue_scope_id__$q, __vue_is_functional_template__$q, __vue_module_identifier__$q, false, createInjector, undefined, undefined);
-var __vue_component__$L = __vue_component__$K;
+var __vue_component__$N = __vue_component__$M;
 //
-var script$h = {
+var script$i = {
   name: "NsMeterChart",
   components: {
     NsProgressBar
@@ -8120,10 +8142,10 @@ var script$h = {
 };
 /* script */
-const __vue_script__$h = script$h;
+const __vue_script__$i = script$i;
 /* template */
-var __vue_render__$n = function () {
+var __vue_render__$o = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -8146,10 +8168,10 @@ var __vue_render__$n = function () {
   })], 1);
 };
-var __vue_staticRenderFns__$n = [];
+var __vue_staticRenderFns__$o = [];
 /* style */
-const __vue_inject_styles__$o = function (inject) {
+const __vue_inject_styles__$p = function (inject) {
   if (!inject) return;
   inject("data-v-8d83456c_0", {
     source: ".label[data-v-8d83456c]{font-weight:700;margin-right:.5rem}.mg-bottom-sm[data-v-8d83456c]{margin-bottom:.5rem!important}",
@@ -8160,26 +8182,26 @@ const __vue_inject_styles__$o = function (inject) {
 /* scoped */
-const __vue_scope_id__$o = "data-v-8d83456c";
+const __vue_scope_id__$p = "data-v-8d83456c";
 /* module identifier */
-const __vue_module_identifier__$o = undefined;
+const __vue_module_identifier__$p = undefined;
 /* functional template */
-const __vue_is_functional_template__$o = false;
+const __vue_is_functional_template__$p = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$I = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$n,
-  staticRenderFns: __vue_staticRenderFns__$n
-}, __vue_inject_styles__$o, __vue_script__$h, __vue_scope_id__$o, __vue_is_functional_template__$o, __vue_module_identifier__$o, false, createInjector, undefined, undefined);
+const __vue_component__$K = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$o,
+  staticRenderFns: __vue_staticRenderFns__$o
+}, __vue_inject_styles__$p, __vue_script__$i, __vue_scope_id__$p, __vue_is_functional_template__$p, __vue_module_identifier__$p, false, createInjector, undefined, undefined);
-var __vue_component__$J = __vue_component__$I;
+var __vue_component__$L = __vue_component__$K;
 //
-var script$g = {
+var script$h = {
   name: "NsModal",
   extends: CvModal,
   components: {
@@ -8239,10 +8261,10 @@ var script$g = {
 };
 /* script */
-const __vue_script__$g = script$g;
+const __vue_script__$h = script$h;
 /* template */
-var __vue_render__$m = function () {
+var __vue_render__$n = function () {
   var _obj, _obj$1, _obj$2, _obj$3;
   var _vm = this;
@@ -8376,34 +8398,34 @@ var __vue_render__$m = function () {
   })], 1)]);
 };
-var __vue_staticRenderFns__$m = [];
+var __vue_staticRenderFns__$n = [];
 /* style */
-const __vue_inject_styles__$n = undefined;
+const __vue_inject_styles__$o = undefined;
 /* scoped */
-const __vue_scope_id__$n = undefined;
+const __vue_scope_id__$o = undefined;
 /* module identifier */
-const __vue_module_identifier__$n = undefined;
+const __vue_module_identifier__$o = undefined;
 /* functional template */
-const __vue_is_functional_template__$n = false;
+const __vue_is_functional_template__$o = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$H = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$m,
-  staticRenderFns: __vue_staticRenderFns__$m
-}, __vue_inject_styles__$n, __vue_script__$g, __vue_scope_id__$n, __vue_is_functional_template__$n, __vue_module_identifier__$n, false, undefined, undefined, undefined);
+const __vue_component__$J = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$n,
+  staticRenderFns: __vue_staticRenderFns__$n
+}, __vue_inject_styles__$o, __vue_script__$h, __vue_scope_id__$o, __vue_is_functional_template__$o, __vue_module_identifier__$o, false, undefined, undefined, undefined);
-var NsModal = __vue_component__$H;
+var NsModal = __vue_component__$J;
 //
-var script$f = {
+var script$g = {
   name: "NsDangerDeleteModal",
   //component added for storybook to work
   components: {
@@ -8499,10 +8521,10 @@ var script$f = {
 };
 /* script */
-const __vue_script__$f = script$f;
+const __vue_script__$g = script$g;
 /* template */
-var __vue_render__$l = function () {
+var __vue_render__$m = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -8570,10 +8592,10 @@ var __vue_render__$l = function () {
   }, [_vm._v(_vm._s(_vm.deleteLabel))])], 2);
 };
-var __vue_staticRenderFns__$l = [];
+var __vue_staticRenderFns__$m = [];
 /* style */
-const __vue_inject_styles__$m = function (inject) {
+const __vue_inject_styles__$n = function (inject) {
   if (!inject) return;
   inject("data-v-746a2de3_0", {
     source: ".type-to-confirm[data-v-746a2de3]{margin-top:2rem}",
@@ -8584,23 +8606,23 @@ const __vue_inject_styles__$m = function (inject) {
 /* scoped */
-const __vue_scope_id__$m = "data-v-746a2de3";
+const __vue_scope_id__$n = "data-v-746a2de3";
 /* module identifier */
-const __vue_module_identifier__$m = undefined;
+const __vue_module_identifier__$n = undefined;
 /* functional template */
-const __vue_is_functional_template__$m = false;
+const __vue_is_functional_template__$n = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$F = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$l,
-  staticRenderFns: __vue_staticRenderFns__$l
-}, __vue_inject_styles__$m, __vue_script__$f, __vue_scope_id__$m, __vue_is_functional_template__$m, __vue_module_identifier__$m, false, createInjector, undefined, undefined);
+const __vue_component__$H = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$m,
+  staticRenderFns: __vue_staticRenderFns__$m
+}, __vue_inject_styles__$n, __vue_script__$g, __vue_scope_id__$n, __vue_is_functional_template__$n, __vue_module_identifier__$n, false, createInjector, undefined, undefined);
-var __vue_component__$G = __vue_component__$F;
+var __vue_component__$I = __vue_component__$H;
 var IconService = {
   name: "IconService",
@@ -8763,16 +8785,23 @@ var IconService = {
       Locked20,
       Locked32,
       Folder16,
-      // public mailbox
       Folder20,
-      Folder32
+      Folder32,
+      Asterisk16,
+      // wildcard email domain
+      Asterisk20,
+      Asterisk32,
+      Box16,
+      // mailboxes
+      Box20,
+      Box32
     };
   }
 };
 //
-var script$e = {
+var script$f = {
   name: "NsDropdownAction",
   extends: CvOverflowMenu,
   components: {
@@ -8804,10 +8833,10 @@ var script$e = {
 };
 /* script */
-const __vue_script__$e = script$e;
+const __vue_script__$f = script$f;
 /* template */
-var __vue_render__$k = function () {
+var __vue_render__$l = function () {
   var _obj, _obj$1;
   var _vm = this;
@@ -8907,34 +8936,34 @@ var __vue_render__$k = function () {
   })])]);
 };
-var __vue_staticRenderFns__$k = [];
+var __vue_staticRenderFns__$l = [];
 /* style */
-const __vue_inject_styles__$l = undefined;
+const __vue_inject_styles__$m = undefined;
 /* scoped */
-const __vue_scope_id__$l = "data-v-31925b9d";
+const __vue_scope_id__$m = "data-v-31925b9d";
 /* module identifier */
-const __vue_module_identifier__$l = undefined;
+const __vue_module_identifier__$m = undefined;
 /* functional template */
-const __vue_is_functional_template__$l = false;
+const __vue_is_functional_template__$m = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$D = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$k,
-  staticRenderFns: __vue_staticRenderFns__$k
-}, __vue_inject_styles__$l, __vue_script__$e, __vue_scope_id__$l, __vue_is_functional_template__$l, __vue_module_identifier__$l, false, undefined, undefined, undefined);
+const __vue_component__$F = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$l,
+  staticRenderFns: __vue_staticRenderFns__$l
+}, __vue_inject_styles__$m, __vue_script__$f, __vue_scope_id__$m, __vue_is_functional_template__$m, __vue_module_identifier__$m, false, undefined, undefined, undefined);
-var __vue_component__$E = __vue_component__$D;
+var __vue_component__$G = __vue_component__$F;
 //
-var script$d = {
+var script$e = {
   name: "NsBackupCardDetails",
   mixins: [DateTimeService],
   props: {
@@ -8970,10 +8999,10 @@ var script$d = {
 };
 /* script */
-const __vue_script__$d = script$d;
+const __vue_script__$e = script$e;
 /* template */
-var __vue_render__$j = function () {
+var __vue_render__$k = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -9027,10 +9056,10 @@ var __vue_render__$j = function () {
   }, [_vm.status[_vm.backup.id] && _vm.status[_vm.backup.id].total_file_count ? _c('span', [_vm._v("\n        " + _vm._s(_vm.status[_vm.backup.id].total_file_count) + "\n      ")]) : _c('span', [_vm._v("-")])])])]);
 };
-var __vue_staticRenderFns__$j = [];
+var __vue_staticRenderFns__$k = [];
 /* style */
-const __vue_inject_styles__$k = function (inject) {
+const __vue_inject_styles__$l = function (inject) {
   if (!inject) return;
   inject("data-v-25453d1c_0", {
     source: ".ns-backup-card-details[data-v-25453d1c]{display:contents}.tr[data-v-25453d1c]{display:table-row}.td[data-v-25453d1c]{display:table-cell}.label[data-v-25453d1c]{padding-right:.75rem;font-weight:700;text-align:right;padding-bottom:.5rem}",
@@ -9041,26 +9070,26 @@ const __vue_inject_styles__$k = function (inject) {
 /* scoped */
-const __vue_scope_id__$k = "data-v-25453d1c";
+const __vue_scope_id__$l = "data-v-25453d1c";
 /* module identifier */
-const __vue_module_identifier__$k = undefined;
+const __vue_module_identifier__$l = undefined;
 /* functional template */
-const __vue_is_functional_template__$k = false;
+const __vue_is_functional_template__$l = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$C = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$j,
-  staticRenderFns: __vue_staticRenderFns__$j
-}, __vue_inject_styles__$k, __vue_script__$d, __vue_scope_id__$k, __vue_is_functional_template__$k, __vue_module_identifier__$k, false, createInjector, undefined, undefined);
+const __vue_component__$E = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$k,
+  staticRenderFns: __vue_staticRenderFns__$k
+}, __vue_inject_styles__$l, __vue_script__$e, __vue_scope_id__$l, __vue_is_functional_template__$l, __vue_module_identifier__$l, false, createInjector, undefined, undefined);
-var NsBackupCardDetails = __vue_component__$C;
+var NsBackupCardDetails = __vue_component__$E;
 //
-var script$c = {
+var script$d = {
   name: "NsBackupCard",
   components: {
     NsBackupCardDetails
@@ -9201,10 +9230,10 @@ var script$c = {
 };
 /* script */
-const __vue_script__$c = script$c;
+const __vue_script__$d = script$d;
 /* template */
-var __vue_render__$i = function () {
+var __vue_render__$j = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -9320,10 +9349,10 @@ var __vue_render__$i = function () {
   }, [_vm._v(_vm._s(_vm.goToBackupLabel) + "\n      ")])], 1)])], 2);
 };
-var __vue_staticRenderFns__$i = [];
+var __vue_staticRenderFns__$j = [];
 /* style */
-const __vue_inject_styles__$j = function (inject) {
+const __vue_inject_styles__$k = function (inject) {
   if (!inject) return;
   inject("data-v-5a3b7738_0", {
     source: ".ns-backup-card[data-v-5a3b7738]{display:flex;flex-direction:column;justify-content:center;min-height:7rem}.backup[data-v-5a3b7738]{margin-bottom:1rem}.backup[data-v-5a3b7738]:last-child{margin-bottom:0}.row[data-v-5a3b7738]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.title[data-v-5a3b7738]{margin-left:.25rem;margin-right:.25rem;margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-wrapper[data-v-5a3b7738]{display:flex;justify-content:center;margin-bottom:.5rem}.table[data-v-5a3b7738]{display:table}.tr[data-v-5a3b7738]{display:table-row}.td[data-v-5a3b7738]{display:table-cell}.label[data-v-5a3b7738]{padding-right:.75rem;font-weight:700;text-align:right;padding-bottom:.5rem}.status[data-v-5a3b7738]{font-weight:700}.backup-status-icon[data-v-5a3b7738]{margin-right:.25rem}",
@@ -9338,26 +9367,26 @@ const __vue_inject_styles__$j = function (inject) {
 /* scoped */
-const __vue_scope_id__$j = "data-v-5a3b7738";
+const __vue_scope_id__$k = "data-v-5a3b7738";
 /* module identifier */
-const __vue_module_identifier__$j = undefined;
+const __vue_module_identifier__$k = undefined;
 /* functional template */
-const __vue_is_functional_template__$j = false;
+const __vue_is_functional_template__$k = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$A = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$i,
-  staticRenderFns: __vue_staticRenderFns__$i
-}, __vue_inject_styles__$j, __vue_script__$c, __vue_scope_id__$j, __vue_is_functional_template__$j, __vue_module_identifier__$j, false, createInjector, undefined, undefined);
+const __vue_component__$C = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$j,
+  staticRenderFns: __vue_staticRenderFns__$j
+}, __vue_inject_styles__$k, __vue_script__$d, __vue_scope_id__$k, __vue_is_functional_template__$k, __vue_module_identifier__$k, false, createInjector, undefined, undefined);
-var __vue_component__$B = __vue_component__$A;
+var __vue_component__$D = __vue_component__$C;
 //
-var script$b = {
+var script$c = {
   name: "NsWizard",
   extends: NsModal,
   mixins: [IconService],
@@ -9401,10 +9430,10 @@ var script$b = {
 };
 /* script */
-const __vue_script__$b = script$b;
+const __vue_script__$c = script$c;
 /* template */
-var __vue_render__$h = function () {
+var __vue_render__$i = function () {
   var _obj, _obj$1;
   var _vm = this;
@@ -9546,34 +9575,34 @@ var __vue_render__$h = function () {
   })], 1)]);
 };
-var __vue_staticRenderFns__$h = [];
+var __vue_staticRenderFns__$i = [];
 /* style */
-const __vue_inject_styles__$i = undefined;
+const __vue_inject_styles__$j = undefined;
 /* scoped */
-const __vue_scope_id__$i = undefined;
+const __vue_scope_id__$j = undefined;
 /* module identifier */
-const __vue_module_identifier__$i = undefined;
+const __vue_module_identifier__$j = undefined;
 /* functional template */
-const __vue_is_functional_template__$i = false;
+const __vue_is_functional_template__$j = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$y = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$h,
-  staticRenderFns: __vue_staticRenderFns__$h
-}, __vue_inject_styles__$i, __vue_script__$b, __vue_scope_id__$i, __vue_is_functional_template__$i, __vue_module_identifier__$i, false, undefined, undefined, undefined);
+const __vue_component__$A = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$i,
+  staticRenderFns: __vue_staticRenderFns__$i
+}, __vue_inject_styles__$j, __vue_script__$c, __vue_scope_id__$j, __vue_is_functional_template__$j, __vue_module_identifier__$j, false, undefined, undefined, undefined);
-var __vue_component__$z = __vue_component__$y;
+var __vue_component__$B = __vue_component__$A;
 //
-var script$a = {
+var script$b = {
   name: "NsMenuItem",
   components: {
     NsSvg
@@ -9596,10 +9625,10 @@ var script$a = {
 };
 /* script */
-const __vue_script__$a = script$a;
+const __vue_script__$b = script$b;
 /* template */
-var __vue_render__$g = function () {
+var __vue_render__$h = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -9619,10 +9648,10 @@ var __vue_render__$g = function () {
   }, [_vm._t("icon")], 2) : _vm._e(), _vm._v(" "), _c('span', [_vm._v(_vm._s(_vm.label))])]);
 };
-var __vue_staticRenderFns__$g = [];
+var __vue_staticRenderFns__$h = [];
 /* style */
-const __vue_inject_styles__$h = function (inject) {
+const __vue_inject_styles__$i = function (inject) {
   if (!inject) return;
   inject("data-v-35f08832_0", {
     source: ".ns-menu-item[data-v-35f08832]{display:flex;align-items:center}.icon[data-v-35f08832]{margin-right:.5rem}",
@@ -9633,26 +9662,26 @@ const __vue_inject_styles__$h = function (inject) {
 /* scoped */
-const __vue_scope_id__$h = "data-v-35f08832";
+const __vue_scope_id__$i = "data-v-35f08832";
 /* module identifier */
-const __vue_module_identifier__$h = undefined;
+const __vue_module_identifier__$i = undefined;
 /* functional template */
-const __vue_is_functional_template__$h = false;
+const __vue_is_functional_template__$i = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$w = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$g,
-  staticRenderFns: __vue_staticRenderFns__$g
-}, __vue_inject_styles__$h, __vue_script__$a, __vue_scope_id__$h, __vue_is_functional_template__$h, __vue_module_identifier__$h, false, createInjector, undefined, undefined);
-var __vue_component__$x = __vue_component__$w;
+const __vue_component__$y = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$h,
+  staticRenderFns: __vue_staticRenderFns__$h
+}, __vue_inject_styles__$i, __vue_script__$b, __vue_scope_id__$i, __vue_is_functional_template__$i, __vue_module_identifier__$i, false, createInjector, undefined, undefined);
+var __vue_component__$z = __vue_component__$y;
 //
-var script$9 = {
+var script$a = {
   name: "NsMenuDivider",
   components: {
     CvSideNavDivider
@@ -9660,10 +9689,10 @@ var script$9 = {
 };
 /* script */
-const __vue_script__$9 = script$9;
+const __vue_script__$a = script$a;
 /* template */
-var __vue_render__$f = function () {
+var __vue_render__$g = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -9673,34 +9702,34 @@ var __vue_render__$f = function () {
   return _c('cv-side-nav-divider');
 };
-var __vue_staticRenderFns__$f = [];
+var __vue_staticRenderFns__$g = [];
 /* style */
-const __vue_inject_styles__$g = undefined;
+const __vue_inject_styles__$h = undefined;
 /* scoped */
-const __vue_scope_id__$g = "data-v-c2c8c17e";
+const __vue_scope_id__$h = "data-v-c2c8c17e";
 /* module identifier */
-const __vue_module_identifier__$g = undefined;
+const __vue_module_identifier__$h = undefined;
 /* functional template */
-const __vue_is_functional_template__$g = false;
+const __vue_is_functional_template__$h = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$u = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$f,
-  staticRenderFns: __vue_staticRenderFns__$f
-}, __vue_inject_styles__$g, __vue_script__$9, __vue_scope_id__$g, __vue_is_functional_template__$g, __vue_module_identifier__$g, false, undefined, undefined, undefined);
+const __vue_component__$w = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$g,
+  staticRenderFns: __vue_staticRenderFns__$g
+}, __vue_inject_styles__$h, __vue_script__$a, __vue_scope_id__$h, __vue_is_functional_template__$h, __vue_module_identifier__$h, false, undefined, undefined, undefined);
-var __vue_component__$v = __vue_component__$u;
+var __vue_component__$x = __vue_component__$w;
 //
-var script$8 = {
+var script$9 = {
   name: "NsSystemLogsCard",
   mixins: [UtilService, IconService],
   props: {
@@ -9819,10 +9848,10 @@ var script$8 = {
 };
 /* script */
-const __vue_script__$8 = script$8;
+const __vue_script__$9 = script$9;
 /* template */
-var __vue_render__$e = function () {
+var __vue_render__$f = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -9849,34 +9878,34 @@ var __vue_render__$e = function () {
   }, [_vm._v("\n      " + _vm._s(_vm.buttonLabel) + "\n    ")])], 1)], 2);
 };
-var __vue_staticRenderFns__$e = [];
+var __vue_staticRenderFns__$f = [];
 /* style */
-const __vue_inject_styles__$f = undefined;
+const __vue_inject_styles__$g = undefined;
 /* scoped */
-const __vue_scope_id__$f = "data-v-aec74b8e";
+const __vue_scope_id__$g = "data-v-aec74b8e";
 /* module identifier */
-const __vue_module_identifier__$f = undefined;
+const __vue_module_identifier__$g = undefined;
 /* functional template */
-const __vue_is_functional_template__$f = false;
+const __vue_is_functional_template__$g = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$s = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$e,
-  staticRenderFns: __vue_staticRenderFns__$e
-}, __vue_inject_styles__$f, __vue_script__$8, __vue_scope_id__$f, __vue_is_functional_template__$f, __vue_module_identifier__$f, false, undefined, undefined, undefined);
+const __vue_component__$u = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$f,
+  staticRenderFns: __vue_staticRenderFns__$f
+}, __vue_inject_styles__$g, __vue_script__$9, __vue_scope_id__$g, __vue_is_functional_template__$g, __vue_module_identifier__$g, false, undefined, undefined, undefined);
-var __vue_component__$t = __vue_component__$s;
+var __vue_component__$v = __vue_component__$u;
 //
-var script$7 = {
+var script$8 = {
   name: "NsTimePicker",
   mixins: [uidMixin, carbonPrefixMixin, themeMixin],
   props: {
@@ -9919,10 +9948,10 @@ var script$7 = {
 };
 /* script */
-const __vue_script__$7 = script$7;
+const __vue_script__$8 = script$8;
 /* template */
-var __vue_render__$d = function () {
+var __vue_render__$e = function () {
   var _obj, _obj$1;
   var _vm = this;
@@ -9966,10 +9995,10 @@ var __vue_render__$d = function () {
   })], 2) : _vm._e()]);
 };
-var __vue_staticRenderFns__$d = [];
+var __vue_staticRenderFns__$e = [];
 /* style */
-const __vue_inject_styles__$e = function (inject) {
+const __vue_inject_styles__$f = function (inject) {
   if (!inject) return;
   inject("data-v-e1e1beb2_0", {
     source: ".ns-time-picker .time-picker-field[data-v-e1e1beb2]{padding:0;width:6rem}.ns-time-picker .time-picker-field.narrow-width[data-v-e1e1beb2]{width:4.875rem}",
@@ -9984,23 +10013,23 @@ const __vue_inject_styles__$e = function (inject) {
 /* scoped */
-const __vue_scope_id__$e = "data-v-e1e1beb2";
+const __vue_scope_id__$f = "data-v-e1e1beb2";
 /* module identifier */
-const __vue_module_identifier__$e = undefined;
+const __vue_module_identifier__$f = undefined;
 /* functional template */
-const __vue_is_functional_template__$e = false;
+const __vue_is_functional_template__$f = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$q = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$d,
-  staticRenderFns: __vue_staticRenderFns__$d
-}, __vue_inject_styles__$e, __vue_script__$7, __vue_scope_id__$e, __vue_is_functional_template__$e, __vue_module_identifier__$e, false, createInjector, undefined, undefined);
+const __vue_component__$s = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$e,
+  staticRenderFns: __vue_staticRenderFns__$e
+}, __vue_inject_styles__$f, __vue_script__$8, __vue_scope_id__$f, __vue_is_functional_template__$f, __vue_module_identifier__$f, false, createInjector, undefined, undefined);
-var __vue_component__$r = __vue_component__$q;
+var __vue_component__$t = __vue_component__$s;
 /*
  * This component optionally wraps slotted content with the specified tag-type.
@@ -10039,7 +10068,7 @@ var NsWrapper = {
 };
-var script$6 = {
+var script$7 = {
   name: "NsPagination",
   extends: CvPagination,
   props: {
@@ -10117,12 +10146,12 @@ var script$6 = {
 };
 /* script */
-const __vue_script__$6 = script$6;
+const __vue_script__$7 = script$7;
 /* template */
 /* style */
-const __vue_inject_styles__$d = function (inject) {
+const __vue_inject_styles__$e = function (inject) {
   if (!inject) return;
   inject("data-v-01f52cb6_0", {
     source: ".cv-pagination .bx--select .bx--label{font-size:100%}",
@@ -10133,20 +10162,20 @@ const __vue_inject_styles__$d = function (inject) {
 /* scoped */
-const __vue_scope_id__$d = undefined;
+const __vue_scope_id__$e = undefined;
 /* module identifier */
-const __vue_module_identifier__$d = undefined;
+const __vue_module_identifier__$e = undefined;
 /* functional template */
-const __vue_is_functional_template__$d = undefined;
+const __vue_is_functional_template__$e = undefined;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$p = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$d, __vue_script__$6, __vue_scope_id__$d, __vue_is_functional_template__$d, __vue_module_identifier__$d, false, createInjector, undefined, undefined);
+const __vue_component__$r = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$e, __vue_script__$7, __vue_scope_id__$e, __vue_is_functional_template__$e, __vue_module_identifier__$e, false, createInjector, undefined, undefined);
-var NsPagination = __vue_component__$p;
+var NsPagination = __vue_component__$r;
 var v$3 = "5.6.1";
 var fr$3 = 24;
@@ -17185,7 +17214,7 @@ var LottieService = {
 };
 //
-var script$5 = {
+var script$6 = {
   name: "NsDataTable",
   extends: CvDataTable,
   components: {
@@ -17435,6 +17464,27 @@ var script$5 = {
       }
     },
+    searchMatch(target, cleanRegex, queryText) {
+      if (Array.isArray(target)) {
+        // search field is an array (e.g. groups)
+        return target.some(elem => {
+          return this.searchMatch(elem, cleanRegex, queryText);
+        });
+      } else if (typeof target === "string") {
+        // search field is a simple string
+        return new RegExp(queryText, "i").test(target.replace(cleanRegex, ""));
+      } else if (typeof target === "number") {
+        // search field is a number
+        return new RegExp(queryText, "i").test(target.toString().replace(cleanRegex, ""));
+      } else if (typeof target === "object") {
+        // search field is an object, search in its attributes
+        return Object.keys(target).some(key => {
+          // recursion
+          return this.searchMatch(target[key], cleanRegex, queryText);
+        });
+      }
+    },
     defaultFilterRows() {
       if (!this.searchFilter) {
         return this.allRows;
@@ -17445,18 +17495,10 @@ var script$5 = {
         const searchResults = this.allRows.filter(option => {
           // compare query text with attributes option
           return this.rawColumns.some(searchField => {
-            const searchValue = option[searchField];
-            if (searchValue) {
-              if (Array.isArray(searchValue)) {
-                // search field is an array (e.g. groups)
-                return searchValue.some(elem => {
-                  return new RegExp(queryText, "i").test(elem.replace(cleanRegex, ""));
-                });
-              } else {
-                // search field is a simple string
-                return new RegExp(queryText, "i").test(searchValue.replace(cleanRegex, ""));
-              }
+            const target = option[searchField];
+            if (target) {
+              return this.searchMatch(target, cleanRegex, queryText);
             } else {
               return false;
             }
@@ -17494,10 +17536,10 @@ var script$5 = {
 };
 /* script */
-const __vue_script__$5 = script$5;
+const __vue_script__$6 = script$6;
 /* template */
-var __vue_render__$c = function () {
+var __vue_render__$d = function () {
   var _obj, _obj$1, _obj$2, _obj$3;
   var _vm = this;
@@ -17825,34 +17867,34 @@ var __vue_render__$c = function () {
   }, 'NsPagination', _vm.internalPagination, false)) : _vm._e()], 1)], 2);
 };
-var __vue_staticRenderFns__$c = [];
+var __vue_staticRenderFns__$d = [];
 /* style */
-const __vue_inject_styles__$c = undefined;
+const __vue_inject_styles__$d = undefined;
 /* scoped */
-const __vue_scope_id__$c = undefined;
+const __vue_scope_id__$d = undefined;
 /* module identifier */
-const __vue_module_identifier__$c = undefined;
+const __vue_module_identifier__$d = undefined;
 /* functional template */
-const __vue_is_functional_template__$c = false;
+const __vue_is_functional_template__$d = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$n = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$c,
-  staticRenderFns: __vue_staticRenderFns__$c
-}, __vue_inject_styles__$c, __vue_script__$5, __vue_scope_id__$c, __vue_is_functional_template__$c, __vue_module_identifier__$c, false, undefined, undefined, undefined);
+const __vue_component__$p = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$d,
+  staticRenderFns: __vue_staticRenderFns__$d
+}, __vue_inject_styles__$d, __vue_script__$6, __vue_scope_id__$d, __vue_is_functional_template__$d, __vue_module_identifier__$d, false, undefined, undefined, undefined);
-var __vue_component__$o = __vue_component__$n;
+var __vue_component__$q = __vue_component__$p;
 //
-var script$4 = {
+var script$5 = {
   name: "NsToggle",
   extends: CvToggle,
   props: {
@@ -17883,10 +17925,10 @@ var script$4 = {
 };
 /* script */
-const __vue_script__$4 = script$4;
+const __vue_script__$5 = script$5;
 /* template */
-var __vue_render__$b = function () {
+var __vue_render__$c = function () {
   var _obj;
   var _vm = this;
@@ -17955,10 +17997,10 @@ var __vue_render__$b = function () {
   })], 2)])])]);
 };
-var __vue_staticRenderFns__$b = [];
+var __vue_staticRenderFns__$c = [];
 /* style */
-const __vue_inject_styles__$b = function (inject) {
+const __vue_inject_styles__$c = function (inject) {
   if (!inject) return;
   inject("data-v-08c576ca_0", {
     source: ".tooltip[data-v-08c576ca]{display:inline-block;position:absolute}",
@@ -17973,26 +18015,26 @@ const __vue_inject_styles__$b = function (inject) {
 /* scoped */
-const __vue_scope_id__$b = "data-v-08c576ca";
+const __vue_scope_id__$c = "data-v-08c576ca";
 /* module identifier */
-const __vue_module_identifier__$b = undefined;
+const __vue_module_identifier__$c = undefined;
 /* functional template */
-const __vue_is_functional_template__$b = false;
+const __vue_is_functional_template__$c = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$l = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$b,
-  staticRenderFns: __vue_staticRenderFns__$b
-}, __vue_inject_styles__$b, __vue_script__$4, __vue_scope_id__$b, __vue_is_functional_template__$b, __vue_module_identifier__$b, false, createInjector, undefined, undefined);
+const __vue_component__$n = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$c,
+  staticRenderFns: __vue_staticRenderFns__$c
+}, __vue_inject_styles__$c, __vue_script__$5, __vue_scope_id__$c, __vue_is_functional_template__$c, __vue_module_identifier__$c, false, createInjector, undefined, undefined);
-var __vue_component__$m = __vue_component__$l;
+var __vue_component__$o = __vue_component__$n;
 //
-var script$3 = {
+var script$4 = {
   name: "NsTag",
   extends: CvTag,
   computed: {
@@ -18004,10 +18046,10 @@ var script$3 = {
 };
 /* script */
-const __vue_script__$3 = script$3;
+const __vue_script__$4 = script$4;
 /* template */
-var __vue_render__$a = function () {
+var __vue_render__$b = function () {
   var _obj;
   var _vm = this;
@@ -18073,10 +18115,10 @@ var __vue_render__$a = function () {
   }, [_c('Close16')], 1) : _vm._e()]);
 };
-var __vue_staticRenderFns__$a = [];
+var __vue_staticRenderFns__$b = [];
 /* style */
-const __vue_inject_styles__$a = function (inject) {
+const __vue_inject_styles__$b = function (inject) {
   if (!inject) return;
   inject("data-v-34eae706_0", {
     source: ".bx--tag--filter[data-v-34eae706]{cursor:default}",
@@ -18087,23 +18129,23 @@ const __vue_inject_styles__$a = function (inject) {
 /* scoped */
-const __vue_scope_id__$a = "data-v-34eae706";
+const __vue_scope_id__$b = "data-v-34eae706";
 /* module identifier */
-const __vue_module_identifier__$a = undefined;
+const __vue_module_identifier__$b = undefined;
 /* functional template */
-const __vue_is_functional_template__$a = false;
+const __vue_is_functional_template__$b = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$k = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$a,
-  staticRenderFns: __vue_staticRenderFns__$a
-}, __vue_inject_styles__$a, __vue_script__$3, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, createInjector, undefined, undefined);
+const __vue_component__$m = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$b,
+  staticRenderFns: __vue_staticRenderFns__$b
+}, __vue_inject_styles__$b, __vue_script__$4, __vue_scope_id__$b, __vue_is_functional_template__$b, __vue_module_identifier__$b, false, createInjector, undefined, undefined);
-var NsTag = __vue_component__$k;
+var NsTag = __vue_component__$m;
 /**
  * Removes all key-value entries from the list cache.
@@ -20600,7 +20642,7 @@ const TOP_AFTER_REOPEN = 0;
 const TOP = 1;
 const FIXED = 2;
 const selectionFeedbackOptions = ["top-after-reopen", "top", "fixed"];
-var script$2 = {
+var script$3 = {
   name: "NsMultiSelect",
   inheritAttrs: false,
   mixins: [themeMixin, uidMixin, carbonPrefixMixin, methodsMixin({
@@ -21095,10 +21137,10 @@ var script$2 = {
 };
 /* script */
-const __vue_script__$2 = script$2;
+const __vue_script__$3 = script$3;
 /* template */
-var __vue_render__$9 = function () {
+var __vue_render__$a = function () {
   var _obj, _obj$1, _obj$2, _obj$3, _obj$4, _obj$5, _obj$6;
   var _vm = this;
@@ -21368,10 +21410,10 @@ var __vue_render__$9 = function () {
   }), 1) : _vm._e()]);
 };
-var __vue_staticRenderFns__$9 = [];
+var __vue_staticRenderFns__$a = [];
 /* style */
-const __vue_inject_styles__$9 = function (inject) {
+const __vue_inject_styles__$a = function (inject) {
   if (!inject) return;
   inject("data-v-319bf0f2_0", {
     source: ".bx--multi-select--filterable .bx--tag.selected-item[data-v-319bf0f2]{margin-left:0;margin-bottom:.25rem}.margin-bottom-on-open[data-v-319bf0f2]{margin-bottom:14rem}.label-with-tooltip[data-v-319bf0f2]{display:flex;align-items:baseline}",
@@ -21386,26 +21428,26 @@ const __vue_inject_styles__$9 = function (inject) {
 /* scoped */
-const __vue_scope_id__$9 = "data-v-319bf0f2";
+const __vue_scope_id__$a = "data-v-319bf0f2";
 /* module identifier */
-const __vue_module_identifier__$9 = undefined;
+const __vue_module_identifier__$a = undefined;
 /* functional template */
-const __vue_is_functional_template__$9 = false;
+const __vue_is_functional_template__$a = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$i = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$9,
-  staticRenderFns: __vue_staticRenderFns__$9
-}, __vue_inject_styles__$9, __vue_script__$2, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, createInjector, undefined, undefined);
+const __vue_component__$k = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$a,
+  staticRenderFns: __vue_staticRenderFns__$a
+}, __vue_inject_styles__$a, __vue_script__$3, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, createInjector, undefined, undefined);
-var __vue_component__$j = __vue_component__$i;
+var __vue_component__$l = __vue_component__$k;
 //
-var script$1 = {
+var script$2 = {
   name: "NsComboBox",
   inheritAttrs: false,
   mixins: [themeMixin, uidMixin, carbonPrefixMixin, methodsMixin({
@@ -21823,10 +21865,10 @@ var script$1 = {
 };
 /* script */
-const __vue_script__$1 = script$1;
+const __vue_script__$2 = script$2;
 /* template */
-var __vue_render__$8 = function () {
+var __vue_render__$9 = function () {
   var _obj, _obj$1, _obj$2, _obj$3, _obj$4;
   var _vm = this;
@@ -22044,10 +22086,10 @@ var __vue_render__$8 = function () {
   })], 2) : _vm._e()]);
 };
-var __vue_staticRenderFns__$8 = [];
+var __vue_staticRenderFns__$9 = [];
 /* style */
-const __vue_inject_styles__$8 = function (inject) {
+const __vue_inject_styles__$9 = function (inject) {
   if (!inject) return;
   inject("data-v-05ab085e_0", {
     source: ".margin-bottom-on-open[data-v-05ab085e]{margin-bottom:14rem}.label-with-tooltip[data-v-05ab085e]{display:flex;align-items:baseline}",
@@ -22062,26 +22104,26 @@ const __vue_inject_styles__$8 = function (inject) {
 /* scoped */
-const __vue_scope_id__$8 = "data-v-05ab085e";
+const __vue_scope_id__$9 = "data-v-05ab085e";
 /* module identifier */
-const __vue_module_identifier__$8 = undefined;
+const __vue_module_identifier__$9 = undefined;
 /* functional template */
-const __vue_is_functional_template__$8 = false;
+const __vue_is_functional_template__$9 = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$g = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$8,
-  staticRenderFns: __vue_staticRenderFns__$8
-}, __vue_inject_styles__$8, __vue_script__$1, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, createInjector, undefined, undefined);
+const __vue_component__$i = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$9,
+  staticRenderFns: __vue_staticRenderFns__$9
+}, __vue_inject_styles__$9, __vue_script__$2, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, createInjector, undefined, undefined);
-var __vue_component__$h = __vue_component__$g;
+var __vue_component__$j = __vue_component__$i;
 //
-var script = {
+var script$1 = {
   name: "NsCheckbox",
   extends: CvCheckbox,
   inheritAttrs: false,
@@ -22113,10 +22155,10 @@ var script = {
 };
 /* script */
-const __vue_script__ = script;
+const __vue_script__$1 = script$1;
 /* template */
-var __vue_render__$7 = function () {
+var __vue_render__$8 = function () {
   var _obj, _obj$1, _obj$2;
   var _vm = this;
@@ -22155,7 +22197,11 @@ var __vue_render__$7 = function () {
     class: [_vm.carbonPrefix + "--checkbox-label-text", (_obj$2 = {}, _obj$2[_vm.carbonPrefix + "--visually-hidden"] = _vm.hideLabel, _obj$2)]
   }, [_c('div', {
     staticClass: "label-with-tooltip"
-  }, [_c('span', [_vm._v("\n          " + _vm._s(_vm.label) + "\n        ")]), _vm._v(" "), _vm.hasTooltipSlot ? _c('cv-interactive-tooltip', {
+  }, [_c('span', {
+    domProps: {
+      "innerHTML": _vm._s(_vm.label)
+    }
+  }), _vm._v(" "), _vm.hasTooltipSlot ? _c('cv-interactive-tooltip', {
     staticClass: "info",
     attrs: {
       "alignment": _vm.tooltipAlignment,
@@ -22166,16 +22212,16 @@ var __vue_render__$7 = function () {
   }, [_vm._t("tooltip")], 2)], 2) : _vm._e()], 1)])])]);
 };
-var __vue_staticRenderFns__$7 = [];
+var __vue_staticRenderFns__$8 = [];
 /* style */
-const __vue_inject_styles__$7 = function (inject) {
+const __vue_inject_styles__$8 = function (inject) {
   if (!inject) return;
-  inject("data-v-03fbc1e6_0", {
-    source: ".label-with-tooltip[data-v-03fbc1e6]{display:flex}",
+  inject("data-v-b70bd436_0", {
+    source: ".label-with-tooltip[data-v-b70bd436]{display:flex}",
     map: undefined,
     media: undefined
-  }), inject("data-v-03fbc1e6_1", {
+  }), inject("data-v-b70bd436_1", {
     source: ".ns-checkbox .bx--tooltip__label .bx--tooltip__trigger{margin-left:.25rem}",
     map: undefined,
     media: undefined
@@ -22184,50 +22230,621 @@ const __vue_inject_styles__$7 = function (inject) {
 /* scoped */
-const __vue_scope_id__$7 = "data-v-03fbc1e6";
+const __vue_scope_id__$8 = "data-v-b70bd436";
 /* module identifier */
-const __vue_module_identifier__$7 = undefined;
+const __vue_module_identifier__$8 = undefined;
 /* functional template */
-const __vue_is_functional_template__$7 = false;
+const __vue_is_functional_template__$8 = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$e = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$7,
-  staticRenderFns: __vue_staticRenderFns__$7
-}, __vue_inject_styles__$7, __vue_script__, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, createInjector, undefined, undefined);
-var __vue_component__$f = __vue_component__$e;
-/* script */
-/* template */
-var __vue_render__$6 = function () {
-  var _vm = this;
+const __vue_component__$g = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$8,
+  staticRenderFns: __vue_staticRenderFns__$8
+}, __vue_inject_styles__$8, __vue_script__$1, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, createInjector, undefined, undefined);
-  var _h = _vm.$createElement;
+var __vue_component__$h = __vue_component__$g;
-  var _c = _vm._self._c || _h;
+//
+var script = {
+  name: "NsByteSlider",
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({
+    thumb: ["blur", "focus"]
+  })],
+  props: {
+    disabled: Boolean,
+    label: String,
+    // NOTE: It is not safe to rely on Numbers for non-integer steps
+    min: {
+      type: String,
+      default: "0"
+    },
+    max: {
+      type: String,
+      default: "100"
+    },
+    step: {
+      type: String,
+      default: "1"
+    },
+    stepMultiplier: {
+      type: String,
+      default: "4",
-  return _c('path', {
-    attrs: {
-      "id": "gear_2_",
-      "d": "M18.958,31.36h-5.915c-0.199,0-0.36-0.161-0.36-0.36v-3.633l-2.368-0.99l-2.576,2.575\n\tc-0.141,0.141-0.368,0.141-0.509,0L3.048,24.77c-0.141-0.141-0.141-0.369,0-0.51l2.568-2.568l-0.974-2.375H1\n\tc-0.199,0-0.36-0.161-0.36-0.36v-5.915c0-0.199,0.161-0.36,0.36-0.36h3.632l0.991-2.368L3.048,7.739\n\tc-0.141-0.141-0.141-0.368,0-0.509L7.23,3.048C7.298,2.98,7.389,2.942,7.485,2.942l0,0c0.096,0,0.187,0.038,0.254,0.105l2.568,2.569\n\tl2.375-0.975V1c0-0.199,0.161-0.36,0.36-0.36h5.915c0.199,0,0.36,0.161,0.36,0.36v3.632l2.367,0.991l2.575-2.575\n\tc0.141-0.141,0.369-0.141,0.51,0l4.183,4.182c0.067,0.067,0.105,0.159,0.105,0.254s-0.038,0.187-0.105,0.254l-2.569,2.568\n\tl0.975,2.375H31c0.199,0,0.36,0.161,0.36,0.36v5.915c0,0.199-0.161,0.36-0.36,0.36h-3.633l-0.99,2.368l2.576,2.575\n\tc0.067,0.067,0.105,0.159,0.105,0.255s-0.038,0.188-0.105,0.255l-4.183,4.182c-0.141,0.141-0.369,0.141-0.51,0l-2.568-2.568\n\tl-2.374,0.974V31C19.318,31.199,19.157,31.36,18.958,31.36z M13.403,30.64h5.195v-3.523c0-0.146,0.089-0.277,0.224-0.333\n\tl2.819-1.156c0.134-0.057,0.288-0.024,0.392,0.078l2.483,2.483l3.674-3.673l-2.492-2.491c-0.103-0.104-0.134-0.259-0.077-0.394\n\tl1.176-2.812c0.056-0.134,0.187-0.222,0.332-0.222h3.512v-5.194h-3.522c-0.146,0-0.277-0.088-0.333-0.223l-1.157-2.82\n\tc-0.055-0.134-0.024-0.289,0.078-0.391l2.484-2.483l-3.674-3.673l-2.491,2.491c-0.104,0.103-0.26,0.134-0.394,0.078L18.82,5.206\n\tc-0.134-0.056-0.222-0.187-0.222-0.332V1.36h-5.195v3.523c0,0.146-0.088,0.278-0.223,0.333l-2.82,1.157\n\tc-0.135,0.055-0.289,0.024-0.391-0.079L7.485,3.812L3.812,7.484l2.491,2.492c0.104,0.103,0.134,0.259,0.078,0.394l-1.177,2.812\n\tc-0.056,0.134-0.187,0.221-0.332,0.221H1.36v5.194h3.524c0.146,0,0.278,0.089,0.333,0.224l1.157,2.82\n\tc0.055,0.135,0.024,0.289-0.079,0.392l-2.483,2.483l3.673,3.673l2.492-2.491c0.103-0.104,0.26-0.133,0.393-0.077l2.812,1.176\n\tc0.134,0.056,0.221,0.187,0.221,0.332V30.64z M16,23.36c-4.058,0-7.36-3.302-7.36-7.36S11.942,8.64,16,8.64\n\tc4.059,0,7.36,3.302,7.36,7.36C23.36,20.059,20.059,23.36,16,23.36z M16,9.36c-3.661,0-6.64,2.979-6.64,6.64s2.979,6.64,6.64,6.64\n\ts6.64-2.979,6.64-6.64S19.661,9.36,16,9.36z"
-    }
-  });
-};
+      validator(val) {
+        if (val.length) {
+          let intMultiplier = parseInt(val);
-var __vue_staticRenderFns__$6 = [];
-/* style */
+          if (isNaN(intMultiplier) || intMultiplier < 1) {
+            console.warn("ns-byte-slider: multiplier must be >= 1");
+            return false;
+          }
+        }
-const __vue_inject_styles__$6 = undefined;
-/* scoped */
+        return true;
+      }
-const __vue_scope_id__$6 = undefined;
-/* module identifier */
+    },
+    value: String,
+    minLabel: String,
+    maxLabel: String,
+    showUnlimited: {
+      type: Boolean,
+      default: false
+    },
+    isUnlimited: {
+      type: Boolean,
+      default: false
+    },
+    byteUnit: {
+      type: String,
+      default: "gib"
+    },
+    unlimitedLabel: {
+      type: String,
+      default: "Unlimited"
+    },
+    showHumanReadableLabel: {
+      type: Boolean,
+      default: false
+    },
+    showMibGibToggle: {
+      type: Boolean,
+      default: false
+    },
+    tagKind: {
+      type: String,
+      default: "high-contrast"
+    },
+    invalidMessage: {
+      type: String,
+      default: ""
+    }
+  },
+  model: {
+    prop: "value",
+    event: "modelEvent"
+  },
+  data() {
+    return {
+      internalValue: "",
+      animateClick: false,
+      isDragging: false,
+      dragStartX: 0,
+      dragStartValue: 0,
+      percentage: "0%",
+      internalUnlimited: false,
+      internalByteUnit: "gib",
+      isInvalid: false
+    };
+  },
+  computed: {
+    labelId() {
+      return `${this.uid}-label`;
+    },
+    internalMinLabel() {
+      return this.minLabel !== undefined ? this.minLabel : this.getMin();
+    },
+    internalMaxLabel() {
+      return this.maxLabel !== undefined ? this.maxLabel : this.getMax();
+    },
+    internalMultiplier() {
+      let intMultiplier = parseInt(this.stepMultiplier); // default to 4 fro multiplier
+      return isNaN(intMultiplier) ? 4 : Math.max(intMultiplier, 1);
+    },
+    humanReadableLabel() {
+      if (this.internalByteUnit === "gib") {
+        return this.gibFormat(this.internalValue);
+      } else {
+        // MiB
+        return this.mibFormat(this.internalValue);
+      }
+    }
+  },
+  created() {
+    this.internalUnlimited = this.isUnlimited;
+    this.internalByteUnit = this.byteUnit;
+  },
+  mounted() {
+    this.$refs.range.value = this.value;
+    this.internalValue = this.$refs.range.value;
+    this.percentage = `${(this.internalValue - this.getMin()) * 100 / (this.getMax() - this.getMin())}%`;
+    this.checkSlots();
+  },
+  updated() {
+    this.checkSlots();
+  },
+  watch: {
+    value(val) {
+      this.setValue(val);
+    },
+    min() {
+      this.$nextTick(() => {
+        this.setValue(this.internalValue);
+      });
+    },
+    max() {
+      this.$nextTick(() => {
+        this.setValue(this.internalValue);
+      });
+    },
+    step() {
+      this.$nextTick(() => {
+        this.setValue(this.internalValue);
+      });
+    },
+    isUnlimited() {
+      this.internalUnlimited = this.isUnlimited;
+    },
+    internalUnlimited() {
+      if (this.internalUnlimited) {
+        this.$emit("unlimited", true);
+      } else {
+        this.$emit("unlimited", false);
+      }
+    },
+    byteUnit() {
+      this.internalByteUnit = this.byteUnit;
+    },
+    internalByteUnit() {
+      this.$emit("byteUnit", this.internalByteUnit);
+    }
+  },
+  methods: {
+    // NOTE: It is not safe to rely on Numbers for non-integer steps
+    getMin() {
+      if (this.$refs.range) {
+        const val = parseFloat(this.$refs.range.min);
+        return isNaN(val) ? 0 : val;
+      }
+      return 0;
+    },
+    getMax() {
+      if (this.$refs.range) {
+        const val = parseFloat(this.$refs.range.max);
+        return isNaN(val) ? 100 : val;
+      }
+      return 100;
+    },
+    getValue() {
+      if (this.$refs.range) {
+        const val = parseFloat(this.$refs.range.value);
+        return isNaN(val) ? 0 : val;
+      }
+      return (this.getMax() + this.getMin()) / 2;
+    },
+    getStep() {
+      if (this.$refs.range) {
+        const val = parseFloat(this.$refs.range.step);
+        return isNaN(val) ? 0 : val;
+      }
+      return 1;
+    },
+    setValue(newValue) {
+      if (this.disabled) return;
+      this.$refs.range.value = newValue;
+      this.internalValue = this.$refs.range.value;
+      this.percentage = `${(this.internalValue - this.getMin()) * 100 / (this.getMax() - this.getMin())}%`;
+      this.$emit("modelEvent", this.$refs.range.value);
+      this.$emit("change", this.$refs.range.value);
+    },
+    onChange() {
+      let newValue = this.internalValue.length ? parseFloat(this.internalValue) : this.getMin();
+      this.setValue(newValue);
+    },
+    onStartDrag(ev) {
+      document.body.addEventListener("mousemove", this.onDrag);
+      document.body.addEventListener("mouseup", this.onStopDrag);
+      this.dragStartX = ev.clientX;
+      this.dragStartValue = this.getValue();
+      this.isDragging = true;
+    },
+    onDrag(ev) {
+      if (this.isDragging) {
+        // percentage change
+        let newValue = (ev.clientX - this.dragStartX) / this.$refs.track.offsetWidth; // uncapped new value
+        newValue = this.dragStartValue + (this.getMax() - this.getMin()) * newValue;
+        this.setValue(newValue, ev);
+      }
+    },
+    onStopDrag() {
+      this.isDragging = false;
+      document.body.removeEventListener("mousemove", this.onDrag);
+      document.body.removeEventListener("mouseup", this.onStopDrag);
+    },
+    onTrackClick(ev) {
+      const afterAnimate = ev => {
+        if (ev.propertyName === "left") {
+          this.animateClick = false;
+          this.$refs.thumb.removeEventListener("transitionend", afterAnimate);
+        }
+      };
+      let newValue = ev.offsetX / this.$refs.track.offsetWidth;
+      newValue = (this.getMax() - this.getMin()) * newValue + this.getMin();
+      this.$refs.thumb.addEventListener("transitionend", afterAnimate);
+      this.animateClick = true;
+      this.setValue(newValue, ev);
+    },
+    onUp(ev) {
+      let curValue = ev.target.type === "number" ? parseFloat(ev.target.value) : this.getValue();
+      let newValue = curValue + (ev.shiftKey ? this.internalMultiplier * this.getStep() : this.getStep());
+      this.setValue(newValue, ev);
+    },
+    onDown(ev) {
+      let curValue = ev.target.type === "number" ? parseFloat(ev.target.value) : this.getValue();
+      let newValue = curValue - (ev.shiftKey ? this.internalMultiplier * this.getStep() : this.getStep());
+      this.setValue(newValue, ev);
+    },
+    mibFormat(size) {
+      let result;
+      switch (true) {
+        case size === null || size === "" || isNaN(size):
+          result = "-";
+          break;
+        case size >= 0 && size < 1024:
+          result = size + " MiB";
+          break;
+        case size >= 1024 && size < Math.pow(1024, 2):
+          result = Math.round(size / 1024 * 100) / 100 + " GiB";
+          break;
+        default:
+          result = Math.round(size / Math.pow(1024, 2) * 100) / 100 + " TiB";
+      }
+      return result;
+    },
+    gibFormat(size) {
+      let result;
+      switch (true) {
+        case size === null || size === "" || isNaN(size):
+          result = "-";
+          break;
+        case size >= 0 && size < 1024:
+          result = size + " GiB";
+          break;
+        default:
+          result = Math.round(size / 1024 * 100) / 100 + " TiB";
+      }
+      return result;
+    },
+    checkSlots() {
+      // NOTE: this.$slots is not reactive so needs to be managed on updated
+      this.isInvalid = !!(this.$slots["invalid-message"] || this.invalidMessage && this.invalidMessage.length);
+    }
+  }
+};
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__$7 = function () {
+  var _obj, _obj$1, _obj$2, _obj$3;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    class: "ns-byte-slider cv-slider " + _vm.carbonPrefix + "--form-item"
+  }, [_c('div', {
+    staticClass: "wrapper",
+    attrs: {
+      "data-invalid": _vm.isInvalid
+    }
+  }, [_c('label', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.label,
+      expression: "label"
+    }],
+    class: [_vm.carbonPrefix + "--label", (_obj = {}, _obj[_vm.carbonPrefix + "--label--disabled"] = _vm.disabled, _obj)],
+    attrs: {
+      "for": _vm.uid,
+      "id": _vm.labelId
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n    ")]), _vm._v(" "), _vm.showUnlimited ? _c('NsCheckbox', {
+    staticClass: "is-unlimited",
+    attrs: {
+      "label": _vm.unlimitedLabel,
+      "disabled": _vm.disabled,
+      "value": "checkUnlimited"
+    },
+    model: {
+      value: _vm.internalUnlimited,
+      callback: function ($$v) {
+        _vm.internalUnlimited = $$v;
+      },
+      expression: "internalUnlimited"
+    }
+  }) : _vm._e(), _vm._v(" "), _c('div', {
+    class: _vm.carbonPrefix + "--slider-container"
+  }, [_vm.internalMinLabel ? _c('span', {
+    class: _vm.carbonPrefix + "--slider__range-label"
+  }, [_vm._v(_vm._s(_vm.internalMinLabel))]) : _vm._e(), _vm._v(" "), _c('div', {
+    class: [_vm.carbonPrefix + "--slider", (_obj$1 = {}, _obj$1[_vm.carbonPrefix + "--slider--disabled"] = _vm.disabled || _vm.internalUnlimited, _obj$1)],
+    attrs: {
+      "data-slider": "",
+      "data-slider-input-box": "#slider-input-box"
+    }
+  }, [_c('div', {
+    ref: "track",
+    class: _vm.carbonPrefix + "--slider__track",
+    on: {
+      "click": _vm.onTrackClick
+    }
+  }), _vm._v(" "), _c('div', {
+    class: _vm.carbonPrefix + "--slider__filled-track",
+    style: "width: " + _vm.percentage + ";"
+  }), _vm._v(" "), _c('div', {
+    ref: "thumb",
+    class: [_vm.carbonPrefix + "--slider__thumb", (_obj$2 = {}, _obj$2[_vm.carbonPrefix + "--slider__thumb--clicked"] = _vm.animateClick, _obj$2)],
+    style: "left: " + _vm.percentage + ";",
+    attrs: {
+      "tabindex": "0",
+      "aria-labelledby": _vm.labelId
+    },
+    on: {
+      "keydown": [function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]) && _vm._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"])) {
+          return null;
+        }
+        if ('button' in $event && $event.button !== 2) {
+          return null;
+        }
+        $event.preventDefault();
+        return _vm.onUp.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]) && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) {
+          return null;
+        }
+        if ('button' in $event && $event.button !== 0) {
+          return null;
+        }
+        $event.preventDefault();
+        return _vm.onDown.apply(null, arguments);
+      }],
+      "mousedown": _vm.onStartDrag
+    }
+  }), _vm._v(" "), _c('input', {
+    ref: "range",
+    class: _vm.carbonPrefix + "--slider__input",
+    attrs: {
+      "id": _vm.uid,
+      "type": "range",
+      "step": _vm.step,
+      "min": _vm.min,
+      "max": _vm.max
+    }
+  })]), _vm._v(" "), _vm.internalMaxLabel ? _c('span', {
+    class: _vm.carbonPrefix + "--slider__range-label"
+  }, [_vm._v(_vm._s(_vm.internalMaxLabel))]) : _vm._e(), _vm._v(" "), _c('input', {
+    directives: [{
+      name: "model",
+      rawName: "v-model",
+      value: _vm.internalValue,
+      expression: "internalValue"
+    }],
+    ref: "inputBox",
+    class: [_vm.carbonPrefix + "--text-input " + _vm.carbonPrefix + "--slider-text-input", (_obj$3 = {}, _obj$3[_vm.carbonPrefix + "--text-input--light"] = _vm.isLight, _obj$3[_vm.carbonPrefix + "--text-input--invalid"] = _vm.isInvalid, _obj$3[_vm.carbonPrefix + "--text-input--warning"] = _vm.isWarn, _obj$3),, 'range-input'],
+    attrs: {
+      "type": "number",
+      "placeholder": _vm.min,
+      "disabled": _vm.disabled || _vm.internalUnlimited
+    },
+    domProps: {
+      "value": _vm.internalValue
+    },
+    on: {
+      "change": _vm.onChange,
+      "keydown": [function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) {
+          return null;
+        }
+        $event.preventDefault();
+        return _vm.onUp.apply(null, arguments);
+      }, function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) {
+          return null;
+        }
+        $event.preventDefault();
+        return _vm.onDown.apply(null, arguments);
+      }],
+      "input": function ($event) {
+        if ($event.target.composing) {
+          return;
+        }
+        _vm.internalValue = $event.target.value;
+      }
+    }
+  }), _vm._v(" "), _vm.showMibGibToggle ? _c('cv-radio-group', {
+    staticClass: "mib-gib"
+  }, [_c('cv-radio-button', {
+    attrs: {
+      "name": "group-mib-gib",
+      "label": "MiB",
+      "value": "mib",
+      "disabled": _vm.disabled || _vm.internalUnlimited
+    },
+    model: {
+      value: _vm.internalByteUnit,
+      callback: function ($$v) {
+        _vm.internalByteUnit = $$v;
+      },
+      expression: "internalByteUnit"
+    }
+  }), _vm._v(" "), _c('cv-radio-button', {
+    attrs: {
+      "name": "group-mib-gib",
+      "label": "GiB",
+      "value": "gib",
+      "disabled": _vm.disabled || _vm.internalUnlimited
+    },
+    model: {
+      value: _vm.internalByteUnit,
+      callback: function ($$v) {
+        _vm.internalByteUnit = $$v;
+      },
+      expression: "internalByteUnit"
+    }
+  })], 1) : _vm._e()], 1), _vm._v(" "), _vm.showHumanReadableLabel && !_vm.internalUnlimited ? _c('NsTag', {
+    staticClass: "human-label",
+    attrs: {
+      "label": _vm.humanReadableLabel,
+      "kind": _vm.tagKind,
+      "disabled": _vm.disabled || _vm.internalUnlimited
+    }
+  }) : _vm._e()], 1), _vm._v(" "), _vm.isInvalid ? _c('div', {
+    class: _vm.carbonPrefix + "--form-requirement"
+  }, [_vm._t("invalid-message", function () {
+    return [_vm._v(_vm._s(_vm.invalidMessage))];
+  })], 2) : _vm._e()]);
+};
+var __vue_staticRenderFns__$7 = [];
+/* style */
+const __vue_inject_styles__$7 = function (inject) {
+  if (!inject) return;
+  inject("data-v-1c03cbe8_0", {
+    source: ".is-unlimited[data-v-1c03cbe8]{margin-top:.5rem!important;margin-bottom:.5rem!important}.range-input[data-v-1c03cbe8]{margin-top:.5rem!important}.mib-gib[data-v-1c03cbe8]{margin-left:1rem;margin-top:.5rem!important}.human-label[data-v-1c03cbe8]{margin-top:1rem}",
+    map: undefined,
+    media: undefined
+  }), inject("data-v-1c03cbe8_1", {
+    source: ".ns-byte-slider .bx--slider-container{flex-wrap:wrap}.ns-byte-slider .bx--slider-text-input{width:5rem}.ns-byte-slider .wrapper[data-invalid]~.bx--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400;color:#da1e28}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__$7 = "data-v-1c03cbe8";
+/* module identifier */
+const __vue_module_identifier__$7 = undefined;
+/* functional template */
+const __vue_is_functional_template__$7 = false;
+/* style inject SSR */
+/* style inject shadow dom */
+const __vue_component__$e = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$7,
+  staticRenderFns: __vue_staticRenderFns__$7
+}, __vue_inject_styles__$7, __vue_script__, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, createInjector, undefined, undefined);
+var __vue_component__$f = __vue_component__$e;
+/* script */
+/* template */
+var __vue_render__$6 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('path', {
+    attrs: {
+      "id": "gear_2_",
+      "d": "M18.958,31.36h-5.915c-0.199,0-0.36-0.161-0.36-0.36v-3.633l-2.368-0.99l-2.576,2.575\n\tc-0.141,0.141-0.368,0.141-0.509,0L3.048,24.77c-0.141-0.141-0.141-0.369,0-0.51l2.568-2.568l-0.974-2.375H1\n\tc-0.199,0-0.36-0.161-0.36-0.36v-5.915c0-0.199,0.161-0.36,0.36-0.36h3.632l0.991-2.368L3.048,7.739\n\tc-0.141-0.141-0.141-0.368,0-0.509L7.23,3.048C7.298,2.98,7.389,2.942,7.485,2.942l0,0c0.096,0,0.187,0.038,0.254,0.105l2.568,2.569\n\tl2.375-0.975V1c0-0.199,0.161-0.36,0.36-0.36h5.915c0.199,0,0.36,0.161,0.36,0.36v3.632l2.367,0.991l2.575-2.575\n\tc0.141-0.141,0.369-0.141,0.51,0l4.183,4.182c0.067,0.067,0.105,0.159,0.105,0.254s-0.038,0.187-0.105,0.254l-2.569,2.568\n\tl0.975,2.375H31c0.199,0,0.36,0.161,0.36,0.36v5.915c0,0.199-0.161,0.36-0.36,0.36h-3.633l-0.99,2.368l2.576,2.575\n\tc0.067,0.067,0.105,0.159,0.105,0.255s-0.038,0.188-0.105,0.255l-4.183,4.182c-0.141,0.141-0.369,0.141-0.51,0l-2.568-2.568\n\tl-2.374,0.974V31C19.318,31.199,19.157,31.36,18.958,31.36z M13.403,30.64h5.195v-3.523c0-0.146,0.089-0.277,0.224-0.333\n\tl2.819-1.156c0.134-0.057,0.288-0.024,0.392,0.078l2.483,2.483l3.674-3.673l-2.492-2.491c-0.103-0.104-0.134-0.259-0.077-0.394\n\tl1.176-2.812c0.056-0.134,0.187-0.222,0.332-0.222h3.512v-5.194h-3.522c-0.146,0-0.277-0.088-0.333-0.223l-1.157-2.82\n\tc-0.055-0.134-0.024-0.289,0.078-0.391l2.484-2.483l-3.674-3.673l-2.491,2.491c-0.104,0.103-0.26,0.134-0.394,0.078L18.82,5.206\n\tc-0.134-0.056-0.222-0.187-0.222-0.332V1.36h-5.195v3.523c0,0.146-0.088,0.278-0.223,0.333l-2.82,1.157\n\tc-0.135,0.055-0.289,0.024-0.391-0.079L7.485,3.812L3.812,7.484l2.491,2.492c0.104,0.103,0.134,0.259,0.078,0.394l-1.177,2.812\n\tc-0.056,0.134-0.187,0.221-0.332,0.221H1.36v5.194h3.524c0.146,0,0.278,0.089,0.333,0.224l1.157,2.82\n\tc0.055,0.135,0.024,0.289-0.079,0.392l-2.483,2.483l3.673,3.673l2.492-2.491c0.103-0.104,0.26-0.133,0.393-0.077l2.812,1.176\n\tc0.134,0.056,0.221,0.187,0.221,0.332V30.64z M16,23.36c-4.058,0-7.36-3.302-7.36-7.36S11.942,8.64,16,8.64\n\tc4.059,0,7.36,3.302,7.36,7.36C23.36,20.059,20.059,23.36,16,23.36z M16,9.36c-3.661,0-6.64,2.979-6.64,6.64s2.979,6.64,6.64,6.64\n\ts6.64-2.979,6.64-6.64S19.661,9.36,16,9.36z"
+    }
+  });
+};
+var __vue_staticRenderFns__$6 = [];
+/* style */
+const __vue_inject_styles__$6 = undefined;
+/* scoped */
+const __vue_scope_id__$6 = undefined;
+/* module identifier */
 const __vue_module_identifier__$6 = undefined;
 /* functional template */
@@ -22845,7 +23462,11 @@ var task = {
     },
     createNotificationForApp(notification) {
-      window.parent.core.$root.$emit("createNotification", notification);
+      window.parent.core.$root.$emit("createNotificationForApp", notification);
+    },
+    deleteNotificationForApp(notification) {
+      window.parent.core.$root.$emit("deleteNotificationForApp", notification);
     }
   }
@@ -22877,7 +23498,7 @@ var pageTitle = {
 var filters = {
   byteFormat: function (size) {
-    var result;
+    let result;
     switch (true) {
       case size === null || size === "" || isNaN(size):
@@ -22889,25 +23510,25 @@ var filters = {
         break;
       case size >= 1024 && size < Math.pow(1024, 2):
-        result = Math.round(size / 1024 * 100) / 100 + " KB";
+        result = Math.round(size / 1024 * 100) / 100 + " KiB";
         break;
       case size >= Math.pow(1024, 2) && size < Math.pow(1024, 3):
-        result = Math.round(size / Math.pow(1024, 2) * 100) / 100 + " MB";
+        result = Math.round(size / Math.pow(1024, 2) * 100) / 100 + " MiB";
         break;
       case size >= Math.pow(1024, 3) && size < Math.pow(1024, 4):
-        result = Math.round(size / Math.pow(1024, 3) * 100) / 100 + " GB";
+        result = Math.round(size / Math.pow(1024, 3) * 100) / 100 + " GiB";
         break;
       default:
-        result = Math.round(size / Math.pow(1024, 4) * 100) / 100 + " TB";
+        result = Math.round(size / Math.pow(1024, 4) * 100) / 100 + " TiB";
     }
     return result;
   },
   humanFormat: function (number, decimals = false) {
-    var result;
+    let result;
     switch (true) {
       case number === null || number === "" || isNaN(number):
@@ -22956,6 +23577,49 @@ var filters = {
     return result;
   },
+  mibFormat(size) {
+    let result;
+    switch (true) {
+      case size === null || size === "" || isNaN(size):
+        result = "-";
+        break;
+      case size >= 0 && size < 1024:
+        result = size + " MiB";
+        break;
+      case size >= 1024 && size < Math.pow(1024, 2):
+        result = Math.round(size / 1024 * 100) / 100 + " GiB";
+        break;
+      default:
+        result = Math.round(size / Math.pow(1024, 2) * 100) / 100 + " TiB";
+    }
+    return result;
+  },
+  gibFormat(size) {
+    let result;
+    switch (true) {
+      case size === null || size === "" || isNaN(size):
+        result = "-";
+        break;
+      case size >= 0 && size < 1024:
+        result = size + " GiB";
+        break;
+      default:
+        result = Math.round(size / 1024 * 100) / 100 + " TiB";
+    }
+    return result;
+  },
   secondsFormat: function (value) {
     if (value < 0) {
       return "-";
@@ -23004,39 +23668,40 @@ var filters = {
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   NsButton: NsButton,
-  NsEmptyState: __vue_component__$14,
+  NsEmptyState: __vue_component__$16,
   NsPictogram: NsPictogram,
-  NsCodeSnippet: __vue_component__$12,
+  NsCodeSnippet: __vue_component__$14,
   NsInlineNotification: NsInlineNotification,
   NsProgressBar: NsProgressBar,
   NsSvg: NsSvg,
-  NsTile: __vue_component__$Y,
-  NsToastNotification: __vue_component__$W,
-  NsInfoCard: __vue_component__$U,
-  NsStatusCard: __vue_component__$S,
-  NsSystemdServiceCard: __vue_component__$Q,
-  NsPasswordInput: __vue_component__$N,
-  NsIconMenu: __vue_component__$L,
-  NsMeterChart: __vue_component__$J,
+  NsTile: __vue_component__$_,
+  NsToastNotification: __vue_component__$Y,
+  NsInfoCard: __vue_component__$W,
+  NsStatusCard: __vue_component__$U,
+  NsSystemdServiceCard: __vue_component__$S,
+  NsPasswordInput: __vue_component__$P,
+  NsIconMenu: __vue_component__$N,
+  NsMeterChart: __vue_component__$L,
   NsLottieAnimation: NsLottieAnimation,
-  NsDangerDeleteModal: __vue_component__$G,
+  NsDangerDeleteModal: __vue_component__$I,
   NsCircleTimer: NsCircleTimer,
-  NsDropdownAction: __vue_component__$E,
+  NsDropdownAction: __vue_component__$G,
   NsTextInput: NsTextInput,
-  NsBackupCard: __vue_component__$B,
-  NsWizard: __vue_component__$z,
-  NsMenuItem: __vue_component__$x,
-  NsMenuDivider: __vue_component__$v,
-  NsSystemLogsCard: __vue_component__$t,
+  NsBackupCard: __vue_component__$D,
+  NsWizard: __vue_component__$B,
+  NsMenuItem: __vue_component__$z,
+  NsMenuDivider: __vue_component__$x,
+  NsSystemLogsCard: __vue_component__$v,
   NsModal: NsModal,
-  NsTimePicker: __vue_component__$r,
-  NsDataTable: __vue_component__$o,
+  NsTimePicker: __vue_component__$t,
+  NsDataTable: __vue_component__$q,
   NsPagination: NsPagination,
-  NsToggle: __vue_component__$m,
+  NsToggle: __vue_component__$o,
   NsTag: NsTag,
-  NsMultiSelect: __vue_component__$j,
-  NsComboBox: __vue_component__$h,
-  NsCheckbox: __vue_component__$f,
+  NsMultiSelect: __vue_component__$l,
+  NsComboBox: __vue_component__$j,
+  NsCheckbox: __vue_component__$h,
+  NsByteSlider: __vue_component__$f,
   ExclamationMarkPictogram: ExclamationMarkPictogram,
   GearPictogram: __vue_component__$d,
   LovePictogram: __vue_component__$b,
@@ -23064,4 +23729,4 @@ const install = function installNs8UiLib(Vue) {
   });
 }; // Create module definition for Vue.use()
-export { __vue_component__$7 as BulldozerPictogram, DateTimeService, ExclamationMarkPictogram, filters as Filters, __vue_component__$d as GearPictogram, __vue_component__$5 as GroupPictogram, __vue_component__$3 as HardDrivePictogram, IconService, LottieService, __vue_component__$b as LovePictogram, __vue_component__$B as NsBackupCard, NsButton, __vue_component__$f as NsCheckbox, NsCircleTimer, __vue_component__$12 as NsCodeSnippet, __vue_component__$h as NsComboBox, __vue_component__$G as NsDangerDeleteModal, __vue_component__$o as NsDataTable, __vue_component__$E as NsDropdownAction, __vue_component__$14 as NsEmptyState, __vue_component__$L as NsIconMenu, __vue_component__$U as NsInfoCard, NsInlineNotification, NsLottieAnimation, __vue_component__$v as NsMenuDivider, __vue_component__$x as NsMenuItem, __vue_component__$J as NsMeterChart, NsModal, __vue_component__$j as NsMultiSelect, NsPagination, __vue_component__$N as NsPasswordInput, NsPictogram, NsProgressBar, __vue_component__$S as NsStatusCard, NsSvg, __vue_component__$t as NsSystemLogsCard, __vue_component__$Q as NsSystemdServiceCard, NsTag, NsTextInput, __vue_component__$Y as NsTile, __vue_component__$r as NsTimePicker, __vue_component__$W as NsToastNotification, __vue_component__$m as NsToggle, __vue_component__$z as NsWizard, pageTitle as PageTitleService, queryParam as QueryParamService, StorageService, task as TaskService, __vue_component__$1 as UserPictogram, UtilService, __vue_component__$9 as WarningPictogram, install as default };
+export { __vue_component__$7 as BulldozerPictogram, DateTimeService, ExclamationMarkPictogram, filters as Filters, __vue_component__$d as GearPictogram, __vue_component__$5 as GroupPictogram, __vue_component__$3 as HardDrivePictogram, IconService, LottieService, __vue_component__$b as LovePictogram, __vue_component__$D as NsBackupCard, NsButton, __vue_component__$f as NsByteSlider, __vue_component__$h as NsCheckbox, NsCircleTimer, __vue_component__$14 as NsCodeSnippet, __vue_component__$j as NsComboBox, __vue_component__$I as NsDangerDeleteModal, __vue_component__$q as NsDataTable, __vue_component__$G as NsDropdownAction, __vue_component__$16 as NsEmptyState, __vue_component__$N as NsIconMenu, __vue_component__$W as NsInfoCard, NsInlineNotification, NsLottieAnimation, __vue_component__$x as NsMenuDivider, __vue_component__$z as NsMenuItem, __vue_component__$L as NsMeterChart, NsModal, __vue_component__$l as NsMultiSelect, NsPagination, __vue_component__$P as NsPasswordInput, NsPictogram, NsProgressBar, __vue_component__$U as NsStatusCard, NsSvg, __vue_component__$v as NsSystemLogsCard, __vue_component__$S as NsSystemdServiceCard, NsTag, NsTextInput, __vue_component__$_ as NsTile, __vue_component__$t as NsTimePicker, __vue_component__$Y as NsToastNotification, __vue_component__$o as NsToggle, __vue_component__$B as NsWizard, pageTitle as PageTitleService, queryParam as QueryParamService, StorageService, task as TaskService, __vue_component__$1 as UserPictogram, UtilService, __vue_component__$9 as WarningPictogram, install as default };