primevue 3.29.2 → 3.30.1

package/confirmpopup/confirmpopup.js

@@ -1,419 +1,416 @@
 this.primevue = this.primevue || {};
-this.primevue.confirmpopup = (function (BaseComponent, Button, ConfirmationEventBus, FocusTrap, OverlayEventBus, Portal, utils, vue) {
+this.primevue.confirmpopup = (function (Button, ConfirmationEventBus, FocusTrap, OverlayEventBus, Portal, utils, BaseComponent, usestyle, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
     var ConfirmationEventBus__default = /*#__PURE__*/_interopDefaultLegacy(ConfirmationEventBus);
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
+    var styles = "\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n\n.p-confirm-popup-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\n\n.p-confirm-popup-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\n\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n";
+    var classes = {
+      root: function root(_ref) {
+        var instance = _ref.instance;
+        return ['p-confirm-popup p-component', {
+          'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+          'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }];
+      },
+      content: 'p-confirm-popup-content',
+      icon: function icon(_ref2) {
+        var instance = _ref2.instance;
+        return ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null];
+      },
+      message: 'p-confirm-popup-message',
+      footer: 'p-confirm-popup-footer',
+      rejectButton: function rejectButton(_ref3) {
+        var instance = _ref3.instance;
+        return ['p-confirm-dialog-reject', instance.confirmation ? instance.confirmation.rejectClass || 'p-button-text' : null];
+      },
+      acceptButton: function acceptButton(_ref4) {
+        var instance = _ref4.instance;
+        return ['p-confirm-dialog-accept', instance.confirmation ? instance.confirmation.acceptClass : null];
+      }
+    };
+    var _useStyle = usestyle.useStyle(styles, {
+        name: 'confirmpopup',
+        manual: true
+      }),
+      loadStyle = _useStyle.load;
+    var script$1 = {
+      name: 'BaseConfirmPopup',
+      "extends": BaseComponent__default["default"],
+      props: {
+        group: String
+      },
+      css: {
+        classes: classes,
+        loadStyle: loadStyle
+      },
+      provide: function provide() {
+        return {
+          $parentInstance: this
+        };
+      }
+    };
 
     var script = {
-        name: 'ConfirmPopup',
-        extends: BaseComponent__default["default"],
-        inheritAttrs: false,
-        props: {
-            group: String
+      name: 'ConfirmPopup',
+      "extends": script$1,
+      inheritAttrs: false,
+      data: function data() {
+        return {
+          visible: false,
+          confirmation: null,
+          autoFocusAccept: null,
+          autoFocusReject: null
+        };
+      },
+      target: null,
+      outsideClickListener: null,
+      scrollHandler: null,
+      resizeListener: null,
+      container: null,
+      confirmListener: null,
+      closeListener: null,
+      mounted: function mounted() {
+        var _this = this;
+        this.confirmListener = function (options) {
+          if (!options) {
+            return;
+          }
+          if (options.group === _this.group) {
+            _this.confirmation = options;
+            _this.target = options.target;
+            if (_this.confirmation.onShow) {
+              _this.confirmation.onShow();
+            }
+            _this.visible = true;
+          }
+        };
+        this.closeListener = function () {
+          _this.visible = false;
+          _this.confirmation = null;
+        };
+        ConfirmationEventBus__default["default"].on('confirm', this.confirmListener);
+        ConfirmationEventBus__default["default"].on('close', this.closeListener);
+      },
+      beforeUnmount: function beforeUnmount() {
+        ConfirmationEventBus__default["default"].off('confirm', this.confirmListener);
+        ConfirmationEventBus__default["default"].off('close', this.closeListener);
+        this.unbindOutsideClickListener();
+        if (this.scrollHandler) {
+          this.scrollHandler.destroy();
+          this.scrollHandler = null;
+        }
+        this.unbindResizeListener();
+        if (this.container) {
+          utils.ZIndexUtils.clear(this.container);
+          this.container = null;
+        }
+        this.target = null;
+        this.confirmation = null;
+      },
+      methods: {
+        accept: function accept() {
+          if (this.confirmation.accept) {
+            this.confirmation.accept();
+          }
+          this.visible = false;
         },
-        data() {
-            return {
-                visible: false,
-                confirmation: null,
-                autoFocusAccept: null,
-                autoFocusReject: null
-            };
+        reject: function reject() {
+          if (this.confirmation.reject) {
+            this.confirmation.reject();
+          }
+          this.visible = false;
         },
-        target: null,
-        outsideClickListener: null,
-        scrollHandler: null,
-        resizeListener: null,
-        container: null,
-        confirmListener: null,
-        closeListener: null,
-        mounted() {
-            this.confirmListener = (options) => {
-                if (!options) {
-                    return;
-                }
-
-                if (options.group === this.group) {
-                    this.confirmation = options;
-                    this.target = options.target;
-
-                    if (this.confirmation.onShow) {
-                        this.confirmation.onShow();
-                    }
-
-                    this.visible = true;
+        onHide: function onHide() {
+          if (this.confirmation.onHide) {
+            this.confirmation.onHide();
+          }
+          this.visible = false;
+        },
+        onAcceptKeydown: function onAcceptKeydown(event) {
+          if (event.code === 'Space' || event.code === 'Enter') {
+            this.accept();
+            utils.DomHandler.focus(this.target);
+            event.preventDefault();
+          }
+        },
+        onRejectKeydown: function onRejectKeydown(event) {
+          if (event.code === 'Space' || event.code === 'Enter') {
+            this.reject();
+            utils.DomHandler.focus(this.target);
+            event.preventDefault();
+          }
+        },
+        onEnter: function onEnter(el) {
+          this.autoFocusAccept = this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
+          this.autoFocusReject = this.confirmation.defaultFocus === 'reject' ? true : false;
+          this.bindOutsideClickListener();
+          this.bindScrollListener();
+          this.bindResizeListener();
+          utils.ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
+        },
+        onAfterEnter: function onAfterEnter() {
+          this.focus();
+        },
+        onLeave: function onLeave() {
+          this.autoFocusAccept = null;
+          this.autoFocusReject = null;
+          this.unbindOutsideClickListener();
+          this.unbindScrollListener();
+          this.unbindResizeListener();
+        },
+        onAfterLeave: function onAfterLeave(el) {
+          utils.ZIndexUtils.clear(el);
+        },
+        alignOverlay: function alignOverlay() {
+          utils.DomHandler.absolutePosition(this.container, this.target);
+          var containerOffset = utils.DomHandler.getOffset(this.container);
+          var targetOffset = utils.DomHandler.getOffset(this.target);
+          var arrowLeft = 0;
+          if (containerOffset.left < targetOffset.left) {
+            arrowLeft = targetOffset.left - containerOffset.left;
+          }
+          this.container.style.setProperty('--overlayArrowLeft', "".concat(arrowLeft, "px"));
+          if (containerOffset.top < targetOffset.top) {
+            this.container.setAttribute('data-p-confirm-popup-flipped', 'true');
+            !this.isUnstyled && utils.DomHandler.addClass(this.container, 'p-confirm-popup-flipped');
+          }
+        },
+        bindOutsideClickListener: function bindOutsideClickListener() {
+          var _this2 = this;
+          if (!this.outsideClickListener) {
+            this.outsideClickListener = function (event) {
+              if (_this2.visible && _this2.container && !_this2.container.contains(event.target) && !_this2.isTargetClicked(event)) {
+                if (_this2.confirmation.onHide) {
+                  _this2.confirmation.onHide();
                 }
+                _this2.visible = false;
+              } else {
+                _this2.alignOverlay();
+              }
             };
-
-            this.closeListener = () => {
-                this.visible = false;
-                this.confirmation = null;
+            document.addEventListener('click', this.outsideClickListener);
+          }
+        },
+        unbindOutsideClickListener: function unbindOutsideClickListener() {
+          if (this.outsideClickListener) {
+            document.removeEventListener('click', this.outsideClickListener);
+            this.outsideClickListener = null;
+          }
+        },
+        bindScrollListener: function bindScrollListener() {
+          var _this3 = this;
+          if (!this.scrollHandler) {
+            this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.target, function () {
+              if (_this3.visible) {
+                _this3.visible = false;
+              }
+            });
+          }
+          this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener: function unbindScrollListener() {
+          if (this.scrollHandler) {
+            this.scrollHandler.unbindScrollListener();
+          }
+        },
+        bindResizeListener: function bindResizeListener() {
+          var _this4 = this;
+          if (!this.resizeListener) {
+            this.resizeListener = function () {
+              if (_this4.visible && !utils.DomHandler.isTouchDevice()) {
+                _this4.visible = false;
+              }
             };
-
-            ConfirmationEventBus__default["default"].on('confirm', this.confirmListener);
-            ConfirmationEventBus__default["default"].on('close', this.closeListener);
+            window.addEventListener('resize', this.resizeListener);
+          }
         },
-        beforeUnmount() {
-            ConfirmationEventBus__default["default"].off('confirm', this.confirmListener);
-            ConfirmationEventBus__default["default"].off('close', this.closeListener);
-
-            this.unbindOutsideClickListener();
-
-            if (this.scrollHandler) {
-                this.scrollHandler.destroy();
-                this.scrollHandler = null;
-            }
-
-            this.unbindResizeListener();
-
-            if (this.container) {
-                utils.ZIndexUtils.clear(this.container);
-                this.container = null;
-            }
-
-            this.target = null;
-            this.confirmation = null;
+        unbindResizeListener: function unbindResizeListener() {
+          if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+            this.resizeListener = null;
+          }
         },
-        methods: {
-            accept() {
-                if (this.confirmation.accept) {
-                    this.confirmation.accept();
-                }
-
-                this.visible = false;
-            },
-            reject() {
-                if (this.confirmation.reject) {
-                    this.confirmation.reject();
-                }
-
-                this.visible = false;
-            },
-            onHide() {
-                if (this.confirmation.onHide) {
-                    this.confirmation.onHide();
-                }
-
-                this.visible = false;
-            },
-            onAcceptKeydown(event) {
-                if (event.code === 'Space' || event.code === 'Enter') {
-                    this.accept();
-                    utils.DomHandler.focus(this.target);
-                    event.preventDefault();
-                }
-            },
-            onRejectKeydown(event) {
-                if (event.code === 'Space' || event.code === 'Enter') {
-                    this.reject();
-                    utils.DomHandler.focus(this.target);
-                    event.preventDefault();
-                }
-            },
-            onEnter(el) {
-                this.autoFocusAccept = this.confirmation.defaultFocus === undefined || this.confirmation.defaultFocus === 'accept' ? true : false;
-                this.autoFocusReject = this.confirmation.defaultFocus === 'reject' ? true : false;
-
-                this.bindOutsideClickListener();
-                this.bindScrollListener();
-                this.bindResizeListener();
-
-                utils.ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
-            },
-            onAfterEnter() {
-                this.focus();
-            },
-            onLeave() {
-                this.autoFocusAccept = null;
-                this.autoFocusReject = null;
-
-                this.unbindOutsideClickListener();
-                this.unbindScrollListener();
-                this.unbindResizeListener();
-            },
-            onAfterLeave(el) {
-                utils.ZIndexUtils.clear(el);
-            },
-            alignOverlay() {
-                utils.DomHandler.absolutePosition(this.container, this.target);
-
-                const containerOffset = utils.DomHandler.getOffset(this.container);
-                const targetOffset = utils.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) {
-                    utils.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)) {
-                            if (this.confirmation.onHide) {
-                                this.confirmation.onHide();
-                            }
-
-                            this.visible = false;
-                        } else {
-                            this.alignOverlay();
-                        }
-                    };
-
-                    document.addEventListener('click', this.outsideClickListener);
-                }
-            },
-            unbindOutsideClickListener() {
-                if (this.outsideClickListener) {
-                    document.removeEventListener('click', this.outsideClickListener);
-                    this.outsideClickListener = null;
-                }
-            },
-            bindScrollListener() {
-                if (!this.scrollHandler) {
-                    this.scrollHandler = new utils.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 && !utils.DomHandler.isTouchDevice()) {
-                            this.visible = false;
-                        }
-                    };
-
-                    window.addEventListener('resize', this.resizeListener);
-                }
-            },
-            unbindResizeListener() {
-                if (this.resizeListener) {
-                    window.removeEventListener('resize', this.resizeListener);
-                    this.resizeListener = null;
-                }
-            },
-            focus() {
-                let focusTarget = this.container.querySelector('[autofocus]');
-
-                if (focusTarget) {
-                    focusTarget.focus({ preventScroll: true }); // Firefox requires preventScroll
-                }
-            },
-            isTargetClicked(event) {
-                return this.target && (this.target === event.target || this.target.contains(event.target));
-            },
-            containerRef(el) {
-                this.container = el;
-            },
-            onOverlayClick(event) {
-                OverlayEventBus__default["default"].emit('overlay-click', {
-                    originalEvent: event,
-                    target: this.target
-                });
-            },
-            onOverlayKeydown(event) {
-                if (event.code === 'Escape') {
-                    ConfirmationEventBus__default["default"].emit('close', this.closeListener);
-                    utils.DomHandler.focus(this.target);
-                }
-            }
+        focus: function focus() {
+          var focusTarget = this.container.querySelector('[autofocus]');
+          if (focusTarget) {
+            focusTarget.focus({
+              preventScroll: true
+            }); // Firefox requires preventScroll
+          }
+        },
+        isTargetClicked: function isTargetClicked(event) {
+          return this.target && (this.target === event.target || this.target.contains(event.target));
+        },
+        containerRef: function containerRef(el) {
+          this.container = el;
         },
-        computed: {
-            containerClass() {
-                return [
-                    'p-confirm-popup p-component',
-                    {
-                        'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                        'p-ripple-disabled': this.$primevue.config.ripple === false
-                    }
-                ];
-            },
-            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 || this.$primevue.config.locale.accept : null;
-            },
-            rejectLabel() {
-                return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : 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];
+        onOverlayClick: function onOverlayClick(event) {
+          OverlayEventBus__default["default"].emit('overlay-click', {
+            originalEvent: event,
+            target: this.target
+          });
+        },
+        onOverlayKeydown: function onOverlayKeydown(event) {
+          if (event.code === 'Escape') {
+            ConfirmationEventBus__default["default"].emit('close', this.closeListener);
+            utils.DomHandler.focus(this.target);
+          }
+        },
+        getCXOptions: function getCXOptions(icon, iconProps) {
+          return {
+            contenxt: {
+              icon: icon,
+              iconClass: iconProps["class"]
             }
+          };
+        }
+      },
+      computed: {
+        message: function message() {
+          return this.confirmation ? this.confirmation.message : null;
         },
-        components: {
-            CPButton: Button__default["default"],
-            Portal: Portal__default["default"]
+        acceptLabel: function acceptLabel() {
+          return this.confirmation ? this.confirmation.acceptLabel || this.$primevue.config.locale.accept : null;
         },
-        directives: {
-            focustrap: FocusTrap__default["default"]
+        rejectLabel: function rejectLabel() {
+          return this.confirmation ? this.confirmation.rejectLabel || this.$primevue.config.locale.reject : null;
+        },
+        acceptIcon: function acceptIcon() {
+          return this.confirmation ? this.confirmation.acceptIcon : null;
+        },
+        rejectIcon: function rejectIcon() {
+          return this.confirmation ? this.confirmation.rejectIcon : null;
         }
+      },
+      components: {
+        CPButton: Button__default["default"],
+        Portal: Portal__default["default"]
+      },
+      directives: {
+        focustrap: FocusTrap__default["default"]
+      }
     };
 
-    const _hoisted_1 = ["aria-modal"];
-
+    function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+    function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+    function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+    function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+    function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+    function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+    var _hoisted_1 = ["aria-modal"];
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_CPButton = vue.resolveComponent("CPButton");
-      const _component_Portal = vue.resolveComponent("Portal");
-      const _directive_focustrap = vue.resolveDirective("focustrap");
-
-      return (vue.openBlock(), vue.createBlock(_component_Portal, null, {
-        default: vue.withCtx(() => [
-          vue.createVNode(vue.Transition, {
+      var _component_CPButton = vue.resolveComponent("CPButton");
+      var _component_Portal = vue.resolveComponent("Portal");
+      var _directive_focustrap = vue.resolveDirective("focustrap");
+      return vue.openBlock(), vue.createBlock(_component_Portal, null, {
+        "default": vue.withCtx(function () {
+          return [vue.createVNode(vue.Transition, {
             name: "p-confirm-popup",
             onEnter: $options.onEnter,
             onAfterEnter: $options.onAfterEnter,
             onLeave: $options.onLeave,
             onAfterLeave: $options.onAfterLeave
           }, {
-            default: vue.withCtx(() => [
-              ($data.visible)
-                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-                    key: 0,
-                    ref: $options.containerRef,
-                    role: "alertdialog",
-                    class: $options.containerClass,
-                    "aria-modal": $data.visible,
-                    onClick: _cache[2] || (_cache[2] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
-                    onKeydown: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayKeydown && $options.onOverlayKeydown(...args)))
-                  }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
-                    (!_ctx.$slots.message)
-                      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-                          key: 0,
-                          class: "p-confirm-popup-content"
-                        }, _ctx.ptm('content')), [
-                          vue.renderSlot(_ctx.$slots, "icon", { class: "p-confirm-popup-icon" }, () => [
-                            (_ctx.$slots.icon)
-                              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
-                                  key: 0,
-                                  class: "p-confirm-popup-icon"
-                                }))
-                              : ($data.confirmation.icon)
-                                ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
-                                    key: 1,
-                                    class: $options.iconClass
-                                  }, _ctx.ptm('icon')), null, 16))
-                                : vue.createCommentVNode("", true)
-                          ]),
-                          vue.createElementVNode("span", vue.mergeProps({ class: "p-confirm-popup-message" }, _ctx.ptm('message')), vue.toDisplayString($data.confirmation.message), 17)
-                        ], 16))
-                      : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.message), {
-                          key: 1,
-                          message: $data.confirmation
-                        }, null, 8, ["message"])),
-                    vue.createElementVNode("div", vue.mergeProps({ class: "p-confirm-popup-footer" }, _ctx.ptm('footer')), [
-                      vue.createVNode(_component_CPButton, {
-                        label: $options.rejectLabel,
-                        class: vue.normalizeClass($options.rejectClass),
-                        onClick: _cache[0] || (_cache[0] = $event => ($options.reject())),
-                        onKeydown: $options.onRejectKeydown,
-                        autofocus: $data.autoFocusReject,
-                        pt: _ctx.ptm('rejectButton')
-                      }, {
-                        icon: vue.withCtx((iconProps) => [
-                          vue.renderSlot(_ctx.$slots, "rejecticon", {}, () => [
-                            vue.createElementVNode("span", vue.mergeProps({
-                              class: [$options.rejectIcon, iconProps.class]
-                            }, _ctx.ptm('rejectButton')['icon']), null, 16)
-                          ])
-                        ]),
-                        _: 3
-                      }, 8, ["label", "class", "onKeydown", "autofocus", "pt"]),
-                      vue.createVNode(_component_CPButton, {
-                        label: $options.acceptLabel,
-                        class: vue.normalizeClass($options.acceptClass),
-                        onClick: _cache[1] || (_cache[1] = $event => ($options.accept())),
-                        onKeydown: $options.onAcceptKeydown,
-                        autofocus: $data.autoFocusAccept,
-                        pt: _ctx.ptm('acceptButton')
-                      }, {
-                        icon: vue.withCtx((iconProps) => [
-                          vue.renderSlot(_ctx.$slots, "accepticon", {}, () => [
-                            vue.createElementVNode("span", vue.mergeProps({
-                              class: [$options.acceptIcon, iconProps.class]
-                            }, _ctx.ptm('acceptButton')['icon']), null, 16)
-                          ])
-                        ]),
-                        _: 3
-                      }, 8, ["label", "class", "onKeydown", "autofocus", "pt"])
-                    ], 16)
-                  ], 16, _hoisted_1)), [
-                    [_directive_focustrap]
-                  ])
-                : vue.createCommentVNode("", true)
-            ]),
+            "default": vue.withCtx(function () {
+              return [$data.visible ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                key: 0,
+                ref: $options.containerRef,
+                role: "alertdialog",
+                "class": _ctx.cx('root'),
+                "aria-modal": $data.visible,
+                onClick: _cache[2] || (_cache[2] = function () {
+                  return $options.onOverlayClick && $options.onOverlayClick.apply($options, arguments);
+                }),
+                onKeydown: _cache[3] || (_cache[3] = function () {
+                  return $options.onOverlayKeydown && $options.onOverlayKeydown.apply($options, arguments);
+                })
+              }, _objectSpread(_objectSpread({}, _ctx.$attrs), _ctx.ptm('root'))), [!_ctx.$slots.message ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                key: 0,
+                "class": _ctx.cx('content')
+              }, _ctx.ptm('content')), [vue.renderSlot(_ctx.$slots, "icon", {}, function () {
+                return [_ctx.$slots.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
+                  key: 0,
+                  "class": vue.normalizeClass(_ctx.cx('icon'))
+                }, null, 8, ["class"])) : $data.confirmation.icon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                  key: 1,
+                  "class": _ctx.cx('icon')
+                }, _ctx.ptm('icon')), null, 16)) : vue.createCommentVNode("", true)];
+              }), vue.createElementVNode("span", vue.mergeProps({
+                "class": _ctx.cx('message')
+              }, _ctx.ptm('message')), vue.toDisplayString($data.confirmation.message), 17)], 16)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.message), {
+                key: 1,
+                message: $data.confirmation
+              }, null, 8, ["message"])), vue.createElementVNode("div", vue.mergeProps({
+                "class": _ctx.cx('footer')
+              }, _ctx.ptm('footer')), [vue.createVNode(_component_CPButton, {
+                label: $options.rejectLabel,
+                onClick: _cache[0] || (_cache[0] = function ($event) {
+                  return $options.reject();
+                }),
+                onKeydown: $options.onRejectKeydown,
+                autofocus: $data.autoFocusReject,
+                "class": vue.normalizeClass(_ctx.cx('rejectButton')),
+                unstyled: _ctx.unstyled,
+                pt: _ctx.ptm('rejectButton'),
+                "data-pc-name": "rejectbutton"
+              }, vue.createSlots({
+                _: 2
+              }, [$options.rejectIcon || _ctx.$slots.rejecticon ? {
+                name: "icon",
+                fn: vue.withCtx(function (iconProps) {
+                  return [vue.renderSlot(_ctx.$slots, "rejecticon", {}, function () {
+                    return [vue.createElementVNode("span", vue.mergeProps({
+                      "class": [$options.rejectIcon, iconProps["class"]]
+                    }, _ctx.ptm('rejectButton')['icon'], {
+                      "data-pc-name": "rejectbuttonicon"
+                    }), null, 16)];
+                  })];
+                }),
+                key: "0"
+              } : undefined]), 1032, ["label", "onKeydown", "autofocus", "class", "unstyled", "pt"]), vue.createVNode(_component_CPButton, {
+                label: $options.acceptLabel,
+                onClick: _cache[1] || (_cache[1] = function ($event) {
+                  return $options.accept();
+                }),
+                onKeydown: $options.onAcceptKeydown,
+                autofocus: $data.autoFocusAccept,
+                "class": vue.normalizeClass(_ctx.cx('acceptButton')),
+                unstyled: _ctx.unstyled,
+                pt: _ctx.ptm('acceptButton'),
+                "data-pc-name": "acceptbutton"
+              }, vue.createSlots({
+                _: 2
+              }, [$options.acceptIcon || _ctx.$slots.accepticon ? {
+                name: "icon",
+                fn: vue.withCtx(function (iconProps) {
+                  return [vue.renderSlot(_ctx.$slots, "accepticon", {}, function () {
+                    return [vue.createElementVNode("span", vue.mergeProps({
+                      "class": [$options.acceptIcon, iconProps["class"]]
+                    }, _ctx.ptm('acceptButton')['icon'], {
+                      "data-pc-name": "acceptbuttonicon"
+                    }), null, 16)];
+                  })];
+                }),
+                key: "0"
+              } : undefined]), 1032, ["label", "onKeydown", "autofocus", "class", "unstyled", "pt"])], 16)], 16, _hoisted_1)), [[_directive_focustrap]]) : vue.createCommentVNode("", true)];
+            }),
             _: 3
-          }, 8, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])
-        ]),
+          }, 8, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])];
+        }),
         _: 3
-      }))
+      });
     }
 
-    function styleInject(css, ref) {
-      if ( ref === void 0 ) ref = {};
-      var insertAt = ref.insertAt;
-
-      if (!css || typeof document === 'undefined') { return; }
-
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var style = document.createElement('style');
-      style.type = 'text/css';
-
-      if (insertAt === 'top') {
-        if (head.firstChild) {
-          head.insertBefore(style, head.firstChild);
-        } else {
-          head.appendChild(style);
-        }
-      } else {
-        head.appendChild(style);
-      }
-
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
-    }
-
-    var css_248z = "\n.p-confirm-popup {\n    position: absolute;\n    margin-top: 10px;\n    top: 0;\n    left: 0;\n}\n.p-confirm-popup-flipped {\n    margin-top: 0;\n    margin-bottom: 10px;\n}\n\n/* Animation */\n.p-confirm-popup-enter-from {\n    opacity: 0;\n    transform: scaleY(0.8);\n}\n.p-confirm-popup-leave-to {\n    opacity: 0;\n}\n.p-confirm-popup-enter-active {\n    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);\n}\n.p-confirm-popup-leave-active {\n    transition: opacity 0.1s linear;\n}\n.p-confirm-popup:after,\n.p-confirm-popup:before {\n    bottom: 100%;\n    left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n    content: ' ';\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n}\n.p-confirm-popup:after {\n    border-width: 8px;\n    margin-left: -8px;\n}\n.p-confirm-popup:before {\n    border-width: 10px;\n    margin-left: -10px;\n}\n.p-confirm-popup-flipped:after,\n.p-confirm-popup-flipped:before {\n    bottom: auto;\n    top: 100%;\n}\n.p-confirm-popup.p-confirm-popup-flipped:after {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup.p-confirm-popup-flipped:before {\n    border-bottom-color: transparent;\n}\n.p-confirm-popup .p-confirm-popup-content {\n    display: flex;\n    align-items: center;\n}\n";
-    styleInject(css_248z);
-
     script.render = render;
 
     return script;
 
-})(primevue.basecomponent, primevue.button, primevue.confirmationeventbus, primevue.focustrap, primevue.overlayeventbus, primevue.portal, primevue.utils, Vue);
+})(primevue.button, primevue.confirmationeventbus, primevue.focustrap, primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.basecomponent, primevue.usestyle, Vue);