@nethserver/ns8-ui-lib 0.0.71 → 0.0.72

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

@@ -312,12 +312,12 @@ const __vue_is_functional_template__$y = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$Y = /*#__PURE__*/normalizeComponent({
+const __vue_component__$X = /*#__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);
 
-var __vue_component__$Z = __vue_component__$Y;
+var __vue_component__$Y = __vue_component__$X;
 
 //
 //
@@ -408,12 +408,12 @@ const __vue_is_functional_template__$x = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$X = /*#__PURE__*/normalizeComponent({
+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, undefined, undefined, undefined);
 
-var NsPictogram = __vue_component__$X;
+var NsPictogram = __vue_component__$W;
 
 //
 var script$p = {
@@ -521,12 +521,12 @@ const __vue_is_functional_template__$w = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$W = /*#__PURE__*/normalizeComponent({
+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, undefined, undefined, undefined);
 
-var NsLottieAnimation = __vue_component__$W;
+var NsLottieAnimation = __vue_component__$V;
 
 /* script */
 
@@ -565,12 +565,12 @@ const __vue_is_functional_template__$v = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$V = /*#__PURE__*/normalizeComponent({
+const __vue_component__$U = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$t,
   staticRenderFns: __vue_staticRenderFns__$t
 }, __vue_inject_styles__$v, {}, __vue_scope_id__$v, __vue_is_functional_template__$v, __vue_module_identifier__$v, false, undefined, undefined, undefined);
 
-var ExclamationMarkPictogram = __vue_component__$V;
+var ExclamationMarkPictogram = __vue_component__$U;
 
 //
 var script$o = {
@@ -663,12 +663,12 @@ const __vue_is_functional_template__$u = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$T = /*#__PURE__*/normalizeComponent({
+const __vue_component__$S = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$s,
   staticRenderFns: __vue_staticRenderFns__$s
 }, __vue_inject_styles__$u, __vue_script__$o, __vue_scope_id__$u, __vue_is_functional_template__$u, __vue_module_identifier__$u, false, createInjector, undefined, undefined);
 
-var __vue_component__$U = __vue_component__$T;
+var __vue_component__$T = __vue_component__$S;
 
 //
 var script$n = {
@@ -873,12 +873,12 @@ const __vue_is_functional_template__$t = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$R = /*#__PURE__*/normalizeComponent({
+const __vue_component__$Q = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$r,
   staticRenderFns: __vue_staticRenderFns__$r
 }, __vue_inject_styles__$t, __vue_script__$n, __vue_scope_id__$t, __vue_is_functional_template__$t, __vue_module_identifier__$t, false, createInjector, undefined, undefined);
 
-var __vue_component__$S = __vue_component__$R;
+var __vue_component__$R = __vue_component__$Q;
 
 //
 //
@@ -1033,12 +1033,12 @@ const __vue_is_functional_template__$s = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$Q = /*#__PURE__*/normalizeComponent({
+const __vue_component__$P = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$q,
   staticRenderFns: __vue_staticRenderFns__$q
 }, __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 NsCircleTimer = __vue_component__$Q;
+var NsCircleTimer = __vue_component__$P;
 
 //
 var script$l = {
@@ -1177,12 +1177,12 @@ const __vue_is_functional_template__$r = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$P = /*#__PURE__*/normalizeComponent({
+const __vue_component__$O = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$p,
   staticRenderFns: __vue_staticRenderFns__$p
 }, __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 NsInlineNotification = __vue_component__$P;
+var NsInlineNotification = __vue_component__$O;
 
 //
 //
@@ -1285,12 +1285,12 @@ const __vue_is_functional_template__$q = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$O = /*#__PURE__*/normalizeComponent({
+const __vue_component__$N = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$o,
   staticRenderFns: __vue_staticRenderFns__$o
 }, __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 NsProgressBar = __vue_component__$O;
+var NsProgressBar = __vue_component__$N;
 
 var script$j = {
   name: "NsSvg",
@@ -1372,9 +1372,9 @@ const __vue_is_functional_template__$p = undefined;
 
 /* style inject shadow dom */
 
-const __vue_component__$N = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$p, __vue_script__$j, __vue_scope_id__$p, __vue_is_functional_template__$p, __vue_module_identifier__$p, false, undefined, undefined, undefined);
+const __vue_component__$M = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$p, __vue_script__$j, __vue_scope_id__$p, __vue_is_functional_template__$p, __vue_module_identifier__$p, false, undefined, undefined, undefined);
 
-var NsSvg = __vue_component__$N;
+var NsSvg = __vue_component__$M;
 
 //
 var script$i = {
@@ -1518,12 +1518,12 @@ const __vue_is_functional_template__$o = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$L = /*#__PURE__*/normalizeComponent({
+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 __vue_component__$M = __vue_component__$L;
+var __vue_component__$L = __vue_component__$K;
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -6148,6 +6148,14 @@ var script$h = {
       type: Boolean,
       default: false
     },
+    cancelLabel: {
+      type: String,
+      default: "Abort"
+    },
+    confirmCancelLabel: {
+      type: String,
+      default: "Confirm abort"
+    },
     closeAriaLabel: {
       type: String,
       default: "Dismiss notification"
@@ -6158,6 +6166,30 @@ var script$h = {
       validator: val => ["error", "info", "warning", "success"].includes(val)
     },
     lowContrast: Boolean
+  },
+
+  data() {
+    return {
+      isConfirmCancelShown: false,
+      isCancelButtonDisabled: false
+    };
+  },
+
+  methods: {
+    cancelTask() {
+      if (!this.isConfirmCancelShown) {
+        // show confirmation
+        this.isConfirmCancelShown = true;
+        setTimeout(() => {
+          this.isConfirmCancelShown = false;
+        }, 5000);
+      } else {
+        // cancel task
+        this.$emit("cancelTask", this.id);
+        this.isCancelButtonDisabled = true;
+      }
+    }
+
   }
 };
 
@@ -6192,7 +6224,7 @@ var __vue_render__$m = function () {
     class: _vm.carbonPrefix + "--toast-notification__title"
   }, [_vm._v("\n        " + _vm._s(_vm.title) + "\n      ")]), _vm._v(" "), _c('div', {
     class: [_vm.carbonPrefix + "--toast-notification__subtitle", "notification-description-and-progress", "row", {
-      'fix-margin-bottom': _vm.actionLabel
+      'fix-margin-bottom': _vm.actionLabel || _vm.isProgressShown
     }]
   }, [_c('span', {
     domProps: {
@@ -6209,7 +6241,22 @@ var __vue_render__$m = function () {
     staticClass: "progress-bar-spacer"
   }), _vm._v(" "), _vm.progress ? _c('div', {
     staticClass: "progress-number"
-  }, [_vm._v(_vm._s(_vm.progress) + " %")]) : _vm._e()], 1) : _vm._e()]), _vm._v(" "), _vm.actionLabel ? _c('div', {
+  }, [_vm._v(_vm._s(_vm.progress) + " %")]) : _vm._e()], 1) : _vm._e()]), _vm._v(" "), _vm.isProgressShown ? _c('div', {
+    class: [_vm.carbonPrefix + "--toast-notification__caption", "action", "row"]
+  }, [_c('button', {
+    class: [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", {
+      'bx--btn--ghost': !_vm.isConfirmCancelShown
+    }, {
+      'bx--btn--danger': _vm.isConfirmCancelShown
+    }],
+    attrs: {
+      "disabled": _vm.isCancelButtonDisabled,
+      "type": "button"
+    },
+    on: {
+      "click": _vm.cancelTask
+    }
+  }, [_vm._v("\n          " + _vm._s(_vm.isConfirmCancelShown ? _vm.confirmCancelLabel : _vm.cancelLabel) + "\n        ")])]) : _vm.actionLabel ? _c('div', {
     class: [_vm.carbonPrefix + "--toast-notification__caption", "action", "row"]
   }, [_c('button', {
     class: [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", _vm.carbonPrefix + "--btn--ghost"],
@@ -6253,11 +6300,11 @@ var __vue_staticRenderFns__$m = [];
 
 const __vue_inject_styles__$n = function (inject) {
   if (!inject) return;
-  inject("data-v-7385c86a_0", {
-    source: ".notification[data-v-7385c86a]{margin-bottom:0;margin-right:0}.action[data-v-7385c86a]{padding-top:0;margin-bottom:0}.bx--toast-notification .bx--inline-notification__action-button.bx--btn--ghost[data-v-7385c86a]{margin-left:-16px}.notification-description-and-progress[data-v-7385c86a]{margin-top:.75rem;margin-bottom:.75rem}.fix-margin-bottom[data-v-7385c86a]{margin-bottom:0}.progress[data-v-7385c86a]{margin-top:.75rem}.progress-bar-spacer[data-v-7385c86a]{height:.5rem}.cv-notifiation.bx--toast-notification.notification[data-v-7385c86a]{width:26vw;min-width:20rem;margin-top:0}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-7385c86a]{margin-top:1rem}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-7385c86a]{width:100%;cursor:pointer}.notification-read[data-v-7385c86a]{border-color:#8d8d8d;color:#c6c6c6}.notification-read .bx--toast-notification__icon[data-v-7385c86a]{fill:currentColor}.notification-read .bx--toast-notification__subtitle[data-v-7385c86a]{color:#c6c6c6}.notification-read .bx--toast-notification__title[data-v-7385c86a]{font-weight:400}.cv-notifiation .timestamp[data-v-7385c86a]{margin-bottom:.75rem;line-height:1.29;color:#fff;text-decoration:underline}.cv-notifiation .timestamp button[data-v-7385c86a]{color:#c6c6c6}.bx--tooltip__trigger[data-v-7385c86a]:not(.bx--btn--icon-only){font-size:inherit}.cv-notifiation .timestamp .bx--tooltip__trigger[data-v-7385c86a]::before{border-bottom-color:#161616}div.row[data-v-7385c86a]:last-child{margin-bottom:1.5rem}.bx--toast-notification__details[data-v-7385c86a]{flex-grow:1}",
+  inject("data-v-06b7021e_0", {
+    source: ".notification[data-v-06b7021e]{margin-bottom:0;margin-right:0}.action[data-v-06b7021e]{padding-top:0;margin-bottom:0}.bx--toast-notification .bx--inline-notification__action-button[data-v-06b7021e]{margin-left:-1rem}.bx--toast-notification .bx--inline-notification__action-button.bx--btn--danger[data-v-06b7021e]{margin:.5rem 0 .5rem -1rem}.notification-description-and-progress[data-v-06b7021e]{margin-top:.75rem;margin-bottom:.75rem}.fix-margin-bottom[data-v-06b7021e]{margin-bottom:0}.progress[data-v-06b7021e]{margin-top:.75rem}.progress-bar-spacer[data-v-06b7021e]{height:.5rem}.cv-notifiation.bx--toast-notification.notification[data-v-06b7021e]{width:26vw;min-width:20rem;margin-top:0}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-06b7021e]{margin-top:1rem}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-06b7021e]{width:100%;cursor:pointer}.notification-read[data-v-06b7021e]{border-color:#8d8d8d;color:#c6c6c6}.notification-read .bx--toast-notification__icon[data-v-06b7021e]{fill:currentColor}.notification-read .bx--toast-notification__subtitle[data-v-06b7021e]{color:#c6c6c6}.notification-read .bx--toast-notification__title[data-v-06b7021e]{font-weight:400}.cv-notifiation .timestamp[data-v-06b7021e]{margin-bottom:.75rem;line-height:1.29;color:#fff;text-decoration:underline}.cv-notifiation .timestamp button[data-v-06b7021e]{color:#c6c6c6}.bx--tooltip__trigger[data-v-06b7021e]:not(.bx--btn--icon-only){font-size:inherit}.cv-notifiation .timestamp .bx--tooltip__trigger[data-v-06b7021e]::before{border-bottom-color:#161616}div.row[data-v-06b7021e]:last-child{margin-bottom:1.5rem}.bx--toast-notification__details[data-v-06b7021e]{flex-grow:1}",
     map: undefined,
     media: undefined
-  }), inject("data-v-7385c86a_1", {
+  }), inject("data-v-06b7021e_1", {
     source: ".cv-notifiation .timestamp button span{background-color:#161616!important;border-left:1px solid #393939;border-right:1px solid #393939;border-bottom:1px solid #393939}",
     map: undefined,
     media: undefined
@@ -6266,7 +6313,7 @@ const __vue_inject_styles__$n = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$n = "data-v-7385c86a";
+const __vue_scope_id__$n = "data-v-06b7021e";
 /* module identifier */
 
 const __vue_module_identifier__$n = undefined;
@@ -6277,12 +6324,12 @@ const __vue_is_functional_template__$n = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$J = /*#__PURE__*/normalizeComponent({
+const __vue_component__$I = /*#__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);
 
-var __vue_component__$K = __vue_component__$J;
+var __vue_component__$J = __vue_component__$I;
 
 //
 var script$g = {
@@ -6421,12 +6468,12 @@ const __vue_is_functional_template__$m = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$H = /*#__PURE__*/normalizeComponent({
+const __vue_component__$G = /*#__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);
 
-var __vue_component__$I = __vue_component__$H;
+var __vue_component__$H = __vue_component__$G;
 
 //
 var script$f = {
@@ -6573,12 +6620,12 @@ const __vue_is_functional_template__$l = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$F = /*#__PURE__*/normalizeComponent({
+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);
 
-var __vue_component__$G = __vue_component__$F;
+var __vue_component__$F = __vue_component__$E;
 
 //
 var script$e = {
@@ -6718,12 +6765,12 @@ const __vue_is_functional_template__$k = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$D = /*#__PURE__*/normalizeComponent({
+const __vue_component__$C = /*#__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);
 
-var __vue_component__$E = __vue_component__$D;
+var __vue_component__$D = __vue_component__$C;
 
 // Unique ID creation requires a high quality random # generator.  In node.js
 // this is pretty straight-forward - we use the crypto API.
@@ -7459,12 +7506,12 @@ const __vue_is_functional_template__$j = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$B = /*#__PURE__*/normalizeComponent({
+const __vue_component__$A = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$i,
   staticRenderFns: __vue_staticRenderFns__$i
 }, __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__$C = __vue_component__$B;
+var __vue_component__$B = __vue_component__$A;
 
 //
 var script$c = {
@@ -7655,12 +7702,12 @@ const __vue_is_functional_template__$i = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$z = /*#__PURE__*/normalizeComponent({
+const __vue_component__$y = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$h,
   staticRenderFns: __vue_staticRenderFns__$h
 }, __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__$A = __vue_component__$z;
+var __vue_component__$z = __vue_component__$y;
 
 //
 Vue.use(chartsVue);
@@ -7775,12 +7822,12 @@ const __vue_is_functional_template__$h = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$x = /*#__PURE__*/normalizeComponent({
+const __vue_component__$w = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$g,
   staticRenderFns: __vue_staticRenderFns__$g
 }, __vue_inject_styles__$h, __vue_script__$b, __vue_scope_id__$h, __vue_is_functional_template__$h, __vue_module_identifier__$h, false, undefined, undefined, undefined);
 
-var __vue_component__$y = __vue_component__$x;
+var __vue_component__$x = __vue_component__$w;
 
 //
 Vue.use(chartsVue);
@@ -7877,12 +7924,12 @@ const __vue_is_functional_template__$g = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$v = /*#__PURE__*/normalizeComponent({
+const __vue_component__$u = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$f,
   staticRenderFns: __vue_staticRenderFns__$f
 }, __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__$w = __vue_component__$v;
+var __vue_component__$v = __vue_component__$u;
 
 //
 var script$9 = {
@@ -8057,12 +8104,12 @@ const __vue_is_functional_template__$f = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$t = /*#__PURE__*/normalizeComponent({
+const __vue_component__$s = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$e,
   staticRenderFns: __vue_staticRenderFns__$e
 }, __vue_inject_styles__$f, __vue_script__$9, __vue_scope_id__$f, __vue_is_functional_template__$f, __vue_module_identifier__$f, false, createInjector, undefined, undefined);
 
-var __vue_component__$u = __vue_component__$t;
+var __vue_component__$t = __vue_component__$s;
 
 var IconService = {
   name: "IconService",
@@ -8071,6 +8118,7 @@ var IconService = {
     return {
       Close20,
       ArrowRight20,
+      // navigate to another page, move module
       ArrowRight32,
       Notification20,
       UserAvatar20,
@@ -8108,6 +8156,7 @@ var IconService = {
       // save buttons and backups
       Save32,
       Copy20,
+      // copy to clipboard, clone module
       EdgeNode20,
       EdgeNode32,
       Cube32,
@@ -8343,12 +8392,12 @@ const __vue_is_functional_template__$e = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$r = /*#__PURE__*/normalizeComponent({
+const __vue_component__$q = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$d,
   staticRenderFns: __vue_staticRenderFns__$d
 }, __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__$s = __vue_component__$r;
+var __vue_component__$r = __vue_component__$q;
 
 //
 var script$7 = {
@@ -8515,12 +8564,12 @@ const __vue_is_functional_template__$d = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$p = /*#__PURE__*/normalizeComponent({
+const __vue_component__$o = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$c,
   staticRenderFns: __vue_staticRenderFns__$c
 }, __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__$q = __vue_component__$p;
+var __vue_component__$p = __vue_component__$o;
 
 //
 var script$6 = {
@@ -8641,12 +8690,12 @@ const __vue_is_functional_template__$c = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$o = /*#__PURE__*/normalizeComponent({
+const __vue_component__$n = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$b,
   staticRenderFns: __vue_staticRenderFns__$b
 }, __vue_inject_styles__$c, __vue_script__$6, __vue_scope_id__$c, __vue_is_functional_template__$c, __vue_module_identifier__$c, false, createInjector, undefined, undefined);
 
-var NsBackupCardDetails = __vue_component__$o;
+var NsBackupCardDetails = __vue_component__$n;
 
 //
 var script$5 = {
@@ -8938,17 +8987,79 @@ const __vue_is_functional_template__$b = false;
 
 /* style inject shadow dom */
 
-const __vue_component__$m = /*#__PURE__*/normalizeComponent({
+const __vue_component__$l = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$a,
   staticRenderFns: __vue_staticRenderFns__$a
 }, __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__$n = __vue_component__$m;
+var __vue_component__$m = __vue_component__$l;
 
-//
 var script$4 = {
-  name: "NsWizard",
+  name: "NsModal",
   extends: CvModal,
+  props: {
+    hideOnClickOutside: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onExternalClick(ev) {
+      if (this.hideOnClickOutside) {
+        if (ev.target === this.$el) {
+          this._maybeHide(ev, "external-click");
+        }
+      }
+    }
+
+  },
+
+  focusBeforeContent() {
+    this.$nextTick(() => {
+      if (this.$slots["primary-button"] && !this.primaryButtonDisabled) {
+        this.$refs.primary.$el.focus();
+      } else if (this.$slots["secondary-button"]) {
+        this.$refs.secondary.$el.focus();
+      } else if (this.$slots["other-button"]) {
+        this.$refs.otherBtn.$el.focus();
+      } else {
+        this.$refs.close.focus();
+      }
+    });
+  }
+
+};
+
+/* script */
+const __vue_script__$4 = script$4;
+/* template */
+
+/* style */
+
+const __vue_inject_styles__$a = undefined;
+/* scoped */
+
+const __vue_scope_id__$a = undefined;
+/* module identifier */
+
+const __vue_module_identifier__$a = undefined;
+/* functional template */
+
+const __vue_is_functional_template__$a = undefined;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$k = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$a, __vue_script__$4, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, undefined, undefined, undefined);
+
+var NsModal = __vue_component__$k;
+
+//
+var script$3 = {
+  name: "NsWizard",
+  extends: NsModal,
   mixins: [IconService],
   props: {
     cancelLabel: {
@@ -8973,11 +9084,23 @@ var script$4 = {
     autoHideOff: Boolean,
     visible: Boolean,
     size: String
+  },
+  methods: {
+    focusBeforeContent() {
+      this.$nextTick(() => {
+        if (this.isNextDisabled) {
+          this.$refs.wizardCancel.$el.focus();
+        } else {
+          this.$refs.wizardNext.$el.focus();
+        }
+      });
+    }
+
   }
 };
 
 /* script */
-const __vue_script__$4 = script$4;
+const __vue_script__$3 = script$3;
 /* template */
 
 var __vue_render__$9 = function () {
@@ -9062,6 +9185,7 @@ var __vue_render__$9 = function () {
   }, [_vm._t("content")], 2), _vm._v(" "), _c('cv-button-set', {
     class: [_vm.carbonPrefix + "--modal-footer", _vm.carbonPrefix + "--modal-footer--three-button"]
   }, [_c('NsButton', {
+    ref: "wizardCancel",
     staticClass: "wizard-button",
     attrs: {
       "kind": "secondary",
@@ -9074,6 +9198,7 @@ var __vue_render__$9 = function () {
       }
     }
   }, [_vm._v(_vm._s(_vm.cancelLabel) + "\n      ")]), _vm._v(" "), _c('NsButton', {
+    ref: "wizardPrevious",
     staticClass: "wizard-button",
     attrs: {
       "kind": "secondary",
@@ -9122,31 +9247,31 @@ var __vue_render__$9 = function () {
 var __vue_staticRenderFns__$9 = [];
 /* style */
 
-const __vue_inject_styles__$a = undefined;
+const __vue_inject_styles__$9 = undefined;
 /* scoped */
 
-const __vue_scope_id__$a = undefined;
+const __vue_scope_id__$9 = undefined;
 /* module identifier */
 
-const __vue_module_identifier__$a = undefined;
+const __vue_module_identifier__$9 = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$a = false;
+const __vue_is_functional_template__$9 = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$k = /*#__PURE__*/normalizeComponent({
+const __vue_component__$i = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$9,
   staticRenderFns: __vue_staticRenderFns__$9
-}, __vue_inject_styles__$a, __vue_script__$4, __vue_scope_id__$a, __vue_is_functional_template__$a, __vue_module_identifier__$a, false, undefined, undefined, undefined);
+}, __vue_inject_styles__$9, __vue_script__$3, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, undefined, undefined, undefined);
 
-var __vue_component__$l = __vue_component__$k;
+var __vue_component__$j = __vue_component__$i;
 
 //
-var script$3 = {
+var script$2 = {
   name: "NsMenuItem",
   components: {
     NsSvg
@@ -9169,7 +9294,7 @@ var script$3 = {
 };
 
 /* script */
-const __vue_script__$3 = script$3;
+const __vue_script__$2 = script$2;
 /* template */
 
 var __vue_render__$8 = function () {
@@ -9195,7 +9320,7 @@ var __vue_render__$8 = function () {
 var __vue_staticRenderFns__$8 = [];
 /* style */
 
-const __vue_inject_styles__$9 = function (inject) {
+const __vue_inject_styles__$8 = function (inject) {
   if (!inject) return;
   inject("data-v-35f08832_0", {
     source: ".ns-menu-item[data-v-35f08832]{display:flex;align-items:center}.icon[data-v-35f08832]{margin-right:.5rem}",
@@ -9206,26 +9331,26 @@ const __vue_inject_styles__$9 = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$9 = "data-v-35f08832";
+const __vue_scope_id__$8 = "data-v-35f08832";
 /* module identifier */
 
-const __vue_module_identifier__$9 = undefined;
+const __vue_module_identifier__$8 = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$9 = false;
+const __vue_is_functional_template__$8 = false;
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$i = /*#__PURE__*/normalizeComponent({
+const __vue_component__$g = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$8,
   staticRenderFns: __vue_staticRenderFns__$8
-}, __vue_inject_styles__$9, __vue_script__$3, __vue_scope_id__$9, __vue_is_functional_template__$9, __vue_module_identifier__$9, false, createInjector, undefined, undefined);
+}, __vue_inject_styles__$8, __vue_script__$2, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, createInjector, undefined, undefined);
 
-var __vue_component__$j = __vue_component__$i;
+var __vue_component__$h = __vue_component__$g;
 
 //
-var script$2 = {
+var script$1 = {
   name: "NsMenuDivider",
   components: {
     CvSideNavDivider
@@ -9233,7 +9358,7 @@ var script$2 = {
 };
 
 /* script */
-const __vue_script__$2 = script$2;
+const __vue_script__$1 = script$1;
 /* template */
 
 var __vue_render__$7 = function () {
@@ -9249,31 +9374,31 @@ var __vue_render__$7 = function () {
 var __vue_staticRenderFns__$7 = [];
 /* style */
 
-const __vue_inject_styles__$8 = undefined;
+const __vue_inject_styles__$7 = undefined;
 /* scoped */
 
-const __vue_scope_id__$8 = "data-v-c2c8c17e";
+const __vue_scope_id__$7 = "data-v-c2c8c17e";
 /* module identifier */
 
-const __vue_module_identifier__$8 = undefined;
+const __vue_module_identifier__$7 = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$8 = false;
+const __vue_is_functional_template__$7 = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$g = /*#__PURE__*/normalizeComponent({
+const __vue_component__$e = /*#__PURE__*/normalizeComponent({
   render: __vue_render__$7,
   staticRenderFns: __vue_staticRenderFns__$7
-}, __vue_inject_styles__$8, __vue_script__$2, __vue_scope_id__$8, __vue_is_functional_template__$8, __vue_module_identifier__$8, false, undefined, undefined, undefined);
+}, __vue_inject_styles__$7, __vue_script__$1, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined);
 
-var __vue_component__$h = __vue_component__$g;
+var __vue_component__$f = __vue_component__$e;
 
 //
-var script$1 = {
+var script = {
   name: "NsSystemLogsCard",
   mixins: [UtilService, IconService],
   props: {
@@ -9392,7 +9517,7 @@ var script$1 = {
 };
 
 /* script */
-const __vue_script__$1 = script$1;
+const __vue_script__ = script;
 /* template */
 
 var __vue_render__$6 = function () {
@@ -9425,73 +9550,26 @@ var __vue_render__$6 = function () {
 var __vue_staticRenderFns__$6 = [];
 /* style */
 
-const __vue_inject_styles__$7 = undefined;
-/* scoped */
-
-const __vue_scope_id__$7 = "data-v-aec74b8e";
-/* module identifier */
-
-const __vue_module_identifier__$7 = undefined;
-/* functional template */
-
-const __vue_is_functional_template__$7 = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__$e = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__$6,
-  staticRenderFns: __vue_staticRenderFns__$6
-}, __vue_inject_styles__$7, __vue_script__$1, __vue_scope_id__$7, __vue_is_functional_template__$7, __vue_module_identifier__$7, false, undefined, undefined, undefined);
-
-var __vue_component__$f = __vue_component__$e;
-
-var script = {
-  name: "NsModal",
-  extends: CvModal,
-  props: {
-    hideOnClickOutside: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    onExternalClick(ev) {
-      if (this.hideOnClickOutside) {
-        if (ev.target === this.$el) {
-          this._maybeHide(ev, "external-click");
-        }
-      }
-    }
-
-  }
-};
-
-/* script */
-const __vue_script__ = script;
-/* template */
-
-/* style */
-
 const __vue_inject_styles__$6 = undefined;
 /* scoped */
 
-const __vue_scope_id__$6 = undefined;
+const __vue_scope_id__$6 = "data-v-aec74b8e";
 /* module identifier */
 
 const __vue_module_identifier__$6 = undefined;
 /* functional template */
 
-const __vue_is_functional_template__$6 = undefined;
+const __vue_is_functional_template__$6 = false;
 /* style inject */
 
 /* style inject SSR */
 
 /* style inject shadow dom */
 
-const __vue_component__$c = /*#__PURE__*/normalizeComponent({}, __vue_inject_styles__$6, __vue_script__, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, false, undefined, undefined, undefined);
+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, undefined, undefined, undefined);
 
 var __vue_component__$d = __vue_component__$c;
 
@@ -17338,33 +17416,33 @@ var filters = {
 
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  NsButton: __vue_component__$Z,
-  NsEmptyState: __vue_component__$U,
+  NsButton: __vue_component__$Y,
+  NsEmptyState: __vue_component__$T,
   NsPictogram: NsPictogram,
-  NsCodeSnippet: __vue_component__$S,
+  NsCodeSnippet: __vue_component__$R,
   NsInlineNotification: NsInlineNotification,
   NsProgressBar: NsProgressBar,
   NsSvg: NsSvg,
-  NsTile: __vue_component__$M,
-  NsToastNotification: __vue_component__$K,
-  NsInfoCard: __vue_component__$I,
-  NsStatusCard: __vue_component__$G,
-  NsSystemdServiceCard: __vue_component__$E,
-  NsPasswordInput: __vue_component__$C,
-  NsIconMenu: __vue_component__$A,
-  NsMeterChart: __vue_component__$y,
-  NsPieChart: __vue_component__$w,
+  NsTile: __vue_component__$L,
+  NsToastNotification: __vue_component__$J,
+  NsInfoCard: __vue_component__$H,
+  NsStatusCard: __vue_component__$F,
+  NsSystemdServiceCard: __vue_component__$D,
+  NsPasswordInput: __vue_component__$B,
+  NsIconMenu: __vue_component__$z,
+  NsMeterChart: __vue_component__$x,
+  NsPieChart: __vue_component__$v,
   NsLottieAnimation: NsLottieAnimation,
-  NsDangerDeleteModal: __vue_component__$u,
+  NsDangerDeleteModal: __vue_component__$t,
   NsCircleTimer: NsCircleTimer,
-  NsDropdownAction: __vue_component__$s,
-  NsTextInput: __vue_component__$q,
-  NsBackupCard: __vue_component__$n,
-  NsWizard: __vue_component__$l,
-  NsMenuItem: __vue_component__$j,
-  NsMenuDivider: __vue_component__$h,
-  NsSystemLogsCard: __vue_component__$f,
-  NsModal: __vue_component__$d,
+  NsDropdownAction: __vue_component__$r,
+  NsTextInput: __vue_component__$p,
+  NsBackupCard: __vue_component__$m,
+  NsWizard: __vue_component__$j,
+  NsMenuItem: __vue_component__$h,
+  NsMenuDivider: __vue_component__$f,
+  NsSystemLogsCard: __vue_component__$d,
+  NsModal: NsModal,
   ExclamationMarkPictogram: ExclamationMarkPictogram,
   GearPictogram: __vue_component__$b,
   LovePictogram: __vue_component__$9,
@@ -17392,4 +17470,4 @@ const install = function installNs8UiLib(Vue) {
   });
 }; // Create module definition for Vue.use()
 
-export { __vue_component__$5 as BulldozerPictogram, dataTable as DataTableService, DateTimeService, ExclamationMarkPictogram, filters as Filters, __vue_component__$b as GearPictogram, __vue_component__$3 as GroupPictogram, __vue_component__$1 as HardDrivePictogram, IconService, lottie as LottieService, __vue_component__$9 as LovePictogram, __vue_component__$n as NsBackupCard, __vue_component__$Z as NsButton, NsCircleTimer, __vue_component__$S as NsCodeSnippet, __vue_component__$u as NsDangerDeleteModal, __vue_component__$s as NsDropdownAction, __vue_component__$U as NsEmptyState, __vue_component__$A as NsIconMenu, __vue_component__$I as NsInfoCard, NsInlineNotification, NsLottieAnimation, __vue_component__$h as NsMenuDivider, __vue_component__$j as NsMenuItem, __vue_component__$y as NsMeterChart, __vue_component__$d as NsModal, __vue_component__$C as NsPasswordInput, NsPictogram, __vue_component__$w as NsPieChart, NsProgressBar, __vue_component__$G as NsStatusCard, NsSvg, __vue_component__$f as NsSystemLogsCard, __vue_component__$E as NsSystemdServiceCard, __vue_component__$q as NsTextInput, __vue_component__$M as NsTile, __vue_component__$K as NsToastNotification, __vue_component__$l as NsWizard, pageTitle as PageTitleService, queryParam as QueryParamService, StorageService, task as TaskService, UtilService, __vue_component__$7 as WarningPictogram, install as default };
+export { __vue_component__$5 as BulldozerPictogram, dataTable as DataTableService, DateTimeService, ExclamationMarkPictogram, filters as Filters, __vue_component__$b as GearPictogram, __vue_component__$3 as GroupPictogram, __vue_component__$1 as HardDrivePictogram, IconService, lottie as LottieService, __vue_component__$9 as LovePictogram, __vue_component__$m as NsBackupCard, __vue_component__$Y as NsButton, NsCircleTimer, __vue_component__$R as NsCodeSnippet, __vue_component__$t as NsDangerDeleteModal, __vue_component__$r as NsDropdownAction, __vue_component__$T as NsEmptyState, __vue_component__$z as NsIconMenu, __vue_component__$H as NsInfoCard, NsInlineNotification, NsLottieAnimation, __vue_component__$f as NsMenuDivider, __vue_component__$h as NsMenuItem, __vue_component__$x as NsMeterChart, NsModal, __vue_component__$B as NsPasswordInput, NsPictogram, __vue_component__$v as NsPieChart, NsProgressBar, __vue_component__$F as NsStatusCard, NsSvg, __vue_component__$d as NsSystemLogsCard, __vue_component__$D as NsSystemdServiceCard, __vue_component__$p as NsTextInput, __vue_component__$L as NsTile, __vue_component__$J as NsToastNotification, __vue_component__$j as NsWizard, pageTitle as PageTitleService, queryParam as QueryParamService, StorageService, task as TaskService, UtilService, __vue_component__$7 as WarningPictogram, install as default };