@nethserver/ns8-ui-lib 1.12.3 → 1.12.4

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

@@ -7425,9 +7425,17 @@ var script$t = {
       type: String,
       default: "Abort"
     },
+    confirmCancelText: {
+      type: String,
+      default: "Abort this task? This action can't be undone"
+    },
+    keepRunningLabel: {
+      type: String,
+      default: "Keep running"
+    },
     confirmCancelLabel: {
       type: String,
-      default: "Confirm abort"
+      default: "Yes, abort"
     },
     closeAriaLabel: {
       type: String,
@@ -7444,23 +7452,24 @@ var script$t = {
   data() {
     return {
       isConfirmCancelShown: false,
-      isCancelButtonDisabled: false
+      isCancelButtonDisabled: false,
+      isKeepRunningButtonDisabled: 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;
-      }
+      this.isConfirmCancelShown = true;
+    },
+
+    handleKeepRunning() {
+      this.isConfirmCancelShown = false;
+    },
+
+    confirmCancelTask() {
+      this.$emit("cancelTask", this.id);
+      this.isCancelButtonDisabled = true;
+      this.isKeepRunningButtonDisabled = true;
     }
 
   }
@@ -7510,22 +7519,41 @@ var __vue_render__$F = 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()], 2), _vm._v(" "), _vm.isCancelShown && _vm.isProgressShown ? _c('div', {
+  }, [_vm._v(_vm._s(_vm.progress) + " %")]) : _vm._e()], 1) : _vm._e()], 2), _vm._v(" "), _vm.isCancelShown && _vm.isProgressShown && !_vm.isConfirmCancelShown ? _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
-    }],
+    class: [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", "bx--btn--ghost"],
     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', {
+  }, [_vm._v("\n          " + _vm._s(_vm.cancelLabel) + "\n        ")])]) : _vm.isCancelShown && _vm.isProgressShown && _vm.isConfirmCancelShown ? _c('div', {
+    staticClass: "cancel-confirmation"
+  }, [_c('p', {
+    staticClass: "cancel-confirmation__text"
+  }, [_vm._v(_vm._s(_vm.confirmCancelText))]), _vm._v(" "), _c('div', {
+    staticClass: "cancel-confirmation__buttons"
+  }, [_c('button', {
+    class: [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", "bx--btn--ghost"],
+    attrs: {
+      "type": "button",
+      "disabled": _vm.isKeepRunningButtonDisabled
+    },
+    on: {
+      "click": _vm.handleKeepRunning
+    }
+  }, [_vm._v("\n            " + _vm._s(_vm.keepRunningLabel) + "\n          ")]), _vm._v(" "), _c('button', {
+    class: [_vm.carbonPrefix + "--inline-notification__action-button", _vm.carbonPrefix + "--btn", _vm.carbonPrefix + "--btn--sm", "bx--btn--danger"],
+    attrs: {
+      "disabled": _vm.isCancelButtonDisabled,
+      "type": "button"
+    },
+    on: {
+      "click": _vm.confirmCancelTask
+    }
+  }, [_vm._v("\n            " + _vm._s(_vm.confirmCancelLabel) + "\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"],
@@ -7569,11 +7597,11 @@ var __vue_staticRenderFns__$F = [];
 
 const __vue_inject_styles__$H = function (inject) {
   if (!inject) return;
-  inject("data-v-014a0a7f_0", {
-    source: ".notification[data-v-014a0a7f]{margin-bottom:0;margin-right:0}.action[data-v-014a0a7f]{padding-top:0;margin-bottom:0}.bx--toast-notification .bx--inline-notification__action-button[data-v-014a0a7f]{margin-left:-1rem}.bx--toast-notification .bx--inline-notification__action-button.bx--btn--danger[data-v-014a0a7f]{margin:.5rem 0 .5rem -1rem}.notification-description-and-progress[data-v-014a0a7f]{margin-top:.75rem;margin-bottom:.75rem}.fix-margin-bottom[data-v-014a0a7f]{margin-bottom:0}.progress[data-v-014a0a7f]{margin-top:.75rem}.progress-bar-spacer[data-v-014a0a7f]{height:.5rem}.cv-notifiation.bx--toast-notification.notification[data-v-014a0a7f]{width:26vw;min-width:20rem;margin-top:0}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-014a0a7f]{margin-top:1rem}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-014a0a7f]{width:100%}.notification-read[data-v-014a0a7f]{border-color:#8d8d8d;color:#c6c6c6}.notification-read .bx--toast-notification__icon[data-v-014a0a7f]{fill:currentColor}.notification-read .bx--toast-notification__subtitle[data-v-014a0a7f]{color:#c6c6c6}.notification-read .bx--toast-notification__title[data-v-014a0a7f]{font-weight:400}.cv-notifiation .timestamp[data-v-014a0a7f]{margin-bottom:.75rem;line-height:1.29;color:#fff;text-decoration:underline}.cv-notifiation .timestamp button[data-v-014a0a7f]{color:#c6c6c6}.bx--tooltip__trigger[data-v-014a0a7f]:not(.bx--btn--icon-only){font-size:inherit}.cv-notifiation .timestamp .bx--tooltip__trigger[data-v-014a0a7f]::before{border-bottom-color:#161616}div.row[data-v-014a0a7f]:last-child{margin-bottom:1.5rem}.bx--toast-notification__details[data-v-014a0a7f]{flex-grow:1}",
+  inject("data-v-4769db45_0", {
+    source: ".notification[data-v-4769db45]{margin-bottom:0;margin-right:0}.action[data-v-4769db45]{padding-top:0;margin-bottom:0}.cancel-confirmation[data-v-4769db45]{margin-top:1rem}.cancel-confirmation__buttons[data-v-4769db45]{margin-top:.5rem;margin-bottom:1.5rem;display:flex;gap:2rem}.bx--toast-notification .bx--inline-notification__action-button[data-v-4769db45]{margin-left:-1rem}.bx--toast-notification .bx--inline-notification__action-button.bx--btn--danger[data-v-4769db45]{margin:.5rem 0 .5rem -1rem}.notification-description-and-progress[data-v-4769db45]{margin-top:.75rem;margin-bottom:.75rem}.fix-margin-bottom[data-v-4769db45]{margin-bottom:0}.progress[data-v-4769db45]{margin-top:.75rem}.progress-bar-spacer[data-v-4769db45]{height:.5rem}.cv-notifiation.bx--toast-notification.notification[data-v-4769db45]{width:26vw;min-width:20rem;margin-top:0}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-4769db45]{margin-top:1rem}.notification-drawer .cv-notifiation.bx--toast-notification.notification[data-v-4769db45]{width:100%}.notification-read[data-v-4769db45]{border-color:#8d8d8d;color:#c6c6c6}.notification-read .bx--toast-notification__icon[data-v-4769db45]{fill:currentColor}.notification-read .bx--toast-notification__subtitle[data-v-4769db45]{color:#c6c6c6}.notification-read .bx--toast-notification__title[data-v-4769db45]{font-weight:400}.cv-notifiation .timestamp[data-v-4769db45]{margin-bottom:.75rem;line-height:1.29;color:#fff;text-decoration:underline}.cv-notifiation .timestamp button[data-v-4769db45]{color:#c6c6c6}.bx--tooltip__trigger[data-v-4769db45]:not(.bx--btn--icon-only){font-size:inherit}.cv-notifiation .timestamp .bx--tooltip__trigger[data-v-4769db45]::before{border-bottom-color:#161616}div.row[data-v-4769db45]:last-child{margin-bottom:1.5rem}.bx--toast-notification__details[data-v-4769db45]{flex-grow:1}",
     map: undefined,
     media: undefined
-  }), inject("data-v-014a0a7f_1", {
+  }), inject("data-v-4769db45_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
@@ -7582,7 +7610,7 @@ const __vue_inject_styles__$H = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__$H = "data-v-014a0a7f";
+const __vue_scope_id__$H = "data-v-4769db45";
 /* module identifier */
 
 const __vue_module_identifier__$H = undefined;