primevue 3.22.0 → 3.22.2

package/sidebar/sidebar.cjs.js

@@ -14,7 +14,8 @@ var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Sidebar',
-    emits: ['update:visible', 'show', 'hide'],
+    inheritAttrs: false,
+    emits: ['update:visible', 'show', 'hide', 'after-hide'],
     props: {
         visible: {
             type: Boolean,
@@ -50,67 +51,70 @@ var script = {
         },
         blockScroll: {
             type: Boolean,
-            default: true
+            default: false
         }
     },
+    data() {
+        return {
+            containerVisible: this.visible
+        };
+    },
     container: null,
+    mask: null,
     content: null,
     headerContainer: null,
     closeButton: null,
     outsideClickListener: null,
-    data() {
-        return {
-            maskVisible: false
-        };
-    },
-    watch: {
-        visible(newValue) {
-            this.maskVisible = newValue ? newValue : this.maskVisible;
+    updated() {
+        if (this.visible) {
+            this.containerVisible = this.visible;
         }
     },
     beforeUnmount() {
-        if (this.container && this.autoZIndex) {
-            utils.ZIndexUtils.clear(this.container);
+        this.disableDocumentSettings();
+
+        if (this.mask && this.autoZIndex) {
+            utils.ZIndexUtils.clear(this.mask);
         }
 
-        this.unbindOutsideClickListener();
         this.container = null;
+        this.mask = null;
     },
     methods: {
         hide() {
             this.$emit('update:visible', false);
-
-            this.unbindOutsideClickListener();
-            this.blockScroll && utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
         },
         onEnter() {
             this.$emit('show');
+            this.focus();
 
             if (this.autoZIndex) {
-                utils.ZIndexUtils.set('modal', this.$refs.mask, this.baseZIndex || this.$primevue.config.zIndex.modal);
+                utils.ZIndexUtils.set('modal', this.mask, this.baseZIndex || this.$primevue.config.zIndex.modal);
+            }
+        },
+        onAfterEnter() {
+            this.enableDocumentSettings();
+        },
+        onBeforeLeave() {
+            if (this.modal) {
+                utils.DomHandler.addClass(this.mask, 'p-component-overlay-leave');
             }
-
-            this.maskVisible = true;
-            this.focus();
         },
         onLeave() {
-            utils.DomHandler.addClass(this.$refs.mask, 'p-component-overlay-leave');
-
             this.$emit('hide');
-            this.unbindOutsideClickListener();
         },
         onAfterLeave() {
             if (this.autoZIndex) {
                 utils.ZIndexUtils.clear(this.mask);
             }
 
-            this.maskVisible = false;
+            this.containerVisible = false;
+            this.disableDocumentSettings();
+            this.$emit('after-hide');
         },
-        onAfterEnter() {
-            this.bindOutsideClickListener();
-
-            if (this.blockScroll) {
-                utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
+        onMaskClick(event) {
+            if (this.dismissable && this.modal && this.mask === event.target) {
+                this.hide();
             }
         },
         focus() {
@@ -130,19 +134,33 @@ var script = {
 
             focusTarget && focusTarget.focus();
         },
-        onKeydown(event) {
-            if (event.code === 'Escape') {
-                this.hide();
+        enableDocumentSettings() {
+            if (this.dismissable && !this.modal) {
+                this.bindOutsideClickListener();
+            }
+
+            if (this.blockScroll) {
+                utils.DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
-        onMaskClick(event) {
-            if (this.dismissable && this.modal && this.$refs.mask === event.target) {
+        disableDocumentSettings() {
+            this.unbindOutsideClickListener();
+
+            if (this.blockScroll) {
+                utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            }
+        },
+        onKeydown(event) {
+            if (event.code === 'Escape') {
                 this.hide();
             }
         },
         containerRef(el) {
             this.container = el;
         },
+        maskRef(el) {
+            this.mask = el;
+        },
         contentRef(el) {
             this.content = el;
         },
@@ -161,7 +179,7 @@ var script = {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (!this.modal && this.isOutsideClicked(event) && this.dismissable) {
+                    if (this.isOutsideClicked(event)) {
                         this.hide();
                     }
                 };
@@ -196,14 +214,14 @@ var script = {
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         },
-        maskClasses() {
+        maskClass() {
             return [
                 'p-sidebar-mask',
                 this.getPositionClass(),
                 {
                     'p-component-overlay p-component-overlay-enter': this.modal,
                     'p-sidebar-mask-scrollblocker': this.blockScroll,
-                    'p-sidebar-visible': this.maskVisible,
+                    'p-sidebar-visible': this.containerVisible,
                     'p-sidebar-full': this.fullScreen
                 }
             ];
@@ -232,71 +250,74 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (vue.openBlock(), vue.createBlock(_component_Portal, null, {
     default: vue.withCtx(() => [
-      vue.createElementVNode("div", {
-        ref: "mask",
-        style: {},
-        class: vue.normalizeClass($options.maskClasses),
-        onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
-      }, [
-        vue.createVNode(vue.Transition, {
-          name: "p-sidebar",
-          onAfterEnter: $options.onAfterEnter,
-          onEnter: $options.onEnter,
-          onLeave: $options.onLeave,
-          onAfterLeave: $options.onAfterLeave,
-          appear: ""
-        }, {
-          default: vue.withCtx(() => [
-            ($props.visible)
-              ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-                  key: 0,
-                  ref: $options.containerRef,
-                  class: $options.containerClass,
-                  role: "complementary",
-                  "aria-modal": $props.modal,
-                  onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-                }, _ctx.$attrs), [
-                  vue.createElementVNode("div", {
-                    ref: $options.headerContainerRef,
-                    class: "p-sidebar-header"
-                  }, [
-                    (_ctx.$slots.header)
-                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-                          vue.renderSlot(_ctx.$slots, "header")
-                        ]))
-                      : vue.createCommentVNode("", true),
-                    ($props.showCloseIcon)
-                      ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-                          key: 1,
-                          ref: $options.closeButtonRef,
-                          autofocus: "",
-                          type: "button",
-                          class: "p-sidebar-close p-sidebar-icon p-link",
-                          "aria-label": $options.closeAriaLabel,
-                          onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args)))
-                        }, [
-                          vue.createElementVNode("span", {
-                            class: vue.normalizeClass(['p-sidebar-close-icon', $props.closeIcon])
-                          }, null, 2)
-                        ], 8, _hoisted_3)), [
-                          [_directive_ripple]
-                        ])
-                      : vue.createCommentVNode("", true)
-                  ], 512),
-                  vue.createElementVNode("div", {
-                    ref: $options.contentRef,
-                    class: "p-sidebar-content"
-                  }, [
-                    vue.renderSlot(_ctx.$slots, "default")
-                  ], 512)
-                ], 16, _hoisted_1)), [
-                  [_directive_focustrap]
-                ])
-              : vue.createCommentVNode("", true)
-          ]),
-          _: 3
-        }, 8, ["onAfterEnter", "onEnter", "onLeave", "onAfterLeave"])
-      ], 34)
+      ($data.containerVisible)
+        ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            ref: $options.maskRef,
+            class: vue.normalizeClass($options.maskClass),
+            onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
+          }, [
+            vue.createVNode(vue.Transition, {
+              name: "p-sidebar",
+              onEnter: $options.onEnter,
+              onAfterEnter: $options.onAfterEnter,
+              onBeforeLeave: $options.onBeforeLeave,
+              onLeave: $options.onLeave,
+              onAfterLeave: $options.onAfterLeave,
+              appear: ""
+            }, {
+              default: vue.withCtx(() => [
+                ($props.visible)
+                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                      key: 0,
+                      ref: $options.containerRef,
+                      class: $options.containerClass,
+                      role: "complementary",
+                      "aria-modal": $props.modal,
+                      onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
+                    }, _ctx.$attrs), [
+                      vue.createElementVNode("div", {
+                        ref: $options.headerContainerRef,
+                        class: "p-sidebar-header"
+                      }, [
+                        (_ctx.$slots.header)
+                          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                              vue.renderSlot(_ctx.$slots, "header")
+                            ]))
+                          : vue.createCommentVNode("", true),
+                        ($props.showCloseIcon)
+                          ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                              key: 1,
+                              ref: $options.closeButtonRef,
+                              autofocus: "",
+                              type: "button",
+                              class: "p-sidebar-close p-sidebar-icon p-link",
+                              "aria-label": $options.closeAriaLabel,
+                              onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args)))
+                            }, [
+                              vue.createElementVNode("span", {
+                                class: vue.normalizeClass(['p-sidebar-close-icon', $props.closeIcon])
+                              }, null, 2)
+                            ], 8, _hoisted_3)), [
+                              [_directive_ripple]
+                            ])
+                          : vue.createCommentVNode("", true)
+                      ], 512),
+                      vue.createElementVNode("div", {
+                        ref: $options.contentRef,
+                        class: "p-sidebar-content"
+                      }, [
+                        vue.renderSlot(_ctx.$slots, "default")
+                      ], 512)
+                    ], 16, _hoisted_1)), [
+                      [_directive_focustrap]
+                    ])
+                  : vue.createCommentVNode("", true)
+              ]),
+              _: 3
+            }, 8, ["onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
+          ], 34))
+        : vue.createCommentVNode("", true)
     ]),
     _: 3
   }))
@@ -329,7 +350,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-sidebar-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n.p-sidebar-visible {\n    display: flex;\n}\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Position */\n.p-sidebar-left {\n    justify-content: flex-start;\n}\n.p-sidebar-right {\n    justify-content: flex-end;\n}\n.p-sidebar-top {\n    align-items: flex-start;\n}\n.p-sidebar-bottom {\n    align-items: flex-end;\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n.p-sidebar-left .p-sidebar-view,\n.p-sidebar-right .p-sidebar-view,\n.p-sidebar-top .p-sidebar-view,\n.p-sidebar-bottom .p-sidebar-view {\n    width: 100%;\n    height: 100%;\n}\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n@media screen and (max-width: 64em) {\n.p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n}\n}\n";
+var css_248z = "\n.p-sidebar-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-sidebar-visible {\n    display: flex;\n}\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Position */\n.p-sidebar-left {\n    justify-content: flex-start;\n}\n.p-sidebar-right {\n    justify-content: flex-end;\n}\n.p-sidebar-top {\n    align-items: flex-start;\n}\n.p-sidebar-bottom {\n    align-items: flex-end;\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n@media screen and (max-width: 64em) {\n.p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n}\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/sidebar/sidebar.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/focustrap"),t=require("primevue/portal"),n=require("primevue/ripple"),i=require("primevue/utils"),s=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),o=r(t),l=r(n),d={name:"Sidebar",emits:["update:visible","show","hide"],props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:"pi pi-times"},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!0}},container:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,data:()=>({maskVisible:!1}),watch:{visible(e){this.maskVisible=e||this.maskVisible}},beforeUnmount(){this.container&&this.autoZIndex&&i.ZIndexUtils.clear(this.container),this.unbindOutsideClickListener(),this.container=null},methods:{hide(){this.$emit("update:visible",!1),this.unbindOutsideClickListener(),this.blockScroll&&i.DomHandler.removeClass(document.body,"p-overflow-hidden")},onEnter(){this.$emit("show"),this.autoZIndex&&i.ZIndexUtils.set("modal",this.$refs.mask,this.baseZIndex||this.$primevue.config.zIndex.modal),this.maskVisible=!0,this.focus()},onLeave(){i.DomHandler.addClass(this.$refs.mask,"p-component-overlay-leave"),this.$emit("hide"),this.unbindOutsideClickListener()},onAfterLeave(){this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.maskVisible=!1},onAfterEnter(){this.bindOutsideClickListener(),this.blockScroll&&i.DomHandler.addClass(document.body,"p-overflow-hidden")},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.default&&e(this.content);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=e(this.container))),t&&t.focus()},onKeydown(e){"Escape"===e.code&&this.hide()},onMaskClick(e){this.dismissable&&this.modal&&this.$refs.mask===e.target&&this.hide()},containerRef(e){this.container=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},closeButtonRef(e){this.closeButton=e},getPositionClass(){const e=["left","right","top","bottom"].find((e=>e===this.position));return e?`p-sidebar-${e}`:""},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{!this.modal&&this.isOutsideClicked(e)&&this.dismissable&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked(e){return this.container&&!this.container.contains(e.target)}},computed:{containerClass(){return["p-sidebar p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple,"p-sidebar-full":this.fullScreen}]},fullScreen(){return"full"===this.position},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},maskClasses(){return["p-sidebar-mask",this.getPositionClass(),{"p-component-overlay p-component-overlay-enter":this.modal,"p-sidebar-mask-scrollblocker":this.blockScroll,"p-sidebar-visible":this.maskVisible,"p-sidebar-full":this.fullScreen}]}},directives:{focustrap:a.default,ripple:l.default},components:{Portal:o.default}};const p=["aria-modal"],c={key:0,class:"p-sidebar-header-content"},b=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-sidebar-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n.p-sidebar-visible {\n    display: flex;\n}\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Position */\n.p-sidebar-left {\n    justify-content: flex-start;\n}\n.p-sidebar-right {\n    justify-content: flex-end;\n}\n.p-sidebar-top {\n    align-items: flex-start;\n}\n.p-sidebar-bottom {\n    align-items: flex-end;\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n.p-sidebar-left .p-sidebar-view,\n.p-sidebar-right .p-sidebar-view,\n.p-sidebar-top .p-sidebar-view,\n.p-sidebar-bottom .p-sidebar-view {\n    width: 100%;\n    height: 100%;\n}\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n@media screen and (max-width: 64em) {\n.p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n}\n}\n"),d.render=function(e,t,n,i,r,a){const o=s.resolveComponent("Portal"),l=s.resolveDirective("ripple"),d=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(o,null,{default:s.withCtx((()=>[s.createElementVNode("div",{ref:"mask",style:{},class:s.normalizeClass(a.maskClasses),onMousedown:t[2]||(t[2]=(...e)=>a.onMaskClick&&a.onMaskClick(...e))},[s.createVNode(s.Transition,{name:"p-sidebar",onAfterEnter:a.onAfterEnter,onEnter:a.onEnter,onLeave:a.onLeave,onAfterLeave:a.onAfterLeave,appear:""},{default:s.withCtx((()=>[n.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:a.containerRef,class:a.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>a.onKeydown&&a.onKeydown(...e))},e.$attrs),[s.createElementVNode("div",{ref:a.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(s.openBlock(),s.createElementBlock("div",c,[s.renderSlot(e.$slots,"header")])):s.createCommentVNode("",!0),n.showCloseIcon?s.withDirectives((s.openBlock(),s.createElementBlock("button",{key:1,ref:a.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":a.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>a.hide&&a.hide(...e))},[s.createElementVNode("span",{class:s.normalizeClass(["p-sidebar-close-icon",n.closeIcon])},null,2)],8,b)),[[l]]):s.createCommentVNode("",!0)],512),s.createElementVNode("div",{ref:a.contentRef,class:"p-sidebar-content"},[s.renderSlot(e.$slots,"default")],512)],16,p)),[[d]]):s.createCommentVNode("",!0)])),_:3},8,["onAfterEnter","onEnter","onLeave","onAfterLeave"])],34)])),_:3})},module.exports=d;
+"use strict";var e=require("primevue/focustrap"),t=require("primevue/portal"),n=require("primevue/ripple"),i=require("primevue/utils"),s=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e),a=r(t),l=r(n),d={name:"Sidebar",inheritAttrs:!1,emits:["update:visible","show","hide","after-hide"],props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:"pi pi-times"},modal:{type:Boolean,default:!0},blockScroll:{type:Boolean,default:!1}},data(){return{containerVisible:this.visible}},container:null,mask:null,content:null,headerContainer:null,closeButton:null,outsideClickListener:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.disableDocumentSettings(),this.mask&&this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(){this.$emit("show"),this.focus(),this.autoZIndex&&i.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter(){this.enableDocumentSettings()},onBeforeLeave(){this.modal&&i.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.disableDocumentSettings(),this.$emit("after-hide")},onMaskClick(e){this.dismissable&&this.modal&&this.mask===e.target&&this.hide()},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.default&&e(this.content);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=e(this.container))),t&&t.focus()},enableDocumentSettings(){this.dismissable&&!this.modal&&this.bindOutsideClickListener(),this.blockScroll&&i.DomHandler.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings(){this.unbindOutsideClickListener(),this.blockScroll&&i.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeydown(e){"Escape"===e.code&&this.hide()},containerRef(e){this.container=e},maskRef(e){this.mask=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},closeButtonRef(e){this.closeButton=e},getPositionClass(){const e=["left","right","top","bottom"].find((e=>e===this.position));return e?`p-sidebar-${e}`:""},bindOutsideClickListener(){this.outsideClickListener||(this.outsideClickListener=e=>{this.isOutsideClicked(e)&&this.hide()},document.addEventListener("click",this.outsideClickListener))},unbindOutsideClickListener(){this.outsideClickListener&&(document.removeEventListener("click",this.outsideClickListener),this.outsideClickListener=null)},isOutsideClicked(e){return this.container&&!this.container.contains(e.target)}},computed:{containerClass(){return["p-sidebar p-component",{"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple,"p-sidebar-full":this.fullScreen}]},fullScreen(){return"full"===this.position},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},maskClass(){return["p-sidebar-mask",this.getPositionClass(),{"p-component-overlay p-component-overlay-enter":this.modal,"p-sidebar-mask-scrollblocker":this.blockScroll,"p-sidebar-visible":this.containerVisible,"p-sidebar-full":this.fullScreen}]}},directives:{focustrap:o.default,ripple:l.default},components:{Portal:a.default}};const p=["aria-modal"],c={key:0,class:"p-sidebar-header-content"},m=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-sidebar-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: none;\n    justify-content: center;\n    align-items: center;\n    pointer-events: none;\n    background-color: transparent;\n    transition-property: background-color;\n}\n.p-sidebar-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-sidebar-visible {\n    display: flex;\n}\n.p-sidebar {\n    display: flex;\n    flex-direction: column;\n    pointer-events: auto;\n    transform: translate3d(0px, 0px, 0px);\n    position: relative;\n    transition: transform 0.3s;\n}\n.p-sidebar-content {\n    overflow-y: auto;\n    flex-grow: 1;\n}\n.p-sidebar-header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-shrink: 0;\n}\n.p-sidebar-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-sidebar-full .p-sidebar {\n    transition: none;\n    transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    max-height: 100%;\n    top: 0px !important;\n    left: 0px !important;\n}\n\n/* Animation */\n/* Center */\n.p-sidebar-left .p-sidebar-enter-from,\n.p-sidebar-left .p-sidebar-leave-to {\n    transform: translateX(-100%);\n}\n.p-sidebar-right .p-sidebar-enter-from,\n.p-sidebar-right .p-sidebar-leave-to {\n    transform: translateX(100%);\n}\n.p-sidebar-top .p-sidebar-enter-from,\n.p-sidebar-top .p-sidebar-leave-to {\n    transform: translateY(-100%);\n}\n.p-sidebar-bottom .p-sidebar-enter-from,\n.p-sidebar-bottom .p-sidebar-leave-to {\n    transform: translateY(100%);\n}\n.p-sidebar-full .p-sidebar-enter-from,\n.p-sidebar-full .p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full .p-sidebar-enter-active,\n.p-sidebar-full .p-sidebar-leave-active {\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n/* Position */\n.p-sidebar-left {\n    justify-content: flex-start;\n}\n.p-sidebar-right {\n    justify-content: flex-end;\n}\n.p-sidebar-top {\n    align-items: flex-start;\n}\n.p-sidebar-bottom {\n    align-items: flex-end;\n}\n\n/* Size */\n.p-sidebar-left .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right .p-sidebar {\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-bottom .p-sidebar {\n    height: 10rem;\n    width: 100%;\n}\n.p-sidebar-left .p-sidebar-sm,\n.p-sidebar-right .p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left .p-sidebar-md,\n.p-sidebar-right .p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left .p-sidebar-lg,\n.p-sidebar-right .p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top .p-sidebar-sm,\n.p-sidebar-bottom .p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top .p-sidebar-md,\n.p-sidebar-bottom .p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top .p-sidebar-lg,\n.p-sidebar-bottom .p-sidebar-lg {\n    height: 30rem;\n}\n.p-sidebar-left .p-sidebar-content,\n.p-sidebar-right .p-sidebar-content,\n.p-sidebar-top .p-sidebar-content,\n.p-sidebar-bottom .p-sidebar-content {\n    width: 100%;\n    height: 100%;\n}\n@media screen and (max-width: 64em) {\n.p-sidebar-left .p-sidebar-lg,\n    .p-sidebar-left .p-sidebar-md,\n    .p-sidebar-right .p-sidebar-lg,\n    .p-sidebar-right .p-sidebar-md {\n        width: 20rem;\n}\n}\n"),d.render=function(e,t,n,i,r,o){const a=s.resolveComponent("Portal"),l=s.resolveDirective("ripple"),d=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(a,null,{default:s.withCtx((()=>[r.containerVisible?(s.openBlock(),s.createElementBlock("div",{key:0,ref:o.maskRef,class:s.normalizeClass(o.maskClass),onMousedown:t[2]||(t[2]=(...e)=>o.onMaskClick&&o.onMaskClick(...e))},[s.createVNode(s.Transition,{name:"p-sidebar",onEnter:o.onEnter,onAfterEnter:o.onAfterEnter,onBeforeLeave:o.onBeforeLeave,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave,appear:""},{default:s.withCtx((()=>[n.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:o.containerRef,class:o.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>o.onKeydown&&o.onKeydown(...e))},e.$attrs),[s.createElementVNode("div",{ref:o.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(s.openBlock(),s.createElementBlock("div",c,[s.renderSlot(e.$slots,"header")])):s.createCommentVNode("",!0),n.showCloseIcon?s.withDirectives((s.openBlock(),s.createElementBlock("button",{key:1,ref:o.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":o.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>o.hide&&o.hide(...e))},[s.createElementVNode("span",{class:s.normalizeClass(["p-sidebar-close-icon",n.closeIcon])},null,2)],8,m)),[[l]]):s.createCommentVNode("",!0)],512),s.createElementVNode("div",{ref:o.contentRef,class:"p-sidebar-content"},[s.renderSlot(e.$slots,"default")],512)],16,p)),[[d]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],34)):s.createCommentVNode("",!0)])),_:3})},module.exports=d;