npm - @nethserver/ns8-ui-lib - Versions diffs - 0.0.44 → 0.0.48 - Mend

@nethserver/ns8-ui-lib 0.0.44 → 0.0.48

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 (13) hide show

package/dist/ns8-ui-lib.esm.js +871 -369
package/dist/ns8-ui-lib.min.js +1 -1
package/dist/ns8-ui-lib.ssr.js +747 -370
package/package.json +1 -1
package/src/lib-components/NsBackupCard.vue +98 -114
package/src/lib-components/NsBackupCardDetails.vue +136 -0
package/src/lib-components/NsInlineNotification.vue +5 -0
package/src/lib-components/NsMenuDivider.vue +14 -0
package/src/lib-components/NsMenuItem.vue +57 -0
package/src/lib-components/NsPasswordInput.vue +35 -6
package/src/lib-components/NsTextInput.vue +1 -1
package/src/lib-components/NsTile.vue +11 -0
package/src/lib-components/NsWizard.vue +126 -0

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

@@ -1,4 +1,4 @@
-import { CvButton, CvIconButton, CvInlineNotification, CvTile, CvToastNotification, CvLink, CvTooltip, CvTag, CvTextInput, CvOverflowMenu } from '@carbon/vue';
+import { CvButton, CvIconButton, CvInlineNotification, CvTile, CvToastNotification, CvLink, CvTooltip, CvTag, CvTextInput, CvOverflowMenu, CvModal } from '@carbon/vue';
 import LottieAnimation from 'lottie-web-vue';
 import Copy20 from '@carbon/icons-vue/es/copy/20';
 import ChevronDown20 from '@carbon/icons-vue/es/chevron--down/20';
@@ -73,11 +73,15 @@ import ErrorFilled16 from '@carbon/icons-vue/es/error--filled/16';
 import ErrorFilled32 from '@carbon/icons-vue/es/error--filled/32';
 import Warning16 from '@carbon/icons-vue/es/warning--filled/16';
 import Warning32 from '@carbon/icons-vue/es/warning--filled/32';
+import Power20 from '@carbon/icons-vue/es/power/20';
+import Power32 from '@carbon/icons-vue/es/power/32';
 import { WarningFilled16, WarningAltFilled16, View16, ViewOff16 } from '@carbon/icons-vue';
+import TrashCan20 from '@carbon/icons-vue/es/trash-can/20';
+import CvSideNavDivider from '@carbon/vue/src/components/cv-ui-shell/cv-side-nav-divider.vue';
 import InformationFilled16 from '@carbon/icons-vue/es/information--filled/16';
 //
-var script$l = {
+var script$p = {
   name: "NsButton",
   extends: CvButton,
   props: {
@@ -240,10 +244,10 @@ function addStyle(id, css) {
 }
 /* script */
-const __vue_script__$l = script$l;
+const __vue_script__$p = script$p;
 /* template */
-var __vue_render__$r = function () {
+var __vue_render__$v = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -266,10 +270,10 @@ var __vue_render__$r = function () {
   }) : _vm._e()], 2);
 };
-var __vue_staticRenderFns__$r = [];
+var __vue_staticRenderFns__$v = [];
 /* style */
-const __vue_inject_styles__$s = function (inject) {
+const __vue_inject_styles__$w = 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)}}",
@@ -280,23 +284,23 @@ const __vue_inject_styles__$s = function (inject) {
 /* scoped */
-const __vue_scope_id__$s = "data-v-025b0f12";
+const __vue_scope_id__$w = "data-v-025b0f12";
 /* module identifier */
-const __vue_module_identifier__$s = undefined;
+const __vue_module_identifier__$w = undefined;
 /* functional template */
-const __vue_is_functional_template__$s = false;
+const __vue_is_functional_template__$w = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$N = /*#__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__$U = /*#__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__$O = __vue_component__$N;
+var __vue_component__$V = __vue_component__$U;
 //
 //
@@ -314,7 +318,7 @@ var __vue_component__$O = __vue_component__$N;
 //
 //
 //
-var script$k = {
+var script$o = {
   name: "NsPictogram",
   props: {
     title: {
@@ -337,10 +341,10 @@ var script$k = {
 };
 /* script */
-const __vue_script__$k = script$k;
+const __vue_script__$o = script$o;
 /* template */
-var __vue_render__$q = function () {
+var __vue_render__$u = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -368,34 +372,34 @@ var __vue_render__$q = function () {
   }, [_vm._t("default")], 2)]);
 };
-var __vue_staticRenderFns__$q = [];
+var __vue_staticRenderFns__$u = [];
 /* style */
-const __vue_inject_styles__$r = undefined;
+const __vue_inject_styles__$v = undefined;
 /* scoped */
-const __vue_scope_id__$r = undefined;
+const __vue_scope_id__$v = undefined;
 /* module identifier */
-const __vue_module_identifier__$r = undefined;
+const __vue_module_identifier__$v = undefined;
 /* functional template */
-const __vue_is_functional_template__$r = false;
+const __vue_is_functional_template__$v = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$M = /*#__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, undefined, undefined, undefined);
+const __vue_component__$T = /*#__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, undefined, undefined, undefined);
-var NsPictogram = __vue_component__$M;
+var NsPictogram = __vue_component__$T;
 //
-var script$j = {
+var script$n = {
   name: "NsLottieAnimation",
   components: {
     LottieAnimation
@@ -451,10 +455,10 @@ var script$j = {
 };
 /* script */
-const __vue_script__$j = script$j;
+const __vue_script__$n = script$n;
 /* template */
-var __vue_render__$p = function () {
+var __vue_render__$t = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -481,36 +485,36 @@ var __vue_render__$p = function () {
   })], 1);
 };
-var __vue_staticRenderFns__$p = [];
+var __vue_staticRenderFns__$t = [];
 /* style */
-const __vue_inject_styles__$q = undefined;
+const __vue_inject_styles__$u = undefined;
 /* scoped */
-const __vue_scope_id__$q = "data-v-14e97a70";
+const __vue_scope_id__$u = "data-v-14e97a70";
 /* module identifier */
-const __vue_module_identifier__$q = undefined;
+const __vue_module_identifier__$u = undefined;
 /* functional template */
-const __vue_is_functional_template__$q = false;
+const __vue_is_functional_template__$u = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$L = /*#__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, undefined, undefined, undefined);
+const __vue_component__$S = /*#__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, undefined, undefined, undefined);
-var NsLottieAnimation = __vue_component__$L;
+var NsLottieAnimation = __vue_component__$S;
 /* script */
 /* template */
-var __vue_render__$o = function () {
+var __vue_render__$s = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -525,34 +529,34 @@ var __vue_render__$o = function () {
   });
 };
-var __vue_staticRenderFns__$o = [];
+var __vue_staticRenderFns__$s = [];
 /* style */
-const __vue_inject_styles__$p = undefined;
+const __vue_inject_styles__$t = undefined;
 /* scoped */
-const __vue_scope_id__$p = undefined;
+const __vue_scope_id__$t = undefined;
 /* module identifier */
-const __vue_module_identifier__$p = undefined;
+const __vue_module_identifier__$t = undefined;
 /* functional template */
-const __vue_is_functional_template__$p = false;
+const __vue_is_functional_template__$t = false;
 /* style inject */
 /* 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_scope_id__$p, __vue_is_functional_template__$p, __vue_module_identifier__$p, false, undefined, undefined, undefined);
+const __vue_component__$R = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$s,
+  staticRenderFns: __vue_staticRenderFns__$s
+}, __vue_inject_styles__$t, {}, __vue_scope_id__$t, __vue_is_functional_template__$t, __vue_module_identifier__$t, false, undefined, undefined, undefined);
-var ExclamationMark = __vue_component__$K;
+var ExclamationMark = __vue_component__$R;
 //
-var script$i = {
+var script$m = {
   name: "NsEmptyState",
   components: {
     NsPictogram,
@@ -584,10 +588,10 @@ var script$i = {
 };
 /* script */
-const __vue_script__$i = script$i;
+const __vue_script__$m = script$m;
 /* template */
-var __vue_render__$n = function () {
+var __vue_render__$r = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -617,10 +621,10 @@ var __vue_render__$n = function () {
   }, [_vm._t("description")], 2)] : _vm._e()], 2);
 };
-var __vue_staticRenderFns__$n = [];
+var __vue_staticRenderFns__$r = [];
 /* style */
-const __vue_inject_styles__$o = function (inject) {
+const __vue_inject_styles__$s = function (inject) {
   if (!inject) return;
   inject("data-v-d5a46c1c_0", {
     source: ".empty-state[data-v-d5a46c1c]{text-align:center;padding:2rem}.empty-state .image[data-v-d5a46c1c]{margin-bottom:1rem}.empty-state .description[data-v-d5a46c1c]{margin-top:1rem}.animation[data-v-d5a46c1c]{display:inline-block;width:64px;height:64px}",
@@ -631,26 +635,26 @@ const __vue_inject_styles__$o = function (inject) {
 /* scoped */
-const __vue_scope_id__$o = "data-v-d5a46c1c";
+const __vue_scope_id__$s = "data-v-d5a46c1c";
 /* module identifier */
-const __vue_module_identifier__$o = undefined;
+const __vue_module_identifier__$s = undefined;
 /* functional template */
-const __vue_is_functional_template__$o = false;
+const __vue_is_functional_template__$s = 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__$i, __vue_scope_id__$o, __vue_is_functional_template__$o, __vue_module_identifier__$o, false, createInjector, undefined, undefined);
+const __vue_component__$P = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$r,
+  staticRenderFns: __vue_staticRenderFns__$r
+}, __vue_inject_styles__$s, __vue_script__$m, __vue_scope_id__$s, __vue_is_functional_template__$s, __vue_module_identifier__$s, false, createInjector, undefined, undefined);
-var __vue_component__$J = __vue_component__$I;
+var __vue_component__$Q = __vue_component__$P;
 //
-var script$h = {
+var script$l = {
   name: "NsCodeSnippet",
   components: {
     CvButton,
@@ -762,10 +766,10 @@ var script$h = {
 };
 /* script */
-const __vue_script__$h = script$h;
+const __vue_script__$l = script$l;
 /* template */
-var __vue_render__$m = function () {
+var __vue_render__$q = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -827,10 +831,10 @@ var __vue_render__$m = function () {
   })], 1) : _vm._e()], 1);
 };
-var __vue_staticRenderFns__$m = [];
+var __vue_staticRenderFns__$q = [];
 /* style */
-const __vue_inject_styles__$n = function (inject) {
+const __vue_inject_styles__$r = 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}",
@@ -841,23 +845,23 @@ const __vue_inject_styles__$n = function (inject) {
 /* scoped */
-const __vue_scope_id__$n = "data-v-59cb538c";
+const __vue_scope_id__$r = "data-v-59cb538c";
 /* module identifier */
-const __vue_module_identifier__$n = undefined;
+const __vue_module_identifier__$r = undefined;
 /* functional template */
-const __vue_is_functional_template__$n = false;
+const __vue_is_functional_template__$r = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$G = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$m,
-  staticRenderFns: __vue_staticRenderFns__$m
-}, __vue_inject_styles__$n, __vue_script__$h, __vue_scope_id__$n, __vue_is_functional_template__$n, __vue_module_identifier__$n, false, createInjector, undefined, undefined);
+const __vue_component__$N = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$q,
+  staticRenderFns: __vue_staticRenderFns__$q
+}, __vue_inject_styles__$r, __vue_script__$l, __vue_scope_id__$r, __vue_is_functional_template__$r, __vue_module_identifier__$r, false, createInjector, undefined, undefined);
-var __vue_component__$H = __vue_component__$G;
+var __vue_component__$O = __vue_component__$N;
 //
 //
@@ -888,7 +892,7 @@ var __vue_component__$H = __vue_component__$G;
 //
 //
 //
-var script$g = {
+var script$k = {
   name: "NsCircleTimer",
   props: {
     timeLimit: {
@@ -948,10 +952,10 @@ var script$g = {
 };
 /* script */
-const __vue_script__$g = script$g;
+const __vue_script__$k = script$k;
 /* template */
-var __vue_render__$l = function () {
+var __vue_render__$p = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -987,10 +991,10 @@ var __vue_render__$l = function () {
   })])])]);
 };
-var __vue_staticRenderFns__$l = [];
+var __vue_staticRenderFns__$p = [];
 /* style */
-const __vue_inject_styles__$m = function (inject) {
+const __vue_inject_styles__$q = function (inject) {
   if (!inject) return;
   inject("data-v-45b59790_0", {
     source: ".base-timer[data-v-45b59790]{position:relative}.base-timer__circle[data-v-45b59790]{fill:none;stroke:none}.base-timer__path-remaining[data-v-45b59790]{stroke:currentColor;transform:rotate(90deg);transform-origin:center;transition:1s linear all}.base-timer__svg[data-v-45b59790]{transform:scaleX(-1)}",
@@ -1001,26 +1005,26 @@ const __vue_inject_styles__$m = function (inject) {
 /* scoped */
-const __vue_scope_id__$m = "data-v-45b59790";
+const __vue_scope_id__$q = "data-v-45b59790";
 /* module identifier */
-const __vue_module_identifier__$m = undefined;
+const __vue_module_identifier__$q = undefined;
 /* functional template */
-const __vue_is_functional_template__$m = false;
+const __vue_is_functional_template__$q = 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__$g, __vue_scope_id__$m, __vue_is_functional_template__$m, __vue_module_identifier__$m, false, createInjector, undefined, undefined);
+const __vue_component__$M = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$p,
+  staticRenderFns: __vue_staticRenderFns__$p
+}, __vue_inject_styles__$q, __vue_script__$k, __vue_scope_id__$q, __vue_is_functional_template__$q, __vue_module_identifier__$q, false, createInjector, undefined, undefined);
-var NsCircleTimer = __vue_component__$F;
+var NsCircleTimer = __vue_component__$M;
 //
-var script$f = {
+var script$j = {
   name: "NsInlineNotification",
   extends: CvInlineNotification,
   components: {
@@ -1057,10 +1061,10 @@ var script$f = {
 };
 /* script */
-const __vue_script__$f = script$f;
+const __vue_script__$j = script$j;
 /* template */
-var __vue_render__$k = function () {
+var __vue_render__$o = function () {
   var _obj;
   var _vm = this;
@@ -1105,7 +1109,7 @@ var __vue_render__$k = function () {
       "color": "white"
     }
   })], 1) : _vm._e()])], 1), _vm._v(" "), _vm.actionLabel ? _c('button', {
-    class: [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", _vm.carbonPrefix + "--btn--ghost"],
+    class: [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", _vm.carbonPrefix + "--btn--ghost", 'action-button'],
     attrs: {
       "type": "button"
     },
@@ -1131,13 +1135,13 @@ var __vue_render__$k = function () {
   })], 1) : _vm._e()]);
 };
-var __vue_staticRenderFns__$k = [];
+var __vue_staticRenderFns__$o = [];
 /* style */
-const __vue_inject_styles__$l = function (inject) {
+const __vue_inject_styles__$p = function (inject) {
   if (!inject) return;
-  inject("data-v-1e5d2ff7_0", {
-    source: ".title[data-v-1e5d2ff7]{margin-right:.75rem;margin-bottom:.2rem;font-size:.875rem!important;font-weight:600!important}.mg-right[data-v-1e5d2ff7]{margin-right:.75rem}.details[data-v-1e5d2ff7]{flex-grow:0}.bx--inline-notification__close-button[data-v-1e5d2ff7]{position:absolute!important}.bx--inline-notification__text-wrapper p[data-v-1e5d2ff7]{padding-right:0!important}",
+  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}",
     map: undefined,
     media: undefined
   });
@@ -1145,23 +1149,23 @@ const __vue_inject_styles__$l = function (inject) {
 /* scoped */
-const __vue_scope_id__$l = "data-v-1e5d2ff7";
+const __vue_scope_id__$p = "data-v-59312d66";
 /* module identifier */
-const __vue_module_identifier__$l = undefined;
+const __vue_module_identifier__$p = undefined;
 /* functional template */
-const __vue_is_functional_template__$l = false;
+const __vue_is_functional_template__$p = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$E = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$k,
-  staticRenderFns: __vue_staticRenderFns__$k
-}, __vue_inject_styles__$l, __vue_script__$f, __vue_scope_id__$l, __vue_is_functional_template__$l, __vue_module_identifier__$l, false, createInjector, undefined, undefined);
+const __vue_component__$L = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$o,
+  staticRenderFns: __vue_staticRenderFns__$o
+}, __vue_inject_styles__$p, __vue_script__$j, __vue_scope_id__$p, __vue_is_functional_template__$p, __vue_module_identifier__$p, false, createInjector, undefined, undefined);
-var NsInlineNotification = __vue_component__$E;
+var NsInlineNotification = __vue_component__$L;
 //
 //
@@ -1180,7 +1184,7 @@ var NsInlineNotification = __vue_component__$E;
 //
 //
 //
-var script$e = {
+var script$i = {
   name: "NsProgressBar",
   props: {
     value: {
@@ -1211,10 +1215,10 @@ var script$e = {
 };
 /* script */
-const __vue_script__$e = script$e;
+const __vue_script__$i = script$i;
 /* template */
-var __vue_render__$j = function () {
+var __vue_render__$n = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -1239,10 +1243,10 @@ var __vue_render__$j = function () {
   })]], 2)]);
 };
-var __vue_staticRenderFns__$j = [];
+var __vue_staticRenderFns__$n = [];
 /* style */
-const __vue_inject_styles__$k = function (inject) {
+const __vue_inject_styles__$o = function (inject) {
   if (!inject) return;
   inject("data-v-2bcd6519_0", {
     source: ".progress-bar-container[data-v-2bcd6519]{width:100%;position:relative}.slider[data-v-2bcd6519]{position:absolute;width:100%;height:5px;overflow-x:hidden}.line[data-v-2bcd6519]{position:absolute;opacity:.4;width:100%;height:5px}.progress-line[data-v-2bcd6519]{position:absolute;height:5px}.indeterminate-line[data-v-2bcd6519]{position:absolute;opacity:.4;width:150%;height:5px}.indeterminate-subline[data-v-2bcd6519]{position:absolute;height:5px}.inc[data-v-2bcd6519]{animation:increase-data-v-2bcd6519 2s infinite}.dec[data-v-2bcd6519]{animation:decrease-data-v-2bcd6519 2s .5s infinite}@keyframes increase-data-v-2bcd6519{from{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease-data-v-2bcd6519{from{left:-80%;width:80%}to{left:110%;width:10%}}",
@@ -1253,25 +1257,25 @@ const __vue_inject_styles__$k = function (inject) {
 /* scoped */
-const __vue_scope_id__$k = "data-v-2bcd6519";
+const __vue_scope_id__$o = "data-v-2bcd6519";
 /* module identifier */
-const __vue_module_identifier__$k = undefined;
+const __vue_module_identifier__$o = undefined;
 /* functional template */
-const __vue_is_functional_template__$k = false;
+const __vue_is_functional_template__$o = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$D = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$j,
-  staticRenderFns: __vue_staticRenderFns__$j
-}, __vue_inject_styles__$k, __vue_script__$e, __vue_scope_id__$k, __vue_is_functional_template__$k, __vue_module_identifier__$k, false, createInjector, undefined, undefined);
+const __vue_component__$K = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$n,
+  staticRenderFns: __vue_staticRenderFns__$n
+}, __vue_inject_styles__$o, __vue_script__$i, __vue_scope_id__$o, __vue_is_functional_template__$o, __vue_module_identifier__$o, false, createInjector, undefined, undefined);
-var NsProgressBar = __vue_component__$D;
+var NsProgressBar = __vue_component__$K;
-var script$d = {
+var script$h = {
   name: "NsSvg",
   props: {
     svg: {
@@ -1330,33 +1334,33 @@ var script$d = {
 };
 /* script */
-const __vue_script__$d = script$d;
+const __vue_script__$h = script$h;
 /* template */
 /* style */
-const __vue_inject_styles__$j = undefined;
+const __vue_inject_styles__$n = undefined;
 /* scoped */
-const __vue_scope_id__$j = undefined;
+const __vue_scope_id__$n = undefined;
 /* module identifier */
-const __vue_module_identifier__$j = undefined;
+const __vue_module_identifier__$n = undefined;
 /* functional template */
-const __vue_is_functional_template__$j = undefined;
+const __vue_is_functional_template__$n = undefined;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$C = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$j, __vue_script__$d, __vue_scope_id__$j, __vue_is_functional_template__$j, __vue_module_identifier__$j, false, undefined, undefined, undefined);
+const __vue_component__$J = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$n, __vue_script__$h, __vue_scope_id__$n, __vue_is_functional_template__$n, __vue_module_identifier__$n, false, undefined, undefined, undefined);
-var NsSvg = __vue_component__$C;
+var NsSvg = __vue_component__$J;
 //
-var script$c = {
+var script$g = {
   name: "NsTile",
   extends: CvTile,
   inheritAttrs: false,
@@ -1404,10 +1408,16 @@ var script$c = {
     },
     centered: Boolean,
     large: Boolean,
-    light: Boolean
+    light: Boolean,
+    disabled: Boolean
   },
   computed: {
     tagType() {
+      if (this.disabled) {
+        // not selectable nor clickable
+        return "cv-tile-standard";
+      }
       switch (this.kind) {
         case "clickable":
           return "cv-tile-clickable";
@@ -1424,10 +1434,10 @@ var script$c = {
 };
 /* script */
-const __vue_script__$c = script$c;
+const __vue_script__$g = script$g;
 /* template */
-var __vue_render__$i = function () {
+var __vue_render__$m = function () {
   var _obj;
   var _vm = this;
@@ -1441,6 +1451,8 @@ var __vue_render__$i = function () {
     tag: "component",
     class: ["cv-tile " + _vm.carbonPrefix + "--tile", (_obj = {}, _obj[_vm.carbonPrefix + "--tile--light"] = _vm.isLight, _obj), 'ns-tile', {
       'pad-bottom': _vm.footerIcon
+    }, {
+      'disabled-tile': _vm.disabled
     }],
     attrs: {
       "checked": _vm.selected,
@@ -1464,13 +1476,13 @@ var __vue_render__$i = function () {
   }) : _vm._e()], 1);
 };
-var __vue_staticRenderFns__$i = [];
+var __vue_staticRenderFns__$m = [];
 /* style */
-const __vue_inject_styles__$i = function (inject) {
+const __vue_inject_styles__$m = function (inject) {
   if (!inject) return;
-  inject("data-v-bbf09f9e_0", {
-    source: ".ns-tile[data-v-bbf09f9e]{margin-bottom:2rem}.container[data-v-bbf09f9e]{display:flex;flex-direction:column;justify-content:center}.centered[data-v-bbf09f9e]{text-align:center}.large[data-v-bbf09f9e]{min-height:10rem}.tile-icon[data-v-bbf09f9e]{display:block;margin-left:auto;margin-right:auto;margin-bottom:1rem}.tile-footer-icon[data-v-bbf09f9e]{position:absolute;right:1rem;bottom:1rem;flex-shrink:0;width:1.25rem;height:1.25rem}.pad-bottom[data-v-bbf09f9e]{padding-bottom:4rem}",
+  inject("data-v-fd6b91dc_0", {
+    source: ".ns-tile[data-v-fd6b91dc]{margin-bottom:2rem}.container[data-v-fd6b91dc]{display:flex;flex-direction:column;justify-content:center}.centered[data-v-fd6b91dc]{text-align:center}.large[data-v-fd6b91dc]{min-height:10rem}.tile-icon[data-v-fd6b91dc]{display:block;margin-left:auto;margin-right:auto;margin-bottom:1rem}.tile-footer-icon[data-v-fd6b91dc]{position:absolute;right:1rem;bottom:1rem;flex-shrink:0;width:1.25rem;height:1.25rem}.pad-bottom[data-v-fd6b91dc]{padding-bottom:4rem}.disabled-tile[data-v-fd6b91dc]{color:#c6c6c6}",
     map: undefined,
     media: undefined
   });
@@ -1478,23 +1490,23 @@ const __vue_inject_styles__$i = function (inject) {
 /* scoped */
-const __vue_scope_id__$i = "data-v-bbf09f9e";
+const __vue_scope_id__$m = "data-v-fd6b91dc";
 /* module identifier */
-const __vue_module_identifier__$i = undefined;
+const __vue_module_identifier__$m = undefined;
 /* functional template */
-const __vue_is_functional_template__$i = false;
+const __vue_is_functional_template__$m = 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__$i, __vue_script__$c, __vue_scope_id__$i, __vue_is_functional_template__$i, __vue_module_identifier__$i, false, createInjector, undefined, undefined);
+const __vue_component__$H = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$m,
+  staticRenderFns: __vue_staticRenderFns__$m
+}, __vue_inject_styles__$m, __vue_script__$g, __vue_scope_id__$m, __vue_is_functional_template__$m, __vue_module_identifier__$m, false, createInjector, undefined, undefined);
-var __vue_component__$B = __vue_component__$A;
+var __vue_component__$I = __vue_component__$H;
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -6091,7 +6103,7 @@ var DateTimeService = {
 };
 //
-var script$b = {
+var script$f = {
   name: "NsToastNotification",
   extends: CvToastNotification,
   components: {
@@ -6133,10 +6145,10 @@ var script$b = {
 };
 /* script */
-const __vue_script__$b = script$b;
+const __vue_script__$f = script$f;
 /* template */
-var __vue_render__$h = function () {
+var __vue_render__$l = function () {
   var _obj;
   var _vm = this;
@@ -6219,10 +6231,10 @@ var __vue_render__$h = function () {
   })], 1) : _vm._e()], 1)]);
 };
-var __vue_staticRenderFns__$h = [];
+var __vue_staticRenderFns__$l = [];
 /* style */
-const __vue_inject_styles__$h = function (inject) {
+const __vue_inject_styles__$l = function (inject) {
   if (!inject) return;
   inject("data-v-79bd81d3_0", {
     source: ".notification[data-v-79bd81d3]{margin-bottom:0;margin-right:0}.action[data-v-79bd81d3]{padding-top:0;margin-bottom:0}.bx--toast-notification .bx--inline-notification__action-button.bx--btn--ghost[data-v-79bd81d3]{margin-left:-16px}.notification-description-and-progress[data-v-79bd81d3]{margin-top:.75rem;margin-bottom:.75rem}.fix-margin-bottom[data-v-79bd81d3]{margin-bottom:0}.progress[data-v-79bd81d3]{margin-top:.75rem}.progress-bar-spacer[data-v-79bd81d3]{height:.5rem}.cv-notifiation.bx--toast-notification.notification[data-v-79bd81d3]{width:26vw;min-width:20rem;margin-top:0}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-79bd81d3]{margin-top:1rem}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-79bd81d3]{width:100%;cursor:pointer}.notification-read[data-v-79bd81d3]{border-color:#8d8d8d;color:#c6c6c6}.notification-read .bx--toast-notification__icon[data-v-79bd81d3]{fill:currentColor}.notification-read .bx--toast-notification__subtitle[data-v-79bd81d3]{color:#c6c6c6}.notification-read .bx--toast-notification__title[data-v-79bd81d3]{font-weight:400}.cv-notifiation .timestamp[data-v-79bd81d3]{margin-bottom:.75rem;line-height:1.29;color:#fff;text-decoration:underline}.cv-notifiation .timestamp button[data-v-79bd81d3]{color:#c6c6c6}.bx--tooltip__trigger[data-v-79bd81d3]:not(.bx--btn--icon-only){font-size:inherit}.cv-notifiation .timestamp .bx--tooltip__trigger[data-v-79bd81d3]::before{border-bottom-color:#161616}div.row[data-v-79bd81d3]:last-child{margin-bottom:1.5rem}.bx--toast-notification__details[data-v-79bd81d3]{flex-grow:1}",
@@ -6237,26 +6249,26 @@ const __vue_inject_styles__$h = function (inject) {
 /* scoped */
-const __vue_scope_id__$h = "data-v-79bd81d3";
+const __vue_scope_id__$l = "data-v-79bd81d3";
 /* module identifier */
-const __vue_module_identifier__$h = undefined;
+const __vue_module_identifier__$l = undefined;
 /* functional template */
-const __vue_is_functional_template__$h = false;
+const __vue_is_functional_template__$l = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$y = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$h,
-  staticRenderFns: __vue_staticRenderFns__$h
-}, __vue_inject_styles__$h, __vue_script__$b, __vue_scope_id__$h, __vue_is_functional_template__$h, __vue_module_identifier__$h, false, createInjector, undefined, undefined);
+const __vue_component__$F = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$l,
+  staticRenderFns: __vue_staticRenderFns__$l
+}, __vue_inject_styles__$l, __vue_script__$f, __vue_scope_id__$l, __vue_is_functional_template__$l, __vue_module_identifier__$l, false, createInjector, undefined, undefined);
-var __vue_component__$z = __vue_component__$y;
+var __vue_component__$G = __vue_component__$F;
 //
-var script$a = {
+var script$e = {
   name: "NsInfoCard",
   //components added for storybook to work
   components: {
@@ -6291,10 +6303,10 @@ var script$a = {
 };
 /* script */
-const __vue_script__$a = script$a;
+const __vue_script__$e = script$e;
 /* template */
-var __vue_render__$g = function () {
+var __vue_render__$k = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -6326,10 +6338,10 @@ var __vue_render__$g = function () {
   }, [_vm._t("content")], 2)], 2);
 };
-var __vue_staticRenderFns__$g = [];
+var __vue_staticRenderFns__$k = [];
 /* style */
-const __vue_inject_styles__$g = function (inject) {
+const __vue_inject_styles__$k = function (inject) {
   if (!inject) return;
   inject("data-v-5f0f76db_0", {
     source: ".info-card[data-v-5f0f76db]{display:flex;flex-direction:column;justify-content:center;min-height:7rem;position:relative}.row[data-v-5f0f76db]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.title[data-v-5f0f76db]{margin-left:.25rem;margin-right:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.description[data-v-5f0f76db]{margin-left:.25rem;margin-right:.25rem}.slot[data-v-5f0f76db]{margin-top:.5rem}",
@@ -6340,26 +6352,26 @@ const __vue_inject_styles__$g = function (inject) {
 /* scoped */
-const __vue_scope_id__$g = "data-v-5f0f76db";
+const __vue_scope_id__$k = "data-v-5f0f76db";
 /* module identifier */
-const __vue_module_identifier__$g = undefined;
+const __vue_module_identifier__$k = undefined;
 /* functional template */
-const __vue_is_functional_template__$g = false;
+const __vue_is_functional_template__$k = 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__$g, __vue_script__$a, __vue_scope_id__$g, __vue_is_functional_template__$g, __vue_module_identifier__$g, false, createInjector, undefined, undefined);
+const __vue_component__$D = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$k,
+  staticRenderFns: __vue_staticRenderFns__$k
+}, __vue_inject_styles__$k, __vue_script__$e, __vue_scope_id__$k, __vue_is_functional_template__$k, __vue_module_identifier__$k, false, createInjector, undefined, undefined);
-var __vue_component__$x = __vue_component__$w;
+var __vue_component__$E = __vue_component__$D;
 //
-var script$9 = {
+var script$d = {
   name: "NsStatusCard",
   //components added for storybook to work
   components: {
@@ -6406,10 +6418,10 @@ var script$9 = {
 };
 /* script */
-const __vue_script__$9 = script$9;
+const __vue_script__$d = script$d;
 /* template */
-var __vue_render__$f = function () {
+var __vue_render__$j = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -6478,10 +6490,10 @@ var __vue_render__$f = function () {
   }, [_c('h4', [_vm._v(_vm._s(_vm.valueSuccess))])]) : _c('h4', [_vm._v(_vm._s(_vm.valueSuccess))])], 1) : _vm._e()])]);
 };
-var __vue_staticRenderFns__$f = [];
+var __vue_staticRenderFns__$j = [];
 /* style */
-const __vue_inject_styles__$f = function (inject) {
+const __vue_inject_styles__$j = function (inject) {
   if (!inject) return;
   inject("data-v-e4a14fb4_0", {
     source: ".status-card[data-v-e4a14fb4]{display:flex;flex-direction:column;justify-content:center}.row[data-v-e4a14fb4]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.value[data-v-e4a14fb4]{margin-left:.25rem;margin-right:.25rem}.label[data-v-e4a14fb4]{margin-left:.25rem;margin-right:.25rem}.success-icon[data-v-e4a14fb4]{margin-right:.25rem}.error-icon[data-v-e4a14fb4]{margin-right:.25rem}.warning-icon[data-v-e4a14fb4]{margin-right:.25rem}.stats[data-v-e4a14fb4]{display:flex;align-items:center;margin-left:.5rem;margin-right:.5rem}",
@@ -6492,26 +6504,26 @@ const __vue_inject_styles__$f = function (inject) {
 /* scoped */
-const __vue_scope_id__$f = "data-v-e4a14fb4";
+const __vue_scope_id__$j = "data-v-e4a14fb4";
 /* module identifier */
-const __vue_module_identifier__$f = undefined;
+const __vue_module_identifier__$j = undefined;
 /* functional template */
-const __vue_is_functional_template__$f = false;
+const __vue_is_functional_template__$j = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$u = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$f,
-  staticRenderFns: __vue_staticRenderFns__$f
-}, __vue_inject_styles__$f, __vue_script__$9, __vue_scope_id__$f, __vue_is_functional_template__$f, __vue_module_identifier__$f, false, createInjector, undefined, undefined);
+const __vue_component__$B = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$j,
+  staticRenderFns: __vue_staticRenderFns__$j
+}, __vue_inject_styles__$j, __vue_script__$d, __vue_scope_id__$j, __vue_is_functional_template__$j, __vue_module_identifier__$j, false, createInjector, undefined, undefined);
-var __vue_component__$v = __vue_component__$u;
+var __vue_component__$C = __vue_component__$B;
 //
-var script$8 = {
+var script$c = {
   name: "NsSystemdServiceCard",
   //components added for storybook to work
   components: {
@@ -6565,10 +6577,10 @@ var script$8 = {
 };
 /* script */
-const __vue_script__$8 = script$8;
+const __vue_script__$c = script$c;
 /* template */
-var __vue_render__$e = function () {
+var __vue_render__$i = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -6623,10 +6635,10 @@ var __vue_render__$e = function () {
   })], 1)])]);
 };
-var __vue_staticRenderFns__$e = [];
+var __vue_staticRenderFns__$i = [];
 /* style */
-const __vue_inject_styles__$e = function (inject) {
+const __vue_inject_styles__$i = function (inject) {
   if (!inject) return;
   inject("data-v-e13a5ce6_0", {
     source: ".service-card[data-v-e13a5ce6]{display:flex;flex-direction:column;justify-content:center}.row[data-v-e13a5ce6]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.service-name[data-v-e13a5ce6]{margin-left:.25rem;margin-right:.25rem}.success-icon[data-v-e13a5ce6]{margin-right:.25rem}.error-icon[data-v-e13a5ce6]{margin-right:.25rem}.warning-icon[data-v-e13a5ce6]{margin-right:.25rem}.stats[data-v-e13a5ce6]{display:flex;align-items:center;margin-left:.5rem;margin-right:.5rem}",
@@ -6637,23 +6649,23 @@ const __vue_inject_styles__$e = function (inject) {
 /* scoped */
-const __vue_scope_id__$e = "data-v-e13a5ce6";
+const __vue_scope_id__$i = "data-v-e13a5ce6";
 /* module identifier */
-const __vue_module_identifier__$e = undefined;
+const __vue_module_identifier__$i = undefined;
 /* functional template */
-const __vue_is_functional_template__$e = false;
+const __vue_is_functional_template__$i = false;
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$s = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$e,
-  staticRenderFns: __vue_staticRenderFns__$e
-}, __vue_inject_styles__$e, __vue_script__$8, __vue_scope_id__$e, __vue_is_functional_template__$e, __vue_module_identifier__$e, false, createInjector, undefined, undefined);
+const __vue_component__$z = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$i,
+  staticRenderFns: __vue_staticRenderFns__$i
+}, __vue_inject_styles__$i, __vue_script__$c, __vue_scope_id__$i, __vue_is_functional_template__$i, __vue_module_identifier__$i, false, createInjector, undefined, undefined);
-var __vue_component__$t = __vue_component__$s;
+var __vue_component__$A = __vue_component__$z;
 var UtilService = {
   name: "UtilService",
@@ -6825,7 +6837,7 @@ var UtilService = {
 };
 //
-var script$7 = {
+var script$b = {
   name: "NsPasswordInput",
   components: CvTextInput,
   mixins: [UtilService],
@@ -6981,10 +6993,10 @@ var script$7 = {
 };
 /* script */
-const __vue_script__$7 = script$7;
+const __vue_script__$b = script$b;
 /* template */
-var __vue_render__$d = function () {
+var __vue_render__$h = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -7018,27 +7030,32 @@ var __vue_render__$d = function () {
   }, [_c('span', {
     class: ['requirement', {
       'requirement-ok': _vm.isLengthOk,
-      'requirement-light': _vm.light
+      'requirement-light': _vm.light,
+      'requirement-disabled': _vm.disabled
     }]
   }, [_vm._v(_vm._s(_vm.lengthLabel))]), _vm._v(" "), _c('span', {
     class: ['requirement', {
       'requirement-ok': _vm.isLowercaseOk,
-      'requirement-light': _vm.light
+      'requirement-light': _vm.light,
+      'requirement-disabled': _vm.disabled
     }]
   }, [_vm._v(_vm._s(_vm.lowercaseLabel))]), _vm._v(" "), _c('span', {
     class: ['requirement', {
       'requirement-ok': _vm.isUppercaseOk,
-      'requirement-light': _vm.light
+      'requirement-light': _vm.light,
+      'requirement-disabled': _vm.disabled
     }]
   }, [_vm._v(_vm._s(_vm.uppercaseLabel))]), _vm._v(" "), _c('span', {
     class: ['requirement', {
       'requirement-ok': _vm.isNumberOk,
-      'requirement-light': _vm.light
+      'requirement-light': _vm.light,
+      'requirement-disabled': _vm.disabled
     }]
   }, [_vm._v(_vm._s(_vm.numberLabel))]), _vm._v(" "), _c('span', {
     class: ['requirement', {
       'requirement-ok': _vm.isSymbolOk,
-      'requirement-light': _vm.light
+      'requirement-light': _vm.light,
+      'requirement-disabled': _vm.disabled
     }]
   }, [_vm._v(_vm._s(_vm.symbolLabel))])])], 1), _vm._v(" "), _c('div', {
     staticClass: "confirm-password-container"
@@ -7068,18 +7085,19 @@ var __vue_render__$d = function () {
   }, [_c('span', {
     class: ['requirement', {
       'requirement-ok': _vm.isEqualOk,
-      'requirement-light': _vm.light
+      'requirement-light': _vm.light,
+      'requirement-disabled': _vm.disabled
     }]
   }, [_vm._v(_vm._s(_vm.equalLabel))])])], 1)]);
 };
-var __vue_staticRenderFns__$d = [];
+var __vue_staticRenderFns__$h = [];
 /* style */
-const __vue_inject_styles__$d = function (inject) {
+const __vue_inject_styles__$h = function (inject) {
   if (!inject) return;
-  inject("data-v-1598af82_0", {
-    source: ".new-password-container[data-v-1598af82]{margin-bottom:1rem}.new-password[data-v-1598af82]{margin-bottom:.25rem}.confirm-password[data-v-1598af82]{margin-bottom:.25rem}.password-meter[data-v-1598af82]{display:flex}@media (min-width:672px){.password-meter[data-v-1598af82]{max-width:38rem}}.requirement[data-v-1598af82]{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-1598af82]{background-color:#fff}.requirement[data-v-1598af82]:first-child{margin-left:0}.requirement-ok[data-v-1598af82]{color:#fff;background-color:#198038}",
+  inject("data-v-af9d89fe_0", {
+    source: ".new-password-container[data-v-af9d89fe]{margin-bottom:1rem}.new-password[data-v-af9d89fe]{margin-bottom:.25rem}.confirm-password[data-v-af9d89fe]{margin-bottom:.25rem}.password-meter[data-v-af9d89fe]{display:flex}@media (min-width:672px){.password-meter[data-v-af9d89fe]{max-width:38rem}}.requirement[data-v-af9d89fe]{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-af9d89fe]{background-color:#fff}.requirement[data-v-af9d89fe]:first-child{margin-left:0}.requirement-ok[data-v-af9d89fe]{color:#fff;background-color:#198038}.requirement-disabled[data-v-af9d89fe]{color:#c6c6c6;background-color:#f4f4f4}",
     map: undefined,
     media: undefined
   });
@@ -7087,26 +7105,26 @@ const __vue_inject_styles__$d = function (inject) {
 /* scoped */
-const __vue_scope_id__$d = "data-v-1598af82";
+const __vue_scope_id__$h = "data-v-af9d89fe";
 /* module identifier */
-const __vue_module_identifier__$d = undefined;
+const __vue_module_identifier__$h = undefined;
 /* functional template */
-const __vue_is_functional_template__$d = false;
+const __vue_is_functional_template__$h = 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__$d, __vue_script__$7, __vue_scope_id__$d, __vue_is_functional_template__$d, __vue_module_identifier__$d, false, createInjector, undefined, undefined);
+const __vue_component__$x = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$h,
+  staticRenderFns: __vue_staticRenderFns__$h
+}, __vue_inject_styles__$h, __vue_script__$b, __vue_scope_id__$h, __vue_is_functional_template__$h, __vue_module_identifier__$h, false, createInjector, undefined, undefined);
-var __vue_component__$r = __vue_component__$q;
+var __vue_component__$y = __vue_component__$x;
 //
-var script$6 = {
+var script$a = {
   name: "NsIconMenu",
   extends: CvOverflowMenu,
   props: {
@@ -7135,10 +7153,10 @@ var script$6 = {
 };
 /* script */
-const __vue_script__$6 = script$6;
+const __vue_script__$a = script$a;
 /* template */
-var __vue_render__$c = function () {
+var __vue_render__$g = function () {
   var _obj, _obj$1;
   var _vm = this;
@@ -7250,35 +7268,35 @@ var __vue_render__$c = function () {
   })])]);
 };
-var __vue_staticRenderFns__$c = [];
+var __vue_staticRenderFns__$g = [];
 /* style */
-const __vue_inject_styles__$c = undefined;
+const __vue_inject_styles__$g = undefined;
 /* scoped */
-const __vue_scope_id__$c = undefined;
+const __vue_scope_id__$g = undefined;
 /* module identifier */
-const __vue_module_identifier__$c = undefined;
+const __vue_module_identifier__$g = undefined;
 /* functional template */
-const __vue_is_functional_template__$c = false;
+const __vue_is_functional_template__$g = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$o = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$c,
-  staticRenderFns: __vue_staticRenderFns__$c
-}, __vue_inject_styles__$c, __vue_script__$6, __vue_scope_id__$c, __vue_is_functional_template__$c, __vue_module_identifier__$c, false, undefined, undefined, undefined);
+const __vue_component__$v = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$g,
+  staticRenderFns: __vue_staticRenderFns__$g
+}, __vue_inject_styles__$g, __vue_script__$a, __vue_scope_id__$g, __vue_is_functional_template__$g, __vue_module_identifier__$g, false, undefined, undefined, undefined);
-var __vue_component__$p = __vue_component__$o;
+var __vue_component__$w = __vue_component__$v;
 //
 Vue.use(chartsVue);
-var script$5 = {
+var script$9 = {
   name: "NsMeterChart",
   components: {
     CcvMeterChart
@@ -7352,10 +7370,10 @@ var script$5 = {
 };
 /* script */
-const __vue_script__$5 = script$5;
+const __vue_script__$9 = script$9;
 /* template */
-var __vue_render__$b = function () {
+var __vue_render__$f = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -7370,35 +7388,35 @@ var __vue_render__$b = function () {
   });
 };
-var __vue_staticRenderFns__$b = [];
+var __vue_staticRenderFns__$f = [];
 /* style */
-const __vue_inject_styles__$b = undefined;
+const __vue_inject_styles__$f = undefined;
 /* scoped */
-const __vue_scope_id__$b = undefined;
+const __vue_scope_id__$f = undefined;
 /* module identifier */
-const __vue_module_identifier__$b = undefined;
+const __vue_module_identifier__$f = undefined;
 /* functional template */
-const __vue_is_functional_template__$b = false;
+const __vue_is_functional_template__$f = false;
 /* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
-const __vue_component__$m = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$b,
-  staticRenderFns: __vue_staticRenderFns__$b
-}, __vue_inject_styles__$b, __vue_script__$5, __vue_scope_id__$b, __vue_is_functional_template__$b, __vue_module_identifier__$b, false, undefined, undefined, undefined);
+const __vue_component__$t = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$f,
+  staticRenderFns: __vue_staticRenderFns__$f
+}, __vue_inject_styles__$f, __vue_script__$9, __vue_scope_id__$f, __vue_is_functional_template__$f, __vue_module_identifier__$f, false, undefined, undefined, undefined);
-var __vue_component__$n = __vue_component__$m;
+var __vue_component__$u = __vue_component__$t;
 //
 Vue.use(chartsVue);
-var script$4 = {
+var script$8 = {
   name: "NsPieChart",
   components: {},
   props: {
@@ -7454,10 +7472,10 @@ var script$4 = {
 };
 /* script */
-const __vue_script__$4 = script$4;
+const __vue_script__$8 = script$8;
 /* template */
-var __vue_render__$a = function () {
+var __vue_render__$e = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -7472,34 +7490,34 @@ var __vue_render__$a = function () {
   });
 };
-var __vue_staticRenderFns__$a = [];
+var __vue_staticRenderFns__$e = [];
 /* style */
-const __vue_inject_styles__$a = undefined;
+const __vue_inject_styles__$e = undefined;
 /* scoped */
-const __vue_scope_id__$a = undefined;
+const __vue_scope_id__$e = undefined;
 /* module identifier */
-const __vue_module_identifier__$a = undefined;
+const __vue_module_identifier__$e = undefined;
 /* functional template */
-const __vue_is_functional_template__$a = false;
+const __vue_is_functional_template__$e = false;
 /* style inject */
 /* 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__$4, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, undefined, undefined, undefined);
+const __vue_component__$r = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$e,
+  staticRenderFns: __vue_staticRenderFns__$e
+}, __vue_inject_styles__$e, __vue_script__$8, __vue_scope_id__$e, __vue_is_functional_template__$e, __vue_module_identifier__$e, false, undefined, undefined, undefined);
-var __vue_component__$l = __vue_component__$k;
+var __vue_component__$s = __vue_component__$r;
 //
-var script$3 = {
+var script$7 = {
   name: "NsDangerDeleteModal",
   //component added for storybook to work
   components: {
@@ -7582,10 +7600,10 @@ var script$3 = {
 };
 /* script */
-const __vue_script__$3 = script$3;
+const __vue_script__$7 = script$7;
 /* template */
-var __vue_render__$9 = function () {
+var __vue_render__$d = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -7646,10 +7664,10 @@ var __vue_render__$9 = function () {
   }, [_vm._v(_vm._s(_vm.deleteLabel))])], 2);
 };
-var __vue_staticRenderFns__$9 = [];
+var __vue_staticRenderFns__$d = [];
 /* style */
-const __vue_inject_styles__$9 = function (inject) {
+const __vue_inject_styles__$d = function (inject) {
   if (!inject) return;
   inject("data-v-97f667a6_0", {
     source: ".type-to-confirm[data-v-97f667a6]{margin-top:2rem}",
@@ -7660,23 +7678,23 @@ const __vue_inject_styles__$9 = function (inject) {
 /* scoped */
-const __vue_scope_id__$9 = "data-v-97f667a6";
+const __vue_scope_id__$d = "data-v-97f667a6";
 /* module identifier */
-const __vue_module_identifier__$9 = undefined;
+const __vue_module_identifier__$d = undefined;
 /* functional template */
-const __vue_is_functional_template__$9 = false;
+const __vue_is_functional_template__$d = 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__$3, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, createInjector, undefined, undefined);
+const __vue_component__$p = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$d,
+  staticRenderFns: __vue_staticRenderFns__$d
+}, __vue_inject_styles__$d, __vue_script__$7, __vue_scope_id__$d, __vue_is_functional_template__$d, __vue_module_identifier__$d, false, createInjector, undefined, undefined);
-var __vue_component__$j = __vue_component__$i;
+var __vue_component__$q = __vue_component__$p;
 var IconService = {
   name: "IconService",
@@ -7695,6 +7713,7 @@ var IconService = {
       Reset20,
       Download20,
       Launch20,
+      // open app, open external link
       Upgrade20,
       Settings20,
       ChevronDown20,
@@ -7707,6 +7726,7 @@ var IconService = {
       Application32,
       Add20,
       Rocket20,
+      // run
       Rocket32,
       Chip20,
       // cluster nodes
@@ -7728,6 +7748,7 @@ var IconService = {
       Edit20,
       Password20,
       Star20,
+      // favorite apps
       Checkmark20,
       ZoomIn20,
       // used to open details
@@ -7764,14 +7785,17 @@ var IconService = {
       Warning16,
       // warning
       Warning20,
-      Warning32
+      Warning32,
+      Power20,
+      // enable, disable
+      Power32
     };
   }
 };
 //
-var script$2 = {
+var script$6 = {
   name: "NsDropdownAction",
   extends: CvOverflowMenu,
   components: {
@@ -7803,10 +7827,10 @@ var script$2 = {
 };
 /* script */
-const __vue_script__$2 = script$2;
+const __vue_script__$6 = script$6;
 /* template */
-var __vue_render__$8 = function () {
+var __vue_render__$c = function () {
   var _obj, _obj$1;
   var _vm = this;
@@ -7906,34 +7930,34 @@ var __vue_render__$8 = function () {
   })])]);
 };
-var __vue_staticRenderFns__$8 = [];
+var __vue_staticRenderFns__$c = [];
 /* style */
-const __vue_inject_styles__$8 = undefined;
+const __vue_inject_styles__$c = undefined;
 /* scoped */
-const __vue_scope_id__$8 = "data-v-31925b9d";
+const __vue_scope_id__$c = "data-v-31925b9d";
 /* module identifier */
-const __vue_module_identifier__$8 = undefined;
+const __vue_module_identifier__$c = undefined;
 /* functional template */
-const __vue_is_functional_template__$8 = false;
+const __vue_is_functional_template__$c = false;
 /* style inject */
 /* 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__$2, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined);
+const __vue_component__$n = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$c,
+  staticRenderFns: __vue_staticRenderFns__$c
+}, __vue_inject_styles__$c, __vue_script__$6, __vue_scope_id__$c, __vue_is_functional_template__$c, __vue_module_identifier__$c, false, undefined, undefined, undefined);
-var __vue_component__$h = __vue_component__$g;
+var __vue_component__$o = __vue_component__$n;
 //
-var script$1 = {
+var script$5 = {
   name: "NsTextInput",
   extends: CvTextInput,
   components: {
@@ -7987,10 +8011,10 @@ var script$1 = {
 };
 /* script */
-const __vue_script__$1 = script$1;
+const __vue_script__$5 = script$5;
 /* template */
-var __vue_render__$7 = function () {
+var __vue_render__$b = function () {
   var _obj, _obj$1, _obj$2, _obj$3, _obj$4, _obj$5;
   var _vm = this;
@@ -8007,7 +8031,7 @@ var __vue_render__$7 = function () {
       "for": _vm.uid
     }
   }, [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _c('cv-interactive-tooltip', {
-    staticClass: "tooltip",
+    staticClass: "tooltip info",
     attrs: {
       "alignment": _vm.tooltipAlignment,
       "direction": _vm.tooltipDirection
@@ -8068,16 +8092,16 @@ var __vue_render__$7 = function () {
   })], 2) : _vm._e()]);
 };
-var __vue_staticRenderFns__$7 = [];
+var __vue_staticRenderFns__$b = [];
 /* style */
-const __vue_inject_styles__$7 = function (inject) {
+const __vue_inject_styles__$b = function (inject) {
   if (!inject) return;
-  inject("data-v-1a7ed132_0", {
-    source: ".tooltip[data-v-1a7ed132]{display:inline-block;position:absolute}",
+  inject("data-v-c9c91db0_0", {
+    source: ".tooltip[data-v-c9c91db0]{display:inline-block;position:absolute}",
     map: undefined,
     media: undefined
-  }), inject("data-v-1a7ed132_1", {
+  }), inject("data-v-c9c91db0_1", {
     source: ".ns-text-input .bx--tooltip__label .bx--tooltip__trigger{margin-left:.25rem}",
     map: undefined,
     media: undefined
@@ -8086,28 +8110,157 @@ const __vue_inject_styles__$7 = function (inject) {
 /* scoped */
-const __vue_scope_id__$7 = "data-v-1a7ed132";
+const __vue_scope_id__$b = "data-v-c9c91db0";
 /* module identifier */
-const __vue_module_identifier__$7 = undefined;
+const __vue_module_identifier__$b = undefined;
 /* functional template */
-const __vue_is_functional_template__$7 = false;
+const __vue_is_functional_template__$b = 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__$1, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, createInjector, undefined, undefined);
+const __vue_component__$l = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$b,
+  staticRenderFns: __vue_staticRenderFns__$b
+}, __vue_inject_styles__$b, __vue_script__$5, __vue_scope_id__$b, __vue_is_functional_template__$b, __vue_module_identifier__$b, false, createInjector, undefined, undefined);
-var __vue_component__$f = __vue_component__$e;
+var __vue_component__$m = __vue_component__$l;
 //
-var script = {
+var script$4 = {
+  name: "NsBackupCardDetails",
+  mixins: [DateTimeService],
+  props: {
+    backup: {
+      type: Object,
+      required: true
+    },
+    status: {
+      type: Array,
+      required: true
+    },
+    repositoryLabel: {
+      type: String,
+      default: "Repository"
+    },
+    completedLabel: {
+      type: String,
+      required: true
+    },
+    durationLabel: {
+      type: String,
+      required: true
+    },
+    totalSizeLabel: {
+      type: String,
+      required: true
+    },
+    totalFileCountLabel: {
+      type: String,
+      required: true
+    }
+  }
+};
+/* script */
+const __vue_script__$4 = script$4;
+/* template */
+var __vue_render__$a = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    staticClass: "ns-backup-card-details"
+  }, [_c('div', {
+    staticClass: "tr"
+  }, [_c('div', {
+    staticClass: "td label"
+  }, [_vm._v(_vm._s(_vm.repositoryLabel))]), _vm._v(" "), _c('div', {
+    staticClass: "td"
+  }, [_vm._v("\n      " + _vm._s(_vm.backup.repoName) + "\n    ")])]), _vm._v(" "), _c('div', {
+    staticClass: "tr"
+  }, [_c('div', {
+    staticClass: "td label"
+  }, [_vm._v(_vm._s(_vm.completedLabel))]), _vm._v(" "), _c('div', {
+    staticClass: "td"
+  }, [_vm.status[_vm.backup.id] && _vm.status[_vm.backup.id].end ? _c('span', [_c('cv-interactive-tooltip', {
+    staticClass: "info tooltip-with-text-trigger",
+    attrs: {
+      "alignment": "center",
+      "direction": "bottom"
+    }
+  }, [_c('template', {
+    slot: "trigger"
+  }, [_vm._v("\n            " + _vm._s(_vm.formatDateDistance(_vm.status[_vm.backup.id].end * 1000, new Date(), {
+    addSuffix: true
+  })) + "\n          ")]), _vm._v(" "), _c('template', {
+    slot: "content"
+  }, [_vm._v("\n            " + _vm._s(_vm._f("date")(_vm.status[_vm.backup.id].end * 1000, "yyyy-MM-dd HH:mm:ss")) + "\n          ")])], 2)], 1) : _c('span', [_vm._v("-")])])]), _vm._v(" "), _c('div', {
+    staticClass: "tr"
+  }, [_c('div', {
+    staticClass: "td label"
+  }, [_vm._v(_vm._s(_vm.durationLabel))]), _vm._v(" "), _c('div', {
+    staticClass: "td"
+  }, [_vm.status[_vm.backup.id] && _vm.status[_vm.backup.id].end && _vm.status[_vm.backup.id].start ? _c('span', [_vm._v("\n        " + _vm._s(_vm._f("secondsFormat")(_vm.status[_vm.backup.id].end - _vm.status[_vm.backup.id].start)) + "\n      ")]) : _c('span', [_vm._v("-")])])]), _vm._v(" "), _c('div', {
+    staticClass: "tr"
+  }, [_c('div', {
+    staticClass: "td label"
+  }, [_vm._v(_vm._s(_vm.totalSizeLabel))]), _vm._v(" "), _c('div', {
+    staticClass: "td"
+  }, [_vm.status[_vm.backup.id] && _vm.status[_vm.backup.id].total_size ? _c('span', [_vm._v("\n        " + _vm._s(_vm._f("byteFormat")(_vm.status[_vm.backup.id].total_size)) + "\n      ")]) : _c('span', [_vm._v("-")])])]), _vm._v(" "), _c('div', {
+    staticClass: "tr"
+  }, [_c('div', {
+    staticClass: "td label"
+  }, [_vm._v(_vm._s(_vm.totalFileCountLabel))]), _vm._v(" "), _c('div', {
+    staticClass: "td"
+  }, [_vm.status[_vm.backup.id] && _vm.status[_vm.backup.id].total_file_count ? _c('span', [_vm._v("\n        " + _vm._s(_vm._f("humanFormat")(_vm.status[_vm.backup.id].total_file_count)) + "\n        (" + _vm._s(_vm.status[_vm.backup.id].total_file_count) + ")\n      ")]) : _c('span', [_vm._v("-")])])])]);
+};
+var __vue_staticRenderFns__$a = [];
+/* style */
+const __vue_inject_styles__$a = function (inject) {
+  if (!inject) return;
+  inject("data-v-61bac27a_0", {
+    source: ".ns-backup-card-details[data-v-61bac27a]{display:contents}.tr[data-v-61bac27a]{display:table-row}.td[data-v-61bac27a]{display:table-cell}.label[data-v-61bac27a]{padding-right:.75rem;font-weight:700;text-align:right;padding-bottom:.5rem}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__$a = "data-v-61bac27a";
+/* module identifier */
+const __vue_module_identifier__$a = undefined;
+/* functional template */
+const __vue_is_functional_template__$a = 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__$4, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, createInjector, undefined, undefined);
+var NsBackupCardDetails = __vue_component__$k;
+//
+var script$3 = {
   name: "NsBackupCard",
-  mixins: [IconService, DateTimeService],
+  components: {
+    NsBackupCardDetails
+  },
+  mixins: [IconService, UtilService],
   props: {
     title: {
       type: String,
@@ -8165,6 +8318,10 @@ var script = {
       type: String,
       default: "Disabled"
     },
+    showMoreLabel: {
+      type: String,
+      default: "Show more"
+    },
     moduleId: {
       type: String,
       required: true
@@ -8243,10 +8400,10 @@ var script = {
 };
 /* script */
-const __vue_script__ = script;
+const __vue_script__$3 = script$3;
 /* template */
-var __vue_render__$6 = function () {
+var __vue_render__$9 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
@@ -8289,14 +8446,17 @@ var __vue_render__$6 = function () {
     on: {
       "action": _vm.goToBackup
     }
-  })], 1)] : _vm._l(_vm.backupsContainingInstance, function (backup) {
+  })], 1)] : [_c('div', {
+    staticClass: "backups"
+  }, _vm._l(_vm.backupsContainingInstance, function (backup) {
     return _c('div', {
-      key: backup.id
+      key: backup.id,
+      staticClass: "backup"
     }, [_c('div', {
       staticClass: "row"
     }, [_vm.backupsContainingInstance.length > 1 ? _c('h5', {
       staticClass: "title mg-top-sm"
-    }, [_vm._v("\n          " + _vm._s(backup.name) + "\n        ")]) : _vm._e()]), _vm._v(" "), _c('div', {
+    }, [_vm._v("\n            " + _vm._s(backup.name) + "\n          ")]) : _vm._e()]), _vm._v(" "), _c('div', {
       staticClass: "table-wrapper"
     }, [_c('div', {
       staticClass: "table"
@@ -8308,53 +8468,49 @@ var __vue_render__$6 = function () {
       staticClass: "td status"
     }, [!backup.enabled ? _c('span', {
       staticClass: "ns-warning"
-    }, [_vm._v("\n                " + _vm._s(_vm.backupDisabledLabel) + "\n              ")]) : _vm.status[backup.id] && _vm.status[backup.id].success == true ? _c('span', {
+    }, [_vm._v("\n                  " + _vm._s(_vm.backupDisabledLabel) + "\n                ")]) : _vm.status[backup.id] && _vm.status[backup.id].success == true ? _c('span', {
       staticClass: "ns-success"
     }, [_c('span', [_vm._v(_vm._s(_vm.statusSuccessLabel))])]) : _vm.status[backup.id] && _vm.status[backup.id].success == false ? _c('span', {
       staticClass: "ns-error"
-    }, [_vm._v("\n                " + _vm._s(_vm.statusErrorLabel) + "\n              ")]) : _c('span', {
+    }, [_vm._v("\n                  " + _vm._s(_vm.statusErrorLabel) + "\n                ")]) : _c('span', {
       staticClass: "ns-warning"
-    }, [_vm._v("\n                " + _vm._s(_vm.statusNotRunLabel) + "\n              ")])])]), _vm._v(" "), _c('div', {
-      staticClass: "tr"
-    }, [_c('div', {
-      staticClass: "td label"
-    }, [_vm._v(_vm._s(_vm.repositoryLabel))]), _vm._v(" "), _c('div', {
-      staticClass: "td"
-    }, [_vm._v("\n              " + _vm._s(backup.repoName) + "\n            ")])]), _vm._v(" "), _c('div', {
-      staticClass: "tr"
-    }, [_c('div', {
-      staticClass: "td label"
-    }, [_vm._v(_vm._s(_vm.completedLabel))]), _vm._v(" "), _c('div', {
-      staticClass: "td"
-    }, [_vm.status[backup.id] && _vm.status[backup.id].end ? _c('span', [_c('cv-tooltip', {
-      staticClass: "info tooltip-with-text-trigger",
+    }, [_vm._v("\n                  " + _vm._s(_vm.statusNotRunLabel) + "\n                ")])])]), _vm._v(" "), _vm.backupsContainingInstance.length == 1 ? _c('NsBackupCardDetails', {
       attrs: {
-        "alignment": "center",
-        "direction": "bottom",
-        "tip": _vm._f("date")(_vm.status[backup.id].end * 1000, 'yyyy-MM-dd HH:mm:ss')
+        "backup": backup,
+        "status": _vm.status,
+        "repositoryLabel": _vm.repositoryLabel,
+        "completedLabel": _vm.completedLabel,
+        "durationLabel": _vm.durationLabel,
+        "totalSizeLabel": _vm.totalSizeLabel,
+        "totalFileCountLabel": _vm.totalFileCountLabel
       }
-    }, [_vm._v("\n                  " + _vm._s(_vm.formatDateDistance(_vm.status[backup.id].end * 1000, new Date(), {
-      addSuffix: true
-    })) + "\n                ")])], 1) : _c('span', [_vm._v("-")])])]), _vm._v(" "), _c('div', {
-      staticClass: "tr"
-    }, [_c('div', {
-      staticClass: "td label"
-    }, [_vm._v(_vm._s(_vm.durationLabel))]), _vm._v(" "), _c('div', {
-      staticClass: "td"
-    }, [_vm.status[backup.id] && _vm.status[backup.id].end && _vm.status[backup.id].start ? _c('span', [_vm._v("\n                " + _vm._s(_vm._f("secondsFormat")(_vm.status[backup.id].end - _vm.status[backup.id].start)) + "\n              ")]) : _c('span', [_vm._v("-")])])]), _vm._v(" "), _c('div', {
-      staticClass: "tr"
-    }, [_c('div', {
-      staticClass: "td label"
-    }, [_vm._v(_vm._s(_vm.totalSizeLabel))]), _vm._v(" "), _c('div', {
-      staticClass: "td"
-    }, [_vm.status[backup.id] && _vm.status[backup.id].total_size ? _c('span', [_vm._v("\n                " + _vm._s(_vm._f("byteFormat")(_vm.status[backup.id].total_size)) + "\n              ")]) : _c('span', [_vm._v("-")])])]), _vm._v(" "), _c('div', {
-      staticClass: "tr"
+    }) : _vm._e()], 1)]), _vm._v(" "), _c('div', {
+      staticClass: "table-wrapper"
     }, [_c('div', {
-      staticClass: "td label"
-    }, [_vm._v(_vm._s(_vm.totalFileCountLabel))]), _vm._v(" "), _c('div', {
-      staticClass: "td"
-    }, [_vm.status[backup.id] && _vm.status[backup.id].total_file_count ? _c('span', [_vm._v("\n                " + _vm._s(_vm._f("humanFormat")(_vm.status[backup.id].total_file_count)) + "\n                (" + _vm._s(_vm.status[backup.id].total_file_count) + ")\n              ")]) : _c('span', [_vm._v("-")])])])])])]);
-  }), _vm._v(" "), _c('div', [_c('div', {
+      staticClass: "table"
+    }, [_vm.backupsContainingInstance.length > 1 ? _c('cv-accordion', {
+      ref: "accordion",
+      refInFor: true
+    }, [_c('cv-accordion-item', {
+      attrs: {
+        "open": _vm.toggleAccordion[0]
+      }
+    }, [_c('template', {
+      slot: "title"
+    }, [_vm._v(_vm._s(_vm.showMoreLabel))]), _vm._v(" "), _c('template', {
+      slot: "content"
+    }, [_c('NsBackupCardDetails', {
+      attrs: {
+        "backup": backup,
+        "status": _vm.status,
+        "repositoryLabel": _vm.repositoryLabel,
+        "completedLabel": _vm.completedLabel,
+        "durationLabel": _vm.durationLabel,
+        "totalSizeLabel": _vm.totalSizeLabel,
+        "totalFileCountLabel": _vm.totalFileCountLabel
+      }
+    })], 1)], 2)], 1) : _vm._e()], 1)])]);
+  }), 0)], _vm._v(" "), _c('div', [_c('div', {
     staticClass: "row mg-top-sm"
   }, [_c('NsButton', {
     attrs: {
@@ -8368,13 +8524,17 @@ var __vue_render__$6 = function () {
   }, [_vm._v(_vm._s(_vm.goToBackupLabel) + "\n      ")])], 1)])], 2);
 };
-var __vue_staticRenderFns__$6 = [];
+var __vue_staticRenderFns__$9 = [];
 /* style */
-const __vue_inject_styles__$6 = function (inject) {
+const __vue_inject_styles__$9 = function (inject) {
   if (!inject) return;
-  inject("data-v-c645ad74_0", {
-    source: ".ns-backup-card[data-v-c645ad74]{display:flex;flex-direction:column;justify-content:center;min-height:7rem}.row[data-v-c645ad74]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.title[data-v-c645ad74]{margin-left:.25rem;margin-right:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-wrapper[data-v-c645ad74]{display:flex;justify-content:center;margin-top:.5rem}.table[data-v-c645ad74]{display:table}.tr[data-v-c645ad74]{display:table-row}.td[data-v-c645ad74]{display:table-cell}.label[data-v-c645ad74]{padding-right:.75rem;font-weight:700;text-align:right;padding-bottom:.5rem}.status[data-v-c645ad74]{font-weight:700}.backup-status-icon[data-v-c645ad74]{margin-right:.25rem}",
+  inject("data-v-09385b80_0", {
+    source: ".ns-backup-card[data-v-09385b80]{display:flex;flex-direction:column;justify-content:center;min-height:7rem}.backup[data-v-09385b80]{margin-bottom:1rem}.backup[data-v-09385b80]:last-child{margin-bottom:0}.row[data-v-09385b80]{display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.title[data-v-09385b80]{margin-left:.25rem;margin-right:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-wrapper[data-v-09385b80]{display:flex;justify-content:center;margin-top:.5rem}.table[data-v-09385b80]{display:table}.tr[data-v-09385b80]{display:table-row}.td[data-v-09385b80]{display:table-cell}.label[data-v-09385b80]{padding-right:.75rem;font-weight:700;text-align:right;padding-bottom:.5rem}.status[data-v-09385b80]{font-weight:700}.backup-status-icon[data-v-09385b80]{margin-right:.25rem}",
+    map: undefined,
+    media: undefined
+  }), inject("data-v-09385b80_1", {
+    source: ".ns-backup-card .bx--accordion--start .bx--accordion__content{margin-left:0}",
     map: undefined,
     media: undefined
   });
@@ -8382,13 +8542,352 @@ const __vue_inject_styles__$6 = function (inject) {
 /* scoped */
-const __vue_scope_id__$6 = "data-v-c645ad74";
+const __vue_scope_id__$9 = "data-v-09385b80";
+/* module identifier */
+const __vue_module_identifier__$9 = undefined;
+/* functional template */
+const __vue_is_functional_template__$9 = 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__$3, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, createInjector, undefined, undefined);
+var __vue_component__$j = __vue_component__$i;
+//
+var script$2 = {
+  name: "NsWizard",
+  extends: CvModal,
+  mixins: [IconService],
+  props: {
+    cancelLabel: {
+      type: String,
+      default: "Cancel"
+    },
+    previousLabel: {
+      type: String,
+      default: "Previous"
+    },
+    nextLabel: {
+      type: String,
+      default: "Next"
+    },
+    isPreviousDisabled: Boolean,
+    isNextDisabled: Boolean,
+    isNextLoading: Boolean,
+    closeAriaLabel: {
+      type: String,
+      default: "Close modal"
+    },
+    autoHideOff: Boolean,
+    visible: Boolean,
+    size: String
+  }
+};
+/* script */
+const __vue_script__$2 = script$2;
+/* template */
+var __vue_render__$8 = function () {
+  var _obj, _obj$1;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    class: ["cv-modal " + _vm.carbonPrefix + "--modal", "wizard-modal", {
+      'is-visible': _vm.dataVisible
+    }],
+    attrs: {
+      "data-modal": "",
+      "id": _vm.uid,
+      "tabindex": "-1"
+    },
+    on: {
+      "keydown": function ($event) {
+        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) {
+          return null;
+        }
+        $event.preventDefault();
+        return _vm.onEsc.apply(null, arguments);
+      },
+      "click": function ($event) {
+        if ($event.target !== $event.currentTarget) {
+          return null;
+        }
+        return _vm.onExternalClick.apply(null, arguments);
+      }
+    }
+  }, [_c('div', _vm._b({
+    ref: "modalDialog",
+    class: [_vm.carbonPrefix + "--modal-container", (_obj = {}, _obj[_vm.carbonPrefix + "--modal-container--" + _vm.internalSize] = _vm.internalSize, _obj)]
+  }, 'div', _vm.dialogAttrs, false), [_c('div', {
+    ref: "beforeContent",
+    staticClass: "cv-modal__before-content",
+    staticStyle: {
+      "position": "absolute",
+      "height": "1px",
+      "width": "1px",
+      "left": "-9999px"
+    },
+    attrs: {
+      "tabindex": "0"
+    },
+    on: {
+      "focus": _vm.focusBeforeContent
+    }
+  }), _vm._v(" "), _c('div', {
+    class: _vm.carbonPrefix + "--modal-header"
+  }, [_c('p', {
+    class: _vm.carbonPrefix + "--modal-header__label"
+  }, [_vm._t("label")], 2), _vm._v(" "), _c('p', {
+    class: _vm.carbonPrefix + "--modal-header__heading"
+  }, [_vm._t("title", function () {
+    return [_vm._v("Modal Title")];
+  })], 2), _vm._v(" "), _c('button', {
+    ref: "close",
+    class: _vm.carbonPrefix + "--modal-close",
+    attrs: {
+      "type": "button",
+      "aria-label": _vm.closeAriaLabel
+    },
+    on: {
+      "click": _vm.onClose
+    }
+  }, [_c('Close16', {
+    class: _vm.carbonPrefix + "--modal-close__icon"
+  })], 1)]), _vm._v(" "), _c('div', {
+    ref: "content",
+    class: [_vm.carbonPrefix + "--modal-content", (_obj$1 = {}, _obj$1[_vm.carbonPrefix + "--modal-content--with-form"] = _vm.hasFormContent, _obj$1)],
+    attrs: {
+      "tabindex": _vm.scrollable ? 0 : undefined
+    }
+  }, [_vm._t("content")], 2), _vm._v(" "), _c('cv-button-set', {
+    class: [_vm.carbonPrefix + "--modal-footer", _vm.carbonPrefix + "--modal-footer--three-button"]
+  }, [_c('NsButton', {
+    staticClass: "wizard-button",
+    attrs: {
+      "kind": "secondary",
+      "icon": _vm.Close20,
+      "type": "button"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('cancel');
+      }
+    }
+  }, [_vm._v(_vm._s(_vm.cancelLabel) + "\n      ")]), _vm._v(" "), _c('NsButton', {
+    staticClass: "wizard-button",
+    attrs: {
+      "kind": "secondary",
+      "icon": _vm.ChevronLeft20,
+      "disabled": _vm.isPreviousDisabled,
+      "type": "button"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('previousStep');
+      }
+    }
+  }, [_vm._v(_vm._s(_vm.previousLabel) + "\n      ")]), _vm._v(" "), _c('NsButton', {
+    ref: "wizardNext",
+    staticClass: "wizard-button",
+    attrs: {
+      "kind": "primary",
+      "icon": _vm.ChevronRight20,
+      "disabled": _vm.isNextDisabled,
+      "loading": _vm.isNextLoading,
+      "type": "submit"
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.$emit('nextStep');
+      }
+    }
+  }, [_vm._v(_vm._s(_vm.nextLabel) + "\n      ")])], 1), _vm._v(" "), _c('div', {
+    ref: "afterContent",
+    staticClass: "cv-modal__after-content",
+    staticStyle: {
+      "position": "absolute",
+      "height": "1px",
+      "width": "1px",
+      "left": "-9999px"
+    },
+    attrs: {
+      "tabindex": "0"
+    },
+    on: {
+      "focus": _vm.focusAfterContent
+    }
+  })], 1)]);
+};
+var __vue_staticRenderFns__$8 = [];
+/* style */
+const __vue_inject_styles__$8 = undefined;
+/* scoped */
+const __vue_scope_id__$8 = undefined;
+/* module identifier */
+const __vue_module_identifier__$8 = undefined;
+/* functional template */
+const __vue_is_functional_template__$8 = false;
+/* style inject */
+/* 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__$2, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined);
+var __vue_component__$h = __vue_component__$g;
+//
+var script$1 = {
+  name: "NsMenuItem",
+  components: {
+    Edit20,
+    TrashCan20,
+    Power20,
+    Rocket20,
+    Launch20,
+    Star20
+  },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    icon: {
+      type: String,
+      validator: value => ["", "edit", "trash", "power", "rocket", "launch", "star"].includes(value)
+    }
+  },
+  computed: {
+    hasIconSlot() {
+      return !!this.$slots.icon;
+    }
+  }
+};
+/* script */
+const __vue_script__$1 = script$1;
+/* template */
+var __vue_render__$7 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    staticClass: "ns-menu-item"
+  }, [_vm.icon == 'edit' ? _c('span', {
+    staticClass: "icon"
+  }, [_c('Edit20')], 1) : _vm.icon == 'trash' ? _c('span', {
+    staticClass: "icon"
+  }, [_c('TrashCan20')], 1) : _vm.icon == 'power' ? _c('span', {
+    staticClass: "icon"
+  }, [_c('Power20')], 1) : _vm.icon == 'rocket' ? _c('span', {
+    staticClass: "icon"
+  }, [_c('Rocket20')], 1) : _vm.icon == 'launch' ? _c('span', {
+    staticClass: "icon"
+  }, [_c('Launch20')], 1) : _vm.icon == 'star' ? _c('span', {
+    staticClass: "icon"
+  }, [_c('Star20')], 1) : _vm.hasIconSlot ? _c('span', {
+    staticClass: "icon"
+  }, [_vm._t("icon")], 2) : _vm._e(), _vm._v(" "), _c('span', [_vm._v(_vm._s(_vm.label))])]);
+};
+var __vue_staticRenderFns__$7 = [];
+/* style */
+const __vue_inject_styles__$7 = function (inject) {
+  if (!inject) return;
+  inject("data-v-6f0a7acc_0", {
+    source: ".ns-menu-item[data-v-6f0a7acc]{display:flex;align-items:center}.icon[data-v-6f0a7acc]{margin-right:.5rem}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+const __vue_scope_id__$7 = "data-v-6f0a7acc";
+/* 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__$1, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, createInjector, undefined, undefined);
+var __vue_component__$f = __vue_component__$e;
+//
+var script = {
+  name: "NsMenuDivider",
+  components: {
+    CvSideNavDivider
+  }
+};
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__$6 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('cv-side-nav-divider');
+};
+var __vue_staticRenderFns__$6 = [];
+/* style */
+const __vue_inject_styles__$6 = undefined;
+/* scoped */
+const __vue_scope_id__$6 = "data-v-c2c8c17e";
 /* module identifier */
 const __vue_module_identifier__$6 = undefined;
 /* functional template */
 const __vue_is_functional_template__$6 = false;
+/* style inject */
 /* style inject SSR */
 /* style inject shadow dom */
@@ -8396,7 +8895,7 @@ const __vue_is_functional_template__$6 = false;
 const __vue_component__$c = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$6,
   staticRenderFns: __vue_staticRenderFns__$6
-}, __vue_inject_styles__$6, __vue_script__, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, createInjector, undefined, undefined);
+}, __vue_inject_styles__$6, __vue_script__, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined);
 var __vue_component__$d = __vue_component__$c;
@@ -16226,28 +16725,31 @@ var filters = {
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  NsButton: __vue_component__$O,
-  NsEmptyState: __vue_component__$J,
+  NsButton: __vue_component__$V,
+  NsEmptyState: __vue_component__$Q,
   NsPictogram: NsPictogram,
-  NsCodeSnippet: __vue_component__$H,
+  NsCodeSnippet: __vue_component__$O,
   NsInlineNotification: NsInlineNotification,
   NsProgressBar: NsProgressBar,
   NsSvg: NsSvg,
-  NsTile: __vue_component__$B,
-  NsToastNotification: __vue_component__$z,
-  NsInfoCard: __vue_component__$x,
-  NsStatusCard: __vue_component__$v,
-  NsSystemdServiceCard: __vue_component__$t,
-  NsPasswordInput: __vue_component__$r,
-  NsIconMenu: __vue_component__$p,
-  NsMeterChart: __vue_component__$n,
-  NsPieChart: __vue_component__$l,
+  NsTile: __vue_component__$I,
+  NsToastNotification: __vue_component__$G,
+  NsInfoCard: __vue_component__$E,
+  NsStatusCard: __vue_component__$C,
+  NsSystemdServiceCard: __vue_component__$A,
+  NsPasswordInput: __vue_component__$y,
+  NsIconMenu: __vue_component__$w,
+  NsMeterChart: __vue_component__$u,
+  NsPieChart: __vue_component__$s,
   NsLottieAnimation: NsLottieAnimation,
-  NsDangerDeleteModal: __vue_component__$j,
+  NsDangerDeleteModal: __vue_component__$q,
   NsCircleTimer: NsCircleTimer,
-  NsDropdownAction: __vue_component__$h,
-  NsTextInput: __vue_component__$f,
-  NsBackupCard: __vue_component__$d,
+  NsDropdownAction: __vue_component__$o,
+  NsTextInput: __vue_component__$m,
+  NsBackupCard: __vue_component__$j,
+  NsWizard: __vue_component__$h,
+  NsMenuItem: __vue_component__$f,
+  NsMenuDivider: __vue_component__$d,
   ExclamationMark: ExclamationMark,
   Gear: __vue_component__$b,
   Love: __vue_component__$9,
@@ -16275,4 +16777,4 @@ const install = function installNs8UiLib(Vue) {
   });
 }; // Create module definition for Vue.use()
-export { __vue_component__$5 as Bulldozer, dataTable as DataTableService, DateTimeService, ExclamationMark, filters as Filters, __vue_component__$b as Gear, __vue_component__$3 as Group, __vue_component__$1 as HardDrive, IconService, lottie as LottieService, __vue_component__$9 as Love, __vue_component__$d as NsBackupCard, __vue_component__$O as NsButton, NsCircleTimer, __vue_component__$H as NsCodeSnippet, __vue_component__$j as NsDangerDeleteModal, __vue_component__$h as NsDropdownAction, __vue_component__$J as NsEmptyState, __vue_component__$p as NsIconMenu, __vue_component__$x as NsInfoCard, NsInlineNotification, NsLottieAnimation, __vue_component__$n as NsMeterChart, __vue_component__$r as NsPasswordInput, NsPictogram, __vue_component__$l as NsPieChart, NsProgressBar, __vue_component__$v as NsStatusCard, NsSvg, __vue_component__$t as NsSystemdServiceCard, __vue_component__$f as NsTextInput, __vue_component__$B as NsTile, __vue_component__$z as NsToastNotification, pageTitle as PageTitleService, queryParam as QueryParamService, StorageService, task as TaskService, UtilService, __vue_component__$7 as Warning, install as default };
+export { __vue_component__$5 as Bulldozer, dataTable as DataTableService, DateTimeService, ExclamationMark, filters as Filters, __vue_component__$b as Gear, __vue_component__$3 as Group, __vue_component__$1 as HardDrive, IconService, lottie as LottieService, __vue_component__$9 as Love, __vue_component__$j as NsBackupCard, __vue_component__$V as NsButton, NsCircleTimer, __vue_component__$O as NsCodeSnippet, __vue_component__$q as NsDangerDeleteModal, __vue_component__$o as NsDropdownAction, __vue_component__$Q as NsEmptyState, __vue_component__$w as NsIconMenu, __vue_component__$E as NsInfoCard, NsInlineNotification, NsLottieAnimation, __vue_component__$d as NsMenuDivider, __vue_component__$f as NsMenuItem, __vue_component__$u as NsMeterChart, __vue_component__$y as NsPasswordInput, NsPictogram, __vue_component__$s as NsPieChart, NsProgressBar, __vue_component__$C as NsStatusCard, NsSvg, __vue_component__$A as NsSystemdServiceCard, __vue_component__$m as NsTextInput, __vue_component__$I as NsTile, __vue_component__$G as NsToastNotification, __vue_component__$h as NsWizard, pageTitle as PageTitleService, queryParam as QueryParamService, StorageService, task as TaskService, UtilService, __vue_component__$7 as Warning, install as default };