primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
2 lines (1 loc) • 32.8 kB
JavaScript
import*as e from"react";import n,{localeOption as t,ariaLabel as i,PrimeReactContext as a}from"primereact/api";import{ComponentBase as r,useHandleStyle as l}from"primereact/componentbase";import{CSSTransition as o}from"primereact/csstransition";import{useMergeProps as c,useMountEffect as u,usePrevious as s,useResizeListener as m,useUpdateEffect as p,useGlobalOnEscapeKey as d,ESC_KEY_HANDLING_PRIORITIES as f,useInterval as h,useUnmountEffect as b}from"primereact/hooks";import{TimesIcon as v}from"primereact/icons/times";import{Portal as g}from"primereact/portal";import{Ripple as I}from"primereact/ripple";import{classNames as x,IconUtils as y,DomHandler as w,UniqueComponentId as S,ObjectUtils as O,ZIndexUtils as E}from"primereact/utils";import{ChevronLeftIcon as N}from"primereact/icons/chevronleft";import{ChevronRightIcon as P}from"primereact/icons/chevronright";import{ChevronDownIcon as C}from"primereact/icons/chevrondown";import{ChevronUpIcon as T}from"primereact/icons/chevronup";function j(){return j=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)({}).hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},j.apply(null,arguments)}function k(e){return k="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},k(e)}function A(e,n){if("object"!=k(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,n||"default");if("object"!=k(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function D(e){var n=A(e,"string");return"symbol"==k(n)?n:n+""}function R(e,n,t){return(n=D(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function V(e){if(Array.isArray(e))return e}function B(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var i,a,r,l,o=[],c=!0,u=!1;try{if(r=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;c=!1}else for(;!(c=(i=r.call(t)).done)&&(o.push(i.value),o.length!==n);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=t.return&&(l=t.return(),Object(l)!==l))return}finally{if(u)throw a}}return o}}function H(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,i=Array(n);t<n;t++)i[t]=e[t];return i}function _(e,n){if(e){if("string"==typeof e)return H(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?H(e,n):void 0}}function G(){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 M(e,n){return V(e)||B(e,n)||_(e,n)||G()}var U=r.extend({defaultProps:{__TYPE:"Galleria",activeIndex:0,autoPlay:!1,baseZIndex:0,caption:null,changeItemOnIndicatorHover:!1,children:void 0,circular:!1,className:null,closeIcon:null,footer:null,fullScreen:!1,header:null,id:null,indicator:null,indicatorsPosition:"bottom",item:null,itemNextIcon:null,itemPrevIcon:null,nextThumbnailIcon:null,numVisible:3,onHide:null,onItemChange:null,onShow:null,prevThumbnailIcon:null,responsiveOptions:null,showIndicators:!1,showIndicatorsOnItem:!1,showItemNavigators:!1,showItemNavigatorsOnHover:!1,showThumbnailNavigators:!0,showThumbnails:!0,style:null,thumbnail:null,thumbnailsPosition:"bottom",transitionInterval:4e3,transitionOptions:null,value:null,verticalThumbnailViewPortHeight:"300px"},css:{classes:{header:"p-galleria-header",footer:"p-galleria-footer",closeIcon:"p-galleria-close-icon",closeButton:"p-galleria-close p-link",root:function(e){var t=e.props,i=e.context;return x("p-galleria p-component",{"p-galleria-fullscreen":t.fullScreen,"p-galleria-indicator-onitem":t.showIndicatorsOnItem,"p-galleria-item-nav-onhover":t.showItemNavigatorsOnHover&&!t.fullScreen,"p-input-filled":i&&"filled"===i.inputStyle||"filled"===n.inputStyle,"p-ripple-disabled":i&&!1===i.ripple||!1===n.ripple},e.thumbnailsPosClassName,e.indicatorPosClassName)},content:"p-galleria-content",mask:function(e){return x("p-galleria-mask",{"p-galleria-visible":e.visibleState})},thumbnailItem:function(e){var n=e.subProps;return x("p-galleria-thumbnail-item",{"p-galleria-thumbnail-item-current":n.current,"p-galleria-thumbnail-item-active":n.active,"p-galleria-thumbnail-item-start":n.start,"p-galleria-thumbnail-item-end":n.end})},thumbnailItemContent:"p-galleria-thumbnail-item-content",previousThumbnailIcon:"p-galleria-thumbnail-prev-icon",previousThumbnailButton:function(e){return x("p-galleria-thumbnail-prev p-link",{"p-disabled":e.isDisabled})},nextThumbnailIcon:"p-galleria-thumbnail-next-icon",nextThumbnailButton:function(e){return x("p-galleria-thumbnail-next p-link",{"p-disabled":e.isDisabled})},thumbnailContainer:"p-galleria-thumbnail-container",thumbnailItemsContainer:"p-galleria-thumbnail-items-container",thumbnailItems:"p-galleria-thumbnail-items",thumbnailWrapper:"p-galleria-thumbnail-wrapper",previousItemIcon:"p-galleria-item-prev-icon",previousItemButton:function(e){return x("p-galleria-item-prev p-galleria-item-nav p-link",{"p-disabled":e.isDisabled})},nextItemIcon:"p-galleria-item-next-icon",nextItemButton:function(e){return x("p-galleria-item-next p-galleria-item-nav p-link",{"p-disabled":e.isDisabled})},caption:"p-galleria-caption",indicator:function(e){return x("p-galleria-indicator",{"p-highlight":e.isActive})},indicators:"p-galleria-indicators p-reset",itemWrapper:"p-galleria-item-wrapper",itemContainer:"p-galleria-item-container",item:"p-galleria-item",transition:"p-galleria"},styles:"\n@layer primereact {\n .p-galleria-content {\n display: flex;\n flex-direction: column;\n }\n \n .p-galleria-item-wrapper {\n display: flex;\n flex-direction: column;\n position: relative;\n }\n \n .p-galleria-item-container {\n position: relative;\n display: flex;\n height: 100%;\n }\n \n .p-galleria-item-nav {\n position: absolute;\n top: 50%;\n margin-top: -.5rem;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n }\n \n .p-galleria-item-prev {\n left: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n \n .p-galleria-item-next {\n right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n \n .p-galleria-item {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n width: 100%;\n }\n \n .p-galleria-item-nav-onhover .p-galleria-item-nav {\n pointer-events: none;\n opacity: 0;\n transition: opacity .2s ease-in-out;\n }\n \n .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n pointer-events: all;\n opacity: 1;\n }\n \n .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n pointer-events: none;\n }\n \n .p-galleria-caption {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n }\n \n /* Thumbnails */\n .p-galleria-thumbnail-wrapper {\n display: flex;\n flex-direction: column;\n overflow: auto;\n flex-shrink: 0;\n }\n \n .p-galleria-thumbnail-prev,\n .p-galleria-thumbnail-next {\n align-self: center;\n flex: 0 0 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n position: relative;\n }\n \n .p-galleria-thumbnail-prev span,\n .p-galleria-thumbnail-next span {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .p-galleria-thumbnail-container {\n display: flex;\n flex-direction: row;\n }\n \n .p-galleria-thumbnail-items-container {\n overflow: hidden;\n width: 100%;\n }\n \n .p-galleria-thumbnail-items {\n display: flex;\n }\n \n .p-galleria-thumbnail-item {\n overflow: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: .5;\n }\n \n .p-galleria-thumbnail-item:hover {\n opacity: 1;\n transition: opacity .3s;\n }\n \n .p-galleria-thumbnail-item-current {\n opacity: 1;\n }\n \n /* Positions */\n /* Thumbnails */\n .p-galleria-thumbnails-left .p-galleria-content,\n .p-galleria-thumbnails-right .p-galleria-content {\n flex-direction: row;\n }\n \n .p-galleria-thumbnails-left .p-galleria-item-wrapper,\n .p-galleria-thumbnails-right .p-galleria-item-wrapper {\n flex-direction: row;\n }\n \n .p-galleria-thumbnails-left .p-galleria-item-wrapper,\n .p-galleria-thumbnails-top .p-galleria-item-wrapper {\n order: 2;\n }\n \n .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n order: 1;\n }\n \n .p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n .p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n flex-direction: column;\n flex-grow: 1;\n }\n \n .p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n .p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n flex-direction: column;\n height: 100%;\n }\n \n /* Indicators */\n .p-galleria-indicators {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .p-galleria-indicator > button {\n display: inline-flex;\n align-items: center;\n }\n \n .p-galleria-indicators-left .p-galleria-item-wrapper,\n .p-galleria-indicators-right .p-galleria-item-wrapper {\n flex-direction: row;\n align-items: center;\n }\n \n .p-galleria-indicators-left .p-galleria-item-container,\n .p-galleria-indicators-top .p-galleria-item-container {\n order: 2;\n }\n \n .p-galleria-indicators-left .p-galleria-indicators,\n .p-galleria-indicators-top .p-galleria-indicators {\n order: 1;\n }\n \n .p-galleria-indicators-left .p-galleria-indicators,\n .p-galleria-indicators-right .p-galleria-indicators {\n flex-direction: column;\n }\n \n .p-galleria-indicator-onitem .p-galleria-indicators {\n position: absolute;\n display: flex;\n z-index: 1;\n }\n \n .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n top: 0;\n left: 0;\n width: 100%;\n align-items: flex-start;\n }\n \n .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n right: 0;\n top: 0;\n height: 100%;\n align-items: flex-end;\n }\n \n .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n bottom: 0;\n left: 0;\n width: 100%;\n align-items: flex-end;\n }\n \n .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n left: 0;\n top: 0;\n height: 100%;\n align-items: flex-start;\n }\n \n /* FullScreen */\n .p-galleria-mask {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n }\n \n .p-galleria-mask.p-component-overlay {\n pointer-events: auto;\n }\n \n .p-galleria-close {\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n }\n \n .p-galleria-mask .p-galleria-item-nav {\n position: fixed;\n top: 50%;\n margin-top: -.5rem;\n }\n \n /* Animation */\n .p-galleria-enter {\n opacity: 0;\n transform: scale(0.7);\n }\n \n .p-galleria-enter-active {\n opacity: 1;\n transform: scale(1);\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n }\n \n .p-galleria-enter-done {\n transform: none;\n }\n \n .p-galleria-exit {\n opacity: 1;\n }\n \n .p-galleria-exit-active {\n opacity: 0;\n transform: scale(0.7);\n transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n }\n \n .p-galleria-enter-active .p-galleria-item-nav {\n opacity: 0;\n }\n \n /* Keyboard Support */\n .p-items-hidden .p-galleria-thumbnail-item {\n visibility: hidden;\n }\n \n .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n visibility: visible;\n }\n}\n",inlineStyles:{thumbnailItemsContainer:function(e){return{height:e.height}}}}});function L(e){if(Array.isArray(e))return H(e)}function W(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.")}function z(e){return L(e)||W(e)||_(e)||X()}function J(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function Z(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?J(Object(t),!0).forEach((function(n){R(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):J(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var K=e.memo(e.forwardRef((function(n,a){var r=c(),l=e.useRef(null),o=n.ptm,s=n.cx,m=function(e,t){return o(e,Z({hostName:n.hostName},t))},p=function(){n.slideShowActive&&n.stopSlideShow&&n.stopSlideShow()},d=function(e){p(),n.onActiveItemChange({index:n.circular&&0===n.activeItemIndex?n.value.length-1:0!==n.activeItemIndex?n.activeItemIndex-1:0}),e&&e.cancelable&&e.preventDefault()},f=function(e){p(),n.onActiveItemChange({index:n.circular&&n.value.length-1===n.activeItemIndex?0:n.activeItemIndex+1}),e&&e.cancelable&&e.preventDefault()},h=function(e){p(),n.onActiveItemChange({index:e})},b=function(e){n.changeItemOnIndicatorHover&&(p(),n.onActiveItemChange({index:e}))},v=function(e,t){switch(e.code){case"Enter":case"NumpadEnter":case"Space":p(),n.onActiveItemChange({index:t}),e.preventDefault();break;case"ArrowRight":g();break;case"ArrowLeft":S();break;case"Home":O(),e.preventDefault();break;case"End":E(),e.preventDefault();break;case"Tab":C();break;case"ArrowDown":case"ArrowUp":case"PageUp":case"PageDown":e.preventDefault()}},g=function(){var e=z(w.find(l.current,'[data-pc-section="indicator"]')),n=T();k(n,n+1===e.length?e.length-1:n+1)},S=function(){var e=T();k(e,e-1<=0?0:e-1)},O=function(){var e=T();k(e,0)},E=function(){var e=z(w.find(l.current,'[data-pc-section="indicator"]')),n=T();k(n,e.length-1)},C=function(){var e=z(w.find(l.current,'[data-pc-section="indicator"]')),n=e.findIndex((function(e){return!0===w.getAttribute(e,"data-p-highlight")})),t=w.findSingle(l.current,'[data-pc-section="indicator"] > button[tabindex="0"]'),i=e.findIndex((function(e){return e===t.parentElement}));e[i].children[0].tabIndex="-1",e[n].children[0].tabIndex="0"},T=function(){var e=z(w.find(l.current,'[data-pc-section="indicator"]')),n=w.findSingle(l.current,'[data-pc-section="indicator"] > button[tabindex="0"]');return e.findIndex((function(e){return e===n.parentElement}))},k=function(e,n){var t=z(w.find(l.current,'[data-pc-section="indicator"]'));t[e].children[0].tabIndex="-1",t[n].children[0].tabIndex="0",t[n].children[0].focus()};u((function(){n.autoPlay&&n.startSlideShow()}));var A,D=function(t){var a,l="p-galleria-indicator-"+t,o=n.activeItemIndex===t,c=n.indicator&&n.indicator(t),u=r({className:s("indicator",{isActive:o}),tabIndex:0,"aria-label":(a=t+1,i("pageLabel",{page:a})),"aria-selected":n.activeIndex===t,"aria-controls":n.id+"_item_"+t,"data-p-highlight":o,onClick:function(){return h(t)},onMouseEnter:function(){return b(t)},onKeyDown:function(e){return v(e,t)}},m("indicator"));return c||(c=e.createElement("button",{tabIndex:n.activeIndex===t?"0":"-1",type:"button",className:"p-link"},e.createElement(I,null))),e.createElement("li",j({},u,{key:l}),c)},R=n.itemTemplate&&n.itemTemplate(n.value[n.activeItemIndex]),V=function(){if(n.showItemNavigators){var t=!n.circular&&0===n.activeItemIndex,i=r({className:s("previousItemIcon")},m("previousItemIcon")),a=y.getJSXIcon(n.itemPrevIcon||e.createElement(N,i),Z({},i),{props:n}),l=r({type:"button",className:s("previousItemButton",{isDisabled:t}),onClick:d,disabled:t,"data-p-disabled":t,"data-pc-group-section":"itemnavigator"},m("previousItemButton"));return e.createElement("button",l,a,e.createElement(I,null))}return null}(),B=function(){if(n.showItemNavigators){var t=!n.circular&&n.activeItemIndex===n.value.length-1,i=r({className:s("nextItemIcon")},m("nextItemIcon")),a=y.getJSXIcon(n.itemNextIcon||e.createElement(P,i),Z({},i),{props:n}),l=r({type:"button",className:s("nextItemButton",{isDisabled:t}),onClick:f,disabled:t,"data-p-disabled":t,"data-pc-group-section":"itemnavigator"},m("nextItemButton"));return e.createElement("button",l,a,e.createElement(I,null))}return null}(),H=function(){var t=r({className:s("caption")},m("caption"));if(n.caption){var i=n.caption(n.value[n.activeItemIndex]);return e.createElement("div",t,i)}return null}(),_=function(){if(n.showIndicators){for(var t=[],i=r({className:x(n.indicatorsContentClassName,s("indicators"))},m("indicators")),a=0;a<n.value.length;a++)t.push(D(a));return e.createElement("ul",j({ref:l},i),t)}return null}(),G=r({ref:a,className:s("itemWrapper")},m("itemWrapper")),M=r({className:s("itemContainer")},m("itemContainer")),U=r({className:s("item"),id:n.id+"_item_"+n.activeItemIndex,role:"group","aria-label":(A=n.activeItemIndex+1,i("slideNumber",{slideNumber:A})),"aria-roledescription":t("aria")?t("aria").slide:void 0},m("item"));return e.createElement("div",G,e.createElement("div",M,V,e.createElement("div",U,R),B,H),_)})));function Y(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function F(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?Y(Object(t),!0).forEach((function(n){R(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):Y(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}K.displayName="GalleriaItem";var $=e.memo((function(n){var t,a=c(),r=n.ptm,l=n.cx,o=function(e,t){return r(e,F({hostName:n.hostName},t))},u=function(){var e=w.find(n.itemsContainerRef.current,'[data-pc-section="thumbnailitem"]'),t=f();h(t,t+1===e.length?e.length-1:t+1)},s=function(){var e=f();h(e,e-1<=0?0:e-1)},m=function(){var e=f();h(e,0)},p=function(){var e=w.find(n.itemsContainerRef.current,'[data-pc-section="thumbnailitem"]'),t=f();h(t,e.length-1)},d=function(){var e=z(w.find(n.itemsContainerRef.current,'[data-pc-section="thumbnailitem"]')),t=e.findIndex((function(e){return!0===w.getAttribute(e,"data-p-active")})),i=w.findSingle(n.itemsContainerRef.current,'[tabindex="0"]'),a=e.findIndex((function(e){return e===i.parentElement}));e[a].children[0].tabIndex="-1",e[t].children[0].tabIndex="0"},f=function(){var e=z(w.find(n.itemsContainerRef.current,'[data-pc-section="thumbnailitem"]')),t=w.findSingle(n.itemsContainerRef.current,'[data-pc-section="thumbnailitem"] > [tabindex="0"]');return e.findIndex((function(e){return e===t.parentElement}))},h=function(e,t){var i=w.find(n.itemsContainerRef.current,'[data-pc-section="thumbnailitem"]');i[e].children[0].tabIndex="-1",i[t].children[0].tabIndex="0",i[t].children[0].focus()},b=n.template&&n.template(n.item),v=a({className:x(n.className,l("thumbnailItem",{subProps:n})),role:"tab","data-p-active":n.current,"aria-selected":n.current,"aria-controls":n.containerId+"_item_"+n.index,onKeyDown:function(e){switch("Enter"!==e.code&&"NumpadEnter"!==e.code&&"Space"!==e.code||(n.onItemClick({originalEvent:e,index:n.index}),e.preventDefault()),e.code){case"ArrowRight":u();break;case"ArrowLeft":s();break;case"Home":m(),e.preventDefault();break;case"End":p(),e.preventDefault();break;case"ArrowUp":case"ArrowDown":e.preventDefault();break;case"Tab":d()}},"data-p-galleria-thumbnail-item-current":n.current,"data-p-galleria-thumbnail-item-active":n.active,"data-p-galleria-thumbnail-item-start":n.start,"data-p-galleria-thumbnail-item-end":n.end},o("thumbnailItem")),g=a({className:l("thumbnailItemContent"),tabIndex:n.current?"0":"-1","aria-label":(t=n.index+1,i("pageLabel",{page:t})),"aria-current":n.current?"page":void 0,onClick:function(e){n.onItemClick({originalEvent:e,index:n.index})}},o("thumbnailItemContent"));return e.createElement("div",j({},v,{key:n.index+"_galleriathumbnailitem"}),e.createElement("div",g,b))})),q=e.memo(e.forwardRef((function(i,r){var l=c(),o=M(e.useState(i.numVisible),2),d=o[0],f=o[1],h=M(e.useState(0),2),b=h[0],v=h[1],g=e.useRef(null),x=e.useRef(null),E=e.useRef(""),j=e.useRef(null),k=e.useRef(null),A=s(d),D=s(i.activeItemIndex),R=e.useContext(a),V=i.ptm,B=i.cx,H=i.sx,_=function(e,n){return V(e,F({hostName:i.hostName},n))},G=M(m({listener:function(){ie()},when:i.responsiveOptions}),1)[0],U=function(e){var n=b+e;e<0&&-1*n+d>i.value.length-1?n=d-i.value.length:e>0&&n>0&&(n=0),i.circular&&(e<0&&i.value.length-1===i.activeItemIndex?n=0:e>0&&0===i.activeItemIndex&&(n=d-i.value.length)),g.current&&(w.removeClass(g.current,"p-items-hidden"),g.current.style.transform=i.isVertical?"translate3d(0, ".concat(n*(100/d),"%, 0)"):"translate3d(".concat(n*(100/d),"%, 0, 0)"),g.current.style.transition="transform 500ms ease 0s"),v(n)},L=function(){i.slideShowActive&&i.stopSlideShow&&i.stopSlideShow()},W=function(){var e=Math.floor(d/2);return d%2?e:e-1},X=function(e){L();var n=0!==i.activeItemIndex?i.activeItemIndex-1:0;d-(n+b)-1>W()&&(-1*b!=0||i.circular)&&U(1),i.onActiveItemChange({index:i.circular&&0===i.activeItemIndex?i.value.length-1:n}),e.cancelable&&e.preventDefault()},J=function(e){L();var n=i.activeItemIndex+1;n+b>W()&&(-1*b<ne()-1||i.circular)&&U(-1),i.onActiveItemChange({index:i.circular&&i.value.length-1===i.activeItemIndex?0:n}),e.cancelable&&e.preventDefault()},Z=function(e){L();var n=e.index;if(n!==i.activeItemIndex){var t=n+b,a=0;n<i.activeItemIndex?(a=d-t-1-W())>0&&-1*b!=0&&U(a):(a=W()-t)<0&&-1*b<ne()-1&&U(a),i.onActiveItemChange({index:n})}},K=function(e){g.current&&"transform"===e.propertyName&&(document.body.setAttribute("data-p-items-hidden","false"),!i.isUnstyled()&&w.addClass(g.current,"p-items-hidden"),g.current.style.transition="")},Y=function(e){var n=e.changedTouches[0];x.current={x:n.pageX,y:n.pageY}},q=function(e){e.cancelable&&e.preventDefault()},Q=function(e){var n=e.changedTouches[0];ee(e,i.isVertical?n.pageY-x.current.y:n.pageX-x.current.x)},ee=function(e,n){n<0?J(e):X(e)},ne=function(){return i.value.length>d?i.value.length-d+1:0},te=function(){j.current||(j.current=w.createInlineStyle(R&&R.nonce||n.nonce,R&&R.styleContainer));var e='\n [data-pc-section="thumbnailitems"]['.concat(E.current,'] {\n [data-pc-section="thumbnailitem"] {\n flex: 1 0 ').concat(100/d,"%\n }\n } \n ");if(i.responsiveOptions){var t=O.localeComparator(R&&R.locale||n.locale);k.current=z(i.responsiveOptions),k.current.sort((function(e,i){return O.sort(e.breakpoint,i.breakpoint,-1,t,R&&R.nullSortOrder||n.nullSortOrder)}));for(var a=0;a<k.current.length;a++){var r=k.current[a];e+="\n @media screen and (max-width: ".concat(r.breakpoint,') {\n [data-pc-section="thumbnailitems"][').concat(E.current,'] {\n [data-pc-section="thumbnailitem"] {\n flex: 1 0 ').concat(100/r.numVisible,"%\n }\n } \n }\n ")}}j.current.innerHTML=e},ie=function(){if(g.current&&k.current){for(var e=window.innerWidth,n={numVisible:i.numVisible},t=0;t<k.current.length;t++){var a=k.current[t];parseInt(a.breakpoint,10)>=e&&(n=a)}d!==n.numVisible&&f(n.numVisible)}};u((function(){g.current&&(E.current=S(),g.current.setAttribute(E.current,"")),te(),ie(),G()})),p((function(){var e=b;A===d&&D===i.activeItemIndex||((e=i.activeItemIndex<=W()?0:i.value.length-d+W()<i.activeItemIndex?d-i.value.length:i.value.length-d<i.activeItemIndex&&d%2==0?-1*i.activeItemIndex+W()+1:-1*i.activeItemIndex+W())!==b&&v(e),g.current.style.transform=i.isVertical?"translate3d(0, ".concat(e*(100/d),"%, 0)"):"translate3d(".concat(e*(100/d),"%, 0, 0)"),D!==i.activeItemIndex&&(document.body.setAttribute("data-p-items-hidden","false"),!i.isUnstyled()&&w.removeClass(g.current,"p-items-hidden"),g.current.style.transition="transform 500ms ease 0s"))}));var ae,re,le,oe,ce,ue,se,me=function(){if(i.showThumbnailNavigators){var n=!i.circular&&0===i.activeItemIndex||i.value.length<=d,a=l({className:B("previousThumbnailIcon")},_("previousThumbnailIcon")),r=y.getJSXIcon(i.isVertical?i.prevThumbnailIcon||e.createElement(T,a):i.prevThumbnailIcon||e.createElement(N,a),F({},a),{props:i}),o=l({className:B("previousThumbnailButton",{isDisabled:n}),onClick:X,type:"button",disabled:n,"data-p-disabled":n,"aria-label":t("aria")?t("aria").prevPageLabel:void 0,"data-pc-group-section":"thumbnailnavigator"},_("previousThumbnailButton"));return e.createElement("button",o,r,e.createElement(I,null))}return null},pe=function(){if(i.showThumbnailNavigators){var n=!i.circular&&i.activeItemIndex===i.value.length-1||i.value.length<=d,a=l({className:B("nextThumbnailIcon")},_("nextThumbnailIcon")),r=y.getJSXIcon(i.isVertical?i.nextThumbnailIcon||e.createElement(C,a):i.nextThumbnailIcon||e.createElement(P,a),F({},a),{props:i}),o=l({className:B("nextThumbnailButton",{isDisabled:n}),disabled:n,type:"button","aria-label":t("aria")?t("aria").nextPageLabel:void 0,onClick:J,"data-p-disabled":n,"data-pc-group-section":"thumbnailnavigator"},_("nextThumbnailButton"));return e.createElement("button",o,r,e.createElement(I,null))}return null},de=(ae=i.value.map((function(n,t){var a=-1*b,r=a+d-1;return e.createElement($,{key:t,index:t,containerId:i.containerId,itemsContainerRef:g,template:i.itemTemplate,item:n,active:a<=t&&r>=t,start:a===t,end:r===t,onItemClick:Z,current:i.activeItemIndex===t,ptm:V,cx:B,sx:H})})),re=i.isVertical?i.contentHeight:"",le=me(),oe=pe(),ce=l({className:B("thumbnailContainer")},_("thumbnailContainer")),ue=l({className:B("thumbnailItemsContainer"),style:H("thumbnailItemsContainer",{height:re})},_("thumbnailItemsContainer")),se=l({ref:g,className:B("thumbnailItems"),role:"tablist",onTransitionEnd:K,onTouchStart:Y,onTouchMove:q,onTouchEnd:Q},_("thumbnailItems")),e.createElement("div",ce,le,e.createElement("div",ue,e.createElement("div",se,ae)),oe)),fe=l({className:B("thumbnailWrapper")},_("thumbnailWrapper"));return e.createElement("div",fe,de)})));function Q(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);n&&(i=i.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,i)}return t}function ee(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?Q(Object(t),!0).forEach((function(n){R(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):Q(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}$.displayName="GalleriaThumbnailItem",q.displayName="GalleriaThumbnails";var ne=e.memo(e.forwardRef((function(i,r){var u=c(),s=e.useContext(a),m=U.getProps(i,s),p=M(e.useState(!1),2),N=p[0],P=p[1],C=M(e.useState(m.numVisible),2),T=C[0],k=C[1],A=M(e.useState(!1),2),D=A[0],R=A[1],V=M(e.useState(m.activeIndex),2),B=V[0],H=V[1],_=e.useRef(null),G=e.useRef(null),L=e.useRef(null),W=m.onItemChange?m.activeIndex:B,X="left"===m.thumbnailsPosition||"right"===m.thumbnailsPosition,z=m.id||S(),J=U.setMetaData({props:m,state:{visible:N,numVisible:T,slideShowActive:D,activeIndex:B}}),Z=J.ptm,Y=J.cx,F=J.sx,$=J.isUnstyled;l(U.css.styles,$,{name:"galleria"}),d({callback:function(){te()},when:m.closeOnEscape&&m.fullScreen,priority:[f.IMAGE,0]}),h((function(){Q({index:m.circular&&m.value.length-1===W?0:W+1})}),m.transitionInterval,D);var Q=function(e){e.index>=m.value.length?se():m.onItemChange?m.onItemChange(e):H(e.index)},ne=function(){P(!0)},te=function(){P(!1)},ie=function(){w.blockBodyScroll()},ae=function(){E.set("modal",L.current,s&&s.autoZIndex||n.autoZIndex,m.baseZIndex||s&&s.zIndex.modal||n.zIndex.modal),!$()&&w.addMultipleClasses(L.current,"p-component-overlay p-component-overlay-enter")},re=function(){m.onShow&&m.onShow()},le=function(){w.unblockBodyScroll(),!$()&&w.addClass(L.current,"p-component-overlay-leave")},oe=function(){E.clear(L.current),m.onHide&&m.onHide()},ce=function(){return D},ue=function(){R(!0)},se=function(){R(!1)},me=function(e,n){var t=["top","left","bottom","right"].find((function(e){return e===n}));return t?"".concat(e,"-").concat(t):""};e.useEffect((function(){m.value&&m.value.length<T&&k(m.value.length)}),[m.value,T]),e.useEffect((function(){k(m.numVisible)}),[m.numVisible]),b((function(){D&&se(),E.clear(L.current)})),e.useImperativeHandle(r,(function(){return{props:m,show:ne,hide:te,isAutoPlayActive:ce,startSlideShow:ue,stopSlideShow:se,getElement:function(){return _.current},getPreviewContent:function(){return G.current}}}));return O.isNotEmpty(m.value)&&function(){var n,i,a,r,l,c,p,d,f,h,b,w,S=(a=m.showThumbnails&&me("p-galleria-thumbnails",m.thumbnailsPosition),r=m.showIndicators&&me("p-galleria-indicators",m.indicatorsPosition),l=u({className:Y("closeIcon"),"aria-hidden":!0},Z("closeIcon")),c=y.getJSXIcon(m.closeIcon||e.createElement(v,l),ee({},l),{props:m}),p=u({type:"button",className:Y("closeButton"),"aria-label":t("aria")?t("aria").close:void 0,onClick:te},Z("closeButton")),d=m.fullScreen&&e.createElement("button",p,c,e.createElement(I,null)),n=u({className:Y("header")},Z("header")),f=m.header?e.createElement("div",n,m.header):null,i=u({className:Y("footer")},Z("footer")),h=m.footer?e.createElement("div",i,m.footer):null,b=u({ref:_,id:z,className:x(m.className,Y("root",{context:s,thumbnailsPosClassName:a,indicatorPosClassName:r})),style:m.style,role:"region"},U.getOtherProps(m),Z("root")),w=u({className:Y("content"),"aria-live":m.autoPlay?"polite":"off"},Z("content")),e.createElement("div",b,d,f,e.createElement("div",w,e.createElement(K,{hostName:"Galleria",ref:G,id:z,value:m.value,activeItemIndex:W,onActiveItemChange:Q,itemTemplate:m.item,circular:m.circular,caption:m.caption,showIndicators:m.showIndicators,itemPrevIcon:m.itemPrevIcon,itemNextIcon:m.itemNextIcon,changeItemOnIndicatorHover:m.changeItemOnIndicatorHover,indicator:m.indicator,showItemNavigators:m.showItemNavigators,autoPlay:m.autoPlay,slideShowActive:D,startSlideShow:ue,stopSlideShow:se,ptm:Z,cx:Y}),m.showThumbnails&&e.createElement(q,{hostName:"Galleria",value:m.value,containerId:z,activeItemIndex:W,onActiveItemChange:Q,itemTemplate:m.thumbnail,numVisible:T,nextThumbnailIcon:m.nextThumbnailIcon,prevThumbnailIcon:m.prevThumbnailIcon,responsiveOptions:m.responsiveOptions,circular:m.circular,isVertical:X,contentHeight:m.verticalThumbnailViewPortHeight,showThumbnailNavigators:m.showThumbnailNavigators,autoPlay:m.autoPlay,slideShowActive:D,stopSlideShow:se,isUnstyled:$,ptm:Z,cx:Y,sx:F})),h));if(m.fullScreen){var O=u({className:Y("mask",{visibleState:N}),role:"dialog","aria-modal":"true"},Z("mask")),E=u({classNames:Y("transition"),in:N,timeout:{enter:150,exit:150},options:m.transitionOptions,unmountOnExit:!0,onEnter:ie,onEntering:ae,onEntered:re,onExit:le,onExited:oe},Z("transition")),P=e.createElement("div",j({ref:L},O),e.createElement(o,j({nodeRef:_},E),S));return e.createElement(g,{element:P})}return S}()})));ne.displayName="Galleria";export{ne as Galleria};