primevue 3.26.0 → 3.27.0

package/scrolltop/scrolltop.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),n={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(e.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.ZIndexUtils.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}}};const i=["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],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n"),n.render=function(e,n,l,o,r,s){return t.openBlock(),t.createBlock(t.Transition,{name:"p-scrolltop",appear:"",onEnter:s.onEnter,onAfterLeave:s.onAfterLeave},{default:t.withCtx((()=>[r.visible?(t.openBlock(),t.createElementBlock("button",{key:0,ref:s.containerRef,class:t.normalizeClass(s.containerClass),onClick:n[0]||(n[0]=(...e)=>s.onClick&&s.onClick(...e)),type:"button","aria-label":s.scrollTopAriaLabel},[t.createElementVNode("span",{class:t.normalizeClass(s.iconClass)},null,2)],10,i)):t.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterLeave"])},module.exports=n;
+"use strict";var e=require("primevue/icons/chevronup"),t=require("primevue/utils"),n=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:void 0},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(t.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(t.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(e){t.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave(e){t.ZIndexUtils.clear(e)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}},components:{ChevronUpIcon:i(e).default}};const l=["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],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n"),o.render=function(e,t,i,o,r,s){return n.openBlock(),n.createBlock(n.Transition,{name:"p-scrolltop",appear:"",onEnter:s.onEnter,onAfterLeave:s.onAfterLeave},{default:n.withCtx((()=>[r.visible?(n.openBlock(),n.createElementBlock("button",{key:0,ref:s.containerRef,class:n.normalizeClass(s.containerClass),onClick:t[0]||(t[0]=(...e)=>s.onClick&&s.onClick(...e)),type:"button","aria-label":s.scrollTopAriaLabel},[n.renderSlot(e.$slots,"icon",{},(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.icon?"span":"ChevronUpIcon"),{class:n.normalizeClass(["p-scrolltop-icon",i.icon])},null,8,["class"]))]))],10,l)):n.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterLeave"])},module.exports=o;

package/scrolltop/scrolltop.esm.js

@@ -1,5 +1,6 @@
+import ChevronUpIcon from 'primevue/icons/chevronup';
 import { ZIndexUtils, DomHandler } from 'primevue/utils';
-import { openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeClass, createElementVNode, createCommentVNode } from 'vue';
+import { openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeClass, renderSlot, resolveDynamicComponent, createCommentVNode } from 'vue';
 
 var script = {
     name: 'ScrollTop',
@@ -16,7 +17,7 @@ var script = {
         },
         icon: {
             type: String,
-            default: 'pi pi-chevron-up'
+            default: undefined
         },
         behavior: {
             type: String,
@@ -94,12 +95,12 @@ var script = {
         containerClass() {
             return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
         },
-        iconClass() {
-            return ['p-scrolltop-icon', this.icon];
-        },
         scrollTopAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.scrollTop : undefined;
         }
+    },
+    components: {
+        ChevronUpIcon
     }
 };
 
@@ -122,13 +123,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             type: "button",
             "aria-label": $options.scrollTopAriaLabel
           }, [
-            createElementVNode("span", {
-              class: normalizeClass($options.iconClass)
-            }, null, 2)
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), {
+                class: normalizeClass(['p-scrolltop-icon', $props.icon])
+              }, null, 8, ["class"]))
+            ])
           ], 10, _hoisted_1))
         : createCommentVNode("", true)
     ]),
-    _: 1
+    _: 3
   }, 8, ["onEnter", "onAfterLeave"]))
 }
 

package/scrolltop/scrolltop.esm.min.js

@@ -1 +1 @@
-import{ZIndexUtils as e,DomHandler as t}from"primevue/utils";import{openBlock as n,createBlock as i,Transition as r,withCtx as l,createElementBlock as o,normalizeClass as s,createElementVNode as c,createCommentVNode as a}from"vue";var p={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(t.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}}};const h=["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],r=document.createElement("style");r.type="text/css","top"===n&&i.firstChild?i.insertBefore(r,i.firstChild):i.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n"),p.render=function(e,t,p,d,u,m){return n(),i(r,{name:"p-scrolltop",appear:"",onEnter:m.onEnter,onAfterLeave:m.onAfterLeave},{default:l((()=>[u.visible?(n(),o("button",{key:0,ref:m.containerRef,class:s(m.containerClass),onClick:t[0]||(t[0]=(...e)=>m.onClick&&m.onClick(...e)),type:"button","aria-label":m.scrollTopAriaLabel},[c("span",{class:s(m.iconClass)},null,2)],10,h)):a("",!0)])),_:1},8,["onEnter","onAfterLeave"])};export{p as default};
+import e from"primevue/icons/chevronup";import{ZIndexUtils as t,DomHandler as n}from"primevue/utils";import{openBlock as i,createBlock as o,Transition as r,withCtx as l,createElementBlock as s,normalizeClass as c,renderSlot as a,resolveDynamicComponent as p,createCommentVNode as h}from"vue";var d={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:void 0},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(t.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(n.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(e){t.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave(e){t.clear(e)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}},components:{ChevronUpIcon:e}};const u=["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],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n"),d.render=function(e,t,n,d,m,v){return i(),o(r,{name:"p-scrolltop",appear:"",onEnter:v.onEnter,onAfterLeave:v.onAfterLeave},{default:l((()=>[m.visible?(i(),s("button",{key:0,ref:v.containerRef,class:c(v.containerClass),onClick:t[0]||(t[0]=(...e)=>v.onClick&&v.onClick(...e)),type:"button","aria-label":v.scrollTopAriaLabel},[a(e.$slots,"icon",{},(()=>[(i(),o(p(n.icon?"span":"ChevronUpIcon"),{class:c(["p-scrolltop-icon",n.icon])},null,8,["class"]))]))],10,u)):h("",!0)])),_:3},8,["onEnter","onAfterLeave"])};export{d as default};

package/scrolltop/scrolltop.js

@@ -1,7 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.scrolltop = (function (utils, vue) {
+this.primevue.scrolltop = (function (ChevronUpIcon, utils, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var ChevronUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronUpIcon);
+
     var script = {
         name: 'ScrollTop',
         scrollListener: null,
@@ -17,7 +21,7 @@ this.primevue.scrolltop = (function (utils, vue) {
             },
             icon: {
                 type: String,
-                default: 'pi pi-chevron-up'
+                default: undefined
             },
             behavior: {
                 type: String,
@@ -95,12 +99,12 @@ this.primevue.scrolltop = (function (utils, vue) {
             containerClass() {
                 return ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': this.target !== 'window' }];
             },
-            iconClass() {
-                return ['p-scrolltop-icon', this.icon];
-            },
             scrollTopAriaLabel() {
                 return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.scrollTop : undefined;
             }
+        },
+        components: {
+            ChevronUpIcon: ChevronUpIcon__default["default"]
         }
     };
 
@@ -123,13 +127,15 @@ this.primevue.scrolltop = (function (utils, vue) {
                 type: "button",
                 "aria-label": $options.scrollTopAriaLabel
               }, [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass($options.iconClass)
-                }, null, 2)
+                vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : 'ChevronUpIcon'), {
+                    class: vue.normalizeClass(['p-scrolltop-icon', $props.icon])
+                  }, null, 8, ["class"]))
+                ])
               ], 10, _hoisted_1))
             : vue.createCommentVNode("", true)
         ]),
-        _: 1
+        _: 3
       }, 8, ["onEnter", "onAfterLeave"]))
     }
 
@@ -167,4 +173,4 @@ this.primevue.scrolltop = (function (utils, vue) {
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.icons.chevronup, primevue.utils, Vue);

package/scrolltop/scrolltop.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.scrolltop=function(e,t){"use strict";var n={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:"pi pi-chevron-up"},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(e.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(e.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(t){e.ZIndexUtils.set("overlay",t,this.$primevue.config.zIndex.overlay)},onAfterLeave(t){e.ZIndexUtils.clear(t)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},iconClass(){return["p-scrolltop-icon",this.icon]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}}};const i=["aria-label"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n"),n.render=function(e,n,l,o,r,s){return t.openBlock(),t.createBlock(t.Transition,{name:"p-scrolltop",appear:"",onEnter:s.onEnter,onAfterLeave:s.onAfterLeave},{default:t.withCtx((()=>[r.visible?(t.openBlock(),t.createElementBlock("button",{key:0,ref:s.containerRef,class:t.normalizeClass(s.containerClass),onClick:n[0]||(n[0]=(...e)=>s.onClick&&s.onClick(...e)),type:"button","aria-label":s.scrollTopAriaLabel},[t.createElementVNode("span",{class:t.normalizeClass(s.iconClass)},null,2)],10,i)):t.createCommentVNode("",!0)])),_:1},8,["onEnter","onAfterLeave"])},n}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.scrolltop=function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"ScrollTop",scrollListener:null,container:null,props:{target:{type:String,default:"window"},threshold:{type:Number,default:400},icon:{type:String,default:void 0},behavior:{type:String,default:"smooth"}},data:()=>({visible:!1}),mounted(){"window"===this.target?this.bindDocumentScrollListener():"parent"===this.target&&this.bindParentScrollListener()},beforeUnmount(){"window"===this.target?this.unbindDocumentScrollListener():"parent"===this.target&&this.unbindParentScrollListener(),this.container&&(t.ZIndexUtils.clear(this.container),this.overlay=null)},methods:{onClick(){("window"===this.target?window:this.$el.parentElement).scroll({top:0,behavior:this.behavior})},checkVisibility(e){e>this.threshold?this.visible=!0:this.visible=!1},bindParentScrollListener(){this.scrollListener=()=>{this.checkVisibility(this.$el.parentElement.scrollTop)},this.$el.parentElement.addEventListener("scroll",this.scrollListener)},bindDocumentScrollListener(){this.scrollListener=()=>{this.checkVisibility(t.DomHandler.getWindowScrollTop())},window.addEventListener("scroll",this.scrollListener)},unbindParentScrollListener(){this.scrollListener&&(this.$el.parentElement.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},unbindDocumentScrollListener(){this.scrollListener&&(window.removeEventListener("scroll",this.scrollListener),this.scrollListener=null)},onEnter(e){t.ZIndexUtils.set("overlay",e,this.$primevue.config.zIndex.overlay)},onAfterLeave(e){t.ZIndexUtils.clear(e)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-scrolltop p-link p-component",{"p-scrolltop-sticky":"window"!==this.target}]},scrollTopAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.scrollTop:void 0}},components:{ChevronUpIcon:i(e).default}};const l=["aria-label"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-scrolltop {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-scrolltop-sticky {\n    position: sticky;\n}\n.p-scrolltop-sticky.p-link {\n    margin-left: auto;\n}\n.p-scrolltop-enter-from {\n    opacity: 0;\n}\n.p-scrolltop-enter-active {\n    transition: opacity 0.15s;\n}\n.p-scrolltop.p-scrolltop-leave-to {\n    opacity: 0;\n}\n.p-scrolltop-leave-active {\n    transition: opacity 0.15s;\n}\n"),o.render=function(e,t,i,o,r,s){return n.openBlock(),n.createBlock(n.Transition,{name:"p-scrolltop",appear:"",onEnter:s.onEnter,onAfterLeave:s.onAfterLeave},{default:n.withCtx((()=>[r.visible?(n.openBlock(),n.createElementBlock("button",{key:0,ref:s.containerRef,class:n.normalizeClass(s.containerClass),onClick:t[0]||(t[0]=(...e)=>s.onClick&&s.onClick(...e)),type:"button","aria-label":s.scrollTopAriaLabel},[n.renderSlot(e.$slots,"icon",{},(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.icon?"span":"ChevronUpIcon"),{class:n.normalizeClass(["p-scrolltop-icon",i.icon])},null,8,["class"]))]))],10,l)):n.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterLeave"])},o}(primevue.icons.chevronup,primevue.utils,Vue);

package/sidebar/Sidebar.d.ts

@@ -46,7 +46,7 @@ export interface SidebarProps {
     showCloseIcon?: boolean | undefined;
     /**
      * Icon to display in the sidebar close button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
@@ -73,6 +73,10 @@ export interface SidebarSlots {
      * Custom header template.
      */
     header(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**

package/sidebar/Sidebar.vue

@@ -8,7 +8,9 @@
                             <slot name="header"></slot>
                         </div>
                         <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
-                            <span :class="['p-sidebar-close-icon', closeIcon]" />
+                            <slot name="closeicon">
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-sidebar-close-icon ', closeIcon]"></component>
+                            </slot>
                         </button>
                     </div>
                     <div :ref="contentRef" class="p-sidebar-content">
@@ -22,6 +24,7 @@
 
 <script>
 import FocusTrap from 'primevue/focustrap';
+import TimesIcon from 'primevue/icons/times';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
@@ -57,7 +60,7 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         modal: {
             type: Boolean,
@@ -246,7 +249,8 @@ export default {
         ripple: Ripple
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon
     }
 };
 </script>

package/sidebar/sidebar.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var FocusTrap = require('primevue/focustrap');
+var TimesIcon = require('primevue/icons/times');
 var Portal = require('primevue/portal');
 var Ripple = require('primevue/ripple');
 var utils = require('primevue/utils');
@@ -9,6 +10,7 @@ var vue = require('vue');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
+var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
@@ -43,7 +45,7 @@ var script = {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         modal: {
             type: Boolean,
@@ -232,7 +234,8 @@ var script = {
         ripple: Ripple__default["default"]
     },
     components: {
-        Portal: Portal__default["default"]
+        Portal: Portal__default["default"],
+        TimesIcon: TimesIcon__default["default"]
     }
 };
 
@@ -295,9 +298,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               "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)
+                              vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
+                                  class: vue.normalizeClass(['p-sidebar-close-icon ', $props.closeIcon])
+                                }, null, 8, ["class"]))
+                              ])
                             ], 8, _hoisted_3)), [
                               [_directive_ripple]
                             ])

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 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;
+"use strict";var e=require("primevue/focustrap"),t=require("primevue/icons/times"),n=require("primevue/portal"),i=require("primevue/ripple"),s=require("primevue/utils"),r=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e),l=o(t),d=o(n),p=o(i),c={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:void 0},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&&s.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&&s.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter(){this.enableDocumentSettings()},onBeforeLeave(){this.modal&&s.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&s.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&&s.DomHandler.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings(){this.unbindOutsideClickListener(),this.blockScroll&&s.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:a.default,ripple:p.default},components:{Portal:d.default,TimesIcon:l.default}};const m=["aria-modal"],b={key:0,class:"p-sidebar-header-content"},h=["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"),c.render=function(e,t,n,i,s,o){const a=r.resolveComponent("Portal"),l=r.resolveDirective("ripple"),d=r.resolveDirective("focustrap");return r.openBlock(),r.createBlock(a,null,{default:r.withCtx((()=>[s.containerVisible?(r.openBlock(),r.createElementBlock("div",{key:0,ref:o.maskRef,class:r.normalizeClass(o.maskClass),onMousedown:t[2]||(t[2]=(...e)=>o.onMaskClick&&o.onMaskClick(...e))},[r.createVNode(r.Transition,{name:"p-sidebar",onEnter:o.onEnter,onAfterEnter:o.onAfterEnter,onBeforeLeave:o.onBeforeLeave,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave,appear:""},{default:r.withCtx((()=>[n.visible?r.withDirectives((r.openBlock(),r.createElementBlock("div",r.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),[r.createElementVNode("div",{ref:o.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(r.openBlock(),r.createElementBlock("div",b,[r.renderSlot(e.$slots,"header")])):r.createCommentVNode("",!0),n.showCloseIcon?r.withDirectives((r.openBlock(),r.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))},[r.renderSlot(e.$slots,"closeicon",{},(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),{class:r.normalizeClass(["p-sidebar-close-icon ",n.closeIcon])},null,8,["class"]))]))],8,h)),[[l]]):r.createCommentVNode("",!0)],512),r.createElementVNode("div",{ref:o.contentRef,class:"p-sidebar-content"},[r.renderSlot(e.$slots,"default")],512)],16,m)),[[d]]):r.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],34)):r.createCommentVNode("",!0)])),_:3})},module.exports=c;

package/sidebar/sidebar.esm.js

@@ -1,8 +1,9 @@
 import FocusTrap from 'primevue/focustrap';
+import TimesIcon from 'primevue/icons/times';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 import { ZIndexUtils, DomHandler } from 'primevue/utils';
-import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createElementBlock, normalizeClass, createVNode, Transition, withDirectives, mergeProps, createElementVNode, renderSlot, createCommentVNode } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createElementBlock, normalizeClass, createVNode, Transition, withDirectives, mergeProps, createElementVNode, renderSlot, createCommentVNode, resolveDynamicComponent } from 'vue';
 
 var script = {
     name: 'Sidebar',
@@ -35,7 +36,7 @@ var script = {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         modal: {
             type: Boolean,
@@ -224,7 +225,8 @@ var script = {
         ripple: Ripple
     },
     components: {
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon
     }
 };
 
@@ -287,9 +289,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               "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)
+                              renderSlot(_ctx.$slots, "closeicon", {}, () => [
+                                (openBlock(), createBlock(resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
+                                  class: normalizeClass(['p-sidebar-close-icon ', $props.closeIcon])
+                                }, null, 8, ["class"]))
+                              ])
                             ], 8, _hoisted_3)), [
                               [_directive_ripple]
                             ])

package/sidebar/sidebar.esm.min.js

@@ -1 +1 @@
-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 r,resolveDirective as a,openBlock as o,createBlock as l,withCtx as d,createElementBlock as p,normalizeClass as c,createVNode as b,Transition as h,withDirectives as m,mergeProps as f,createElementVNode as u,renderSlot as v,createCommentVNode as g}from"vue";var k={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.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.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter(){this.enableDocumentSettings()},onBeforeLeave(){this.modal&&s.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&i.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&&s.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings(){this.unbindOutsideClickListener(),this.blockScroll&&s.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:e,ripple:n},components:{Portal:t}};const y=["aria-modal"],C={key:0,class:"p-sidebar-header-content"},x=["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"),k.render=function(e,t,n,i,s,k){const w=r("Portal"),L=a("ripple"),S=a("focustrap");return o(),l(w,null,{default:d((()=>[s.containerVisible?(o(),p("div",{key:0,ref:k.maskRef,class:c(k.maskClass),onMousedown:t[2]||(t[2]=(...e)=>k.onMaskClick&&k.onMaskClick(...e))},[b(h,{name:"p-sidebar",onEnter:k.onEnter,onAfterEnter:k.onAfterEnter,onBeforeLeave:k.onBeforeLeave,onLeave:k.onLeave,onAfterLeave:k.onAfterLeave,appear:""},{default:d((()=>[n.visible?m((o(),p("div",f({key:0,ref:k.containerRef,class:k.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>k.onKeydown&&k.onKeydown(...e))},e.$attrs),[u("div",{ref:k.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(o(),p("div",C,[v(e.$slots,"header")])):g("",!0),n.showCloseIcon?m((o(),p("button",{key:1,ref:k.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":k.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>k.hide&&k.hide(...e))},[u("span",{class:c(["p-sidebar-close-icon",n.closeIcon])},null,2)],8,x)),[[L]]):g("",!0)],512),u("div",{ref:k.contentRef,class:"p-sidebar-content"},[v(e.$slots,"default")],512)],16,y)),[[S]]):g("",!0)])),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],34)):g("",!0)])),_:3})};export{k as default};
+import e from"primevue/focustrap";import t from"primevue/icons/times";import n from"primevue/portal";import i from"primevue/ripple";import{ZIndexUtils as s,DomHandler as r}from"primevue/utils";import{resolveComponent as o,resolveDirective as a,openBlock as l,createBlock as d,withCtx as p,createElementBlock as c,normalizeClass as b,createVNode as h,Transition as m,withDirectives as f,mergeProps as u,createElementVNode as v,renderSlot as g,createCommentVNode as k,resolveDynamicComponent as y}from"vue";var C={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:void 0},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&&s.clear(this.mask),this.container=null,this.mask=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(){this.$emit("show"),this.focus(),this.autoZIndex&&s.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter(){this.enableDocumentSettings()},onBeforeLeave(){this.modal&&r.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&s.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&&r.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings(){this.unbindOutsideClickListener(),this.blockScroll&&r.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:e,ripple:i},components:{Portal:n,TimesIcon:t}};const x=["aria-modal"],w={key:0,class:"p-sidebar-header-content"},L=["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"),C.render=function(e,t,n,i,s,r){const C=o("Portal"),S=a("ripple"),$=a("focustrap");return l(),d(C,null,{default:p((()=>[s.containerVisible?(l(),c("div",{key:0,ref:r.maskRef,class:b(r.maskClass),onMousedown:t[2]||(t[2]=(...e)=>r.onMaskClick&&r.onMaskClick(...e))},[h(m,{name:"p-sidebar",onEnter:r.onEnter,onAfterEnter:r.onAfterEnter,onBeforeLeave:r.onBeforeLeave,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:p((()=>[n.visible?f((l(),c("div",u({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),[v("div",{ref:r.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(l(),c("div",w,[g(e.$slots,"header")])):k("",!0),n.showCloseIcon?f((l(),c("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))},[g(e.$slots,"closeicon",{},(()=>[(l(),d(y(n.closeIcon?"span":"TimesIcon"),{class:b(["p-sidebar-close-icon ",n.closeIcon])},null,8,["class"]))]))],8,L)),[[S]]):k("",!0)],512),v("div",{ref:r.contentRef,class:"p-sidebar-content"},[g(e.$slots,"default")],512)],16,x)),[[$]]):k("",!0)])),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],34)):k("",!0)])),_:3})};export{C as default};

package/sidebar/sidebar.js

@@ -1,10 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.sidebar = (function (FocusTrap, Portal, Ripple, utils, vue) {
+this.primevue.sidebar = (function (FocusTrap, TimesIcon, Portal, Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
+    var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
@@ -39,7 +40,7 @@ this.primevue.sidebar = (function (FocusTrap, Portal, Ripple, utils, vue) {
             },
             closeIcon: {
                 type: String,
-                default: 'pi pi-times'
+                default: undefined
             },
             modal: {
                 type: Boolean,
@@ -228,7 +229,8 @@ this.primevue.sidebar = (function (FocusTrap, Portal, Ripple, utils, vue) {
             ripple: Ripple__default["default"]
         },
         components: {
-            Portal: Portal__default["default"]
+            Portal: Portal__default["default"],
+            TimesIcon: TimesIcon__default["default"]
         }
     };
 
@@ -291,9 +293,11 @@ this.primevue.sidebar = (function (FocusTrap, Portal, Ripple, utils, vue) {
                                   "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)
+                                  vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
+                                      class: vue.normalizeClass(['p-sidebar-close-icon ', $props.closeIcon])
+                                    }, null, 8, ["class"]))
+                                  ])
                                 ], 8, _hoisted_3)), [
                                   [_directive_ripple]
                                 ])
@@ -353,4 +357,4 @@ this.primevue.sidebar = (function (FocusTrap, Portal, Ripple, utils, vue) {
 
     return script;
 
-})(primevue.focustrap, primevue.portal, primevue.ripple, primevue.utils, Vue);
+})(primevue.focustrap, primevue.icons.times, primevue.portal, primevue.ripple, primevue.utils, Vue);

package/sidebar/sidebar.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,i,s){"use strict";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",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:a.default,ripple:l.default},components:{Portal:o.default}};const p=["aria-modal"],c={key:0,class:"p-sidebar-header-content"},h=["aria-label"];return 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,a){const o=s.resolveComponent("Portal"),l=s.resolveDirective("ripple"),d=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(o,null,{default:s.withCtx((()=>[r.containerVisible?(s.openBlock(),s.createElementBlock("div",{key:0,ref:a.maskRef,class:s.normalizeClass(a.maskClass),onMousedown:t[2]||(t[2]=(...e)=>a.onMaskClick&&a.onMaskClick(...e))},[s.createVNode(s.Transition,{name:"p-sidebar",onEnter:a.onEnter,onAfterEnter:a.onAfterEnter,onBeforeLeave:a.onBeforeLeave,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,h)),[[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,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],34)):s.createCommentVNode("",!0)])),_:3})},d}(primevue.focustrap,primevue.portal,primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,i,s,r){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e),l=o(t),d=o(n),p=o(i),c={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:void 0},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&&s.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&&s.ZIndexUtils.set("modal",this.mask,this.baseZIndex||this.$primevue.config.zIndex.modal)},onAfterEnter(){this.enableDocumentSettings()},onBeforeLeave(){this.modal&&s.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&s.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&&s.DomHandler.addClass(document.body,"p-overflow-hidden")},disableDocumentSettings(){this.unbindOutsideClickListener(),this.blockScroll&&s.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:a.default,ripple:p.default},components:{Portal:d.default,TimesIcon:l.default}};const m=["aria-modal"],h={key:0,class:"p-sidebar-header-content"},b=["aria-label"];return 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"),c.render=function(e,t,n,i,s,o){const a=r.resolveComponent("Portal"),l=r.resolveDirective("ripple"),d=r.resolveDirective("focustrap");return r.openBlock(),r.createBlock(a,null,{default:r.withCtx((()=>[s.containerVisible?(r.openBlock(),r.createElementBlock("div",{key:0,ref:o.maskRef,class:r.normalizeClass(o.maskClass),onMousedown:t[2]||(t[2]=(...e)=>o.onMaskClick&&o.onMaskClick(...e))},[r.createVNode(r.Transition,{name:"p-sidebar",onEnter:o.onEnter,onAfterEnter:o.onAfterEnter,onBeforeLeave:o.onBeforeLeave,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave,appear:""},{default:r.withCtx((()=>[n.visible?r.withDirectives((r.openBlock(),r.createElementBlock("div",r.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),[r.createElementVNode("div",{ref:o.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(r.openBlock(),r.createElementBlock("div",h,[r.renderSlot(e.$slots,"header")])):r.createCommentVNode("",!0),n.showCloseIcon?r.withDirectives((r.openBlock(),r.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))},[r.renderSlot(e.$slots,"closeicon",{},(()=>[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),{class:r.normalizeClass(["p-sidebar-close-icon ",n.closeIcon])},null,8,["class"]))]))],8,b)),[[l]]):r.createCommentVNode("",!0)],512),r.createElementVNode("div",{ref:o.contentRef,class:"p-sidebar-content"},[r.renderSlot(e.$slots,"default")],512)],16,m)),[[d]]):r.createCommentVNode("",!0)])),_:3},8,["onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave"])],34)):r.createCommentVNode("",!0)])),_:3})},c}(primevue.focustrap,primevue.icons.times,primevue.portal,primevue.ripple,primevue.utils,Vue);

package/speeddial/SpeedDial.d.ts

@@ -93,11 +93,12 @@ export interface SpeedDialProps {
     maskClass?: string | undefined;
     /**
      * Show icon of the button element.
-     * @defaultValue pi pi-plus
+     * @deprecated since v3.27.0. Use 'showicon' slot.
      */
     showIcon?: string | undefined;
     /**
      * Hide icon of the button element.
+     * @deprecated since v3.27.0. Use 'hideicon' slot.
      */
     hideIcon?: string | undefined;
     /**
@@ -153,6 +154,16 @@ export interface SpeedDialSlots {
          */
         toggle(): void;
     }): VNode[];
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         *
+         */
+        visible: boolean;
+    }): VNode[];
 }
 
 /**