primereact 9.4.0 → 9.5.0

package/galleria/galleria.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import t,{localeOption as n}from"primereact/api";import{CSSTransition as r}from"primereact/csstransition";import{useMountEffect as a,usePrevious as i,useResizeListener as l,useUpdateEffect as o,useInterval as c,useUnmountEffect as u}from"primereact/hooks";import{Portal as s}from"primereact/portal";import{Ripple as m}from"primereact/ripple";import{ObjectUtils as p,classNames as v,IconUtils as d,UniqueComponentId as f,DomHandler as h,ZIndexUtils as g}from"primereact/utils";import{ChevronLeftIcon as I}from"primereact/icons/chevronleft";import{ChevronRightIcon as b}from"primereact/icons/chevronright";import{ChevronUpIcon as y}from"primereact/icons/chevronup";import{ChevronDownIcon as x}from"primereact/icons/chevrondown";import{TimesIcon as w}from"primereact/icons/times";function S(){return S=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},S.apply(this,arguments)}function E(e){return E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},E(e)}function N(e,t){if("object"!==E(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==E(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function O(e){var t=N(e,"string");return"symbol"===E(t)?t:String(t)}function P(e,t,n){return(t=O(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function T(e){if(Array.isArray(e))return e}function C(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,l,o=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw a}}return o}}function A(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function k(e,t){if(e){if("string"==typeof e)return A(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?A(e,t):void 0}}function j(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function V(e,t){return T(e)||C(e,t)||k(e,t)||j()}var H={defaultProps:{__TYPE:"Galleria",id:null,value:null,activeIndex:0,fullScreen:!1,item:null,thumbnail:null,indicator:null,caption:null,className:null,closeIcon:null,style:null,header:null,footer:null,numVisible:3,responsiveOptions:null,showItemNavigators:!1,showThumbnailNavigators:!0,showItemNavigatorsOnHover:!1,changeItemOnIndicatorHover:!1,circular:!1,autoPlay:!1,transitionInterval:4e3,showThumbnails:!0,itemNextIcon:null,itemPrevIcon:null,nextThumbnailIcon:null,prevThumbnailIcon:null,thumbnailsPosition:"bottom",verticalThumbnailViewPortHeight:"300px",showIndicators:!1,showIndicatorsOnItem:!1,indicatorsPosition:"bottom",baseZIndex:0,transitionOptions:null,onItemChange:null,children:void 0},getProps:function(e){return p.getMergedProps(e,H.defaultProps)},getOtherProps:function(e){return p.getDiffProps(e,H.defaultProps)}},D=e.memo(e.forwardRef((function(t,n){var r=function(){t.slideShowActive&&t.stopSlideShow&&t.stopSlideShow()},i=function(e){r(),t.onActiveItemChange({index:t.circular&&0===t.activeItemIndex?t.value.length-1:0!==t.activeItemIndex?t.activeItemIndex-1:0}),e&&e.cancelable&&e.preventDefault()},l=function(e){r(),t.onActiveItemChange({index:t.circular&&t.value.length-1===t.activeItemIndex?0:t.activeItemIndex+1}),e&&e.cancelable&&e.preventDefault()},o=function(e){r(),t.onActiveItemChange({index:e})},c=function(e){t.changeItemOnIndicatorHover&&(r(),t.onActiveItemChange({index:e}))},u=function(e,n){13===e.which&&(r(),t.onActiveItemChange({index:n}))};a((function(){t.autoPlay&&t.startSlideShow()}));var s=function(n){var r="p-galleria-indicator-"+n,a=v("p-galleria-indicator",{"p-highlight":t.activeItemIndex===n}),i=t.indicator&&t.indicator(n);return i||(i=e.createElement("button",{type:"button",tabIndex:-1,className:"p-link"},e.createElement(m,null))),e.createElement("li",{className:a,key:r,tabIndex:0,onClick:function(){return o(n)},onMouseEnter:function(){return c(n)},onKeyDown:function(e){return u(e,n)}},i)},p=t.itemTemplate&&t.itemTemplate(t.value[t.activeItemIndex]),f=function(){if(t.showItemNavigators){var n=!t.circular&&0===t.activeItemIndex,r=v("p-galleria-item-prev p-galleria-item-nav p-link",{"p-disabled":n}),a="p-galleria-item-prev-icon",l=d.getJSXIcon(t.itemPrevIcon||e.createElement(I,{className:a}),{className:a},{props:t});return e.createElement("button",{type:"button",className:r,onClick:i,disabled:n},l,e.createElement(m,null))}return null}(),h=function(){if(t.showItemNavigators){var n=!t.circular&&t.activeItemIndex===t.value.length-1,r=v("p-galleria-item-next p-galleria-item-nav p-link",{"p-disabled":n}),a="p-galleria-item-next-icon",i=d.getJSXIcon(t.itemNextIcon||e.createElement(b,{className:a}),{className:a},{props:t});return e.createElement("button",{type:"button",className:r,onClick:l,disabled:n},i,e.createElement(m,null))}return null}(),g=function(){if(t.caption){var n=t.caption(t.value[t.activeItemIndex]);return e.createElement("div",{className:"p-galleria-caption"},n)}return null}(),y=function(){if(t.showIndicators){for(var n=v("p-galleria-indicators p-reset",t.indicatorsContentClassName),r=[],a=0;a<t.value.length;a++)r.push(s(a));return e.createElement("ul",{className:n},r)}return null}();return e.createElement("div",{ref:n,className:"p-galleria-item-wrapper"},e.createElement("div",{className:"p-galleria-item-container"},f,e.createElement("div",{className:"p-galleria-item"},p),h,g),y)})));function R(e){if(Array.isArray(e))return A(e)}function M(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function X(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}D.displayName="GalleriaItem";var G=e.memo((function(t){var n=t.active?0:null,r=t.template&&t.template(t.item),a=v("p-galleria-thumbnail-item",{"p-galleria-thumbnail-item-current":t.current,"p-galleria-thumbnail-item-active":t.active,"p-galleria-thumbnail-item-start":t.start,"p-galleria-thumbnail-item-end":t.end},t.className);return e.createElement("div",{className:a},e.createElement("div",{className:"p-galleria-thumbnail-item-content",tabIndex:n,onClick:function(e){t.onItemClick({originalEvent:e,index:t.index})},onKeyDown:function(e){13===e.which&&t.onItemClick({originalEvent:e,index:t.index})}},r))})),J=e.memo(e.forwardRef((function(n,r){var c=V(e.useState(n.numVisible),2),u=c[0],s=c[1],g=V(e.useState(0),2),w=g[0],S=g[1],E=e.useRef(null),N=e.useRef(null),O=e.useRef(""),P=e.useRef(null),T=e.useRef(null),C=i(u),A=i(n.activeItemIndex),j=V(l({listener:function(){B()},when:n.responsiveOptions}),1)[0],H=function(e){var t=w+e;e<0&&-1*t+u>n.value.length-1?t=u-n.value.length:e>0&&t>0&&(t=0),n.circular&&(e<0&&n.value.length-1===n.activeItemIndex?t=0:e>0&&0===n.activeItemIndex&&(t=u-n.value.length)),E.current&&(h.removeClass(E.current,"p-items-hidden"),E.current.style.transform=n.isVertical?"translate3d(0, ".concat(t*(100/u),"%, 0)"):"translate3d(".concat(t*(100/u),"%, 0, 0)"),E.current.style.transition="transform 500ms ease 0s"),S(t)},D=function(){n.slideShowActive&&n.stopSlideShow&&n.stopSlideShow()},J=function(){var e=Math.floor(u/2);return u%2?e:e-1},Y=function(e){D();var t=0!==n.activeItemIndex?n.activeItemIndex-1:0;u-(t+w)-1>J()&&(-1*w!=0||n.circular)&&H(1),n.onActiveItemChange({index:n.circular&&0===n.activeItemIndex?n.value.length-1:t}),e.cancelable&&e.preventDefault()},Z=function(e){D();var t=n.activeItemIndex+1;t+w>J()&&(-1*w<$()-1||n.circular)&&H(-1),n.onActiveItemChange({index:n.circular&&n.value.length-1===n.activeItemIndex?0:t}),e.cancelable&&e.preventDefault()},K=function(e){D();var t=e.index;if(t!==n.activeItemIndex){var r=t+w,a=0;t<n.activeItemIndex?(a=u-r-1-J())>0&&-1*w!=0&&H(a):(a=J()-r)<0&&-1*w<$()-1&&H(a),n.onActiveItemChange({index:t})}},_=function(e){E.current&&"transform"===e.propertyName&&(h.addClass(E.current,"p-items-hidden"),E.current.style.transition="")},z=function(e){var t=e.changedTouches[0];N.current={x:t.pageX,y:t.pageY}},L=function(e){e.cancelable&&e.preventDefault()},U=function(e){var t=e.changedTouches[0];W(e,n.isVertical?t.pageY-N.current.y:t.pageX-N.current.x)},W=function(e,t){t<0?Z(e):Y(e)},$=function(){return n.value.length>u?n.value.length-u+1:0},q=function(){P.current||(P.current=h.createInlineStyle(t.nonce));var e,r="\n            .p-galleria-thumbnail-items[".concat(O.current,"] .p-galleria-thumbnail-item {\n                flex: 1 0 ").concat(100/u,"%\n            }\n        ");if(n.responsiveOptions){T.current=R(e=n.responsiveOptions)||M(e)||k(e)||X(),T.current.sort((function(e,n){return p.sort(e.breakpoint,n.breakpoint,-1,t.locale,t.nullSortOrder)}));for(var a=0;a<T.current.length;a++){var i=T.current[a];r+="\n                    @media screen and (max-width: ".concat(i.breakpoint,") {\n                        .p-galleria-thumbnail-items[").concat(O.current,"] .p-galleria-thumbnail-item {\n                            flex: 1 0 ").concat(100/i.numVisible,"%\n                        }\n                    }\n                ")}}P.current.innerHTML=r},B=function(){if(E.current&&T.current){for(var e=window.innerWidth,t={numVisible:n.numVisible},r=0;r<T.current.length;r++){var a=T.current[r];parseInt(a.breakpoint,10)>=e&&(t=a)}u!==t.numVisible&&s(t.numVisible)}};a((function(){E.current&&(O.current=f(),E.current.setAttribute(O.current,"")),q(),B(),j()})),o((function(){var e=w;C===u&&A===n.activeItemIndex||((e=n.activeItemIndex<=J()?0:n.value.length-u+J()<n.activeItemIndex?u-n.value.length:n.value.length-u<n.activeItemIndex&&u%2==0?-1*n.activeItemIndex+J()+1:-1*n.activeItemIndex+J())!==w&&S(e),E.current.style.transform=n.isVertical?"translate3d(0, ".concat(e*(100/u),"%, 0)"):"translate3d(".concat(e*(100/u),"%, 0, 0)"),A!==n.activeItemIndex&&(h.removeClass(E.current,"p-items-hidden"),E.current.style.transition="transform 500ms ease 0s"))}));var F,Q,ee,te,ne=function(){if(n.showThumbnailNavigators){var t=!n.circular&&0===n.activeItemIndex||n.value.length<=u,r=v("p-galleria-thumbnail-prev p-link",{"p-disabled":t}),a="p-galleria-thumbnail-prev-icon",i=d.getJSXIcon(n.isVertical?n.prevThumbnailIcon||e.createElement(y,{className:a}):n.prevThumbnailIcon||e.createElement(I,{className:a}),{className:a},{props:n});return e.createElement("button",{className:r,onClick:Y,disabled:t},i,e.createElement(m,null))}return null},re=function(){if(n.showThumbnailNavigators){var t=!n.circular&&n.activeItemIndex===n.value.length-1||n.value.length<=u,r=v("p-galleria-thumbnail-next p-link",{"p-disabled":t}),a="p-galleria-thumbnail-next-icon",i=d.getJSXIcon(n.isVertical?n.nextThumbnailIcon||e.createElement(x,{className:a}):n.nextThumbnailIcon||e.createElement(b,{className:a}),{className:a},{props:n});return e.createElement("button",{className:r,onClick:Z,disabled:t},i,e.createElement(m,null))}return null},ae=(F=n.value.map((function(t,r){var a=-1*w,i=a+u-1;return e.createElement(G,{key:r,index:r,template:n.itemTemplate,item:t,active:a<=r&&i>=r,start:a===r,end:i===r,onItemClick:K,current:n.activeItemIndex===r})})),Q=n.isVertical?n.contentHeight:"",ee=ne(),te=re(),e.createElement("div",{className:"p-galleria-thumbnail-container"},ee,e.createElement("div",{className:"p-galleria-thumbnail-items-container",style:{height:Q}},e.createElement("div",{ref:E,className:"p-galleria-thumbnail-items",onTransitionEnd:_,onTouchStart:z,onTouchMove:L,onTouchEnd:U},F)),te));return e.createElement("div",{className:"p-galleria-thumbnail-wrapper"},ae)})));function Y(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Z(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Y(Object(n),!0).forEach((function(t){P(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Y(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}G.displayName="GalleriaThumbnailItem",J.displayName="GalleriaThumbnails";var K=e.memo(e.forwardRef((function(a,i){var l=H.getProps(a),o=V(e.useState(!1),2),f=o[0],I=o[1],b=V(e.useState(l.numVisible),2),y=b[0],x=b[1],E=V(e.useState(!1),2),N=E[0],O=E[1],P=V(e.useState(l.activeIndex),2),T=P[0],C=P[1],A=e.useRef(null),k=e.useRef(null),j=e.useRef(null),R=l.onItemChange?l.activeIndex:T,M="left"===l.thumbnailsPosition||"right"===l.thumbnailsPosition;c((function(){X({index:l.circular&&l.value.length-1===R?0:R+1})}),l.transitionInterval,N);var X=function(e){e.index>=l.value.length?q():l.onItemChange?l.onItemChange(e):C(e.index)},G=function(){I(!0)},Y=function(){I(!1)},K=function(){h.addClass(document.body,"p-overflow-hidden")},_=function(){g.set("modal",j.current,t.autoZIndex,l.baseZIndex||t.zIndex.modal),h.addMultipleClasses(j.current,"p-component-overlay p-component-overlay-enter")},z=function(){l.onShow&&l.onShow()},L=function(){h.removeClass(document.body,"p-overflow-hidden"),h.addClass(j.current,"p-component-overlay-leave")},U=function(){g.clear(j.current),l.onHide&&l.onHide()},W=function(){return N},$=function(){O(!0)},q=function(){O(!1)},B=function(e,t){var n=["top","left","bottom","right"].find((function(e){return e===t}));return n?"".concat(e,"-").concat(n):""};e.useEffect((function(){l.value&&l.value.length<y&&x(l.value.length)}),[l.value,y]),e.useEffect((function(){x(l.numVisible)}),[l.numVisible]),u((function(){N&&q(),g.clear(j.current)})),e.useImperativeHandle(i,(function(){return{props:l,show:G,hide:Y,isAutoPlayActive:W,startSlideShow:$,stopSlideShow:q,getElement:function(){return A.current},getPreviewContent:function(){return k.current}}}));return p.isNotEmpty(l.value)&&function(){var a,i,o,c,u,p,h,g,I,b=(a=H.getOtherProps(l),i=l.showThumbnails&&B("p-galleria-thumbnails",l.thumbnailsPosition),o=l.showIndicators&&B("p-galleria-indicators",l.indicatorsPosition),c=v("p-galleria p-component",l.className,{"p-galleria-fullscreen":l.fullScreen,"p-galleria-indicator-onitem":l.showIndicatorsOnItem,"p-galleria-item-nav-onhover":l.showItemNavigatorsOnHover&&!l.fullScreen,"p-input-filled":"filled"===t.inputStyle,"p-ripple-disabled":!1===t.ripple},i,o),u={className:"p-galleria-close-icon","aria-hidden":!0},p=d.getJSXIcon(l.closeIcon||e.createElement(w,u),Z({},u),{props:l}),h=l.fullScreen&&e.createElement("button",{type:"button",className:"p-galleria-close p-link","aria-label":n("close"),onClick:Y},p,e.createElement(m,null)),g=l.header?e.createElement("div",{className:"p-galleria-header"},l.header):null,I=l.footer?e.createElement("div",{className:"p-galleria-footer"},l.footer):null,e.createElement("div",S({ref:A,id:l.id,className:c,style:l.style},a),h,g,e.createElement("div",{className:"p-galleria-content"},e.createElement(D,{ref:k,value:l.value,activeItemIndex:R,onActiveItemChange:X,itemTemplate:l.item,circular:l.circular,caption:l.caption,showIndicators:l.showIndicators,itemPrevIcon:l.itemPrevIcon,itemNextIcon:l.itemNextIcon,changeItemOnIndicatorHover:l.changeItemOnIndicatorHover,indicator:l.indicator,showItemNavigators:l.showItemNavigators,autoPlay:l.autoPlay,slideShowActive:N,startSlideShow:$,stopSlideShow:q}),l.showThumbnails&&e.createElement(J,{value:l.value,activeItemIndex:R,onActiveItemChange:X,itemTemplate:l.thumbnail,numVisible:y,nextThumbnailIcon:l.nextThumbnailIcon,prevThumbnailIcon:l.prevThumbnailIcon,responsiveOptions:l.responsiveOptions,circular:l.circular,isVertical:M,contentHeight:l.verticalThumbnailViewPortHeight,showThumbnailNavigators:l.showThumbnailNavigators,autoPlay:l.autoPlay,slideShowActive:N,stopSlideShow:q})),I));if(l.fullScreen){var x=v("p-galleria-mask",{"p-galleria-visible":f});return e.createElement(s,{element:e.createElement("div",{ref:j,className:x},e.createElement(r,{nodeRef:A,classNames:"p-galleria",in:f,timeout:{enter:150,exit:150},options:l.transitionOptions,unmountOnExit:!0,onEnter:K,onEntering:_,onEntered:z,onExit:L,onExited:U},b))})}return b}()})));K.displayName="Galleria";export{K as Galleria};
+import*as e from"react";import t,{localeOption as n}from"primereact/api";import{CSSTransition as r}from"primereact/csstransition";import{useMountEffect as a,usePrevious as i,useResizeListener as l,useUpdateEffect as o,useInterval as c,useUnmountEffect as u}from"primereact/hooks";import{TimesIcon as m}from"primereact/icons/times";import{Portal as s}from"primereact/portal";import{Ripple as p}from"primereact/ripple";import{mergeProps as v,classNames as d,IconUtils as f,UniqueComponentId as h,DomHandler as b,ObjectUtils as I,ZIndexUtils as g}from"primereact/utils";import{ComponentBase as y}from"primereact/componentbase";import{ChevronLeftIcon as x}from"primereact/icons/chevronleft";import{ChevronRightIcon as w}from"primereact/icons/chevronright";import{ChevronDownIcon as O}from"primereact/icons/chevrondown";import{ChevronUpIcon as S}from"primereact/icons/chevronup";function E(e){return E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},E(e)}function N(e,t){if("object"!==E(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==E(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function P(e){var t=N(e,"string");return"symbol"===E(t)?t:String(t)}function j(e,t,n){return(t=P(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function T(e){if(Array.isArray(e))return e}function C(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,l,o=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(u)throw a}}return o}}function k(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function A(e,t){if(e){if("string"==typeof e)return k(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?k(e,t):void 0}}function V(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function D(e,t){return T(e)||C(e,t)||A(e,t)||V()}var H=y.extend({defaultProps:{__TYPE:"Galleria",id:null,value:null,activeIndex:0,fullScreen:!1,item:null,thumbnail:null,indicator:null,caption:null,className:null,closeIcon:null,style:null,header:null,footer:null,numVisible:3,responsiveOptions:null,showItemNavigators:!1,showThumbnailNavigators:!0,showItemNavigatorsOnHover:!1,changeItemOnIndicatorHover:!1,circular:!1,autoPlay:!1,transitionInterval:4e3,showThumbnails:!0,itemNextIcon:null,itemPrevIcon:null,nextThumbnailIcon:null,prevThumbnailIcon:null,thumbnailsPosition:"bottom",verticalThumbnailViewPortHeight:"300px",showIndicators:!1,showIndicatorsOnItem:!1,indicatorsPosition:"bottom",baseZIndex:0,transitionOptions:null,onItemChange:null,children:void 0}});function R(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function M(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?R(Object(n),!0).forEach((function(t){j(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):R(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var X=e.memo(e.forwardRef((function(t,n){var r=function(){t.slideShowActive&&t.stopSlideShow&&t.stopSlideShow()},i=function(e){r(),t.onActiveItemChange({index:t.circular&&0===t.activeItemIndex?t.value.length-1:0!==t.activeItemIndex?t.activeItemIndex-1:0}),e&&e.cancelable&&e.preventDefault()},l=function(e){r(),t.onActiveItemChange({index:t.circular&&t.value.length-1===t.activeItemIndex?0:t.activeItemIndex+1}),e&&e.cancelable&&e.preventDefault()},o=function(e){r(),t.onActiveItemChange({index:e})},c=function(e){t.changeItemOnIndicatorHover&&(r(),t.onActiveItemChange({index:e}))},u=function(e,n){13===e.which&&(r(),t.onActiveItemChange({index:n}))};a((function(){t.autoPlay&&t.startSlideShow()}));var m=function(n){var r="p-galleria-indicator-"+n,a=d("p-galleria-indicator",{"p-highlight":t.activeItemIndex===n}),i=t.indicator&&t.indicator(n),l=v({className:a,key:r,tabIndex:0,onClick:function(){return o(n)},onMouseEnter:function(){return c(n)},onKeyDown:function(e){return u(e,n)}},t.ptm("indicator"));return i||(i=e.createElement("button",{type:"button",tabIndex:-1,className:"p-link"},e.createElement(p,null))),e.createElement("li",l,i)},s=t.itemTemplate&&t.itemTemplate(t.value[t.activeItemIndex]),h=function(){if(t.showItemNavigators){var n=!t.circular&&0===t.activeItemIndex,r=d("p-galleria-item-prev p-galleria-item-nav p-link",{"p-disabled":n}),a=v({className:"p-galleria-item-prev-icon"},t.ptm("previousItemIcon")),l=f.getJSXIcon(t.itemPrevIcon||e.createElement(x,a),M({},a),{props:t}),o=v({type:"button",className:r,onClick:i,disabled:n},t.ptm("previousItemButton"));return e.createElement("button",o,l,e.createElement(p,null))}return null}(),b=function(){if(t.showItemNavigators){var n=!t.circular&&t.activeItemIndex===t.value.length-1,r=d("p-galleria-item-next p-galleria-item-nav p-link",{"p-disabled":n}),a=v({className:"p-galleria-item-next-icon"},t.ptm("nextItemIcon")),i=f.getJSXIcon(t.itemNextIcon||e.createElement(w,a),M({},a),{props:t}),o=v({type:"button",className:r,onClick:l,disabled:n},t.ptm("nextItemButton"));return e.createElement("button",o,i,e.createElement(p,null))}return null}(),I=function(){var n=v({className:"p-galleria-caption"},t.ptm("caption"));if(t.caption){var r=t.caption(t.value[t.activeItemIndex]);return e.createElement("div",n,r)}return null}(),g=function(){if(t.showIndicators){for(var n=d("p-galleria-indicators p-reset",t.indicatorsContentClassName),r=[],a=v({className:n},t.ptm("indicators")),i=0;i<t.value.length;i++)r.push(m(i));return e.createElement("ul",a,r)}return null}(),y=v({ref:n,className:"p-galleria-item-wrapper"},t.ptm("itemWrapper")),O=v({className:"p-galleria-item-container"},t.ptm("itemContainer")),S=v({className:"p-galleria-item"},t.ptm("item"));return e.createElement("div",y,e.createElement("div",O,h,e.createElement("div",S,s),b,I),g)})));function B(e){if(Array.isArray(e))return k(e)}function G(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function J(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function W(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?W(Object(n),!0).forEach((function(t){j(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):W(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}X.displayName="GalleriaItem";var Z=e.memo((function(t){var n=t.active?0:null,r=t.template&&t.template(t.item),a=d("p-galleria-thumbnail-item",{"p-galleria-thumbnail-item-current":t.current,"p-galleria-thumbnail-item-active":t.active,"p-galleria-thumbnail-item-start":t.start,"p-galleria-thumbnail-item-end":t.end},t.className),i=v({className:a},t.ptm("thumbnailItem")),l=v({className:"p-galleria-thumbnail-item-content",tabIndex:n,onClick:function(e){t.onItemClick({originalEvent:e,index:t.index})},onKeyDown:function(e){13===e.which&&t.onItemClick({originalEvent:e,index:t.index})}},t.ptm("thumbnailItemContent"));return e.createElement("div",i,e.createElement("div",l,r))})),K=e.memo(e.forwardRef((function(n,r){var c=D(e.useState(n.numVisible),2),u=c[0],m=c[1],s=D(e.useState(0),2),g=s[0],y=s[1],E=e.useRef(null),N=e.useRef(null),P=e.useRef(""),j=e.useRef(null),T=e.useRef(null),C=i(u),k=i(n.activeItemIndex),V=D(l({listener:function(){Q()},when:n.responsiveOptions}),1)[0],H=function(e){var t=g+e;e<0&&-1*t+u>n.value.length-1?t=u-n.value.length:e>0&&t>0&&(t=0),n.circular&&(e<0&&n.value.length-1===n.activeItemIndex?t=0:e>0&&0===n.activeItemIndex&&(t=u-n.value.length)),E.current&&(b.removeClass(E.current,"p-items-hidden"),E.current.style.transform=n.isVertical?"translate3d(0, ".concat(t*(100/u),"%, 0)"):"translate3d(".concat(t*(100/u),"%, 0, 0)"),E.current.style.transition="transform 500ms ease 0s"),y(t)},R=function(){n.slideShowActive&&n.stopSlideShow&&n.stopSlideShow()},M=function(){var e=Math.floor(u/2);return u%2?e:e-1},X=function(e){R();var t=0!==n.activeItemIndex?n.activeItemIndex-1:0;u-(t+g)-1>M()&&(-1*g!=0||n.circular)&&H(1),n.onActiveItemChange({index:n.circular&&0===n.activeItemIndex?n.value.length-1:t}),e.cancelable&&e.preventDefault()},W=function(e){R();var t=n.activeItemIndex+1;t+g>M()&&(-1*g<q()-1||n.circular)&&H(-1),n.onActiveItemChange({index:n.circular&&n.value.length-1===n.activeItemIndex?0:t}),e.cancelable&&e.preventDefault()},K=function(e){R();var t=e.index;if(t!==n.activeItemIndex){var r=t+g,a=0;t<n.activeItemIndex?(a=u-r-1-M())>0&&-1*g!=0&&H(a):(a=M()-r)<0&&-1*g<q()-1&&H(a),n.onActiveItemChange({index:t})}},_=function(e){E.current&&"transform"===e.propertyName&&(b.addClass(E.current,"p-items-hidden"),E.current.style.transition="")},z=function(e){var t=e.changedTouches[0];N.current={x:t.pageX,y:t.pageY}},L=function(e){e.cancelable&&e.preventDefault()},U=function(e){var t=e.changedTouches[0];$(e,n.isVertical?t.pageY-N.current.y:t.pageX-N.current.x)},$=function(e,t){t<0?W(e):X(e)},q=function(){return n.value.length>u?n.value.length-u+1:0},F=function(){j.current||(j.current=b.createInlineStyle(t.nonce));var e,r="\n            .p-galleria-thumbnail-items[".concat(P.current,"] .p-galleria-thumbnail-item {\n                flex: 1 0 ").concat(100/u,"%\n            }\n        ");if(n.responsiveOptions){T.current=B(e=n.responsiveOptions)||G(e)||A(e)||J(),T.current.sort((function(e,n){return I.sort(e.breakpoint,n.breakpoint,-1,t.locale,t.nullSortOrder)}));for(var a=0;a<T.current.length;a++){var i=T.current[a];r+="\n                    @media screen and (max-width: ".concat(i.breakpoint,") {\n                        .p-galleria-thumbnail-items[").concat(P.current,"] .p-galleria-thumbnail-item {\n                            flex: 1 0 ").concat(100/i.numVisible,"%\n                        }\n                    }\n                ")}}j.current.innerHTML=r},Q=function(){if(E.current&&T.current){for(var e=window.innerWidth,t={numVisible:n.numVisible},r=0;r<T.current.length;r++){var a=T.current[r];parseInt(a.breakpoint,10)>=e&&(t=a)}u!==t.numVisible&&m(t.numVisible)}};a((function(){E.current&&(P.current=h(),E.current.setAttribute(P.current,"")),F(),Q(),V()})),o((function(){var e=g;C===u&&k===n.activeItemIndex||((e=n.activeItemIndex<=M()?0:n.value.length-u+M()<n.activeItemIndex?u-n.value.length:n.value.length-u<n.activeItemIndex&&u%2==0?-1*n.activeItemIndex+M()+1:-1*n.activeItemIndex+M())!==g&&y(e),E.current.style.transform=n.isVertical?"translate3d(0, ".concat(e*(100/u),"%, 0)"):"translate3d(".concat(e*(100/u),"%, 0, 0)"),k!==n.activeItemIndex&&(b.removeClass(E.current,"p-items-hidden"),E.current.style.transition="transform 500ms ease 0s"))}));var ee,te,ne,re,ae,ie,le,oe=function(){if(n.showThumbnailNavigators){var t=!n.circular&&0===n.activeItemIndex||n.value.length<=u,r=d("p-galleria-thumbnail-prev p-link",{"p-disabled":t}),a=v({className:"p-galleria-thumbnail-prev-icon"},n.ptm("previousThumbnailIcon")),i=f.getJSXIcon(n.isVertical?n.prevThumbnailIcon||e.createElement(S,a):n.prevThumbnailIcon||e.createElement(x,a),Y({},a),{props:n}),l=v({className:r,onClick:X,disabled:t},n.ptm("previousThumbnailButton"));return e.createElement("button",l,i,e.createElement(p,null))}return null},ce=function(){if(n.showThumbnailNavigators){var t=!n.circular&&n.activeItemIndex===n.value.length-1||n.value.length<=u,r=d("p-galleria-thumbnail-next p-link",{"p-disabled":t}),a=v({className:"p-galleria-thumbnail-next-icon"},n.ptm("nextThumbnailIcon")),i=f.getJSXIcon(n.isVertical?n.nextThumbnailIcon||e.createElement(O,a):n.nextThumbnailIcon||e.createElement(w,a),Y({},a),{props:n}),l=v({className:r,onClick:W,disabled:t},n.ptm("nextThumbnailButton"));return e.createElement("button",l,i,e.createElement(p,null))}return null},ue=(ee=n.value.map((function(t,r){var a=-1*g,i=a+u-1;return e.createElement(Z,{key:r,index:r,template:n.itemTemplate,item:t,active:a<=r&&i>=r,start:a===r,end:i===r,onItemClick:K,current:n.activeItemIndex===r,ptm:n.ptm})})),te=n.isVertical?n.contentHeight:"",ne=oe(),re=ce(),ae=v({className:"p-galleria-thumbnail-container"},n.ptm("thumbnailContainer")),ie=v({className:"p-galleria-thumbnail-items-container",style:{height:te}},n.ptm("thumbnailItemsContainer")),le=v({ref:E,className:"p-galleria-thumbnail-items",onTransitionEnd:_,onTouchStart:z,onTouchMove:L,onTouchEnd:U},n.ptm("thumbnailItems")),e.createElement("div",ae,ne,e.createElement("div",ie,e.createElement("div",le,ee)),re)),me=v({className:"p-galleria-thumbnail-wrapper"},n.ptm("thumbnailWrapper"));return e.createElement("div",me,ue)})));function _(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function z(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?_(Object(n),!0).forEach((function(t){j(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):_(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}Z.displayName="GalleriaThumbnailItem",K.displayName="GalleriaThumbnails";var L=e.memo(e.forwardRef((function(a,i){var l=H.getProps(a),o=D(e.useState(!1),2),h=o[0],y=o[1],x=D(e.useState(l.numVisible),2),w=x[0],O=x[1],S=D(e.useState(!1),2),E=S[0],N=S[1],P=D(e.useState(l.activeIndex),2),j=P[0],T=P[1],C=e.useRef(null),k=e.useRef(null),A=e.useRef(null),V=l.onItemChange?l.activeIndex:j,R="left"===l.thumbnailsPosition||"right"===l.thumbnailsPosition,M=H.setMetaData({props:l,state:{visible:h,numVisible:w,slideShowActive:E,activeIndex:j}}).ptm;c((function(){B({index:l.circular&&l.value.length-1===V?0:V+1})}),l.transitionInterval,E);var B=function(e){e.index>=l.value.length?q():l.onItemChange?l.onItemChange(e):T(e.index)},G=function(){y(!0)},J=function(){y(!1)},W=function(){b.addClass(document.body,"p-overflow-hidden")},Y=function(){g.set("modal",A.current,t.autoZIndex,l.baseZIndex||t.zIndex.modal),b.addMultipleClasses(A.current,"p-component-overlay p-component-overlay-enter")},Z=function(){l.onShow&&l.onShow()},_=function(){b.removeClass(document.body,"p-overflow-hidden"),b.addClass(A.current,"p-component-overlay-leave")},L=function(){g.clear(A.current),l.onHide&&l.onHide()},U=function(){return E},$=function(){N(!0)},q=function(){N(!1)},F=function(e,t){var n=["top","left","bottom","right"].find((function(e){return e===t}));return n?"".concat(e,"-").concat(n):""};e.useEffect((function(){l.value&&l.value.length<w&&O(l.value.length)}),[l.value,w]),e.useEffect((function(){O(l.numVisible)}),[l.numVisible]),u((function(){E&&q(),g.clear(A.current)})),e.useImperativeHandle(i,(function(){return{props:l,show:G,hide:J,isAutoPlayActive:U,startSlideShow:$,stopSlideShow:q,getElement:function(){return C.current},getPreviewContent:function(){return k.current}}}));return I.isNotEmpty(l.value)&&function(){var a,i,o,c,u,b,I,g,y,x,O,S,N,P=(o=l.showThumbnails&&F("p-galleria-thumbnails",l.thumbnailsPosition),c=l.showIndicators&&F("p-galleria-indicators",l.indicatorsPosition),u=d("p-galleria p-component",l.className,{"p-galleria-fullscreen":l.fullScreen,"p-galleria-indicator-onitem":l.showIndicatorsOnItem,"p-galleria-item-nav-onhover":l.showItemNavigatorsOnHover&&!l.fullScreen,"p-input-filled":"filled"===t.inputStyle,"p-ripple-disabled":!1===t.ripple},o,c),b=v({className:{className:"p-galleria-close-icon","aria-hidden":!0}},M("closeIcon")),I=f.getJSXIcon(l.closeIcon||e.createElement(m,b),z({},b),{props:l}),g=v({type:"button",className:"p-galleria-close p-link","aria-label":n("close"),onClick:J},M("closeButton")),y=l.fullScreen&&e.createElement("button",g,I,e.createElement(p,null)),a=v({className:"p-galleria-header"},M("header")),x=l.header?e.createElement("div",a,l.header):null,i=v({className:"p-galleria-footer"},M("footer")),O=l.footer?e.createElement("div",i,l.footer):null,S=v({ref:C,id:l.id,className:u,style:l.style},H.getOtherProps(l),M("root")),N=v({className:"p-galleria-content"},M("content")),e.createElement("div",S,y,x,e.createElement("div",N,e.createElement(X,{ref:k,value:l.value,activeItemIndex:V,onActiveItemChange:B,itemTemplate:l.item,circular:l.circular,caption:l.caption,showIndicators:l.showIndicators,itemPrevIcon:l.itemPrevIcon,itemNextIcon:l.itemNextIcon,changeItemOnIndicatorHover:l.changeItemOnIndicatorHover,indicator:l.indicator,showItemNavigators:l.showItemNavigators,autoPlay:l.autoPlay,slideShowActive:E,startSlideShow:$,stopSlideShow:q,ptm:M}),l.showThumbnails&&e.createElement(K,{value:l.value,activeItemIndex:V,onActiveItemChange:B,itemTemplate:l.thumbnail,numVisible:w,nextThumbnailIcon:l.nextThumbnailIcon,prevThumbnailIcon:l.prevThumbnailIcon,responsiveOptions:l.responsiveOptions,circular:l.circular,isVertical:R,contentHeight:l.verticalThumbnailViewPortHeight,showThumbnailNavigators:l.showThumbnailNavigators,autoPlay:l.autoPlay,slideShowActive:E,stopSlideShow:q,ptm:M})),O));if(l.fullScreen){var j=d("p-galleria-mask",{"p-galleria-visible":h}),T=v({ref:A,className:j},M("mask"));return e.createElement(s,{element:e.createElement("div",T,e.createElement(r,{nodeRef:C,classNames:"p-galleria",in:h,timeout:{enter:150,exit:150},options:l.transitionOptions,unmountOnExit:!0,onEnter:W,onEntering:Y,onEntered:Z,onExit:_,onExited:L},P))})}return P}()})));L.displayName="Galleria";export{L as Galleria};

package/galleria/galleria.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.galleria = (function (exports, React, PrimeReact, csstransition, hooks, portal, ripple, utils, chevronleft, chevronright, chevronup, chevrondown, times) {
+this.primereact.galleria = (function (exports, React, PrimeReact, csstransition, hooks, times, portal, ripple, utils, componentbase, chevronleft, chevronright, chevrondown, chevronup) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,21 +25,6 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
@@ -136,7 +121,7 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var GalleriaBase = {
+  var GalleriaBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Galleria',
       id: null,
@@ -175,15 +160,11 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
       transitionOptions: null,
       onItemChange: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, GalleriaBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, GalleriaBase.defaultProps);
     }
-  };
+  });
 
+  function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var GalleriaItem = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var next = function next() {
       var nextItemIndex = props.activeItemIndex + 1;
@@ -250,20 +231,20 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
           'p-disabled': isDisabled
         });
         var iconClassName = 'p-galleria-item-prev-icon';
-        var icon = props.itemPrevIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, {
+        var previousItemIconProps = utils.mergeProps({
           className: iconClassName
-        });
-        var itemPrevIcon = utils.IconUtils.getJSXIcon(icon, {
-          className: iconClassName
-        }, {
+        }, props.ptm('previousItemIcon'));
+        var icon = props.itemPrevIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, previousItemIconProps);
+        var itemPrevIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$2({}, previousItemIconProps), {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
+        var previousItemButtonProps = utils.mergeProps({
+          type: 'button',
           className: buttonClassName,
           onClick: navBackward,
           disabled: isDisabled
-        }, itemPrevIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, props.ptm('previousItemButton'));
+        return /*#__PURE__*/React__namespace.createElement("button", previousItemButtonProps, itemPrevIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
@@ -274,29 +255,30 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
           'p-disabled': isDisabled
         });
         var iconClassName = 'p-galleria-item-next-icon';
-        var icon = props.itemNextIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, {
+        var nextItemIconProps = utils.mergeProps({
           className: iconClassName
-        });
-        var itemNextIcon = utils.IconUtils.getJSXIcon(icon, {
-          className: iconClassName
-        }, {
+        }, props.ptm('nextItemIcon'));
+        var icon = props.itemNextIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, nextItemIconProps);
+        var itemNextIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$2({}, nextItemIconProps), {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
+        var nextItemButtonProps = utils.mergeProps({
+          type: 'button',
           className: buttonClassName,
           onClick: navForward,
           disabled: isDisabled
-        }, itemNextIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, props.ptm('nextItemButton'));
+        return /*#__PURE__*/React__namespace.createElement("button", nextItemButtonProps, itemNextIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
     var createCaption = function createCaption() {
+      var captionProps = utils.mergeProps({
+        className: 'p-galleria-caption'
+      }, props.ptm('caption'));
       if (props.caption) {
         var _content = props.caption(props.value[props.activeItemIndex]);
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-galleria-caption"
-        }, _content);
+        return /*#__PURE__*/React__namespace.createElement("div", captionProps, _content);
       }
       return null;
     };
@@ -307,14 +289,7 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
         'p-highlight': isActive
       });
       var indicator = props.indicator && props.indicator(index);
-      if (!indicator) {
-        indicator = /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          tabIndex: -1,
-          className: "p-link"
-        }, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
-      }
-      return /*#__PURE__*/React__namespace.createElement("li", {
+      var indicatorProps = utils.mergeProps({
         className: className,
         key: key,
         tabIndex: 0,
@@ -327,18 +302,27 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
         onKeyDown: function onKeyDown(e) {
           return onIndicatorKeyDown(e, index);
         }
-      }, indicator);
+      }, props.ptm('indicator'));
+      if (!indicator) {
+        indicator = /*#__PURE__*/React__namespace.createElement("button", {
+          type: "button",
+          tabIndex: -1,
+          className: "p-link"
+        }, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }
+      return /*#__PURE__*/React__namespace.createElement("li", indicatorProps, indicator);
     };
     var createIndicators = function createIndicators() {
       if (props.showIndicators) {
         var className = utils.classNames('p-galleria-indicators p-reset', props.indicatorsContentClassName);
         var _indicators = [];
+        var indicatorsProps = utils.mergeProps({
+          className: className
+        }, props.ptm('indicators'));
         for (var i = 0; i < props.value.length; i++) {
           _indicators.push(createIndicator(i));
         }
-        return /*#__PURE__*/React__namespace.createElement("ul", {
-          className: className
-        }, _indicators);
+        return /*#__PURE__*/React__namespace.createElement("ul", indicatorsProps, _indicators);
       }
       return null;
     };
@@ -347,14 +331,17 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
     var forwardNavigator = createForwardNavigator();
     var caption = createCaption();
     var indicators = createIndicators();
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    var itemWrapperProps = utils.mergeProps({
       ref: ref,
-      className: "p-galleria-item-wrapper"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-galleria-item-container"
-    }, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-galleria-item"
-    }, content), forwardNavigator, caption), indicators);
+      className: 'p-galleria-item-wrapper'
+    }, props.ptm('itemWrapper'));
+    var itemContainerProps = utils.mergeProps({
+      className: 'p-galleria-item-container'
+    }, props.ptm('itemContainer'));
+    var itemProps = utils.mergeProps({
+      className: 'p-galleria-item'
+    }, props.ptm('item'));
+    return /*#__PURE__*/React__namespace.createElement("div", itemWrapperProps, /*#__PURE__*/React__namespace.createElement("div", itemContainerProps, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", itemProps, content), forwardNavigator, caption), indicators);
   }));
   GalleriaItem.displayName = 'GalleriaItem';
 
@@ -374,6 +361,8 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
     return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
   }
 
+  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var GalleriaThumbnailItem = /*#__PURE__*/React__namespace.memo(function (props) {
     var onItemClick = function onItemClick(event) {
       props.onItemClick({
@@ -397,14 +386,16 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
       'p-galleria-thumbnail-item-start': props.start,
       'p-galleria-thumbnail-item-end': props.end
     }, props.className);
-    return /*#__PURE__*/React__namespace.createElement("div", {
+    var thumbnailItemProps = utils.mergeProps({
       className: className
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-galleria-thumbnail-item-content",
+    }, props.ptm('thumbnailItem'));
+    var thumbnailItemContentProps = utils.mergeProps({
+      className: 'p-galleria-thumbnail-item-content',
       tabIndex: tabIndex,
       onClick: onItemClick,
       onKeyDown: onItemKeyDown
-    }, content));
+    }, props.ptm('thumbnailItemContent'));
+    return /*#__PURE__*/React__namespace.createElement("div", thumbnailItemProps, /*#__PURE__*/React__namespace.createElement("div", thumbnailItemContentProps, content));
   });
   var GalleriaThumbnails = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState(props.numVisible),
@@ -631,7 +622,8 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
           start: start,
           end: end,
           onItemClick: onItemClick,
-          current: current
+          current: current,
+          ptm: props.ptm
         });
       });
     };
@@ -642,21 +634,19 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
           'p-disabled': isDisabled
         });
         var iconClassName = 'p-galleria-thumbnail-prev-icon';
-        var icon = props.isVertical ? props.prevThumbnailIcon || /*#__PURE__*/React__namespace.createElement(chevronup.ChevronUpIcon, {
-          className: iconClassName
-        }) : props.prevThumbnailIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, {
+        var previousThumbnailIconProps = utils.mergeProps({
           className: iconClassName
-        });
-        var prevThumbnailIcon = utils.IconUtils.getJSXIcon(icon, {
-          className: iconClassName
-        }, {
+        }, props.ptm('previousThumbnailIcon'));
+        var icon = props.isVertical ? props.prevThumbnailIcon || /*#__PURE__*/React__namespace.createElement(chevronup.ChevronUpIcon, previousThumbnailIconProps) : props.prevThumbnailIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, previousThumbnailIconProps);
+        var prevThumbnailIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, previousThumbnailIconProps), {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("button", {
+        var previousThumbnailButtonProps = utils.mergeProps({
           className: buttonClassName,
           onClick: navBackward,
           disabled: isDisabled
-        }, prevThumbnailIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, props.ptm('previousThumbnailButton'));
+        return /*#__PURE__*/React__namespace.createElement("button", previousThumbnailButtonProps, prevThumbnailIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
@@ -667,21 +657,19 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
           'p-disabled': isDisabled
         });
         var iconClassName = 'p-galleria-thumbnail-next-icon';
-        var icon = props.isVertical ? props.nextThumbnailIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, {
-          className: iconClassName
-        }) : props.nextThumbnailIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, {
-          className: iconClassName
-        });
-        var nextThumbnailIcon = utils.IconUtils.getJSXIcon(icon, {
+        var nextThumbnailIconProps = utils.mergeProps({
           className: iconClassName
-        }, {
+        }, props.ptm('nextThumbnailIcon'));
+        var icon = props.isVertical ? props.nextThumbnailIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, nextThumbnailIconProps) : props.nextThumbnailIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, nextThumbnailIconProps);
+        var nextThumbnailIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, nextThumbnailIconProps), {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("button", {
+        var nextThumbnailButtonProps = utils.mergeProps({
           className: buttonClassName,
           onClick: navForward,
           disabled: isDisabled
-        }, nextThumbnailIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        }, props.ptm('nextThumbnailButton'));
+        return /*#__PURE__*/React__namespace.createElement("button", nextThumbnailButtonProps, nextThumbnailIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       }
       return null;
     };
@@ -690,26 +678,30 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
       var height = props.isVertical ? props.contentHeight : '';
       var backwardNavigator = createBackwardNavigator();
       var forwardNavigator = createForwardNavigator();
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-galleria-thumbnail-container"
-      }, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-galleria-thumbnail-items-container",
+      var thumbnailContainerProps = utils.mergeProps({
+        className: 'p-galleria-thumbnail-container'
+      }, props.ptm('thumbnailContainer'));
+      var thumbnailItemsContainerProps = utils.mergeProps({
+        className: 'p-galleria-thumbnail-items-container',
         style: {
           height: height
         }
-      }, /*#__PURE__*/React__namespace.createElement("div", {
+      }, props.ptm('thumbnailItemsContainer'));
+      var thumbnailItemsProps = utils.mergeProps({
         ref: itemsContainerRef,
-        className: "p-galleria-thumbnail-items",
+        className: 'p-galleria-thumbnail-items',
         onTransitionEnd: onTransitionEnd,
         onTouchStart: onTouchStart,
         onTouchMove: onTouchMove,
         onTouchEnd: onTouchEnd
-      }, items)), forwardNavigator);
+      }, props.ptm('thumbnailItems'));
+      return /*#__PURE__*/React__namespace.createElement("div", thumbnailContainerProps, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", thumbnailItemsContainerProps, /*#__PURE__*/React__namespace.createElement("div", thumbnailItemsProps, items)), forwardNavigator);
     };
     var content = createContent();
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-galleria-thumbnail-wrapper"
-    }, content);
+    var thumbnailWrapperProps = utils.mergeProps({
+      className: 'p-galleria-thumbnail-wrapper'
+    }, props.ptm('thumbnailWrapper'));
+    return /*#__PURE__*/React__namespace.createElement("div", thumbnailWrapperProps, content);
   }));
   GalleriaThumbnailItem.displayName = 'GalleriaThumbnailItem';
   GalleriaThumbnails.displayName = 'GalleriaThumbnails';
@@ -739,6 +731,16 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
     var maskRef = React__namespace.useRef(null);
     var activeItemIndex = props.onItemChange ? props.activeIndex : activeIndexState;
     var isVertical = props.thumbnailsPosition === 'left' || props.thumbnailsPosition === 'right';
+    var _GalleriaBase$setMeta = GalleriaBase.setMetaData({
+        props: props,
+        state: {
+          visible: visibleState,
+          numVisible: numVisibleState,
+          slideShowActive: slideShowActiveState,
+          activeIndex: activeIndexState
+        }
+      }),
+      ptm = _GalleriaBase$setMeta.ptm;
     hooks.useInterval(function () {
       onActiveItemChange({
         index: props.circular && props.value.length - 1 === activeItemIndex ? 0 : activeItemIndex + 1
@@ -827,23 +829,24 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
       };
     });
     var createHeader = function createHeader() {
+      var headerProps = utils.mergeProps({
+        className: 'p-galleria-header'
+      }, ptm('header'));
       if (props.header) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-galleria-header"
-        }, props.header);
+        return /*#__PURE__*/React__namespace.createElement("div", headerProps, props.header);
       }
       return null;
     };
     var createFooter = function createFooter() {
+      var footerProps = utils.mergeProps({
+        className: 'p-galleria-footer'
+      }, ptm('footer'));
       if (props.footer) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-galleria-footer"
-        }, props.footer);
+        return /*#__PURE__*/React__namespace.createElement("div", footerProps, props.footer);
       }
       return null;
     };
     var createElement = function createElement() {
-      var otherProps = GalleriaBase.getOtherProps(props);
       var thumbnailsPosClassName = props.showThumbnails && getPositionClassName('p-galleria-thumbnails', props.thumbnailsPosition);
       var indicatorPosClassName = props.showIndicators && getPositionClassName('p-galleria-indicators', props.indicatorsPosition);
       var galleriaClassName = utils.classNames('p-galleria p-component', props.className, {
@@ -857,26 +860,32 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
         className: 'p-galleria-close-icon',
         'aria-hidden': true
       };
-      var icon = props.closeIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, iconProps);
-      var closeIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+      var closeIconProps = utils.mergeProps({
+        className: iconProps
+      }, ptm('closeIcon'));
+      var icon = props.closeIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, closeIconProps);
+      var closeIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, closeIconProps), {
         props: props
       });
-      var closeButton = props.fullScreen && /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "p-galleria-close p-link",
-        "aria-label": PrimeReact.localeOption('close'),
+      var closeButtonProps = utils.mergeProps({
+        type: 'button',
+        className: 'p-galleria-close p-link',
+        'aria-label': PrimeReact.localeOption('close'),
         onClick: hide
-      }, closeIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }, ptm('closeButton'));
+      var closeButton = props.fullScreen && /*#__PURE__*/React__namespace.createElement("button", closeButtonProps, closeIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       var header = createHeader();
       var footer = createFooter();
-      var element = /*#__PURE__*/React__namespace.createElement("div", _extends({
+      var rootProps = utils.mergeProps({
         ref: elementRef,
         id: props.id,
         className: galleriaClassName,
         style: props.style
-      }, otherProps), closeButton, header, /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-galleria-content"
-      }, /*#__PURE__*/React__namespace.createElement(GalleriaItem, {
+      }, GalleriaBase.getOtherProps(props), ptm('root'));
+      var contentProps = utils.mergeProps({
+        className: 'p-galleria-content'
+      }, ptm('content'));
+      var element = /*#__PURE__*/React__namespace.createElement("div", rootProps, closeButton, header, /*#__PURE__*/React__namespace.createElement("div", contentProps, /*#__PURE__*/React__namespace.createElement(GalleriaItem, {
         ref: previewContentRef,
         value: props.value,
         activeItemIndex: activeItemIndex,
@@ -893,7 +902,8 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
         autoPlay: props.autoPlay,
         slideShowActive: slideShowActiveState,
         startSlideShow: startSlideShow,
-        stopSlideShow: stopSlideShow
+        stopSlideShow: stopSlideShow,
+        ptm: ptm
       }), props.showThumbnails && /*#__PURE__*/React__namespace.createElement(GalleriaThumbnails, {
         value: props.value,
         activeItemIndex: activeItemIndex,
@@ -909,7 +919,8 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
         showThumbnailNavigators: props.showThumbnailNavigators,
         autoPlay: props.autoPlay,
         slideShowActive: slideShowActiveState,
-        stopSlideShow: stopSlideShow
+        stopSlideShow: stopSlideShow,
+        ptm: ptm
       })), footer);
       return element;
     };
@@ -919,10 +930,11 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
         var maskClassName = utils.classNames('p-galleria-mask', {
           'p-galleria-visible': visibleState
         });
-        var galleriaWrapper = /*#__PURE__*/React__namespace.createElement("div", {
+        var maskProps = utils.mergeProps({
           ref: maskRef,
           className: maskClassName
-        }, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
+        }, ptm('mask'));
+        var galleriaWrapper = /*#__PURE__*/React__namespace.createElement("div", maskProps, /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
           nodeRef: elementRef,
           classNames: "p-galleria",
           "in": visibleState,
@@ -954,4 +966,4 @@ this.primereact.galleria = (function (exports, React, PrimeReact, csstransition,
 
   return exports;
 
-})({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.portal, primereact.ripple, primereact.utils, primereact.icons.chevronleft, primereact.icons.chevronright, primereact.icons.chevronup, primereact.icons.chevrondown, primereact.icons.times);
+})({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.icons.times, primereact.portal, primereact.ripple, primereact.utils, primereact.componentbase, primereact.icons.chevronleft, primereact.icons.chevronright, primereact.icons.chevrondown, primereact.icons.chevronup);