@nethserver/ns8-ui-lib 0.0.88 → 0.0.91

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

@@ -9,9 +9,6 @@ import Warning20 from '@carbon/icons-vue/es/warning--filled/20';
 import { WarningFilled16, WarningAltFilled16, View16, ViewOff16 } from '@carbon/icons-vue';
 import crypto from 'crypto';
 import OverflowMenuVertical20 from '@carbon/icons-vue/es/overflow-menu--vertical/20';
-import Vue from 'vue';
-import '@carbon/charts/styles.css';
-import chartsVue, { CcvMeterChart } from '@carbon/charts-vue';
 import Close20 from '@carbon/icons-vue/es/close/20';
 import ArrowRight20 from '@carbon/icons-vue/es/arrow--right/20';
 import ArrowRight32 from '@carbon/icons-vue/es/arrow--right/32';
@@ -103,7 +100,7 @@ import Close16 from '@carbon/icons-vue/es/close/16';
 import ChevronRight16 from '@carbon/icons-vue/es/chevron--right/16';
 
 //
-var script$u = {
+var script$t = {
   name: "NsButton",
   extends: CvButton,
   props: {
@@ -266,10 +263,10 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$u = script$u;
+const __vue_script__$t = script$t;
 /* template */
 
-var __vue_render__$A = function () {
+var __vue_render__$z = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -292,10 +289,10 @@ var __vue_render__$A = function () {
   }) : _vm._e()], 2);
 };
 
-var __vue_staticRenderFns__$A = [];
+var __vue_staticRenderFns__$z = [];
 /* style */
 
-const __vue_inject_styles__$C = function (inject) {
+const __vue_inject_styles__$B = 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)}}",
@@ -306,23 +303,23 @@ const __vue_inject_styles__$C = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$C = "data-v-025b0f12";
+const __vue_scope_id__$B = "data-v-025b0f12";
 /* module identifier */
 
-const __vue_module_identifier__$C = undefined;
+const __vue_module_identifier__$B = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$C = false;
+const __vue_is_functional_template__$B = false;
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$11 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$A,
-  staticRenderFns: __vue_staticRenderFns__$A
-}, __vue_inject_styles__$C, __vue_script__$u, __vue_scope_id__$C, __vue_is_functional_template__$C, __vue_module_identifier__$C, false, createInjector, undefined, undefined);
+const __vue_component__$$ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$z,
+  staticRenderFns: __vue_staticRenderFns__$z
+}, __vue_inject_styles__$B, __vue_script__$t, __vue_scope_id__$B, __vue_is_functional_template__$B, __vue_module_identifier__$B, false, createInjector, undefined, undefined);
 
-var NsButton = __vue_component__$11;
+var NsButton = __vue_component__$$;
 
 //
 //
@@ -340,7 +337,7 @@ var NsButton = __vue_component__$11;
 //
 //
 //
-var script$t = {
+var script$s = {
   name: "NsPictogram",
   props: {
     title: {
@@ -363,10 +360,10 @@ var script$t = {
 };
 
 /* script */
-const __vue_script__$t = script$t;
+const __vue_script__$s = script$s;
 /* template */
 
-var __vue_render__$z = function () {
+var __vue_render__$y = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -394,34 +391,34 @@ var __vue_render__$z = function () {
   }, [_vm._t("default")], 2)]);
 };
 
-var __vue_staticRenderFns__$z = [];
+var __vue_staticRenderFns__$y = [];
 /* style */
 
-const __vue_inject_styles__$B = undefined;
+const __vue_inject_styles__$A = undefined;
 /* scoped */
 
-const __vue_scope_id__$B = undefined;
+const __vue_scope_id__$A = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$B = undefined;
+const __vue_module_identifier__$A = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$B = false;
+const __vue_is_functional_template__$A = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$10 = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$z,
-  staticRenderFns: __vue_staticRenderFns__$z
-}, __vue_inject_styles__$B, __vue_script__$t, __vue_scope_id__$B, __vue_is_functional_template__$B, __vue_module_identifier__$B, false, undefined, undefined, undefined);
+const __vue_component__$_ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$y,
+  staticRenderFns: __vue_staticRenderFns__$y
+}, __vue_inject_styles__$A, __vue_script__$s, __vue_scope_id__$A, __vue_is_functional_template__$A, __vue_module_identifier__$A, false, undefined, undefined, undefined);
 
-var NsPictogram = __vue_component__$10;
+var NsPictogram = __vue_component__$_;
 
 //
-var script$s = {
+var script$r = {
   name: "NsLottieAnimation",
   components: {
     LottieAnimation
@@ -477,10 +474,10 @@ var script$s = {
 };
 
 /* script */
-const __vue_script__$s = script$s;
+const __vue_script__$r = script$r;
 /* template */
 
-var __vue_render__$y = function () {
+var __vue_render__$x = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -507,36 +504,36 @@ var __vue_render__$y = function () {
   })], 1);
 };
 
-var __vue_staticRenderFns__$y = [];
+var __vue_staticRenderFns__$x = [];
 /* style */
 
-const __vue_inject_styles__$A = undefined;
+const __vue_inject_styles__$z = undefined;
 /* scoped */
 
-const __vue_scope_id__$A = "data-v-14e97a70";
+const __vue_scope_id__$z = "data-v-14e97a70";
 /* module identifier */
 
-const __vue_module_identifier__$A = undefined;
+const __vue_module_identifier__$z = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$A = false;
+const __vue_is_functional_template__$z = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$$ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$y,
-  staticRenderFns: __vue_staticRenderFns__$y
-}, __vue_inject_styles__$A, __vue_script__$s, __vue_scope_id__$A, __vue_is_functional_template__$A, __vue_module_identifier__$A, false, undefined, undefined, undefined);
+const __vue_component__$Z = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$x,
+  staticRenderFns: __vue_staticRenderFns__$x
+}, __vue_inject_styles__$z, __vue_script__$r, __vue_scope_id__$z, __vue_is_functional_template__$z, __vue_module_identifier__$z, false, undefined, undefined, undefined);
 
-var NsLottieAnimation = __vue_component__$$;
+var NsLottieAnimation = __vue_component__$Z;
 
 /* script */
 
 /* template */
-var __vue_render__$x = function () {
+var __vue_render__$w = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -551,34 +548,34 @@ var __vue_render__$x = function () {
   });
 };
 
-var __vue_staticRenderFns__$x = [];
+var __vue_staticRenderFns__$w = [];
 /* style */
 
-const __vue_inject_styles__$z = undefined;
+const __vue_inject_styles__$y = undefined;
 /* scoped */
 
-const __vue_scope_id__$z = undefined;
+const __vue_scope_id__$y = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$z = undefined;
+const __vue_module_identifier__$y = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$z = false;
+const __vue_is_functional_template__$y = false;
 /* style inject */
 
 /* 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_scope_id__$z, __vue_is_functional_template__$z, __vue_module_identifier__$z, false, undefined, undefined, undefined);
+const __vue_component__$Y = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$w,
+  staticRenderFns: __vue_staticRenderFns__$w
+}, __vue_inject_styles__$y, {}, __vue_scope_id__$y, __vue_is_functional_template__$y, __vue_module_identifier__$y, false, undefined, undefined, undefined);
 
-var ExclamationMarkPictogram = __vue_component__$_;
+var ExclamationMarkPictogram = __vue_component__$Y;
 
 //
-var script$r = {
+var script$q = {
   name: "NsEmptyState",
   components: {
     NsPictogram,
@@ -610,10 +607,10 @@ var script$r = {
 };
 
 /* script */
-const __vue_script__$r = script$r;
+const __vue_script__$q = script$q;
 /* template */
 
-var __vue_render__$w = function () {
+var __vue_render__$v = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -643,10 +640,10 @@ var __vue_render__$w = function () {
   }, [_vm._t("description")], 2)] : _vm._e()], 2);
 };
 
-var __vue_staticRenderFns__$w = [];
+var __vue_staticRenderFns__$v = [];
 /* style */
 
-const __vue_inject_styles__$y = function (inject) {
+const __vue_inject_styles__$x = 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}",
@@ -657,26 +654,26 @@ const __vue_inject_styles__$y = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$y = "data-v-2d5d3a58";
+const __vue_scope_id__$x = "data-v-2d5d3a58";
 /* module identifier */
 
-const __vue_module_identifier__$y = undefined;
+const __vue_module_identifier__$x = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$y = false;
+const __vue_is_functional_template__$x = false;
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$Y = /*#__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__$W = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$v,
+  staticRenderFns: __vue_staticRenderFns__$v
+}, __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__$Z = __vue_component__$Y;
+var __vue_component__$X = __vue_component__$W;
 
 //
-var script$q = {
+var script$p = {
   name: "NsCodeSnippet",
   components: {
     CvButton,
@@ -788,10 +785,10 @@ var script$q = {
 };
 
 /* script */
-const __vue_script__$q = script$q;
+const __vue_script__$p = script$p;
 /* template */
 
-var __vue_render__$v = function () {
+var __vue_render__$u = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -853,10 +850,10 @@ var __vue_render__$v = function () {
   })], 1) : _vm._e()], 1);
 };
 
-var __vue_staticRenderFns__$v = [];
+var __vue_staticRenderFns__$u = [];
 /* style */
 
-const __vue_inject_styles__$x = function (inject) {
+const __vue_inject_styles__$w = 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}",
@@ -867,23 +864,23 @@ const __vue_inject_styles__$x = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$x = "data-v-59cb538c";
+const __vue_scope_id__$w = "data-v-59cb538c";
 /* module identifier */
 
-const __vue_module_identifier__$x = undefined;
+const __vue_module_identifier__$w = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$x = false;
+const __vue_is_functional_template__$w = false;
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$W = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$v,
-  staticRenderFns: __vue_staticRenderFns__$v
-}, __vue_inject_styles__$x, __vue_script__$q, __vue_scope_id__$x, __vue_is_functional_template__$x, __vue_module_identifier__$x, false, createInjector, undefined, undefined);
+const __vue_component__$U = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$u,
+  staticRenderFns: __vue_staticRenderFns__$u
+}, __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__$X = __vue_component__$W;
+var __vue_component__$V = __vue_component__$U;
 
 //
 //
@@ -914,7 +911,7 @@ var __vue_component__$X = __vue_component__$W;
 //
 //
 //
-var script$p = {
+var script$o = {
   name: "NsCircleTimer",
   props: {
     timeLimit: {
@@ -978,10 +975,10 @@ var script$p = {
 };
 
 /* script */
-const __vue_script__$p = script$p;
+const __vue_script__$o = script$o;
 /* template */
 
-var __vue_render__$u = function () {
+var __vue_render__$t = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -1017,10 +1014,10 @@ var __vue_render__$u = function () {
   })])])]);
 };
 
-var __vue_staticRenderFns__$u = [];
+var __vue_staticRenderFns__$t = [];
 /* style */
 
-const __vue_inject_styles__$w = function (inject) {
+const __vue_inject_styles__$v = 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)}",
@@ -1031,26 +1028,26 @@ const __vue_inject_styles__$w = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$w = "data-v-79cb7082";
+const __vue_scope_id__$v = "data-v-79cb7082";
 /* module identifier */
 
-const __vue_module_identifier__$w = undefined;
+const __vue_module_identifier__$v = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$w = false;
+const __vue_is_functional_template__$v = 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__$w, __vue_script__$p, __vue_scope_id__$w, __vue_is_functional_template__$w, __vue_module_identifier__$w, false, createInjector, undefined, undefined);
+const __vue_component__$T = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$t,
+  staticRenderFns: __vue_staticRenderFns__$t
+}, __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 NsCircleTimer = __vue_component__$V;
+var NsCircleTimer = __vue_component__$T;
 
 //
-var script$o = {
+var script$n = {
   name: "NsInlineNotification",
   extends: CvInlineNotification,
   components: {
@@ -1087,10 +1084,10 @@ var script$o = {
 };
 
 /* script */
-const __vue_script__$o = script$o;
+const __vue_script__$n = script$n;
 /* template */
 
-var __vue_render__$t = function () {
+var __vue_render__$s = function () {
   var _obj;
 
   var _vm = this;
@@ -1161,10 +1158,10 @@ var __vue_render__$t = function () {
   })], 1) : _vm._e()]);
 };
 
-var __vue_staticRenderFns__$t = [];
+var __vue_staticRenderFns__$s = [];
 /* style */
 
-const __vue_inject_styles__$v = function (inject) {
+const __vue_inject_styles__$u = function (inject) {
   if (!inject) return;
   inject("data-v-59312d66_0", {
     source: ".title[data-v-59312d66]{margin-right:.75rem;margin-bottom:.2rem;font-size:.875rem!important;font-weight:600!important}.mg-right[data-v-59312d66]{margin-right:.75rem}.details[data-v-59312d66]{flex-grow:0}.action-button[data-v-59312d66]{margin-right:.5rem}.bx--inline-notification__close-button[data-v-59312d66]{position:absolute!important}.bx--inline-notification__text-wrapper p[data-v-59312d66]{padding-right:0!important}",
@@ -1175,23 +1172,23 @@ const __vue_inject_styles__$v = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$v = "data-v-59312d66";
+const __vue_scope_id__$u = "data-v-59312d66";
 /* module identifier */
 
-const __vue_module_identifier__$v = undefined;
+const __vue_module_identifier__$u = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$v = false;
+const __vue_is_functional_template__$u = false;
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$U = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$t,
-  staticRenderFns: __vue_staticRenderFns__$t
-}, __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__$S = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$s,
+  staticRenderFns: __vue_staticRenderFns__$s
+}, __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 NsInlineNotification = __vue_component__$U;
+var NsInlineNotification = __vue_component__$S;
 
 //
 //
@@ -1210,41 +1207,104 @@ var NsInlineNotification = __vue_component__$U;
 //
 //
 //
-var script$n = {
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var script$m = {
   name: "NsProgressBar",
   props: {
     value: {
       // a number between 0 and 100
-      type: Number,
+      type: [String, Number],
       default: 0
     },
     indeterminate: {
       type: Boolean,
       default: false
+    },
+    height: {
+      type: String,
+      default: "5px"
+    },
+    warningThreshold: {
+      type: Number,
+      default: 70
+    },
+    dangerThreshold: {
+      type: Number,
+      default: 90
+    },
+    useStatusColors: {
+      type: Boolean,
+      default: false
     }
   },
 
   data() {
     return {
-      progressLine: {
-        width: this.value + "%",
-        transition: "width 0.3s"
+      progressLineStyle: {
+        width: this.numericValue + "%",
+        transition: "width 0.3s",
+        height: this.height
+      },
+      heightStyle: {
+        height: this.height
       }
     };
   },
 
+  created() {
+    this.progressLineStyle.width = this.numericValue + "%";
+    this.heightStyle.height = this.height;
+  },
+
+  computed: {
+    numericValue() {
+      return Number(this.value) || 0;
+    },
+
+    healthyStatus() {
+      return this.useStatusColors && this.numericValue < this.warningThreshold;
+    },
+
+    warningStatus() {
+      return this.useStatusColors && this.numericValue >= this.warningThreshold && this.numericValue < this.dangerThreshold;
+    },
+
+    dangerStatus() {
+      return this.useStatusColors && this.numericValue >= this.dangerThreshold;
+    }
+
+  },
   watch: {
     value: function () {
-      this.progressLine.width = this.value + "%";
+      this.progressLineStyle.width = this.numericValue + "%";
     }
   }
 };
 
 /* script */
-const __vue_script__$n = script$n;
+const __vue_script__$m = script$m;
 /* template */
 
-var __vue_render__$s = function () {
+var __vue_render__$r = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -1252,30 +1312,44 @@ var __vue_render__$s = function () {
   var _c = _vm._self._c || _h;
 
   return _c('div', {
-    staticClass: "progress-bar-container"
+    staticClass: "progress-bar-container",
+    style: _vm.heightStyle
   }, [_c('div', {
-    staticClass: "slider"
+    staticClass: "slider",
+    style: _vm.heightStyle
   }, [_vm.indeterminate ? [_c('div', {
-    staticClass: "indeterminate-line"
+    staticClass: "indeterminate-line",
+    style: _vm.heightStyle
   }), _vm._v(" "), _c('div', {
-    staticClass: "indeterminate-subline inc"
+    staticClass: "indeterminate-subline inc",
+    style: _vm.heightStyle
   }), _vm._v(" "), _c('div', {
-    staticClass: "indeterminate-subline dec"
+    staticClass: "indeterminate-subline dec",
+    style: _vm.heightStyle
   })] : [_c('div', {
-    staticClass: "line"
+    class: ['line', {
+      healthy: _vm.healthyStatus,
+      warning: _vm.warningStatus,
+      danger: _vm.dangerStatus
+    }],
+    style: _vm.heightStyle
   }), _vm._v(" "), _c('div', {
-    staticClass: "progress-line",
-    style: _vm.progressLine
+    class: ['progress-line', {
+      healthy: _vm.healthyStatus,
+      warning: _vm.warningStatus,
+      danger: _vm.dangerStatus
+    }],
+    style: _vm.progressLineStyle
   })]], 2)]);
 };
 
-var __vue_staticRenderFns__$s = [];
+var __vue_staticRenderFns__$r = [];
 /* style */
 
-const __vue_inject_styles__$u = function (inject) {
+const __vue_inject_styles__$t = function (inject) {
   if (!inject) return;
-  inject("data-v-57532057_0", {
-    source: ".progress-bar-container[data-v-57532057]{width:100%;position:relative}.slider[data-v-57532057]{position:absolute;width:100%;height:5px;overflow-x:hidden}.line[data-v-57532057]{position:absolute;opacity:.4;width:100%;height:5px}.progress-line[data-v-57532057]{position:absolute;height:5px}.indeterminate-line[data-v-57532057]{position:absolute;opacity:.4;width:150%;height:5px}.indeterminate-subline[data-v-57532057]{position:absolute;height:5px}.inc[data-v-57532057]{animation:increase-data-v-57532057 2s infinite}.dec[data-v-57532057]{animation:decrease-data-v-57532057 2s .5s infinite}@keyframes increase-data-v-57532057{from{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease-data-v-57532057{from{left:-80%;width:80%}to{left:110%;width:10%}}",
+  inject("data-v-703889d8_0", {
+    source: ".progress-bar-container[data-v-703889d8]{width:100%;position:relative}.slider[data-v-703889d8]{position:absolute;width:100%;overflow-x:hidden}.line[data-v-703889d8]{position:absolute;opacity:.4;width:100%}.progress-line[data-v-703889d8]{position:absolute}.indeterminate-line[data-v-703889d8]{position:absolute;opacity:.4;width:150%}.indeterminate-subline[data-v-703889d8]{position:absolute}.inc[data-v-703889d8]{animation:increase-data-v-703889d8 2s infinite}.dec[data-v-703889d8]{animation:decrease-data-v-703889d8 2s .5s infinite}@keyframes increase-data-v-703889d8{from{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease-data-v-703889d8{from{left:-80%;width:80%}to{left:110%;width:10%}}",
     map: undefined,
     media: undefined
   });
@@ -1283,25 +1357,25 @@ const __vue_inject_styles__$u = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$u = "data-v-57532057";
+const __vue_scope_id__$t = "data-v-703889d8";
 /* module identifier */
 
-const __vue_module_identifier__$u = undefined;
+const __vue_module_identifier__$t = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$u = false;
+const __vue_is_functional_template__$t = false;
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$T = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$s,
-  staticRenderFns: __vue_staticRenderFns__$s
-}, __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__$R = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$r,
+  staticRenderFns: __vue_staticRenderFns__$r
+}, __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 NsProgressBar = __vue_component__$T;
+var NsProgressBar = __vue_component__$R;
 
-var script$m = {
+var script$l = {
   name: "NsSvg",
   props: {
     svg: {
@@ -1360,33 +1434,33 @@ var script$m = {
 };
 
 /* script */
-const __vue_script__$m = script$m;
+const __vue_script__$l = script$l;
 /* template */
 
 /* style */
 
-const __vue_inject_styles__$t = undefined;
+const __vue_inject_styles__$s = undefined;
 /* scoped */
 
-const __vue_scope_id__$t = undefined;
+const __vue_scope_id__$s = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$t = undefined;
+const __vue_module_identifier__$s = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$t = undefined;
+const __vue_is_functional_template__$s = undefined;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$S = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$t, __vue_script__$m, __vue_scope_id__$t, __vue_is_functional_template__$t, __vue_module_identifier__$t, false, undefined, undefined, undefined);
+const __vue_component__$Q = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$s, __vue_script__$l, __vue_scope_id__$s, __vue_is_functional_template__$s, __vue_module_identifier__$s, false, undefined, undefined, undefined);
 
-var NsSvg = __vue_component__$S;
+var NsSvg = __vue_component__$Q;
 
 //
-var script$l = {
+var script$k = {
   name: "NsTile",
   extends: CvTile,
   inheritAttrs: false,
@@ -1460,10 +1534,10 @@ var script$l = {
 };
 
 /* script */
-const __vue_script__$l = script$l;
+const __vue_script__$k = script$k;
 /* template */
 
-var __vue_render__$r = function () {
+var __vue_render__$q = function () {
   var _obj;
 
   var _vm = this;
@@ -1502,10 +1576,10 @@ var __vue_render__$r = function () {
   }) : _vm._e()], 1);
 };
 
-var __vue_staticRenderFns__$r = [];
+var __vue_staticRenderFns__$q = [];
 /* style */
 
-const __vue_inject_styles__$s = function (inject) {
+const __vue_inject_styles__$r = 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}",
@@ -1516,23 +1590,23 @@ const __vue_inject_styles__$s = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$s = "data-v-443a91f0";
+const __vue_scope_id__$r = "data-v-443a91f0";
 /* module identifier */
 
-const __vue_module_identifier__$s = undefined;
+const __vue_module_identifier__$r = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$s = false;
+const __vue_is_functional_template__$r = false;
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-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);
+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__$R = __vue_component__$Q;
+var __vue_component__$P = __vue_component__$O;
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -6129,7 +6203,7 @@ var DateTimeService = {
 };
 
 //
-var script$k = {
+var script$j = {
   name: "NsToastNotification",
   extends: CvToastNotification,
   components: {
@@ -6207,10 +6281,10 @@ var script$k = {
 };
 
 /* script */
-const __vue_script__$k = script$k;
+const __vue_script__$j = script$j;
 /* template */
 
-var __vue_render__$q = function () {
+var __vue_render__$p = function () {
   var _obj;
 
   var _vm = this;
@@ -6308,10 +6382,10 @@ var __vue_render__$q = function () {
   })], 1) : _vm._e()], 1)]);
 };
 
-var __vue_staticRenderFns__$q = [];
+var __vue_staticRenderFns__$p = [];
 /* style */
 
-const __vue_inject_styles__$r = function (inject) {
+const __vue_inject_styles__$q = 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}",
@@ -6326,26 +6400,26 @@ const __vue_inject_styles__$r = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$r = "data-v-6ff0b515";
+const __vue_scope_id__$q = "data-v-6ff0b515";
 /* module identifier */
 
-const __vue_module_identifier__$r = undefined;
+const __vue_module_identifier__$q = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$r = false;
+const __vue_is_functional_template__$q = 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__$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__$P = __vue_component__$O;
+var __vue_component__$N = __vue_component__$M;
 
 //
-var script$j = {
+var script$i = {
   name: "NsInfoCard",
   components: {
     NsSvg,
@@ -6396,10 +6470,10 @@ var script$j = {
 };
 
 /* script */
-const __vue_script__$j = script$j;
+const __vue_script__$i = script$i;
 /* template */
 
-var __vue_render__$p = function () {
+var __vue_render__$o = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -6456,10 +6530,10 @@ var __vue_render__$p = function () {
   }, [_vm.hasContentSlot ? _vm._t("content") : _vm._e()], 2)], 2);
 };
 
-var __vue_staticRenderFns__$p = [];
+var __vue_staticRenderFns__$o = [];
 /* style */
 
-const __vue_inject_styles__$q = function (inject) {
+const __vue_inject_styles__$p = 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}",
@@ -6470,26 +6544,26 @@ const __vue_inject_styles__$q = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$q = "data-v-aefc1c3e";
+const __vue_scope_id__$p = "data-v-aefc1c3e";
 /* module identifier */
 
-const __vue_module_identifier__$q = undefined;
+const __vue_module_identifier__$p = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$q = false;
+const __vue_is_functional_template__$p = 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__$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__$N = __vue_component__$M;
+var __vue_component__$L = __vue_component__$K;
 
 //
-var script$i = {
+var script$h = {
   name: "NsStatusCard",
   //components added for storybook to work
   components: {
@@ -6536,10 +6610,10 @@ var script$i = {
 };
 
 /* script */
-const __vue_script__$i = script$i;
+const __vue_script__$h = script$h;
 /* template */
 
-var __vue_render__$o = function () {
+var __vue_render__$n = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -6608,10 +6682,10 @@ var __vue_render__$o = function () {
   }, [_c('h4', [_vm._v(_vm._s(_vm.valueSuccess))])]) : _c('h4', [_vm._v(_vm._s(_vm.valueSuccess))])], 1) : _vm._e()])]);
 };
 
-var __vue_staticRenderFns__$o = [];
+var __vue_staticRenderFns__$n = [];
 /* style */
 
-const __vue_inject_styles__$p = function (inject) {
+const __vue_inject_styles__$o = 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}",
@@ -6622,26 +6696,26 @@ const __vue_inject_styles__$p = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$p = "data-v-496044f0";
+const __vue_scope_id__$o = "data-v-496044f0";
 /* module identifier */
 
-const __vue_module_identifier__$p = undefined;
+const __vue_module_identifier__$o = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$p = false;
+const __vue_is_functional_template__$o = 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__$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);
 
-var __vue_component__$L = __vue_component__$K;
+var __vue_component__$J = __vue_component__$I;
 
 //
-var script$h = {
+var script$g = {
   name: "NsSystemdServiceCard",
   //components added for storybook to work
   components: {
@@ -6695,10 +6769,10 @@ var script$h = {
 };
 
 /* script */
-const __vue_script__$h = script$h;
+const __vue_script__$g = script$g;
 /* template */
 
-var __vue_render__$n = function () {
+var __vue_render__$m = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -6753,10 +6827,10 @@ var __vue_render__$n = function () {
   })], 1)])]);
 };
 
-var __vue_staticRenderFns__$n = [];
+var __vue_staticRenderFns__$m = [];
 /* style */
 
-const __vue_inject_styles__$o = function (inject) {
+const __vue_inject_styles__$n = 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}",
@@ -6767,26 +6841,26 @@ const __vue_inject_styles__$o = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$o = "data-v-bf751eca";
+const __vue_scope_id__$n = "data-v-bf751eca";
 /* module identifier */
 
-const __vue_module_identifier__$o = undefined;
+const __vue_module_identifier__$n = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$o = false;
+const __vue_is_functional_template__$n = 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__$G = /*#__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__$J = __vue_component__$I;
+var __vue_component__$H = __vue_component__$G;
 
 //
-var script$g = {
+var script$f = {
   name: "NsTextInput",
   extends: CvTextInput,
   components: {
@@ -6841,10 +6915,10 @@ var script$g = {
 };
 
 /* script */
-const __vue_script__$g = script$g;
+const __vue_script__$f = script$f;
 /* template */
 
-var __vue_render__$m = function () {
+var __vue_render__$l = function () {
   var _obj, _obj$1, _obj$2, _obj$3, _obj$4, _obj$5;
 
   var _vm = this;
@@ -6926,16 +7000,16 @@ var __vue_render__$m = function () {
   })], 2) : _vm._e()]);
 };
 
-var __vue_staticRenderFns__$m = [];
+var __vue_staticRenderFns__$l = [];
 /* style */
 
-const __vue_inject_styles__$n = function (inject) {
+const __vue_inject_styles__$m = function (inject) {
   if (!inject) return;
-  inject("data-v-cf3198ba_0", {
-    source: ".tooltip[data-v-cf3198ba]{display:inline-block;position:absolute}.prefix[data-v-cf3198ba]{font-weight:700;margin-right:.5rem}.align-items-center[data-v-cf3198ba]{align-items:center}",
+  inject("data-v-eae7353a_0", {
+    source: ".tooltip[data-v-eae7353a]{display:inline-block;position:absolute}.prefix[data-v-eae7353a]{font-weight:700;margin-right:.5rem;color:#525252}.align-items-center[data-v-eae7353a]{align-items:center}",
     map: undefined,
     media: undefined
-  }), inject("data-v-cf3198ba_1", {
+  }), inject("data-v-eae7353a_1", {
     source: ".ns-text-input .bx--tooltip__label .bx--tooltip__trigger{margin-left:.25rem}",
     map: undefined,
     media: undefined
@@ -6944,23 +7018,23 @@ const __vue_inject_styles__$n = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$n = "data-v-cf3198ba";
+const __vue_scope_id__$m = "data-v-eae7353a";
 /* module identifier */
 
-const __vue_module_identifier__$n = undefined;
+const __vue_module_identifier__$m = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$n = false;
+const __vue_is_functional_template__$m = false;
 /* 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, createInjector, 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, createInjector, undefined, undefined);
 
-var NsTextInput = __vue_component__$H;
+var NsTextInput = __vue_component__$F;
 
 // Unique ID creation requires a high quality random # generator.  In node.js
 // this is pretty straight-forward - we use the crypto API.
@@ -7437,7 +7511,7 @@ var UtilService = {
 };
 
 //
-var script$f = {
+var script$e = {
   name: "NsPasswordInput",
   components: {
     NsTextInput
@@ -7602,10 +7676,10 @@ var script$f = {
 };
 
 /* script */
-const __vue_script__$f = script$f;
+const __vue_script__$e = script$e;
 /* template */
 
-var __vue_render__$l = function () {
+var __vue_render__$k = function () {
   var _vm = this;
 
   var _h = _vm.$createElement;
@@ -7700,10 +7774,10 @@ var __vue_render__$l = function () {
   }, [_vm._v(_vm._s(_vm.equalLabel))])])], 1)]);
 };
 
-var __vue_staticRenderFns__$l = [];
+var __vue_staticRenderFns__$k = [];
 /* style */
 
-const __vue_inject_styles__$m = function (inject) {
+const __vue_inject_styles__$l = 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}",
@@ -7714,26 +7788,26 @@ const __vue_inject_styles__$m = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$m = "data-v-67b93b40";
+const __vue_scope_id__$l = "data-v-67b93b40";
 /* module identifier */
 
-const __vue_module_identifier__$m = undefined;
+const __vue_module_identifier__$l = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$m = false;
+const __vue_is_functional_template__$l = 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__$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, createInjector, undefined, undefined);
 
-var __vue_component__$G = __vue_component__$F;
+var __vue_component__$E = __vue_component__$D;
 
 //
-var script$e = {
+var script$d = {
   name: "NsIconMenu",
   extends: CvOverflowMenu,
   props: {
@@ -7777,10 +7851,10 @@ var script$e = {
 };
 
 /* script */
-const __vue_script__$e = script$e;
+const __vue_script__$d = script$d;
 /* template */
 
-var __vue_render__$k = function () {
+var __vue_render__$j = function () {
   var _obj, _obj$1;
 
   var _vm = this;
@@ -7896,10 +7970,10 @@ var __vue_render__$k = function () {
   })])]);
 };
 
-var __vue_staticRenderFns__$k = [];
+var __vue_staticRenderFns__$j = [];
 /* style */
 
-const __vue_inject_styles__$l = function (inject) {
+const __vue_inject_styles__$k = function (inject) {
   if (!inject) return;
   inject("data-v-2be14df6_0", {
     source: ".ns-icon-menu[data-v-2be14df6]{display:inline-flex}",
@@ -7910,199 +7984,57 @@ const __vue_inject_styles__$l = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$l = "data-v-2be14df6";
+const __vue_scope_id__$k = "data-v-2be14df6";
 /* module identifier */
 
-const __vue_module_identifier__$l = undefined;
+const __vue_module_identifier__$k = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$l = false;
+const __vue_is_functional_template__$k = false;
 /* 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, createInjector, undefined, undefined);
+const __vue_component__$B = /*#__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__$E = __vue_component__$D;
+var __vue_component__$C = __vue_component__$B;
 
 //
-Vue.use(chartsVue);
-var script$d = {
+var script$c = {
   name: "NsMeterChart",
   components: {
-    CcvMeterChart
+    NsProgressBar
   },
   props: {
-    title: {
-      type: String,
-      default: ""
-    },
     label: {
       type: String,
-      default: ""
+      required: true
     },
     value: {
-      type: Number,
+      type: [String, Number],
       default: 0
     },
-    warningTh: {
-      type: Number,
-      default: 70
-    },
-    dangerTh: {
-      type: Number,
-      default: 90
-    },
-    height: {
-      type: String,
-      default: "6rem"
-    }
-  },
-
-  data() {
-    return {
-      data: [],
-      options: {}
-    };
-  },
-
-  watch: {
-    value: function () {
-      this.data[0].value = this.value;
-    }
-  },
-
-  created() {
-    this.data = [{
-      group: this.label,
-      value: this.value
-    }];
-    this.options = {
-      title: this.title,
-      meter: {
-        peak: null,
-        status: {
-          ranges: [{
-            range: [0, this.warningTh],
-            status: "success"
-          }, {
-            range: [this.warningTh, this.dangerTh],
-            status: "warning"
-          }, {
-            range: [this.dangerTh, 100],
-            status: "danger"
-          }]
-        }
-      },
-      height: this.height
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__$d = script$d;
-/* template */
-
-var __vue_render__$j = function () {
-  var _vm = this;
-
-  var _h = _vm.$createElement;
-
-  var _c = _vm._self._c || _h;
-
-  return _c('ccv-meter-chart', {
-    attrs: {
-      "data": _vm.data,
-      "options": _vm.options
-    }
-  });
-};
-
-var __vue_staticRenderFns__$j = [];
-/* style */
-
-const __vue_inject_styles__$k = undefined;
-/* scoped */
-
-const __vue_scope_id__$k = undefined;
-/* module identifier */
-
-const __vue_module_identifier__$k = undefined;
-/* functional template */
-
-const __vue_is_functional_template__$k = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__$B = /*#__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, undefined, undefined, undefined);
-
-var __vue_component__$C = __vue_component__$B;
-
-//
-Vue.use(chartsVue);
-var script$c = {
-  name: "NsPieChart",
-  components: {},
-  props: {
-    data: Array,
     loading: {
       type: Boolean,
       default: false
     },
-    title: {
+    progressBarHeight: {
       type: String,
-      default: ""
+      default: "10px"
     },
-    height: {
-      type: String,
-      default: "18rem"
-    }
-  },
-
-  data() {
-    return {
-      options: {}
-    };
-  },
-
-  watch: {
-    loading: function () {
-      if (this.loading) {
-        // show skeleton
-        this.options.data.loading = true;
-      } else {
-        this.options.data.loading = false;
-      }
+    // default value of following props is defined in NsProgressBar
+    warningThreshold: {
+      type: Number,
+      default: undefined
+    },
+    dangerThreshold: {
+      type: Number,
+      default: undefined
     }
-  },
-
-  created() {
-    this.options = {
-      title: this.title,
-      resizable: true,
-      // legend: { ////
-      //   alignment: "center",
-      // },
-      // pie: {
-      //   alignment: "center",
-      // },
-      data: {
-        loading: this.loading
-      },
-      height: this.height
-    };
   }
-
 };
 
 /* script */
@@ -8116,29 +8048,43 @@ var __vue_render__$i = function () {
 
   var _c = _vm._self._c || _h;
 
-  return _c('ccv-pie-chart', {
+  return _c('div', [_c('div', {
+    staticClass: "mg-bottom-sm"
+  }, [_c('span', {
+    staticClass: "label"
+  }, [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _c('span', [_vm._v(_vm._s(_vm.loading || Number.isNaN(Number(_vm.value)) ? "-" : _vm.value + "%"))])]), _vm._v(" "), _c('NsProgressBar', {
     attrs: {
-      "data": _vm.data,
-      "options": _vm.options
+      "value": _vm.value,
+      "indeterminate": _vm.loading,
+      "useStatusColors": true,
+      "warningThreshold": _vm.warningThreshold,
+      "dangerThreshold": _vm.dangerThreshold,
+      "height": _vm.progressBarHeight
     }
-  });
+  })], 1);
 };
 
 var __vue_staticRenderFns__$i = [];
 /* style */
 
-const __vue_inject_styles__$j = undefined;
+const __vue_inject_styles__$j = 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}",
+    map: undefined,
+    media: undefined
+  });
+};
 /* scoped */
 
-const __vue_scope_id__$j = undefined;
+
+const __vue_scope_id__$j = "data-v-8d83456c";
 /* module identifier */
 
 const __vue_module_identifier__$j = undefined;
 /* functional template */
 
 const __vue_is_functional_template__$j = false;
-/* style inject */
-
 /* style inject SSR */
 
 /* style inject shadow dom */
@@ -8146,7 +8092,7 @@ const __vue_is_functional_template__$j = false;
 const __vue_component__$z = /*#__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);
+}, __vue_inject_styles__$j, __vue_script__$c, __vue_scope_id__$j, __vue_is_functional_template__$j, __vue_module_identifier__$j, false, createInjector, undefined, undefined);
 
 var __vue_component__$A = __vue_component__$z;
 
@@ -18571,21 +18517,20 @@ var filters = {
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
   NsButton: NsButton,
-  NsEmptyState: __vue_component__$Z,
+  NsEmptyState: __vue_component__$X,
   NsPictogram: NsPictogram,
-  NsCodeSnippet: __vue_component__$X,
+  NsCodeSnippet: __vue_component__$V,
   NsInlineNotification: NsInlineNotification,
   NsProgressBar: NsProgressBar,
   NsSvg: NsSvg,
-  NsTile: __vue_component__$R,
-  NsToastNotification: __vue_component__$P,
-  NsInfoCard: __vue_component__$N,
-  NsStatusCard: __vue_component__$L,
-  NsSystemdServiceCard: __vue_component__$J,
-  NsPasswordInput: __vue_component__$G,
-  NsIconMenu: __vue_component__$E,
-  NsMeterChart: __vue_component__$C,
-  NsPieChart: __vue_component__$A,
+  NsTile: __vue_component__$P,
+  NsToastNotification: __vue_component__$N,
+  NsInfoCard: __vue_component__$L,
+  NsStatusCard: __vue_component__$J,
+  NsSystemdServiceCard: __vue_component__$H,
+  NsPasswordInput: __vue_component__$E,
+  NsIconMenu: __vue_component__$C,
+  NsMeterChart: __vue_component__$A,
   NsLottieAnimation: NsLottieAnimation,
   NsDangerDeleteModal: __vue_component__$x,
   NsCircleTimer: NsCircleTimer,
@@ -18627,4 +18572,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__$s as NsBackupCard, NsButton, NsCircleTimer, __vue_component__$X as NsCodeSnippet, __vue_component__$x as NsDangerDeleteModal, __vue_component__$f as NsDataTable, __vue_component__$v as NsDropdownAction, __vue_component__$Z as NsEmptyState, __vue_component__$E as NsIconMenu, __vue_component__$N as NsInfoCard, NsInlineNotification, NsLottieAnimation, __vue_component__$m as NsMenuDivider, __vue_component__$o as NsMenuItem, __vue_component__$C as NsMeterChart, NsModal, NsPagination, __vue_component__$G as NsPasswordInput, NsPictogram, __vue_component__$A as NsPieChart, NsProgressBar, __vue_component__$L as NsStatusCard, NsSvg, __vue_component__$k as NsSystemLogsCard, __vue_component__$J as NsSystemdServiceCard, NsTextInput, __vue_component__$R as NsTile, __vue_component__$i as NsTimePicker, __vue_component__$P as NsToastNotification, __vue_component__$q 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__$s as NsBackupCard, NsButton, NsCircleTimer, __vue_component__$V as NsCodeSnippet, __vue_component__$x as NsDangerDeleteModal, __vue_component__$f as NsDataTable, __vue_component__$v as NsDropdownAction, __vue_component__$X as NsEmptyState, __vue_component__$C as NsIconMenu, __vue_component__$L as NsInfoCard, NsInlineNotification, NsLottieAnimation, __vue_component__$m as NsMenuDivider, __vue_component__$o as NsMenuItem, __vue_component__$A as NsMeterChart, NsModal, NsPagination, __vue_component__$E as NsPasswordInput, NsPictogram, NsProgressBar, __vue_component__$J as NsStatusCard, NsSvg, __vue_component__$k as NsSystemLogsCard, __vue_component__$H as NsSystemdServiceCard, NsTextInput, __vue_component__$P as NsTile, __vue_component__$i as NsTimePicker, __vue_component__$N as NsToastNotification, __vue_component__$q 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 };