Fixed #679 - ConfirmPopup

exports/confirmpopup.d.ts

@@ -0,0 +1 @@
+export * from './components/confirmpopup/ConfirmPopup';

exports/confirmpopup.js

@@ -0,0 +1,2 @@
+'use strict';
+module.exports = require('./components/confirmpopup/ConfirmPopup.vue');

public/themes/arya-blue/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #383838;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(30, 30, 30, 0);
+  border-bottom-color: #1e1e1e;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(56, 56, 56, 0);
+  border-bottom-color: #383838;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #1e1e1e;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #383838;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/arya-green/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #383838;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(30, 30, 30, 0);
+  border-bottom-color: #1e1e1e;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(56, 56, 56, 0);
+  border-bottom-color: #383838;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #1e1e1e;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #383838;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/arya-orange/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #383838;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(30, 30, 30, 0);
+  border-bottom-color: #1e1e1e;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(56, 56, 56, 0);
+  border-bottom-color: #383838;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #1e1e1e;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #383838;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/arya-purple/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #383838;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(30, 30, 30, 0);
+  border-bottom-color: #1e1e1e;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(56, 56, 56, 0);
+  border-bottom-color: #383838;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #1e1e1e;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #383838;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/bootstrap4-dark-blue/theme.css

@@ -2926,6 +2926,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+  box-shadow: none;
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1.25rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1.25rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(42, 50, 61, 0);
+  border-bottom-color: #2a323d;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(63, 75, 91, 0);
+  border-bottom-color: #3f4b5b;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #2a323d;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #3f4b5b;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: none;

public/themes/bootstrap4-dark-purple/theme.css

@@ -2926,6 +2926,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+  box-shadow: none;
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1.25rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1.25rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(42, 50, 61, 0);
+  border-bottom-color: #2a323d;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(63, 75, 91, 0);
+  border-bottom-color: #3f4b5b;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #2a323d;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #3f4b5b;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: none;

public/themes/bootstrap4-light-blue/theme.css

@@ -2926,6 +2926,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #212529;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  box-shadow: none;
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1.25rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1.25rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(0, 0, 0, 0);
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: rgba(0, 0, 0, 0.2);
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: none;

public/themes/bootstrap4-light-purple/theme.css

@@ -2926,6 +2926,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #212529;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  box-shadow: none;
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1.25rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1.25rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(0, 0, 0, 0);
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: rgba(0, 0, 0, 0.2);
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: none;

public/themes/fluent-light/theme.css

@@ -2889,6 +2889,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #323130;
+  border: 0 none;
+  border-radius: 2px;
+  box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px;
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 2px;
   box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px;

public/themes/luna-amber/theme.css

@@ -2901,6 +2901,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #323232;
+  color: #dedede;
+  border: 1px solid #191919;
+  border-radius: 3px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(50, 50, 50, 0);
+  border-bottom-color: #323232;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(25, 25, 25, 0);
+  border-bottom-color: #191919;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #323232;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #191919;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/luna-blue/theme.css

@@ -2901,6 +2901,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #323232;
+  color: #dedede;
+  border: 1px solid #191919;
+  border-radius: 3px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(50, 50, 50, 0);
+  border-bottom-color: #323232;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(25, 25, 25, 0);
+  border-bottom-color: #191919;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #323232;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #191919;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/luna-green/theme.css

@@ -2901,6 +2901,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #323232;
+  color: #dedede;
+  border: 1px solid #191919;
+  border-radius: 3px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(50, 50, 50, 0);
+  border-bottom-color: #323232;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(25, 25, 25, 0);
+  border-bottom-color: #191919;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #323232;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #191919;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/luna-pink/theme.css

@@ -2901,6 +2901,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #323232;
+  color: #dedede;
+  border: 1px solid #191919;
+  border-radius: 3px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(50, 50, 50, 0);
+  border-bottom-color: #323232;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(25, 25, 25, 0);
+  border-bottom-color: #191919;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #323232;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #191919;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/md-dark-deeppurple/theme.css

@@ -2938,6 +2938,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #262626;
+  color: rgba(255, 255, 255, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 1rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(38, 38, 38, 0);
+  border-bottom-color: #262626;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(38, 38, 38, 0);
+  border-bottom-color: #262626;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #262626;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #262626;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/md-dark-indigo/theme.css

@@ -2938,6 +2938,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #262626;
+  color: rgba(255, 255, 255, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 1rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(38, 38, 38, 0);
+  border-bottom-color: #262626;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(38, 38, 38, 0);
+  border-bottom-color: #262626;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #262626;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #262626;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/md-light-deeppurple/theme.css

@@ -2938,6 +2938,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #000001;
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 1rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/md-light-indigo/theme.css

@@ -2938,6 +2938,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #000001;
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 1rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/mdc-dark-deeppurple/theme.css

@@ -2938,6 +2938,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #262626;
+  color: rgba(255, 255, 255, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.75rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.75rem 0.75rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(38, 38, 38, 0);
+  border-bottom-color: #262626;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(38, 38, 38, 0);
+  border-bottom-color: #262626;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #262626;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #262626;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/mdc-dark-indigo/theme.css

@@ -2938,6 +2938,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #262626;
+  color: rgba(255, 255, 255, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.75rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.75rem 0.75rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(38, 38, 38, 0);
+  border-bottom-color: #262626;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(38, 38, 38, 0);
+  border-bottom-color: #262626;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #262626;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #262626;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/mdc-light-deeppurple/theme.css

@@ -2938,6 +2938,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #000001;
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.75rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.75rem 0.75rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/mdc-light-indigo/theme.css

@@ -2938,6 +2938,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #000001;
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.75rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.75rem 0.75rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 4px;
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/nova-accent/theme.css

@@ -2889,6 +2889,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(200, 200, 200, 0);
+  border-bottom-color: #c8c8c8;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #c8c8c8;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/nova-alt/theme.css

@@ -2901,6 +2901,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(200, 200, 200, 0);
+  border-bottom-color: #c8c8c8;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #c8c8c8;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/nova-vue/theme.css

@@ -2901,6 +2901,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(200, 200, 200, 0);
+  border-bottom-color: #c8c8c8;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #c8c8c8;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/nova/theme.css

@@ -2901,6 +2901,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(200, 200, 200, 0);
+  border-bottom-color: #c8c8c8;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #c8c8c8;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/rhea/theme.css

@@ -2889,6 +2889,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #666666;
+  border: 1px solid #f1f1f1;
+  border-radius: 2px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.571rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(241, 241, 241, 0);
+  border-bottom-color: #f1f1f1;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #f1f1f1;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 2px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);

public/themes/saga-blue/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #495057;
+  border: 0 none;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/saga-green/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #495057;
+  border: 0 none;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/saga-orange/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #495057;
+  border: 0 none;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/saga-purple/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #ffffff;
+  color: #495057;
+  border: 0 none;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(255, 255, 255, 0);
+  border-bottom-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #ffffff;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/vela-blue/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #1f2d40;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #304562;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(31, 45, 64, 0);
+  border-bottom-color: #1f2d40;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(48, 69, 98, 0);
+  border-bottom-color: #304562;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #1f2d40;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #304562;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/vela-green/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #1f2d40;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #304562;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(31, 45, 64, 0);
+  border-bottom-color: #1f2d40;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(48, 69, 98, 0);
+  border-bottom-color: #304562;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #1f2d40;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #304562;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/vela-orange/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #1f2d40;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #304562;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(31, 45, 64, 0);
+  border-bottom-color: #1f2d40;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(48, 69, 98, 0);
+  border-bottom-color: #304562;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #1f2d40;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #304562;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

public/themes/vela-purple/theme.css

@@ -2914,6 +2914,50 @@
   margin: 0 0.5rem;
 }
 
+.p-confirm-popup {
+  background: #1f2d40;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #304562;
+  border-radius: 3px;
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+.p-confirm-popup .p-confirm-popup-content {
+  padding: 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer {
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+.p-confirm-popup .p-confirm-popup-footer button {
+  margin: 0 0.5rem 0 0;
+  width: auto;
+}
+.p-confirm-popup .p-confirm-popup-footer button:last-child {
+  margin: 0;
+}
+.p-confirm-popup:after {
+  border: solid transparent;
+  border-color: rgba(31, 45, 64, 0);
+  border-bottom-color: #1f2d40;
+}
+.p-confirm-popup:before {
+  border: solid transparent;
+  border-color: rgba(48, 69, 98, 0);
+  border-bottom-color: #304562;
+}
+.p-confirm-popup.p-confirm-popup-flipped:after {
+  border-top-color: #1f2d40;
+}
+.p-confirm-popup.p-confirm-popup-flipped:before {
+  border-top-color: #304562;
+}
+.p-confirm-popup .p-confirm-popup-icon {
+  font-size: 1.5rem;
+}
+.p-confirm-popup .p-confirm-popup-message {
+  margin-left: 1rem;
+}
+
 .p-dialog {
   border-radius: 3px;
   box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

src/AppMenu.vue

@@ -175,6 +175,7 @@
             <div class="menu-category">Overlay</div>
             <div class="menu-items">
                 <router-link to="/confirmdialog">ConfirmDialog <span class="p-tag">New</span></router-link>
+                <router-link to="/confirmpopup">ConfirmPopup <span class="p-tag">New</span></router-link>
                 <router-link to="/dialog">Dialog</router-link>
                 <router-link to="/overlaypanel">OverlayPanel</router-link>
                 <router-link to="/sidebar">Sidebar</router-link>

src/components/confirmdialog/ConfirmDialog.d.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+declare class ConfirmDialog extends Vue {
+    group?: string;
+}
+
+export default ConfirmDialog;

src/components/confirmpopup/ConfirmPopup.d.ts

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+declare class ConfirmPopup extends Vue {
+    group?: string;
+}
+
+export default ConfirmPopup;

src/components/confirmpopup/ConfirmPopup.vue

@@ -0,0 +1,275 @@
+<template>
+    <transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave">
+        <div class="p-confirm-popup p-component" v-if="visible" :ref="containerRef">
+            <div class="p-confirm-popup-content">
+                <i :class="iconClass" /> 
+                <span class="p-confirm-popup-message">{{confirmation.message}}</span>
+            </div>
+            <div class="p-confirm-popup-footer">
+                <CPButton :label="rejectLabel" :icon="rejectIcon" :class="rejectClass" @click="reject()"/>
+                <CPButton :label="acceptLabel" :icon="acceptIcon" :class="acceptClass" @click="accept()" autofocus />
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import ConfirmationEventBus from '../confirmation/ConfirmationEventBus';
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
+import DomHandler from '../utils/DomHandler';
+import Button from '../button/Button';
+
+export default {
+    props: {
+        group: String
+    },
+    data() {
+        return {
+            visible: false,
+            confirmation: null
+        }
+    },
+    target: null,
+    outsideClickListener: null,
+    scrollHandler: null,
+    resizeListener: null,
+    container: null,
+    mounted() {
+        ConfirmationEventBus.on('confirm', (options) => {
+            if (!options) {
+                return;
+            }
+
+            if (options.group === this.group) {
+                this.confirmation = options;
+                this.target = options.target;
+                this.visible = true;
+            }
+        });
+
+        ConfirmationEventBus.on('close', () => {
+            this.visible = false;
+            this.confirmation = null;
+        });
+    },
+    beforeUnmount() {
+        ConfirmationEventBus.off('confirm');
+        ConfirmationEventBus.off('close');
+
+        this.restoreAppend();
+        this.unbindOutsideClickListener();
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+        this.unbindResizeListener();
+        this.target = null;
+        this.container = null;
+        this.confirmation = null;
+    },
+    methods: {
+         accept() {
+            if (this.confirmation.accept) {
+                this.confirmation.accept();
+            }
+
+            this.visible = false;
+        },
+        reject() {
+            if (this.confirmation.reject) {
+                this.confirmation.reject();
+            }
+
+            this.visible = false;
+        },
+        onEnter() {
+            this.appendContainer();
+            this.alignOverlay();
+            this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
+            this.container.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+        },
+        onLeave() {
+            this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
+        },
+        alignOverlay() {
+            DomHandler.absolutePosition(this.container, this.target);
+
+            const containerOffset = DomHandler.getOffset(this.container);
+            const targetOffset = DomHandler.getOffset(this.target);
+            let arrowLeft = 0;
+
+            if (containerOffset.left < targetOffset.left) {
+                arrowLeft = targetOffset.left - containerOffset.left;
+            }
+            this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
+
+            if (containerOffset.top < targetOffset.top) {
+                DomHandler.addClass(this.container, 'p-confirm-popup-flipped');
+            }
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.visible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
+                        this.visible = false;
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
+                    if (this.visible) {
+                        this.visible = false;
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.visible) {
+                        this.visible = false;
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
+        isTargetClicked() {
+            return this.target && (this.target === event.target || this.target.contains(event.target));
+        },
+        appendContainer() {
+            document.body.appendChild(this.container);
+        },
+        restoreAppend() {
+            if (this.container) {
+                document.body.removeChild(this.container);
+            }
+        },
+        containerRef(el) {
+            this.container = el;
+        }
+    },
+    computed: {
+        message() {
+            return this.confirmation ? this.confirmation.message : null;
+        },
+        iconClass() {
+            return ['p-confirm-popup-icon', this.confirmation ? this.confirmation.icon : null];
+        },
+        acceptLabel() {
+            return this.confirmation ? (this.confirmation.acceptLabel || 'Yes') : null;
+        },
+        rejectLabel() {
+            return this.confirmation ? (this.confirmation.rejectLabel || 'No') : null;
+        },
+        acceptIcon() {
+            return this.confirmation ? this.confirmation.acceptIcon : null;
+        },
+        rejectIcon() {
+            return this.confirmation ? this.confirmation.rejectIcon : null;
+        },
+        acceptClass() {
+            return ['p-confirm-popup-accept p-button-sm', this.confirmation ? this.confirmation.acceptClass : null];
+        },
+        rejectClass() {
+            return ['p-confirm-popup-reject p-button-sm', this.confirmation ? (this.confirmation.rejectClass || 'p-button-text') : null];
+        }
+    },
+    components: {
+        'CPButton': Button
+    }
+}
+</script>
+
+<style>
+.p-confirm-popup {
+    position: absolute;
+    margin-top: 10px;
+}
+
+.p-confirm-popup-flipped {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+/* Animation */
+.p-confirm-popup-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-confirm-popup-leave-to {
+    opacity: 0;
+}
+
+.p-confirm-popup-enter-active {
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-confirm-popup-leave-active {
+    transition: opacity .1s linear;
+}
+
+.p-confirm-popup:after, .p-confirm-popup:before {
+	bottom: 100%;
+	left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.p-confirm-popup:after {
+	border-width: 8px;
+	margin-left: -8px;
+}
+
+.p-confirm-popup:before {
+	border-width: 10px;
+	margin-left: -10px;
+}
+
+.p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {
+    bottom: auto;
+    top: 100%;
+}
+
+.p-confirm-popup.p-confirm-popup-flipped:after {
+    border-bottom-color: transparent;
+}
+
+.p-confirm-popup.p-confirm-popup-flipped:before {
+    border-bottom-color: transparent
+}
+
+.p-confirm-popup .p-confirm-popup-content {
+    display: flex;
+    align-items: center;
+}
+</style>

src/main.js

@@ -18,6 +18,7 @@ import ColorPicker from './components/colorpicker/ColorPicker';
 import Column from './components/column/Column';
 import ColumnGroup from './components/columngroup/ColumnGroup';
 import ConfirmDialog from './components/confirmdialog/ConfirmDialog';
+import ConfirmPopup from './components/confirmpopup/ConfirmPopup';
 import ConfirmationService from './components/confirmation/ConfirmationService';
 import ContextMenu from './components/contextmenu/ContextMenu';
 import DataTable from './components/datatable/DataTable';
@@ -124,6 +125,7 @@ app.component('ColorPicker', ColorPicker);
 app.component('Column', Column);
 app.component('ColumnGroup', ColumnGroup);
 app.component('ConfirmDialog', ConfirmDialog);
+app.component('ConfirmPopup', ConfirmPopup);
 app.component('ContextMenu', ContextMenu);
 app.component('DataTable', DataTable);
 app.component('DataView', DataView);

src/router/index.js

@@ -137,6 +137,11 @@ const routes = [
         name: 'confirmdialog',
         component: () => import('../views/confirmdialog/ConfirmDialogDemo.vue')
     },
+    {
+        path: '/confirmpopup',
+        name: 'confirmpopup',
+        component: () => import('../views/confirmpopup/ConfirmPopupDemo.vue')
+    },
     {
         path: '/contextmenu',
         name: 'contextmenu',

src/views/confirmdialog/ConfirmDialogDemo.vue

@@ -47,7 +47,7 @@ export default {
     methods: {
         confirm1() {
             this.$confirm.require({
-                message: 'Are you sure that you want to proceed?',
+                message: 'Are you sure you want to proceed?',
                 header: 'Confirmation',
                 icon: 'pi pi-exclamation-triangle',
                 accept: () => {

src/views/confirmdialog/ConfirmDialogDoc.vue

@@ -46,7 +46,7 @@ export default {
 	methods: {
         delete() {
             this.$confirm.require({
-                message: 'Are you sure that you want to proceed?',
+                message: 'Are you sure you want to proceed?',
                 header: 'Confirmation',
                 icon: 'pi pi-exclamation-triangle',
                 accept: () => {
@@ -73,7 +73,7 @@ export default defineComponent({
     setup() {
         const confirm = useConfirm();
         confirm.require({
-            message: 'Are you sure that you want to proceed?',
+            message: 'Are you sure you want to proceed?',
             header: 'Confirmation',
             icon: 'pi pi-exclamation-triangle',
             accept: () => {
@@ -239,7 +239,7 @@ export default {
 				</div>
 
 				<h5>Dependencies</h5>
-				<p>None.</p>
+				<p>Mitt.</p>
 			</TabPanel>
 
 			<TabPanel header="Source">
@@ -283,7 +283,7 @@ export default {
     methods: {
         confirm1() {
             this.$confirm.require({
-                message: 'Are you sure that you want to proceed?',
+                message: 'Are you sure you want to proceed?',
                 header: 'Confirmation',
                 icon: 'pi pi-exclamation-triangle',
                 accept: () => {

src/views/confirmpopup/ConfirmPopupDemo.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>ConfirmPopup</h1>
+                <p>ConfirmPopup displays a confirmation overlay displayed relatively to its target.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <ConfirmPopup></ConfirmPopup>
+
+            <div class="card">
+                <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+                <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
+            </div>
+        </div>
+
+        <ConfirmPopupDoc />
+    </div>
+</template>
+
+<script>
+import ConfirmPopupDoc from './ConfirmPopupDoc';
+
+export default {
+    methods: {
+        confirm1(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        },
+        confirm2(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                message: 'Do you want to delete this record?',
+                icon: 'pi pi-info-circle',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
+    },
+    components: {
+        'ConfirmPopupDoc': ConfirmPopupDoc
+    }
+}
+</script>

src/views/confirmpopup/ConfirmPopupDoc.vue

@@ -0,0 +1,297 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+                <h5>Mitt EventBus</h5>
+                <p>ConfirmPopup requires <a href="https://www.npmjs.com/package/mitt">Mitt</a>, a tiny 200b EventBus implementation.</p>
+<pre v-code>
+<code>
+npm install mitt --save
+
+</code></pre>
+
+                <h5>ConfirmationService</h5>
+                <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application
+                    instance is created.</p>
+<pre v-code.script>
+<code>
+import {createApp} from 'vue';
+import ConfirmationService from 'primevue/confirmationservice';
+
+const app = createApp(App);
+app.use(ConfirmationService);
+
+</code></pre>
+
+				<h5>Import</h5>
+<pre v-code.script>
+<code>
+import ConfirmPopup from 'primevue/confirmpopup';
+
+</code></pre>
+
+				<h5>Getting Started</h5>
+				<p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup.</p>
+<pre v-code>
+<code>
+&lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
+
+&lt;Button @click="delete()" icon="pi pi-check" label="Confirm"&gt;&lt;/Button&gt;
+</code></pre>
+
+<pre v-code.script>
+<code>
+export default {
+	methods: {
+        delete() {
+            this.$confirm.require({
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    //callback to execute when user confirms the action
+                },
+                reject: () => {
+                    //callback to execute when user rejects the action
+                }
+            });
+        },
+    }
+}
+
+</code></pre>
+
+                <h5>Composition API</h5>
+                <p>The service can be injected with the <i>useConfirm</i> function.</p>
+<pre v-code.script>
+<code>
+import { defineComponent } from "vue";
+import { useConfirm } from "primevue/useconfirm";
+
+export default defineComponent({
+    setup() {
+        const confirm = useConfirm();
+        confirm.require({
+            message: 'Are you sure you want to proceed?',
+            icon: 'pi pi-exclamation-triangle',
+            accept: () => {
+                //callback to execute when user confirms the action
+            },
+            reject: () => {
+                //callback to execute when user rejects the action
+            }
+        });
+    }
+})
+
+</code></pre>
+
+                <h5>Close Confirmation</h5>
+                <p>The popup can also be hidden programmatically using the <i>close</i> method.</p>
+<pre v-code.script>
+<code>
+export default {
+	methods: {
+        discard() {
+            this.$confirm.close();
+        }
+    }
+}
+
+</code></pre>
+
+                <h5>Confirmation Options</h5>
+                <p>ConfirmDialog can be customized with various options listed here.</p>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>message</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Message of the confirmation.</td>
+                            </tr>
+                            <tr>
+                                <td>group</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                            </tr>
+                            <tr>
+                                <td>icon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Icon to display next to the message.</td>
+                            </tr>
+                            <tr>
+                                <td>accept</td>
+                                <td>Function</td>
+                                <td>null</td>
+                                <td>Callback to execute when action is confirmed.</td>
+                            </tr>
+                            <tr>
+                                <td>reject</td>
+                                <td>Function</td>
+                                <td>null</td>
+                                <td>Callback to execute when action is rejected.</td>
+                            </tr>
+                            <tr>
+                                <td>acceptLabel</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Label of the accept button.</td>
+                            </tr>
+                            <tr>
+                                <td>rejectLabel</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Label of the reject button.</td>
+                            </tr>
+                            <tr>
+                                <td>acceptIcon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Icon of the accept button.</td>
+                            </tr>
+                            <tr>
+                                <td>rejectIcon</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Icon of the reject button.</td>
+                            </tr>
+                            <tr>
+                                <td>acceptClass</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the accept button.</td>
+                            </tr>
+                            <tr>
+                                <td>rejectClass</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the reject button.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+				<h5>Properties</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>group</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling</h5>
+				<p>ConfirmDialog inherits all the classes from the Dialog component, visit <router-link to="/dialog">dialog</router-link> for more information.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+						<tr>
+							<th>Name</th>
+							<th>Element</th>
+						</tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-confirm-popup</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-confirm-content</td>
+                                <td>Content element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-confirm-popup-icon</td>
+                                <td>Message icon.</td>
+                            </tr>
+                            <tr>
+                                <td>p-confirm-popup-message</td>
+                                <td>Message text.</td>
+                            </tr>
+                            <tr>
+                                <td>p-confirm-popup-footer</td>
+                                <td>Footer element for buttons.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Dependencies</h5>
+				<p>Mitt.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/dialog" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<pre v-code>
+<code><template v-pre>
+&lt;ConfirmPopup&gt;&lt;/ConfirmPopup&gt;
+
+&lt;div class="card"&gt;
+    &lt;Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"&gt;&lt;/Button&gt;
+    &lt;Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"&gt;&lt;/Button&gt;
+&lt;/div&gt;
+</template>
+</code></pre>
+
+<pre v-code.script>
+<code>
+export default {
+    methods: {
+        confirm1() {
+            this.$confirm.require({
+                message: 'Are you sure you want to proceed?',
+                icon: 'pi pi-exclamation-triangle',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        },
+        confirm2() {
+            this.$confirm.require({
+                message: 'Do you want to delete this record?',
+                icon: 'pi pi-info-circle',
+                acceptClass: 'p-button-danger',
+                accept: () => {
+                    this.$toast.add({severity:'info', summary:'Confirmed', detail:'Record deleted', life: 3000});
+                },
+                reject: () => {
+                    this.$toast.add({severity:'info', summary:'Rejected', detail:'You have rejected', life: 3000});
+                }
+            });
+        }
+    }
+}
+
+</code></pre>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>