Refactor #3965 - For Dialog

components/lib/dialog/BaseDialog.vue

@@ -0,0 +1,330 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-dialog-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.p-dialog-mask.p-component-overlay {
+    pointer-events: auto;
+}
+
+.p-dialog {
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    max-height: 90%;
+    transform: scale(1);
+}
+
+.p-dialog-content {
+    overflow-y: auto;
+}
+
+.p-dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+}
+
+.p-dialog-footer {
+    flex-shrink: 0;
+}
+
+.p-dialog .p-dialog-header-icons {
+    display: flex;
+    align-items: center;
+}
+
+.p-dialog .p-dialog-header-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Fluid */
+.p-fluid .p-dialog-footer .p-button {
+    width: auto;
+}
+
+/* Animation */
+/* Center */
+.p-dialog-enter-active {
+    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+.p-dialog-leave-active {
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.p-dialog-enter-from,
+.p-dialog-leave-to {
+    opacity: 0;
+    transform: scale(0.7);
+}
+
+/* Top, Bottom, Left, Right, Top* and Bottom* */
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topleft .p-dialog,
+.p-dialog-topright .p-dialog,
+.p-dialog-bottomleft .p-dialog,
+.p-dialog-bottomright .p-dialog {
+    margin: 0.75rem;
+    transform: translate3d(0px, 0px, 0px);
+}
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-leave-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-leave-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-leave-active,
+.p-dialog-bottomright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-leave-active {
+    transition: all 0.3s ease-out;
+}
+.p-dialog-top .p-dialog-enter-from,
+.p-dialog-top .p-dialog-leave-to {
+    transform: translate3d(0px, -100%, 0px);
+}
+.p-dialog-bottom .p-dialog-enter-from,
+.p-dialog-bottom .p-dialog-leave-to {
+    transform: translate3d(0px, 100%, 0px);
+}
+.p-dialog-left .p-dialog-enter-from,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-enter-from,
+.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-bottomleft .p-dialog-enter-from,
+.p-dialog-bottomleft .p-dialog-leave-to {
+    transform: translate3d(-100%, 0px, 0px);
+}
+.p-dialog-right .p-dialog-enter-from,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-enter-from,
+.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-bottomright .p-dialog-enter-from,
+.p-dialog-bottomright .p-dialog-leave-to {
+    transform: translate3d(100%, 0px, 0px);
+}
+
+/* Maximize */
+.p-dialog-maximized {
+    -webkit-transition: none;
+    transition: none;
+    transform: none;
+    width: 100vw !important;
+    height: 100vh !important;
+    top: 0px !important;
+    left: 0px !important;
+    max-height: 100%;
+    height: 100%;
+}
+.p-dialog-maximized .p-dialog-content {
+    flex-grow: 1;
+}
+
+/* Position */
+.p-dialog-left {
+    justify-content: flex-start;
+}
+.p-dialog-right {
+    justify-content: flex-end;
+}
+.p-dialog-top {
+    align-items: flex-start;
+}
+.p-dialog-topleft {
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+.p-dialog-topright {
+    justify-content: flex-end;
+    align-items: flex-start;
+}
+.p-dialog-bottom {
+    align-items: flex-end;
+}
+.p-dialog-bottomleft {
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+.p-dialog-bottomright {
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+.p-confirm-dialog .p-dialog-content {
+    display: flex;
+    align-items: center;
+}
+`;
+
+const classes = {
+    mask: ({ props, instance }) => ['p-dialog-mask', { 'p-component-overlay p-component-overlay-enter': props.modal }, instance.getPositionClass()],
+    root: ({ props, instance }) => [
+        'p-dialog p-component',
+        {
+            'p-dialog-rtl': props.rtl,
+            'p-dialog-maximized': props.maximizable && instance.maximized,
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    header: 'p-dialog-header',
+    headerTitle: 'p-dialog-title',
+    headerIcons: 'p-dialog-header-icons',
+    maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
+    maximizableIcon: ({ props, instance }) => `p-dialog-header-maximize-icon ${instance.maximized ? props.minimizeIcon : props.maximizeIcon}`,
+    closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
+    closeButtonIcon: ({ props }) => ['p-dialog-header-close-icon', props.closeIcon],
+    content: ({ props }) => ['p-dialog-content', props.contentClass],
+    footer: 'p-dialog-footer'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatar_style', manual: true });
+
+export default {
+    name: 'BaseAvatar',
+    extends: BaseComponent,
+    props: {
+        header: {
+            type: null,
+            default: null
+        },
+        footer: {
+            type: null,
+            default: null
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        modal: {
+            type: Boolean,
+            default: null
+        },
+        contentStyle: {
+            type: null,
+            default: null
+        },
+        contentClass: {
+            type: String,
+            default: null
+        },
+        contentProps: {
+            type: null,
+            default: null
+        },
+        rtl: {
+            type: Boolean,
+            default: null
+        },
+        maximizable: {
+            type: Boolean,
+            default: false
+        },
+        dismissableMask: {
+            type: Boolean,
+            default: false
+        },
+        closable: {
+            type: Boolean,
+            default: true
+        },
+        closeOnEscape: {
+            type: Boolean,
+            default: true
+        },
+        showHeader: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        position: {
+            type: String,
+            default: 'center'
+        },
+        breakpoints: {
+            type: Object,
+            default: null
+        },
+        draggable: {
+            type: Boolean,
+            default: true
+        },
+        keepInViewport: {
+            type: Boolean,
+            default: true
+        },
+        minX: {
+            type: Number,
+            default: 0
+        },
+        minY: {
+            type: Number,
+            default: 0
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        closeIcon: {
+            type: String,
+            default: undefined
+        },
+        maximizeIcon: {
+            type: String,
+            default: undefined
+        },
+        minimizeIcon: {
+            type: String,
+            default: undefined
+        },
+        closeButtonProps: {
+            type: null,
+            default: null
+        },
+        _instance: null
+    },
+    css: {
+        classes
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/dialog/Dialog.d.ts

@@ -248,6 +248,11 @@ export interface DialogProps {
      * @type {DialogPassThroughOptions}
      */
     pt?: DialogPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/dialog/Dialog.vue

@@ -1,26 +1,16 @@
 <template>
     <Portal :appendTo="appendTo">
-        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @click="onMaskClick" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" :class="cx('mask')" @click="onMaskClick" v-bind="ptm('mask')">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
-                <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="dialogClass" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
+                <div v-if="visible" :ref="containerRef" v-focustrap="{ disabled: !modal }" :class="cx('root')" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal" v-bind="{ ...$attrs, ...ptm('root') }">
-                    <div v-if="showHeader" :ref="headerContainerRef" class="p-dialog-header" @mousedown="initDrag" v-bind="ptm('header')">
+                    <div v-if="showHeader" :ref="headerContainerRef" :class="cx('header')" @mousedown="initDrag" v-bind="ptm('header')">
                         <slot name="header">
-                            <span v-if="header" :id="ariaLabelledById" class="p-dialog-title" v-bind="ptm('headerTitle')">{{ header }}</span>
+                            <span v-if="header" :id="ariaLabelledById" :class="cx('headerTitle')" v-bind="ptm('headerTitle')">{{ header }}</span>
                         </slot>
-                        <div class="p-dialog-header-icons" v-bind="ptm('headerIcons')">
+                        <div :class="cx('headerIcons')" v-bind="ptm('headerIcons')">
-                            <button
+                            <button v-if="maximizable" :ref="maximizableRef" v-ripple :autofocus="focusableMax" :class="cx('maximizableButton')" @click="maximize" type="button" :tabindex="maximizable ? '0' : '-1'" v-bind="ptm('maximizableButton')">
-                                v-if="maximizable"
-                                :ref="maximizableRef"
-                                v-ripple
-                                :autofocus="focusableMax"
-                                class="p-dialog-header-icon p-dialog-header-maximize p-link"
-                                @click="maximize"
-                                type="button"
-                                :tabindex="maximizable ? '0' : '-1'"
-                                v-bind="ptm('maximizableButton')"
-                            >
                                 <slot name="maximizeicon" :maximized="maximized">
-                                    <component :is="maximizeIconComponent" :class="maximizeIconClass" v-bind="ptm('maximizableIcon')" />
+                                    <component :is="maximizeIconComponent" :class="cx('maximizableIcon')" v-bind="ptm('maximizableIcon')" />
                                 </slot>
                             </button>
                             <button
@@ -28,22 +18,22 @@
                                 :ref="closeButtonRef"
                                 v-ripple
                                 :autofocus="focusableClose"
-                                class="p-dialog-header-icon p-dialog-header-close p-link"
+                                :class="cx('closeButton')"
                                 @click="close"
                                 :aria-label="closeAriaLabel"
                                 type="button"
                                 v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
                             >
                                 <slot name="closeicon">
-                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-dialog-header-close-icon', closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
+                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="cx('closeButtonIcon')" v-bind="ptm('closeButtonIcon')"></component>
                                 </slot>
                             </button>
                         </div>
                     </div>
-                    <div :ref="contentRef" :class="contentStyleClass" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
+                    <div :ref="contentRef" :class="cx('content')" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
                         <slot></slot>
                     </div>
-                    <div v-if="footer || $slots.footer" :ref="footerContainerRef" class="p-dialog-footer" v-bind="ptm('footer')">
+                    <div v-if="footer || $slots.footer" :ref="footerContainerRef" :class="cx('footer')" v-bind="ptm('footer')">
                         <slot name="footer">{{ footer }}</slot>
                     </div>
                 </div>
@@ -53,7 +43,7 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseDialog from './BaseDialog.vue';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
@@ -65,116 +55,9 @@ import { computed } from 'vue';
 
 export default {
     name: 'Dialog',
-    extends: BaseComponent,
+    extends: BaseDialog,
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
-    props: {
-        header: {
-            type: null,
-            default: null
-        },
-        footer: {
-            type: null,
-            default: null
-        },
-        visible: {
-            type: Boolean,
-            default: false
-        },
-        modal: {
-            type: Boolean,
-            default: null
-        },
-        contentStyle: {
-            type: null,
-            default: null
-        },
-        contentClass: {
-            type: String,
-            default: null
-        },
-        contentProps: {
-            type: null,
-            default: null
-        },
-        rtl: {
-            type: Boolean,
-            default: null
-        },
-        maximizable: {
-            type: Boolean,
-            default: false
-        },
-        dismissableMask: {
-            type: Boolean,
-            default: false
-        },
-        closable: {
-            type: Boolean,
-            default: true
-        },
-        closeOnEscape: {
-            type: Boolean,
-            default: true
-        },
-        showHeader: {
-            type: Boolean,
-            default: true
-        },
-        baseZIndex: {
-            type: Number,
-            default: 0
-        },
-        autoZIndex: {
-            type: Boolean,
-            default: true
-        },
-        position: {
-            type: String,
-            default: 'center'
-        },
-        breakpoints: {
-            type: Object,
-            default: null
-        },
-        draggable: {
-            type: Boolean,
-            default: true
-        },
-        keepInViewport: {
-            type: Boolean,
-            default: true
-        },
-        minX: {
-            type: Number,
-            default: 0
-        },
-        minY: {
-            type: Number,
-            default: 0
-        },
-        appendTo: {
-            type: String,
-            default: 'body'
-        },
-        closeIcon: {
-            type: String,
-            default: undefined
-        },
-        maximizeIcon: {
-            type: String,
-            default: undefined
-        },
-        minimizeIcon: {
-            type: String,
-            default: undefined
-        },
-        closeButtonProps: {
-            type: null,
-            default: null
-        },
-        _instance: null
-    },
     provide() {
         return {
             dialogRef: computed(() => this._instance)
@@ -243,7 +126,7 @@ export default {
         },
         onBeforeLeave() {
             if (this.modal) {
-                DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
             }
         },
         onLeave() {
@@ -305,17 +188,20 @@ export default {
             }
 
             if (!this.modal) {
-                if (this.maximized) DomHandler.addClass(document.body, 'p-overflow-hidden');
+                if (this.maximized) {
-                else DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                    !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
+                } else {
+                    !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                }
             }
         },
         enableDocumentSettings() {
-            if (this.modal || (this.maximizable && this.maximized)) {
+            if (this.modal || (this.maximizable && this.maximized && !this.isUnstyled)) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         unbindDocumentState() {
-            if (this.modal || (this.maximizable && this.maximized)) {
+            if (this.modal || (this.maximizable && this.maximized && !this.isUnstyled)) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },
@@ -391,7 +277,7 @@ export default {
             }
         },
         initDrag(event) {
-            if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
+            if (DomHandler.findSingle(event.target, '[data-pc-section="headeraction"]') || DomHandler.findSingle(event.target.parentElement, '[data-pc-section="headeraction"]')) {
                 return;
             }
 
@@ -401,7 +287,7 @@ export default {
                 this.lastPageY = event.pageY;
 
                 this.container.style.margin = '0';
-                DomHandler.addClass(document.body, 'p-unselectable-text');
+                !this.isUnstyled && DomHandler.addClass(document.body, 'p-unselectable-text');
             }
         },
         bindGlobalListeners() {
@@ -464,7 +350,7 @@ export default {
             this.documentDragEndListener = (event) => {
                 if (this.dragging) {
                     this.dragging = false;
-                    DomHandler.removeClass(document.body, 'p-unselectable-text');
+                    !this.isUnstyled && DomHandler.removeClass(document.body, 'p-unselectable-text');
 
                     this.$emit('dragend', event);
                 }
@@ -480,28 +366,10 @@ export default {
         }
     },
     computed: {
-        maskClass() {
-            return ['p-dialog-mask', { 'p-component-overlay p-component-overlay-enter': this.modal }, this.getPositionClass()];
-        },
-        dialogClass() {
-            return [
-                'p-dialog p-component',
-                {
-                    'p-dialog-rtl': this.rtl,
-                    'p-dialog-maximized': this.maximizable && this.maximized,
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        },
         maximizeIconComponent() {
             return this.maximized ? (this.minimizeIcon ? 'span' : 'WindowMinimizeIcon') : this.maximizeIcon ? 'span' : 'WindowMaximizeIcon';
         },
-        maximizeIconClass() {
-            const maximizeClasses = this.maximized ? this.minimizeIcon : this.maximizeIcon;
 
-            return `p-dialog-header-maximize-icon ${maximizeClasses}`;
-        },
         ariaId() {
             return UniqueComponentId();
         },
@@ -530,181 +398,3 @@ export default {
     }
 };
 </script>
-<style>
-.p-dialog-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-}
-
-.p-dialog-mask.p-component-overlay {
-    pointer-events: auto;
-}
-
-.p-dialog {
-    display: flex;
-    flex-direction: column;
-    pointer-events: auto;
-    max-height: 90%;
-    transform: scale(1);
-}
-
-.p-dialog-content {
-    overflow-y: auto;
-}
-
-.p-dialog-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-shrink: 0;
-}
-
-.p-dialog-footer {
-    flex-shrink: 0;
-}
-
-.p-dialog .p-dialog-header-icons {
-    display: flex;
-    align-items: center;
-}
-
-.p-dialog .p-dialog-header-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Fluid */
-.p-fluid .p-dialog-footer .p-button {
-    width: auto;
-}
-
-/* Animation */
-/* Center */
-.p-dialog-enter-active {
-    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-}
-.p-dialog-leave-active {
-    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.p-dialog-enter-from,
-.p-dialog-leave-to {
-    opacity: 0;
-    transform: scale(0.7);
-}
-
-/* Top, Bottom, Left, Right, Top* and Bottom* */
-.p-dialog-top .p-dialog,
-.p-dialog-bottom .p-dialog,
-.p-dialog-left .p-dialog,
-.p-dialog-right .p-dialog,
-.p-dialog-topleft .p-dialog,
-.p-dialog-topright .p-dialog,
-.p-dialog-bottomleft .p-dialog,
-.p-dialog-bottomright .p-dialog {
-    margin: 0.75rem;
-    transform: translate3d(0px, 0px, 0px);
-}
-.p-dialog-top .p-dialog-enter-active,
-.p-dialog-top .p-dialog-leave-active,
-.p-dialog-bottom .p-dialog-enter-active,
-.p-dialog-bottom .p-dialog-leave-active,
-.p-dialog-left .p-dialog-enter-active,
-.p-dialog-left .p-dialog-leave-active,
-.p-dialog-right .p-dialog-enter-active,
-.p-dialog-right .p-dialog-leave-active,
-.p-dialog-topleft .p-dialog-enter-active,
-.p-dialog-topleft .p-dialog-leave-active,
-.p-dialog-topright .p-dialog-enter-active,
-.p-dialog-topright .p-dialog-leave-active,
-.p-dialog-bottomleft .p-dialog-enter-active,
-.p-dialog-bottomleft .p-dialog-leave-active,
-.p-dialog-bottomright .p-dialog-enter-active,
-.p-dialog-bottomright .p-dialog-leave-active {
-    transition: all 0.3s ease-out;
-}
-.p-dialog-top .p-dialog-enter-from,
-.p-dialog-top .p-dialog-leave-to {
-    transform: translate3d(0px, -100%, 0px);
-}
-.p-dialog-bottom .p-dialog-enter-from,
-.p-dialog-bottom .p-dialog-leave-to {
-    transform: translate3d(0px, 100%, 0px);
-}
-.p-dialog-left .p-dialog-enter-from,
-.p-dialog-left .p-dialog-leave-to,
-.p-dialog-topleft .p-dialog-enter-from,
-.p-dialog-topleft .p-dialog-leave-to,
-.p-dialog-bottomleft .p-dialog-enter-from,
-.p-dialog-bottomleft .p-dialog-leave-to {
-    transform: translate3d(-100%, 0px, 0px);
-}
-.p-dialog-right .p-dialog-enter-from,
-.p-dialog-right .p-dialog-leave-to,
-.p-dialog-topright .p-dialog-enter-from,
-.p-dialog-topright .p-dialog-leave-to,
-.p-dialog-bottomright .p-dialog-enter-from,
-.p-dialog-bottomright .p-dialog-leave-to {
-    transform: translate3d(100%, 0px, 0px);
-}
-
-/* Maximize */
-.p-dialog-maximized {
-    -webkit-transition: none;
-    transition: none;
-    transform: none;
-    width: 100vw !important;
-    height: 100vh !important;
-    top: 0px !important;
-    left: 0px !important;
-    max-height: 100%;
-    height: 100%;
-}
-.p-dialog-maximized .p-dialog-content {
-    flex-grow: 1;
-}
-
-/* Position */
-.p-dialog-left {
-    justify-content: flex-start;
-}
-.p-dialog-right {
-    justify-content: flex-end;
-}
-.p-dialog-top {
-    align-items: flex-start;
-}
-.p-dialog-topleft {
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-.p-dialog-topright {
-    justify-content: flex-end;
-    align-items: flex-start;
-}
-.p-dialog-bottom {
-    align-items: flex-end;
-}
-.p-dialog-bottomleft {
-    justify-content: flex-start;
-    align-items: flex-end;
-}
-.p-dialog-bottomright {
-    justify-content: flex-end;
-    align-items: flex-end;
-}
-
-.p-confirm-dialog .p-dialog-content {
-    display: flex;
-    align-items: center;
-}
-</style>