primereact/carousel/carousel.esm.min.js

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

import*as e from"react";import t,{PrimeReactContext as n,localeOption as r,ariaLabel as a}from"primereact/api";import{ComponentBase as o,useHandleStyle as i}from"primereact/componentbase";import{useMergeProps as c,usePrevious as l,useResizeListener as u,useMountEffect as s,useUpdateEffect as p}from"primereact/hooks";import{ChevronDownIcon as m}from"primereact/icons/chevrondown";import{ChevronLeftIcon as f}from"primereact/icons/chevronleft";import{ChevronRightIcon as d}from"primereact/icons/chevronright";import{ChevronUpIcon as v}from"primereact/icons/chevronup";import{Ripple as b}from"primereact/ripple";import{classNames as h,UniqueComponentId as y,DomHandler as g,ObjectUtils as x,IconUtils as w}from"primereact/utils";function I(e){return I="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},I(e)}function S(e,t){if("object"!==I(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==I(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function N(e){var t=S(e,"string");return"symbol"===I(t)?t:String(t)}function E(){return E=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},E.apply(this,arguments)}function C(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 O(e){if(Array.isArray(e))return C(e)}function P(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function j(e,t){if(e){if("string"==typeof e)return C(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)?C(e,t):void 0}}function k(){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 A(e){return O(e)||P(e)||j(e)||k()}function D(e){if(Array.isArray(e))return e}function R(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,c=[],l=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=o.call(n)).done)&&(c.push(r.value),c.length!==t);l=!0);}catch(e){u=!0,a=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw a}}return c}}function T(){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 B(e,t){return D(e)||R(e,t)||j(e,t)||T()}var V=o.extend({defaultProps:{__TYPE:"Carousel",id:null,value:null,page:0,header:null,footer:null,style:null,className:null,itemTemplate:null,circular:!1,showIndicators:!0,showNavigators:!0,autoplayInterval:0,numVisible:1,numScroll:1,prevIcon:null,nextIcon:null,responsiveOptions:null,orientation:"horizontal",verticalViewPortHeight:"300px",contentClassName:null,containerClassName:null,indicatorsContentClassName:null,onPageChange:null,children:void 0},css:{classes:{root:function(e){var t=e.isVertical;return h("p-carousel p-component",{"p-carousel-vertical":t,"p-carousel-horizontal":!t})},container:"p-carousel-container",content:"p-carousel-content",indicators:"p-carousel-indicators p-reset",header:"p-carousel-header",footer:"p-carousel-footer",itemsContainer:"p-carousel-items-container",itemsContent:"p-carousel-items-content",previousButton:function(e){return h("p-carousel-prev p-link",{"p-disabled":e.isDisabled})},previousButtonIcon:"p-carousel-prev-icon",nextButton:function(e){return h("p-carousel-next p-link",{"p-disabled":e.isDisabled})},nextButtonIcon:"p-carousel-next-icon",indicator:function(e){return h("p-carousel-indicator",{"p-highlight":e.isActive})},indicatorButton:"p-link",itemCloned:function(e){var t=e.itemProps;return h(t.className,"p-carousel-item",{"p-carousel-item-active":t.active,"p-carousel-item-start":t.start,"p-carousel-item-end":t.end})},item:function(e){var t=e.itemProps;return h(t.className,"p-carousel-item",{"p-carousel-item-active":t.active,"p-carousel-item-start":t.start,"p-carousel-item-end":t.end})}},styles:"\n@layer primereact {\n    .p-carousel {\n        display: flex;\n        flex-direction: column;\n    }\n    \n    .p-carousel-content {\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n    }\n    \n    .p-carousel-prev,\n    .p-carousel-next {\n        align-self: center;\n        flex-grow: 0;\n        flex-shrink: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-carousel-container {\n        display: flex;\n        flex-direction: row;\n    }\n    \n    .p-carousel-items-content {\n        overflow: hidden;\n        width: 100%;\n    }\n    \n    .p-carousel-items-container {\n        display: flex;\n        flex-direction: row;\n    }\n    \n    .p-carousel-indicators {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n    \n    .p-carousel-indicator > button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    /* Vertical */\n    .p-carousel-vertical .p-carousel-container {\n        flex-direction: column;\n    }\n    \n    .p-carousel-vertical .p-carousel-items-container {\n        flex-direction: column;\n        height: 100%;\n    }\n    \n    /* Keyboard Support */\n    .p-items-hidden .p-carousel-item {\n        visibility: hidden;\n    }\n    \n    .p-items-hidden .p-carousel-item.p-carousel-item-active {\n        visibility: visible;\n    }\n}\n",inlineStyles:{itemsContent:function(e){return{height:e.height}}}}});function M(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 H(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?M(Object(n),!0).forEach((function(t){var r,a,o;r=e,o=n[t],(a=N(a=t))in r?Object.defineProperty(r,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[a]=o})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):M(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var L=e.memo((function(t){var n=c(),r=t.ptm,a=t.cx,o=t.className&&"p-carousel-item-cloned"===t.className?"itemCloned":"item",i=t.template(t.item),l=n({className:a(o,{itemProps:t}),role:t.role,"aria-roledescription":t.ariaRoledescription,"aria-label":t.ariaLabel,"aria-hidden":t.ariaHidden,"data-p-carousel-item-active":t.active,"data-p-carousel-item-start":t.start,"data-p-carousel-item-end":t.end},r(o));return e.createElement("div",l,i)})),X=e.memo(e.forwardRef((function(o,I){var S=c(),N=e.useContext(n),C=V.getProps(o,N),O=B(e.useState(C.numVisible),2),P=O[0],j=O[1],k=B(e.useState(C.numScroll),2),D=k[0],R=k[1],T=B(e.useState(C.page*C.numScroll*-1),2),M=T[0],X=T[1],_=B(e.useState(C.page),2),U=_[0],Y=_[1],z=V.setMetaData({props:C,state:{numVisible:P,numScroll:D,totalShiftedItems:M,page:U}}),J=z.ptm,K=z.cx,F=z.sx,W=z.isUnstyled;i(V.css.styles,W,{name:"carousel"});var $=e.useRef(null),q=e.useRef(null),G=e.useRef(0),Q=e.useRef(!!C.autoplayInterval),Z=e.useRef(""),ee=e.useRef(20),te=e.useRef(null),ne=e.useRef(null),re=e.useRef(null),ae=e.useRef(null),oe=e.useRef(!1),ie=e.useRef(null),ce=l(D),le=l(P),ue=l(C.value),se=l(C.page),pe="vertical"===C.orientation,me=C.circular||!!C.autoplayInterval,fe=me&&C.value&&C.value.length>=P,de=C.value?Math.max(Math.ceil((C.value.length-P)/D)+1,0):0,ve=de&&C.autoplayInterval&&Q.current,be=C.onPageChange&&!ve,he=be?C.page:U,ye=B(u({listener:function(){xe()},when:C.responsiveOptions}),1)[0],ge=function(e,t){var n=M;null!=t?(n=D*t*-1,fe&&(n-=P),oe.current=!1):(n+=D*e,oe.current&&(n+=G.current-D*e,oe.current=!1),t=Math.abs(Math.floor((fe?n+P:n)/D)));fe&&U===de-1&&-1===e?(n=-1*(C.value.length+P),t=0):fe&&0===U&&1===e?(n=0,t=de-1):t===de-1&&G.current>0&&(n+=-1*G.current-D*e,oe.current=!0),q.current&&(!W()&&g.removeClass(q.current,"p-items-hidden"),Xe(n),q.current.style.transition="transform 500ms ease 0s"),_e(t),X(n)},xe=function(){if(q.current&&ie.current){for(var e=window.innerWidth,t={numVisible:C.numVisible,numScroll:C.numScroll},n=0;n<ie.current.length;n++){var r=ie.current[n];parseInt(r.breakpoint,10)>=e&&(t=r)}if(D!==t.numScroll){var a=Math.floor(he*D/t.numScroll),o=t.numScroll*a*-1;fe&&(o-=t.numVisible),X(o),R(t.numScroll),_e(a)}P!==t.numVisible&&j(t.numVisible)}},we=function(e,t){(me||0!==he)&&ge(1,t),Q.current=!1,e.cancelable&&e.preventDefault()},Ie=function(e,t){(me||he<de-1)&&ge(-1,t),Q.current=!1,e.cancelable&&e.preventDefault()},Se=function(e,t){t>he?Ie(e,t):t<he&&we(e,t)},Ne=function(e){q.current&&"transform"===e.propertyName&&(g.addClass(q.current,"p-items-hidden"),q.current.style.transition="",0!==U&&U!==de-1||!fe||Xe(M))},Ee=function(e){var t=e.changedTouches[0];te.current={x:t.pageX,y:t.pageY}},Ce=function(e){e.cancelable&&e.preventDefault()},Oe=function(e){var t=e.changedTouches[0];Pe(e,pe?t.pageY-te.current.y:t.pageX-te.current.x)},Pe=function(e,t){Math.abs(t)>ee.current&&(t<0?Ie(e):we(e))},je=function(e){switch(e.code){case"ArrowRight":ke();break;case"ArrowLeft":Ae();break;case"Home":De(),e.preventDefault();break;case"End":Re(),e.preventDefault();break;case"ArrowUp":case"ArrowDown":e.preventDefault();break;case"Tab":Te()}},ke=function(){var e=A(g.find(ae.current,'[data-pc-section="indicator"]')),t=Be();Ve(t,t+1===e.length?e.length-1:t+1)},Ae=function(){var e=Be();Ve(e,e-1<=0?0:e-1)},De=function(){var e=Be();Ve(e,0)},Re=function(){var e=A(g.find(ae.current,'[data-pc-section="indicator"]r')),t=Be();Ve(t,e.length-1)},Te=function(){var e=A(g.find(ae.current,'[data-pc-section="indicator"]')),t=e.findIndex((function(e){return!0===g.getAttribute(e,"data-p-highlight")})),n=g.findSingle(ae.current,'[data-pc-section="indicator"] > button[tabindex="0"]'),r=e.findIndex((function(e){return e===n.parentElement}));e[r].children[0].tabIndex="-1",e[t].children[0].tabIndex="0"},Be=function(){var e=A(g.find(ae.current,'[data-pc-section="indicator"]')),t=g.findSingle(ae.current,'[data-pc-section="indicator"] > button[tabindex="0"]');return e.findIndex((function(e){return e===t.parentElement}))},Ve=function(e,t){var n=A(g.find(ae.current,'[data-pc-section="indicator"]'));n[e].children[0].tabIndex="-1",n[t].children[0].tabIndex="0",n[t].children[0].focus()},Me=function(){C.autoplayInterval>0&&(ne.current=setInterval((function(){ge(-1,U===de-1?0:U+1)}),C.autoplayInterval))},He=function(){ne.current&&clearInterval(ne.current)},Le=function(){re.current||(re.current=g.createInlineStyle(N&&N.nonce||t.nonce,N&&N.styleContainer));var e="\n            .p-carousel[".concat(Z.current,"] .p-carousel-item {\n                flex: 1 0 ").concat(100/P,"%\n            }\n        ");if(C.responsiveOptions){var n=x.localeComparator(N&&N.locale||t.locale);ie.current=A(C.responsiveOptions),ie.current.sort((function(e,r){return x.sort(e.breakpoint,r.breakpoint,-1,n,N&&N.nullSortOrder||t.nullSortOrder)}));for(var r=0;r<ie.current.length;r++){var a=ie.current[r];e+="\n                    @media screen and (max-width: ".concat(a.breakpoint,") {\n                        .p-carousel[").concat(Z.current,"] .p-carousel-item {\n                            flex: 1 0 ").concat(100/a.numVisible,"%\n                        }\n                    }\n                ")}xe()}re.current.innerHTML=e},Xe=function(e){q.current&&(q.current.style.transform=pe?"translate3d(0, ".concat(e*(100/P),"%, 0)"):"translate3d(".concat(e*(100/P),"%, 0, 0)"))},_e=function(e){!be&&Y(e),C.onPageChange&&C.onPageChange({page:e})};e.useImperativeHandle(I,(function(){return{props:C,startAutoplay:Me,stopAutoplay:He,getElement:function(){return $.current}}})),s((function(){$.current&&(Z.current=y(),$.current.setAttribute(Z.current,"")),re.current||(xe(),Xe(M),ye())})),p((function(){var e=!1,t=M;if(Le(),C.autoplayInterval&&He(),ce!==D||le!==P||C.value&&ue&&ue.length!==C.value.length){G.current=(C.value.length-P)%D;var n=he;0!==de&&n>=de&&(_e(n=de-1),e=!0),t=n*D*-1,fe&&(t-=P),n===de-1&&G.current>0?(t+=-1*G.current+D,oe.current=!0):oe.current=!1,t!==M&&(X(t),e=!0),Xe(t)}return fe&&(0===U?t=-1*P:0===t&&(t=-1*C.value.length,G.current>0&&(oe.current=!0)),t!==M&&(X(t),e=!0)),se!==C.page&&(C.page>se&&C.page<=de-1?ge(-1,C.page):C.page<se&&ge(1,C.page)),!e&&ve&&Me(),function(){C.autoplayInterval&&He(),re.current=g.removeInlineStyle(re.current)}}));var Ue,Ye,ze,Je,Ke,Fe,We,$e=function(e){return a("slideNumber",{slideNumber:e})},qe=function(){if(C.value&&C.value.length){var t=null,n=null;if(fe){var a=null;t=(a=C.value.slice(-1*P)).map((function(t,n){return e.createElement(L,{key:n+"_scloned",className:"p-carousel-item-cloned",template:C.itemTemplate,item:t,active:-1*M===C.value.length+P,start:0===n,end:n===a.length-1,ptm:J,cx:K})})),n=(a=C.value.slice(0,P)).map((function(t,n){return e.createElement(L,{key:n+"_fcloned",className:"p-carousel-item-cloned",template:C.itemTemplate,item:t,active:0===M,start:0===n,end:n===a.length-1,ptm:J,cx:K})}))}var o=C.value.map((function(t,n){var a=fe?-1*(M+P):-1*M,o=a+P-1,i=a<=n&&o>=n,c=a===n,l=o===n,u=a>n||o<n||void 0,s=$e(n),p=r("aria")?r("aria").slide:void 0;return e.createElement(L,{key:n,template:C.itemTemplate,item:t,active:i,start:c,ariaHidden:u,ariaLabel:s,ariaRoledescription:p,role:"group",end:l,ptm:J,cx:K})}));return e.createElement(e.Fragment,null,t,o,n)}},Ge=function(){if(C.showNavigators){var t=(!me||C.value&&C.value.length<P)&&0===he,n=S({className:K("previousButtonIcon")},J("previousButtonIcon")),a=w.getJSXIcon(pe?C.prevIcon||e.createElement(v,n):C.prevIcon||e.createElement(f,n),H({},n),{props:C}),o=S({type:"button",className:K("previousButton",{isDisabled:t}),onClick:function(e){return we(e)},disabled:t,"aria-label":r("aria")?r("aria").previousPageLabel:void 0,"data-pc-group-section":"navigator"},J("previousButton"));return e.createElement("button",o,a,e.createElement(b,null))}return null},Qe=function(){if(C.showNavigators){var t=(!me||C.value&&C.value.length<P)&&(he===de-1||0===de),n=S({className:K("nextButtonIcon")},J("nextButtonIcon")),a=w.getJSXIcon(pe?C.nextIcon||e.createElement(m,n):C.nextIcon||e.createElement(d,n),H({},n),{props:C}),o=S({type:"button",className:K("nextButton",{isDisabled:t}),onClick:function(e){return Ie(e)},disabled:t,"aria-label":r("aria")?r("aria").nextPageLabel:void 0,"data-pc-group-section":"navigator"},J("nextButton"));return e.createElement("button",o,a,e.createElement(b,null))}return null},Ze=function(t){var n,r=he===t,o=function(e){return J(e,{context:{active:r}})},i="carousel-indicator-"+t,c=S({className:K("indicator",{isActive:r}),"data-p-highlight":r},o("indicator")),l=S({type:"button",className:K("indicatorButton"),tabIndex:he===t?"0":"-1",onClick:function(e){return Se(e,t)},"aria-label":(n=t+1,a("pageLabel",{page:n})),"aria-current":he===t?"page":void 0},o("indicatorButton"));return e.createElement("li",E({},c,{key:i}),e.createElement("button",l,e.createElement(b,null)))},et=(Ue=qe(),Ye=pe?C.verticalViewPortHeight:"auto",ze=Ge(),Je=Qe(),Ke=S({className:K("itemsContent"),style:F("itemsContent",{height:Ye}),onTouchStart:function(e){return Ee(e)},onTouchMove:function(e){return Ce(e)},onTouchEnd:function(e){return Oe(e)}},J("itemsContent")),Fe=S({className:h(C.containerClassName,K("container")),"aria-live":Q.current?"polite":"off"},J("container")),We=S({className:K("itemsContainer"),onTransitionEnd:Ne},J("itemsContainer")),e.createElement("div",Fe,ze,e.createElement("div",Ke,e.createElement("div",E({ref:q},We),Ue)),Je)),tt=function(){if(C.showIndicators){for(var t=[],n=0;n<de;n++)t.push(Ze(n));var r=S({ref:ae,className:h(C.indicatorsContentClassName,K("indicators")),onKeyDown:je},J("indicators"));return e.createElement("ul",r,t)}return null}(),nt=function(){if(C.header){var t=S({className:K("header")},J("header"));return e.createElement("div",t,C.header)}return null}(),rt=function(){if(C.footer){var t=S({className:K("footer")},J("footer"));return e.createElement("div",t,C.footer)}return null}(),at=S({id:C.id,ref:$,className:h(C.className,K("root",{isVertical:pe})),style:C.style,role:"region"},V.getOtherProps(C),J("root")),ot=S({className:h(C.contentClassName,K("content"))},J("content"));return e.createElement("div",at,nt,e.createElement("div",ot,et,tt),rt)})));L.displayName="CarouselItem",X.displayName="Carousel";export{X as Carousel};