primevue 3.18.0 → 3.19.0

package/sidebar/sidebar.cjs.js

@@ -1,14 +1,16 @@
 'use strict';
 
-var utils = require('primevue/utils');
-var Ripple = require('primevue/ripple');
+var FocusTrap = require('primevue/focustrap');
 var Portal = require('primevue/portal');
+var Ripple = require('primevue/ripple');
+var utils = require('primevue/utils');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
     name: 'Sidebar',
@@ -39,18 +41,21 @@ var script = {
             type: Boolean,
             default: true
         },
+        closeIcon: {
+            type: String,
+            default: 'pi pi-times'
+        },
         modal: {
             type: Boolean,
             default: true
-        },
-        ariaCloseLabel: {
-            type: String,
-            default: 'close'
         }
     },
     mask: null,
     maskClickListener: null,
     container: null,
+    content: null,
+    headerContainer: null,
+    closeButton: null,
     beforeUnmount() {
         this.destroyModal();
 
@@ -90,11 +95,21 @@ var script = {
             }
         },
         focus() {
-            let focusable = utils.DomHandler.findSingle(this.container, 'input,button');
+            const findFocusableElement = (container) => {
+                return container.querySelector('[autofocus]');
+            };
 
-            if (focusable) {
-                focusable.focus();
+            let focusTarget = this.$slots.default && findFocusableElement(this.content);
+
+            if (!focusTarget) {
+                focusTarget = this.$slots.header && findFocusableElement(this.headerContainer);
+
+                if (!focusTarget) {
+                    focusTarget = findFocusableElement(this.container);
+                }
             }
+
+            focusTarget && focusTarget.focus();
         },
         enableModality() {
             if (!this.mask) {
@@ -127,6 +142,11 @@ var script = {
                 this.mask.addEventListener('click', this.maskClickListener);
             }
         },
+        onKeydown(event) {
+            if (event.code === 'Escape') {
+                this.hide();
+            }
+        },
         unbindMaskClickListener() {
             if (this.maskClickListener) {
                 this.mask.removeEventListener('click', this.maskClickListener);
@@ -143,6 +163,15 @@ var script = {
         },
         containerRef(el) {
             this.container = el;
+        },
+        contentRef(el) {
+            this.content = el;
+        },
+        headerContainerRef(el) {
+            this.headerContainer = el;
+        },
+        closeButtonRef(el) {
+            this.closeButton = el;
         }
     },
     computed: {
@@ -158,9 +187,13 @@ var script = {
         },
         fullScreen() {
             return this.position === 'full';
+        },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     directives: {
+        focustrap: FocusTrap__default["default"],
         ripple: Ripple__default["default"]
     },
     components: {
@@ -169,21 +202,16 @@ var script = {
 };
 
 const _hoisted_1 = ["aria-modal"];
-const _hoisted_2 = { class: "p-sidebar-header" };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 0,
   class: "p-sidebar-header-content"
 };
-const _hoisted_4 = ["aria-label"];
-const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
-const _hoisted_6 = [
-  _hoisted_5
-];
-const _hoisted_7 = { class: "p-sidebar-content" };
+const _hoisted_3 = ["aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = vue.resolveComponent("Portal");
   const _directive_ripple = vue.resolveDirective("ripple");
+  const _directive_focustrap = vue.resolveDirective("focustrap");
 
   return (vue.openBlock(), vue.createBlock(_component_Portal, null, {
     default: vue.withCtx(() => [
@@ -196,35 +224,50 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, {
         default: vue.withCtx(() => [
           ($props.visible)
-            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: 0,
                 ref: $options.containerRef,
                 class: $options.containerClass,
                 role: "complementary",
-                "aria-modal": $props.modal
+                "aria-modal": $props.modal,
+                onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
               }, _ctx.$attrs), [
-                vue.createElementVNode("div", _hoisted_2, [
+                vue.createElementVNode("div", {
+                  ref: $options.headerContainerRef,
+                  class: "p-sidebar-header"
+                }, [
                   (_ctx.$slots.header)
-                    ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                    ? (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",
-                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args))),
-                        "aria-label": $props.ariaCloseLabel,
-                        type: "button"
-                      }, _hoisted_6, 8, _hoisted_4)), [
+                        "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)
-                ]),
-                vue.createElementVNode("div", _hoisted_7, [
+                ], 512),
+                vue.createElementVNode("div", {
+                  ref: $options.contentRef,
+                  class: "p-sidebar-content"
+                }, [
                   vue.renderSlot(_ctx.$slots, "default")
-                ])
-              ], 16, _hoisted_1))
+                ], 512)
+              ], 16, _hoisted_1)), [
+                [_directive_focustrap]
+              ])
             : vue.createCommentVNode("", true)
         ]),
         _: 3

package/sidebar/sidebar.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("primevue/ripple"),n=require("primevue/portal"),i=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(t),r=s(n),o={name:"Sidebar",inheritAttrs:!1,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},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.ZIndexUtils.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},focus(){let t=e.DomHandler.findSingle(this.container,"input,button");t&&t.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),e.DomHandler.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(e.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),e.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:a.default},components:{Portal:r.default}};const l=["aria-modal"],d={class:"p-sidebar-header"},p={key:0,class:"p-sidebar-header-content"},m=["aria-label"],b=[i.createElementVNode("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1)],c={class:"p-sidebar-content"};!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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),o.render=function(e,t,n,s,a,r){const o=i.resolveComponent("Portal"),h=i.resolveDirective("ripple");return i.openBlock(),i.createBlock(o,null,{default:i.withCtx((()=>[i.createVNode(i.Transition,{name:"p-sidebar",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:i.withCtx((()=>[n.visible?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref:r.containerRef,class:r.containerClass,role:"complementary","aria-modal":n.modal},e.$attrs),[i.createElementVNode("div",d,[e.$slots.header?(i.openBlock(),i.createElementBlock("div",p,[i.renderSlot(e.$slots,"header")])):i.createCommentVNode("",!0),n.showCloseIcon?i.withDirectives((i.openBlock(),i.createElementBlock("button",{key:1,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[0]||(t[0]=(...e)=>r.hide&&r.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},b,8,m)),[[h]]):i.createCommentVNode("",!0)]),i.createElementVNode("div",c,[i.renderSlot(e.$slots,"default")])],16,l)):i.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})},module.exports=o;
+"use strict";var e=require("primevue/focustrap"),t=require("primevue/portal"),n=require("primevue/ripple"),i=require("primevue/utils"),s=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(e),o=a(t),l=a(n),d={name:"Sidebar",inheritAttrs:!1,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}},mask:null,maskClickListener:null,container:null,content:null,headerContainer:null,closeButton:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&i.ZIndexUtils.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(e){this.$emit("show"),this.autoZIndex&&i.ZIndexUtils.set("modal",e,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(e){this.autoZIndex&&i.ZIndexUtils.clear(e)},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()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),i.DomHandler.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(i.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},onKeydown(e){"Escape"===e.code&&this.hide()},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),i.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},closeButtonRef(e){this.closeButton=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:r.default,ripple:l.default},components:{Portal:o.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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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,a,r){const o=s.resolveComponent("Portal"),l=s.resolveDirective("ripple"),d=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(o,null,{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-sidebar",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:s.withCtx((()=>[n.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:r.containerRef,class:r.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>r.onKeydown&&r.onKeydown(...e))},e.$attrs),[s.createElementVNode("div",{ref:r.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:r.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":r.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>r.hide&&r.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:r.contentRef,class:"p-sidebar-content"},[s.renderSlot(e.$slots,"default")],512)],16,p)),[[d]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})},module.exports=d;

package/sidebar/sidebar.esm.js

@@ -1,7 +1,8 @@
-import { ZIndexUtils, DomHandler } from 'primevue/utils';
-import Ripple from 'primevue/ripple';
+import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
-import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, createElementBlock, mergeProps, createElementVNode, renderSlot, createCommentVNode, withDirectives } from 'vue';
+import Ripple from 'primevue/ripple';
+import { ZIndexUtils, DomHandler } from 'primevue/utils';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createVNode, Transition, withDirectives, createElementBlock, mergeProps, createElementVNode, renderSlot, createCommentVNode, normalizeClass } from 'vue';
 
 var script = {
     name: 'Sidebar',
@@ -32,18 +33,21 @@ var script = {
             type: Boolean,
             default: true
         },
+        closeIcon: {
+            type: String,
+            default: 'pi pi-times'
+        },
         modal: {
             type: Boolean,
             default: true
-        },
-        ariaCloseLabel: {
-            type: String,
-            default: 'close'
         }
     },
     mask: null,
     maskClickListener: null,
     container: null,
+    content: null,
+    headerContainer: null,
+    closeButton: null,
     beforeUnmount() {
         this.destroyModal();
 
@@ -83,11 +87,21 @@ var script = {
             }
         },
         focus() {
-            let focusable = DomHandler.findSingle(this.container, 'input,button');
+            const findFocusableElement = (container) => {
+                return container.querySelector('[autofocus]');
+            };
+
+            let focusTarget = this.$slots.default && findFocusableElement(this.content);
 
-            if (focusable) {
-                focusable.focus();
+            if (!focusTarget) {
+                focusTarget = this.$slots.header && findFocusableElement(this.headerContainer);
+
+                if (!focusTarget) {
+                    focusTarget = findFocusableElement(this.container);
+                }
             }
+
+            focusTarget && focusTarget.focus();
         },
         enableModality() {
             if (!this.mask) {
@@ -120,6 +134,11 @@ var script = {
                 this.mask.addEventListener('click', this.maskClickListener);
             }
         },
+        onKeydown(event) {
+            if (event.code === 'Escape') {
+                this.hide();
+            }
+        },
         unbindMaskClickListener() {
             if (this.maskClickListener) {
                 this.mask.removeEventListener('click', this.maskClickListener);
@@ -136,6 +155,15 @@ var script = {
         },
         containerRef(el) {
             this.container = el;
+        },
+        contentRef(el) {
+            this.content = el;
+        },
+        headerContainerRef(el) {
+            this.headerContainer = el;
+        },
+        closeButtonRef(el) {
+            this.closeButton = el;
         }
     },
     computed: {
@@ -151,9 +179,13 @@ var script = {
         },
         fullScreen() {
             return this.position === 'full';
+        },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     directives: {
+        focustrap: FocusTrap,
         ripple: Ripple
     },
     components: {
@@ -162,21 +194,16 @@ var script = {
 };
 
 const _hoisted_1 = ["aria-modal"];
-const _hoisted_2 = { class: "p-sidebar-header" };
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 0,
   class: "p-sidebar-header-content"
 };
-const _hoisted_4 = ["aria-label"];
-const _hoisted_5 = /*#__PURE__*/createElementVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
-const _hoisted_6 = [
-  _hoisted_5
-];
-const _hoisted_7 = { class: "p-sidebar-content" };
+const _hoisted_3 = ["aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = resolveComponent("Portal");
   const _directive_ripple = resolveDirective("ripple");
+  const _directive_focustrap = resolveDirective("focustrap");
 
   return (openBlock(), createBlock(_component_Portal, null, {
     default: withCtx(() => [
@@ -189,35 +216,50 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, {
         default: withCtx(() => [
           ($props.visible)
-            ? (openBlock(), createElementBlock("div", mergeProps({
+            ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
                 key: 0,
                 ref: $options.containerRef,
                 class: $options.containerClass,
                 role: "complementary",
-                "aria-modal": $props.modal
+                "aria-modal": $props.modal,
+                onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
               }, _ctx.$attrs), [
-                createElementVNode("div", _hoisted_2, [
+                createElementVNode("div", {
+                  ref: $options.headerContainerRef,
+                  class: "p-sidebar-header"
+                }, [
                   (_ctx.$slots.header)
-                    ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                    ? (openBlock(), createElementBlock("div", _hoisted_2, [
                         renderSlot(_ctx.$slots, "header")
                       ]))
                     : createCommentVNode("", true),
                   ($props.showCloseIcon)
                     ? withDirectives((openBlock(), createElementBlock("button", {
                         key: 1,
+                        ref: $options.closeButtonRef,
+                        autofocus: "",
+                        type: "button",
                         class: "p-sidebar-close p-sidebar-icon p-link",
-                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args))),
-                        "aria-label": $props.ariaCloseLabel,
-                        type: "button"
-                      }, _hoisted_6, 8, _hoisted_4)), [
+                        "aria-label": $options.closeAriaLabel,
+                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args)))
+                      }, [
+                        createElementVNode("span", {
+                          class: normalizeClass(['p-sidebar-close-icon', $props.closeIcon])
+                        }, null, 2)
+                      ], 8, _hoisted_3)), [
                         [_directive_ripple]
                       ])
                     : createCommentVNode("", true)
-                ]),
-                createElementVNode("div", _hoisted_7, [
+                ], 512),
+                createElementVNode("div", {
+                  ref: $options.contentRef,
+                  class: "p-sidebar-content"
+                }, [
                   renderSlot(_ctx.$slots, "default")
-                ])
-              ], 16, _hoisted_1))
+                ], 512)
+              ], 16, _hoisted_1)), [
+                [_directive_focustrap]
+              ])
             : createCommentVNode("", true)
         ]),
         _: 3

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t}from"primevue/utils";import n from"primevue/ripple";import i from"primevue/portal";import{resolveComponent as s,resolveDirective as a,openBlock as r,createBlock as o,withCtx as l,createVNode as d,Transition as p,createElementBlock as b,mergeProps as m,createElementVNode as h,renderSlot as c,createCommentVNode as f,withDirectives as u}from"vue";var k={name:"Sidebar",inheritAttrs:!1,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},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.clear(t)},focus(){let e=t.findSingle(this.container,"input,button");e&&e.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),t.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(t.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),t.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:n},components:{Portal:i}};const v=["aria-modal"],y={class:"p-sidebar-header"},x={key:0,class:"p-sidebar-header-content"},g=["aria-label"],w=[h("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1)],C={class:"p-sidebar-content"};!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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),k.render=function(e,t,n,i,k,L){const I=s("Portal"),M=a("ripple");return r(),o(I,null,{default:l((()=>[d(p,{name:"p-sidebar",onEnter:L.onEnter,onLeave:L.onLeave,onAfterLeave:L.onAfterLeave,appear:""},{default:l((()=>[n.visible?(r(),b("div",m({key:0,ref:L.containerRef,class:L.containerClass,role:"complementary","aria-modal":n.modal},e.$attrs),[h("div",y,[e.$slots.header?(r(),b("div",x,[c(e.$slots,"header")])):f("",!0),n.showCloseIcon?u((r(),b("button",{key:1,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[0]||(t[0]=(...e)=>L.hide&&L.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},w,8,g)),[[M]]):f("",!0)]),h("div",C,[c(e.$slots,"default")])],16,v)):f("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})};export{k as default};
+import e from"primevue/focustrap";import t from"primevue/portal";import n from"primevue/ripple";import{ZIndexUtils as i,DomHandler as s}from"primevue/utils";import{resolveComponent as a,resolveDirective as r,openBlock as o,createBlock as l,withCtx as d,createVNode as p,Transition as m,withDirectives as b,createElementBlock as c,mergeProps as h,createElementVNode as f,renderSlot as u,createCommentVNode as k,normalizeClass as v}from"vue";var y={name:"Sidebar",inheritAttrs:!1,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}},mask:null,maskClickListener:null,container:null,content:null,headerContainer:null,closeButton:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&i.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(e){this.$emit("show"),this.autoZIndex&&i.set("modal",e,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(e){this.autoZIndex&&i.clear(e)},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()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),s.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(s.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},onKeydown(e){"Escape"===e.code&&this.hide()},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),s.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},closeButtonRef(e){this.closeButton=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:e,ripple:n},components:{Portal:t}};const w=["aria-modal"],x={key:0,class:"p-sidebar-header-content"},g=["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 {\n    position: fixed;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\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@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"),y.render=function(e,t,n,i,s,y){const C=a("Portal"),L=r("ripple"),I=r("focustrap");return o(),l(C,null,{default:d((()=>[p(m,{name:"p-sidebar",onEnter:y.onEnter,onLeave:y.onLeave,onAfterLeave:y.onAfterLeave,appear:""},{default:d((()=>[n.visible?b((o(),c("div",h({key:0,ref:y.containerRef,class:y.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>y.onKeydown&&y.onKeydown(...e))},e.$attrs),[f("div",{ref:y.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(o(),c("div",x,[u(e.$slots,"header")])):k("",!0),n.showCloseIcon?b((o(),c("button",{key:1,ref:y.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":y.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>y.hide&&y.hide(...e))},[f("span",{class:v(["p-sidebar-close-icon",n.closeIcon])},null,2)],8,g)),[[L]]):k("",!0)],512),f("div",{ref:y.contentRef,class:"p-sidebar-content"},[u(e.$slots,"default")],512)],16,w)),[[I]]):k("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})};export{y as default};